/* ==================================================================
   chat-credits.css: the credit components of the chat (credits launch 4.3)

   Balance pill and its popover, the credits rows of the model picker,
   the zero card, the 75% and 90% warning, the "Get more credits" sheet,
   the first use sheet, the calm stop card, and the effort chip and its
   menu (effort mode). Built by lib/credits-chat.js.

   A new file, so no existing stylesheet changes meaning. Everything is
   scoped under body#chat-page like chat-v2.css, with enough specificity
   to hold whichever of the two loads last.

   Same quiet family as the notices and the feedback card: purple is the
   dot, the focus ring and the one filled button. Amber and red only mark
   a low balance. Nothing here is red like an error.
   ================================================================== */

/* ---- the mode: chat.html carries both variants of its static blocks ----
   lib/auth-page-gate.js sets data-credits on <html> before the first paint.
   !important because a block's own display rule would otherwise win. */
html[data-credits="on"] [data-legacy-only] { display: none !important; }
html:not([data-credits="on"]) [data-credits-only] { display: none !important; }

body#chat-page .credits-pill[hidden],
body#chat-page .agent-calm-action[hidden],
/* A walled card's Continue is hidden by attribute; .btn's own display used to keep it on screen
   (build audit 2026-10-13, D3: 99 clicks on a Continue that could not start anything). */
body#chat-page .agent-error-panel button[hidden],
body#chat-page .credits-sheet-error[hidden] { display: none; }

/* ==================================================================
   MAKER MARKS: a fixed 16px box, so nothing moves when the mark is
   painted. The mark itself is exact white (lib/credits-ui.js): never
   tinted, never dimmed, no chip behind it.
   ================================================================== */

body#chat-page .model-mark {
    display: inline-flex;
    flex: none;
    width: 16px;
    height: 16px;
}
body#chat-page .model-mark svg { display: block; width: 16px; height: 16px; filter: none; opacity: 1; }

/* ==================================================================
   BALANCE PILL (top bar, before Info)
   ================================================================== */

body#chat-page .credits-pill {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin-right: 6px;
    padding: 0 12px;
    border: 1px solid var(--v2-line-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body#chat-page .credits-pill::before,
body#chat-page .credits-pill::after { display: none; }
body#chat-page .credits-pill:hover,
body#chat-page .credits-pill[aria-expanded="true"] {
    border-color: rgba(207, 195, 224, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text);
}
body#chat-page .credits-pill:focus-visible { border-radius: 999px; }

body#chat-page .credits-pill-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v2-accent);
}

/* amber at 25% left, red at 10% left and at zero */
body#chat-page .credits-pill.is-amber { border-color: rgba(251, 191, 36, 0.34); }
body#chat-page .credits-pill.is-amber .credits-pill-dot { background: var(--lp-amber, #fbbf24); }
body#chat-page .credits-pill.is-red,
body#chat-page .credits-pill.is-zero { border-color: rgba(248, 113, 113, 0.38); }
body#chat-page .credits-pill.is-red .credits-pill-dot,
body#chat-page .credits-pill.is-zero .credits-pill-dot { background: #f87171; }

/* ---- popover: anchored under the pill like the model menu is to its button.
   lib/credits-chat.js sets --cp-top / --cp-right from the pill's rect.
   Above the settings sheet (9000) and its backdrop, below the modals. ---- */

body#chat-page .credits-popover {
    position: fixed;
    top: var(--cp-top, 58px);
    right: var(--cp-right, 16px);
    z-index: 9010;
    display: none;
    width: 304px;
    max-width: calc(100vw - 16px);
    padding: 14px 16px 12px;
    border: 1px solid var(--v2-line-2);
    border-radius: 13px;
    background: #1d1829;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    color: var(--v2-text);
    text-align: left;
}
body#chat-page .credits-popover.is-open { display: block; }

body#chat-page .credits-popover-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--v2-text);
}
body#chat-page .credits-popover-row { padding: 9px 0; border-top: 1px solid var(--v2-line); }
body#chat-page .credits-popover-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
body#chat-page .credits-popover-label { font-size: 13px; font-weight: 500; color: var(--v2-text-2); }
body#chat-page .credits-popover-value {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--v2-text);
    white-space: nowrap;
}
body#chat-page .credits-popover-note,
body#chat-page .credits-popover-line {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--v2-text-3);
}
body#chat-page .credits-popover-line { padding-top: 9px; border-top: 1px solid var(--v2-line); margin-top: 0; }
body#chat-page .credits-popover-foot { padding-top: 10px; border-top: 1px solid var(--v2-line); }

/* ---- links and buttons shared by every credits component ---- */

body#chat-page .credits-link {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: #c4b5fd;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}
body#chat-page .credits-link::before,
body#chat-page .credits-link::after { display: none; }
body#chat-page .credits-link:hover { color: #ddd0f5; text-decoration: underline; }
body#chat-page .credits-popover-foot .credits-link { font-size: 13px; }

body#chat-page .credits-btn {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body#chat-page .credits-btn::before,
body#chat-page .credits-btn::after { display: none; }
body#chat-page .credits-btn--primary { background: var(--v2-fill); color: #fff; }
body#chat-page .credits-btn--primary:hover { background: var(--v2-fill-hover); color: #fff; }
body#chat-page .credits-btn--quiet {
    border-color: var(--v2-line-2);
    background: transparent;
    color: var(--v2-text-2);
}
body#chat-page .credits-btn--quiet:hover { background: rgba(255, 255, 255, 0.06); color: var(--v2-text); }
body#chat-page .credits-btn:disabled,
body#chat-page .credits-btn[aria-disabled="true"] {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.08);
    color: var(--v2-text-3);
    cursor: default;
}

body#chat-page .credits-text-btn {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    color: #c4b5fd;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
}
body#chat-page .credits-text-btn::before,
body#chat-page .credits-text-btn::after { display: none; }
body#chat-page .credits-text-btn:hover { color: #ddd0f5; text-decoration: underline; }

/* ==================================================================
   MODEL PICKER in credits mode: mark, name, "maker · speed", and on
   the right the tick or the plan a locked row needs.
   ================================================================== */

/* five two-line rows and the note need a little more room than three */
html[data-credits="on"] body#chat-page #model-picker-overlay .model-picker-modal {
    width: 344px;
    max-width: 344px;
    max-height: min(74vh, 540px);
}

body#chat-page #model-picker-overlay .model-card.model-card-credits {
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: 8px;
}
body#chat-page #model-picker-overlay .model-card-credits .model-card-body { flex-direction: column; align-items: flex-start; gap: 0; }
body#chat-page #model-picker-overlay .model-card-credits .model-card-name { gap: 8px; overflow: visible; }
body#chat-page #model-picker-overlay .model-card-credits .model-card-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* the second line starts under the name, past the mark and its gap */
body#chat-page #model-picker-overlay .model-card-credits .model-card-hint { margin-left: 24px; }
body#chat-page #model-picker-overlay .model-card-credits .model-card-meta { min-height: 21px; }

/* a locked row dims its text, never the mark */
body#chat-page #model-picker-overlay .model-card-credits.is-locked .model-card-name-text,
body#chat-page #model-picker-overlay .model-card-credits.is-soon .model-card-name-text { color: var(--v2-text-3); }
body#chat-page #model-picker-overlay .model-card-credits.is-locked .model-card-hint,
body#chat-page #model-picker-overlay .model-card-credits.is-soon .model-card-hint { color: rgba(143, 132, 166, 0.78); }
body#chat-page #model-picker-overlay .model-card-credits.is-soon,
body#chat-page #model-picker-overlay .model-card-credits.is-soon:hover { background: transparent; cursor: default; }

body#chat-page #model-picker-overlay .model-card-credits .model-tag-lock,
body#chat-page #model-picker-overlay .model-card-credits .model-tag-soon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
body#chat-page #model-picker-overlay .model-card-credits .model-tag-lock { color: #c4b5fd; }
body#chat-page #model-picker-overlay .model-card-credits .model-tag-lock svg { width: 12px; height: 12px; flex: none; }
body#chat-page #model-picker-overlay .model-card-credits:not(.selected) .model-card-check { display: none; }

/* cost tiers (2026-10-15): "$" to "$$$$" in the row's second line and on the model
   button. $ and $$ stay in the line's own colour, $$$ and up turn a quiet warm amber,
   never red. */
body#chat-page .model-cost-tier {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
body#chat-page .model-cost-tier[data-cost-tier="0"] { font-weight: 500; }
body#chat-page .model-cost-tier[data-cost-tier="3"],
body#chat-page .model-cost-tier[data-cost-tier="4"] { color: var(--rc-warning, #f2b55a); }
body#chat-page #model-picker-overlay .model-card-credits.is-locked .model-cost-tier,
body#chat-page #model-picker-overlay .model-card-credits.is-soon .model-cost-tier { color: inherit; }
body#chat-page #model-picker-btn .model-cost-badge {
    flex: none;
    padding: 1px 6px;
    border-radius: var(--rc-radius-full, 999px);
    background: var(--rc-warning-soft, rgba(242, 181, 90, 0.12));
    font-size: 11px;
    line-height: 16px;
}
body#chat-page #model-picker-btn .model-cost-badge[hidden] { display: none; }

body#chat-page .model-picker-note {
    margin: 0;
    padding: 9px 10px 4px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--v2-text-3);
    text-wrap: pretty;
}

/* the composer button shows the maker's mark in place of the sparkle glyph */
body#chat-page .model-picker-btn:has(.model-mark) #model-picker-label::before { display: none; }
body#chat-page .model-picker-btn .model-mark { margin-right: 1px; }

/* ==================================================================
   EFFORT CHIP AND MENU (effort mode, paid models). A quiet chip right
   after the model button ("Medium" and a chevron) and a small menu
   above it. lib/credits-chat.js paints both. Desktop widths only.
   ================================================================== */

/* The toolbar is ordered by CSS (chat-v2.css, chat-landing.css give the
   model button order 1). Same order, after it in the DOM, so it sits
   right of the model button and never left of it. */
body#chat-page .chat-form-actions .effort-chip { order: 1; flex: 0 0 auto; }

body#chat-page .effort-chip {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* wide enough for "Medium" and its chevron, so the toolbar never shifts when the level changes */
    min-width: 6.7em;
    height: 36px;
    /* the model button's own bottom margin (chat-landing.css), so both share one centre line */
    margin: 0 0 4px 5px;
    padding: 0 8px 0 9px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transform: none;
    transition: background-color .16s ease, color .16s ease;
}
/* the hairline divider between the model button and the chip */
body#chat-page .effort-chip::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 10px;
    bottom: 10px;
    right: auto;
    width: 1px;
    height: auto;
    border-radius: 0;
    background-color: var(--v2-line-2);
}
body#chat-page .effort-chip::after { display: none; }
body#chat-page .effort-chip:hover,
body#chat-page .effort-chip[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text);
}
body#chat-page .effort-chip:focus-visible { border-radius: 8px; }
body#chat-page .effort-chip #effort-chip-label { display: inline-block; }
body#chat-page .effort-chip i,
body#chat-page .effort-chip svg { width: 13px; height: 13px; flex: none; opacity: .6; }

/* the menu: the surface of the credits popover, above the composer,
   below the 9999 limit modals. --em-left / --em-bottom come from the chip. */
body#chat-page .effort-menu {
    position: fixed;
    left: var(--em-left, 16px);
    bottom: var(--em-bottom, 120px);
    z-index: 9010;
    display: none;
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: 6px;
    border: 1px solid var(--v2-line-2);
    border-radius: 13px;
    background: #1d1829;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    color: var(--v2-text);
    text-align: left;
}
body#chat-page .effort-menu.is-open { display: block; }

body#chat-page .effort-menu-kicker {
    padding: 6px 10px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--v2-text-3);
}
body#chat-page .effort-menu-rows { display: flex; flex-direction: column; gap: 1px; }

/* rows: the sizes of the model picker rows */
body#chat-page .effort-menu-row {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 8px 10px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--v2-text);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transform: none;
}
body#chat-page .effort-menu-row::before,
body#chat-page .effort-menu-row::after { display: none; }
body#chat-page .effort-menu-row:hover,
body#chat-page .effort-menu-row:focus-visible {
    background: rgba(255, 255, 255, 0.075);
    outline: none;
}
body#chat-page .effort-menu-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body#chat-page .effort-menu-row-head { display: flex; align-items: baseline; gap: 8px; }
body#chat-page .effort-menu-row-name { font-size: 14.5px; font-weight: 500; color: var(--v2-text); }
body#chat-page .effort-menu-tag { font-size: 11.5px; font-weight: 500; color: var(--v2-text-3); }
body#chat-page .effort-menu-row-line {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--v2-text-3);
    white-space: normal;
}
body#chat-page .effort-menu-check {
    display: inline-flex;
    flex: none;
    justify-content: center;
    width: 16px;
    margin-top: 2px;
    color: var(--v2-accent);
    opacity: 0;
}
body#chat-page .effort-menu-check svg { width: 15px; height: 15px; stroke-width: 2.6; }
body#chat-page .effort-menu-row[aria-checked="true"] .effort-menu-check { opacity: 1; }

body#chat-page .effort-menu-note {
    margin: 6px 4px 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(167, 139, 250, 0.08);
    font-size: 12px;
    line-height: 1.45;
    color: var(--v2-text-2);
}
body#chat-page .effort-menu-foot {
    margin: 6px 0 0;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--v2-line);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--v2-text-3);
}

/* hidden wins over every class rule above that sets display */
body#chat-page .effort-chip[hidden], body#chat-page .effort-menu[hidden] { display: none; }

/* the one line under the empty state heading */
body#chat-page .chat-ai-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--v2-text-3);
    text-align: center;
}

/* ==================================================================
   ZERO CARD: in the message column, where the reply would have been.
   Never a red error.
   ================================================================== */

body#chat-page .chat-messages > .chat-credits-card {
    display: flex;
    justify-content: flex-start;
    animation: chatCreditsIn .22s cubic-bezier(.22, .61, .36, 1) backwards;
}
@keyframes chatCreditsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

body#chat-page .chat-credits-card__panel {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    max-width: 600px;
    padding: 14px 16px;
    border: 1px solid rgba(167, 139, 250, 0.30);
    border-radius: 12px;
    background: var(--v2-card);
    text-align: left;
}
body#chat-page .chat-credits-card__panel .chat-notice-dot { margin-top: 7px; }
body#chat-page .chat-credits-card__copy { flex: 1 1 auto; min-width: 0; }
body#chat-page .chat-credits-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--v2-text);
}
body#chat-page .chat-credits-card__text {
    margin: 3px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--v2-text-2);
    overflow-wrap: anywhere;
}
body#chat-page .chat-credits-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 12px;
}

/* ---- The free card's offer (offer_v1, owner 2026-10-13): every option with its price and one
   checkout button; the 50 credit pack is the quick option. Two columns when the chat is wide,
   one column with only the quick pack, Pro and "See all plans" when it is narrow. The refill
   time is the quiet last line. ---- */
body#chat-page .chat-credits-card__panel--offer { max-width: 640px; padding: 16px 18px 14px; border-color: rgba(167, 139, 250, 0.24); }
body#chat-page .chat-credits-card__panel--offer .chat-credits-card__copy { container-type: inline-size; }
body#chat-page .chat-credits-card__panel--offer .chat-credits-card__title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; }
body#chat-page .chat-credits-card__panel--offer .chat-credits-card__text { margin-top: 2px; font-size: 13px; line-height: 1.5; }
body#chat-page .zero-offer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 14px;
}
body#chat-page .zero-offer__group { min-width: 0; }
body#chat-page .zero-offer__label {
    margin: 0 0 7px 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--v2-text-3);
    opacity: .85;
}
body#chat-page .zero-offer__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body#chat-page .zero-offer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 6px 7px 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color .16s ease, background-color .16s ease;
}
body#chat-page .zero-offer__row:hover {
    border-color: rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.032);
}
body#chat-page .zero-offer__row--quick,
body#chat-page .zero-offer__row--quick:hover {
    border-color: rgba(167, 139, 250, 0.38);
    background: rgba(124, 58, 237, 0.09);
}
body#chat-page .zero-offer__row--quick:hover { border-color: rgba(167, 139, 250, 0.48); }
body#chat-page .zero-offer__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body#chat-page .zero-offer__name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 18px;
    color: var(--v2-text);
    font-variant-numeric: tabular-nums;
}
body#chat-page .zero-offer__tag {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
}
body#chat-page .zero-offer__meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--v2-text-3);
    overflow-wrap: anywhere;
}
body#chat-page .zero-offer__buy {
    flex: none;
    min-width: 80px;
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
}
/* Plan prices carry "/mo": one width for the column so the buttons line up. */
body#chat-page .zero-offer__group + .zero-offer__group .zero-offer__buy { min-width: 96px; }
body#chat-page .zero-offer__buy.credits-btn--quiet {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: var(--v2-text);
}
body#chat-page .zero-offer__buy.credits-btn--quiet:hover { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); }
body#chat-page .zero-offer__buy.credits-btn--quiet:active { background: rgba(255, 255, 255, 0.085); }
body#chat-page .zero-offer__buy.credits-btn--primary:active { filter: brightness(.93); }
body#chat-page .zero-offer__buy:focus-visible,
body#chat-page .zero-offer__more .credits-text-btn:focus-visible {
    outline: 2px solid rgba(196, 181, 253, 0.85);
    outline-offset: 2px;
}
body#chat-page .zero-offer__more { margin-top: 10px; }
body#chat-page .zero-offer__message { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--v2-text-2); }
body#chat-page .zero-offer__message[hidden] { display: none; }
body#chat-page .zero-offer__more .credits-text-btn { margin-left: -6px; font-size: 13px; }
body#chat-page .zero-offer__foot {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--v2-text-3);
    opacity: .8;
}
/* ---- Premium finish (owner 2026-10-16): richer charcoal, hairline violet-grey border, soft
   depth, raised price buttons, a sharper chosen pack. Same layout, content and behaviour. ---- */
body#chat-page .chat-credits-card__panel--offer {
    border: 1px solid rgba(196, 181, 253, 0.16);
    background: linear-gradient(180deg, #17141d 0%, #131118 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25);
}
body#chat-page .chat-credits-card__panel--offer .chat-credits-card__title { color: #f4f2f8; }
body#chat-page .chat-credits-card__panel--offer .chat-credits-card__text { color: rgba(236, 233, 243, 0.68); }
body#chat-page .zero-offer__label { color: rgba(236, 233, 243, 0.50); opacity: 1; }
body#chat-page .zero-offer__row {
    border-color: rgba(255, 255, 255, 0.065);
    background: rgba(255, 255, 255, 0.028);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
}
body#chat-page .zero-offer__row:hover {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}
body#chat-page .zero-offer__row--quick,
body#chat-page .zero-offer__row--quick:hover {
    border-color: rgba(167, 139, 250, 0.55);
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.13) 0%, rgba(124, 58, 237, 0.08) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
body#chat-page .zero-offer__row--quick:hover { border-color: rgba(167, 139, 250, 0.68); }
body#chat-page .zero-offer__name { font-weight: 650; color: #f4f2f8; letter-spacing: -0.003em; }
body#chat-page .zero-offer__meta { color: rgba(236, 233, 243, 0.58); }
body#chat-page .zero-offer__tag {
    height: 16px;
    padding: 0 6px;
    background: rgba(167, 139, 250, 0.13);
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.22) inset;
    color: #cdbffd;
    font-size: 10px;
    letter-spacing: .02em;
}
body#chat-page .zero-offer__buy { font-feature-settings: "tnum" 1; letter-spacing: 0; }
body#chat-page .zero-offer__buy.credits-btn--quiet {
    border-color: rgba(255, 255, 255, 0.085);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.30);
    color: #f1eef7;
}
body#chat-page .zero-offer__buy.credits-btn--quiet:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}
body#chat-page .zero-offer__buy.credits-btn--quiet:active {
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset;
}
body#chat-page .zero-offer__buy.credits-btn--primary {
    border-color: rgba(196, 181, 253, 0.35);
    background: linear-gradient(180deg, #8650f2 0%, #7434e6 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
}
body#chat-page .zero-offer__buy.credits-btn--primary:hover { background: linear-gradient(180deg, #9061f5 0%, #7d3fee 100%); }
body#chat-page .zero-offer__buy.credits-btn--primary:active {
    filter: none;
    background: linear-gradient(180deg, #7033df 0%, #6a2fd8 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset;
}
body#chat-page .zero-offer__foot { color: rgba(236, 233, 243, 0.48); opacity: 1; }
@container (max-width: 459px) {
    body#chat-page .zero-offer { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body#chat-page .zero-offer [data-offer-extra] { display: none; }
}

/* ==================================================================
   WARNING at 75% and 90% used: the nudge banner above the composer,
   in the calm palette, with a dismiss.
   ================================================================== */

body#chat-page .quota-limit-banner.quota-limit-banner--credits {
    border-color: rgba(251, 191, 36, 0.26);
    background: var(--v2-card);
    box-shadow: none;
}
body#chat-page .quota-limit-banner--credits .quota-limit-banner-icon {
    background: rgba(251, 191, 36, 0.10);
    color: var(--lp-amber, #fbbf24);
}
body#chat-page .quota-limit-banner--credits .quota-limit-banner-copy strong { color: var(--v2-text); }
body#chat-page .quota-limit-banner--credits .credits-warning-close { margin: 0 -2px 0 2px; }

/* ==================================================================
   SHEETS: "Get more credits" and the first use sheet. The overlay is
   the backdrop, the body element is the card.
   ================================================================== */

body#chat-page #credits-options-overlay,
body#chat-page #model-first-use-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 4, 16, 0.62);
}
body#chat-page #credits-options-overlay.is-open,
body#chat-page #model-first-use-overlay.is-open {
    display: flex;
    animation: creditsSheetFade .15s ease both;
}
@keyframes creditsSheetFade { from { opacity: 0; } to { opacity: 1; } }

body#chat-page #credits-options-body,
body#chat-page #model-first-use-body {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(92vh, 100%);
    margin: 0;
    padding: 24px 24px 20px;
    overflow-y: auto;
    border: 1px solid var(--v2-hair-strong);
    border-radius: 18px;
    background: #15101f;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
    color: var(--v2-text);
    text-align: left;
    animation: none;
}
body#chat-page #model-first-use-body { max-width: 480px; }

body#chat-page .credits-sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
}
body#chat-page .credits-sheet-title {
    margin: 0;
    padding: 0 40px 0 0;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--v2-text);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    text-align: left;
}
body#chat-page .credits-sheet-text {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--v2-text-2);
    text-align: left;
}
body#chat-page .credits-sheet-foot {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--v2-text-3);
}
body#chat-page .credits-sheet-foot--first { margin-top: 16px; }
body#chat-page .credits-sheet-error {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #f8a5a5;
}
body#chat-page .credits-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

body#chat-page .credits-options-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
body#chat-page .credits-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 14px 14px 12px;
    border: 1px solid var(--v2-line-2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}
body#chat-page .credits-option-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--v2-text); }
body#chat-page .credits-option-price {
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--v2-text);
}
body#chat-page .credits-option-line { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--v2-text-2); }
body#chat-page .credits-option .credits-btn { margin-top: auto; }
body#chat-page .credits-option-spacer { flex: 1 1 auto; min-height: 12px; }

/* the consent line of the first use sheet */
body#chat-page .credits-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 13px;
    border: 1px solid var(--v2-line-2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--v2-text);
    text-shadow: none;
    cursor: pointer;
}
body#chat-page .credits-consent input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--v2-fill);
    cursor: pointer;
}

/* ==================================================================
   CALM STOP CARD: a cap pause or an out of credits stop. It is stored
   as .agent-error-panel.agent-calm-panel, so it keeps Continue and
   survives a reload. Purple hairline, no red.
   ================================================================== */

body#chat-page .message.ai .agent-error-panel.agent-calm-panel {
    border-color: rgba(167, 139, 250, 0.32);
    background: rgba(167, 139, 250, 0.05);
}
body#chat-page .agent-error-panel.agent-calm-panel .agent-error-title { color: var(--v2-text); }
body#chat-page .agent-error-panel.agent-calm-panel .agent-error-code { display: none; }
body#chat-page .agent-error-panel.agent-calm-panel .agent-error-hint { margin-top: 4px; }
body#chat-page .agent-error-panel.agent-calm-panel .agent-error-actions { flex-wrap: wrap; align-items: flex-start; gap: 8px 14px; }

body#chat-page .agent-calm-action {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
body#chat-page .agent-calm-action-hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--v2-text-3);
    font-variant-numeric: tabular-nums;
}
body#chat-page .agent-calm-action-hint:empty { display: none; }

body#chat-page .agent-error-panel.agent-calm-panel .agent-continue-btn,
body#chat-page .agent-error-panel.agent-calm-panel .agent-get-credits-btn {
    border-color: transparent;
    background: var(--v2-fill);
    color: #fff;
}
body#chat-page .agent-error-panel.agent-calm-panel .agent-continue-btn:not(:disabled):hover,
body#chat-page .agent-error-panel.agent-calm-panel .agent-get-credits-btn:not(:disabled):hover { background: var(--v2-fill-hover); }
body#chat-page .agent-error-panel.agent-calm-panel button:disabled { opacity: 0.6; cursor: default; }

/* ==================================================================
   PLANS POPUP: the Studio card's Recommended tag (credits mode only)

   chat-landing.css paints every .popular-tag on the chat page as a
   filled violet chip. In credits mode the tag is the small tinted
   label that /pricing and /account show (pricing.css, System pass:
   soft violet, a hairline edge, sentence case). The switch off keeps
   today's popup exactly: this rule needs data-pricing-mode="credits".
   ================================================================== */

body#chat-page [data-rocode-pricing][data-pricing-mode="credits"] .popular-tag {
    padding: 1px 7px;
    border: 1px solid var(--rc-accent-line);
    border-radius: var(--rc-radius-xs);
    background: var(--rc-accent-soft);
    box-shadow: none;
    color: var(--rc-accent-strong);
    font-weight: var(--rc-fw-medium);
    line-height: 1.6;
    text-shadow: none;
    text-transform: lowercase;
}

@media (prefers-reduced-motion: reduce) {
    body#chat-page .chat-messages > .chat-credits-card,
    body#chat-page #credits-options-overlay.is-open,
    body#chat-page #model-first-use-overlay.is-open { animation: none; }
    body#chat-page .credits-pill,
    body#chat-page .credits-btn { transition: none; }
}

/* ==================================================================
   The Discord reward popup (lib/discord-bonus.js, owner 2026-10-03):
   after the 5th run, until claimed; "Not now" waits 3 days.
   Discord blurple #5865F2 with the RoCode violet; logos in tiles.
   ================================================================== */
body#chat-page .rc-discord-popup {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: radial-gradient(60% 50% at 50% 45%, rgba(88, 101, 242, 0.16), rgba(6, 5, 12, 0.78) 70%);
    backdrop-filter: blur(6px) saturate(120%);
    animation: rc-dp-fade 0.22s ease-out both;
}
body#chat-page .rc-discord-popup__box {
    position: relative;
    width: min(452px, 100%);
    padding: 30px 26px 20px;
    border-radius: 24px;
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(88, 101, 242, 0.32), rgba(124, 58, 237, 0.10) 45%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(180deg, #1a1726 0%, #131119 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 40px 100px -30px rgba(88, 101, 242, 0.55),
        0 20px 50px -20px rgba(0, 0, 0, 0.8);
    color: #f4f2fa;
    text-align: center;
    animation: rc-dp-rise 0.28s cubic-bezier(.2, .8, .2, 1) both;
}
body#chat-page .rc-discord-popup button::before,
body#chat-page .rc-discord-popup button::after,
body#chat-page .rc-discord-popup a::before,
body#chat-page .rc-discord-popup a::after { content: none; display: none; }

body#chat-page .rc-discord-popup .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the close cross */
body#chat-page .rc-discord-popup .rc-dp-x {
    position: absolute; top: 12px; right: 12px;
    display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0;
    border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.06);
    color: #a9a3b8; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none;
}
body#chat-page .rc-discord-popup .rc-dp-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* the logo row */
body#chat-page .rc-dp-hero { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 18px; }
body#chat-page .rc-dp-tile {
    display: inline-grid; place-items: center; flex: none;
    width: 52px; height: 52px; border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}
body#chat-page .rc-dp-tile svg { width: 28px; height: 28px; }
body#chat-page .rc-dp-tile--discord { background: linear-gradient(180deg, #6f7bf7, #5865f2); color: #fff; }
body#chat-page .rc-dp-tile--roblox { background: linear-gradient(180deg, #ffffff, #e9e9ee); color: #111216; }
body#chat-page .rc-dp-tile--roblox svg { width: 26px; height: 26px; }
body#chat-page .rc-dp-tile--credits {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 30px -10px rgba(124, 58, 237, 0.9);
}
body#chat-page .rc-dp-tile__label { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
body#chat-page .rc-dp-tile--done { width: 60px; height: 60px; border-radius: 999px; background: linear-gradient(135deg, #34d399, #059669); color: #fff; }
body#chat-page .rc-dp-plus { color: #6f6a80; font-size: 16px; font-weight: 600; }

/* the words */
body#chat-page .rc-dp-title { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: #fff; }
body#chat-page .rc-dp-lead { margin: 0 auto 20px; max-width: 34ch; font-size: 14.5px; line-height: 1.55; color: #b8b2c8; }

/* the two steps */
body#chat-page .rc-dp-steps { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; text-align: left; }
body#chat-page .rc-dp-step {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px 10px 10px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body#chat-page .rc-dp-step .rc-dp-tile { width: 38px; height: 38px; border-radius: 11px; }
body#chat-page .rc-dp-step .rc-dp-tile svg { width: 20px; height: 20px; }
body#chat-page .rc-dp-step__text { display: grid; gap: 1px; flex: 1; min-width: 0; }
body#chat-page .rc-dp-step__text strong { font-size: 14px; font-weight: 600; color: #f4f2fa; }
body#chat-page .rc-dp-step__text small { font-size: 12.5px; color: #8f899f; }
body#chat-page .rc-discord-popup .rc-dp-step__btn {
    flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff;
    font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
body#chat-page .rc-discord-popup .rc-dp-step__btn:hover { background: rgba(255, 255, 255, 0.14); }

/* claim */
body#chat-page .rc-discord-popup .rc-dp-claim {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 50px; padding: 0 18px; border: 0; border-radius: 14px;
    background: linear-gradient(180deg, #6f7bf7 0%, #5865f2 55%, #4f5bd5 100%);
    color: #fff; font: inherit; font-size: 15px; font-weight: 650; letter-spacing: -0.005em; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 30px -12px rgba(88, 101, 242, 0.9);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body#chat-page .rc-discord-popup .rc-dp-claim:hover { filter: brightness(1.06); transform: translateY(-1px); }
body#chat-page .rc-discord-popup .rc-dp-claim:disabled { opacity: .7; cursor: default; transform: none; }
body#chat-page .rc-dp-claim__logo { width: 20px; height: 20px; }
body#chat-page .rc-dp-message { min-height: 1.3em; margin: 10px 0 0; font-size: 13px; color: #9a94aa; }
body#chat-page .rc-dp-message:empty { min-height: 0; margin: 0; }
body#chat-page .rc-dp-message.is-error { color: #fca5a5; }
body#chat-page .rc-discord-popup .rc-dp-later {
    display: block; margin: 10px auto 0; min-height: 0; padding: 6px 12px; border: 0; background: none; box-shadow: none;
    color: #8f899f; font: inherit; font-size: 13px; cursor: pointer;
}
body#chat-page .rc-discord-popup .rc-dp-later:hover { background: none; color: #fff; transform: none; }
body#chat-page .rc-dp-fine { margin: 6px 0 0; font-size: 11.5px; color: #6f6a80; }
/* The confirmation and its hint stay hidden until the server offers them (2026-10-08). */
body#chat-page .rc-discord-popup [hidden] { display: none !important; }

@keyframes rc-dp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-dp-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    body#chat-page .rc-discord-popup, body#chat-page .rc-discord-popup__box { animation: none; }
}

/* ==================================================================
   PAID VALUE (2026-10-12): the daily credits chip, the plans popup's
   "Or buy credits once" packs (approved mockup), the Discord row of the
   'discord_daily' free credit test, and its note.
   ================================================================== */

/* ---- daily credits chip, beside the pill (paid plans with daily_credits) ---- */
body#chat-page .daily-credits-chip[hidden] { display: none; }
body#chat-page .daily-credits-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    margin-right: 6px;
    padding: 0 12px;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.08);
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body#chat-page .daily-credits-chip__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4b5fd;
    box-shadow: 0 0 8px rgba(196, 181, 253, 0.6);
}
body#chat-page .daily-credits-chip.is-full { color: var(--v2-text); }

/* ---- Connect Discord in the popover, and the note under any Connect Discord button ---- */
body#chat-page .credits-btn--discord { background: #5865f2; color: #fff; }
body#chat-page .credits-btn--discord:hover { background: #4752c4; color: #fff; }
body#chat-page .credits-popover-discord { width: 100%; margin-top: 10px; }
body#chat-page .discord-connect-note {
    margin: 8px 0 0;
    color: var(--v2-text-3, #9d92b0);
    font-size: 12.5px;
    line-height: 1.45;
}

/* ---- the popup's Discord row ('discord_daily', not in the server yet) ---- */
body#chat-page #limit-modal-overlay .limit-modal-discord {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 16px;
    padding: 16px 18px;
    border: 1px solid rgba(88, 101, 242, 0.45);
    border-radius: 16px;
    background: radial-gradient(520px 120px at 0% 0%, rgba(88, 101, 242, 0.22), transparent 70%), rgba(255, 255, 255, 0.02);
}
body#chat-page #limit-modal-overlay .limit-modal-discord__text {
    margin: 0;
    color: var(--v2-text-2, #c5b9d8);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
}
body#chat-page #limit-modal-overlay .limit-modal-discord__text strong { color: #fff; font-size: 15px; font-weight: 650; }
body#chat-page #limit-modal-overlay .limit-modal-discord__btn {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    flex: none;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #5865f2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px -12px rgba(88, 101, 242, 0.9);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
body#chat-page #limit-modal-overlay .limit-modal-discord__btn:hover:not(:disabled) { background: #4752c4; }
body#chat-page #limit-modal-overlay .limit-modal-discord__btn::before,
body#chat-page #limit-modal-overlay .limit-modal-discord__btn::after { display: none !important; }
body#chat-page #limit-modal-overlay .limit-modal-discord .discord-connect-note { flex-basis: 100%; }

/* ---- the popup's credit packs (replace the Starter row while shown) ---- */
body#chat-page [data-rocode-pricing].has-limit-packs .pricing-starter { display: none; }
body#chat-page #limit-modal-overlay .limit-packs {
    box-sizing: border-box;
    width: 100%;
    margin: 18px 0 26px;
    padding: 18px 18px 20px;
    border: 1px solid rgba(167, 139, 250, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(700px 160px at 50% -20%, rgba(139, 92, 246, 0.2), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    text-align: left;
}
body#chat-page #limit-modal-overlay .limit-packs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 4px 18px;
}
body#chat-page #limit-modal-overlay .limit-packs__title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.01em;
}
body#chat-page #limit-modal-overlay .limit-packs__note { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 13px; }
body#chat-page #limit-modal-overlay .limit-packs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}
body#chat-page #limit-modal-overlay .limit-pack {
    position: relative;
    min-width: 0;
    padding: 1px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.32), rgba(167, 139, 250, 0.06) 45%, rgba(255, 255, 255, 0.04));
}
body#chat-page #limit-modal-overlay .limit-pack__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px 14px;
    border-radius: 17px;
    background: linear-gradient(180deg, #171226, #100c1a);
    overflow: hidden;
}
body#chat-page #limit-modal-overlay .limit-pack__inner::before {
    content: "";
    position: absolute;
    top: -45%;
    right: -20%;
    left: -20%;
    height: 75%;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.24), transparent);
    pointer-events: none;
}
body#chat-page #limit-modal-overlay .limit-pack__art {
    position: relative;
    display: flex;
    justify-content: center;
    align-self: stretch;
    height: 58px;
    margin-bottom: 6px;
}
body#chat-page #limit-modal-overlay .limit-pack__art svg { height: 100%; filter: drop-shadow(0 10px 16px rgba(124, 58, 237, 0.5)); }
body#chat-page #limit-modal-overlay .limit-pack__num { position: relative; display: flex; align-items: baseline; gap: 6px; }
body#chat-page #limit-modal-overlay .limit-pack__num b {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
body#chat-page #limit-modal-overlay .limit-pack__num span { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
body#chat-page #limit-modal-overlay .limit-pack__bonus {
    position: relative;
    margin: 9px 0 12px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c4b5fd, #f0abfc);
    box-shadow: 0 6px 16px -6px rgba(240, 171, 252, 0.6);
    color: #1a0f2e;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
body#chat-page #limit-modal-overlay .limit-pack__bonus--none {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
body#chat-page #limit-modal-overlay .limit-pack__buy {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    position: relative;
    align-self: stretch;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transform: none;
}
body#chat-page #limit-modal-overlay .limit-pack__buy::before,
body#chat-page #limit-modal-overlay .limit-pack__buy::after { display: none !important; }
body#chat-page #limit-modal-overlay .limit-pack__buy:hover:not(:disabled) { background: rgba(124, 58, 237, 0.75); border-color: rgba(196, 181, 253, 0.5); }
body#chat-page #limit-modal-overlay .limit-pack__buy:disabled { opacity: 0.7; cursor: progress; }
body#chat-page #limit-modal-overlay .limit-pack__buy:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }

body#chat-page #limit-modal-overlay .limit-pack--popular {
    transform: translateY(-8px);
    background: linear-gradient(180deg, #c4b5fd, #8b5cf6 35%, rgba(139, 92, 246, 0.35));
    box-shadow: 0 24px 50px -24px rgba(139, 92, 246, 0.85);
}
body#chat-page #limit-modal-overlay .limit-pack--popular .limit-pack__inner {
    background: radial-gradient(400px 160px at 50% -10%, rgba(139, 92, 246, 0.38), transparent 60%), linear-gradient(180deg, #1c1530, #120d1f);
}
body#chat-page #limit-modal-overlay .limit-pack--popular .limit-pack__buy {
    border: 0;
    background: linear-gradient(180deg, #9b6bff, #7c3aed);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px -10px rgba(124, 58, 237, 0.9);
}
body#chat-page #limit-modal-overlay .limit-pack--popular .limit-pack__buy:hover:not(:disabled) { background: linear-gradient(180deg, #a67cff, #8b5cf6); }
body#chat-page #limit-modal-overlay .limit-pack__ribbon {
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 3;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #c026d3);
    box-shadow: 0 8px 20px -8px rgba(192, 38, 211, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}
body#chat-page #limit-modal-overlay .limit-pack__ribbon--best { background: linear-gradient(90deg, #a16207, #d97706); box-shadow: 0 8px 20px -8px rgba(217, 119, 6, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
body#chat-page #limit-modal-overlay .limit-packs__message[hidden] { display: none; }
body#chat-page #limit-modal-overlay .limit-packs__message { margin: 12px 4px 0; color: #fca5a5; font-size: 13px; }

@media (max-width: 900px) {
    body#chat-page #limit-modal-overlay .limit-packs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
    body#chat-page #limit-modal-overlay .limit-pack--popular { transform: none; }
}
@media (max-width: 520px) {
    body#chat-page #limit-modal-overlay .limit-packs { padding: 16px 12px; }
    body#chat-page #limit-modal-overlay .limit-pack__num b { font-size: 26px; }
    body#chat-page #limit-modal-overlay .limit-modal-discord { flex-wrap: wrap; }
}

/* ---- continue the build after paying (2026-10-12): the line at the end of the chat ---- */
body#chat-page .checkout-resume-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 6px;
    padding: 10px 16px;
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--v2-text, #ede9f6);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
body#chat-page .checkout-resume-notice__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c4b5fd;
    box-shadow: 0 0 10px rgba(196, 181, 253, 0.7);
}
body#chat-page .checkout-resume-notice[data-state="done"] .checkout-resume-notice__dot { background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); }
body#chat-page .checkout-resume-notice[data-state="waiting"] .checkout-resume-notice__dot { background: #fbbf24; box-shadow: none; }

/* ---- connect Discord before the first free build (2026-10-12): the modal ---- */
body#chat-page .discord-required-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(6, 4, 12, 0.72);
    backdrop-filter: blur(6px);
}
body#chat-page .discord-required-overlay.is-open { display: flex; }
body#chat-page .discord-required-card {
    position: relative;
    width: min(440px, 100%);
    padding: 36px 32px 24px;
    border: 1px solid rgba(88, 101, 242, 0.4);
    border-radius: 24px;
    background:
        radial-gradient(520px 220px at 50% -10%, rgba(88, 101, 242, 0.32), transparent 70%),
        linear-gradient(180deg, #17142a, #0f0c1a);
    box-shadow: 0 40px 90px -40px rgba(88, 101, 242, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
    text-align: center;
}
body#chat-page .discord-required-close {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
body#chat-page .discord-required-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
body#chat-page .discord-required-close::before,
body#chat-page .discord-required-close::after,
body#chat-page .discord-required-connect::before,
body#chat-page .discord-required-connect::after,
body#chat-page .discord-required-plans::before,
body#chat-page .discord-required-plans::after { display: none !important; }
body#chat-page .discord-required-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: #5865f2;
    box-shadow: 0 18px 40px -16px rgba(88, 101, 242, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    color: #fff;
}
body#chat-page .discord-required-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
body#chat-page .discord-required-lead { margin: 0 auto 22px; max-width: 320px; color: rgba(255, 255, 255, 0.7); font-size: 14.5px; line-height: 1.5; }
body#chat-page .discord-required-connect {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    display: block;
    width: 100%;
    height: 52px;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: #5865f2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 30px -14px rgba(88, 101, 242, 0.95);
    color: #fff;
    font-size: 16px;
    font-weight: 650;
    cursor: pointer;
}
body#chat-page .discord-required-connect:hover:not(:disabled) { background: #4752c4; }
body#chat-page .discord-required-connect:disabled { opacity: 0.75; cursor: progress; }
body#chat-page .discord-required-kept { margin: 12px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 12.5px; }
body#chat-page .discord-required-card .discord-connect-note { text-align: center; color: #fca5a5; }
body#chat-page .discord-required-plans {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    min-height: 36px;
    margin-top: 14px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #c4b5fd;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
body#chat-page .discord-required-plans:hover { color: #ddd6fe; text-decoration: underline; }
/* The fallback (2026-10-13): back from Discord and not added automatically. */
body#chat-page .discord-required-fallback[hidden],
body#chat-page .discord-required-fallback [hidden],
body#chat-page .discord-required-card [hidden] { display: none !important; }
body#chat-page .discord-required-fallback-line { margin: 0 auto 18px; max-width: 320px; color: rgba(255, 255, 255, 0.78); font-size: 14.5px; line-height: 1.5; }
body#chat-page .discord-required-join {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 14px;
    background: #5865f2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 30px -14px rgba(88, 101, 242, 0.95);
    color: #fff;
    font-size: 16px;
    font-weight: 650;
    text-decoration: none;
}
body#chat-page .discord-required-join:hover { background: #4752c4; color: #fff; }
/* Connect Discord is the main button in the fallback when nothing is linked yet (2026-10-13):
   the invite steps down to the quiet style of "I've joined, check again". */
body#chat-page .discord-required-overlay.has-connect .discord-required-fallback { margin-top: 10px; }
body#chat-page .discord-required-overlay.has-connect .discord-required-join {
    height: 46px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    font-size: 15px;
    font-weight: 600;
}
body#chat-page .discord-required-overlay.has-connect .discord-required-join:hover { background: rgba(255, 255, 255, 0.08); }
body#chat-page .discord-required-join .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
body#chat-page .discord-required-check {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    display: block;
    width: 100%;
    height: 46px;
    min-height: 46px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
body#chat-page .discord-required-check::before,
body#chat-page .discord-required-check::after { display: none !important; }
body#chat-page .discord-required-check:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
body#chat-page .discord-required-check:disabled { opacity: 0.7; cursor: progress; }
body#chat-page .discord-required-check-note { min-height: 18px; margin: 10px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 13px; }
body#chat-page .discord-required-check-note:empty { display: none; }

/* ---- cost card: one quiet suggestion for a paid account (build audit 2026-10-13, lib/credits-chat.js buildCostHintCard) ---- */
body#chat-page .message.ai .credits-cost-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 9px 10px 9px 12px;
    border: 1px solid var(--v2-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
}
body#chat-page .credits-cost-hint-text { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--v2-text-2); }
body#chat-page .credits-cost-hint-actions { display: flex; align-items: center; gap: 6px; flex: none; }
body#chat-page .credits-cost-hint-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 640px) {
    body#chat-page .message.ai .credits-cost-hint { flex-direction: column; align-items: stretch; }
}