/* Multio — LIGHT premium theme (Linear / Apple / Perplexity-light polish).
   Off-white canvas, white panels, hairline borders (#E7E7E4 family), soft
   layered shadows, 8pt spacing rhythm, one restrained indigo accent.
   Vanilla CSS, no external assets — font stack is local system + Inter
   only if the user already has it installed (no downloads). */
:root {
  --bg: #fafaf9;
  --panel: #ffffff;
  --panel-2: #f4f4f2;
  --panel-3: #eef2ff; /* light indigo tint — active/selected surfaces only */
  --side-bg: #efefeb; /* app sidebar surface (premium pass) */
  --side-hover: #fdfdfc; /* near-white row hover on the sidebar tint */
  --app-bg: #f7f7f4; /* app main canvas — one flat step below white cards */
  --border: #e7e7e4;
  --border-strong: #d8d8d4;
  --text: #111827;
  --text-soft: #4b5563;
  --text-faint: #6b7280;
  --text-fainter: #9aa1ab; /* receipt lines / fine tertiary detail */
  --accent-1: #6366f1;
  --accent-2: #4f46e5;
  --gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --success: #047857;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --warning: #92400e;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  /* radius scale */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  /* 8pt spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* layered, soft shadows */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .05);
  --shadow-md: 0 2px 4px rgba(17, 24, 39, .04), 0 8px 20px rgba(17, 24, 39, .06);
  --shadow-lg: 0 4px 8px rgba(17, 24, 39, .04), 0 16px 40px rgba(17, 24, 39, .09);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, .28);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { letter-spacing: -.022em; line-height: 1.2; }
::selection { background: rgba(99, 102, 241, .18); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-2); }

/* Consistent, visible focus for keyboard users (premium = accessible). */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Quiet, thin scrollbars in the app panes. */
.messages, .sidebar, .scroll-view { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.messages::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .scroll-view::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .scroll-view::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}

/* ---------- model-family logos ---------- */
.logo-slot, .logo-inline {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--text);
}
.logo-slot svg, .logo-inline svg { display: block; width: 17px; height: 17px; }
.fam-chip .logo-slot svg { width: 18px; height: 18px; }
.chip .logo-slot svg { width: 16px; height: 16px; }
.logo-inline { margin-right: 2px; }
.logo-inline svg { width: 14px; height: 14px; }
.msg-footer .logo-inline svg { width: 13px; height: 13px; }
.chip.active .logo-slot, .chip.active .logo-inline { color: #fff; }
/* Provider marks render in official brand colours (see logos.js / BRAND.md
   §3). The OpenAI knot and the Grok mark are black #000000 by default;
   inside an active picker chip (indigo gradient surface) they flip to
   white — the pre-existing dark-context handling for those marks. Other
   marks carry their colours in the SVG itself and are unaffected by
   these rules. */
svg.logo-openai, svg.logo-grok { fill: #000000; }
.chip.active svg.logo-openai, .chip.active svg.logo-grok { fill: #ffffff; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, background-color .15s ease, filter .15s ease, transform .12s ease;
}
.btn:hover { box-shadow: var(--shadow-md); background: var(--panel-2); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--gradient); border: none; color: #fff; box-shadow: 0 2px 10px rgba(79, 70, 229, .26); }
.btn-primary:hover { background: var(--gradient); filter: brightness(1.06); box-shadow: 0 4px 16px rgba(79, 70, 229, .30); }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--border); }
.btn-ghost:hover { box-shadow: none; background: var(--panel-2); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-danger-ghost { background: var(--panel); border-color: var(--danger-border); color: var(--danger); margin-top: 14px; box-shadow: none; }
.btn-danger-ghost:hover { background: var(--danger-bg); box-shadow: none; }

/* ---------- brand ---------- */
.brand-mark { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--text); }
/* Layer-1 wordmark (BRAND.md): "Multi" in text + the orbit-O as inline SVG.
   The O is a hub: bold indigo ring, fine tilted orbit ring, satellite beads.
   Pure geometry — no triangles, and never any third-party mark inside it.
   In digital contexts the orbit element (ring + beads, .wm-orbit) revolves
   slowly around the hub; the letters and the hub ring itself never move.
   The viewBox (0 -4 60 56) is centred on the O (30, 24) and tall enough
   for the orbit's full sweep (max radius 27 units), so nothing clips. */
.wordmark { display: inline-flex; align-items: center; }
.wm-o { width: 1.38em; height: 1.285em; display: block; margin-left: .015em; transform: translateY(-.02em); }
.wm-orbit {
  transform-box: view-box; transform-origin: center;
  animation: wm-orbit-spin 26s linear infinite;
}
@keyframes wm-orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wm-orbit { animation: none !important; }
}
/* The claim card's animated orbit-O (.cg-orbit, R8) pauses while
   the tab is hidden, like the spheres; JS also pauses it
   off-screen (.anim-paused via IntersectionObserver in app.js). */
body.tab-hidden .cg-orbit .wm-orbit { animation-play-state: paused !important; }
/* Brand lockup: the wordmark never travels naked — it carries the four
   model families + the "one subscription" line beneath it. */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-sub { font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--text-faint); line-height: 1.45; }

/* ---------- landing ---------- */
.landing { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.landing-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 32px; max-width: 1200px; width: 100%; margin: 0 auto;
}
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.landing-main { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 8px 32px 64px; }
.hero {
  text-align: center; padding: 64px 24px 40px; border-radius: var(--radius-lg);
  /* The one textured surface: a very light indigo wash + faint dot grid. */
  background:
    radial-gradient(680px 320px at 50% -80px, rgba(99, 102, 241, .10), rgba(99, 102, 241, 0) 70%),
    radial-gradient(rgba(17, 24, 39, .05) 1px, transparent 1.2px);
  background-size: auto, 22px 22px;
  background-position: center top, center top;
}
.hero-kicker {
  margin: 0 0 18px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2);
}
.hero-title {
  font-size: clamp(36px, 6vw, 58px); line-height: 1.08; letter-spacing: -.032em; margin: 0 0 18px; color: var(--text);
}
.hero-title .accent-word {
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { color: var(--text-soft); font-size: 18px; line-height: 1.6; max-width: 620px; margin: 0 auto 28px; }
/* Hero composition (BRAND.md §2): headline copy on the left, the mini
   mascot on the right, vertically centred — clean like the native apps.
   Chips and honesty cards stay in the centred column beneath. On narrow
   screens the pair stacks: copy, then the mascot centred above the chips. */
.hero-top {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1120px; margin: 0 auto 32px; text-align: left;
}
.hero-copy { max-width: 580px; }
.hero-copy .hero-sub { margin: 0 0 28px; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero-ctas .btn { padding: 12px 22px; font-size: 15.5px; }
.hero-cta-note { color: var(--text-faint); font-size: 13.5px; margin: 12px 0 0; }
@media (max-width: 860px) {
  .hero-top { flex-direction: column; gap: 26px; text-align: center; }
  .hero-copy .hero-sub { margin: 0 auto 28px; }
  .hero-ctas { justify-content: center; }
}
.family-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.fam-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); font-weight: 700; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.fam-chip:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ---------- hero mascot (BRAND.md §2) ----------
   Option A "Glass orbit": a glossy glass torus hub with a glassy
   centre, a fine orbit ring tilted -18° weaving behind and in front
   of the hub, and the five included model families on lit 3D glass
   balls over a soft ground shadow. A decorative illustration beside
   the hero headline — NOT the logo and never a centrepiece. Fixed-size
   box: the SVG scales inside it, so motion can never shift layout.
   The parked balls (the showcase arrangement) are the default; when
   app.js allows motion it adds .glass-motion and drives the SAME five
   balls around the tilted ellipse with requestAnimationFrame
   (LANDING-UX-2 C): each ball lives in .glass-sats-back or
   .glass-sats-front and app.js reparents it by depth, so on the back
   arc the glass hub truly occludes it (with a ~0.85 scale + slight
   dimming), and on the front arc it passes in front at ~1.1 scale.
   app.js pauses the orbit on hover and while the tab is hidden. */
.hero-mascot { width: 240px; height: 240px; flex-shrink: 0; }
@media (max-width: 860px) { .hero-mascot { width: 200px; height: 200px; } }
.mascot-svg { display: block; width: 100%; height: auto; }
.glass-sats-back, .glass-sats-front { display: none; }
.hero-mascot.glass-motion .glass-sats-back,
.hero-mascot.glass-motion .glass-sats-front { display: inline; }
.hero-mascot.glass-motion .glass-sats-static,
.hero-mascot.glass-motion .glass-sats-static-front { display: none; }
/* Reduced motion: the parked arrangement only — never the travelling
   balls, even if .glass-motion was added before a settings change. */
@media (prefers-reduced-motion: reduce) {
  .glass-sats-back, .glass-sats-front { display: none !important; }
  .hero-mascot .glass-sats-static,
  .hero-mascot .glass-sats-static-front { display: inline !important; }
}
/* The two honesty cards sit side by side on desktop, stacked on mobile. */
.honesty-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; text-align: left;
}
@media (max-width: 700px) { .honesty-grid { grid-template-columns: 1fr; } }
.honesty-card {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 18px 28px; color: var(--text-soft);
}
.honesty-card strong { color: var(--text); font-size: 16px; letter-spacing: -.01em; }

/* "How routing saves you money" — three quiet stats under the hero. */
.savings-strip {
  display: flex; gap: 0; margin: 8px auto 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.savings-stat { flex: 1; padding: 20px 24px; text-align: center; }
.savings-stat + .savings-stat { border-left: 1px solid var(--border); }
.savings-value {
  display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.savings-label { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }

.landing-pricing { margin-top: 56px; }
.landing-pricing h2 { text-align: center; font-size: 28px; letter-spacing: -.024em; color: var(--text); margin: 0 0 8px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 24px 0 40px; }
.plan-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px; position: relative;
  transition: box-shadow .18s ease, transform .18s ease;
}
.plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plan-card h3 { margin: 0 0 6px; font-size: 17px; }
/* Featured (Pro) = the dark card: the single deep surface on the page. */
.plan-card-featured {
  background: #131826; border-color: #131826; color: #f3f4f6;
  box-shadow: 0 0 0 1px #131826, var(--shadow-lg);
}
.plan-card-featured h3, .plan-card-featured .plan-price { color: #ffffff; }
.plan-card-featured .plan-allowance { color: #e5e7eb; }
.plan-card-featured .plan-tiers, .plan-card-featured .plan-per { color: #9aa3b2; }
.plan-card-featured .form-note { color: #9aa3b2; }
.plan-card-current { border-color: var(--success-border); box-shadow: 0 0 0 1px var(--success), var(--shadow-md); }
.plan-card-featured.plan-card-current { box-shadow: 0 0 0 2px var(--success), var(--shadow-lg); }
.plan-badge {
  position: absolute; top: -11px; right: 16px; background: var(--gradient); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(79, 70, 229, .3);
}
.plan-current-badge { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); box-shadow: none; }
.plan-price { font-size: 34px; font-weight: 800; margin: 4px 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-per { font-size: 14px; color: var(--text-soft); font-weight: 500; }
.plan-allowance { color: var(--text); font-weight: 600; margin: 4px 0; font-variant-numeric: tabular-nums; }
.plan-tiers { color: var(--text-soft); margin: 4px 0 14px; }
/* ARL renewal disclosure + express-consent checkbox (audit C2-3). */
.plan-renewal { font-size: 12.5px; line-height: 1.5; color: var(--text-soft); margin: 10px 0 0; }
.plan-card-featured .plan-renewal { color: #c7ccd6; }
.consent-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 600; margin-top: 10px; cursor: pointer; text-align: left; }
.consent-check input { margin-top: 2px; accent-color: var(--accent); }
.plan-card-featured .consent-check { color: #f3f4f6; }
.consent-error { margin-top: 8px; }

.auth-card {
  max-width: 420px; margin: 0 auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 28px;
}
/* LANDING-UX-2 B: auth is a front-door VIEW (full screen, hash-routed
   #/login · #/signup), not a card at the bottom of the landing page. */
.auth-view { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.auth-view-main {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 24px 32px 64px; display: flex; flex-direction: column; align-items: center;
}
.auth-view .auth-card { width: 100%; margin: 24px auto 0; }
.auth-title { font-size: 22px; margin: 0 0 8px; letter-spacing: -.02em; }
.trial-note { margin: 0 0 16px; color: var(--text-soft); }
.trial-note strong { color: var(--text); }
.attest-check { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text-soft); cursor: pointer; margin: 16px 0; }
.attest-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent-2); }
/* Social sign-in (LANDING-UX-2 F) — shown only when configured. */
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 18px; font-weight: 600;
}
.oauth-glyph { width: 18px; height: 18px; display: block; flex-shrink: 0; }
/* Apple HIG: black button, white text,  glyph (U+F8FF on Apple platforms). */
.oauth-apple { background: #000; border-color: #000; color: #fff; box-shadow: none; }
.oauth-apple:hover { background: #1a1a1a; box-shadow: none; }
.oauth-apple-glyph::before { content: "\F8FF"; font-size: 19px; line-height: 1; }
.oauth-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  color: var(--text-faint); font-size: 12.5px; font-weight: 600;
}
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; padding: 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); cursor: pointer; font-weight: 700; color: var(--text-soft);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.auth-tab:hover { background: var(--panel-2); color: var(--text); }
.auth-tab.active { background: var(--gradient); color: #fff; border: none; box-shadow: 0 2px 8px rgba(79, 70, 229, .25); }
.auth-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 16px; }
.auth-form input, .inline-form input {
  width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-form input:focus, .inline-form input:focus, textarea:focus {
  border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
}
.auth-form .check-row { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.auth-form .check-row input[type="checkbox"] { width: 17px; height: 17px; margin-top: 0; padding: 0; flex: none; accent-color: var(--accent-2); }
.form-error { color: var(--danger); font-size: 14px; }
.form-success { color: var(--success); font-size: 14px; }
.form-note, .muted { color: var(--text-faint); font-size: 13px; }
.accuracy-notice { color: var(--text-faint); font-size: 12.5px; margin-top: 16px; }
.landing-footer {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 24px; color: var(--text-faint); font-size: 13px; border-top: 1px solid var(--border);
  background: var(--panel);
}
.landing-footer .accuracy-notice { margin-top: 0; }

/* ---------- app shell ---------- */
.app-shell { display: flex; height: 100vh; height: 100dvh; background: var(--bg); }
.sidebar {
  width: 280px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
  z-index: 30;
}
.sidebar .brand-mark { padding: 2px 6px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  text-align: left; background: none; border: none; padding: 9px 12px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-soft); font-weight: 600;
  transition: background-color .13s ease, color .13s ease;
}
.side-link:hover { background: var(--panel-2); color: var(--text); }
.side-link.active { background: var(--panel-3); color: var(--accent-2); }
.side-heading { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); margin: 8px 6px 0; }
/* Conversations are the flexible middle of the sidebar (BRAND.md §7):
   the section grows so the balance card + account nav + user footer sit
   at the bottom. The section is the sidebar's shock absorber, and the
   LIST scrolls inside it — before this, the unscrollable list overflowed
   its shrunken flex box and painted over the balance card below it
   (owner report 2026-10-21: conversations hidden behind the card). The
   128px floor keeps the heading + first rows usable on short viewports:
   below that the sidebar's own scroll takes over instead of the region
   collapsing to nothing. */
.side-convos { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 128px; overflow: hidden; }
.side-convos > .side-heading, .side-convos > .side-empty { flex: none; }
.convo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.convo-item { display: flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); transition: background-color .13s ease; }
.convo-item:hover { background: var(--panel-2); }
.convo-item.active { background: var(--panel-3); }
.convo-open {
  flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 10px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.convo-item.active .convo-open { color: var(--text); font-weight: 600; }
.convo-del { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 6px 8px; border-radius: 6px; transition: color .13s ease, background-color .13s ease; }
.convo-del:hover { color: var(--danger); background: var(--danger-bg); }
.side-empty { color: var(--text-faint); font-size: 13px; margin: 0 6px; }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; }
.user-email { margin: 0 6px 2px; font-weight: 600; word-break: break-all; }
.user-plan { margin: 0 6px 12px; color: var(--text-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.sidebar-scrim { position: fixed; inset: 0; background: rgba(17, 24, 39, .32); z-index: 20; }

.main-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.scroll-view { overflow-y: auto; padding: 32px 32px 64px; max-width: 1080px; width: 100%; margin: 0 auto; display: block; }
.view-title { font-size: 26px; letter-spacing: -.024em; margin-top: 0; }
.view-sub { color: var(--text-soft); line-height: 1.6; max-width: 640px; }

/* ---------- chat ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.4) blur(8px);
}
.menu-btn { display: none; }
/* Slim chat header (BRAND.md §7): conversation title + share, nothing
   else — the balance moved to the sidebar card below. */
.topbar-title {
  font-weight: 600; color: var(--text-soft); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Active persona name in the chat header + the composer persona row (Phase 3.2). */
.topbar-persona { font-weight: 600; font-size: 13px; color: var(--accent, #4f46e5); white-space: nowrap; }
.persona-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 860px; margin: 0 auto 10px; }
.persona-label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.persona-select { max-width: 260px; }
.persona-note { font-size: 12.5px; color: var(--text-faint); }
/* Sidebar balance card: remaining allowance, 4px progress, plan label,
   and the Top up / Upgrade jump into Usage & billing. */
.balance-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; color: var(--text); font-variant-numeric: tabular-nums;
}
.balance-card .balance-text { font-weight: 700; font-size: 14.5px; }
.balance-progress { display: block; height: 4px; background: var(--border); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.balance-progress-fill { display: block; height: 100%; width: 0%; background: var(--gradient); border-radius: 99px; transition: width .45s ease; }
.balance-progress-fill.low { background: linear-gradient(135deg, #f59e0b, var(--danger)); }
.balance-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
/* Jump-target flash for the sidebar Upgrade / Top up action
   (goToBillingAction in app.js): rings the card the button means. */
.flash-target { animation: flashTarget 1.6s ease-out 2; }
@keyframes flashTarget {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent-2); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .flash-target { animation: none; box-shadow: 0 0 0 3px var(--accent-2); }
}
.balance-plan { color: var(--text-faint); font-size: 13px; font-weight: 600; }

.messages { flex: 1; overflow-y: auto; padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.empty-state { margin: auto; text-align: center; color: var(--text-soft); max-width: 520px; padding: 32px; line-height: 1.65; }
/* Empty chat (owner request 2026-10-21): with no messages, the welcome
   and the composer block sit centred as a group — the messages region
   and an equal spacer below the composer balance around them. The
   .is-empty class is toggled by syncChatEmptyClass() in app.js; with
   messages present nothing here applies and the composer docks at
   the bottom as before. */
#chatView.is-empty .messages { flex: 1 1 0%; justify-content: flex-end; overflow-y: visible; }
#chatView.is-empty .empty-state { margin: 0 auto; }
#chatView.is-empty::after { content: ""; flex: 1 1 0%; }
.empty-state h2, .empty-state h3 { color: var(--text); letter-spacing: -.02em; }
.msg { width: fit-content; max-width: min(760px, 92%); }
.msg-user { align-self: flex-end; }
.msg-assistant { align-self: flex-start; }
.bubble { padding: 13px 17px; border-radius: 18px; white-space: pre-wrap; word-break: break-word; line-height: 1.62; }
.msg-user .bubble { background: var(--gradient); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 2px 10px rgba(79, 70, 229, .20); }
.msg-assistant .bubble { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-bottom-left-radius: 6px; color: var(--text); }
.bubble.streaming::after { content: "▍"; color: var(--accent-2); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* While the first token is still on its way, the empty bubble shows a
   quiet shimmer skeleton instead of a blank box. Presentation only. */
.msg-assistant .bubble.streaming:empty { min-width: 216px; min-height: 22px; }
.msg-assistant .bubble.streaming:empty::before {
  content: ""; display: block; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--panel-2) 25%, #ececea 50%, var(--panel-2) 75%);
  background-size: 200% 100%;
  box-shadow: 0 18px 0 -2px var(--panel-2);
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; } }
.msg-footer {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 7px; padding: 0 4px; color: var(--text-fainter); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.msg-footer .logo-inline { color: var(--text-faint); }
.receipt-cost { color: var(--text-faint); font-weight: 600; }
.receipt-usage { color: var(--text-fainter); }
/* Token rate card (landing + Usage & billing) */
.rate-card { margin-top: 20px; }
.rate-table-wrap { overflow-x: auto; }
.rate-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rate-table th, .rate-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.rate-table th { color: var(--text-faint); font-weight: 700; white-space: nowrap; }
.rate-table .rate-num { text-align: right; font-weight: 600; }
.rate-table th:nth-child(3), .rate-table th:nth-child(4) { text-align: right; }
.demo-badge {
  background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px;
}
.system-line {
  align-self: center; color: var(--text-soft); font-size: 13px; text-align: center;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  border-radius: 999px; padding: 7px 16px; max-width: 92%;
}
.system-line.error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); border-radius: var(--radius-sm); }
.system-line .btn { margin-left: 10px; }

.composer-wrap { border-top: 1px solid var(--border); padding: 14px 24px 10px; background: var(--bg); }
.picker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 860px; margin: 0 auto 10px; }
.model-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); cursor: pointer; font-weight: 600; color: var(--text-soft);
  box-shadow: var(--shadow-sm);
  transition: color .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.chip.active { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: 0 2px 10px rgba(79, 70, 229, .26); }
.segmented { display: flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg { border: none; background: none; padding: 5px 13px; border-radius: 999px; cursor: pointer; color: var(--text-soft); font-weight: 600; font-size: 13px; transition: background-color .14s ease, color .14s ease, box-shadow .14s ease; }
.seg:hover { color: var(--text); }
.seg.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.more-models {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-sm);
  padding: 7px 10px; max-width: 300px; color: var(--text-soft); cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.more-models:hover { border-color: var(--border-strong); }
.more-models.explicit { border-color: var(--accent-1); color: var(--text); box-shadow: 0 0 0 1px var(--accent-1), var(--shadow-sm); }
.picker-note { max-width: 860px; margin: 0 auto 10px; color: var(--accent-2); font-size: 13px; font-weight: 600; }
.research-confirm {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 860px; margin: 0 auto 10px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: 13px; font-weight: 600;
}
.research-confirm[hidden] { display: none; }
.composer { display: flex; gap: 10px; max-width: 860px; margin: 0 auto; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; max-height: 160px; padding: 13px 16px; line-height: 1.5;
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text); outline: none; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.composer-notice { text-align: center; margin: 10px 0 2px; }

/* ---------- cards / pricing / settings / memory ---------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 20px; }
.card h3 { margin-top: 0; font-size: 17px; }
.billing-notice {
  background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; font-weight: 600;
}
.balance-breakdown p { margin: 6px 0; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.balance-breakdown strong { color: var(--text); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form input { flex: 1; min-width: 220px; margin-top: 0; }
.ledger-list, .memory-list, .provider-list { list-style: none; margin: 0; padding: 0; }
.ledger-list li {
  display: flex; justify-content: space-between; gap: 14px; padding: 11px 2px;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.ledger-list li:last-child { border-bottom: none; }
.ledger-type { font-weight: 600; }
.ledger-meta { color: var(--text-faint); font-size: 12.5px; display: block; font-variant-numeric: tabular-nums; }
.ledger-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger-amount.pos { color: var(--success); }
.ledger-amount.neg { color: var(--text-soft); }
.memory-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px; margin-bottom: 12px;
  transition: box-shadow .15s ease;
}
.memory-list li:hover { box-shadow: var(--shadow-md); }
.memory-fact { white-space: pre-wrap; word-break: break-word; }
.memory-date { color: var(--text-faint); font-size: 12px; display: block; margin-top: 3px; }
.memory-controls { margin-bottom: 20px; }
.memory-toggle { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; cursor: pointer; }
.memory-add { margin-top: 14px; }
.memory-list.memory-off li { opacity: .55; }
.memory-list.memory-off .memory-fact { color: var(--text-soft); }
.settings-dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; margin: 0; }
.settings-dl dt { color: var(--text-faint); font-weight: 600; }
.settings-dl dd { margin: 0; }
.provider-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.provider-list li:last-child { border-bottom: none; }
.provider-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.provider-name .logo-inline { color: var(--text); }
.mode-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; }
.mode-live { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.mode-demo { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; transform: translateX(-105%);
    transition: transform .2s ease; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-block; }
  .scroll-view { padding: 24px 16px 56px; }
  .messages { padding: 20px 12px; }
  .composer-wrap { padding: 10px 12px 8px; }
  .topbar { padding: 12px 14px; }
  .savings-strip { flex-direction: column; }
  .savings-stat + .savings-stat { border-left: none; border-top: 1px solid var(--border); }
}

/* Small phones (~380px): keep the rhythm, tighten the chrome. */
@media (max-width: 480px) {
  .landing-nav { padding: 16px 18px; }
  /* The nav now carries Log in + Sign up beside the lockup — the family
     sub-line yields first so nothing overflows at 390px. */
  .landing-nav .brand-sub { display: none; }
  .auth-view-main { padding: 12px 16px 48px; }
  .landing-main { padding: 4px 16px 48px; }
  .hero { padding: 44px 14px 30px; }
  .hero-sub { font-size: 16px; }
  .fam-chip { padding: 8px 14px; font-size: 14px; }
  .honesty-card { padding: 14px 18px; }
  .auth-card { padding: 22px 18px; }
  .msg { max-width: 96%; }
  .bubble { padding: 11px 14px; }
  .more-models { max-width: 100%; }
  .settings-dl { grid-template-columns: 96px 1fr; }
  .card { padding: 18px; }
  .savings-stat { padding: 16px; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Build Stream 1: folders, search, shares, compare, uploads, prompts, usage, admin ---------- */
.topbar-spacer { flex: 1; }
.mini-btn {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  padding: 3px 6px; border-radius: 6px; font-size: 13px; line-height: 1;
  transition: color .13s ease, background-color .13s ease;
}
.mini-btn:hover { color: var(--text); background: var(--panel-2); }

/* sidebar search + folders */
.side-search input {
  width: 100%; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.side-search input:focus { background: var(--panel); border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }
.side-folders-head { display: flex; align-items: center; justify-content: space-between; }
.folder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.folder-item { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: var(--radius-sm); }
.folder-item:hover { background: var(--panel-2); }
.folder-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.folder-count {
  font-size: 11.5px; font-weight: 700; color: var(--text-faint);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px;
}
.convo-folder-tag {
  font-size: 10.5px; font-weight: 700; color: var(--accent-2); background: var(--panel-3);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
.convo-snippet { display: block; width: 100%; font-size: 12px; color: var(--text-faint); padding: 0 10px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-item { flex-wrap: wrap; }
.convo-menu {
  background: transparent; border: none; color: var(--text-faint); cursor: pointer;
  width: 30px; padding: 4px 0; font-size: 14px; appearance: none; text-align: center;
}
.convo-menu:hover { color: var(--text); }

/* attachments */
.attach-chips { display: flex; gap: 8px; flex-wrap: wrap; max-width: 860px; margin: 0 auto 10px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 8px 5px 12px; font-size: 13px; font-weight: 600; color: var(--text-soft);
  box-shadow: var(--shadow-sm); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-attachments { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; padding: 0 4px; }
.msg-user .msg-attachments { justify-content: flex-end; }
.composer-tool { border-radius: 999px; padding: 9px 12px; box-shadow: none; }

/* prompt library */
.prompt-panel {
  max-width: 860px; margin: 0 auto 10px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 12px 14px; max-height: 320px; overflow-y: auto;
}
.prompt-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.prompt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.prompt-item { display: flex; align-items: center; gap: 6px; }
.prompt-main {
  flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text);
  transition: background-color .13s ease;
}
.prompt-main:hover { background: var(--panel-2); }
.prompt-title { font-weight: 600; }
.prompt-cat { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.prompt-list-page .prompt-item {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 4px 8px 4px 4px;
}
.prompt-save-form { margin-bottom: 10px; }
#promptTemplate {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); resize: vertical;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); outline: none;
}

/* scheduled tasks (Phase 5) */
#taskPrompt {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); resize: vertical;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); outline: none;
}
.task-run-item {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.task-run-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.task-run-status { font-weight: 700; font-size: 13.5px; }
.task-run-done { color: var(--success); }
.task-run-failed { color: var(--danger); }
.task-run-skipped { color: var(--warning); }
.task-run-reason { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }

/* compare mode */
.chip-toggle.active { background: var(--gradient); color: #fff; border-color: transparent; }
.compare-panel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 860px; margin: 0 auto 10px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 10px 14px;
}
.compare-label { font-weight: 700; color: var(--text-soft); }
.compare-models { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.compare-check { font-size: 13.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.compare-check.compare-gated { opacity: .55; cursor: not-allowed; }
.compare-pro-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 999px; padding: 0 5px;
}
.compare-note {
  flex-basis: 100%; font-size: 13px; color: var(--text-soft);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 11px;
}
.compare-col .bubble.compare-gated-note { color: var(--text-soft); font-weight: 600; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; max-width: 1180px; align-self: center; }
.compare-col { display: flex; flex-direction: column; min-width: 0; }
.compare-col-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--text); }
.compare-col .bubble {
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  border-radius: 18px; border-bottom-left-radius: 6px; padding: 13px 15px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.62; flex: 1;
}
.compare-total {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-weight: 700; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 10px 16px; font-variant-numeric: tabular-nums;
}

/* usage & admin stats */
.usage-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.usage-stat {
  flex: 1; min-width: 130px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.usage-stat-value { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.usage-stat-label { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.usage-bars { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin: 6px 0 10px; }
.usage-bar { flex: 1; display: flex; align-items: flex-end; height: 100%; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.usage-bar span { display: block; width: 100%; background: var(--gradient); border-radius: 4px 4px 0 0; min-height: 2px; }
.admin-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.switch-row { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.switch-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent-2); }
.cap-input { width: 110px; padding: 6px 9px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); }

/* public share page */
.share-content { max-width: 880px; margin: 8px auto 28px; display: flex; flex-direction: column; gap: 16px; }
.share-content .msg { max-width: 100%; }
.share-cta { display: flex; margin: 0 auto; }
.share-attribution { text-align: center; color: var(--text-faint); font-size: 13px; margin: 4px 0 0; }

/* referrals */
#refLink { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .compare-grid { grid-template-columns: 1fr; }
  .usage-stat { min-width: calc(50% - 8px); }
}

/* ---------- Stream 2: search, branches, artifacts, export ---------- */
.picker-note-warn { color: var(--warning); }
.context-note {
  max-width: 860px; margin: 0 auto 10px; padding: 7px 14px;
  background: var(--success-bg); border: 1px solid var(--success-border);
  color: var(--success); border-radius: 999px; font-size: 13px; font-weight: 600;
  width: fit-content;
}
.receipt-search { color: var(--accent-2); }

/* rich (artifacts-lite) assistant content */
.bubble.rich { white-space: normal; }
.rich-text p { margin: 0 0 10px; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text h4 { margin: 14px 0 6px; font-size: 15.5px; }
.rich-text h5 { margin: 12px 0 5px; font-size: 14.5px; }
.rich-text ul, .rich-text ol { margin: 4px 0 10px; padding-left: 22px; }
.rich-text li { margin: 2px 0; }
.rich-text code {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 5px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.rich-text a { text-decoration: underline; text-underline-offset: 2px; }

.code-block {
  margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: #fcfcfb;
}
.code-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.code-head .btn { margin-left: auto; }
.code-head .btn + .btn { margin-left: 0; }
.code-lang { font-weight: 700; color: var(--text-soft); text-transform: lowercase; }
.code-note { color: var(--warning); font-weight: 600; }
.code-pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.55; color: var(--text);
}
/* developer API keys (Settings, Phase 5) */
.api-snippet {
  margin: 8px 0; padding: 12px 14px; overflow-x: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; color: var(--text);
}
.tok-k { color: #7c3aed; font-weight: 600; }
.tok-s { color: #047857; }
.tok-c { color: #9aa1ab; font-style: italic; }
.tok-n { color: #b45309; }

/* citations under a searched answer */
.msg-sources { margin-top: 8px; padding: 0 4px; font-size: 13px; color: var(--text-soft); }
.sources-label { font-weight: 700; color: var(--text-faint); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.msg-sources ol { margin: 4px 0 0; padding-left: 20px; }
.msg-sources li { margin: 2px 0; }
.search-suggestions { margin-top: 6px; padding: 0 4px; font-size: 13px; color: var(--text-soft); }
.search-suggestions a { color: var(--accent-2); }
.msg-sources a { word-break: break-all; }

/* per-message actions + re-run branches */
.msg-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 7px; padding: 0 4px;
}
.rerun-select {
  padding: 5px 8px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong); background: var(--panel);
  font-size: 13px; max-width: 180px;
}
.branch-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  background: var(--panel-3); color: var(--accent-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.branch-badge-off { background: var(--panel-2); color: var(--text-faint); }
/* inline editor for editing a user message (edit → truncate → re-run) */
.msg-edit { margin-top: 7px; padding: 0 4px; }
.msg-edit-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 8px 10px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text); font: inherit; font-size: 14px;
}
.msg-edit-note { margin: 6px 0; font-size: 12.5px; color: var(--text-faint); }
.msg-edit-btns { display: flex; gap: 6px; }
.msg-branch { margin-left: 28px; }
.msg-branch .bubble { border-style: dashed; }
.msg-superseded { opacity: .55; }

/* preview panel — fixed right drawer, sandboxed iframe inside */
.preview-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(600px, 94vw); background: var(--panel);
  border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; padding: 14px; gap: 10px;
}
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-actions { display: inline-flex; align-items: center; gap: 6px; }
.preview-scripts-row { font-size: 13.5px; }
.preview-scripts-warn { margin: 0; }
.preview-frame {
  flex: 1; width: 100%; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff;
}

@media (max-width: 640px) {
  .msg-branch { margin-left: 10px; }
  .preview-panel { width: 100vw; }
}

/* ---------- legal pages (/terms, /privacy, /dmca) ---------- */
.legal-main { max-width: 760px; }
.legal-doc {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 40px 44px; margin-top: 24px;
}
.legal-doc h1 { font-size: 30px; margin: 0 0 6px; }
.legal-doc h2 { font-size: 19px; margin: 32px 0 8px; }
.legal-doc h3 { font-size: 15.5px; margin: 22px 0 6px; }
.legal-doc p, .legal-doc li { color: var(--text-soft); font-size: 14.5px; }
.legal-doc p { margin: 8px 0; }
.legal-doc ul { margin: 8px 0; padding-left: 22px; }
.legal-doc li { margin: 4px 0; }
.legal-doc .legal-meta { color: var(--text-faint); font-size: 13px; margin: 0 0 8px; }
.legal-doc .legal-callout {
  background: var(--panel-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 16px 0;
}
.legal-doc .legal-callout p { color: var(--text); margin: 0; }
.legal-nav-links { display: flex; gap: 18px; flex-wrap: wrap; }
.legal-footer-links { display: inline-flex; gap: 14px; }
.legal-footer-links a { color: var(--text-faint); text-decoration: none; }
.legal-footer-links a:hover { color: var(--accent-2); text-decoration: underline; }
.footer-links { display: inline-flex; gap: 14px; }
.footer-links a { color: var(--text-faint); text-decoration: none; font-size: 13px; }
.footer-credit { color: var(--text-faint); font-size: 13px; font-weight: 600; }
.built-with { margin: 0 6px 6px; color: var(--text-faint); font-size: 12px; font-weight: 600; }
.footer-links a:hover { color: var(--accent-2); text-decoration: underline; }
@media (max-width: 640px) {
  .legal-doc { padding: 26px 20px; }
}

/* Generated images (Phase 2) */
.image-card { display: flex; flex-direction: column; gap: 8px; max-width: 512px; }
.image-card-img { width: 100%; max-width: 512px; height: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.image-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bubble.bubble-image { padding: 10px; }

/* Generated videos (Phase 5) */
.video-card { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.video-card-player { width: 100%; max-width: 640px; height: auto; border-radius: 12px; border: 1px solid var(--border); background: #000; }
.video-card-poster { width: 100%; max-width: 640px; height: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.video-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bubble.bubble-video { padding: 10px; }
button.chip[disabled], button.composer-tool[disabled] { opacity: .45; cursor: not-allowed; }

/* Live voice (Stage 5.5, ships dark — rendered only when enabled) */
.voice-live-wrap { padding: 8px 16px 0; }
.voice-live-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.voice-live-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }

/* Voice (Phase 3.1, client-side only) */
.voice-mic-btn.is-listening {
  background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger);
}
.msg-actions .voice-speak-btn.is-speaking {
  background: var(--panel-3); border-color: var(--accent-1); color: var(--accent-2);
}


/* ================= DESIGN PASS 2026-10-21 — premium landing surfaces =================
   Scope: provider spheres, premium rate card, grant calculator, landing
   mini-demo, magnetic buttons, scroll reveals. Everything new is additive —
   the shared chat/sidebar/billing surfaces keep their existing styles. */

/* ---------- scroll reveals (motion-gated) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.fx .reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s ease; }
  body.fx .reveal.in { opacity: 1; transform: none; }
  body.fx .reveal.reveal-late { transition-delay: .12s; }
}

/* ---------- provider spheres ----------
   PEARL 3D GLASS (owner revision R7 2026-10-21, on the LIVE site:
   "I dont like colored spheres... and they are not 3D spheres.. I
   want 3D spheres.. can they all five be in same row?"). R6's flat
   family-colour discs are gone. The balls now imitate the hero
   mascot's own satellite balls (BRAND.md §2) faithfully: a white
   pearl glass sphere — body gradient lit from the upper-left, a
   soft rim shade, one crisp specular highlight, a faint indigo
   bounce on the lower-right rim — with the provider glyph sitting
   ON the ball in its brand colour. NO provider-colour fields:
   every family rides the same pearl ball; only the glyph differs.
   All shading lives INSIDE the ball's edge (every layer is clipped
   by the circle) — no halo, haze or cast shadow outside it.
   Rotation (owner: the R6 hero row "are not rotating") is a gloss
   layer turning inside the ball: a bright specular blob and its
   indigo bounce-counterpart orbit the centre while two sheen
   wedges sweep, so the turn is obvious between frames 2.5s apart
   at hero size. The genuine glyph floats on top, upright and
   unchanged, rendered LAST (BRAND.md audit C2-4 — no overlay ever
   paints over a provider glyph). Idle bob is staggered per sphere
   via --bob-delay; hover lift and mouse-parallax tilt are JS/CSS
   as before; the hero<->card highlight is a border ring; reduced
   motion stops bob and spin outright; JS pauses off-screen
   spheres. One shared system at every size: hero 66px, .sphere-md
   42px, chips .sphere-sm 30px, rate-row .sphere-xs 22px. */
.provider-spheres { display: flex; gap: clamp(4px, 1.8vw, 24px); justify-content: center; flex-wrap: wrap; margin: 6px 0 30px; }
/* One row of five at desktop (owner R7: the live strip wrapped 4+1
   with Llama alone below). At >=1024px the row never wraps — the
   five items share the width equally and captions wrap to two
   lines instead of pushing a ball onto its own row. Below that,
   the balls shrink before the row is allowed to wrap. */
@media (min-width: 1024px) {
  .provider-spheres { flex-wrap: nowrap; gap: 14px; }
  .provider-spheres .sphere-item { flex: 1 1 0; min-width: 0; }
  .provider-spheres .sphere-caption { white-space: normal; text-wrap: balance; }
}
@media (max-width: 1023px) {
  .provider-spheres { gap: 8px; }
  .provider-spheres .sphere-caption { white-space: normal; }
  .sphere-item .sphere { width: 56px; height: 56px; }
  .sphere-item .sphere-glyph svg { width: 26px; height: 26px; }
}
.sphere-item {
  background: none; border: none; cursor: pointer; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-radius: var(--radius);
  transition: background-color .2s ease;
}
.sphere-item:hover, .sphere-item:focus-visible { background: rgba(99, 102, 241, .06); }
.sphere {
  position: relative; display: inline-block; width: 66px; height: 66px; flex-shrink: 0;
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease;
}
.sphere-bob { position: absolute; inset: 0; animation: sphere-bob 7s ease-in-out infinite; animation-delay: var(--bob-delay, 0s); }
@keyframes sphere-bob { 0%, 100% { transform: translateY(-3.5px); } 50% { transform: translateY(3.5px); } }
.sphere-body {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  /* Pearl glass body (R7), translated layer-for-layer from the
     mascot's SVG ball (ballBody/ballShade/ballSpec + the indigo
     bounce crescent): specular highlight upper-left, indigo bounce
     lower-right, rim shade, and the body gradient lit from the
     upper-left — every layer inside the circle. The 1px stroke is
     the mascot ball's own outline (#9AA1B8 at low alpha). */
  background:
    radial-gradient(ellipse 42% 30% at 33% 27%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .40) 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 58% 44% at 78% 84%, rgba(165, 180, 252, .32), rgba(165, 180, 252, 0) 70%),
    radial-gradient(circle at 50% 50%, rgba(20, 24, 60, 0) 62%, rgba(20, 24, 60, .05) 85%, rgba(20, 24, 60, .11) 100%),
    radial-gradient(circle at 35% 30%, #ffffff 0%, #fbfcff 30%, #f4f5fa 55%, #c9cedd 80%, #aeb4c8 100%);
  border: 1px solid rgba(154, 161, 184, .45);
  box-shadow: none;
}
/* Rotating gloss (R7 — the turn must be VISIBLE): an oversized
   layer clipped inside the ball rotates continuously while the
   glyph above it never moves. Riding on the layer are a bright
   specular blob (::before) and a soft indigo bounce (::after)
   set opposite each other, both orbiting the centre at ~0.6 of
   the radius, plus two faint conic sheen wedges sweeping — at
   the per-family paces below (12–20s per turn) the gloss has
   clearly travelled between frames 2.5s apart. All of it is
   light, never shade, and none of it crosses the ball's edge.
   Rotation is transform only (compositor-friendly); JS pauses it
   for off-screen spheres (.anim-paused via IntersectionObserver)
   and reduced motion stops it outright. */
.sphere-surface {
  position: absolute; inset: -45%; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, .34) 42deg,
    rgba(255, 255, 255, 0) 100deg,
    rgba(255, 255, 255, 0) 180deg,
    rgba(255, 255, 255, .20) 228deg,
    rgba(255, 255, 255, 0) 282deg,
    rgba(255, 255, 255, 0) 360deg);
  animation: sphere-spin 16s linear infinite;
  will-change: transform;
}
.sphere-surface::before {
  content: ""; position: absolute; left: 40%; top: 24%;
  width: 20%; height: 20%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, 0) 72%);
}
.sphere-surface::after {
  content: ""; position: absolute; left: 38%; top: 54%;
  width: 24%; height: 24%; border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 180, 252, .50) 0%, rgba(165, 180, 252, 0) 70%);
}
@keyframes sphere-spin { to { transform: rotate(360deg); } }
.sphere-item:hover .sphere, .sphere-item:focus-visible .sphere { transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.sphere-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.sphere-glyph svg { width: 30px; height: 30px; }
/* No per-family fields (R7): every family rides the SAME pearl
   ball — the family's identity is its glyph alone, in its brand
   colour, exactly like the mascot's satellite balls. */
/* Rotation pace and direction vary per family (applies at all sizes). */
.sphere-openai .sphere-surface { animation-duration: 14s; }
.sphere-anthropic .sphere-surface { animation-duration: 18s; animation-direction: reverse; }
.sphere-google .sphere-surface { animation-duration: 12s; }
.sphere-xai .sphere-surface { animation-duration: 20s; animation-direction: reverse; }
.sphere-meta .sphere-surface { animation-duration: 16s; }
/* Mini spheres (rate-card chips + model rows): the same pearl
   ball, the same rotating gloss, no bob — one treatment at every
   size, so the minis need no body rules of their own (R7). */
.sphere-sm { width: 30px; height: 30px; }
.sphere-sm .sphere-glyph svg { width: 15px; height: 15px; }
.sphere-xs { width: 22px; height: 22px; }
.sphere-xs .sphere-glyph svg { width: 12px; height: 12px; }
.sphere-sm .sphere-bob, .sphere-xs .sphere-bob { animation: none; }
/* JS toggles this on off-screen spheres (and on tab-hide) so ~20
   rotating layers never cost frames nobody is looking at. */
.anim-paused { animation-play-state: paused !important; }
body.tab-hidden .sphere-surface, body.tab-hidden .sphere-bob { animation-play-state: paused !important; }
.sphere-name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--text); }
.sphere-caption { font-size: 12px; color: var(--text-faint); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Link highlight (hero<->card): a 3px border ring — drawn as a
   line so the body keeps NO box-shadow in any state (kept in R7). */
.sphere-item.sphere-hl .sphere-body { border: 3px solid rgba(99, 102, 241, .55); }
@media (prefers-reduced-motion: reduce) {
  .sphere-bob { animation: none; }
  .sphere-surface { animation: none; }
}

/* ---------- "Watch it work" film (below the hero) ---------- */
/* Light glass frame in the claim section's own language — gradient
   border, translucent white body, no dark panel and no cast shadow
   on the frame. The player keeps the film's 16:9 stage at every
   width; the play pill is glass over the poster's lower edge. */
.watch-film { margin-top: 56px; text-align: center; }
.watch-film h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.026em; margin: 0 0 8px; }
.film-sub { color: var(--text-soft); max-width: 640px; margin: 0 auto 22px; }
.film-frame {
  max-width: 880px; margin: 0 auto; border-radius: 22px; padding: 10px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .52)) padding-box,
    linear-gradient(145deg, #d9dffa, #f2eee4 48%, #e6e1d3) border-box;
}
.film-player { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #eceef5; }
.film-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-player video[hidden] { display: none; }
.film-play {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: #1f2430; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  transition: background-color .15s ease;
}
.film-play:hover { background: rgba(255, 255, 255, .96); }
.film-play[hidden] { display: none; }
.film-play svg { display: block; flex: none; }
@media (max-width: 480px) {
  .watch-film { margin-top: 44px; }
  .film-frame { padding: 6px; border-radius: 18px; }
  .film-player { border-radius: 12px; }
  .film-play { bottom: 10px; font-size: 13px; padding: 8px 14px; }
}

/* ---------- landing mini-demo ---------- */
.landing-demo { margin-top: 52px; text-align: center; }
.landing-demo h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.026em; margin: 0 0 8px; }
.demo-sub { color: var(--text-soft); max-width: 620px; margin: 0 auto 22px; }
.demo-form { display: flex; gap: 10px; max-width: 640px; margin: 0 auto 12px; }
.demo-form input {
  flex: 1; padding: 13px 16px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text); outline: none; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.demo-form input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }
.demo-suggestions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; color: var(--text-faint); font-size: 13.5px; margin-bottom: 22px; }
.demo-chip {
  border: 1px solid var(--border); background: var(--panel); border-radius: 999px; padding: 6px 14px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-soft); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.demo-chip:hover { border-color: var(--accent-1); color: var(--text); box-shadow: var(--shadow-md); }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; margin-top: 8px; }
@media (max-width: 720px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-col { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; }
.demo-col-head { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--border); font-weight: 800; }
.demo-col-head .logo-inline svg { width: 18px; height: 18px; }
.demo-col-body { padding: 16px 18px; color: var(--text-soft); white-space: pre-wrap; word-break: break-word; flex: 1; font-size: 14.5px; }
.demo-receipt { border-top: 1px dashed var(--border-strong); margin: 0; padding: 11px 18px 13px; font-size: 13px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.demo-receipt strong { color: var(--text); }
.demo-receipt .demo-demo-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.demo-note { margin-top: 16px; }
.demo-loading .demo-col-body { color: var(--text-faint); }

/* ---------- premium pricing panel (contained LIGHT surface) ----------
   Owner revision 2026-10-21: the whole pricing flow — spheres row,
   rate card, sample receipt, calculator — reads as one light,
   premium section. White/translucent glass, soft provider-tinted
   gradients, definition from borders and glow only: no dark panel
   anywhere in the design-pass surfaces, and no outer drop shadows
   on the panel or its cards. */
.pricing-light {
  margin-top: 32px; border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 40px);
  background:
    radial-gradient(900px 420px at 12% -60px, rgba(124, 108, 255, .13), rgba(124, 108, 255, 0) 60%),
    radial-gradient(760px 380px at 92% 108%, rgba(66, 133, 244, .09), rgba(66, 133, 244, 0) 60%),
    radial-gradient(520px 300px at 78% 8%, rgba(217, 119, 87, .06), rgba(217, 119, 87, 0) 60%),
    linear-gradient(180deg, #fdfdff, #f0f1f8);
  border: 1px solid rgba(17, 24, 39, .08);
  box-shadow: none;
  color: var(--text);
}
.pricing-light h3 { color: var(--text); }
.pricing-light .form-note { color: var(--text-faint); }
.pricing-light .form-note a { color: var(--accent-1); }
.rate-card-premium {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(17, 24, 39, .09);
  box-shadow: none;
  backdrop-filter: blur(6px);
  margin-top: 0;
}
.rate-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rate-head h3 { margin: 0; }
.rate-unit-toggle { background: rgba(255, 255, 255, .55); border-color: rgba(17, 24, 39, .10); }
.rate-unit-toggle .seg { color: var(--text-soft); }
.rate-unit-toggle .seg:hover { color: var(--text); }
.rate-unit-toggle .seg.active { background: #ffffff; color: var(--text); box-shadow: var(--shadow-sm); }
.rate-tools { margin: 18px 0 6px; }
.rate-provider-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rate-pchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 7px;
  border-radius: 999px; border: 1px solid rgba(17, 24, 39, .13); background: rgba(255, 255, 255, .65);
  color: var(--text-soft); font-weight: 700; font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.rate-pchip:hover { color: var(--text); border-color: rgba(17, 24, 39, .28); }
.rate-pchip.active { color: var(--text); border-color: var(--accent-1); background: rgba(99, 102, 241, .10); box-shadow: 0 0 0 1px var(--accent-1); }
.rate-tool-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rate-tier-tabs { background: rgba(255, 255, 255, .55); border-color: rgba(17, 24, 39, .10); }
.rate-tier-tabs .seg { color: var(--text-soft); }
.rate-tier-tabs .seg:hover { color: var(--text); }
.rate-tier-tabs .seg.active { background: #ffffff; color: var(--text); box-shadow: var(--shadow-sm); }
.rate-search {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(17, 24, 39, .14);
  background: rgba(255, 255, 255, .75); color: var(--text); min-width: 170px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rate-search::placeholder { color: var(--text-fainter); }
.rate-search:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.rate-sort {
  padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(17, 24, 39, .14);
  background: rgba(255, 255, 255, .75); color: var(--text-soft); font-weight: 600; cursor: pointer; outline: none;
}
.rate-sort option { color: #111827; }
.rate-layout { display: grid; grid-template-columns: minmax(0, 1fr) 302px; gap: 24px; align-items: start; margin-top: 14px; }
@media (max-width: 980px) { .rate-layout { grid-template-columns: 1fr; } }
.pricing-light .rate-table th { color: var(--text-faint); border-bottom-color: rgba(17, 24, 39, .10); }
.pricing-light .rate-table td { border-bottom-color: rgba(17, 24, 39, .07); color: var(--text); }
.pricing-light .rate-table tr:last-child td { border-bottom: none; }
.pricing-light .rate-table .rate-num { color: var(--text); }
/* Relative cost bars: each model's OUTPUT rate vs the most expensive
   flagship output — a glance at value without reading a number. */
.rate-model-name { font-weight: 700; color: inherit; }
.rate-bar { display: block; height: 4px; background: #e7e7e4; border-radius: 99px; margin-top: 7px; overflow: hidden; }
.rate-bar-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); border-radius: 99px; transition: width .6s ease; }
.pricing-light .rate-bar { background: rgba(17, 24, 39, .08); }
/* Metallic tier badges + best-value marker. */
.tier-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.tier-flagship { background: linear-gradient(135deg, #f3d97b, #c9a227); color: #241b04; box-shadow: 0 1px 4px rgba(201, 162, 39, .4); }
.tier-mid { background: linear-gradient(135deg, #f1f3f6, #aeb6c2); color: #1f2937; box-shadow: 0 1px 4px rgba(174, 182, 194, .35); }
.tier-small { background: linear-gradient(135deg, #f0c298, #b97f4e); color: #2b1708; box-shadow: 0 1px 4px rgba(185, 127, 78, .4); }
.best-value {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #7c5e10; border: 1px solid rgba(201, 162, 39, .5); background: rgba(243, 217, 123, .28);
  border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: 2px; white-space: nowrap;
}
/* Model cell: the provider's mini rotating sphere beside the name. */
.rate-model { display: inline-flex; align-items: center; gap: 8px; }
/* Row highlight for the hero↔card link (and the provider-chip hover). */
.pricing-light .rate-table tr.row-hl td { background: rgba(99, 102, 241, .10); }
.rate-table tr.row-hl td { background: rgba(99, 102, 241, .08); }
.rate-table tr.row-hl .rate-model-name { color: var(--accent-2); }
.pricing-light .rate-table tr.row-hl .rate-model-name { color: var(--accent-1); }
.rate-empty { color: var(--text-faint); font-size: 14px; margin: 18px 0 6px; text-align: center; }
.rate-clear { background: none; border: none; color: var(--accent-1); font-weight: 700; cursor: pointer; text-decoration: underline; }
/* Sample receipt: the transparency differentiator as a design object. */
.sample-receipt {
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(17, 24, 39, .09);
  border-radius: var(--radius); padding: 18px; font-size: 13.5px; color: var(--text-soft);
  font-variant-numeric: tabular-nums; box-shadow: none;
}
.sample-receipt-tag { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-1); }
.sample-receipt-wait { margin: 0; color: var(--text-fainter); }
.sample-rcpt-model { font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 7px; }
.sample-rcpt-model .logo-inline svg { width: 15px; height: 15px; }
.sample-rcpt-q { color: var(--text-faint); font-style: italic; margin: 6px 0 10px; font-size: 13px; }
.sample-rcpt-lines { margin: 0 0 10px; }
.sample-rcpt-lines div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.sample-rcpt-total { display: flex; justify-content: space-between; border-top: 1px solid rgba(17, 24, 39, .12); padding-top: 8px; font-weight: 800; color: var(--text); }
.sample-receipt-note { margin: 12px 0 0; font-size: 12px; color: var(--text-fainter); line-height: 1.5; }
/* Grant-lasts calculator */
.calc-card {
  margin-top: 24px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(17, 24, 39, .09);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); backdrop-filter: blur(6px);
  box-shadow: none;
}
.calc-card h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.calc-sub { margin: 0 0 22px; color: var(--text-faint); font-size: 14px; }
.calc-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 20px; }
@media (max-width: 860px) { .calc-controls { grid-template-columns: 1fr; } }
.calc-control { display: flex; flex-direction: column; gap: 10px; }
.calc-control-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 13.5px; color: var(--text-soft); }
.calc-control-head output { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-control input[type="range"] { width: 100%; accent-color: #6366f1; height: 28px; cursor: pointer; }
.calc-len-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-fainter); font-weight: 600; }
.calc-mode { background: rgba(255, 255, 255, .55); border-color: rgba(17, 24, 39, .10); }
.calc-mode .seg { color: var(--text-soft); }
.calc-mode .seg:hover { color: var(--text); }
.calc-mode .seg.active { background: #ffffff; color: var(--text); box-shadow: var(--shadow-sm); }
.calc-result { font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; letter-spacing: -.015em; color: var(--text); margin: 4px 0 6px; line-height: 1.45; }
.calc-result .calc-hl { background: linear-gradient(135deg, #6366f1, #4338ca); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.calc-detail { color: var(--text-faint); font-size: 14px; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.calc-foot { margin-top: 14px; }
/* Count-up: numbers animate to their target when scrolled into view. */
[data-countup], [data-countup-num], [data-stat-num] { font-variant-numeric: tabular-nums; }

/* ---------- claim/stats section — Option B "Glass" (owner pick
   2026-10-21; reference launch/section-options/option-b.html) ----------
   Light-glass cards and tiles with soft gradient borders, replacing
   the old promise cards + claim paragraph + savings strip. Geometry
   and colours follow the approved mockup; the switching card's five
   balls (R8 — all families) are the rotating-sphere system at the
   .sphere-md size, the metering card's orbit-O is the wordmark mark
   animated with its own .wm-orbit spin (R8), and the stat bars
   share the count-up observer (data-bar-width). */
.sphere-md { width: 42px; height: 42px; }
.sphere-md .sphere-glyph svg { width: 22px; height: 22px; }
/* .sphere-md .sphere-body needs no rule of its own: the pearl R7
   treatment is shared at every size. */
.sphere-md .sphere-bob { animation: none; }
.claim-glass { margin-top: 20px; }
.cg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cg-card {
  border-radius: 22px; padding: 32px 34px 30px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .52)) padding-box,
    linear-gradient(145deg, #d9dffa, #f2eee4 48%, #e6e1d3) border-box;
}
.cg-accent { height: 58px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.cg-card h3 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--text); margin: 0; }
.cg-card p { font-size: 15.5px; line-height: 1.62; color: #4b5563; margin: 10px 0 0; }
.cg-claim { margin: 54px auto 0; max-width: 880px; text-align: center; font-size: 24.5px; font-weight: 560; letter-spacing: -.02em; line-height: 1.42; color: #1f2430; }
.cg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.cg-tile {
  border-radius: 20px; padding: 28px 28px 24px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .52)) padding-box,
    linear-gradient(150deg, #d9dffa, #f2eee4 55%, #e6e1d3) border-box;
}
.cg-big { font-size: 41px; font-weight: 720; letter-spacing: -.035em; line-height: 1; color: var(--text); }
.cg-big .cg-unit { font-size: 17px; font-weight: 550; color: #6b7280; letter-spacing: -.01em; }
.cg-tile p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: #6b7280; min-height: 42px; }
.cg-bar { margin-top: 16px; height: 8px; border-radius: 99px; background: #eae7de; overflow: hidden; }
.cg-bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .8s ease; }
.cg-bar-auto i { background: linear-gradient(90deg, #6366f1, #4f46e5); }
.cg-bar-flag i { background: linear-gradient(90deg, #c3c9d4, #a7aebc); }
.cg-barlab { margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: #8a8f98; text-align: right; }
.cg-freenote { margin-top: 16px; height: 8px; }
.cg-freenote span { display: inline-block; transform: translateY(-7px); font-size: 12px; font-weight: 650; color: #4f46e5; background: #eef0fe; border: 1px solid #dde1fb; border-radius: 99px; padding: 3px 10px; }
.cg-foot { margin-top: 34px; text-align: center; font-size: 12.5px; line-height: 1.6; color: #a3aab5; }
@media (max-width: 760px) {
  .cg-cards, .cg-tiles { grid-template-columns: 1fr; }
  .cg-claim { font-size: 21px; }
  .cg-card { padding: 26px 24px 24px; }
}
/* Five .sphere-md balls in the switching card's accent row (R8):
   5×42 + 4×10 = 250px fits the card at desktop and phone widths;
   on the narrowest phones the balls shrink a step so the row never
   wraps or crowds the headline. */
@media (max-width: 480px) {
  .cg-accent { gap: 8px; }
  .cg-accent .sphere-md { width: 36px; height: 36px; }
  .cg-accent .sphere-md .sphere-glyph svg { width: 19px; height: 19px; }
}
/* Magnetic buttons are JS-driven (transform), with a smooth reset. */
.btn-magnet-reset { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .15s ease, background-color .15s ease, filter .15s ease !important; }
@media (max-width: 480px) {
  .pricing-light { padding: 18px 14px; border-radius: var(--radius); }
  .rate-layout { gap: 16px; }
  /* Scoped to the hero items: the unscoped rules used to also inflate
     the .sphere-sm/.sphere-xs minis in the rate card on phones. */
  .sphere-item .sphere { width: 56px; height: 56px; }
  .sphere-item .sphere-glyph svg { width: 26px; height: 26px; }
  .provider-spheres { gap: 4px; }
  .demo-form { flex-direction: column; }
}

/* ---------- Premium pass: app shell (2026-10-21) ----------
   Owner-approved polish of the signed-in shell, FLAT ONLY: no
   shadows are added or relied on anywhere in this section — surface
   separation comes from three flat tint steps (sidebar tint, app
   canvas, white cards) plus the existing hairlines. Copy, brand
   marks and the pearl spheres are untouched. */

/* Line-icon system: one weight, currentColor, sized per context. */
.ic { width: 18px; height: 18px; flex: none; display: block; }
.ic-slot { display: inline-flex; flex: none; }
.btn-ic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ic .ic { width: 16px; height: 16px; }
.mini-btn .ic { width: 14px; height: 14px; }
.chip .ic { width: 15px; height: 15px; }
.composer-tool .ic { width: 18px; height: 18px; }
.menu-btn .ic { width: 19px; height: 19px; }
.voice-mic-btn.is-listening { color: var(--danger); }

/* Sidebar surface: its own flat tint, roomier rows, near-white
   flat hovers, white inset pieces (search, balance card, counts). */
.sidebar { background: var(--side-bg); }
.app-shell { background: var(--app-bg); }
.app-shell .main-pane { background: var(--app-bg); }
.app-shell .composer-wrap { background: var(--app-bg); }
.sidebar .side-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.sidebar .side-link:hover { background: var(--side-hover); }
.sidebar .convo-item:hover, .sidebar .folder-item:hover { background: var(--side-hover); }
.sidebar .balance-card { background: var(--panel); }
.sidebar .folder-count { background: var(--panel); }
.side-search { position: relative; }
.side-search .ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-faint); pointer-events: none;
}
.sidebar .side-search input { background: var(--panel); padding-left: 37px; }
.balance-head { display: flex; align-items: flex-start; gap: 8px; }
.balance-head .ic { width: 18px; height: 18px; color: var(--accent-2); margin-top: 2px; }
.balance-head .balance-text { flex: 1; min-width: 0; }
.folder-name { display: flex; align-items: center; gap: 7px; }
.folder-name .ic { width: 16px; height: 16px; color: var(--text-faint); }
.convo-open { display: flex; align-items: center; gap: 6px; }
.convo-open .ic { width: 13px; height: 13px; color: var(--accent-2); }
.convo-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-persona { display: inline-flex; align-items: center; gap: 6px; }
.topbar-persona .ic { width: 15px; height: 15px; }

/* Wordmark subline in the sidebar: the deliberate break at the dash
   (markup) plus a touch more leading so the two lines read as a
   designed lockup, not a wrap accident. The landing lockup is
   untouched and stays on one line. */
.sidebar .brand-sub { line-height: 1.5; }

/* Cards + type: flat tint separation (the app canvas now sits one
   step below the white cards, so the hairline alone carries the
   edge), stronger card headings, heavier key figures. */
.app-shell .card { box-shadow: none; }
.app-shell .card h3 { font-size: 18px; font-weight: 700; }
.rate-table .rate-num { font-weight: 700; }
.balance-breakdown strong { font-weight: 700; }

/* Empty states: the orbit mark at low key + the existing guidance
   line, composed rather than bare. */
.empty-orbit { display: block; width: 54px; height: 54px; margin: 0 auto 16px; opacity: .5; }
#chatEmpty h2 { margin-top: 0; }
.convo-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 18px 8px 10px;
}
.convo-empty .empty-orbit { width: 26px; height: 26px; margin: 0; }
.convo-empty p { margin: 0; }

/* ============ MultiO Code (Phase 1) — flat, premium-system styling ============ */
.code-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 0; flex: 1; }
.code-rail { border-right: 1px solid var(--border); padding: 24px 20px; overflow-y: auto; background: var(--app-bg); }
.code-rail .view-title { margin-bottom: 4px; }
.code-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.code-rail-block { margin-top: 22px; }
.code-block-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; }
.code-conn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); margin-bottom: 8px; }
.code-conn-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.code-conn-main strong { font-size: 13.5px; }
.code-conn-sub { display: block; font-size: 11.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-form { margin-bottom: 10px; }
.code-field { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 10px; }
.code-field select, .code-field input { display: block; width: 100%; margin-top: 6px; }
.code-repo-list, .code-session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.code-repo-list { max-height: 260px; overflow-y: auto; }
.code-repo-item, .code-session-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); font: inherit; cursor: pointer; }
.code-repo-item:hover, .code-session-item:hover { background: var(--panel-2); }
.code-session-item.active { background: var(--panel-3); border-color: var(--accent-1); }
.code-repo-name, .code-session-name { font-size: 13px; font-weight: 600; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); overflow-wrap: anywhere; }
.code-repo-bits, .code-session-sub { font-size: 11.5px; color: var(--text-soft); }
.code-session-list li { display: flex; align-items: center; gap: 8px; }
.code-session-list li .code-session-item { flex: 1; min-width: 0; }
.code-session-pr { font-size: 12px; font-weight: 600; color: var(--accent-2); text-decoration: none; white-space: nowrap; }
.code-session-pr:hover { text-decoration: underline; }
.code-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--panel-2); color: var(--text-soft); border: 1px solid var(--border); white-space: nowrap; }
.code-badge-active, .code-badge-applied, .code-badge-approved { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.code-badge-proposed, .code-badge-edited { background: var(--panel-3); border-color: var(--accent-1); color: var(--accent-2); }
.code-badge-rejected, .code-badge-failed { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.code-badge-stale { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.code-badge-kind { text-transform: lowercase; }
.code-empty { margin: auto; max-width: 460px; text-align: center; padding: 32px 24px; }
.code-empty h2 { margin-top: 0; font-size: 20px; letter-spacing: -.02em; }
.code-empty p { color: var(--text-soft); line-height: 1.6; }
.code-session-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.code-session-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 18px; padding: 18px 24px 12px; border-bottom: 1px solid var(--border); }
.code-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.code-head-title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.code-head-bits { font-size: 12.5px; color: var(--text-soft); }
.code-head-meter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.code-usage { font-size: 12.5px; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.code-pr-link { font-size: 12.5px; font-weight: 700; color: var(--accent-2); text-decoration: none; }
.code-pr-link:hover { text-decoration: underline; }
.code-head-error { flex-basis: 100%; margin: 4px 0 0; }
.code-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; flex: 1; min-height: 0; }
.code-messages { overflow-y: auto; }
.code-transcript-empty { padding: 8px 4px; }
.code-review { border-left: 1px solid var(--border); overflow-y: auto; padding: 18px 18px 28px; background: var(--app-bg); display: flex; flex-direction: column; gap: 14px; }
.code-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.code-review-head h3 { margin: 0; font-size: 15px; }
.code-review-count { font-size: 12px; color: var(--text-faint); }
.code-pr-card { border: 1px solid var(--success-border); background: var(--success-bg); border-radius: var(--radius-md); padding: 12px 14px; }
.code-pr-title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.code-pr-title svg { width: 15px; height: 15px; }
.code-pr-url { display: block; font-size: 12.5px; color: var(--accent-2); overflow-wrap: anywhere; margin: 4px 0; }
.code-pr-card .form-note { margin: 0; }
.proposal-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); padding: 12px 14px; }
.proposal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.proposal-path { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; flex: 1; min-width: 140px; }
.proposal-counts { display: inline-flex; gap: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.diff-add-n { color: var(--success); }
.diff-del-n { color: var(--danger); }
.proposal-badges { display: inline-flex; gap: 6px; }
.proposal-summary { font-size: 13px; color: var(--text-soft); line-height: 1.55; margin: 8px 0 0; overflow-wrap: anywhere; }
.proposal-note { font-size: 12.5px; line-height: 1.55; color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 10px 0 0; }
.proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.proposal-editor { margin-top: 10px; }
.proposal-edit-area { width: 100%; min-height: 120px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px; background: var(--panel); color: var(--text); resize: vertical; }
.code-diff { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; line-height: 1.55; }
.diff-line { display: grid; grid-template-columns: 40px 40px minmax(max-content, 1fr); }
.diff-no { text-align: right; padding: 0 8px; color: var(--text-fainter); font-variant-numeric: tabular-nums; user-select: none; border-right: 1px solid var(--border); }
.diff-text { padding: 0 12px; white-space: pre; }
.diff-file { background: var(--panel-2); font-weight: 700; }
.diff-hunk { background: var(--panel-3); color: var(--accent-2); }
.diff-add { background: #e6f4ea; }
.diff-del { background: #fdecea; }
.diff-note { color: var(--text-faint); font-style: italic; }
.code-apply-bar { border-top: 1px solid var(--border); padding-top: 12px; }
.code-apply-bar .form-note { margin: 8px 0 0; }
.tool-chips-wrap { margin-top: 10px; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--text-soft); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.tool-chip svg { width: 12px; height: 12px; }
.tool-chip:hover { background: var(--panel-3); }
.tool-chip-detail { margin-top: 8px; font-size: 12px; color: var(--text-soft); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.code-proposals-link { margin-top: 8px; padding: 0; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-2); cursor: pointer; }
.code-proposals-link:hover { text-decoration: underline; }
.code-composer { border-top: 1px solid var(--border); padding: 14px 24px 18px; background: var(--panel); }
.code-composer-row { display: flex; gap: 10px; align-items: flex-end; max-width: 1080px; margin: 0 auto; }
.code-composer-input { flex: 1; min-height: 44px; max-height: 140px; resize: vertical; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 11px 14px; font: inherit; background: var(--panel); color: var(--text); }
.code-composer-side { display: flex; flex-direction: column; gap: 8px; width: 180px; flex: none; }
.code-model-select { height: 44px; width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; padding: 0 8px; }
.code-composer-btns { display: flex; gap: 8px; }
.code-composer-btns .btn { flex: 1; }
.code-composer .form-note { max-width: 1080px; margin: 8px auto 0; }
.code-composer .form-error { max-width: 1080px; margin: 0 auto 8px; }
.code-audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-soft); }
.code-settings-actions { margin-top: 10px; }
@media (max-width: 1180px) {
  .code-body { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 860px) {
  .code-layout { display: flex; flex-direction: column; overflow-y: auto; }
  .code-rail { border-right: none; border-bottom: 1px solid var(--border); overflow-y: visible; flex: none; }
  .code-main { flex: none; }
  .code-session-pane { flex: none; }
  .code-body { display: flex; flex-direction: column; flex: none; }
  .code-review { border-left: none; border-top: 1px solid var(--border); overflow-y: visible; min-width: 0; }
  .code-messages { overflow-y: visible; min-width: 0; }
  .code-composer-row { flex-wrap: wrap; }
  .code-composer-side { width: auto; flex: 1; min-width: 150px; }
  .code-session-head { padding: 14px 16px 10px; }
  .code-composer { padding: 12px 16px 16px; }
}