/* RoCode chat on the shared system (2026-10-02).
   Loaded last on chat.html, after chat-v2.css and chat-credits.css. It does two things:
     1. points the chat's own variables (--v2-*, --lp-*) at /tokens.css, which re-tints
        every rule in chat.css, chat-landing.css and chat-v2.css that reads them;
     2. restyles the chrome the user sees first (header, sidebar, empty state, the
        plugin panel, the composer) to the brief: a darker frame around a calm canvas,
        purple only on the one action that matters, no pills, no glow, no uppercase.
   chat-v2.css is left as it is (scripts/test-chat-studio-css.mjs pins rules in it), so
   this layer wins by selector weight and, where those rules use !important, by its own. */

body#chat-page {
  --v2-bg: var(--rc-bg);
  --v2-pane: var(--rc-bg-sunken);
  --v2-card: var(--rc-surface);
  --v2-card-2: var(--rc-surface-raised);
  --v2-line: var(--rc-line);
  --v2-line-2: var(--rc-line-strong);
  --v2-text: var(--rc-text);
  --v2-text-2: var(--rc-text-2);
  --v2-text-3: var(--rc-text-3);
  --v2-accent: var(--rc-accent-text);
  --v2-fill: var(--rc-accent-fill);
  --v2-fill-hover: var(--rc-accent-fill-hover);
  --v2-hair: var(--rc-line);
  --v2-hair-strong: var(--rc-line-strong);
  --v2-ok: var(--rc-success);
  --v2-mono: var(--rc-font-mono);

  --lp-bg: var(--rc-bg);
  --lp-card: var(--rc-surface);
  --lp-card-top: var(--rc-surface);
  --lp-surface: var(--rc-surface-raised);
  --lp-surface-hover: var(--rc-surface-selected);
  --lp-surface-down: var(--rc-surface-selected);
  --lp-line: var(--rc-line);
  --lp-line-strong: var(--rc-line-strong);
  --lp-line-ui: var(--rc-line-strong);
  --lp-edge: transparent;
  --lp-text: var(--rc-text);
  --lp-text-2: var(--rc-text-2);
  --lp-text-3: var(--rc-text-3);
  --lp-brand: var(--rc-accent);
  --lp-violet: var(--rc-accent-text);
  --lp-violet-soft: var(--rc-accent-strong);
  --lp-fill: var(--rc-accent-fill);
  --lp-fill-hover: var(--rc-accent-fill-hover);
  --lp-fill-down: var(--rc-accent-fill-press);
  --lp-on-fill: var(--rc-on-accent);
  --lp-ok: var(--rc-success);
  --lp-amber: var(--rc-warning);
  --lp-orange: var(--rc-accent-fill);
  --lp-orange-hover: var(--rc-accent-fill-hover);
  --lp-disabled-bg: var(--rc-surface-raised);
  --lp-disabled-text: var(--rc-text-disabled);
  --lp-shadow: none;
  --lp-card-shadow: none;
  --lp-font: var(--rc-font);
  --lp-mono: var(--rc-font-mono);

  --font-body: var(--rc-font);
  --font-display: var(--rc-font);
  font-family: var(--rc-font);
  color: var(--rc-text);
}
html:has(body#chat-page), body#chat-page { background: var(--rc-bg) !important; }
body#chat-page ::selection { background: var(--rc-accent-soft); }
body#chat-page :focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 2px; }

/* ---------- header: part of the frame ---------- */
body#chat-page .navbar-top {
  min-height: var(--rc-nav-h); background: var(--rc-bg-sunken) !important; border-bottom: 1px solid var(--rc-line) !important; box-shadow: none !important;
}
body#chat-page .navbar-top .logo-text {
  color: var(--rc-text) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1 !important;
  text-shadow: none !important; animation: none !important;
}
/* The site wordmark (2026-10-10, like the landing header): the mark in a tinted, glowing tile, Ro + Code. Not a link. */
body#chat-page .navbar-top .logo { gap: 10px; }
body#chat-page .navbar-top .logo-icon {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; box-sizing: border-box; border-radius: 8px;
  background: rgba(139, 92, 246, 0.15); border: 1.5px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 16px 3px rgba(139, 92, 246, 0.2), 0 0 32px 6px rgba(139, 92, 246, 0.08), inset 0 0 8px rgba(139, 92, 246, 0.1);
}
body#chat-page .navbar-top .logo-icon img { display: block; width: 20px; height: 20px; }
body#chat-page .navbar-top .logo-text span { color: var(--rc-violet-400) !important; }
body#chat-page .chat-nav a {
  font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-medium) !important; color: var(--rc-text-3) !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body#chat-page .chat-nav a:hover { color: var(--rc-text) !important; }

/* ---------- sidebar: the darker frame ---------- */
body#chat-page aside.sidebar { background: var(--rc-bg-sunken) !important; border-right: 1px solid var(--rc-line) !important; box-shadow: none !important; }
body#chat-page .sidebar-header h2 {
  font-size: var(--rc-fs-caption) !important; font-weight: var(--rc-fw-medium) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--rc-text-3) !important;
}
body#chat-page .panel-hide-btn { color: var(--rc-text-3) !important; border-radius: var(--rc-radius-sm) !important; }
body#chat-page .panel-hide-btn:hover { color: var(--rc-text) !important; background: var(--rc-hover) !important; }
body#chat-page #new-chat-btn.new-chat-btn {
  min-height: var(--rc-control-md) !important; border: 1px solid var(--rc-line-strong) !important; border-radius: var(--rc-radius-md) !important;
  background: transparent !important; color: var(--rc-text) !important; box-shadow: none !important;
}
body#chat-page:not(.sidebar-rail) #new-chat-btn.new-chat-btn { font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-medium) !important; letter-spacing: -0.006em !important; }
body#chat-page #new-chat-btn.new-chat-btn:hover { background: var(--rc-hover) !important; border-color: var(--rc-line-hover) !important; }
body#chat-page #new-chat-btn.new-chat-btn svg { color: var(--rc-text-2); }
body#chat-page .conversation-list li[data-id] { color: var(--rc-text-2); border-radius: var(--rc-radius-sm); }
body#chat-page .conversation-list li[data-id]:hover { background: var(--rc-hover); color: var(--rc-text); }
body#chat-page .conversation-list li.active { background: var(--rc-surface-selected); color: var(--rc-text); }
body#chat-page .conversation-title { font-size: var(--rc-fs-small); font-weight: var(--rc-fw-regular); }
body#chat-page .conversation-list li.active .conversation-title { font-weight: var(--rc-fw-medium); }
body#chat-page .conversation-time { font-size: var(--rc-fs-meta); color: var(--rc-text-3); }
body#chat-page .conversation-group-label, body#chat-page .conversation-group > button, body#chat-page .conversation-group-title {
  font-size: var(--rc-fs-meta) !important; font-weight: var(--rc-fw-medium) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--rc-text-3) !important;
}

/* usage meter */
body#chat-page #usage-meter.usage-meter { border: 1px solid var(--rc-line) !important; border-radius: var(--rc-radius-lg) !important; background: transparent !important; box-shadow: none !important; }
body#chat-page #quota-label.quota-label {
  font-size: var(--rc-fs-meta) !important; font-weight: var(--rc-fw-medium) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--rc-text-3) !important;
}
body#chat-page #quota-value.quota-value { font-size: var(--rc-fs-meta) !important; font-weight: var(--rc-fw-medium) !important; letter-spacing: 0 !important; color: var(--rc-text-2) !important; font-variant-numeric: tabular-nums; }
body#chat-page .quota-bar-track { height: 4px !important; border-radius: var(--rc-radius-full) !important; background: var(--rc-line-strong) !important; }
body#chat-page #quota-bar-fill.quota-bar-fill { border-radius: var(--rc-radius-full) !important; background: var(--rc-accent) !important; box-shadow: none !important; }
body#chat-page #quota-bar-fill.quota-bar-fill.warning { background: var(--rc-warning) !important; }
body#chat-page #quota-bar-fill.quota-bar-fill.danger { background: var(--rc-danger) !important; }
body#chat-page #quota-timer.quota-timer, body#chat-page #quota-countdown { font-size: var(--rc-fs-meta) !important; color: var(--rc-text-3) !important; }

/* plan row: visible, never loud */
body#chat-page .sidebar-foot { border-top: 1px solid var(--rc-line) !important; }
body#chat-page #sidebar-plan-row.sidebar-plan-row {
  min-height: 48px !important; border: 1px solid var(--rc-line) !important; border-radius: var(--rc-radius-lg) !important;
  background: transparent !important; box-shadow: none !important;
}
body#chat-page #sidebar-plan-row.sidebar-plan-row:hover { background: var(--rc-hover) !important; border-color: var(--rc-line-strong) !important; }
body#chat-page #sidebar-plan-name { font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-medium) !important; color: var(--rc-text) !important; }
body#chat-page:not(.sidebar-rail) #sidebar-plan-action.sidebar-plan-action {
  min-height: 28px !important; padding: 0 10px !important; border: 1px solid var(--rc-accent-line) !important; border-radius: var(--rc-radius-sm) !important;
  background: var(--rc-accent-soft) !important; color: var(--rc-accent-strong) !important; box-shadow: none !important;
  font-size: var(--rc-fs-caption) !important; font-weight: var(--rc-fw-semibold) !important;
}
body#chat-page:not(.sidebar-rail) .sidebar-plan-row.is-paid #sidebar-plan-action.sidebar-plan-action,
body#chat-page:not(.sidebar-rail) .sidebar-plan-row.is-paid .sidebar-plan-action {
  border-color: var(--rc-line-strong) !important; background: transparent !important; color: var(--rc-text-2) !important;
}
body#chat-page #sidebar-settings-btn.sidebar-settings-btn {
  min-height: var(--rc-control-md) !important; border: 0 !important; border-radius: var(--rc-radius-md) !important;
  background: transparent !important; box-shadow: none !important; color: var(--rc-text-2) !important;
}
body#chat-page:not(.sidebar-rail) #sidebar-settings-btn.sidebar-settings-btn {
  justify-content: flex-start !important; padding: 0 var(--rc-sp-3) !important; font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-medium) !important;
}
body#chat-page #sidebar-settings-btn.sidebar-settings-btn:hover { background: var(--rc-hover) !important; color: var(--rc-text) !important; }

/* ---------- empty state: the app at rest ---------- */
body#chat-page #empty-state-title.empty-title {
  font-size: 26px !important; font-weight: var(--rc-fw-semibold) !important; letter-spacing: var(--rc-ls-heading) !important; line-height: 1.25 !important; color: var(--rc-text) !important;
}
body#chat-page #empty-state-sub.empty-sub { font-size: var(--rc-fs-ui) !important; color: var(--rc-text-3) !important; }
body#chat-page .starter-prompt {
  min-height: 34px !important; padding: 0 var(--rc-sp-3) !important; border: 1px solid var(--rc-line-strong) !important; border-radius: var(--rc-radius-sm) !important;
  background: transparent !important; color: var(--rc-text-2) !important; box-shadow: none !important;
  font-size: var(--rc-fs-caption) !important; font-weight: var(--rc-fw-medium) !important;
}
body#chat-page .starter-prompt:hover { background: var(--rc-hover) !important; border-color: var(--rc-line-hover) !important; color: var(--rc-text) !important; }

/* ---------- the plugin panel above the composer ---------- */
body#chat-page .plugin-setup {
  border: 1px solid var(--rc-line) !important; border-radius: var(--rc-radius-xl) !important; background: var(--rc-surface) !important; box-shadow: none !important;
}
body#chat-page .plugin-setup__dot { background: var(--rc-warning) !important; box-shadow: none !important; }
body#chat-page .plugin-setup__title { font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-semibold) !important; color: var(--rc-text) !important; }
body#chat-page .plugin-setup__sub { font-size: var(--rc-fs-caption) !important; color: var(--rc-text-3) !important; }
body#chat-page #plugin-pair-code.plugin-pair-input {
  min-height: 36px !important; border: 1px solid var(--rc-line-strong) !important; border-radius: var(--rc-radius-md) !important;
  background: var(--rc-bg) !important; color: var(--rc-text) !important; box-shadow: none !important;
  font-family: var(--rc-font-mono) !important; font-size: var(--rc-fs-small) !important; letter-spacing: .08em;
}
body#chat-page #plugin-pair-code.plugin-pair-input:focus { border-color: var(--rc-accent-line) !important; box-shadow: 0 0 0 3px var(--rc-accent-soft) !important; outline: none; }
body#chat-page #plugin-pair-code.plugin-pair-input::placeholder { color: var(--rc-text-3) !important; }
body#chat-page #plugin-pair-btn.plugin-pair-btn {
  min-height: 36px !important; padding: 0 14px !important; border: 0 !important; border-radius: var(--rc-radius-md) !important;
  background: var(--rc-accent-fill) !important; color: var(--rc-on-accent) !important; box-shadow: none !important;
  font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-semibold) !important;
}
body#chat-page #plugin-pair-btn.plugin-pair-btn:hover { background: var(--rc-accent-fill-hover) !important; }
body#chat-page #plugin-pair-btn.plugin-pair-btn:disabled { background: var(--rc-surface-raised) !important; color: var(--rc-text-disabled) !important; }
body#chat-page #open-plugin-modal-btn.plugin-link-btn {
  min-height: 36px !important; padding: 0 var(--rc-sp-3) !important; border: 1px solid var(--rc-line-strong) !important; border-radius: var(--rc-radius-md) !important;
  background: transparent !important; color: var(--rc-text) !important; box-shadow: none !important;
  font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-medium) !important;
}
body#chat-page #open-plugin-modal-btn.plugin-link-btn:hover { background: var(--rc-hover) !important; border-color: var(--rc-line-hover) !important; }

/* ---------- composer: one roomy box, the input on top, one toolbar row inside it ----------
   Left: attach, the Build / Ask chip, the plugin status. Right: the model (its effort level
   muted beside it), the mic and a round send button. Attachments and the queue sit inside
   the box above the text. Focus is a border, not a glow. */
body#chat-page #chat-form {
  position: relative; display: flex !important; flex-direction: column; gap: 0;
  padding: 14px 8px 8px !important;
  border: 1px solid var(--rc-line-strong) !important; border-radius: 24px !important;
  background: var(--rc-surface-raised) !important; box-shadow: none !important;
}
body#chat-page #chat-form:focus-within { border-color: var(--rc-line-hover) !important; box-shadow: none !important; }
body#chat-page #chat-form .prompt-queue-root,
body#chat-page #chat-form .prompt-attach-root { padding: 0 6px; }
body#chat-page #chat-form .prompt-queue-list:not([hidden]) { margin: 0 0 10px !important; }
body#chat-page #chat-form .prompt-attach-list:not([hidden]) { gap: 8px; margin: 0 0 10px !important; }
/* attachment chips: small cards inside the box, not pills */
body#chat-page #chat-form .prompt-attach-chip {
  gap: 8px; min-height: 36px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--rc-line-strong); border-radius: 12px; background: var(--rc-surface-selected); box-shadow: none;
  color: var(--rc-text); font-size: var(--rc-fs-caption); font-weight: var(--rc-fw-medium);
}
body#chat-page #chat-form .prompt-attach-chip:has(.prompt-attach-thumbnail) { padding-left: 4px; }
body#chat-page #chat-form .prompt-attach-chip:hover { border-color: var(--rc-line-hover); background: var(--rc-surface-selected); }
body#chat-page #chat-form .prompt-attach-name { color: var(--rc-text-2); }
body#chat-page #chat-form .prompt-attach-thumbnail .chat-image-preview { border-radius: 8px; border-color: var(--rc-line); }
body#chat-page #chat-form .prompt-attach-thumbnail .chat-image-preview img { width: 40px; height: 40px; }
body#chat-page #chat-form .chat-form-row {
  position: static !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important;
  margin: 0 !important; padding: 0 !important;
}
body#chat-page #chat-form .chat-form-body,
body#chat-page #chat-form .chat-input-wrap { width: 100%; min-width: 0; margin: 0; padding: 0; }
body#chat-page #chat-input.mention-editor {
  box-sizing: border-box; min-height: 48px !important; max-height: min(320px, 40vh) !important; overflow-y: auto !important;
  margin: 0 !important; padding: 0 8px !important;
  font-size: var(--rc-fs-ui) !important; line-height: 24px !important; color: var(--rc-text) !important;
}
body#chat-page #chat-input.mention-editor.is-empty::before { color: var(--rc-text-3) !important; }

/* the toolbar row: DOM order is visual order (and tab order) */
body#chat-page #chat-form .chat-form-actions {
  position: static !important; display: flex !important; flex-wrap: nowrap; align-items: center; gap: 2px;
  width: 100%; min-height: 36px; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important;
}
body#chat-page #chat-form .chat-form-actions::before,
body#chat-page #chat-form .chat-form-actions::after { content: none !important; display: none !important; }
body#chat-page #chat-form .chat-form-actions > * { order: 0 !important; margin: 0; }

/* tool buttons share one quiet face: 34px, no border, a wash on hover */
body#chat-page #prompt-attach-btn.attach-btn,
body#chat-page #mic-btn.mic-btn,
body#chat-page #chat-form .voice-cancel-btn,
body#chat-page #chat-form .voice-confirm-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 34px !important; height: 34px !important; min-width: 34px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: var(--rc-radius-full) !important; background: transparent !important; box-shadow: none !important;
  color: var(--rc-text-2) !important; cursor: pointer;
}
body#chat-page #chat-form .voice-cancel-btn[hidden],
body#chat-page #chat-form .voice-confirm-btn[hidden] { display: none !important; }
body#chat-page #prompt-attach-btn.attach-btn:hover,
body#chat-page #mic-btn.mic-btn:hover { color: var(--rc-text) !important; background: var(--rc-hover) !important; }
body#chat-page #prompt-attach-btn::before, body#chat-page #prompt-attach-btn::after,
body#chat-page #mic-btn::before, body#chat-page #mic-btn::after { display: none !important; }
body#chat-page #chat-form .chat-form-actions :is(button):focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 1px; }

/* the plugin status: a dot and a short line, no box. The detail line app.js adds under it
   ("Studio: <place>", why it went offline) shows as a small card on hover. */
body#chat-page #chat-form .chat-form-actions .plugin-status-chip {
  position: relative; flex: 0 1 auto; min-width: 0; margin: 0 0 0 6px !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
body#chat-page #plugin-config-section #plugin-status-indicator.plugin-status-indicator {
  display: inline-flex !important; align-items: center; gap: 7px; height: 28px; min-height: 0 !important; max-width: 220px;
  margin: 0 !important; padding: 0 6px !important;
  border: 0 !important; border-radius: var(--rc-radius-sm) !important; background: transparent !important; box-shadow: none !important;
  color: var(--rc-text-3) !important; font-size: var(--rc-fs-caption) !important; font-weight: var(--rc-fw-medium) !important;
  line-height: 1.2; white-space: nowrap; overflow: visible; cursor: default;
}
body#chat-page #plugin-status-indicator .plugin-status-dot {
  flex: none; width: 7px !important; height: 7px !important; margin: 0 !important;
  border-radius: var(--rc-radius-full); background: var(--rc-text-3) !important; box-shadow: none !important; animation: none !important;
}
body#chat-page #plugin-status-indicator .plugin-status-dot--ok { background: var(--rc-success) !important; }
body#chat-page #plugin-status-indicator .plugin-status-dot--err { background: var(--rc-warning) !important; }
body#chat-page #plugin-status-indicator > div {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: min(360px, 70vw); margin: 0 !important; padding: 6px 10px;
  border: 1px solid var(--rc-line-strong); border-radius: var(--rc-radius-sm); background: var(--rc-surface-raised);
  box-shadow: var(--rc-shadow-pop); color: var(--rc-text-2) !important; font-size: var(--rc-fs-meta) !important; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease, visibility 0s linear .14s;
}
body#chat-page #plugin-status-indicator:hover > div { opacity: 1; visibility: visible; transition-delay: .2s, .2s; }
/* chat-v2.css puts a newer plugin's place name inline after the dot (a :has() rule that outranks
   the card above). Here it is invisible, so inline it only took ~190px and squeezed the model name:
   keep it the same hover card as every other detail line. */
@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: 0; }
  body#chat-page #plugin-config-section #plugin-status-indicator:has(> .plugin-status-dot--ok ~ div) > div {
    position: absolute; display: block; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(360px, 70vw);
    margin: 0 !important; padding: 6px 10px; border: 1px solid var(--rc-line-strong); border-radius: var(--rc-radius-sm);
    background: var(--rc-surface-raised); box-shadow: var(--rc-shadow-pop); color: var(--rc-text-2) !important;
    font-size: var(--rc-fs-meta) !important; white-space: normal; overflow: visible;
  }
}

/* the right group: the model line pushes it to the right edge */
body#chat-page #model-picker-btn.model-picker-btn {
  display: inline-flex !important; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 260px;
  height: 34px !important; margin: 0 0 0 auto !important; padding: 0 10px !important;
  border: 0 !important; border-radius: var(--rc-radius-full) !important; background: transparent !important; box-shadow: none !important;
  color: var(--rc-text) !important; font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-medium) !important;
}
body#chat-page #model-picker-btn.model-picker-btn:hover { background: var(--rc-hover) !important; }
body#chat-page #model-picker-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the sparkle before the model name was decoration */
body#chat-page #model-picker-label::before { content: none !important; display: none !important; }
body#chat-page #model-picker-btn > svg, body#chat-page #model-picker-btn > i { flex: none; color: var(--rc-text-3); }
/* with an effort level the model and its level read as one line: "Model High ˅" */
body#chat-page #model-picker-btn:has(+ #effort-chip:not([hidden])) { padding-right: 2px !important; }
body#chat-page #model-picker-btn:has(+ #effort-chip:not([hidden])) > :is(svg, i) { display: none; }
body#chat-page #chat-form #effort-chip.effort-chip {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; flex: none;
  min-width: 0; height: 34px; min-height: 0; margin: 0 !important; padding: 0 10px 0 4px !important;
  border: 0 !important; border-radius: var(--rc-radius-full) !important; background: transparent !important; box-shadow: none !important;
  color: var(--rc-text-3) !important; font-size: var(--rc-fs-small) !important; font-weight: var(--rc-fw-medium) !important;
}
body#chat-page #chat-form #effort-chip.effort-chip::before { content: none !important; display: none !important; }
body#chat-page #chat-form #effort-chip.effort-chip[hidden] { display: none !important; }
body#chat-page #chat-form #effort-chip.effort-chip:hover,
body#chat-page #chat-form #effort-chip.effort-chip[aria-expanded="true"] { color: var(--rc-text-2) !important; background: var(--rc-hover) !important; }
body#chat-page #mic-btn.mic-btn { margin-left: 2px !important; }

body#chat-page #chat-form .send-btn-wrap { flex: none; margin: 0 0 0 4px !important; }
body#chat-page #send-btn.send-btn {
  width: 34px !important; height: 34px !important; min-width: 34px; padding: 0 !important;
  border-radius: var(--rc-radius-full) !important; box-shadow: none !important;
}
body#chat-page #send-btn.send-btn:not(.send-disabled):not(.stop-mode) { background-color: var(--rc-accent-fill) !important; }
body#chat-page #send-btn.send-btn:not(.send-disabled):not(.stop-mode):hover { background-color: var(--rc-accent-fill-hover) !important; }
body#chat-page #send-btn.send-btn.send-disabled { background-color: var(--rc-surface-selected) !important; opacity: 1; }
body#chat-page .send-btn-hint {
  border: 1px solid var(--rc-line-strong) !important; border-radius: var(--rc-radius-sm) !important; background: var(--rc-surface-raised) !important;
  color: var(--rc-text-2) !important; box-shadow: var(--rc-shadow-pop) !important;
}
body#chat-page .chat-char-counter { color: var(--rc-text-3); font-size: var(--rc-fs-meta); }
/* recording: the bar takes the input row and the plugin status steps aside, as before */
body#chat-page #chat-form.is-recording .chat-form-actions .plugin-status-chip { display: none !important; }

/* The sidebar can make the composer narrow even in a wide window: the status goes first. */
body#chat-page #chat-form { container: rc-composer / inline-size; }
@container rc-composer (max-width: 560px) {
  body#chat-page #plugin-config-section #plugin-status-indicator.plugin-status-indicator { font-size: 0 !important; gap: 0; padding: 0 8px !important; }
  body#chat-page #model-picker-btn.model-picker-btn { max-width: 170px; }
}

/* ---------- messages ---------- */
/* A long chat is megabytes of tool cards and code. Messages off screen skip style, layout
   and paint until they come near the view (content-visibility), so typing in the composer,
   streaming and resizing cost the same in a 36 message chat as in a short one. The browser
   remembers each message's real height once it has been drawn (auto). The newest messages
   always draw for real, so "scroll to the bottom" lands on the real bottom, not on a guess.
   The scroller is a flex column: a skipped message would shrink to 0 without flex-shrink 0.
   The clip margin keeps the action row's -6px edge and focus rings inside the paint area. */
body#chat-page #chat-messages > .message-container {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 480px;
  flex-shrink: 0;
  overflow-clip-margin: 12px;
}
body#chat-page #chat-messages > .message-container:nth-last-child(-n+4) { content-visibility: visible; }
body#chat-page .chat-messages .message-container.user .message.user {
  border: 1px solid var(--rc-line) !important; border-radius: var(--rc-radius-lg) !important;
  background: var(--rc-surface-raised) !important; box-shadow: none !important; color: var(--rc-text) !important;
  font-size: var(--rc-fs-ui);
}
body#chat-page .chat-messages .message-container.ai .message.ai { color: var(--rc-text); font-size: var(--rc-fs-ui); line-height: 1.65; }
body#chat-page .tool-call-bubble { border-color: var(--rc-line) !important; background: var(--rc-surface) !important; box-shadow: none !important; border-radius: var(--rc-radius-lg) !important; }
body#chat-page .agent-thinking-toggle { color: var(--rc-text-3); }

/* Message actions (2026-10-09). A finished reply has a quiet row under it: small icon
   buttons, muted, brighter on hover, in the flow of the column so nothing can clip them
   (they used to wait at opacity 0 to the right of a full-width reply, outside the panel).
   The row stays away while the run is live and while the reply is still empty. A user
   message keeps Copy and Revert beside its bubble, on hover and on keyboard focus. */
body#chat-page .message-container.ai > .message-actions {
  position: static; transform: none; z-index: auto;
  display: flex; align-items: center; gap: 2px;
  margin: 6px 0 0 -6px; opacity: 1; pointer-events: auto;
}
/* The row is the reply's next sibling (app.js attachMessageActions), so the empty and the
   loading reply need no :has(). An :empty inside :has() made every key typed in the
   composer re-check every reply of the chat (2026-10-15, long chats lagged while typing). */
body#chat-page .message-container.ai > .message.ai:is(:empty, .loading) ~ .message-actions,
body#chat-page .message-container.ai:has(.agent-live-status, .agent-message-text.is-streaming) > .message-actions { display: none; }
body#chat-page .message-container.user > .message-actions {
  position: static; transform: none; z-index: auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  margin: 4px -6px 0 0;
}
body#chat-page .message-container .message-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-width: 28px; padding: 0 !important;
  border: 0 !important; border-radius: var(--rc-radius-sm) !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--rc-text-3) !important; font-size: var(--rc-fs-meta); font-weight: var(--rc-fw-medium); letter-spacing: 0;
}
body#chat-page .message-container .message-action-btn::before,
body#chat-page .message-container .message-action-btn::after { display: none; }
body#chat-page .message-container .message-action-btn svg { width: 15px; height: 15px; flex: none; }
body#chat-page .message-container .message-action-btn:hover {
  background: var(--rc-surface-raised) !important; color: var(--rc-text) !important;
}
body#chat-page .message-container .message-action-btn:focus-visible {
  outline: 2px solid var(--rc-accent-line); outline-offset: 1px; color: var(--rc-text) !important;
}
body#chat-page .message-container .message-action-btn.is-copied { color: var(--rc-success) !important; }
body#chat-page .message-container .message-action-btn:disabled { opacity: .5; cursor: default; }
body#chat-page .message-action-status {
  padding: 0 4px; color: var(--rc-text-3); font-size: var(--rc-fs-meta); line-height: 1; white-space: nowrap;
}
body#chat-page .message-action-status:empty { display: none; }
/* The newest reply's row is the last thing in the scroller, and the scroller fades its
   bottom 8px (chat-landing.css mask): a little room keeps the row clear of the fade. */
body#chat-page .chat-main:not(.chat-main--empty) .chat-messages { padding-bottom: 14px; }

/* ---------- sheets and menus ---------- */
body#chat-page #config-panel { background: var(--rc-surface-raised) !important; border-left: 1px solid var(--rc-line-strong) !important; box-shadow: var(--rc-shadow-modal) !important; }
body#chat-page .config-backdrop { background: var(--rc-scrim) !important; }
body#chat-page #model-picker-overlay .model-card {
  border-color: var(--rc-line) !important; background: var(--rc-surface-raised) !important; box-shadow: none !important; border-radius: var(--rc-radius-lg) !important;
}
body#chat-page #model-picker-overlay .model-card.selected { border-color: var(--rc-accent-line) !important; background: var(--rc-surface-selected) !important; }
body#chat-page .sidebar-tip { border: 1px solid var(--rc-line-strong); border-radius: var(--rc-radius-sm); background: var(--rc-surface-raised); color: var(--rc-text); box-shadow: var(--rc-shadow-pop); font-size: var(--rc-fs-meta); }

/* small fixes */
body#chat-page .conversation-list:empty::before { font-style: normal; font-size: var(--rc-fs-caption); color: var(--rc-text-3); }
body#chat-page:not(.sidebar-rail) #sidebar-plan-action.sidebar-plan-action { display: inline-flex !important; align-items: center !important; justify-content: center; line-height: 1 !important; }

/* the 68px rail (769 to 1179px): icons only. The reset line is shown by script with an inline
   style, so the rail's own "hide everything but the bar" rule never reached it and the text
   wrapped into three lines inside the rail. */
body#chat-page.sidebar-rail #quota-timer.quota-timer { display: none !important; }
/* Reset the global button face: its absolute inset otherwise pins the rail icon
   to a corner. Match the compact Settings control beneath it. */
body#chat-page.sidebar-rail #sidebar-plan-row.sidebar-plan-row {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 44px !important; height: 44px !important; min-height: 44px !important;
  margin: 0 auto 8px !important; padding: 0 !important; gap: 0 !important;
  border-color: transparent !important; border-radius: var(--rc-radius-md) !important;
}
body#chat-page.sidebar-rail #sidebar-plan-row.sidebar-plan-row:hover { border-color: transparent !important; }
body#chat-page.sidebar-rail #sidebar-plan-row.sidebar-plan-row::before {
  position: static !important; inset: auto !important; flex: none;
  width: 18px; height: 18px; margin: 0 !important; border-radius: 0 !important;
  background: var(--rc-accent) !important; transform: none !important; z-index: auto !important;
}
body#chat-page.sidebar-rail #sidebar-plan-row.sidebar-plan-row.is-paid::before {
  background: var(--rc-text-2) !important;
  --ico-plan: 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%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
  -webkit-mask: var(--ico-plan) center / contain no-repeat;
  mask: var(--ico-plan) center / contain no-repeat;
}

/* the plan tag next to the wordmark (paid users): a small grey label, not an orange badge */
body#chat-page .logo-tier-tag {
  margin-left: var(--rc-sp-2); padding: 1px 6px; border: 1px solid var(--rc-line-strong) !important; border-radius: var(--rc-radius-xs) !important;
  background: transparent !important; color: var(--rc-text-3) !important; box-shadow: none !important; text-shadow: none !important;
  font-size: var(--rc-fs-meta) !important; font-weight: var(--rc-fw-semibold) !important; letter-spacing: .02em !important;
}

/* labels in sentence case: date groups in the sidebar and the tool label on each step card */
body#chat-page:not(.sidebar-rail) .conversation-list .conversation-group {
  font-size: var(--rc-fs-meta) !important; font-weight: var(--rc-fw-medium) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--rc-text-3) !important;
}
body#chat-page .tool-info > .tool-action {
  padding: 1px 7px; border-radius: var(--rc-radius-xs); background: var(--rc-surface-selected); color: var(--rc-text-2);
  font-family: var(--rc-font); font-size: var(--rc-fs-meta); font-weight: var(--rc-fw-semibold); letter-spacing: 0; text-transform: none;
}

/* Keep titles, dates and actions in distinct cells; no hover slide over text. */
body#chat-page .conversation-list li[data-id][hidden] { display: none !important; }
body#chat-page:not(.sidebar-rail) .conversation-list li[data-id] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--rc-sp-2);
  row-gap: 2px;
  padding-block: var(--rc-sp-2);
  min-height: 58px;
}
body#chat-page:not(.sidebar-rail) .conversation-list li[data-id]::before { top: 21px; }
body#chat-page:not(.sidebar-rail) .conversation-title { grid-column: 1; grid-row: 1; }
body#chat-page:not(.sidebar-rail) .conversation-meta { display: contents; }
body#chat-page:not(.sidebar-rail) .conversation-time-wrap,
body#chat-page:not(.sidebar-rail) .conversation-list li:hover .conversation-time-wrap {
  grid-column: 1; grid-row: 2;
  transform: none !important;
  transition: none !important;
  min-width: 0;
}
body#chat-page:not(.sidebar-rail) .conversation-list .conversation-actions {
  grid-column: 2; grid-row: 1 / 3;
  position: static;
  width: auto; height: auto;
  transform: none;
  display: flex; gap: 0;
  opacity: 1; pointer-events: auto;
  transition: none;
}
body#chat-page .conversation-actions button {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 36px !important; height: 40px !important; min-height: 40px !important;
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent !important;
  color: var(--rc-text-3) !important;
}
body#chat-page .conversation-actions button:hover,
body#chat-page .conversation-actions button:focus-visible { background: var(--rc-hover) !important; color: var(--rc-text) !important; }
body#chat-page .conversation-actions .conversation-delete-btn:hover { color: var(--rc-danger) !important; }
body#chat-page .conversation-rename-form {
  grid-column: 1 / -1;
  display: grid; gap: var(--rc-sp-2);
  margin-top: var(--rc-sp-2);
  cursor: default;
}
body#chat-page .conversation-rename-input {
  width: 100%; min-width: 0;
  padding: 8px !important;
  background: var(--rc-bg) !important;
  color: var(--rc-text) !important;
  border: 1px solid var(--rc-line-strong) !important;
  border-radius: var(--rc-radius-sm);
  font: inherit; font-size: var(--rc-fs-small);
}
body#chat-page .conversation-rename-controls { display: flex; gap: var(--rc-sp-2); }
body#chat-page .conversation-rename-controls button {
  min-height: 36px !important; padding: 6px 10px !important;
  border: 1px solid var(--rc-line-strong) !important;
  border-radius: var(--rc-radius-sm) !important;
  color: var(--rc-text) !important; background: var(--rc-surface) !important;
}
body#chat-page .conversation-rename-status { margin: 0; color: var(--rc-text-2); font-size: var(--rc-fs-meta); white-space: normal; }
body#chat-page .conversation-rename-status:empty { display: none; }

/* Composer attachments use the same quiet toolbar and surfaces as the chat. */
#chat-page .attach-btn:focus-visible { outline:2px solid var(--rc-accent); outline-offset:2px; }
#chat-page .prompt-attach-root.has-attachment-status { display:block; }
#chat-page .prompt-attach-status { margin:6px 0; color:var(--rc-text-2); font-size:12px; }
/* Usage warning for Claude Opus and GPT-6 Astra (2026-10-19): quiet amber line above the composer. */
#chat-page .prompt-attach-status.heavy-model-note { margin:6px 0 4px; padding:6px 10px; border:1px solid var(--rc-warning-line); background:var(--rc-warning-soft); color:var(--rc-warning); border-radius:8px; font-size:12px; line-height:1.4; }
#chat-page .chat-image-previews { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
#chat-page .chat-image-preview { display:grid; place-items:center; overflow:hidden; border:1px solid var(--rc-line); border-radius:8px; max-width:240px; font-size:12px; }
#chat-page .chat-image-preview img { display:block; width:auto; max-width:240px; max-height:180px; object-fit:contain; }
#chat-page .prompt-attach-thumbnail .chat-image-previews { margin:0; }
#chat-page .prompt-attach-thumbnail .chat-image-preview img { width:48px; height:48px; object-fit:cover; }

/* ---------- Build / Ask (lib/ask-mode.js) ----------
   One quiet chip on the toolbar: the mode's icon, its name and a chevron. It opens a small
   menu above the box with both modes and their one line descriptions. The chip is never
   purple: purple stays on Send. */
body#chat-page .chat-form-actions .chat-mode { flex: 0 0 auto; }
/* static, so the menu anchors to the box (#chat-form) and opens above it */
body#chat-page .chat-mode { position: static; display: inline-flex; align-items: center; gap: var(--rc-sp-2); margin: 0 0 0 2px; }
body#chat-page .chat-mode-btn {
  --rc-btn-face-bg: none !important; --rc-btn-face-shadow: none !important;
  display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: 0; padding: 0 10px 0 9px;
  border: 0 !important; border-radius: var(--rc-radius-full); background: transparent; box-shadow: none !important;
  color: var(--rc-text-2); font-family: var(--rc-font); font-size: var(--rc-fs-small); font-weight: var(--rc-fw-medium);
  letter-spacing: 0; line-height: 1; white-space: nowrap; cursor: pointer; transform: none;
  transition: background-color .16s ease, color .16s ease;
}
body#chat-page .chat-mode-btn::before, body#chat-page .chat-mode-btn::after { display: none !important; }
body#chat-page .chat-mode-btn:hover, body#chat-page .chat-mode.is-open .chat-mode-btn { color: var(--rc-text); background: var(--rc-hover); }
body#chat-page .chat-mode-btn:focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 1px; }
body#chat-page .chat-mode-btn > svg:last-child, body#chat-page .chat-mode-btn > i { flex: none; color: var(--rc-text-3); }
body#chat-page .chat-mode-icon { flex: none; }
body#chat-page .chat-mode-btn .chat-mode-icon { display: none; }
body#chat-page .chat-mode[data-mode="build"] .chat-mode-btn .chat-mode-icon[data-icon-for="build"],
body#chat-page .chat-mode[data-mode="ask"] .chat-mode-btn .chat-mode-icon[data-icon-for="ask"] { display: block; }

body#chat-page .chat-mode-menu {
  position: absolute; left: 6px; bottom: calc(100% + 8px); z-index: 40;
  display: flex; flex-direction: column; gap: 2px; width: 300px; padding: 5px;
  border: 1px solid var(--rc-line-strong); border-radius: var(--rc-radius-lg); background: var(--rc-surface-raised);
  box-shadow: var(--rc-shadow-pop);
}
body#chat-page .chat-mode-menu[hidden] { display: none; }
body#chat-page .chat-mode-opt {
  --rc-btn-face-bg: none !important; --rc-btn-face-shadow: none !important;
  display: grid; grid-template-columns: 16px 1fr 16px; align-items: start; column-gap: 10px;
  width: 100%; margin: 0; padding: 9px 10px;
  border: 0 !important; border-radius: var(--rc-radius-sm); background: transparent; box-shadow: none !important;
  color: var(--rc-text-2); font-family: var(--rc-font); text-align: left; letter-spacing: 0; cursor: pointer; transform: none;
  transition: background-color .12s ease, color .12s ease;
}
body#chat-page .chat-mode-opt::before, body#chat-page .chat-mode-opt::after { display: none !important; }
body#chat-page .chat-mode-opt > .chat-mode-icon { margin-top: 1px; color: var(--rc-text-3); }
body#chat-page .chat-mode-opt:hover, body#chat-page .chat-mode-opt:focus-visible { background: var(--rc-hover); color: var(--rc-text); outline: none; }
body#chat-page .chat-mode-opt:focus-visible { box-shadow: inset 0 0 0 1px var(--rc-line-hover) !important; }
body#chat-page .chat-mode-opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body#chat-page .chat-mode-opt-name { color: var(--rc-text); font-size: var(--rc-fs-small); font-weight: var(--rc-fw-medium); line-height: 1.25; }
body#chat-page .chat-mode-tip { color: var(--rc-text-3); font-size: var(--rc-fs-caption); line-height: 1.35; white-space: normal; }
body#chat-page .chat-mode-check { margin-top: 1px; color: var(--rc-text-2); visibility: hidden; }
body#chat-page .chat-mode-opt[aria-checked="true"] .chat-mode-check { visibility: visible; }
body#chat-page .chat-mode-opt[aria-checked="true"] > .chat-mode-icon { color: var(--rc-text-2); }

/* first time only, until Ask is used once */
body#chat-page .chat-mode-new {
  padding: 2px 7px; border: 1px solid var(--rc-accent-line); border-radius: var(--rc-radius-xs);
  background: var(--rc-accent-soft); color: var(--rc-accent-strong);
  font-size: var(--rc-fs-meta); font-weight: var(--rc-fw-medium); line-height: 1.3; white-space: nowrap;
}
body#chat-page .chat-mode-new[hidden] { display: none; }
@media (max-width: 1180px) { body#chat-page .chat-mode-new { display: none; } }
@media (prefers-reduced-motion: reduce) {
  body#chat-page .chat-mode-btn, body#chat-page .chat-mode-opt, body#chat-page #plugin-status-indicator > div { transition: none; }
}

/* the user turn of an Ask: a small tag above the bubble */
body#chat-page .message-container.user > .message-mode-tag {
  align-self: flex-end; margin: 0 2px 4px; padding: 1px 7px;
  border: 1px solid var(--rc-line-strong); border-radius: var(--rc-radius-xs);
  color: var(--rc-text-3); font-size: var(--rc-fs-meta); font-weight: var(--rc-fw-medium); line-height: 1.4;
}
/* the reply of an Ask: "Answer" as a plain label over the answer, never the green change chip */
body#chat-page .message.ai .agent-completion-card.agent-completion-card--ask {
  display: flex; margin: 14px 0 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
body#chat-page .message.ai .agent-completion-card--ask:first-child { margin-top: 0; }
body#chat-page .agent-completion-card--ask .agent-completion-card-title {
  gap: 6px; color: var(--rc-text-3); font-size: var(--rc-fs-meta); font-weight: var(--rc-fw-semibold); letter-spacing: .01em;
}
body#chat-page .agent-completion-card--ask .agent-completion-card-title::before {
  width: 6px; height: 6px; background: var(--rc-accent-text); box-shadow: none;
}
/* an Ask answer that asked for a change: one small secondary button under it (as the Studio wait card's Stop) */
body#chat-page .message.ai .agent-ask-build { display: flex; margin: 10px 0 2px; }
body#chat-page .agent-ask-build .agent-ask-build-btn {
  min-height: 30px; padding: 0 12px;
  border: 1px solid var(--rc-line-strong); border-radius: 8px;
  background: transparent; color: var(--rc-text); font-size: 13px; font-weight: 600; cursor: pointer;
}
body#chat-page .agent-ask-build .agent-ask-build-btn::before,
body#chat-page .agent-ask-build .agent-ask-build-btn::after { display: none; }
body#chat-page .agent-ask-build .agent-ask-build-btn:not(:disabled):hover { background: rgba(255, 255, 255, 0.06); border-color: var(--rc-line-hover); }
body#chat-page .agent-ask-build .agent-ask-build-btn:focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 1px; }
body#chat-page .agent-ask-build .agent-ask-build-btn:disabled { opacity: 0.6; cursor: default; }
/* a first reply that is only a plan (audit 10-13 D11): an accent dot, not the green "done" chip, and one Build it button */
body#chat-page .message.ai .agent-completion-card.agent-completion-card--plan { border-color: rgba(167, 139, 250, 0.32); background: rgba(167, 139, 250, 0.05); }
body#chat-page .agent-completion-card--plan .agent-completion-card-title { color: var(--rc-text); }
body#chat-page .agent-completion-card--plan .agent-completion-card-title::before { background: var(--rc-accent-text); box-shadow: none; }
body#chat-page .agent-completion-card--plan .agent-plan-actions { display: flex; margin-top: 10px; }
body#chat-page .agent-completion-card--plan .agent-plan-build-btn { min-height: 30px; padding: 0 14px; font-size: 13px; }
/* only the newest plan offers Build it: an older one has a later turn under it */
body#chat-page .message-container:has(~ .message-container) .agent-plan-actions { display: none; }
/* a queued Ask keeps its mode: the same small tag in the queue row */
body#chat-page .prompt-queue-mode {
  flex: none; padding: 0 6px; border: 1px solid var(--rc-line-strong); border-radius: var(--rc-radius-xs);
  color: var(--rc-text-3); font-size: var(--rc-fs-meta); font-weight: var(--rc-fw-medium); line-height: 1.5;
}

/* ---------- status toasts: "Connected to Studio", "Exit Playtest Mode in Studio to continue" ----------
   The same quiet language as the composer: one dark raised surface, a hairline border, a small
   status mark, short words. They sit at the top centre of the chat column (inside .chat-main, so
   they centre on the chat and not on the window, with or without the sidebar). The composer is
   where the user types and the newest message sits right above it, so the top is the spot that
   covers nothing they are reading. No pointer events: they never block a click.
   Hidden with opacity (not visibility) so the status region stays in the accessibility tree and
   announces the words lib/skeuo-bubble.js writes when it shows one. */
body#chat-page .rc-toast {
  position: absolute; top: 14px; left: 50%; z-index: var(--rc-z-toast);
  display: inline-flex; align-items: center; gap: 9px;
  max-width: min(460px, calc(100% - 32px)); min-width: 0;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--rc-line-strong); border-radius: 12px;
  background: var(--rc-surface-raised);
  box-shadow: 0 14px 36px -14px rgba(4, 2, 10, .7);
  color: var(--rc-text); font-size: var(--rc-fs-small); font-weight: var(--rc-fw-medium); line-height: 1.35;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .22s var(--rc-ease);
}
body#chat-page .rc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
body#chat-page .rc-toast-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--rc-radius-full);
}
body#chat-page .rc-toast-icon svg { width: 12px; height: 12px; stroke-width: 2.5; }
body#chat-page .rc-toast--ok .rc-toast-icon { background: var(--rc-success-soft); color: var(--rc-success); }
body#chat-page .rc-toast--warn .rc-toast-icon { background: var(--rc-warning-soft); }
body#chat-page .rc-toast--warn .rc-toast-icon::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--rc-radius-full); background: var(--rc-warning);
}
body#chat-page .rc-toast-text { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
body#chat-page .rc-toast-title { flex: none; }
body#chat-page .rc-toast-detail {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--rc-text-3); font-weight: var(--rc-fw-regular);
}
body#chat-page .rc-toast-detail:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  body#chat-page .rc-toast,
  body#chat-page .rc-toast.is-visible { transform: translate(-50%, 0); transition: opacity .12s linear; }
}

/* the dismissible notice above the composer ("Script changed underfoot"), same language */
body#chat-page .skeuo-bubble-stack {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: var(--v2-col); margin: 0 auto 10px;
}
body#chat-page .rc-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px 10px 12px;
  border: 1px solid var(--rc-line-strong); border-radius: 12px;
  background: var(--rc-surface-raised); color: var(--rc-text-2);
  font-size: var(--rc-fs-caption); line-height: 1.45;
  animation: rcNoticeIn .2s var(--rc-ease) both;
}
body#chat-page .rc-notice-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px; border-radius: var(--rc-radius-full); background: var(--rc-warning-soft);
}
body#chat-page .rc-notice-icon::before { content: ''; width: 7px; height: 7px; border-radius: var(--rc-radius-full); background: var(--rc-warning); }
body#chat-page .rc-notice-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body#chat-page .rc-notice-title { color: var(--rc-text); font-size: var(--rc-fs-small); font-weight: var(--rc-fw-medium); }
/* the glyph-only dismiss comes from .chat-notice-close (chat-landing.css), as on the announcement */
body#chat-page .rc-notice-close { display: inline-flex; align-items: center; justify-content: center; margin: -4px 0; cursor: pointer; }
@keyframes rcNoticeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body#chat-page .rc-notice { animation: none; } }

/* ==================================================================
   STUDIO CARDS (2026-10-09, lib/studio-cards.js)
   The Script Injection setup card: a calm violet hairline, numbered
   steps, one filled "Check again". The Studio wait card: a quiet row
   with a countdown and Stop while the relay waits for Studio.
   ================================================================== */
body#chat-page .message.ai .agent-error-panel.agent-si-panel {
  border-color: rgba(167, 139, 250, 0.32);
  background: rgba(167, 139, 250, 0.05);
}
body#chat-page .agent-si-panel .agent-error-title { color: var(--rc-text); }
body#chat-page .agent-si-steps {
  margin: 8px 0 0; padding-left: 20px;
  color: var(--rc-text-2); font-size: 13.5px; line-height: 1.6;
}
body#chat-page .agent-si-steps li + li { margin-top: 2px; }
body#chat-page .agent-si-note { margin-top: 8px; color: var(--rc-text-3); font-size: 12.5px; line-height: 1.45; }
body#chat-page .agent-si-panel .agent-si-check-btn { border-color: transparent; background: var(--v2-fill); color: #fff; }
body#chat-page .agent-si-panel .agent-si-check-btn:not(:disabled):hover { background: var(--v2-fill-hover); }
body#chat-page .agent-si-panel button:disabled { opacity: 0.6; cursor: default; }
body#chat-page .agent-si-status { margin-top: 8px; color: var(--rc-text-2); font-size: 12.5px; line-height: 1.45; }
body#chat-page .agent-si-status:empty { display: none; }

body#chat-page .message.ai .agent-studio-wait {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0; padding: 10px 12px;
  border: 1px solid var(--rc-line-strong); border-radius: 10px;
  background: var(--rc-surface-raised);
}
body#chat-page .agent-studio-wait .pulse-dot { flex: none; }
body#chat-page .agent-studio-wait-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body#chat-page .agent-studio-wait-title { color: var(--rc-text); font-size: var(--rc-fs-small); font-weight: var(--rc-fw-medium); }
body#chat-page .agent-studio-wait-detail { color: var(--rc-text-2); font-size: var(--rc-fs-caption); line-height: 1.45; }
body#chat-page .agent-studio-wait-left { flex: none; color: var(--rc-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
body#chat-page .agent-studio-wait-stop {
  flex: none; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--rc-line-strong); border-radius: 8px;
  background: transparent; color: var(--rc-text); font-size: 13px; font-weight: 600; cursor: pointer;
}
body#chat-page .agent-studio-wait-stop:not(:disabled):hover { background: rgba(255, 255, 255, 0.06); }
body#chat-page .agent-studio-wait-stop:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 600px) {
  body#chat-page .message.ai .agent-studio-wait { flex-wrap: wrap; }
}

/* ---- 2026-10-10: Settings moved to /account#settings ------------------------------------ */

/* "Settings" is now a link to the account page; it keeps the button's look. */
body#chat-page a#sidebar-settings-btn.sidebar-settings-btn { text-decoration: none !important; }

/* Discord in the top bar: the brand mark on a quiet blurple pill, easy to spot. */
body#chat-page .chat-nav a.chat-nav-discord {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(88, 101, 242, .45) !important;
    border-radius: 999px !important;
    background: rgba(88, 101, 242, .14) !important;
    color: #c9cdff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

body#chat-page .chat-nav a.chat-nav-discord:hover {
    background: rgba(88, 101, 242, .26) !important;
    border-color: rgba(88, 101, 242, .7) !important;
    color: #fff !important;
}

body#chat-page .chat-nav a.chat-nav-discord svg { flex: none !important; }
body#chat-page .chat-nav a.chat-nav-discord:focus-visible { outline: 2px solid var(--rc-focus, #a78bfa) !important; outline-offset: 2px !important; }

/* Copy full chat: only on the open chat's row (it copies what is on screen). */
body#chat-page .conversation-list li:not(.active) .conversation-copy-btn { display: none !important; }

/* Disconnect Studio: the composer's status chip is a button while Studio is connected. */
body#chat-page #plugin-config-section.is-disconnectable { cursor: pointer; border-radius: 8px; }
body#chat-page #plugin-config-section.is-disconnectable:hover .plugin-status-indicator { color: var(--rc-text) !important; }
body#chat-page #plugin-config-section.is-disconnectable:focus-visible { outline: 2px solid var(--rc-focus, #a78bfa); outline-offset: 2px; }

/* One credits number (2026-10-10): the top bar pill shows the whole balance and opens the
   breakdown, so the sidebar meter (plan credits only, a different number) goes while the pill
   is shown. Accounts without the pill (not on credits) keep the meter. */
body#chat-page:has(#credits-pill:not([hidden])) #usage-meter { display: none !important; }

/* Edit retry cards (2026-10-13, lib/tools-ui.js). An edit_script miss is RoCode retrying with the
   script's current text, not a crash: one calm line in the muted text colour, a neutral badge,
   the details behind the expand. "Fixed on retry" once a later edit of the same script works. */
body#chat-page .tool-info > .tool-retry-msg {
  flex: 1 0 100%; margin-top: 4px; white-space: normal; overflow: visible; text-overflow: clip;
  font-family: var(--rc-font); font-size: 12.5px; line-height: 1.5; color: var(--rc-text-2);
}
body#chat-page .tool-call-bubble.tool-retry-fixed .tool-retry-msg { color: var(--rc-text-3); }
body#chat-page .tool-badge.tool-badge-retry,
body#chat-page .tool-badge.tool-badge-retry-fixed {
  color: var(--rc-text-2); background: var(--rc-surface-selected); border-color: var(--rc-line-strong) !important;
}
body#chat-page .tool-badge.tool-badge-retry-fixed { color: var(--rc-success); background: var(--rc-success-soft); border-color: var(--rc-success-line) !important; }
body#chat-page .tool-result-pre.tool-retry-detail { max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* The open card turns its one chevron (lib/tools-ui.js); there is no chevron-up icon. */
body#chat-page .tool-call-bubble .tool-expand-btn svg { transition: transform .15s ease; }
body#chat-page .tool-call-bubble.tool-expanded .tool-expand-btn svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { body#chat-page .tool-call-bubble .tool-expand-btn svg { transition: none; } }

/* The supplied logo includes its own tile and lighting. */
body#chat-page .navbar-top .logo-icon { background: transparent; border: 0; box-shadow: none; }
body#chat-page .navbar-top .logo-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }