/* card_update_banner.css
 * Card-update pill rendered INSIDE the app header.
 * Yellow = informational (needs_update_soon).
 * Red    = blocking (past_due — chat is cut off until updated).
 *
 * Lives inline in the nav strip — no fixed positioning, no layout
 * shift, nothing pushed down or covered up. Just sits among the
 * existing header buttons as a compact warning chip.
 */

.card-update-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.card-update-banner:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.card-update-banner__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.card-update-banner__text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24ch;
}

.card-update-banner__arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
}

/* Yellow — informational (before bill / migration window open) */
.card-update-banner--needs_update_soon {
    background: linear-gradient(180deg, #fff4cc 0%, #ffe48a 100%);
    color: #4a3500;
    border-color: rgba(184, 134, 11, 0.45);
    box-shadow: 0 1px 3px rgba(184, 134, 11, 0.2);
}
.card-update-banner--needs_update_soon:hover {
    background: linear-gradient(180deg, #fff7d6 0%, #ffe89a 100%);
    color: #4a3500;
}

/* Red — blocking (chat cut off until updated). Pulses gently to draw the eye. */
.card-update-banner--past_due {
    background: linear-gradient(180deg, #c82329 0%, #971a20 100%);
    color: #fff;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(184, 29, 36, 0.45);
    animation: card-update-banner-pulse 2.2s ease-in-out infinite;
}
.card-update-banner--past_due:hover {
    background: linear-gradient(180deg, #d62932 0%, #a31d24 100%);
    color: #fff;
    animation: none;
}

@keyframes card-update-banner-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(184, 29, 36, 0.45); }
    50%      { box-shadow: 0 2px 16px rgba(184, 29, 36, 0.85); }
}

/* Hide the text on narrow headers — icon + arrow is enough on mobile. */
@media (max-width: 900px) {
    .card-update-banner__text {
        display: none;
    }
}