/* ==================================================================
   chat-v2.css — full chat redesign, 2026-09-21

   A calm two-pane AI-chat layout: tree sidebar with pinned Settings,
   outlined user pill, bubble-less assistant text, card-style tool rows
   with real monospace code, and a two-row composer with a round send.

   Loaded LAST on chat.html. Everything is scoped under body#chat-page,
   which out-ranks the #chat-page rules in chat-landing.css without
   needing !important. Reverting the whole redesign is one <link> tag.

   The purple palette is unchanged. It just stops being the wallpaper
   and goes back to being the accent.
   ================================================================== */

body#chat-page {
    --v2-bg: #0d0a14;
    --v2-pane: #100c19;
    --v2-card: #15101f;
    --v2-card-2: #1a1427;
    --v2-line: rgba(207, 195, 224, 0.09);
    --v2-line-2: rgba(207, 195, 224, 0.17);
    --v2-text: #f3eefc;
    --v2-text-2: #c5b9d8;
    --v2-text-3: #8f84a6;
    --v2-accent: #a78bfa;
    --v2-fill: #7c3aed;
    --v2-fill-hover: #8b5cf6;
    --v2-hair: rgba(255, 255, 255, 0.05);
    --v2-hair-strong: rgba(255, 255, 255, 0.12);
    --v2-ok: #4ade80;
    --v2-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --ico-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    --ico-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
    --ico-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
}

/* ---- canvas: near-black, the violet wash reduced to a hint ---- */

body#chat-page::before {
    background:
        radial-gradient(1100px 640px at 82% -8%, rgba(91, 33, 182, 0.10), transparent 58%),
        radial-gradient(860px 520px at -8% 18%, rgba(74, 24, 116, 0.10), transparent 52%),
        var(--v2-bg);
}

body#chat-page .navbar-top {
    background: transparent;
    border-bottom: 1px solid var(--v2-line);
}

/* ==================================================================
   SIDEBAR — a tree, with quota and Settings pinned to the foot
   ================================================================== */

body#chat-page .sidebar {
    background: var(--v2-pane);
    border-right: 1px solid var(--v2-line);
    padding: 12px 10px 10px;
    display: flex;
    flex-direction: column;
}

body#chat-page .sidebar-header {
    margin: 2px 4px 10px;
    padding: 0;
    border: 0;
}

body#chat-page .sidebar-header h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    color: var(--v2-text-3);
}

body#chat-page .new-chat-btn {
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    min-height: 40px;
    margin: 0 0 14px;
    padding: 0 13px;
    border: 1px solid var(--v2-line-2);
    border-radius: 10px;
    background: transparent;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

body#chat-page .new-chat-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(207, 195, 224, 0.28);
}

/* list grows; quota and Settings sit underneath it */
body#chat-page .conversation-list {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0 0 8px;
}

/* date groups read as folders */
body#chat-page .conversation-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 6px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--v2-text-3);
}

body#chat-page .conversation-group::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--ico-folder) center / contain no-repeat;
    mask: var(--ico-folder) center / contain no-repeat;
    opacity: 0.85;
}

body#chat-page .conversation-group:first-child { padding-top: 2px; }

/* chat rows, nested under their group */
body#chat-page .conversation-list li[data-id] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    margin: 1px 0 1px 10px;
    padding: 0 8px 0 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-text-2);
    cursor: pointer;
}

/* the old 2px violet rail becomes a chat glyph */
body#chat-page .conversation-list li[data-id]::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    bottom: auto;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: var(--ico-chat) center / contain no-repeat;
    mask: var(--ico-chat) center / contain no-repeat;
    opacity: 0.6;
}

body#chat-page .conversation-list li[data-id]:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--v2-text);
}

body#chat-page .conversation-list li.active {
    background: rgba(255, 255, 255, 0.07);
    color: var(--v2-text);
}

body#chat-page .conversation-list li.active::before { opacity: 1; }

body#chat-page .conversation-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 500;
}

body#chat-page .conversation-list li.active .conversation-title { font-weight: 700; }

body#chat-page .conversation-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--v2-text-3);
    font-variant-numeric: tabular-nums;
}

/* quota: one compact block above Settings */
body#chat-page .usage-meter {
    order: 2;
    margin: 8px 2px 8px;
    padding: 10px 10px 9px;
    border: 1px solid var(--v2-line);
    border-radius: 10px;
    background: transparent;
}

body#chat-page .usage-meter .quota-label,
body#chat-page .usage-meter .quota-value {
    font-size: 11px;
    letter-spacing: 0.06em;
}

body#chat-page .usage-meter .quota-bar-track {
    height: 3px;
    margin-top: 7px;
    opacity: 1;
}

/* the bar drains, so at the limit there is no fill left to carry the
   warning colour: the empty track takes it instead */
body#chat-page .usage-meter.quota-meter-at-limit .quota-bar-track,
body#chat-page .usage-meter.quota-meter-over-limit .quota-bar-track {
    background: rgba(248, 113, 113, 0.32);
}

body#chat-page .usage-meter .quota-tokens {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--v2-text-3);
    font-variant-numeric: tabular-nums;
}

body#chat-page .usage-meter .quota-sub {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--v2-text-3);
}

/* Settings, pinned to the foot like every other AI chat */
body#chat-page .sidebar-foot {
    order: 3;
    flex: none;
    padding-top: 8px;
    border-top: 1px solid var(--v2-line);
}

/* plan row: the account's tier on the left, one action on the right. Sized
   as a card that matches Settings beneath it, so it reads as part of the
   sidebar's furniture. It never changes size or colour to nag; the quota
   banner owns the loud moment. Paid tiers get "Manage" in neutral grey. */
body#chat-page .sidebar-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin: 0 0 8px;
    padding: 0 9px 0 14px;
    border: 1px solid var(--v2-hair-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    color: var(--v2-text);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

body#chat-page .sidebar-plan-row[hidden] { display: none; }

body#chat-page .sidebar-plan-row::before,
body#chat-page .sidebar-plan-row::after { display: none; }

body#chat-page .sidebar-plan-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#chat-page .sidebar-plan-action {
    flex: none;
    padding: 7px 17px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--v2-fill);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

body#chat-page .sidebar-plan-row:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.2);
}

body#chat-page .sidebar-plan-row:hover .sidebar-plan-action { background: var(--v2-fill-hover); }

body#chat-page .sidebar-plan-row:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

/* paid: same card, neutral, because there is nothing to sell */
body#chat-page .sidebar-plan-row.is-paid {
    border-color: var(--v2-line);
    background: rgba(255, 255, 255, 0.025);
}

body#chat-page .sidebar-plan-row.is-paid .sidebar-plan-action {
    border-color: var(--v2-line-2);
    background: transparent;
    color: var(--v2-text-2);
}

body#chat-page .sidebar-plan-row.is-paid:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--v2-line-2);
}

body#chat-page .sidebar-plan-row.is-paid:hover .sidebar-plan-action {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text);
}

body#chat-page .sidebar-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--v2-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--v2-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

body#chat-page .sidebar-settings-btn:hover,
body#chat-page .sidebar-settings-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--v2-line-2);
    color: var(--v2-text);
}

body#chat-page .sidebar-settings-btn svg { flex: none; opacity: 0.85; }

/* the site's button system paints its fill on ::before and a sheen on
   ::after; a ghost button has to switch both off or it renders solid violet */
body#chat-page .sidebar-settings-btn::before,
body#chat-page .sidebar-settings-btn::after,
body#chat-page .new-chat-btn::before,
body#chat-page .new-chat-btn::after { display: none; }

/* the floating Settings tab is only needed when the sidebar is hidden */
body#chat-page .chat-container:has(.sidebar:not(.is-panel-hidden)) #reveal-config-panel-btn {
    display: none;
}

/* config panel, when opened, matches the sidebar */
body#chat-page .config-panel {
    background: var(--v2-pane);
    border-left: 1px solid var(--v2-line);
}

/* ==================================================================
   CONVERSATION
   ================================================================== */

body#chat-page .chat-main { background: transparent; }

body#chat-page .chat-messages {
    gap: 18px;
    padding-top: 26px;
}

/* user: an outlined pill with a soft glow, right-aligned */
body#chat-page .chat-messages .message-container.user .message.user {
    max-width: 78%;
    padding: 9px 15px;
    border: 1px solid rgba(167, 139, 250, 0.6);
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.10);
    color: var(--v2-text);
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.10), 0 0 22px rgba(139, 92, 246, 0.16);
}

/* assistant: no bubble at all, just text on the canvas */
body#chat-page .chat-messages .message-container.ai .message.ai {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--v2-text);
}

body#chat-page .message.ai .agent-message-text,
body#chat-page .message.ai > p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--v2-text);
}

body#chat-page .message.ai .agent-message-text p { margin: 0; }
body#chat-page .message.ai .agent-message-text + .tool-calls-container,
body#chat-page .message.ai .tool-calls-container + .agent-message-text { margin-top: 16px; }

/* ==================================================================
   TOOL CARDS
   ================================================================== */

body#chat-page .tool-calls-container {
    display: grid;
    gap: 8px;
}

body#chat-page .tool-calls-container .tool-call-bubble,
body#chat-page .message.ai .tool-call-bubble {
    margin: 0;
    padding: 0 12px;
    min-height: 42px;
    align-items: flex-start;
    padding-top: 9px;
    padding-bottom: 9px;
    border: 1px solid var(--v2-line);
    border-radius: 10px;
    /* !important only because chat-landing.css sets this card's background
       with !important; nothing else in this file needs it */
    background: var(--v2-card) !important;
    box-shadow: none;
    /* BUG FIX: the card variant class "tool-action" collides with the label
       class ".tool-action", whose rule uppercases text. Every edit card was
       rendering its whole contents, code diff included, in capitals. */
    text-transform: none;
    letter-spacing: normal;
}

body#chat-page .tool-calls-container .tool-call-bubble:hover,
body#chat-page .message.ai .tool-call-bubble:hover {
    border-color: var(--v2-line-2);
    background: var(--v2-card-2) !important;
}

/* icon, chevron and status badge stay on the header line when a card expands */
body#chat-page .tool-call-bubble > .tool-icon,
body#chat-page .tool-call-bubble > .tool-expand-btn,
body#chat-page .tool-call-bubble > .tool-badge {
    align-self: flex-start;
    margin-top: 1px;
}

/* label reads as a badge, target as a mono path: "EDIT SCRIPT  game.Server…" */
body#chat-page .tool-info > .tool-action {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--v2-text-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.5;
}

body#chat-page .tool-info > .tool-name {
    font-family: var(--v2-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v2-text-2);
}

body#chat-page .tool-call-bubble .tool-icon { opacity: 0.7; }

/* expanded result panel: a code surface inside the card */
body#chat-page .tool-result-panel {
    margin: 10px 0 2px;
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: 8px;
    background: #0b0811;
    overflow: hidden;
    text-transform: none;
}

body#chat-page .tool-diff-block,
body#chat-page .tool-code-block,
body#chat-page .tool-result-pre {
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--v2-mono);
    font-size: 12.5px;
    line-height: 1.7;
    text-transform: none;
    letter-spacing: 0;
}

body#chat-page .tool-diff-line,
body#chat-page .tool-code-line {
    display: flex;
    padding: 0 14px 0 0;
    border-left: 2px solid transparent;
    white-space: pre;
}

body#chat-page .tool-ln {
    flex: none;
    width: 44px;
    padding-right: 14px;
    text-align: right;
    color: #5d5470;
    user-select: none;
}

body#chat-page .tool-lc { color: #d6cde6; }

body#chat-page .tool-diff-add {
    background: rgba(74, 222, 128, 0.10);
    border-left-color: var(--v2-ok);
}
body#chat-page .tool-diff-add .tool-lc { color: #bbf7d0; }

body#chat-page .tool-diff-del {
    background: rgba(248, 113, 113, 0.09);
    border-left-color: #f87171;
}
body#chat-page .tool-diff-del .tool-lc { color: #fecaca; opacity: 0.85; }

/* ==================================================================
   COMPOSER
   ================================================================== */

body#chat-page #chat-form {
    padding: 14px 14px 10px;
    border: 1px solid var(--v2-line-2);
    border-radius: 18px;
    background: var(--v2-card);
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6);
}

body#chat-page #chat-form:focus-within {
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 10px 40px -12px rgba(0, 0, 0, 0.6);
}

body#chat-page .mention-editor {
    min-height: 44px;
    padding: 2px 4px 8px;
    font-size: 15px;
    line-height: 1.55;
}

/* toolbar: no divider, quiet ghost controls, one filled button */
body#chat-page .chat-form-actions {
    padding-top: 2px;
    border-top: 0;
    gap: 4px;
}

body#chat-page .chat-form-actions .model-picker-btn {
    height: 32px;
    padding: 0 10px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 600;
}

body#chat-page .chat-form-actions .model-picker-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text);
}

/* thin separator between the picker and the mic, like the reference */
body#chat-page .chat-form-actions .mic-btn {
    position: relative;
    width: 32px;
    height: 32px;
    margin-left: 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-text-3);
}

body#chat-page .chat-form-actions .mic-btn::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--v2-line-2);
}

body#chat-page .chat-form-actions .mic-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text);
}

body#chat-page .chat-form-actions .mic-btn svg { width: 17px; height: 17px; }

body#chat-page .chat-form-actions::before {
    margin-left: 10px;
    font-size: 12px;
    opacity: 0.4;
}

/* send: a round filled button with an up arrow */
body#chat-page .send-btn {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--v2-fill);
    box-shadow: none;
}

body#chat-page .send-btn:hover { background-color: var(--v2-fill-hover); }

body#chat-page .send-btn > svg,
body#chat-page .send-btn > i { display: none; }

/* ::before/::after belong to the button system, so the arrow is a plain
   background image instead */
body#chat-page .send-btn::before,
body#chat-page .send-btn::after { display: none; }

body#chat-page .send-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
}

/* Blocked send: the arrow always stays, the button just greys out a little.
   Three states block sending: the disabled attribute, the .send-disabled
   class, and .plugin-disconnected on the wrapper (no plugin paired).
   background-COLOR only: the `background` shorthand would reset
   background-image and erase the arrow, which is exactly what happened. */
body#chat-page .send-btn:disabled,
body#chat-page .send-btn.send-disabled,
body#chat-page .send-btn-wrap.plugin-disconnected .send-btn {
    background-color: #3b3154;
    box-shadow: none;
    opacity: 0.85;
    cursor: not-allowed;
}

body#chat-page .send-btn:disabled:hover,
body#chat-page .send-btn.send-disabled:hover,
body#chat-page .send-btn-wrap.plugin-disconnected .send-btn:hover {
    background-color: #3b3154;
}

/* Before Studio is connected the disabled send button lets clicks through to its
   wrapper, which opens the connect steps (app.js initConnectClickTargets), and the
   status dot and the pairing card text are clickable too (Clarity 2026-10-11). */
body#chat-page .send-btn-wrap.plugin-disconnected { cursor: pointer; }
body#chat-page .send-btn-wrap.plugin-disconnected .send-btn { pointer-events: none; cursor: pointer; }
body#chat-page #plugin-status-indicator:has(.plugin-status-dot--err) { cursor: pointer; }
body#chat-page #plugin-link-row .plugin-setup__copy { cursor: text; }
body#chat-page .agent-error-panel[data-free-wall="1"] { cursor: pointer; }

/* plugin status: a quiet line under the composer */
body#chat-page .plugin-status-row {
    margin-top: 8px;
    font-size: 12px;
    color: var(--v2-text-3);
}

@media (prefers-reduced-motion: reduce) {
    body#chat-page .sidebar-settings-btn { transition: none; }
}

/* path line shown above a diff/code body inside the nested card */
body#chat-page .tool-result-panel .tool-path-line,
body#chat-page .tool-result-panel .tool-check-path,
body#chat-page .tool-result-panel .tool-output-meta {
    padding: 8px 14px;
    border-bottom: 1px solid var(--v2-line);
    font-family: var(--v2-mono);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v2-text-3);
}

/* ==================================================================
   PART TWO — every other state an assistant turn can be in
   ================================================================== */

/* ---- diff: stats share the header row with the path, like a review tool ---- */

body#chat-page .tool-result-panel { position: relative; }

body#chat-page .tool-diff-stats {
    position: absolute;
    top: 0;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 35px;
    font-family: var(--v2-mono);
    font-size: 12px;
    font-weight: 600;
}

body#chat-page .tool-diff-stat-add { color: var(--v2-ok); }
body#chat-page .tool-diff-stat-del { color: #f87171; }

body#chat-page .tool-sign {
    flex: none;
    width: 18px;
    text-align: center;
    color: #5d5470;
    user-select: none;
}
body#chat-page .tool-diff-add .tool-sign { color: var(--v2-ok); }
body#chat-page .tool-diff-del .tool-sign { color: #f87171; }

body#chat-page .tool-diff-gap {
    padding: 1px 0 1px 58px;
    color: #5d5470;
    font-family: var(--v2-mono);
    font-size: 12px;
    letter-spacing: 0.25em;
    user-select: none;
}

body#chat-page .tool-result-empty,
body#chat-page .tool-result-more {
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--v2-text-3);
}

/* ---- failed / soft-failed tool cards: tint the edge, keep the surface ---- */

body#chat-page .tool-calls-container .tool-call-bubble.tool-err { border-color: rgba(248, 113, 113, 0.35); }
body#chat-page .tool-calls-container .tool-call-bubble.tool-warn,
body#chat-page .tool-calls-container .tool-call-bubble.tool-query-warn { border-color: rgba(251, 191, 36, 0.30); }

body#chat-page .tool-call-bubble .tool-error,
body#chat-page .tool-call-bubble .tool-status-warn {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--v2-mono);
    font-size: 12px;
    color: #fca5a5;
}
body#chat-page .tool-call-bubble.tool-warn .tool-error,
body#chat-page .tool-call-bubble.tool-query-warn .tool-error { color: #fcd34d; }

body#chat-page .tool-call-bubble .tool-status-ok {
    font-family: var(--v2-mono);
    font-size: 12px;
    color: #86efac;
}

/* ---- thinking: a quiet inline disclosure, not a banner ---- */

body#chat-page .agent-thinking-bubble {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body#chat-page .agent-thinking-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-height: 0;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--v2-line);
    border-radius: 7px;
    background: transparent;
    color: var(--v2-text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none;
}

body#chat-page .agent-thinking-toggle::before,
body#chat-page .agent-thinking-toggle::after { display: none; }

body#chat-page .agent-thinking-toggle:hover {
    border-color: var(--v2-line-2);
    color: var(--v2-text-2);
    background: rgba(255, 255, 255, 0.03);
}

body#chat-page .agent-thinking-body {
    margin: 8px 0 0 4px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--v2-line-2);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--v2-text-3);
}

body#chat-page .agent-thinking-bubble.is-collapsed .agent-thinking-body { display: none; }

/* ---- fenced code in prose: same surface as the tool code card ---- */

body#chat-page .message.ai .chat-code-block {
    margin: 12px 0 4px;
    border: 1px solid var(--v2-line);
    border-radius: 10px;
    background: #0b0811;
    overflow: hidden;
}

body#chat-page .message.ai .chat-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 0 8px 0 14px;
    border-bottom: 1px solid var(--v2-line);
    background: rgba(255, 255, 255, 0.02);
}

body#chat-page .message.ai .chat-code-lang {
    font-family: var(--v2-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v2-text-3);
}

body#chat-page .message.ai .chat-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--v2-line);
    border-radius: 7px;
    background: transparent;
    color: var(--v2-text-2);
    font-size: 12px;
    font-weight: 600;
}
body#chat-page .message.ai .chat-code-copy::before,
body#chat-page .message.ai .chat-code-copy::after { display: none; }
body#chat-page .message.ai .chat-code-copy:hover { background: rgba(255, 255, 255, 0.05); color: var(--v2-text); }

body#chat-page .message.ai .chat-code-body {
    padding: 8px 0;
    font-family: var(--v2-mono);
    font-size: 12.5px;
    line-height: 1.7;
}

body#chat-page .message.ai .chat-code-line { display: flex; padding-right: 14px; white-space: pre; }
body#chat-page .message.ai .chat-ln { flex: none; width: 44px; padding-right: 14px; text-align: right; color: #5d5470; user-select: none; }
body#chat-page .message.ai .chat-lc { color: #d6cde6; }

body#chat-page .message.ai :not(pre) > code {
    padding: 1.5px 6px;
    border: 1px solid var(--v2-line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--v2-mono);
    font-size: 0.86em;
    color: #ddd0f5;
}

/* ---- completion / abort: a slim status chip, not a second card ---- */

body#chat-page .message.ai .agent-completion-card,
body#chat-page .message.ai .agent-abort-card {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 14px;
    padding: 7px 12px;
    border: 1px solid rgba(74, 222, 128, 0.26);
    border-radius: 9px;
    background: rgba(74, 222, 128, 0.06);
    box-shadow: none;
}

body#chat-page .message.ai .agent-abort-card {
    border-color: var(--v2-line-2);
    background: rgba(255, 255, 255, 0.03);
}

body#chat-page .agent-completion-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #bbf7d0;
}

body#chat-page .agent-completion-card-title::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-ok);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

body#chat-page .agent-abort-card .agent-completion-card-title { color: var(--v2-text-2); }
body#chat-page .agent-abort-card .agent-completion-card-title::before { background: var(--v2-text-3); box-shadow: none; }

/* The Stopped chip's title is .agent-abort-card-title: same quiet chip, grey dot. */
body#chat-page .agent-abort-card .agent-abort-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-text-2);
}

body#chat-page .agent-abort-card .agent-abort-card-title::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-text-3);
}

body#chat-page .agent-completion-card-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--v2-text-2);
}

/* ---- Stop not confirmed (CHAT-3) and relay unreachable (CHAT-5): a quiet line with one action ---- */

body#chat-page .agent-stop-unconfirmed,
body#chat-page .message.ai .agent-relay-lost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v2-text-2);
}

body#chat-page .message.ai .agent-relay-lost {
    margin-bottom: 10px;
}

body#chat-page .agent-stop-retry-btn,
body#chat-page .agent-relay-retry-btn {
    padding: 3px 10px;
    border: 1px solid var(--v2-line-2);
    border-radius: 7px;
    background: transparent;
    color: var(--v2-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

body#chat-page .agent-stop-retry-btn:hover:not(:disabled),
body#chat-page .agent-relay-retry-btn:hover {
    border-color: var(--v2-accent);
}

body#chat-page .agent-stop-retry-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---- run usage: one quiet meta line under the run's end chip ---- */

body#chat-page .message.ai .agent-run-usage {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--v2-text-3);
    font-variant-numeric: tabular-nums;
}

/* ---- older steps dropped to fit storage: one quiet line where they were (lib/chat-turn-persist.js) ---- */

body#chat-page .message.ai .agent-steps-hidden {
    display: block;
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-text-3);
}

/* ---- build summary: what the build added, changed, removed and failed (lib/build-summary.js) ---- */

body#chat-page .message.ai .agent-build-summary {
    display: block;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid var(--v2-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--v2-text-2);
}

body#chat-page .agent-build-summary .abs-title {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-text);
}

body#chat-page .agent-build-summary .abs-row {
    display: flex;
    gap: 10px;
    padding: 2px 0;
}

body#chat-page .agent-build-summary .abs-label {
    flex: 0 0 auto;
    min-width: 92px;
    color: var(--v2-text-3);
    font-variant-numeric: tabular-nums;
}

body#chat-page .agent-build-summary .abs-names {
    min-width: 0;
    overflow-wrap: anywhere;
}

body#chat-page .agent-build-summary .abs-failed .abs-label,
body#chat-page .agent-build-summary .abs-failed .abs-names {
    color: #fca5a5;
}

/* ---- error: one calm panel with a single outlined action ---- */

body#chat-page .message.ai .agent-error-panel {
    padding: 13px 15px;
    border: 1px solid rgba(248, 113, 113, 0.30);
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.05);
    box-shadow: none;
}

body#chat-page .agent-error-title { font-size: 14px; font-weight: 600; color: #fecaca; }
body#chat-page .agent-error-code {
    margin-top: 3px;
    font-family: var(--v2-mono);
    font-size: 11.5px;
    color: var(--v2-text-3);
}
body#chat-page .agent-error-hint { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--v2-text-2); }
body#chat-page .agent-error-actions { margin-top: 12px; display: flex; gap: 8px; }

body#chat-page .agent-error-panel button,
body#chat-page .agent-error-panel .btn {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--v2-line-2);
    border-radius: 8px;
    background: transparent;
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 600;
}
body#chat-page .agent-error-panel button::before,
body#chat-page .agent-error-panel button::after { display: none; }
body#chat-page .agent-error-panel button:hover { background: rgba(255, 255, 255, 0.06); }

/* ---- loading: three dots on the canvas ---- */

body#chat-page .chat-messages .message-container.ai .message.ai.loading {
    display: inline-flex;
    gap: 5px;
    width: auto;
    padding: 6px 2px;
}
body#chat-page .message.ai.loading span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v2-text-3);
}

/* ---- empty state + starter chips ---- */

body#chat-page .chat-empty-state .empty-title {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--v2-text);
}
body#chat-page .chat-empty-state .empty-sub { color: var(--v2-text-3); }

body#chat-page .starter-prompt {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--v2-line-2);
    border-radius: 9px;
    background: transparent;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
}
body#chat-page .starter-prompt::before,
body#chat-page .starter-prompt::after { display: none; }
body#chat-page .starter-prompt:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(207, 195, 224, 0.3);
    color: var(--v2-text);
}

/* ---- collapsible date folders ----
   li[data-id] is display:flex, which would override the hidden attribute. */
body#chat-page .conversation-list li[hidden] { display: none; }

body#chat-page .conversation-group {
    cursor: pointer;
    border-radius: 7px;
    user-select: none;
}
body#chat-page .conversation-group:hover { color: var(--v2-text-2); }
body#chat-page .conversation-group:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }

/* chevron sits before the folder glyph and turns when the folder closes */
body#chat-page .conversation-group::after {
    content: "";
    order: -1;
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
}
body#chat-page .conversation-group.is-collapsed::after { transform: rotate(-90deg); }

/* ---- composer: a small glyph in front of the model name ----
   On the label span, because the button's own ::before/::after are owned by
   the site's button system and forced to display:none on this control. */
body#chat-page #model-picker-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
body#chat-page #model-picker-label::before {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    background: var(--v2-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==================================================================
   PART THREE — what a brand-new user actually sees
   Composer docked to the bottom, model picker as a dropdown, and a
   roomier scale throughout.
   ================================================================== */

/* ---- empty state: heading centred above, composer docked below ---- */

body#chat-page .chat-main.chat-main--empty {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

body#chat-page .chat-main.chat-main--empty .chat-messages {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 24px;
}

body#chat-page .chat-main.chat-main--empty .chat-input-area {
    flex: none;
    width: 100%;
    max-width: none;
    padding: 0 24px 16px;
}

body#chat-page .chat-main.chat-main--empty .chat-input-area > form,
body#chat-page .chat-main.chat-main--empty .plugin-link-row,
body#chat-page .chat-main.chat-main--empty .quota-limit-banner,
body#chat-page .chat-main.chat-main--empty :is(#rc-oc-requests, #rc-oc-link-prompt, #rc-plugin-update) {
    width: 100%;
    max-width: var(--v2-col);
    margin-inline: auto;
}

body#chat-page .chat-main.chat-main--empty .plugin-link-row {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

/* ---- plugin setup row (shown until Studio is paired) ----
   Same surface, border, radius and shadow as the composer beneath it, so it reads
   as part of the same instrument rather than a promo card. */

body#chat-page .plugin-setup {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--v2-line-2);
    border-radius: 16px;
    background: var(--v2-card);
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6);
    color: var(--v2-text);
    text-align: left;
}

body#chat-page .plugin-setup__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5a524;
    box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.14);
}

body#chat-page .plugin-setup__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

body#chat-page .plugin-setup__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--v2-text);
}

body#chat-page .plugin-setup__sub {
    font-size: 13px;
    line-height: 1.45;
    color: var(--v2-text-3);
    text-wrap: pretty;
}

body#chat-page .plugin-setup .plugin-link-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--v2-hair-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

body#chat-page .plugin-setup .plugin-link-btn::before,
body#chat-page .plugin-setup .plugin-link-btn::after { display: none; }

body#chat-page .plugin-setup .plugin-link-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}

body#chat-page .plugin-setup .plugin-link-btn:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}

body#chat-page .plugin-setup .plugin-link-btn .lucide { opacity: 0.8; }

/* Pairing code: Studio shows it, the user types it here. */
body#chat-page .plugin-pair-form {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

body#chat-page .plugin-pair-input {
    width: 104px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--v2-hair-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--v2-text);
    font: 600 14px/1 "Inter", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-align: center;
    outline: none;
    transition: border-color 0.16s ease, background 0.16s ease;
}

body#chat-page .plugin-pair-input::placeholder { color: var(--v2-text-3); opacity: 0.6; }

body#chat-page .plugin-pair-input:focus {
    border-color: var(--v2-accent);
    background: rgba(255, 255, 255, 0.05);
}

body#chat-page .plugin-pair-btn {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #7c3aed;
    color: #fff; /* white reads on this purple and on the global #5b21b6 button face */
    font: 600 13.5px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.16s ease, opacity 0.16s ease;
}

body#chat-page .plugin-pair-btn::before,
body#chat-page .plugin-pair-btn::after { display: none !important; }
body#chat-page .plugin-pair-btn:hover { filter: brightness(1.08); }
body#chat-page .plugin-pair-btn:disabled { opacity: 0.6; cursor: default; }
body#chat-page .plugin-pair-btn--warn { background: #b45309; }
body#chat-page .plugin-pair-input { width: 156px; text-transform: uppercase; }
body#chat-page .plugin-pair-btn[hidden] { display: none !important; }

body#chat-page .plugin-setup__sub.is-error { color: #f3a0a0; }
body#chat-page .plugin-setup__sub.is-ok { color: #9be3b4; }
body#chat-page .plugin-setup.is-waiting { border-color: rgba(167, 139, 250, 0.45); }
body#chat-page .plugin-setup.is-waiting .plugin-setup__dot {
    background: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
/* A send while Studio is not paired points here (app.js pointToPluginPairing). */
body#chat-page .plugin-setup.is-nudge {
    border-color: rgba(167, 139, 250, 0.75);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
@media (prefers-reduced-motion: no-preference) {
    body#chat-page .plugin-setup.is-nudge { animation: rc-plugin-setup-nudge 0.45s cubic-bezier(.36, .07, .19, .97) 1; }
}
@keyframes rc-plugin-setup-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@media (max-width: 720px) {
    body#chat-page .plugin-setup { flex-wrap: wrap; }
    body#chat-page .plugin-setup .plugin-link-btn { width: 100%; justify-content: center; }
}

/* ---- roomier scale ---- */

body#chat-page .new-chat-btn {
    min-height: 46px;
    padding: 0 15px;
    gap: 11px;
    border-radius: 12px;
    font-size: 15.5px;
}

body#chat-page .conversation-list li[data-id] { min-height: 38px; }
body#chat-page .conversation-title { font-size: 14.5px; }
body#chat-page .conversation-time { font-size: 11.5px; }
body#chat-page .conversation-group { font-size: 11.5px; padding-top: 14px; }

body#chat-page .sidebar-settings-btn {
    min-height: 44px;
    border-radius: 12px;
    font-size: 14px;
}

/* an empty list should say so rather than look broken */
body#chat-page .conversation-list:empty::before {
    content: "No chats yet";
    display: block;
    padding: 6px 8px;
    font-size: 13px;
    font-style: italic;
    color: var(--v2-text-3);
    opacity: 0.8;
}

body#chat-page #chat-form {
    padding: 18px 18px 12px;
    border-radius: 22px;
}

body#chat-page .mention-editor {
    min-height: 58px;
    padding: 2px 4px 10px;
    font-size: 16px;
}

body#chat-page .chat-form-actions .model-picker-btn {
    height: 36px;
    padding: 0 11px;
    font-size: 14px;
}

body#chat-page .chat-form-actions .mic-btn { width: 36px; height: 36px; }

body#chat-page .send-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background-size: 19px 19px;
}

/* ==================================================================
   MODEL PICKER — a dropdown menu above the button, not a modal.
   app.js sets --mp-left / --mp-bottom from the button's rect on open.
   The overlay's centring and dim backdrop are inline styles in
   chat.html, hence the !important on those three properties only.
   ================================================================== */

body#chat-page #model-picker-overlay {
    background: transparent !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

body#chat-page #model-picker-overlay .model-picker-dual {
    position: absolute;
    left: var(--mp-left, 50%);
    bottom: var(--mp-bottom, 120px);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: auto;
    max-width: calc(100vw - 16px);
    margin: 0;
    transform: none;
}

body#chat-page #model-picker-overlay .model-picker-modal {
    width: 296px;
    max-width: 296px;
    max-height: min(60vh, 420px);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    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);
    transform-origin: bottom left;
}

body#chat-page #model-picker-overlay .model-picker-header,
body#chat-page #model-picker-overlay .model-picker-close {
    display: none;
}

body#chat-page #model-picker-overlay .model-picker-cards {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--v2-line);
}

body#chat-page #model-picker-overlay .model-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 0 10px;
    /* chat-landing.css borders .model-card (and tints .selected violet) with
       !important; a menu row has no border, so this has to match it */
    border: 0 !important;
    border-radius: 8px;
    background: transparent;
    box-shadow: none !important;
    color: var(--v2-text);
    text-align: left;
    transform: none;
}

body#chat-page #model-picker-overlay .model-card::before,
body#chat-page #model-picker-overlay .model-card::after { display: none; }

body#chat-page #model-picker-overlay .model-card:hover,
body#chat-page #model-picker-overlay .model-card:focus-visible {
    background: rgba(255, 255, 255, 0.075);
    outline: none;
}

body#chat-page #model-picker-overlay .model-card.selected {
    border: 0 !important;
    background: transparent;
}
body#chat-page #model-picker-overlay .model-card.selected:hover { background: rgba(255, 255, 255, 0.075); }

body#chat-page #model-picker-overlay .model-card-body { display: flex; min-width: 0; }

body#chat-page #model-picker-overlay .model-card-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* a menu row is a name; the paragraph of description belonged to the modal */
body#chat-page #model-picker-overlay .model-card-desc { display: none; }

/* ...except a one-line hint, for a row whose choice has a cost the user should
   see before picking it (GLM 5.3 spends the budget about 10x faster) */
body#chat-page #model-picker-overlay .model-card-hint {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--v2-text-3);
    white-space: normal;
}

body#chat-page #model-picker-overlay .model-card:has(.model-card-hint) {
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: 8px;
}

body#chat-page #model-picker-overlay .model-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

body#chat-page #model-picker-overlay .model-tag {
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v2-text-3);
}

body#chat-page #model-picker-overlay .model-card-check {
    display: inline-flex;
    width: 16px;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--v2-accent);
    opacity: 0;
}
body#chat-page #model-picker-overlay .model-card-check svg { width: 15px; height: 15px; stroke-width: 2.6; }
body#chat-page #model-picker-overlay .model-card.selected .model-card-check { opacity: 1; }

/* "Custom model" is the last row, below the divider, with a flyout chevron */
body#chat-page #model-picker-overlay #model-custom-card { margin-top: 6px; }

body#chat-page #model-picker-overlay #model-custom-card:not(.selected) .model-card-check {
    opacity: 0.55;
    color: var(--v2-text-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
    background: currentColor;
    height: 16px;
}
body#chat-page #model-picker-overlay #model-custom-card:not(.selected) .model-card-check svg { display: none; }

/* the key/model form opens beside the menu, like a submenu */
body#chat-page #model-picker-overlay .model-byok-panel {
    width: 330px;
    max-width: 330px;
    max-height: min(70vh, 520px);
    margin: 0;
    overflow-y: auto;
    border: 1px solid var(--v2-line-2);
    border-radius: 13px;
    background: #1d1829;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

/* ==================================================================
   PART FOUR — the composer is the lowest thing on the page.
   Plugin status and the character counter moved INTO the toolbar
   (markup in chat.html); nothing renders underneath the box any more.
   ================================================================== */

body#chat-page .chat-input-area { padding-bottom: 20px; }
body#chat-page .chat-main.chat-main--empty .chat-input-area { padding-bottom: 20px; }

/* toolbar order: model | mic | status ............ counter  send */
body#chat-page .chat-form-actions .model-picker-btn { order: 1; }
body#chat-page .chat-form-actions .mic-btn,
body#chat-page .chat-form-actions .voice-cancel-btn,
body#chat-page .chat-form-actions .voice-confirm-btn { order: 2; }
body#chat-page .chat-form-actions .plugin-status-chip { order: 3; }
body#chat-page .chat-form-actions .chat-char-counter { order: 9; margin-left: auto; }
body#chat-page .chat-form-actions .send-btn-wrap { order: 10; }
/* when the counter is showing it owns the auto margin, otherwise send does */
body#chat-page .chat-form-actions .chat-char-counter:not([hidden]) ~ .send-btn-wrap { margin-left: 10px; }

/* the "Enter to send" hint goes: the reference has none and it is clutter */
body#chat-page .chat-form-actions::before { content: none; display: none; }

/* ---- status as a chip, sitting where a mode toggle would ---- */

/* app.js shows this node with an inline display:block and hides it with
   display:none, so the chip layout hooks the inline value rather than
   fighting it with a blanket !important (which would break hiding). */
body#chat-page #chat-form .chat-form-actions .plugin-status-chip {
    display: none;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 0 0 9px;
    padding: 0;
    text-align: left;
}
body#chat-page #chat-form .chat-form-actions .plugin-status-chip[style*="display: block"] { display: inline-flex !important; }

body#chat-page #plugin-config-section #plugin-status-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    margin: 0;
    padding: 0 12px 0 10px;
    border: 1px solid var(--v2-line-2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    /* chat-landing.css sets this indicator's size and colour with !important */
    color: var(--v2-text-2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}

body#chat-page #plugin-config-section .plugin-status-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 50%;
    background: var(--v2-text-3);
}

/* connected: the chip goes green, like a mode that is switched on */
body#chat-page #plugin-config-section #plugin-status-indicator:has(.plugin-status-dot--ok) {
    border-color: rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.09);
    color: #bbf7d0 !important;
}
body#chat-page #plugin-config-section .plugin-status-dot--ok {
    background: var(--v2-ok);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
body#chat-page #plugin-config-section .plugin-status-dot--err { background: #f87171; }

/* the long explanation app.js appends ("Press Connect in Studio", relay down…)
   becomes a popover above the chip instead of a paragraph under the composer */
body#chat-page #plugin-config-section #plugin-status-indicator > div {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 5;
    display: none;
    width: max-content;
    max-width: 300px;
    margin: 0 !important;
    padding: 9px 12px;
    border: 1px solid var(--v2-line-2);
    border-radius: 10px;
    background: #1d1829;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    color: var(--v2-text-2) !important;
    font-size: 12.5px !important;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
}
body#chat-page #plugin-config-section #plugin-status-indicator:hover > div,
body#chat-page #plugin-config-section #plugin-status-indicator:focus-within > div { display: block; }

/* A newer plugin names its Studio place (app.js pluginPlaceLineHtml), the only div
   that follows the green dot. It stays in the chip after a hairline instead of hiding
   in the popover: with two Studio windows open, the user sees which place gets the
   changes. Long names are cut; hovering widens the chip into the free space. The chip
   is the only toolbar item that may shrink, so the model picker and send button never
   move. Below 900px the toolbar has no room for it, so it stays in the popover there.
   Every rule goes through :has(), so a browser without it keeps the popover too.
   The published plugin sends no place, so none of this applies to its chip. */
@media (min-width: 900px) {
    body#chat-page #chat-form .chat-form-actions .plugin-status-chip:has(.plugin-status-dot--ok ~ div) { flex-shrink: 1; margin-right: 12px; }
    body#chat-page #plugin-config-section #plugin-status-indicator:has(> .plugin-status-dot--ok ~ div) {
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
    }
    body#chat-page #plugin-config-section #plugin-status-indicator:has(> .plugin-status-dot--ok ~ div) > div {
        position: static;
        display: block;
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: 240px;
        margin: 0 0 0 2px !important;
        padding: 0 0 0 9px;
        border: 0;
        border-left: 1px solid rgba(74, 222, 128, 0.3);
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: rgba(187, 247, 208, 0.66) !important;
        font-size: 12.5px !important;
        font-weight: 500;
        line-height: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body#chat-page #plugin-config-section #plugin-status-indicator:has(> .plugin-status-dot--ok ~ div):hover > div { max-width: 420px; }
}

/* ---- character counter, inline and quiet ---- */
body#chat-page #chat-form .chat-form-actions .chat-char-counter {
    position: static;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-block: 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--v2-text-3);
}

/* while dictating, the waveform needs the row: status steps aside */
body#chat-page #chat-form.is-recording .plugin-status-chip { display: none !important; }

/* ==================================================================
   PART FIVE — Settings is a sheet over the chat, not a third column.
   The layout underneath is always two panes. Markup was regrouped in
   chat.html into Generation / Plan / Help; every id is unchanged.
   ================================================================== */

/* ---- backdrop: only while the sheet is open ---- */
/* #chat-ui has a transform + isolation (left from the retired camera zoom), so it
   is a stacking context that sits under the fixed navbar whatever z-index a child
   asks for. The sheet and its backdrop therefore dock just below the top bar. */
body#chat-page .config-backdrop {
    display: none;
    position: fixed;
    inset: var(--lp-nav-h, 64px) 0 0 0;
    z-index: 8990;
    background: rgba(6, 4, 12, 0.55);
    animation: v2-fade-in 0.18s ease both;
}
body#chat-page .chat-container:has(#config-panel:not(.is-panel-hidden)) .config-backdrop { display: block; }

/* ---- the sheet ---- */
body#chat-page #config-panel {
    position: fixed;
    top: var(--lp-nav-h, 64px);
    right: 0;
    bottom: 0;
    z-index: 9000;
    flex: none;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--v2-line-2);
    border-radius: 0;
    background: #120e1c;
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.55);
    animation: v2-sheet-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* a sheet has a fixed width; the drag handle belonged to the old column */
body#chat-page #config-panel .config-panel-resize-handle { display: none; }

@keyframes v2-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v2-fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* header: a real title and a close button */
body#chat-page #config-panel .config-panel-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 20px 20px 18px 24px;
    border-bottom: 1px solid var(--v2-line);
}

body#chat-page #config-panel .config-panel-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--v2-text);
}

body#chat-page #config-panel .panel-hide-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--v2-text-3);
}
body#chat-page #config-panel .panel-hide-btn::before,
body#chat-page #config-panel .panel-hide-btn::after { display: none; }
body#chat-page #config-panel .panel-hide-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--v2-text); }

/* body scrolls, legal line stays pinned at the foot */
body#chat-page #config-panel .settings-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 24px 24px;
}

body#chat-page #config-panel .settings-section { padding: 22px 0 0; }
body#chat-page #config-panel .settings-section + .settings-section {
    margin-top: 22px;
    border-top: 1px solid var(--v2-line);
}
/* if the plan block is hidden for a paying user, its section must not leave a gap.
   app.js (syncConfigUpgradeVisibility) sets the class: a :has() on a [style] attribute made
   every style write on the page (the composer resizes on each key) re-check the whole chat. */
body#chat-page #config-panel .settings-section--plan.is-plan-hidden { display: none; }

body#chat-page #config-panel .settings-heading {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--v2-text-3);
}

/* ---- toggle rows: label, one-line description, switch ---- */
body#chat-page #config-panel .config-group {
    margin: 0;
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}
body#chat-page #config-panel .config-group + .config-group { margin-top: 0; padding-top: 0; border-top: 1px solid var(--v2-line); }

body#chat-page #config-panel .config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    background: transparent;
}
body#chat-page #config-panel .config-item + .config-item { border-top: 1px solid var(--v2-line); }

body#chat-page #config-panel .config-text { flex: 1 1 auto; min-width: 0; }

body#chat-page #config-panel .config-label {
    display: block;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--v2-text);
    cursor: pointer;
}

body#chat-page #config-panel .config-desc {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v2-text-3);
    text-wrap: pretty;
}

body#chat-page #config-panel .switch { flex: none; }

/* ---- plan: quiet rows, the recommended one carries the only accent ---- */
body#chat-page #config-panel #pro-upgrade-group { margin: 0; padding: 0; }

body#chat-page #config-panel .upgrade-card {
    padding: 0;
    border: 0;
    background: transparent;
}
body#chat-page #config-panel .upgrade-card:hover { background: transparent; border: 0; }
body#chat-page #config-panel .upgrade-card-head { display: none; }

body#chat-page #config-panel .upgrade-card-sub {
    margin: -4px 0 12px;
    font-size: 13px;
    color: var(--v2-text-2);
}

body#chat-page #config-panel .upgrade-card-plans {
    display: grid;
    gap: 0;
    border: 1px solid var(--v2-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

body#chat-page #config-panel .upgrade-plan {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "main price" "note price";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    width: 100%;
    margin: 0;
    padding: 13px 16px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}
body#chat-page #config-panel .upgrade-plan::before,
body#chat-page #config-panel .upgrade-plan::after { display: none; }
body#chat-page #config-panel .upgrade-plan + .upgrade-plan { border-top: 1px solid var(--v2-line) !important; }
body#chat-page #config-panel .upgrade-plan:hover { background: rgba(255, 255, 255, 0.05); }

body#chat-page #config-panel .upgrade-plan-main { grid-area: main; display: flex; align-items: center; gap: 8px; }
body#chat-page #config-panel .upgrade-plan-name { font-size: 14.5px; font-weight: 600; color: var(--v2-text); }
body#chat-page #config-panel .upgrade-plan-note { grid-area: note; font-size: 12.5px; color: var(--v2-text-3); }
body#chat-page #config-panel .upgrade-plan-price {
    grid-area: price;
    font-size: 14.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--v2-text);
}
body#chat-page #config-panel .upgrade-plan-per { font-size: 12px; font-weight: 500; color: var(--v2-text-3); }

body#chat-page #config-panel .upgrade-plan-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ---- help: two plain rows ---- */
body#chat-page #config-panel .settings-rows {
    border: 1px solid var(--v2-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

body#chat-page #config-panel .config-link-row,
body#chat-page #config-panel #copy-debug-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--v2-text);
    font-size: 14.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}
body#chat-page #config-panel #copy-debug-btn::before,
body#chat-page #config-panel #copy-debug-btn::after { display: none; }
body#chat-page #config-panel .settings-rows > * + * { border-top: 1px solid var(--v2-line); }
body#chat-page #config-panel .config-link-row:hover,
body#chat-page #config-panel #copy-debug-btn:hover { background: rgba(255, 255, 255, 0.05); }
body#chat-page #config-panel .config-link-row svg,
body#chat-page #config-panel #copy-debug-btn svg { flex: none; opacity: 0.75; }
body#chat-page #config-panel .config-link-row-ext { margin-left: auto; opacity: 0.5; }

/* ---- Roblox Studio: Disconnect is an outline pill like the plugin link, and hovers
   red because it signs Studio out ---- */
body#chat-page #config-panel #disconnect-studio-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--v2-hair-strong) !important;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
}
body#chat-page #config-panel #disconnect-studio-btn::before,
body#chat-page #config-panel #disconnect-studio-btn::after { display: none; }
body#chat-page #config-panel #disconnect-studio-btn:not(:disabled):hover {
    border-color: rgba(248, 113, 113, 0.45) !important;
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
}
body#chat-page #config-panel #disconnect-studio-btn:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}
body#chat-page #config-panel #disconnect-studio-btn:disabled {
    opacity: 0.55;
    color: var(--v2-text-2);
    cursor: default;
}

/* ---- legal: pinned, centred, quiet ---- */
body#chat-page #config-panel .panel-legal {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 24px 16px;
    border-top: 1px solid var(--v2-line);
    font-size: 12.5px;
    color: var(--v2-text-3);
}
body#chat-page #config-panel .panel-legal a { color: var(--v2-text-3); text-decoration: none; }
body#chat-page #config-panel .panel-legal a:hover { color: var(--v2-text); }

@media (prefers-reduced-motion: reduce) {
    body#chat-page #config-panel,
    body#chat-page .config-backdrop { animation: none; }
}

/* ==================================================================
   Part six: the column scales with the window

   Cmd + and Cmd - change how many CSS pixels the window holds. With a
   fixed 820px column, zooming out left the chatbox as a small island in
   a wide empty pane while the sidebar and navbar kept spanning the
   window. The column is now a share of the pane with 820px as its
   floor: 74% is what 820px already was on a 1440px screen, so the
   default view is unchanged there and everything past it stretches.
   Zooming in needs nothing: the column is width:100% under the cap, so
   it already narrows with the pane.

   The messages and the composer read the same token against panes of
   identical content width, so their edges stay aligned at every zoom.
   ================================================================== */

body#chat-page { --v2-col: max(820px, 74%); }

body#chat-page .chat-messages > *,
body#chat-page .chat-main:not(.chat-main--empty) .chat-input-area > form,
body#chat-page .chat-main:not(.chat-main--empty) .plugin-link-row,
body#chat-page .chat-main:not(.chat-main--empty) .quota-limit-banner,
body#chat-page .chat-main:not(.chat-main--empty) .chat-char-counter {
    max-width: var(--v2-col);
}

/* Cards above the composer (one-click Allow, Link Roblox offer, plugin update) take the
   composer's column, not the whole input area (owner 2026-10-09). */
body#chat-page :is(#rc-oc-requests, #rc-oc-link-prompt, #rc-plugin-update) { box-sizing: border-box; }
body#chat-page .chat-main:not(.chat-main--empty) :is(#rc-oc-requests, #rc-oc-link-prompt, #rc-plugin-update) {
    width: 100%;
    max-width: var(--v2-col);
    margin-inline: auto;
    box-sizing: border-box;
}

/* motion.css zeroes CSS transitions for the JS springs; these controls no longer
   have a spring, so their hover (background, border, glow) gets its fade back. */
html.oracle-spring-ui body#chat-page .sidebar-plan-row,
html.oracle-spring-ui body#chat-page .sidebar-plan-action,
html.oracle-spring-ui body#chat-page #config-panel .upgrade-plan,
html.oracle-spring-ui body#chat-page .plugin-setup .plugin-link-btn {
    transition-property: background-color, border-color, color, box-shadow !important;
    transition-duration: .18s !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
}
body#chat-page .sidebar-plan-row:not(.is-paid):hover .sidebar-plan-action {
    box-shadow: 0 8px 22px -10px rgba(139, 92, 246, .9);
}

/* ---- quiet system (2026-09-26): modals share the site's calm surface ---- */
body#chat-page .plugin-modal,
body#chat-page .model-byok-panel,
body#chat-page .rc-modal-sheet,
body#chat-page .limit-modal-card,
body#chat-page .limit-modal-pricing-card {
    background: #15101f;
    border: 1px solid var(--v2-hair-strong);
    border-radius: 22px;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
}
body#chat-page .limit-modal-pricing-card { padding: 28px 24px 22px; }
body#chat-page .rc-limit-modal-overlay,
body#chat-page #plugin-modal-overlay,
body#chat-page #limit-modal-overlay,
body#chat-page #pro-limit-modal-overlay {
    background: rgba(8, 4, 16, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body#chat-page .limit-modal-title { font-size: 26px; letter-spacing: -0.03em; }
body#chat-page .limit-modal-sub { margin: 8px auto 0; max-width: 560px; color: var(--v2-text-2, #c5b9d8); font-size: 14.5px; line-height: 1.5; text-align: center; }
body#chat-page .limit-modal-offer { margin: 12px auto 4px; max-width: 560px; padding: 9px 14px; border: 1px solid rgba(167, 139, 250, 0.35); border-radius: 10px; background: rgba(124, 58, 237, 0.12); color: #e9ddff; font-size: 13.5px; font-weight: 600; text-align: center; }
body#chat-page .limit-modal-offer[hidden] { display: none; }
/* Plans popup copy experiment (2026-10-12): the free refill time, secondary to the offer above it. */
body#chat-page .limit-modal-secondary { margin: 6px auto 10px; max-width: 560px; color: var(--v2-text-3, #9d92b0); font-size: 13px; line-height: 1.45; text-align: center; }
body#chat-page .limit-modal-secondary[hidden] { display: none; }
/* "What stopped you upgrading?": a small card in the corner after a dismissal, never a dialog. */
body#chat-page .upgrade-decline-card { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 300px; max-width: calc(100vw - 32px); padding: 14px 16px 16px; border-radius: 14px; border: 1px solid rgba(167, 139, 250, 0.28); background: var(--v2-surface-2, #1b1626); color: var(--v2-text-1, #f3eefb); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
body#chat-page .upgrade-decline-close { position: absolute; top: 6px; right: 8px; left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--v2-text-3, #9d92b0); font-size: 20px; line-height: 1; cursor: pointer; }
body#chat-page .upgrade-decline-close:hover, body#chat-page .upgrade-decline-close:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--v2-text-1, #f3eefb); }
body#chat-page .upgrade-decline-title { margin: 0 28px 2px 0; font-size: 14px; font-weight: 600; }
body#chat-page .upgrade-decline-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--v2-text-3, #9d92b0); }
body#chat-page .upgrade-decline-options { display: flex; flex-wrap: wrap; gap: 6px; }
/* The answers use the site's button skin, like the other buttons on /chat. */
body#chat-page .upgrade-decline-option { min-height: 36px; padding: 7px 11px; font-size: 13px; }

body#chat-page .limit-modal-cta,
body#chat-page a.btn.limit-modal-cta {
    border-radius: 999px;
    background: var(--v2-fill);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 600;
}
body#chat-page .limit-modal-cta:hover,
body#chat-page a.btn.limit-modal-cta:hover { background: var(--v2-fill-hover); }
body#chat-page .new-chat-btn { border-radius: 12px; font-weight: 600; }
body#chat-page .sidebar-settings-btn { border-radius: 12px; }

/* ---- quiet system, pass 2 (2026-09-26): leakage from the older chat layers.
   Colour transitions everywhere, no glow on the composer or user messages, the
   stop state of the send button is visible, one accent instead of orange, plain
   markdown markers, flat faces on the buttons v2 never restyled, and loading
   indicators keep looping. ---- */
body#chat-page button,
body#chat-page a.btn,
body#chat-page .plugin-link-btn,
body#chat-page .conversation-list li,
body#chat-page .sidebar-plan-row,
body#chat-page .model-card,
body#chat-page .message-action-btn {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform !important;
    transition-duration: .2s !important;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1) !important;
    transition-delay: 0s !important;
}
body#chat-page #chat-form { border-color: rgba(255, 255, 255, 0.08); border-radius: 20px; box-shadow: none; }
body#chat-page #chat-form:focus-within { border-color: rgba(167, 139, 250, 0.45); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12); }
body#chat-page .plugin-setup { box-shadow: none; border-color: rgba(255, 255, 255, 0.08); border-radius: 18px; }
body#chat-page .chat-messages .message-container.user .message.user {
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.10);
    box-shadow: none;
}
body#chat-page .send-btn.stop-mode {
    background-color: rgba(255, 255, 255, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
    background-size: 14px 14px;
}
body#chat-page .send-btn.stop-mode:hover { background-color: rgba(255, 255, 255, 0.2); }
body#chat-page .send-btn:active { transform: scale(.96); }
body#chat-page .upgrade-btn,
body#chat-page .quota-limit-banner-upgrade {
    --rc-btn-mid: var(--v2-fill);
    --rc-btn-shadow: var(--v2-fill);
    --rc-btn-face-bg: linear-gradient(var(--v2-fill), var(--v2-fill)) !important;
    --rc-btn-radius: 999px;
    background: var(--v2-fill) !important;
    border-radius: 999px;
    box-shadow: none !important;
}
body#chat-page .upgrade-btn:hover,
body#chat-page .quota-limit-banner-upgrade:hover {
    --rc-btn-face-bg: linear-gradient(var(--v2-fill-hover), var(--v2-fill-hover)) !important;
    background: var(--v2-fill-hover) !important;
}
body#chat-page .agent-message-text .md-ul > li::before { width: 5px; height: 5px; top: .7em; background: var(--v2-text-3); box-shadow: none; }
body#chat-page .message.user .md-ul > li::before { background: rgba(255, 255, 255, 0.7); box-shadow: none; }
body#chat-page .tool-call-bubble .tool-error-msg,
body#chat-page .tool-call-bubble .tool-warn-msg,
body#chat-page .tool-call-bubble .tool-fix-hint {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--v2-mono);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--v2-text-2);
}
body#chat-page .tool-call-bubble .tool-error-msg { color: #f8a5a5; }
body#chat-page .tool-call-bubble .tool-warn-msg { color: #f5d36b; }
body#chat-page .tool-expand-btn,
body#chat-page .message-action-btn,
body#chat-page .agent-next-prompt-chip,
body#chat-page .limit-modal-dismiss,
body#chat-page .prompt-queue-edit-btn,
body#chat-page .prompt-queue-trash,
body#chat-page .prompt-queue-save {
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    color: var(--v2-text-2) !important;
    text-shadow: none;
}
body#chat-page .tool-expand-btn { width: 24px; height: 24px; border-radius: 7px !important; }
body#chat-page .message-action-btn { height: 26px; padding: 0 10px; border-radius: 999px !important; font-size: 12.5px; }
body#chat-page .agent-next-prompt-chip { min-height: 30px; padding: 0 12px; border-radius: 999px !important; font-size: 13px; }
body#chat-page .limit-modal-dismiss { border: 0 !important; color: var(--v2-text-3) !important; }
body#chat-page .tool-expand-btn:hover,
body#chat-page .message-action-btn:hover,
body#chat-page .agent-next-prompt-chip:hover,
body#chat-page .prompt-queue-edit-btn:hover,
body#chat-page .prompt-queue-trash:hover,
body#chat-page .prompt-queue-save:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--v2-text) !important; border-color: rgba(255, 255, 255, 0.2) !important; }
body#chat-page .limit-modal-dismiss:hover { background: transparent !important; color: var(--v2-text) !important; }
body#chat-page .tool-badge-dots span,
body#chat-page .tool-status-line.tool-status-pending,
body#chat-page .chat-loading-dot,
body#chat-page .conversation-agent-dot,
body#chat-page .pulse-dot,
body#chat-page [class*="loading-dot"] { animation-iteration-count: infinite !important; }
body#chat-page .pulse-dot,
body#chat-page .conversation-agent-dot,
body#chat-page .chat-loading-dot { width: 7px; height: 7px; background-color: var(--v2-accent); }
body#chat-page .tool-badge { box-shadow: none; }
body#chat-page .tool-badge-warn { color: #f5d36b; background: rgba(245, 211, 107, 0.12); }
body#chat-page .tool-badge-pending { color: var(--v2-accent); }
body#chat-page .tool-call-bubble { animation-duration: .18s !important; }
body#chat-page .conversation-time-wrap,
body#chat-page .conversation-list li:hover .conversation-time-wrap { transition: transform .2s cubic-bezier(.22, .61, .36, 1) !important; }
body#chat-page .slider { background: rgba(255, 255, 255, 0.12); border-color: transparent; }
body#chat-page .slider,
body#chat-page .slider::before { transition: background-color .2s ease, transform .2s ease !important; }
body#chat-page input:checked + .slider { background: var(--v2-fill); }
body#chat-page .chat-form-actions .mic-btn,
body#chat-page .chat-form-actions .voice-cancel-btn { border: 0 !important; }
@media (prefers-reduced-motion: reduce) {
    body#chat-page *, body#chat-page *::before, body#chat-page *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ==================================================================
   RESPONSIVE SIDEBAR (2026-09-26). Three deliberate states, driven by
   lib/sidebar-rail.js: full column, 68px icon rail, overlay drawer. The
   column never shrinks below its width; labels hide instead of truncating.
   ================================================================== */
body#chat-page .chat-container { overflow-x: hidden; }
body#chat-page .chat-main { flex: 1 1 auto; min-width: 0; }
body#chat-page .sidebar {
    --rail-w: 68px;
    flex: 0 0 var(--sidebar-width, 248px);
    width: var(--sidebar-width, 248px);
    min-width: 220px;
    max-width: 320px;
    transition-property: flex-basis, width, min-width, max-width, padding, transform, box-shadow !important;
    transition-duration: .2s !important;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1) !important;
    transition-delay: 0s !important;
}
body#chat-page .sidebar-header { display: flex; align-items: center; justify-content: space-between; }
body#chat-page .sidebar-header h2 { transition: opacity .15s ease; }
body#chat-page .sidebar .panel-hide-btn svg { transition: transform .2s cubic-bezier(.22, .61, .36, 1); }

/* ---- rail ---- */
body#chat-page.sidebar-rail .sidebar {
    flex-basis: var(--rail-w);
    width: var(--rail-w);
    min-width: var(--rail-w);
    max-width: var(--rail-w);
    padding: 12px 8px 10px;
}
body#chat-page.sidebar-rail .sidebar-resize-handle { display: none; }
body#chat-page.sidebar-rail .sidebar-header { justify-content: center; margin: 0 0 10px; }
body#chat-page.sidebar-rail .sidebar-header h2 { display: none; }
body#chat-page.sidebar-rail .sidebar .panel-hide-btn svg { transform: rotate(180deg); }
body#chat-page.sidebar-rail .new-chat-btn { justify-content: center; gap: 0; padding: 0; font-size: 0; }
body#chat-page.sidebar-rail .new-chat-btn svg { width: 16px; height: 16px; }
body#chat-page.sidebar-rail .conversation-list { overflow-x: hidden; padding: 0 0 6px; }
body#chat-page.sidebar-rail .conversation-group { justify-content: center; gap: 0; padding: 10px 0 4px; font-size: 0; }
body#chat-page.sidebar-rail .conversation-group::before { opacity: 0.55; }
body#chat-page.sidebar-rail .conversation-list li[data-id] { justify-content: center; gap: 0; min-height: 34px; margin: 1px 0; padding: 0; }
body#chat-page.sidebar-rail .conversation-list li[data-id]::before { position: static; width: 15px; height: 15px; transform: none; }
body#chat-page.sidebar-rail .conversation-list li[data-id] > * { display: none; }
body#chat-page.sidebar-rail .conversation-list li.active { background: rgba(255, 255, 255, 0.08); }
body#chat-page.sidebar-rail .usage-meter { margin: 8px 0; padding: 9px 7px; }
body#chat-page.sidebar-rail .usage-meter > :not(.quota-bar-track) { display: none; }
body#chat-page.sidebar-rail .usage-meter .quota-bar-track { height: 4px; margin: 0; }
body#chat-page.sidebar-rail .sidebar-foot { padding-top: 8px; }
body#chat-page.sidebar-rail .sidebar-plan-row { justify-content: center; gap: 0; min-height: 40px; margin: 0 0 8px; padding: 0; }
body#chat-page.sidebar-rail .sidebar-plan-row > * { display: none; }
body#chat-page.sidebar-rail .sidebar-plan-row::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: var(--v2-accent);
    -webkit-mask: var(--ico-up) center / contain no-repeat;
    mask: var(--ico-up) center / contain no-repeat;
}
body#chat-page.sidebar-rail .sidebar-plan-row.is-paid::before { background: var(--v2-text-2); }
body#chat-page.sidebar-rail .sidebar-settings-btn { gap: 0; font-size: 0; }
body#chat-page.sidebar-rail .sidebar-settings-btn svg { width: 16px; height: 16px; opacity: 1; }
body#chat-page.sidebar-rail .conversation-list:empty::before { display: none; }

/* ---- drawer (medium and narrow screens) ---- */
body#chat-page .sidebar-scrim {
    position: fixed;
    inset: var(--lp-nav-h, 64px) 0 0 0;
    z-index: 58;
    background: rgba(8, 4, 16, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: lpFade .15s ease both;
}
body#chat-page .sidebar-scrim[hidden] { display: none; }
body#chat-page.sidebar-medium.sidebar-drawer .chat-container { padding-left: var(--rail-w, 68px); }
body#chat-page.sidebar-drawer .sidebar {
    position: fixed;
    top: var(--lp-nav-h, 64px);
    bottom: 0;
    left: 0;
    z-index: 59;
    display: flex;
    flex-basis: 280px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    padding: 12px 10px 10px;
    background: #100c19;
    border-right: 1px solid var(--v2-line-2);
    box-shadow: 40px 0 90px -40px rgba(0, 0, 0, 0.85);
    animation: sidebarSlideIn .2s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes sidebarSlideIn { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
body#chat-page.sidebar-drawer .sidebar-resize-handle { display: none; }

/* ---- narrow: nothing inline, a menu button opens the drawer ---- */
body#chat-page.sidebar-narrow:not(.sidebar-drawer) .sidebar { display: none; }
body#chat-page.sidebar-narrow .chat-container { flex-direction: row; }
body#chat-page .sidebar-menu-btn {
    position: fixed;
    top: calc(var(--lp-nav-h, 64px) + 10px);
    left: 12px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--v2-hair-strong);
    border-radius: 999px;
    background: rgba(16, 12, 25, 0.9);
    color: var(--v2-text);
    box-shadow: none;
    cursor: pointer;
}
body#chat-page .sidebar-menu-btn[hidden] { display: none; }
body#chat-page .sidebar-menu-btn::before, body#chat-page .sidebar-menu-btn::after { display: none; }
body#chat-page .sidebar-menu-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* ---- tooltip (one floating element positioned by the script) ---- */
body#chat-page .sidebar-tip {
    position: fixed;
    z-index: 80;
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #241a33;
    color: var(--v2-text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    animation: lpFade .12s ease both;
}
body#chat-page .sidebar-tip[hidden] { display: none; }

/* rail items need 44px touch targets where they are the only control */
body#chat-page.sidebar-rail .new-chat-btn,
body#chat-page.sidebar-rail .sidebar-settings-btn,
body#chat-page.sidebar-rail .sidebar-plan-row { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    body#chat-page .sidebar, body#chat-page.sidebar-drawer .sidebar, body#chat-page .sidebar-scrim, body#chat-page .sidebar-tip { transition: none !important; animation: none !important; }
}

/* quota header: label and value wrap instead of clipping at the full sidebar width */
body#chat-page .usage-meter .quota-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
body#chat-page .usage-meter .quota-value { white-space: nowrap; }

/* Inter on the chat too (2026-09-27), so the app and the marketing pages share one typeface */
body#chat-page { --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-body); font-family: var(--font-body); }

/* ==================================================================
   FEEDBACK CARD (2026-10-01): three optional questions after a run
   (app.js buildFeedbackCard). A quiet card in the message column,
   never a modal: same family as the notices, purple only as the dot,
   the focus ring and the one filled button.
   ================================================================== */

body#chat-page .chat-messages > .chat-feedback-card {
    display: flex;
    justify-content: flex-start;
    transition: opacity .18s ease, transform .18s ease;
    animation: chatFeedbackIn .22s cubic-bezier(.22, .61, .36, 1) backwards; /* not "both": that would pin opacity and block the leave fade */
}
body#chat-page .chat-messages > .chat-feedback-card.is-leaving {
    opacity: 0;
    transform: translateY(4px);
}
@keyframes chatFeedbackIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

body#chat-page .chat-feedback-card__panel {
    width: 100%;
    max-width: 600px;
    padding: 14px 12px 14px 16px;
    border: 1px solid var(--v2-line-2);
    border-radius: 12px;
    background: var(--v2-card);
}

body#chat-page .chat-feedback-card__head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
body#chat-page .chat-feedback-card__head .chat-notice-dot { margin-top: 7px; }
body#chat-page .chat-feedback-card__headcopy { flex: 1 1 auto; min-width: 0; }
body#chat-page .chat-feedback-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--v2-text);
}
body#chat-page .chat-feedback-card__sub {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--v2-text-2);
}
body#chat-page .chat-feedback-card__close { margin: -4px 0 0; }

body#chat-page .chat-feedback-card__fields {
    display: grid;
    gap: 10px;
    margin: 14px 4px 0 17px;
}
body#chat-page .chat-feedback-card__field {
    display: block;
    margin: 0;
    font-weight: 400;
    text-shadow: none;
}
body#chat-page .chat-feedback-card__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--v2-text-2);
}
body#chat-page .chat-feedback-card__input {
    display: block;
    width: 100%;
    min-height: 46px;
    max-height: 240px;
    padding: 8px 11px;
    resize: vertical;
    border: 1px solid var(--v2-line-2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
    text-shadow: none;
    color: var(--v2-text);
    font-size: 13.5px;
    line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease;
}
body#chat-page .chat-feedback-card__input:hover {
    border-color: rgba(207, 195, 224, 0.28);
    box-shadow: none;
}
body#chat-page .chat-feedback-card__input:focus {
    outline: none;
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.14);
}
body#chat-page .chat-feedback-card__input:read-only { opacity: 0.7; }

body#chat-page .chat-feedback-card__error {
    margin: 10px 4px 0 17px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #f8a5a5;
}
body#chat-page .chat-feedback-card__error[hidden] { display: none; }

body#chat-page .chat-feedback-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 4px 0 17px;
}
body#chat-page .chat-feedback-card__send,
body#chat-page .chat-feedback-card__later {
    min-height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}
body#chat-page .chat-feedback-card__send::before,
body#chat-page .chat-feedback-card__send::after,
body#chat-page .chat-feedback-card__later::before,
body#chat-page .chat-feedback-card__later::after { display: none; }
body#chat-page .chat-feedback-card__send {
    border: 1px solid transparent;
    background: var(--v2-fill);
    color: #fff;
}
body#chat-page .chat-feedback-card__send:not(:disabled):hover { background: var(--v2-fill-hover); }
body#chat-page .chat-feedback-card__later {
    border: 1px solid var(--v2-line-2);
    background: transparent;
    color: var(--v2-text-2);
}
body#chat-page .chat-feedback-card__later:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text);
}
body#chat-page .chat-feedback-card__send:disabled,
body#chat-page .chat-feedback-card__later:disabled { opacity: 0.6; cursor: default; }

body#chat-page .chat-feedback-card__thanks {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--v2-text-2);
}

@media (prefers-reduced-motion: reduce) {
    body#chat-page .chat-messages > .chat-feedback-card { animation: none; transition: none; }
}

/* The model picker shown as a popover (top layer, app.js showInTopLayer): undo the popover
   defaults so it stays the same full-window, transparent layer it was as a fixed overlay. */
body#chat-page #model-picker-overlay[popover] {
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    color: inherit;
}
body#chat-page #model-picker-overlay[popover]::backdrop { background: transparent; }