/* =============================================================================
 * User token-balance pill — header component, every authenticated page.
 * Companion module: app/static/js/dashboard/user-balance-pill.js
 *
 * Visual contract:
 *   * Default state — neutral cyan border, low-emphasis.
 *   * --warning      — yellow border + glow, runway < 7 days.
 *   * --critical     — magenta border + glow, runway < 3 days OR zero balance.
 *
 * The pill is a button: clicking opens the in-app Paddle top-up modal via
 * window.PricingCheckout.openInAppPackagePicker().
 * ============================================================================= */

.user-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.05);
    color: var(--neon-cyan, #0ff);
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(
        0 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
}

.user-balance-pill:hover {
    border-color: rgba(0, 255, 255, 0.6);
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.25);
}

.user-balance-pill:focus-visible {
    outline: 2px solid var(--neon-cyan, #0ff);
    outline-offset: 2px;
}

.user-balance-pill__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.user-balance-pill__amount {
    line-height: 1;
}

.user-balance-pill__separator {
    color: rgba(255, 255, 255, 0.3);
    line-height: 1;
}

.user-balance-pill__runway {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    line-height: 1;
}

.user-balance-pill__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.15);
    color: var(--neon-cyan, #0ff);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* -----------------------------------------------------------------------------
 * Warning state — runway < 7 days.
 * --------------------------------------------------------------------------- */
.user-balance-pill--warning {
    border-color: rgba(255, 215, 0, 0.55);
    background: rgba(255, 215, 0, 0.06);
    color: #ffd700;
}
.user-balance-pill--warning:hover {
    border-color: #ffd700;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.3);
}
.user-balance-pill--warning .user-balance-pill__runway {
    color: rgba(255, 215, 0, 0.9);
}
.user-balance-pill--warning .user-balance-pill__plus {
    background: rgba(255, 215, 0, 0.18);
    color: #ffd700;
}

/* -----------------------------------------------------------------------------
 * Critical state — runway < 3 days OR balance == 0.
 * --------------------------------------------------------------------------- */
.user-balance-pill--critical {
    border-color: rgba(247, 37, 133, 0.6);
    background: rgba(247, 37, 133, 0.08);
    color: var(--neon-magenta, #f72585);
    animation: userBalancePillPulse 2.4s ease-in-out infinite;
}
.user-balance-pill--critical:hover {
    box-shadow: 0 0 24px rgba(247, 37, 133, 0.4);
}
.user-balance-pill--critical .user-balance-pill__runway {
    color: rgba(247, 37, 133, 0.85);
}
.user-balance-pill--critical .user-balance-pill__plus {
    background: rgba(247, 37, 133, 0.2);
    color: var(--neon-magenta, #f72585);
}

@keyframes userBalancePillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 37, 133, 0); }
    50%      { box-shadow: 0 0 18px rgba(247, 37, 133, 0.35); }
}

/* -----------------------------------------------------------------------------
 * Mobile compaction — hide the runway segment on narrow screens, keep the
 * amount + "+" affordance. Pill stays a single tap target.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .user-balance-pill {
        padding: 0 10px;
        font-size: 11px;
    }
    .user-balance-pill__separator,
    .user-balance-pill__runway {
        display: none;
    }
}