/* RoCode chat — landing parity theme.
   Loaded last on chat.html. It re-skins the app surfaces to the flat Apple/Linear
   language of landing.css (same palette, same hairlines, same type ramp) without
   touching layout logic in style.css / chat.css.

   Levers used, in order of reach:
     1. the Spring Glass tokens (--glass-*, --rc-btn-*, --font-*) redeclared on the
        page root, so every panel and button re-skins from one place;
     2. #chat-page-scoped rules where a component declares its own value on the
        element and inheritance cannot reach it (button faces, code blocks).
   Colour values are copied verbatim from landing.css :root. */

#chat-page {
  /* ---- landing.css tokens, namespaced so nothing in style.css collides ---- */
  --lp-bg: #120b1f;
  --lp-card: #1a102c;
  --lp-card-top: #211538;
  --lp-surface: #241a3a;
  --lp-surface-hover: #2e2148;
  --lp-surface-down: #382a58;
  --lp-line: rgba(207, 195, 224, .14);
  --lp-line-strong: rgba(207, 195, 224, .22);
  --lp-line-ui: #6f6489;
  --lp-edge: rgba(207, 195, 224, .10);
  --lp-text: #f6f1ff;
  --lp-text-2: #cfc3e0;
  --lp-text-3: #b7abc8;
  --lp-brand: #8b5cf6;
  --lp-violet: #a78bfa;
  --lp-violet-soft: #c4b5fd;
  --lp-fill: #8b5cf6;
  --lp-fill-hover: #9468f8;
  --lp-fill-down: #7c3aed;
  --lp-on-fill: #f6f1ff;
  --lp-ok: #6be08a;
  --lp-amber: #fbbf24;
  --lp-orange: #f97316;
  --lp-orange-hover: #fa7d24;
  --lp-disabled-bg: #261c3d;
  --lp-disabled-text: #a89cbd;
  --lp-radius: 18px;
  --lp-radius-sm: 12px;
  --lp-radius-xs: 8px;
  --lp-radius-pill: 999px;
  --lp-shadow: 0 24px 60px -18px rgba(0, 0, 0, .78), 0 2px 8px rgba(0, 0, 0, .34);
  --lp-card-shadow: inset 0 1px 0 var(--lp-edge), var(--lp-shadow);
  --lp-dur: .16s;
  --lp-dur-slow: .22s;
  --lp-ease: cubic-bezier(.22, .61, .36, 1);
  --lp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --lp-nav-h: 64px;

  /* ---- Spring Glass tokens repointed at the flat language ---- */
  /* One declaration flattens every .sidebar / .chat-main / .config-panel /
     .usage-meter / #chat-form / modal sheet that spring-glass.css paints. */
  --glass-sheen: none;
  --glass-fill: linear-gradient(180deg, var(--lp-card-top) 0, var(--lp-card) 120px);
  --glass-rim: linear-gradient(var(--lp-line), var(--lp-line));
  --glass-shadow: var(--lp-card-shadow);
  --rc-glass-bg: var(--glass-fill);
  --rc-glass-elevated-bg: var(--glass-fill);
  --rc-glass-border: var(--lp-line);
  --rc-glass-border-hover: var(--lp-line-strong);
  --rc-glass-hover-ring: 0 0 0 0 transparent;
  --rc-glass-inset-highlight: inset 0 1px 0 var(--lp-edge);
  --rc-glass-inset-highlight-hover: inset 0 1px 0 var(--lp-edge);
  --rc-message-ai-bg: var(--lp-card);
  --rc-panel-solid-bg: var(--lp-card);

  /* hairlines, not the 2px doubled borders */
  --rc-border-width: 1px;
  --rc-panel-shadow: var(--lp-shadow);
  --rc-chip-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  --rc-drop-shadow: 0 2px 8px rgba(0, 0, 0, .34);

  /* the heavy black smear under every glyph — off */
  --rc-text-shadow: none;
  --rc-text-filter-shadow: none;
  --rc-noise-opacity: 0;
  --rc-btn-noise-svg: none;

  /* type: system UI, real monospace for code, no 700 floor */
  --font-body: var(--lp-font);
  --font-display: var(--lp-font);
  --font-mono: var(--lp-mono);
  --font-weight-base: 400;
  --font-weight-emphasis: 600;
  --font-weight-display: 600;

  --accent-subtle: rgba(139, 92, 246, .12);
  --border: var(--lp-line);
  --border-color: var(--lp-line);

  /* the landing scrollbar: thin, neutral, no violet chrome */
  --scroll-size: 10px;
  --scroll-track: transparent;
  --scroll-thumb: rgba(255, 255, 255, .22);

  font-family: var(--lp-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-shadow: none;
  color: var(--lp-text);
}

/* the landing canvas: #120b1f under three violet glows, pinned to the viewport */
#chat-page {
  background: none;
}
#chat-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 640px at 82% -8%, rgba(91, 33, 182, .29), transparent 58%),
    radial-gradient(860px 520px at -8% 18%, rgba(74, 24, 116, .35), transparent 52%),
    radial-gradient(900px 500px at 50% 110%, rgba(42, 10, 74, .24), transparent 58%),
    var(--lp-bg);
}
/* film grain off */
#chat-page::after { display: none; }

/* backdrop-filter is the most expensive property the browser can paint and roughly
   half of RoCode's traffic is Windows. Every surface below is opaque, so none of the
   24 blurs in chat.css is doing visual work any more. */
#chat-page,
#chat-page *,
#chat-page *::before,
#chat-page *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#chat-page *,
#chat-page *::before,
#chat-page *::after {
  text-shadow: none;
}

/* code is code: proportional Nunito is forced on pre/code by style.css with
   !important, so this needs id specificity plus !important to land. */
#chat-page pre,
#chat-page code,
#chat-page kbd,
#chat-page samp,
#chat-page var,
#chat-page .context-mention-chip,
#chat-page .mention-chip,
#chat-page .tool-target,
#chat-page .prop-val {
  font-family: var(--lp-mono) !important;
}

#chat-page ::selection { background: rgba(139, 92, 246, .35); }

#chat-page :focus-visible {
  outline: 2px solid var(--lp-violet);
  outline-offset: 3px;
  border-radius: var(--lp-radius-sm);
}

/* ==========================================================================
   1. header
   ========================================================================== */

#chat-page .navbar-top {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--lp-nav-h);
  max-width: none;
  margin: 0;
  padding: 0 24px;
  background: transparent;
  border-bottom: 1px solid var(--lp-line);
}

#chat-page .logo { gap: 6px; }

#chat-page .logo-text {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.5;
  color: var(--lp-brand);
  text-shadow: none;
  animation: none;
}

#chat-page .logo-tier-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-orange);
  text-shadow: none;
  margin-left: 6px;
}

/* the text nav that replaces the floating icon rail */
#chat-page .chat-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

#chat-page .chat-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--lp-radius-xs);
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-2);
  text-decoration: none;
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}

#chat-page .chat-nav a:hover {
  color: var(--lp-text);
  background: var(--lp-surface);
}

/* Account reads like the other nav links. Send is the only filled control on
   the page, so the eye lands on the composer, not the corners. */
#chat-page .chat-nav a.chat-nav-cta {
  margin-left: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--lp-radius-xs);
  background: transparent;
  color: var(--lp-text-2);
  font-weight: 500;
}

#chat-page .chat-nav a.chat-nav-cta:hover {
  color: var(--lp-text);
  background: var(--lp-surface);
}

/* ==========================================================================
   2. panels
   ========================================================================== */

/* One app shell instead of three floating cards. 16px gutters plus 24px page
   padding spent 80px on gaps and gave the config panel the same visual weight as
   the conversation; flush columns on hairlines hand that width back to the chat
   and read as an application rather than three widgets on a desktop. */
#chat-page .chat-container {
  --rc-dock-clearance: 0px;
  --rc-col-gap: 0px;
  --rc-chat-top-gap: var(--lp-nav-h);
  padding: var(--rc-chat-top-gap) 0 0;
  gap: 0;
  perspective: none;
}

#chat-page .sidebar,
#chat-page .chat-main,
#chat-page .config-panel {
  /* the JS panel tilt reads these; zeroing them keeps the panels flat */
  --rc-panel-tilt-x: 0deg;
  --rc-panel-tilt-y: 0deg;
  transform: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

#chat-page .sidebar,
#chat-page .config-panel { background: rgba(10, 6, 18, .34); }

#chat-page .sidebar { border-right: 1px solid var(--lp-line); padding: 14px 10px; }
#chat-page .config-panel { border-left: 1px solid var(--lp-line); padding: 14px 14px 28px; }

#chat-page .sidebar:hover,
#chat-page .chat-main:hover,
#chat-page .config-panel:hover {
  border-color: var(--lp-line);
  box-shadow: none;
}

/* the reveal tab for a hidden panel is now part of the rail, not a floating chip */
#chat-page .panel-reveal-btn {
  align-self: flex-start;
  margin-top: 14px;
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid var(--lp-line) !important;
  border-left: 0 !important;
}

#chat-page #reveal-config-panel-btn {
  border-radius: 8px 0 0 8px !important;
  border: 1px solid var(--lp-line) !important;
  border-right: 0 !important;
}

/* panel eyebrows: CONVERSATIONS / CONFIGURATION */
#chat-page .sidebar-header,
#chat-page .config-panel-header {
  padding: 2px 6px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--lp-line);
  border-bottom-width: 1px;
}

#chat-page .sidebar-header h2,
#chat-page .config-panel-header h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-text-3);
}

/* The header repeated the title that is already highlighted in the sidebar, for
   45px. It earns its space only when the sidebar is collapsed. */
#chat-page .chat-header {
  padding: 10px 24px;
  text-align: left;
  border-bottom: 1px solid var(--lp-line);
  border-bottom-width: 1px;
}

#chat-page .chat-container:not(:has(.sidebar.is-panel-hidden)) .chat-header {
  display: none;
}

#chat-page .chat-header-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text-2);
}

/* panel show/hide chevrons: a quiet glyph, not a grey slab.
   style.css sets their face with !important, so this has to shout back. */
#chat-page button.panel-hide-btn,
#chat-page button.panel-reveal-btn {
  --rc-btn-radius: 8px;
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  border-radius: 8px;
  border: 1px solid transparent !important;
  color: var(--lp-text-3);
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}

#chat-page button.panel-hide-btn:hover,
#chat-page button.panel-reveal-btn:hover {
  color: var(--lp-text);
  background: var(--lp-surface);
}

#chat-page button.panel-hide-btn:hover::before,
#chat-page button.panel-reveal-btn:hover::before { filter: none !important; }

#chat-page .panel-reveal-btn {
  border-color: var(--lp-line) !important;
  background: var(--lp-card);
}

/* row actions on a conversation (rename / delete) */
#chat-page .conversation-actions button {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  border-radius: 6px;
  color: var(--lp-text-3);
}

#chat-page .conversation-actions button:hover {
  color: var(--lp-text);
  background: var(--lp-surface-down);
}

/* ==========================================================================
   3. buttons — flat fills in place of the skeuomorphic faces
   ========================================================================== */

#chat-page button,
#chat-page a.btn,
#chat-page a.btn-top-login,
#chat-page a.discord-btn,
#chat-page input[type="submit"],
#chat-page input[type="button"] {
  --rc-btn-face-bg: linear-gradient(var(--rc-btn-mid), var(--rc-btn-mid));
  --rc-btn-face-shadow: none;
  --rc-btn-face-shadow-hover: none;
  --rc-btn-face-shadow-active: none;
  --rc-btn-tilt-deg: 0;
  --rc-btn-tilt-now: 0;
  --rc-btn-radius: 10px;
  font-family: var(--lp-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: filter var(--lp-dur) var(--lp-ease), transform var(--lp-dur) var(--lp-ease);
}

/* one flat fill, no noise, no sheen, no inner rim */
#chat-page button::before,
#chat-page a.btn::before,
#chat-page a.btn-top-login::before,
#chat-page a.discord-btn::before,
#chat-page input[type="submit"]::before,
#chat-page input[type="button"]::before {
  --rc-btn-face-layers: var(--rc-btn-face-bg);
  background-image: var(--rc-btn-face-bg) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  /* The face used to paint over bare label text, which stayed legible only because
     button-glass-hover.js wraps labels in .rc-btn-face at runtime. The button is an
     isolated stacking context, so -1 keeps the fill inside it and under the label
     whether or not that script has run. */
  z-index: -1;
}

#chat-page button:not(:disabled):hover::before,
#chat-page a.btn:hover::before,
#chat-page input[type="submit"]:not(:disabled):hover::before,
#chat-page input[type="button"]:not(:disabled):hover::before {
  filter: brightness(1.14) !important;
}

#chat-page button:not(:disabled):active,
#chat-page a.btn:active { transform: scale(.98); }

/* the pointer-tracking gloss ring */
#chat-page button::after,
#chat-page a.btn::after,
#chat-page a.btn-top-login::after,
#chat-page a.discord-btn::after,
#chat-page input[type="submit"]::after,
#chat-page input[type="button"]::after {
  display: none !important;
}

#chat-page .rc-btn-face { text-shadow: none !important; transform: none !important; }

#chat-page button svg,
#chat-page button .lucide,
#chat-page a.btn svg,
#chat-page a.btn .lucide,
#chat-page .conversation-actions svg,
#chat-page .conversation-actions .lucide {
  filter: none;
}

#chat-page button:disabled,
#chat-page a.btn[aria-disabled="true"] {
  filter: none;
  opacity: 1;
  --rc-btn-mid: var(--lp-disabled-bg);
  --rc-btn-text: var(--lp-disabled-text);
  color: var(--lp-disabled-text);
}

/* secondary / quiet buttons get a bordered surface rather than a grey slab */
#chat-page .btn-secondary,
#chat-page #copy-debug-btn,
#chat-page .model-picker-btn,
#chat-page .mic-btn,
#chat-page .voice-cancel-btn {
  --rc-btn-mid: var(--lp-surface);
  --rc-btn-shadow: var(--lp-surface);
  --rc-btn-text: var(--lp-text);
  border: 1px solid var(--lp-line-ui) !important;
  font-weight: 500;
}

#chat-page .btn-secondary:hover,
#chat-page #copy-debug-btn:hover,
#chat-page .model-picker-btn:hover,
#chat-page .mic-btn:hover,
#chat-page .voice-cancel-btn:hover {
  --rc-btn-mid: var(--lp-surface-hover);
}

#chat-page .btn-primary,
#chat-page .new-chat-btn,
#chat-page .send-btn:not(.stop-mode),
#chat-page .plugin-link-btn {
  --rc-btn-mid: var(--lp-fill);
  --rc-btn-shadow: var(--lp-fill);
  --rc-btn-text: var(--lp-on-fill);
}

#chat-page .btn-primary:hover,
#chat-page .new-chat-btn:hover,
#chat-page .send-btn:not(.stop-mode):hover,
#chat-page .plugin-link-btn:hover {
  --rc-btn-mid: var(--lp-fill-hover);
}

/* ==========================================================================
   4. sidebar — new chat, quota, conversations
   ========================================================================== */

/* Outlined, not filled: a filled block here competed with Send for attention. */
#chat-page .new-chat-btn {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  --rc-btn-radius: 10px;
  width: calc(100% - 12px);
  margin: 4px 6px 12px;
  padding: 0 14px;
  min-height: 38px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--lp-line-ui) !important;
  border-radius: 10px;
  background: transparent;
  color: var(--lp-text-2);
  box-shadow: none;
  transition: background-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}

#chat-page .new-chat-btn::before,
#chat-page .new-chat-btn::after { display: none !important; }

#chat-page .new-chat-btn:hover {
  background: var(--lp-surface-hover);
  color: var(--lp-text);
  border-color: var(--lp-line-ui) !important;
  transform: none;
  filter: none;
}

/* 96px and two numbers for one fact became a label row plus a bar. The label now
   reads "Free quota used", so the subtext line is only rendered at the limit. */
#chat-page .usage-meter {
  margin: 4px 6px 12px;
  padding: 10px 12px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: var(--lp-radius-sm);
  box-shadow: none;
}

#chat-page .quota-header { margin-bottom: 7px; }

#chat-page .quota-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-text-3);
  white-space: nowrap;
}

#chat-page .quota-value {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text);
  white-space: nowrap;
}

#chat-page .quota-value.quota-at-limit { color: var(--lp-amber); }
#chat-page .quota-value.quota-over-limit { color: #fca5a5; }

#chat-page .quota-bar-track {
  height: 6px;
  border: 0;
  background: rgba(255, 255, 255, .10);
  box-shadow: none;
}

#chat-page .quota-bar-fill {
  background: var(--lp-fill);
  box-shadow: none;
  animation: none;
}

#chat-page .quota-bar-fill::before { display: none; }
#chat-page .quota-bar-fill.warning { background: var(--lp-amber); }
#chat-page .quota-bar-fill.danger,
#chat-page .quota-bar-fill.quota-bar-overlimit { background: #f87171; box-shadow: none; }

#chat-page .usage-meter.quota-meter-over-limit .quota-bar-track,
#chat-page .usage-meter.quota-meter-at-limit {
  box-shadow: none;
  background: var(--lp-surface);
  border-color: var(--lp-line);
}

#chat-page .quota-sub,
#chat-page .quota-timer {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 400;
  color: var(--lp-text-3);
}

#chat-page .quota-sub:empty { display: none; }

#chat-page .quota-tokens {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 400;
  color: var(--lp-text-3);
  font-variant-numeric: tabular-nums;
}

#chat-page .quota-tokens[hidden] { display: none; }

#chat-page .conversation-list { padding: 0 2px; }

#chat-page .conversation-list li {
  padding: 0 10px;
  min-height: 38px;
  margin-bottom: 2px;
  border: 0;
  border-radius: var(--lp-radius-xs);
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--lp-text-2);
  transition: background-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease);
}

#chat-page .conversation-list li:hover {
  background: var(--lp-surface);
  border: 0;
  box-shadow: none;
  color: var(--lp-text);
}

#chat-page .conversation-list li.active {
  background: var(--lp-surface-down);
  border: 0;
  box-shadow: none;
  color: var(--lp-text);
  font-weight: 600;
}

#chat-page .conversation-list li::before {
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--lp-violet);
}

#chat-page .conversation-time {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lp-text-3);
}

#chat-page .conversation-list li:hover .conversation-time,
#chat-page .conversation-list li.active .conversation-time { color: var(--lp-text-3); }

/* sidebar date groups */
#chat-page .conversation-group {
  display: block;
  padding: 14px 10px 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-text-3);
  background: none;
  border: 0;
  cursor: default;
  pointer-events: none;
}

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

/* ==========================================================================
   5. messages
   ========================================================================== */

/* A measured column. Flex items default to min-width:auto, so before this a single
   long Luau line grew the AI bubble to 942px inside a 744px column and overran the
   panel instead of scrolling inside its own code block. min-width:0 down the chain
   is what lets overflow-x work. */
#chat-page .chat-messages {
  align-items: stretch;
}

#chat-page .chat-messages > * {
  width: 100%;
  max-width: 820px;
  min-width: 0;
  margin-inline: auto;
}

#chat-page .chat-messages > .message-container.user { align-self: center; align-items: flex-end; }
#chat-page .chat-messages > .message-container.ai { align-self: center; align-items: flex-start; }
#chat-page .chat-messages > .message-container.user .message { max-width: 75%; }

#chat-page .message-container,
#chat-page .message-container > .message,
#chat-page .message-container .tool-info,
#chat-page .message-container .tool-call-bubble { min-width: 0; }

/* The AI turn owns the column: code and tool rows get the full width instead of
   shrink-to-fit (they were rendering at 499px with 280px sitting empty beside
   them), while prose keeps a reading measure. */
#chat-page .message-container.ai .message {
  width: 100%;
  max-width: 100%;
}

#chat-page .message.ai > p,
#chat-page .message.ai > ul,
#chat-page .message.ai > ol,
#chat-page .message.ai > blockquote,
#chat-page .message.ai > h1,
#chat-page .message.ai > h2,
#chat-page .message.ai > h3 {
  max-width: 70ch;
}

#chat-page .chat-main:not(.chat-main--empty) .chat-input-area > form,
#chat-page .chat-main:not(.chat-main--empty) .plugin-link-row,
#chat-page .chat-main:not(.chat-main--empty) .quota-limit-banner,
#chat-page .chat-main:not(.chat-main--empty) .chat-char-counter {
  max-width: 820px;
  margin-inline: auto;
}

#chat-page .message-container { animation-duration: .28s; }

#chat-page .message-container.user .message {
  background-color: var(--lp-fill);
  background-image: none;
  border-radius: 16px 16px 4px 16px;
  padding: 12px 16px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--lp-on-fill);
}

#chat-page .message-container.ai .message {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: 16px 16px 16px 4px;
  padding: 14px 18px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--lp-text);
}

#chat-page .message-container.ai .message::before { display: none; }

#chat-page .message.ai pre,
#chat-page .message.ai code {
  background: var(--lp-bg);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-xs);
  font-size: 13.5px;
  line-height: 1.55;
}

#chat-page .message-action-btn {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 6px;
}

/* code blocks — the landing page's .code: a tab bar with the language and a copy
   action, a line-number gutter, and a body that scrolls rather than pushing the
   bubble past the panel. */
#chat-page .chat-code-block {
  margin: 12px 0;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-bg);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

#chat-page .chat-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px 7px 14px;
  background: var(--lp-surface);
  border-bottom: 1px solid var(--lp-line);
  text-transform: none;
  letter-spacing: 0;
}

#chat-page .chat-code-lang {
  font-family: var(--lp-mono) !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-text);
}

#chat-page .chat-code-copy {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--lp-line-ui) !important;
  border-radius: 7px;
  background: transparent;
  color: var(--lp-text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease);
}

#chat-page .chat-code-copy:hover {
  background: var(--lp-surface-hover);
  color: var(--lp-text);
}

#chat-page .chat-code-copy.is-copied {
  border-color: rgba(107, 224, 138, .5) !important;
  color: var(--lp-ok);
}

#chat-page .chat-code-copy::before,
#chat-page .chat-code-copy::after { display: none !important; }

#chat-page .chat-code-body {
  padding: 10px 0;
  font-family: var(--lp-mono) !important;
  font-size: 13.5px;
  max-height: 340px;
  overflow: auto;
}

#chat-page .chat-code-line {
  gap: 14px;
  padding: 0 14px;
  line-height: 1.55;
}

#chat-page .chat-ln {
  min-width: 2.25rem;
  color: var(--lp-text-3);
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

#chat-page .chat-lc { color: var(--lp-text); white-space: pre; }

#chat-page .chat-code-more,
#chat-page .chat-code-placeholder {
  padding: 8px 14px;
  font-family: var(--lp-font) !important;
  font-size: 13px;
  font-style: normal;
  color: var(--lp-text-3);
}

/* ==========================================================================
   6. composer
   ========================================================================== */

#chat-page .chat-input-area::before { display: none; }

#chat-page .plugin-link-btn {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--lp-radius-pill);
  --rc-btn-radius: var(--lp-radius-pill);
}

#chat-page #chat-form {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  box-shadow: none;
  transition: border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease);
}

#chat-page #chat-form:focus-within {
  border-color: var(--lp-violet);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .18);
}

#chat-page #chat-input,
#chat-page .mention-editor {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--lp-text);
  padding: 9px 0;
}

#chat-page .mention-editor:empty::before,
#chat-page .mention-editor.is-empty::before { color: var(--lp-text-3); }

/* the composer was the one control in the product with no focus indicator */
#chat-page .mention-editor:focus-visible { outline: none; }

#chat-page .send-btn,
#chat-page .mic-btn,
#chat-page .voice-cancel-btn,
#chat-page .voice-confirm-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  --rc-btn-radius: 9px;
}

#chat-page .voice-confirm-btn {
  --rc-btn-mid: var(--lp-ok);
  --rc-btn-shadow: var(--lp-ok);
  --rc-btn-text: #0e0e12;
}

#chat-page .mic-btn.is-recording {
  --rc-btn-mid: #ef4444;
  --rc-btn-shadow: #ef4444;
  --rc-btn-text: #fff;
  animation: none;
  border-color: transparent !important;
}

#chat-page .send-btn:disabled,
#chat-page .send-btn.send-disabled { opacity: 1; }

#chat-page .send-btn-hint {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lp-text-2);
  background: var(--lp-card-top);
  border: 1px solid var(--lp-line-ui);
  border-width: 1px;
  border-radius: var(--lp-radius-xs);
  box-shadow: var(--lp-shadow);
}

#chat-page .chat-char-counter,
#chat-page #chat-char-counter {
  font-size: 12px !important;
  letter-spacing: 0;
  color: var(--lp-text-3) !important;
}

/* content scrolling under the top edge gets a short fade instead of a hard cut */
#chat-page .chat-main:not(.chat-main--empty) .chat-messages {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 8px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 8px), transparent 100%);
}

/* Enter sends; nothing on screen said so */
#chat-page .chat-form-actions::before {
  content: "Enter to send";
  align-self: center;
  margin-right: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--lp-text-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--lp-dur) var(--lp-ease);
  pointer-events: none;
}

#chat-page #chat-form:focus-within .chat-form-actions::before { opacity: 1; }
#chat-page #chat-form.is-recording .chat-form-actions::before,
#chat-page #chat-form.quota-blocked .chat-form-actions::before { content: none; }

@media (max-width: 1100px) {
  #chat-page .chat-form-actions::before { content: none; }
}

/* ==========================================================================
   7. empty state
   ========================================================================== */

#chat-page .chat-empty-state::before { display: none; }

/* animations.css pulses a violet text-shadow on the headline (rcEmptyTitleBloom),
   which beats the page's text-shadow: none while it runs. A glowing headline is
   the same template tell the landing rewrite removed, so it stops here. */
#chat-page .chat-empty-state .empty-title,
#chat-page .chat-empty-state h1 {
  animation: none !important;
  text-shadow: none !important;
}

#chat-page .quota-bar-fill::after { animation: none !important; display: none; }

/* App scale, not landing scale. The composer is the focus of an empty chat. */
#chat-page .chat-empty-state h1,
#chat-page .chat-empty-state .empty-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--lp-text);
  text-wrap: balance;
}

#chat-page .chat-empty-state .empty-sub {
  max-width: 38ch;
  margin: 8px auto 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-text-3);
  text-wrap: pretty;
}

#chat-page .chat-empty-state .empty-sub:empty { display: none; }

/* starter prompts */
#chat-page .starter-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 680px;
  margin: 20px auto 0;
}

#chat-page .starter-prompt {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  --rc-btn-radius: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--lp-line) !important;
  border-radius: 10px;
  background: transparent;
  color: var(--lp-text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}

#chat-page .starter-prompt:hover {
  background: var(--lp-surface-hover);
  border-color: var(--lp-line-ui) !important;
  color: var(--lp-text);
}

#chat-page .starter-prompt::before,
#chat-page .starter-prompt::after { display: none !important; }

#chat-page .suggestion-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--lp-text-2);
}

/* ==========================================================================
   8. configuration panel
   ========================================================================== */

/* Three switches used once each do not need to be on screen all the time. */
#chat-page .config-settings {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--lp-line);
}

#chat-page .config-settings-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-text-2);
  transition: color var(--lp-dur) var(--lp-ease);
}

#chat-page .config-settings-summary::-webkit-details-marker { display: none; }
#chat-page .config-settings-summary:hover { color: var(--lp-text); }

#chat-page .config-settings-chev {
  margin-left: auto;
  opacity: .6;
  transition: transform var(--lp-dur) var(--lp-ease);
}

#chat-page .config-settings[open] .config-settings-chev { transform: rotate(180deg); }
#chat-page .config-settings .config-group:last-of-type { border-bottom: 0; }

/* Panel link rows (Join Discord): same rhythm as the Settings row, leaves the app. */
#chat-page .config-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  border-bottom: 1px solid var(--lp-line);
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-text-2);
  text-decoration: none;
  transition: color var(--lp-dur) var(--lp-ease);
}

#chat-page .config-link-row:hover { color: var(--lp-text); }
#chat-page .config-link-row .discord-mark { flex-shrink: 0; }

#chat-page .config-link-row-ext {
  margin-left: auto;
  opacity: .5;
}

#chat-page .limit-modal-help {
  margin: 12px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--lp-text-3);
}

#chat-page .limit-modal-help a {
  color: var(--lp-violet-soft);
  text-decoration: none;
}

#chat-page .limit-modal-help a:hover { text-decoration: underline; }

/* A utility, not an action: outlined, muted, and hidden on an empty chat. */
#chat-page #copy-debug-btn {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  background: transparent;
  border: 1px solid var(--lp-line) !important;
  color: var(--lp-text-3);
  font-weight: 500;
  box-shadow: none;
}

#chat-page #copy-debug-btn::before,
#chat-page #copy-debug-btn::after { display: none !important; }

#chat-page #copy-debug-btn:hover {
  color: var(--lp-text);
  background: var(--lp-surface-hover);
  transform: none;
  filter: none;
}

#chat-page .chat-container:has(.chat-main--empty) #copy-debug-btn { display: none; }

#chat-page .panel-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 6px 4px;
  font-size: 11.5px;
  color: var(--lp-text-3);
}

#chat-page .panel-legal a {
  color: inherit;
  text-decoration: none;
}

#chat-page .panel-legal a:hover { color: var(--lp-text); }

#chat-page .config-group {
  margin: 0;
  padding: 12px 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lp-line);
  border-radius: 0;
}

#chat-page .config-group:hover {
  background: transparent;
  border-color: var(--lp-line);
}

#chat-page .config-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--lp-text-2);
}

#chat-page .config-panel-stack { gap: 6px; }

/* "AI Model" was wrapping to two lines against a 188px picker in the same row.
   The picker takes its own full-width row instead. */
#chat-page .config-item {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* The model lives at the composer, where you think about it, as a quiet pill. */
#chat-page .model-picker-btn {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  --rc-btn-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  margin-bottom: 4px;
  padding: 0 10px;
  border: 1px solid var(--lp-line) !important;
  border-radius: 10px;
  background: transparent;
  color: var(--lp-text-3);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: none;
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}

#chat-page .model-picker-btn::before,
#chat-page .model-picker-btn::after { display: none !important; }

#chat-page .model-picker-btn:hover {
  color: var(--lp-text);
  background: var(--lp-surface-hover);
  transform: none;
  filter: none;
}

#chat-page #model-picker-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#chat-page .model-picker-btn i { opacity: .6; flex-shrink: 0; }

@media (max-width: 640px) {
  #chat-page #model-picker-label { max-width: 96px; }
}

#chat-page .plugin-status-row { margin: 6px 4px 0; }

#chat-page .chat-main:not(.chat-main--empty) .plugin-status-row {
  max-width: 820px;
  margin-inline: auto;
}

#chat-page #plugin-status-indicator,
#chat-page .plugin-status-indicator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lp-text-3) !important;
}

/* app.js appends an explanatory <div> after the label on error; give it its own line */
#chat-page .plugin-status-indicator > div { flex-basis: 100%; margin-top: 2px !important; }

#chat-page .plugin-status-dot { width: 7px; height: 7px; }

#chat-page #copy-debug-btn {
  width: 100%;
  min-height: 40px;
  margin-top: 16px;
  font-size: 15px;
  border-radius: 10px;
  --rc-btn-radius: 10px;
}

#chat-page #pro-upgrade-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--lp-line);
}

/* The money CTA. A saturated orange bar on a violet-dark panel was the loudest
   thing on the screen and read as a discount sticker, not a paid tier. Premium
   here is restraint: the same surface and hairline as every other panel element,
   one violet chip for colour, and both tiers priced plainly side by side so the
   card sells Studio as readily as Pro without becoming a second card. */
#chat-page .upgrade-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-surface);
  text-transform: none;
  letter-spacing: normal;
}

#chat-page .upgrade-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#chat-page .upgrade-card-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--lp-radius-pill);
  background: rgba(167, 139, 250, .16);
  color: var(--lp-violet-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#chat-page .upgrade-card-sub {
  margin: 6px 0 9px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--lp-text-3);
  text-transform: none;
  letter-spacing: normal;
  text-wrap: pretty;
}

/* One row per tier with Pro marked as the default. Three tiers in equal boxes
   gave nothing to choose by; rows read top to bottom like a menu. */
#chat-page .upgrade-card-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

#chat-page .upgrade-plan {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lp-line-ui) !important;
  border-radius: 10px;
  background: transparent;
  color: var(--lp-text);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease);
}

#chat-page .upgrade-plan::before,
#chat-page .upgrade-plan::after {
  content: none !important;
  display: none !important;
}

#chat-page .upgrade-plan:hover {
  background: var(--lp-surface-hover);
  border-color: rgba(167, 139, 250, .55) !important;
  transform: none;
  filter: none;
}

#chat-page .upgrade-plan:active { transform: scale(.98); }

#chat-page .upgrade-plan.is-recommended {
  border-color: rgba(167, 139, 250, .55) !important;
}

#chat-page .upgrade-plan-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#chat-page .upgrade-plan-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--lp-radius-pill);
  background: rgba(167, 139, 250, .16);
  color: var(--lp-violet-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

#chat-page .upgrade-plan-note {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--lp-text-3);
}

#chat-page .upgrade-plan-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--lp-text);
}

#chat-page .upgrade-plan-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#chat-page .upgrade-plan-per {
  margin-left: 1px;
  font-size: 11px;
  font-weight: 500;
  color: var(--lp-text-3);
}

/* The quota banner and the limit modal keep a solid fill: by then the user has
   actually hit the wall and the button is the point of the screen. */
#chat-page .upgrade-btn,
#chat-page .quota-limit-banner-upgrade {
  --rc-upgrade-glow: none;
  --rc-upgrade-glow-hover: none;
  --rc-btn-mid: var(--lp-orange);
  --rc-btn-shadow: var(--lp-orange);
  --rc-btn-text: #fff;
  --rc-btn-face-bg: linear-gradient(var(--lp-orange), var(--lp-orange)) !important;
  --rc-btn-radius: 10px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  text-transform: none;
  border-radius: 10px;
  box-shadow: none;
}

#chat-page .upgrade-btn:hover,
#chat-page .quota-limit-banner-upgrade:hover {
  --rc-btn-face-bg: linear-gradient(var(--lp-orange-hover), var(--lp-orange-hover)) !important;
}

#chat-page .upgrade-btn::before { inset: 0; box-shadow: none !important; }

#chat-page .upgrade-btn svg,
#chat-page .upgrade-btn .lucide { filter: none; }

/* toggles: iOS geometry, flat paint */
/* 51x31 is the iOS switch; against a 15px label it read oversized */
#chat-page .switch { width: 44px; height: 26px; }

#chat-page .slider {
  border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 26px;
  background: var(--lp-surface-down);
  box-shadow: none;
}

#chat-page .slider::before { width: 22px; height: 22px; left: 1px; }
#chat-page input:checked + .slider::before { transform: translate(18px, -50%); }
#chat-page .switch:hover input:not(:checked):not(:disabled) + .slider::before { transform: translate(5px, -50%); }
#chat-page .switch:hover input:checked:not(:disabled) + .slider::before { transform: translate(13px, -50%); }

#chat-page .slider::after { display: none; }

#chat-page .slider::before {
  border: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

#chat-page input:checked + .slider {
  border-color: transparent;
  background: var(--lp-fill);
  box-shadow: none;
}

#chat-page input:checked + .slider::before { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

#chat-page .switch:hover input:not(:checked):not(:disabled) + .slider,
#chat-page .switch:hover input:checked:not(:disabled) + .slider { box-shadow: none; }
#chat-page .switch:hover input:not(:checked):not(:disabled) + .slider { border-color: rgba(0, 0, 0, .28); }

/* Belt and braces for the retired camera zoom: even if something still adds the
   classes, the stage must never scale 14x or paint a full-screen wash. */
#chat-page #chat-ui.rc-zoomed,
#chat-page #chat-ui.rc-zoom-active {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  contain: layout style !important;
  pointer-events: auto !important;
}

#chat-page #chat-ui::after { display: none !important; }

/* ==========================================================================
   9. banners, toasts, modals
   ========================================================================== */

#chat-page .quota-limit-banner {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: var(--lp-radius-sm);
  box-shadow: none;
}

#chat-page .quota-limit-banner-copy strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}

#chat-page .quota-limit-banner-tagline,
#chat-page .quota-limit-banner-copy span {
  font-size: 13px;
  font-weight: 400;
  color: var(--lp-text-2);
}

#chat-page .quota-limit-banner-upgrade { width: auto; }

#chat-page .plugin-modal,
#chat-page .model-picker-modal,
#chat-page .model-byok-panel,
#chat-page .rc-modal-sheet,
#chat-page .limit-modal-card {
  background:
    linear-gradient(180deg, var(--lp-card-top) 0, var(--lp-card) 120px) padding-box,
    var(--lp-card) padding-box;
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-card-shadow);
}

#chat-page .model-picker-title,
#chat-page .limit-modal-title,
#chat-page .plugin-modal h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--lp-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#chat-page .step-card {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: var(--lp-radius-sm);
  box-shadow: none;
}

#chat-page .step-card:hover { border-color: var(--lp-line-strong); box-shadow: none; }

#chat-page .step-number {
  background: var(--lp-fill);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}

#chat-page .step-content h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#chat-page .mobile-desktop-only-sheet h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

#chat-page .mobile-desktop-only-sheet p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--lp-text-2);
}

/* model picker: a short list, not a row of cards. Selection is one violet
   hairline and one tick; Pro and Custom no longer get their own colours. */
#chat-page .model-picker-modal {
  padding: 20px;
  width: min(440px, 92vw);
  border-radius: 16px;
  background: var(--lp-card);
}

#chat-page .model-picker-header {
  margin-bottom: 14px;
  padding-inline: 0 44px;
}

#chat-page .model-picker-title {
  font-size: 18px;
  letter-spacing: -0.015em;
}

#chat-page .model-picker-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: var(--lp-text-2);
}

#chat-page .model-picker-cards { display: flex; flex-direction: column; gap: 6px; }

#chat-page .model-card,
#chat-page .model-card-pro,
#chat-page .model-card-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  text-align: left;
  border: 1px solid var(--lp-line) !important;
  border-radius: 12px;
  background: transparent;
  box-shadow: none !important;
  text-shadow: none;
  overflow: visible;
  transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}

#chat-page .model-card::before { display: none; }
#chat-page .model-card-custom { margin-top: 6px; }

#chat-page .model-card:hover,
#chat-page .model-card-pro:hover,
#chat-page .model-card-custom:hover {
  background: var(--lp-surface-hover);
  border-color: var(--lp-line-ui) !important;
  transform: none !important;
}

#chat-page .model-card.selected,
#chat-page .model-card-pro.selected,
#chat-page .model-card-custom.selected {
  background: var(--lp-surface);
  border-color: var(--lp-violet) !important;
}

#chat-page .model-card-pro.model-card-locked,
#chat-page .model-card-pro.model-card-locked:hover,
#chat-page .model-card-custom.model-card-locked,
#chat-page .model-card-custom.model-card-locked:hover {
  opacity: .55;
  cursor: default;
  background: transparent;
  border-color: var(--lp-line) !important;
}

#chat-page .model-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

#chat-page .model-card-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}

#chat-page .model-card-desc {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lp-text-3);
}

#chat-page .model-lock-badge {
  display: inline-flex;
  align-items: center;
  color: var(--lp-text-3);
  font-size: 0;
}

#chat-page .model-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* One accent. Free and Custom read neutral; only Pro carries the violet tint. */
#chat-page .model-tag,
#chat-page .model-tag-free,
#chat-page .model-tag-custom,
#chat-page .model-tag-balanced,
#chat-page .model-tag-smart {
  padding: 2px 8px;
  border: 0;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-surface-hover);
  color: var(--lp-text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

#chat-page .model-tag-pro {
  background: rgba(167, 139, 250, .16);
  color: var(--lp-violet-soft);
}

#chat-page .model-card-check,
#chat-page .model-card-pro.selected .model-card-check,
#chat-page .model-card-custom.selected .model-card-check {
  position: static;
  transform: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lp-fill);
  color: #fff;
  box-shadow: none;
  opacity: 0;
  transition: opacity var(--lp-dur) var(--lp-ease);
}

#chat-page .model-card.selected .model-card-check { opacity: 1; }
#chat-page .model-card-check-left { display: none; }

/* custom model panel: same surface, same hairline, same violet as the picker */
#chat-page .model-byok-panel {
  width: min(360px, 44vw);
  padding: 20px;
  gap: 14px;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: var(--lp-card);
  box-shadow: var(--lp-card-shadow);
}

#chat-page .model-byok-header { margin: 0; }
#chat-page .model-byok-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--lp-text); }
#chat-page .model-byok-subtitle { font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--lp-text-3); }

#chat-page .model-byok-field { display: flex; flex-direction: column; gap: 6px; }
#chat-page .model-byok-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#chat-page .model-byok-label { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--lp-text-2); }

#chat-page .model-byok-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--lp-violet-soft);
  text-decoration: none;
}

#chat-page .model-byok-link:hover { text-decoration: underline; }

#chat-page .model-byok-input {
  padding: 9px 11px;
  font-family: var(--lp-mono) !important;
  font-size: 13px;
  color: var(--lp-text);
  background: var(--lp-bg);
  border: 1px solid var(--lp-line-ui);
  border-radius: 10px;
  box-shadow: none;
  text-shadow: none;
}

#chat-page .model-byok-select {
  font-family: inherit !important;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--lp-text-3) 50%), linear-gradient(135deg, var(--lp-text-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

#chat-page .model-byok-input:focus {
  outline: none;
  border-color: var(--lp-violet);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .18);
}

#chat-page .model-byok-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--lp-text-3); }

#chat-page .model-byok-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }

#chat-page .model-byok-test {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  align-self: flex-start;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--lp-line-ui) !important;
  border-radius: 10px;
  background: transparent;
  color: var(--lp-text);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}

#chat-page .model-byok-test::before,
#chat-page .model-byok-test::after { display: none !important; }
#chat-page .model-byok-test:hover { background: var(--lp-surface-hover); transform: none; filter: none; }

/* quiet text button: removes the saved OpenRouter key */
#chat-page .model-byok-remove {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  align-self: flex-start;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--lp-text-3);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}

#chat-page .model-byok-remove::before,
#chat-page .model-byok-remove::after { display: none !important; }
#chat-page .model-byok-remove:hover,
#chat-page .model-byok-remove:focus-visible { color: var(--lp-text-2); text-decoration: underline; background: none; transform: none; filter: none; }
#chat-page .model-byok-remove:disabled { opacity: .5; cursor: default; text-decoration: none; }
#chat-page .model-byok-remove[hidden] { display: none; }

#chat-page .model-byok-status { margin: 0; font-size: 12.5px; line-height: 1.4; color: #fca5a5; }
#chat-page .model-byok-status.is-ok { color: var(--lp-ok); }
#chat-page .model-byok-status.is-info { color: var(--lp-text-3); }

@media (max-width: 640px) {
  /* 16px stops mobile browsers zooming the page on focus */
  #chat-page .model-byok-input { font-size: 16px; }
}

/* quota wall: four compact plan cards that fit one screen. This modal produces
   most checkouts, so every plan must be visible without scrolling. The landing
   card type sizes and the 32px backdrop blur are dropped here. */
#chat-page .rc-limit-modal-overlay {
  background: rgba(7, 10, 18, .8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#chat-page .limit-modal-pricing-card {
  max-width: min(1040px, 94vw);
  padding: 22px 20px 18px;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: var(--lp-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--lp-card-shadow);
}

#chat-page .limit-modal-pricing-card > .limit-modal-title {
  margin-bottom: 12px;
  padding: 0 44px;
  font-size: 20px;
  letter-spacing: -0.015em;
}

#chat-page .limit-modal-pricing-section .pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#chat-page .limit-modal-pricing-section .pricing-card {
  max-width: none;
  padding: 16px 14px 14px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background: var(--lp-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

#chat-page .limit-modal-pricing-section .pricing-card.pro { border-color: rgba(167, 139, 250, .55); }

#chat-page .limit-modal-pricing-section .popular-tag {
  font-size: 10px;
  letter-spacing: .04em;
}

#chat-page .limit-modal-pricing-section .plan-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#chat-page .limit-modal-pricing-section .pricing-card h3 {
  margin-bottom: 2px;
  font-size: 15px;
}

#chat-page .limit-modal-pricing-section .price {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#chat-page .limit-modal-pricing-section .price .period { font-size: 12px; }
#chat-page .limit-modal-pricing-section .plan-annual-subtext { font-size: 11.5px; }
#chat-page .limit-modal-pricing-section .plan-description { font-size: 12px; }

#chat-page .limit-modal-pricing-section .features-list { margin-bottom: 12px; }

#chat-page .limit-modal-pricing-section .features-list li {
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
}

/* One filled button on the wall: Pro, the recommended plan. Studio and Ultra
   are outlined so the eye has somewhere to land, and the orange goes. */
#chat-page .limit-modal-pricing-section .pricing-cta {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  --rc-btn-text: var(--lp-text);
  --rc-btn-radius: 10px;
  min-height: 36px;
  border: 1px solid var(--lp-line-ui) !important;
  border-radius: 10px;
  background: transparent;
  color: var(--lp-text);
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none;
  transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}

#chat-page .limit-modal-pricing-section .pricing-cta::before,
#chat-page .limit-modal-pricing-section .pricing-cta::after { display: none !important; }

#chat-page .limit-modal-pricing-section .pricing-cta:hover:not(:disabled) {
  background: var(--lp-surface-hover);
  transform: none;
  filter: none;
}

#chat-page .limit-modal-pricing-section .pricing-cta:disabled {
  color: var(--lp-text-3);
  border-color: var(--lp-line) !important;
}

#chat-page .limit-modal-pricing-section .pricing-card.pro .pricing-cta {
  --rc-btn-face-bg: linear-gradient(var(--lp-fill), var(--lp-fill)) !important;
  --rc-btn-mid: var(--lp-fill);
  --rc-btn-shadow: var(--lp-fill);
  --rc-btn-text: #fff;
  border-color: transparent !important;
  background: var(--lp-fill);
  color: #fff;
  font-weight: 600 !important;
}

#chat-page .limit-modal-pricing-section .pricing-card.pro .pricing-cta:hover:not(:disabled) {
  --rc-btn-face-bg: linear-gradient(var(--lp-fill-hover), var(--lp-fill-hover)) !important;
  background: var(--lp-fill-hover);
}

/* One small muted marker per feature line, not a green dot on each side. */
#chat-page .limit-modal-pricing-section .features-list li::after { display: none; }

#chat-page .limit-modal-pricing-section .features-list li::before {
  width: 5px;
  height: 5px;
  background: var(--lp-line-ui);
}

/* The save badge joins the violet family instead of shouting in green. */
#chat-page .limit-modal-pricing-section .annual-save-badge {
  background: rgba(167, 139, 250, .16);
  color: var(--lp-violet-soft);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  #chat-page .limit-modal-pricing-section .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #chat-page .limit-modal-pricing-section .pricing-grid { grid-template-columns: minmax(0, 1fr); }
}

/* modal close: flat, and in the corner people reach for */
#chat-page button.close-modal-btn,
#chat-page button.model-picker-close {
  top: 14px;
  right: 14px;
  left: auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--lp-line) !important;
  border-radius: 8px;
  background: var(--lp-surface);
  background-image: none;
  color: var(--lp-text-2);
  box-shadow: none !important;
  transition: background-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease);
}

#chat-page button.close-modal-btn::before,
#chat-page button.model-picker-close::before { display: none; }

#chat-page button.close-modal-btn:hover,
#chat-page button.model-picker-close:hover {
  background: var(--lp-surface-hover);
  color: var(--lp-text);
  transform: none !important;
  filter: none;
}

#chat-page button.close-modal-btn:active,
#chat-page button.model-picker-close:active { transform: scale(.96) !important; }

/* the header reserved room for a left-hand close button that now sits right */
#chat-page .model-picker-header { padding-left: 0; }

/* tool call rows — landing's .tool: a neutral surface row, colour only on the
   status mark, so a run of twelve calls reads as one list instead of a rainbow. */
#chat-page .tool-call-bubble,
#chat-page .tool-call-bubble.tool-ok,
#chat-page .tool-call-bubble.tool-query,
#chat-page .tool-call-bubble.tool-query-ok,
#chat-page .tool-call-bubble.tool-remove,
#chat-page .tool-call-bubble.tool-query-warn {
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: var(--lp-radius-xs);
  padding: 8px 12px;
  margin: 3px 0;
  box-shadow: none;
  animation-duration: .24s;
}

#chat-page .tool-call-bubble.tool-warn {
  background: var(--lp-surface) !important;
  border-color: rgba(249, 115, 22, .38) !important;
}

#chat-page .tool-call-bubble.tool-err {
  background: var(--lp-surface) !important;
  border-color: rgba(239, 68, 68, .42) !important;
}

#chat-page .tool-call-bubble:hover {
  background: var(--lp-surface-hover) !important;
  border-color: var(--lp-line-ui) !important;
  box-shadow: none;
  transform: none;
}

/* One line per call. Stacked action / name / path behind a 28px icon tile made
   every row 69px, so six calls cost 414px of scroll; the landing page's own tool
   mock is a single 38px row. Same information, 45% less height. */
#chat-page .tool-call-bubble {
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

#chat-page .tool-icon {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  color: var(--lp-text-3) !important;
  box-shadow: none !important;
}

#chat-page .tool-icon svg,
#chat-page .tool-icon .lucide { width: 15px; height: 15px; }

#chat-page .tool-info {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  line-height: 1.3;
}

#chat-page .tool-action {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lp-text-3);
}

#chat-page .tool-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--lp-text);
}

/* basis 0, not auto: with wrap enabled a flex item is placed by its CONTENT size
   before any shrinking, so a long Studio path pushed itself onto a second line
   instead of truncating. Zero basis keeps it on the row. */
#chat-page .tool-detail {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--lp-text-2);
  font-family: var(--lp-mono) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* anything that is genuinely a block still gets its own row */
#chat-page .tool-info > .tool-result-panel,
#chat-page .tool-info > .tool-error-msg,
#chat-page .tool-info > .tool-warn-msg,
#chat-page .tool-info > .tool-fix-hint,
#chat-page .tool-info > .tool-detail.tool-check-section,
#chat-page .tool-info > .tool-detail.tool-check-path {
  flex: 1 0 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#chat-page .tool-detail.tool-check-section { font-family: var(--lp-font) !important; font-size: 12px; font-weight: 600; }
#chat-page .tool-status-line.tool-status-ok { color: var(--lp-ok); }

#chat-page .tool-badge {
  width: 20px;
  height: 20px;
  border-width: 1px !important;
  box-shadow: none;
  text-shadow: none;
}

/* the sweep animation on the newest tool group */
#chat-page .tool-call-bubble.is-latest-tools::after { display: none !important; }

/* pricing, inside the quota-limit modal */
#chat-page .pricing-card {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-card-shadow);
  padding: 28px 24px 24px;
}

#chat-page .pricing-card:hover {
  transform: none;
  border-color: var(--lp-line);
  box-shadow: var(--lp-card-shadow);
}

#chat-page .pricing-card.pro,
#chat-page .pricing-card.pro:hover {
  border-color: var(--lp-violet);
  box-shadow: var(--lp-card-shadow);
}

#chat-page .pricing-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text-2);
}

#chat-page .price {
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#chat-page .price .period {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lp-text-2);
}

#chat-page .plan-description,
#chat-page .plan-annual-subtext {
  font-size: 15px;
  font-weight: 400;
  color: var(--lp-text-2);
}

#chat-page .features-list li {
  font-size: 15px;
  font-weight: 400;
  color: var(--lp-text);
}

#chat-page .popular-tag {
  background: var(--lp-fill);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: none;
}

#chat-page .segmented-toggle {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line-ui);
  border-radius: var(--lp-radius-pill);
  box-shadow: none;
}

#chat-page .segmented-toggle-btn {
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-2);
  background: transparent;
  border: 0;
  box-shadow: none;
}

#chat-page .segmented-toggle-btn.is-active {
  background: var(--lp-surface-down);
  color: var(--lp-text);
  box-shadow: inset 0 0 0 1px var(--lp-violet);
}

#chat-page .annual-save-badge {
  background: var(--lp-ok);
  color: #0e0e12;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

/* ==========================================================================
   10. scrollbars — the landing page's thin neutral bar
   ========================================================================== */

#chat-page *::-webkit-scrollbar { width: 10px; height: 10px; }

#chat-page *::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
}

#chat-page *::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, .22);
  background-image: none;
  border-radius: 999px;
  box-shadow: none;
}

#chat-page *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .34); }

#chat-page .config-panel::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .22); }

/* ==========================================================================
   11. responsive
   ========================================================================== */

@media (max-width: 900px) {
  #chat-page .chat-container {
    --rc-col-gap: 12px;
    padding: calc(var(--lp-nav-h) + 12px) 16px 16px;
  }
  #chat-page .sidebar,
  #chat-page .chat-main,
  #chat-page .config-panel { border-radius: 16px; }
  #chat-page .navbar-top { padding-inline: 16px; }
  #chat-page .chat-nav a { padding: 0 8px; }
}

/* ==========================================================================
   calm motion
   Motion only when state changes. 160ms for colour and opacity, 220ms for a
   panel or modal arriving, 120ms leaving. One ease-out curve, no overshoot, no
   hover lift, no tilt, no scale on press, nothing that loops while you read.
   ========================================================================== */

@keyframes lpIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes lpOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes lpFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* interactive surfaces: colour and opacity move, geometry does not */
#chat-page button,
#chat-page .btn,
#chat-page a.btn,
#chat-page .pricing-card,
#chat-page .model-card,
#chat-page .conversation-list li,
#chat-page .starter-prompt,
#chat-page .upgrade-plan,
#chat-page .step-card,
#chat-page .attachment-chip,
#chat-page .message-action-btn {
  transition:
    background-color var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease),
    color var(--lp-dur) var(--lp-ease),
    opacity var(--lp-dur) var(--lp-ease);
}

#chat-page button:hover,
#chat-page button:active,
#chat-page .btn:hover,
#chat-page .btn:active,
#chat-page .pricing-card:hover,
#chat-page .model-card:hover,
#chat-page .model-card:active,
#chat-page .conversation-list li:hover,
#chat-page .starter-prompt:active,
#chat-page .upgrade-plan:active,
#chat-page .step-card:hover {
  transform: none !important;
  filter: none !important;
}

#chat-page .rc-btn-face,
#chat-page .rc-btn-face * {
  transform: none !important;
  transition: none !important;
}

/* modals: fade the overlay, rise the card 6px, leave by fading */
#chat-page #model-picker-overlay.rc-modal-enter,
#chat-page #plugin-modal-overlay.rc-modal-enter {
  animation: lpFade .15s var(--lp-ease) both;
}

#chat-page #model-picker-overlay.rc-modal-leave,
#chat-page #plugin-modal-overlay.rc-modal-leave {
  animation: lpOut .12s var(--lp-ease) both;
}

#chat-page .rc-modal-enter .model-picker-modal,
#chat-page .rc-modal-enter .model-byok-panel,
#chat-page .rc-modal-enter .plugin-modal,
#chat-page .rc-modal-enter .plugin-connect-float-panel {
  animation: lpIn var(--lp-dur-slow) var(--lp-ease) both;
}

#chat-page .rc-modal-leave .model-picker-modal,
#chat-page .rc-modal-leave .model-byok-panel,
#chat-page .rc-modal-leave .plugin-modal,
#chat-page .rc-modal-leave .plugin-connect-float-panel {
  animation: lpOut .12s var(--lp-ease) both;
}

#chat-page .rc-limit-modal-overlay.is-open { animation: lpFade .15s var(--lp-ease) both; }
#chat-page .limit-modal-card { animation: lpIn var(--lp-dur-slow) var(--lp-ease) both; }

/* messages arrive with a short rise, not an 850ms slide */
#chat-page .message-container { animation: lpIn .18s var(--lp-ease) both; }

/* nothing loops while you read. Spinners, recording and typing keep their loop
   because they mean something is happening. */
#chat-page *,
#chat-page *::before,
#chat-page *::after { animation-iteration-count: 1 !important; }

#chat-page .spinner,
#chat-page .loading-spinner,
#chat-page [class*="spinner"],
#chat-page .mic-btn.is-recording,
#chat-page [class*="typing"],
#chat-page [class*="typing"] *,
#chat-page .context-picker-sync-dot,
#chat-page .pulse-dot { animation-iteration-count: infinite !important; }

#chat-page .quota-bar-fill.quota-bar-overlimit { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #chat-page *,
  #chat-page *::before,
  #chat-page *::after {
    animation: none !important;
    transition-duration: 0s !important;
  }
}

/* ==================================================================
   UI polish pass, 2026-09-21
   Nothing is hidden or removed here. The three settings toggles
   (~2,000 uses), the model picker (27% of upgrade clicks) and the
   limit modal (40%) are all untouched. This only adjusts weight and
   rhythm so the resting state is calmer and the states that matter
   are the ones that stand out.
   ================================================================== */

/* ---- quota meter: quiet at rest, loud when it actually matters ----
   Previously every state looked identical, so a meter at 0% shouted
   as loudly as one at 100%. Now the resting card recedes and the
   existing at-limit / over-limit classes escalate it. */

#chat-page .usage-meter {
    margin: 4px 6px 14px;
    padding: 11px 12px;
    background: transparent;
    border-color: transparent;
    transition: background var(--lp-dur, .16s) var(--lp-ease, ease),
                border-color var(--lp-dur, .16s) var(--lp-ease, ease);
}

#chat-page .usage-meter .quota-header {
    font-variant-numeric: tabular-nums;
}

#chat-page .usage-meter .quota-bar-track {
    opacity: 0.55;
}

#chat-page .usage-meter:hover {
    background: var(--lp-surface);
    border-color: var(--lp-line);
}

/* the two states app.js actually sets */
#chat-page .usage-meter.quota-meter-at-limit,
#chat-page .usage-meter.quota-meter-over-limit {
    background: var(--lp-surface);
    border-color: var(--lp-line-strong);
}

#chat-page .usage-meter.quota-meter-at-limit .quota-bar-track,
#chat-page .usage-meter.quota-meter-over-limit .quota-bar-track {
    opacity: 1;
}

/* ---- panel headers: one rhythm across both sides ---- */

#chat-page .sidebar-header,
#chat-page .config-panel-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lp-line);
}

#chat-page .sidebar-header h2,
#chat-page .config-panel-header h2 {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--lp-text-3);
}

/* ---- config panel: tighter vertical rhythm ---- */

#chat-page .config-panel {
    padding: 1.1rem 1.1rem 1.25rem;
}

#chat-page .config-group + .config-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--lp-line);
}

/* ---- upgrade card: same information, less shouting ----
   It accounts for ~5% of upgrade clicks while taking the most room
   in the panel, so it keeps its place but stops competing with the
   controls above it. */

#chat-page .upgrade-card {
    padding: 11px;
    background: transparent;
    border-color: var(--lp-line);
}

#chat-page .upgrade-card:hover {
    background: var(--lp-surface);
    border-color: var(--lp-line-strong);
}

#chat-page .upgrade-card-chip {
    font-size: 10.5px;
    letter-spacing: 0.05em;
}

/* ---- sidebar: give New Chat room to breathe ---- */

#chat-page .new-chat-btn {
    margin-bottom: 4px;
}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    #chat-page .usage-meter,
    #chat-page .upgrade-card {
        transition: none;
    }
}

/* ==================================================================
   Composer: two-row layout, 2026-09-21
   The input gets the full width and the controls sit on their own
   row beneath it, with send pushed to the right. Markup is unchanged:
   .chat-form-row simply stacks instead of sitting side by side.
   ================================================================== */

#chat-page #chat-form {
    padding: 0.75rem 0.75rem 0.6rem;
}

#chat-page .chat-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* the text area gets room to breathe rather than being squeezed
   between the placeholder and the buttons */
#chat-page .chat-form-body {
    width: 100%;
    min-width: 0;
}

#chat-page .mention-editor {
    min-height: 46px;
    padding: 6px 2px;
}

/* controls become their own full-width toolbar */
#chat-page .chat-form-actions {
    width: 100%;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding-top: 8px;
    border-top: 1px solid var(--lp-line);
}

/* send sits alone on the right, everything else stays left.
   an explicit order is required: without one it defaults to 0 and
   jumps ahead of the controls that do have an order set. */
#chat-page .send-btn-wrap {
    order: 10;
    margin-left: auto;
    flex: 0 0 auto;
}

/* nothing in the toolbar should stretch to fill the row.
   width:auto is the important half: chat.css:1304 and style.css:3294
   both set .model-picker-btn to width:100%, which flex-basis:auto
   then honours, so flex alone is not enough. */
#chat-page .chat-form-actions > * {
    flex: 0 0 auto;
    width: auto;
}

#chat-page .chat-form-actions .model-picker-btn {
    width: auto;
    max-width: 220px;
}

/* the "Enter to send" hint now has room, so show it at rest rather
   than only on focus, and let it sit after the left-hand controls */
#chat-page .chat-form-actions::before {
    order: 3;
    margin-right: 0;
    margin-left: 2px;
    opacity: 0.55;
}

#chat-page #chat-form:focus-within .chat-form-actions::before {
    opacity: 1;
}

/* keep the left-hand controls in a sensible order */
#chat-page .model-picker-btn { order: 1; }
#chat-page .mic-btn,
#chat-page .voice-cancel-btn,
#chat-page .voice-confirm-btn { order: 2; }

/* recording state: the waveform needs the full row, so drop the divider */
#chat-page #chat-form.is-recording .chat-form-actions {
    border-top-color: transparent;
}

@media (max-width: 760px) {
    #chat-page #chat-form { padding: 0.6rem 0.6rem 0.5rem; }
    #chat-page .mention-editor { min-height: 40px; }
    #chat-page .chat-form-actions::before { display: none; }
}

/* ---- the Settings reveal tab, now that the config panel starts closed ----
   An unlabelled chevron would genuinely hide the three toggles that 549
   people use. With a label it is a visible door, not a hidden one. */

#chat-page .panel-reveal-btn--labelled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    padding: 0 12px 0 9px !important;
    height: 34px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-text-2);
    background: var(--lp-surface);
    white-space: nowrap;
}

#chat-page .panel-reveal-btn--labelled:hover {
    background: var(--lp-surface-hover);
    color: var(--lp-text);
}

#chat-page .panel-reveal-label {
    line-height: 1;
}

/* ==========================================================================
   announcement + maintenance notices (admin app_settings)
   ========================================================================== */

/* Announcement: one slim hairline row at the top of the conversation pane,
   centred on the message column. Purple only as the dot; warning swaps the dot
   for amber and warms the row a touch. Dismissal is per text (app.js). */
#chat-page .chat-announcement {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 48px;
  border-bottom: 1px solid var(--v2-line, rgba(207, 195, 224, .09));
  background: rgba(255, 255, 255, .02);
  color: var(--v2-text-2, #c5b9d8);
  font-size: 13.5px;
  line-height: 1.45;
}

#chat-page .chat-announcement[hidden] { display: none; }

#chat-page .chat-announcement__text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--v2-col, 820px);
  margin: 0;
  overflow-wrap: anywhere;
}

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

#chat-page .chat-announcement--warning {
  background: rgba(251, 191, 36, .045);
  border-bottom-color: rgba(251, 191, 36, .16);
  color: var(--v2-text, #f3eefc);
}

#chat-page .chat-announcement--warning .chat-notice-dot { background: var(--lp-amber); }

/* icon-only dismiss: no face, no fill, just the glyph */
#chat-page button.chat-notice-close {
  --rc-btn-face-bg: none !important;
  --rc-btn-face-shadow: none !important;
  flex: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--v2-text-3, #8f84a6);
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}

#chat-page button.chat-notice-close:hover {
  color: var(--v2-text, #f3eefc);
  background: rgba(255, 255, 255, .06);
}

#chat-page .chat-announcement .chat-notice-close {
  position: absolute;
  top: calc(50% - 14px);
  right: 10px;
}

/* Maintenance: a refused run's message sits where the reply would have been.
   Same family as the error panel (10px radius, faint tint), in amber. */
#chat-page .chat-messages > .chat-maintenance-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 8px 11px 15px;
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 10px;
  background: rgba(251, 191, 36, .045);
}

#chat-page .chat-maintenance-notice .chat-notice-dot {
  margin-top: 8px;
  background: var(--lp-amber);
}

#chat-page .chat-maintenance-notice__copy {
  flex: 1 1 auto;
  min-width: 0;
}

#chat-page .chat-maintenance-notice__text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--v2-text, #f3eefc);
  overflow-wrap: anywhere;
}

#chat-page .chat-maintenance-notice__hint {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-text-2, #c5b9d8);
}

#chat-page .chat-maintenance-notice .chat-notice-close { margin-top: -3px; }