/* ===========================================================================
   LearnLoop studio, design system v2 "Neon Night"
   Dark-first, vibrant accents, gradient brand. No build step, no CDN.
   =========================================================================== */

:root, [data-theme="dark"] {
  --bg:        #0a0c14;
  --bg-glow:   radial-gradient(1200px 700px at 85% -10%, rgba(124,58,237,.18), transparent 60%),
               radial-gradient(900px 600px at -10% 110%, rgba(6,182,212,.14), transparent 55%);
  --panel:     #12141f;
  --panel-2:   #171a28;
  --panel-3:   #202437;
  --ink:       #eef0fb;
  --ink-soft:  #a9aec4;
  --ink-faint: #6f7590;
  --line:      #262b40;
  --line-soft: #1e2233;
  --brand:     #8b5cf6;
  --brand-2:   #06b6d4;
  --brand-ink: #b39dfc;
  --brand-grad: linear-gradient(120deg, #a855f7, #6366f1 55%, #06b6d4);
  --good:      #34d399;
  --bad:       #fb7185;
  --warn:      #fbbf24;
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 50px rgba(0,0,0,.55);
  --radius:    14px;
  --radius-sm: 9px;
  --mono: "JetBrains Mono","Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace;
  --sans: system-ui,"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;

  /* agent accents, vibrant on dark */
  --c-coordinator: #818cf8;
  --c-critic:      #fb7185;
  --c-planner:     #34d399;
  --c-motivator:   #fbbf24;
  --c-debugger:    #c084fc;
  --c-solver:      #38bdf8;
  --c-tutor:       #a78bfa;
}

[data-theme="light"] {
  --bg:        #f1f2f8;
  --bg-glow:   radial-gradient(1200px 700px at 85% -10%, rgba(124,58,237,.08), transparent 60%),
               radial-gradient(900px 600px at -10% 110%, rgba(6,182,212,.07), transparent 55%);
  --panel:     #ffffff;
  --panel-2:   #f7f8fc;
  --panel-3:   #eceef6;
  --ink:       #171927;
  --ink-soft:  #5b6070;
  --ink-faint: #8a8fa0;
  --line:      #e2e4ee;
  --line-soft: #ecedf5;
  --brand:     #7c3aed;
  --brand-2:   #0891b2;
  --brand-ink: #6d28d9;
  --good:      #0f9d6f;
  --bad:       #e0444b;
  --warn:      #d97706;
  --shadow:    0 1px 2px rgba(20,22,30,.04), 0 8px 24px rgba(20,22,30,.06);
  --shadow-lg: 0 12px 40px rgba(20,22,30,.16);
  --c-coordinator: #6366f1;
  --c-critic:      #e11d48;
  --c-planner:     #059669;
  --c-motivator:   #d97706;
  --c-debugger:    #9333ea;
  --c-solver:      #0284c7;
  --c-tutor:       #7c3aed;
}

/* ---- Custom themes (Settings → Appearance). Each inherits the dark base and
   re-tints the surfaces + brand; agent accents stay readable. ---- */
[data-theme="anime"] {          /* Anime Sakura, cherry-blossom night */
  --bg:        #170f18;
  --bg-glow:   radial-gradient(1200px 700px at 85% -10%, rgba(255,121,176,.22), transparent 60%),
               radial-gradient(900px 600px at -10% 110%, rgba(255,209,102,.12), transparent 55%);
  --panel:     #241a26;
  --panel-2:   #2b1f2e;
  --panel-3:   #382a3c;
  --ink:       #fdeef6;
  --ink-soft:  #d3b3c6;
  --ink-faint: #96718a;
  --line:      #43303f;
  --line-soft: #382a38;
  --brand:     #ff79b0;
  --brand-2:   #ffd166;
  --brand-ink: #ff9cc4;
  --brand-grad: linear-gradient(120deg, #ff79b0, #ff5c8a 55%, #ffd166);
}
[data-theme="pandas"] {         /* Little Pandas, bamboo & fur */
  --bg:        #10160f;
  --bg-glow:   radial-gradient(1200px 700px at 85% -10%, rgba(122,199,79,.16), transparent 60%),
               radial-gradient(900px 600px at -10% 110%, rgba(244,241,232,.06), transparent 55%);
  --panel:     #1c241c;
  --panel-2:   #222b21;
  --panel-3:   #2c372b;
  --ink:       #f4f1e8;
  --ink-soft:  #bcc5b4;
  --ink-faint: #7f8a78;
  --line:      #35402f;
  --line-soft: #2b342a;
  --brand:     #7ac74f;
  --brand-2:   #f4f1e8;
  --brand-ink: #a3dd82;
  --brand-grad: linear-gradient(120deg, #7ac74f, #4f9d3a 55%, #d9e8c5);
}
[data-theme="avengers"] {       /* Avengers, red, gold, vibranium navy */
  --bg:        #0b0e16;
  --bg-glow:   radial-gradient(1200px 700px at 85% -10%, rgba(226,54,54,.18), transparent 60%),
               radial-gradient(900px 600px at -10% 110%, rgba(240,179,35,.12), transparent 55%);
  --panel:     #141821;
  --panel-2:   #191e2a;
  --panel-3:   #232a3a;
  --ink:       #f2f4fb;
  --ink-soft:  #aeb6c9;
  --ink-faint: #737c93;
  --line:      #2a3145;
  --line-soft: #202638;
  --brand:     #e23636;
  --brand-2:   #f0b323;
  --brand-ink: #ff6b6b;
  --brand-grad: linear-gradient(120deg, #e23636, #b11313 55%, #f0b323);
}
[data-theme="snitch"] {         /* Golden Snitch, gold on deep pitch green */
  --bg:        #0e130f;
  --bg-glow:   radial-gradient(1200px 700px at 85% -10%, rgba(212,175,55,.16), transparent 60%),
               radial-gradient(900px 600px at -10% 110%, rgba(42,98,61,.20), transparent 55%);
  --panel:     #17201a;
  --panel-2:   #1c2820;
  --panel-3:   #263528;
  --ink:       #f4efdd;
  --ink-soft:  #c4bd9f;
  --ink-faint: #857f65;
  --line:      #32402f;
  --line-soft: #273327;
  --brand:     #d4af37;
  --brand-2:   #2a623d;
  --brand-ink: #e5c968;
  --brand-grad: linear-gradient(120deg, #d4af37, #a8861f 55%, #2a623d);
}

/* ---- Themed background artwork (original motifs, tiled behind the glow).
   Kept low-alpha so text stays readable; base dark/light themes have none. ---- */
[data-theme="anime"] {
  --theme-art-size: 340px;
  --theme-art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><defs><g id='bl'><ellipse cx='0' cy='-15' rx='6' ry='13'/><ellipse cx='0' cy='-15' rx='6' ry='13' transform='rotate(72)'/><ellipse cx='0' cy='-15' rx='6' ry='13' transform='rotate(144)'/><ellipse cx='0' cy='-15' rx='6' ry='13' transform='rotate(216)'/><ellipse cx='0' cy='-15' rx='6' ry='13' transform='rotate(288)'/></g></defs><g fill='%23ff79b0' fill-opacity='0.11'><use href='%23bl' transform='translate(66 70)'/><use href='%23bl' transform='translate(245 160) scale(1.5)'/><use href='%23bl' transform='translate(140 275) scale(0.9)'/><ellipse cx='290' cy='58' rx='5' ry='10' transform='rotate(30 290 58)'/><ellipse cx='115' cy='150' rx='5' ry='10' transform='rotate(-25 115 150)'/><ellipse cx='38' cy='240' rx='5' ry='10' transform='rotate(50 38 240)'/><ellipse cx='312' cy='290' rx='5' ry='10' transform='rotate(-40 312 290)'/></g><g fill='%23ffd166' fill-opacity='0.16'><circle cx='66' cy='70' r='3.5'/><circle cx='245' cy='160' r='5'/><circle cx='140' cy='275' r='3'/></g></svg>");
}
[data-theme="pandas"] {
  --theme-art-size: 340px;
  --theme-art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g stroke='%237ac74f' stroke-opacity='0.13' fill='none' stroke-linecap='round'><path d='M44 -10 V350' stroke-width='11'/><path d='M298 -10 V350' stroke-width='11'/><g stroke-width='3'><path d='M30 66 q14 -6 28 0'/><path d='M30 162 q14 -6 28 0'/><path d='M30 258 q14 -6 28 0'/><path d='M284 114 q14 -6 28 0'/><path d='M284 210 q14 -6 28 0'/></g></g><g fill='%23f4f1e8' fill-opacity='0.10'><g transform='translate(168 146)'><ellipse cx='0' cy='6' rx='17' ry='14'/><circle cx='-14' cy='-14' r='6'/><circle cx='0' cy='-19' r='6'/><circle cx='14' cy='-14' r='6'/><circle cx='20' cy='2' r='5'/></g><g transform='translate(240 306) scale(0.8)'><ellipse cx='0' cy='6' rx='17' ry='14'/><circle cx='-14' cy='-14' r='6'/><circle cx='0' cy='-19' r='6'/><circle cx='14' cy='-14' r='6'/></g></g></svg>");
}
[data-theme="avengers"] {
  --theme-art-size: 340px;
  --theme-art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g fill='none' stroke='%23e23636' stroke-opacity='0.12' stroke-width='4'><circle cx='90' cy='90' r='46'/><circle cx='90' cy='90' r='30'/><circle cx='90' cy='90' r='14'/></g><g stroke='%23e23636' stroke-opacity='0.09' stroke-width='3' stroke-linecap='round'><path d='M238 40 h66'/><path d='M228 60 h76'/><path d='M244 80 h60'/><path d='M18 286 h66'/><path d='M8 306 h76'/></g><g fill='%23f0b323' fill-opacity='0.13'><polygon points='258,206 267,232 295,232 273,249 281,276 258,260 235,276 243,249 221,232 249,232'/></g><g fill='%23e23636' fill-opacity='0.10'><polygon points='150,146 156,164 174,164 159,175 165,193 150,182 135,193 141,175 126,164 144,164'/></g></svg>");
}
[data-theme="snitch"] {
  --theme-art-size: 340px;
  --theme-art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g transform='translate(150 125)'><circle cx='0' cy='0' r='15' fill='%23d4af37' fill-opacity='0.14'/><g fill='none' stroke='%23d4af37' stroke-opacity='0.14' stroke-width='3'><path d='M-14 -3 C -55 -30, -70 5, -30 6 C -55 20, -35 34, -13 12'/><path d='M14 -3 C 55 -30, 70 5, 30 6 C 55 20, 35 34, 13 12'/></g></g><g transform='translate(255 285) scale(0.7)'><circle cx='0' cy='0' r='15' fill='%23d4af37' fill-opacity='0.12'/><g fill='none' stroke='%23d4af37' stroke-opacity='0.12' stroke-width='3'><path d='M-14 -3 C -55 -30, -70 5, -30 6 C -55 20, -35 34, -13 12'/><path d='M14 -3 C 55 -30, 70 5, 30 6 C 55 20, 35 34, 13 12'/></g></g><g fill='%23e5c968' fill-opacity='0.16'><path d='M66 56 l3 9 9 3 -9 3 -3 9 -3 -9 -9 -3 9 -3z'/><path d='M290 116 l2.5 8 8 2.5 -8 2.5 -2.5 8 -2.5 -8 -8 -2.5 8 -2.5z'/><path d='M56 288 l2.5 8 8 2.5 -8 2.5 -2.5 8 -2.5 -8 -8 -2.5 8 -2.5z'/><path d='M312 210 l2 7 7 2 -7 2 -2 7 -2 -7 -7 -2 7 -2z'/></g></svg>");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  /* two layers: the themed decorative artwork (tiled motif) over the glow.
     --theme-art defaults to none, so base themes keep the plain glow. */
  background-image: var(--theme-art, none), var(--bg-glow);
  background-repeat: repeat, no-repeat;
  background-size: var(--theme-art-size, 360px), cover;
  background-attachment: fixed;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.muted { color: var(--ink-faint); }
.grow { flex: 1; }
code { font-family: var(--mono); }
.linkish { background:none; border:none; color: var(--brand-ink); cursor:pointer; font:inherit; font-size:12px; padding:0; }
.linkish:hover { text-decoration: underline; }

/* ===================== Auth screen ===================== */
.auth-screen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--bg); background-image: var(--bg-glow);
}
.auth-card {
  width: min(430px, 92vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 28px; box-shadow: var(--shadow-lg);
}
.auth-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.brand-mark.big { width: 52px; height: 52px; }
.auth-tag { color: var(--ink-soft); font-size: 12.5px; margin-top: 3px; }
.auth-tabs { display: flex; gap: 4px; background: var(--panel-3); padding: 4px; border-radius: 11px; margin-bottom: 18px; }
.auth-tabs .tab { flex: 1; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; transition: border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 6px; border-radius: 8px;
  color: var(--ink-faint); cursor: pointer; transition: color .15s;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle .pw-slash { display: none; }
.pw-toggle.showing .pw-slash { display: block; }
.auth-error { color: var(--bad); font-size: 12.5px; margin-bottom: 10px; }
.auth-note { color: var(--ink-faint); font-size: 12px; text-align: center; margin: 12px 0 0; }
.primary-btn.wide { width: 100%; padding: 12px; font-size: 14px; }

/* ===================== App shell ===================== */
.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar hidden by choice, at any width (author ask, 2026-07-27). This is a
   SEPARATE state from .nav-open: below 900px the sidebar is an off-canvas
   drawer, and above it this collapses the grid column outright. Keeping the two
   independent means neither breaks the other, and the base rules here sit above
   the media queries deliberately, because same-specificity rules resolve by
   source order (the 2026-07-26 drawer bug was exactly this). */
.app.sidebar-hidden { grid-template-columns: 0 1fr; }
.app.sidebar-hidden .sidebar { display: none; }
.sidebar-close { margin-left: auto; }
.sidebar-rail {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; padding: 12px 6px; background: var(--panel);
  border: 1px solid var(--line); border-left: none; border-radius: 0 10px 10px 0;
  cursor: pointer; font-size: 12px; color: var(--ink-soft); z-index: 43;
  display: none;
}
.app.sidebar-hidden .sidebar-rail { display: block; }

/* ===================== Sidebar ===================== */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; filter: drop-shadow(0 4px 14px rgba(139,92,246,.45)); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-size: 19px; letter-spacing: -.3px; font-weight: 500; }
.brand-name b {
  font-weight: 800;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-future { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 12px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-item:hover:not(:disabled) { background: var(--panel-3); color: var(--ink); }
.nav-item.active {
  background: linear-gradient(120deg, rgba(168,85,247,.18), rgba(6,182,212,.14));
  color: var(--ink); font-weight: 650;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding: 8px 11px;
}
.nav-item:disabled { opacity: .5; cursor: default; }
.nav-ico { color: var(--brand-ink); }
.soon {
  margin-left: auto; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--panel-3); padding: 2px 6px; border-radius: 99px;
}
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.me-card { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.me-avatar {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.me-lines { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.me-name { font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sess-meta code { color: var(--ink-soft); background: var(--panel-3); padding: 2px 7px; border-radius: 6px; font-size: 11px; }
#cost-badge { color: var(--good); }

/* ===================== Main ===================== */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--panel);
  gap: 16px; flex-wrap: wrap;
}
.title { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.seg { display: inline-flex; align-items: center; gap: 0; background: var(--panel-3); border-radius: 99px; padding: 3px; position: relative; }
.seg-label { font-size: 11px; color: var(--ink-faint); padding: 0 8px 0 10px; letter-spacing: .02em; }
.seg-btn {
  border: none; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 12.5px; padding: 5px 13px; border-radius: 99px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg-btn.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
#engine-toggle .seg-btn.active[data-engine="studio"] { color: var(--brand-ink); }

.badge {
  font-size: 11px; padding: 4px 10px; border-radius: 99px;
  background: var(--panel-3); color: var(--ink-soft); font-family: var(--mono);
  border: 1px solid var(--line);
}
.badge.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.icon-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px;
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.icon-btn.small { width: 28px; height: 28px; font-size: 13px; }
.icon-btn:hover { background: var(--panel-3); color: var(--ink); }
.primary-btn {
  border: none; background: var(--brand-grad); color: #fff; font: inherit; font-weight: 650;
  padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: filter .15s, transform .05s;
  box-shadow: 0 4px 18px rgba(124,58,237,.35);
}
.primary-btn.small { padding: 7px 13px; font-size: 13px; }
.primary-btn:hover { filter: brightness(1.1); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled { opacity: .5; cursor: default; filter: none; }
.ghost-btn {
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  font: inherit; padding: 7px 12px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.ghost-btn.small { font-size: 12px; padding: 6px 10px; }
.ghost-btn:hover { background: var(--panel-3); color: var(--ink); }

/* ===================== Listening row ===================== */
.listening {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 22px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent); overflow-x: auto;
}
.listening-label { font-size: 12px; color: var(--ink-faint); flex-shrink: 0; }
.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chip {
  --agent: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 11px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft); white-space: nowrap;
  transition: all .2s ease;
}
.chip .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--agent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--agent) 70%, transparent);
  transition: box-shadow .2s, transform .2s;
}
.chip.eligible { border-color: color-mix(in srgb, var(--agent) 55%, var(--line)); color: var(--ink); }
.chip.bidding {
  border-color: var(--agent); color: var(--ink);
  background: color-mix(in srgb, var(--agent) 12%, var(--panel));
}
.chip.bidding .dot { animation: pulse 1s ease-in-out infinite; }
.chip.spoke {
  border-color: var(--agent); color: #0b0d14; font-weight: 700;
  background: var(--agent); box-shadow: 0 4px 18px color-mix(in srgb, var(--agent) 55%, transparent);
}
.chip.spoke .dot { background: #0b0d14; }
.chip.passed { opacity: .45; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent) 60%, transparent); transform: scale(1); }
  50%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--agent) 0%, transparent); transform: scale(1.3); }
}

/* ===================== Stage ===================== */
.stage { flex: 1; display: grid; grid-template-columns: 1fr 420px; min-height: 0; position: relative; }
.stage.drawer-collapsed { grid-template-columns: 1fr 0; }

/* ---- chat column ---- */
.chat-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.transcript {
  flex: 1; overflow-y: auto; padding: 24px clamp(16px, 5vw, 64px);
  display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth;
}

/* message rows */
.msg { display: flex; flex-direction: column; gap: 5px; max-width: 760px; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg.learner { align-self: flex-end; align-items: flex-end; }
.msg-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 0 4px; }
.msg-avatar {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #0b0d14; flex-shrink: 0;
}
.msg-name { font-weight: 650; }
.msg-sub { color: var(--ink-faint); font-size: 11.5px; }
.bubble {
  padding: 12px 15px; border-radius: 14px; font-size: 14px; line-height: 1.58;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  white-space: pre-wrap; word-wrap: break-word;
}
.msg.learner .bubble { background: var(--brand-grad); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.msg.agent .bubble {
  --agent: var(--ink-faint);
  border-left: 3px solid var(--agent);
  background: color-mix(in srgb, var(--agent) 9%, var(--panel));
  border-bottom-left-radius: 4px;
}
.msg.agent .msg-avatar { background: var(--agent); }
.msg.agent .msg-name { color: var(--agent); }
.msg-actions { display: flex; gap: 10px; }
.why-link, .challenge-link {
  align-self: flex-start; margin-top: 2px; padding: 2px 4px;
  font-size: 11.5px; color: var(--ink-faint); background: none; border: none; cursor: pointer;
  border-radius: 5px;
}
.why-link:hover { color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.challenge-link:hover { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* system cards in the stream */
.sys-divider { align-self: center; display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 12px; width: 100%; max-width: 760px; }
.sys-divider::before, .sys-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.sys-divider b { color: var(--ink-soft); }

.sys-pill {
  align-self: center; font-size: 12.5px; color: var(--ink-soft);
  background: var(--panel-2); border: 1px dashed var(--line); padding: 7px 15px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 9px; animation: rise .35s ease both;
}
.sys-pill.silence { border-style: solid; }
.sys-pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.sys-pill.belief { color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.sys-pill .why-link { margin: 0; }

.run-card {
  align-self: flex-start; max-width: 760px; width: 100%;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel);
  box-shadow: var(--shadow); animation: rise .35s ease both;
}
.run-card-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.run-card-head .runico { color: var(--ink-faint); }
.pf { font-weight: 700; font-size: 11.5px; padding: 2px 9px; border-radius: 99px; }
.pf.ok { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.pf.fail { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.run-card pre { margin: 0; padding: 11px 14px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.run-card pre.err { color: var(--bad); }

/* empty / welcome */
.welcome { margin: auto; text-align: center; max-width: 560px; padding: 30px; }
.welcome h2 {
  font-size: 24px; margin: 0 0 8px; letter-spacing: -.4px;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.welcome p { color: var(--ink-soft); margin: 0 0 22px; }
.welcome-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- composer ---- */
.composer { border-top: 1px solid var(--line); background: var(--panel); padding: 12px clamp(16px, 5vw, 64px) 16px; }
.correction-banner {
  margin-bottom: 10px; padding: 8px 13px; border-radius: 10px; font-size: 12.5px;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  display: flex; align-items: center; gap: 8px;
}
.correction-banner .linkish { margin-left: auto; color: var(--warn); }
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip-btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 99px; cursor: pointer;
  transition: all .15s;
}
.chip-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
#composer-input, #g-input {
  flex: 1; width: 100%; resize: none; font: inherit; font-size: 14px; line-height: 1.5;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  color: var(--ink); max-height: 180px; transition: border-color .15s;
}
#composer-input:focus, #g-input:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.send-btn {
  border: none; background: var(--brand-grad); color: #fff; font: inherit; font-weight: 650;
  padding: 12px 18px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: filter .15s, transform .05s; box-shadow: 0 4px 18px rgba(124,58,237,.35);
}
.send-btn:hover { filter: brightness(1.1); }
.send-btn:active { transform: translateY(1px); }
.send-btn:disabled { opacity: .5; cursor: default; }
.send-ico { font-size: 12px; }

/* ===================== Drawer ===================== */
.drawer {
  border-left: 1px solid var(--line); background: var(--panel-2);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  transition: opacity .2s;
}
.stage.drawer-collapsed .drawer { opacity: 0; pointer-events: none; }
/* The group project panel collapses the same way the personal inspector
   does, so a group can chat on the full width. #group-stage IS a .stage,
   so the grid rules above already apply; only the rail needs placing. */
#group-stage.drawer-collapsed .drawer { opacity: 0; pointer-events: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.drawer-tabs { display: flex; gap: 4px; background: var(--panel-3); padding: 3px; border-radius: 10px; }
.tab {
  border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.tab.active { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.tab-pane { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.tab-pane.active { display: flex; flex-direction: column; }

/* drawer toggle rail (when collapsed) */
.drawer-rail {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; padding: 10px 6px; background: var(--panel); border: 1px solid var(--line);
  border-right: none; border-radius: 10px 0 0 10px; cursor: pointer; font-size: 12px; color: var(--ink-soft);
}

/* ---- inspector ---- */
.orch-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.inspector-empty { text-align: center; color: var(--ink-soft); padding: 30px 10px; }
.inspector-empty .glass-ico { font-size: 34px; margin-bottom: 12px; opacity: .8; }
.inspector-empty p { font-size: 13px; line-height: 1.6; }
.inspector-empty b { color: var(--brand-ink); }

.turn-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.turn-nav .turn-label { font-size: 13px; font-weight: 650; }
.turn-nav .nav-mini { display: flex; gap: 4px; }
.nav-mini button { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--panel); border-radius: 7px; cursor: pointer; color: var(--ink-soft); }
.nav-mini button:disabled { opacity: .4; cursor: default; }

.decision-banner {
  --agent: var(--brand);
  padding: 12px 14px; border-radius: 11px; font-size: 13px; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--agent) 40%, var(--line));
  background: color-mix(in srgb, var(--agent) 11%, var(--panel));
}
.decision-banner .db-head { display: flex; align-items: center; gap: 8px; font-weight: 650; margin-bottom: 4px; color: var(--agent); }
.decision-banner.silence { --agent: var(--ink-faint); }
.decision-banner .crown { font-size: 14px; }

.elig-row { font-size: 11.5px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.elig-tag { background: var(--panel-3); padding: 2px 8px; border-radius: 99px; color: var(--ink-soft); }
.elig-tag.hard { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }

.bid-list { display: flex; flex-direction: column; gap: 10px; }
.bid {
  --agent: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: var(--panel);
  border-left: 3px solid var(--agent); animation: rise .3s ease both;
}
.bid.dropped { opacity: .6; }
.bid.winner { box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent) 55%, transparent), 0 6px 22px color-mix(in srgb, var(--agent) 25%, transparent); }
.bid-top { display: flex; align-items: center; gap: 8px; }
.bid-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 8px color-mix(in srgb, var(--agent) 70%, transparent); }
.bid-name { font-weight: 650; color: var(--agent); font-size: 13px; }
.bid-flags { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.flag { font-size: 10px; padding: 2px 7px; border-radius: 99px; background: var(--panel-3); color: var(--ink-soft); letter-spacing: .01em; }
.flag.speak { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.flag.pass { color: var(--ink-faint); }
.flag.ground { color: var(--c-solver); background: color-mix(in srgb, var(--c-solver) 14%, transparent); }
.flag.risk-high { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }
.flag.crown { background: var(--agent); color: #0b0d14; font-weight: 700; }

.score-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.score-track { position: relative; flex: 1; height: 9px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.score-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--agent); transition: width .7s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 10px color-mix(in srgb, var(--agent) 60%, transparent); }
.score-threshold { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .55; }
.score-threshold::after { content: "0.45"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 8.5px; color: var(--ink-faint); }
.score-val { font-family: var(--mono); font-size: 12px; font-weight: 600; width: 38px; text-align: right; }
.score-val.dim { color: var(--ink-faint); font-weight: 400; }

.breakdown { display: flex; gap: 8px; margin-top: 9px; font-size: 10.5px; color: var(--ink-faint); }
.bd { flex: 1; }
.bd-label { display: flex; justify-content: space-between; margin-bottom: 3px; }
.bd-bar { height: 4px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.bd-bar span { display: block; height: 100%; background: color-mix(in srgb, var(--agent) 70%, var(--ink-faint)); width: 0; transition: width .6s ease; }

.bid-reason { margin-top: 8px; font-size: 11px; color: var(--ink-faint); }
.bid-reason b { color: var(--ink-soft); }
.draft-toggle { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); background: none; border: none; cursor: pointer; padding: 0; }
.draft-toggle:hover { color: var(--brand-ink); }
.draft-body { margin-top: 6px; padding: 9px 11px; background: var(--panel-2); border: 1px dashed var(--line); border-radius: 8px; font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; }

.orch-foot { font-size: 10.5px; color: var(--ink-faint); border-top: 1px solid var(--line-soft); padding-top: 10px; font-family: var(--mono); line-height: 1.7; }
.orch-foot .cost { color: var(--good); }
.baseline-note { padding: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.baseline-note b { color: var(--ink); }

/* cost line in the inspector */
.cost-line {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: 11px; font-family: var(--mono); color: var(--ink-soft);
  background: color-mix(in srgb, var(--good) 7%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--good) 25%, var(--line));
  border-radius: 9px; padding: 8px 11px;
}
.cost-line .c-big { color: var(--good); font-weight: 700; }

/* ===================== Beliefs pane + profile OLM ===================== */
.skill-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 12.5px; }
.skill-name { width: 110px; color: var(--ink-soft); text-transform: capitalize; flex-shrink: 0; }
.skill-track { position: relative; flex: 1; height: 8px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.skill-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--brand-grad); transition: width .5s ease; }
.skill-val { font-family: var(--mono); font-size: 11px; width: 60px; text-align: right; color: var(--ink-faint); }
.skill-row input[type=range] { flex: 1; accent-color: var(--brand); }
.belief-card { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: 12px 14px; }
.belief-card h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.blind-spot { font-size: 12px; color: var(--ink-soft); padding: 6px 9px; border-left: 2px solid var(--warn); background: var(--panel-2); border-radius: 0 8px 8px 0; margin: 6px 0; }
.trust-meter { display: flex; align-items: center; gap: 10px; }
.conf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.conf-item { display: flex; justify-content: space-between; font-size: 12px; background: var(--panel-2); border-radius: 8px; padding: 6px 10px; }
.conf-item b { font-family: var(--mono); }

/* ===================== Profile view ===================== */
.profile-stage { flex: 1; overflow-y: auto; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.profile-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 12px; font-size: 15px; }
.small-note { font-size: 12px; line-height: 1.55; margin: 0 0 12px; }
.olm-flag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; vertical-align: middle; margin-left: 6px; }
.olm-flag.on { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.olm-flag.off { color: var(--ink-faint); background: var(--panel-3); }

/* ===================== Code pane ===================== */
.code-pane { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.editor-wrap { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--panel); }
.editor-bar { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 12px; }
.editor { position: relative; display: flex; overflow: hidden; background: var(--panel); }
.gutter {
  flex-shrink: 0; padding: 12px 8px 12px 12px; text-align: right; user-select: none;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-faint);
  background: var(--panel-2); border-right: 1px solid var(--line-soft); min-width: 38px;
  white-space: pre;
}
.code-area { position: relative; flex: 1; overflow: hidden; }
.code-area pre.highlight, .code-area textarea {
  margin: 0; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre; tab-size: 4; border: none;
}
.code-area pre.highlight { position: absolute; inset: 0; pointer-events: none; overflow: hidden; color: var(--ink); }
.code-area textarea {
  position: relative; width: 100%; min-height: 200px; background: transparent; resize: none;
  color: transparent; caret-color: var(--ink); outline: none; overflow: hidden;
}
/* python token colors (vibrant) */
.tok-kw { color: #f472b6; font-weight: 600; }
.tok-def { color: var(--c-solver); font-weight: 600; }
.tok-str { color: #4ade80; }
.tok-num { color: #fbbf24; }
.tok-com { color: var(--ink-faint); font-style: italic; }
.tok-bi  { color: #67e8f9; }
[data-theme="light"] .tok-kw { color: #c026d3; }
[data-theme="light"] .tok-str { color: #0f9d6f; }
[data-theme="light"] .tok-bi { color: #0e7490; }

.console { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--panel); }
.console-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 12px; }
.console-status.ok { color: var(--good); } .console-status.fail { color: var(--bad); }
.console-body { margin: 0; padding: 11px 13px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; max-height: 200px; overflow: auto; color: var(--ink-soft); }

.hint-ladder { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; background: var(--panel); }
.hint-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12.5px; }
.rungs { display: flex; flex-direction: column; gap: 6px; }
.rung { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-faint); padding: 4px 6px; border-radius: 7px; }
.rung .rnum { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--line); flex-shrink: 0; }
.rung.reached { color: var(--ink-soft); }
.rung.reached .rnum { background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: transparent; color: var(--brand-ink); }
.rung.current { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--brand) 10%, transparent); }
.rung.current .rnum { background: var(--brand-grad); color: #fff; border-color: transparent; }

/* ===================== Modal / toast ===================== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(5,6,12,.65); display: grid; place-items: center; z-index: 50; padding: 30px; backdrop-filter: blur(3px); }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; width: min(960px, 96vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-body { overflow: auto; padding: 8px 0; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 11.5px; }
.trace-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.trace-table td { padding: 5px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.trace-table .t-id { font-family: var(--mono); color: var(--ink-faint); white-space: nowrap; }
.trace-table .t-actor { font-weight: 600; }
.trace-table .t-type { font-family: var(--mono); color: var(--ink-soft); }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 11px 20px; border-radius: 11px; font-size: 13px; box-shadow: var(--shadow-lg); z-index: 60; animation: rise .25s ease; }
.toast[hidden] { display: none; }

/* typing indicator */
.typing { display: inline-flex; gap: 4px; padding: 13px 16px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: .2s; } .typing span:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{ opacity: .25; transform: translateY(0); } 40%{ opacity: 1; transform: translateY(-3px); } }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-faint) 35%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink-faint) 55%, transparent); background-clip: padding-box; }

/* responsive */
body { overflow-x: hidden; }
/* ---- off-canvas nav plumbing (inert above the breakpoint) ---- */
.nav-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 44;
  width: 38px; height: 38px; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel-2); color: var(--ink); font-size: 17px; line-height: 1;
  box-shadow: var(--shadow);
}
.nav-toggle:hover { border-color: var(--brand); color: var(--brand-ink); }
.nav-scrim {
  display: none; position: fixed; inset: 0; z-index: 41;
  background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
  transition: opacity .22s ease; border: none; padding: 0;
}

@media (max-width: 1100px) {
  .stage { grid-template-columns: 1fr 360px; }
  .profile-stage { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* The sidebar becomes an off-canvas drawer instead of vanishing. It used to be
     display:none with no replacement, so snapping the window to one side left
     the app with no navigation at all (author report, 2026-07-13). */
  .app { grid-template-columns: 1fr; height: 100vh; }
  .sidebar {
    /* Below the modal backdrop (50), toast (60) and chip menu (60) already in use. */
    position: fixed; top: 0; bottom: 0; left: 0; width: 262px; z-index: 42;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg); overflow-y: auto;
  }
  /* translateX(0), not `none`: an explicit transform is the reliable target for
     a transition (a `none` target is not animated consistently). */
  .app.nav-open .sidebar { transform: translateX(0); }
  .nav-scrim { display: block; }
  .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav-toggle { display: grid; }
  .topbar { padding-left: 60px; }          /* room for the toggle */
  .main { height: 100vh; }
  .stage { grid-template-columns: 1fr; }
  .stage.drawer-collapsed { grid-template-columns: 1fr; }
  .drawer { border-left: none; border-top: 1px solid var(--line); }
  .drawer-rail { display: none !important; }
  #btn-drawer, #g-btn-drawer { display: none; }
  /* Below the breakpoint the sidebar is the off-canvas drawer, so the explicit
     collapse and its rail would fight the hamburger. Neutralise both. */
  .app.sidebar-hidden { grid-template-columns: 1fr; }
  .app.sidebar-hidden .sidebar { display: block; }
  .sidebar-rail, .app.sidebar-hidden .sidebar-rail { display: none !important; }
  .sidebar-close { display: none; }
}

/* Very narrow (a window snapped to a third of the screen, or a phone). */
@media (max-width: 560px) {
  .sidebar { width: 84vw; }
  .transcript { padding: 16px 12px; }
  .composer { padding: 10px 12px 12px; }
  .topbar h1, .topbar .title { font-size: 15px; }
  .topbar .subtitle { display: none; }
}

/* ===================== "Agent is thinking" indicator ===================== */
.thinking {
  display: flex; align-items: center; gap: 11px; align-self: flex-start;
  max-width: 88%; padding: 11px 15px; border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--line);
  animation: rise .3s ease both;
}
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  animation: think-bounce 1.25s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: .16s; background: var(--brand-2); }
.thinking-dots i:nth-child(3) { animation-delay: .32s; }
.thinking-label {
  font-size: 13px; color: var(--ink-soft);
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; background-size: 220% 100%;
  animation: think-shimmer 2.6s linear infinite; font-weight: 600;
}
@keyframes think-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}
@keyframes think-shimmer { from { background-position: 0 0; } to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .thinking-dots i, .thinking-label { animation: none; }
  .thinking-label { color: var(--ink-soft); background: none; -webkit-text-fill-color: currentColor; }
}

/* ===================== Phase 6: HITL gates, summon/dismiss, rails ===================== */
.approval-card {
  margin: 12px auto; max-width: 580px; width: 100%;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--agent, var(--brand)); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.approval-card .ap-head { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.approval-card .ap-proposal { font-size: 14px; color: var(--ink); line-height: 1.5; margin-bottom: 12px; }
.approval-card .ap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.approval-card.resolved { opacity: .55; }

.chip { cursor: pointer; }
.chip.muted { opacity: .4; filter: grayscale(.8); }
.chip-menu {
  position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}
.chip-menu button {
  font: inherit; font-size: 12.5px; color: var(--ink); text-align: left;
  background: none; border: none; border-radius: 8px; padding: 7px 10px; cursor: pointer;
}
.chip-menu button:hover { background: var(--panel-3); }

/* Code snippets inside chat bubbles / proposals (Planner concept teaching) */
.bubble pre.snippet, .ap-proposal pre.snippet {
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin: 8px 0; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre;
}
.bubble code, .ap-proposal code {
  font-family: var(--mono); font-size: .92em;
  background: var(--panel-3); padding: 1px 5px; border-radius: 5px;
}

.bubble .bh, .ap-proposal .bh { display: block; margin: 10px 0 3px; font-size: 14.5px; font-weight: 700; }
.bubble .bh-hr, .ap-proposal .bh-hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; }

/* ======================= Latency readout (inspector) ======================= */
.latency-line {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--ink-soft);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 11px; margin-top: 8px;
}
.latency-line b { color: var(--ink); }

/* ======================= Group chat ======================= */
.msg.peer { align-self: flex-start; }
.msg.peer .bubble {
  background: var(--panel-2); border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
#g-btn-mode.mode-on { border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand); }
.g-composer-note { font-size: 11.5px; margin: 6px 4px 0; }
.g-composer-note code { font-family: var(--mono); background: var(--panel-3); padding: 1px 5px; border-radius: 5px; }

.offer-bubble {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--c-planner, #7c8cf8);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 8px;
  font-size: 13px; animation: rise .35s ease both;
}
.offer-bubble.quiet { border-left-color: var(--ink-faint); }
.offer-bubble .muted { font-size: 12px; }

.g-members-card { padding: 12px 14px; }
.g-members-card h3 { margin: 0 0 8px; font-size: 13px; }
.g-member { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.g-member .me-avatar { width: 22px; height: 22px; font-size: 11px; }

.g-code-area {
  width: 100%; min-height: 180px; resize: vertical;
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  color: var(--ink); background: var(--panel-2);
  border: none; outline: none; padding: 10px 12px; white-space: pre; overflow-x: auto;
}

/* ======================= Settings ======================= */
.theme-tabs { display: flex; gap: 4px; background: var(--panel-3); padding: 4px;
  border-radius: 11px; margin: 10px 0 12px; width: fit-content; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-swatch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; text-align: left;
}
.theme-swatch.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.sw-dots { display: flex; gap: 5px; }
.sw-dots i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.sw-label { font-size: 12.5px; font-weight: 650; }
.st-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 6px 0; cursor: pointer; }
.st-toggle input { accent-color: var(--brand); width: 16px; height: 16px; }
.st-memory { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mem-row { font-size: 12.5px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; }
.lang-select {
  font: inherit; font-size: 12px; color: var(--ink);
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 8px; margin-right: 8px;
}

/* ======================= History ======================= */
.h-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.h-item:hover { border-color: var(--brand); }
.h-kind { font-size: 16px; }
.h-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.h-main .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-meta { font-size: 11.5px; white-space: nowrap; }

/* ======================= Career guidance ======================= */
.career-result { font-size: 14px; line-height: 1.65; }
.career-result pre.snippet {
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin: 8px 0; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px;
}
.career-result code { font-family: var(--mono); background: var(--panel-3); padding: 1px 5px; border-radius: 5px; }
.career-result .bh { display: block; margin: 14px 0 4px; font-size: 15px; font-weight: 700; }
.career-result .bh-hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; }

/* Reset-flow success message. Mirrors .auth-error but reads as confirmation,
   not failure (the forgot endpoint answers identically for a known and an
   unknown address, so this is the only feedback the user gets). */
.auth-ok {
  background: color-mix(in srgb, var(--ok, #10b981) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok, #10b981) 40%, transparent);
  color: var(--ink); border-radius: 10px; padding: 10px 12px;
  font-size: 13px; line-height: 1.5; margin-bottom: 10px;
}