/* ============================================================================
 * CRE8WP Hub — Floating icon-only bubble + stacked module list.
 * All colors driven by CSS custom properties inherited from the theme
 * region tokens (--brand-accent, --brand-text, --brand-surface, etc).
 * ========================================================================= */

.cre8wp-hub {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 999990;
    font-family: var(--brand-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* -- Bubble launcher ------------------------------------------------------ */
.cre8wp-hub__bubble {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--brand-accent, #C4265E);
    color: var(--brand-accent-contrast, #FFFFFF);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    position: relative;
}

.cre8wp-hub__bubble:hover,
.cre8wp-hub__bubble:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.20), 0 4px 10px rgba(0,0,0,0.10);
    outline: none;
}

.cre8wp-hub__bubble-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.cre8wp-hub__bubble-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cre8wp-hub__bubble-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-danger, #E11D48);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--brand-surface, #FFFFFF);
    letter-spacing: 0.02em;
}

/* -- Panel --------------------------------------------------------------- */
.cre8wp-hub__panel {
    position: absolute;
    right: 0;
    bottom: calc(60px + 12px);
    width: min(320px, calc(100vw - 32px));
    background: var(--brand-surface, #FFFFFF);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transform-origin: bottom right;
    animation: cre8wp-hub-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.cre8wp-hub__panel[hidden] {
    display: none;
}

@keyframes cre8wp-hub-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.cre8wp-hub__panel-inner {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

/* -- Row (link/button) --------------------------------------------------- */
.cre8wp-hub__row {
    all: unset;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    cursor: pointer;
    color: var(--brand-text, #1A1A1A);
    font-size: 15px;
    font-weight: 500;
    transition: background 140ms ease, color 140ms ease;
    text-decoration: none;
    box-sizing: border-box;
}

.cre8wp-hub__row:hover,
.cre8wp-hub__row:focus-visible {
    background: var(--brand-surface-2, rgba(0,0,0,0.04));
    color: var(--brand-accent, #C4265E);
    outline: none;
}

.cre8wp-hub__row + .cre8wp-hub__row {
    border-top: 1px solid var(--brand-border, rgba(0,0,0,0.06));
}

.cre8wp-hub__row-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--brand-accent, #C4265E);
    display: block;
}

.cre8wp-hub__row-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cre8wp-hub__row-label {
    flex: 1;
    line-height: 1.3;
}

.cre8wp-hub__row-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-danger, #E11D48);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* -- Bumped row (transaction in progress) ------------------------------- */
.cre8wp-hub__row[data-id="buy-sell-tracker"] {
    background: linear-gradient(
        180deg,
        var(--brand-accent-soft, rgba(196, 38, 94, 0.06)) 0%,
        transparent 100%
    );
    font-weight: 600;
}

/* -- Mobile -------------------------------------------------------------- */
@media ( max-width: 480px ) {
    .cre8wp-hub__panel {
        width: calc(100vw - 24px);
        right: -4px;
    }
    .cre8wp-hub__bubble {
        width: 56px;
        height: 56px;
    }
}

/* -- Reduced motion ------------------------------------------------------ */
@media ( prefers-reduced-motion: reduce ) {
    .cre8wp-hub__panel {
        animation: none;
    }
    .cre8wp-hub__bubble,
    .cre8wp-hub__row {
        transition: none;
    }
}