/* ============================================================
   DevQA Library — interview answer library
   Dark-first, ChatGPT-style shell. No external fonts/CDN.
   ============================================================ */

:root{
  color-scheme: dark;          /* stops Chrome auto-dark from re-inverting us */
  --bg:#0d1016;
  --bg-2:#0a0c11;
  --panel:#141820;
  --panel-2:#1a1f29;
  --line:#242a35;
  --line-soft:#1d222c;
  --ink:#e7ebf2;
  --ink-2:#aab3c2;
  --ink-3:#737d8c;
  --accent:#10a37f;
  --accent-2:#4f8cff;
  --accent-ink:#0b1f19;
  --warn:#f0b429;
  --chip:#1b212c;
  --radius:14px;
  --shadow:0 10px 36px rgba(0,0,0,.45);
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f7f8fa;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f1f4f8;
  --line:#e1e6ed;
  --line-soft:#eef1f5;
  --ink:#141922;
  --ink-2:#4b5563;
  --ink-3:#7b8798;
  --chip:#eef2f7;
  --shadow:0 10px 30px rgba(20,30,50,.10);
}

/* system setting (no stamp on the root): follow the OS */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  color-scheme: light;
  --bg:#f7f8fa;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f1f4f8;
  --line:#e1e6ed;
  --line-soft:#eef1f5;
  --ink:#141922;
  --ink-2:#4b5563;
  --ink-3:#7b8798;
  --chip:#eef2f7;
  --shadow:0 10px 30px rgba(20,30,50,.10);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:rgba(16,163,127,.35)}

/* scrollbars */
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-thumb{background:transparent;border-radius:20px}
*:hover::-webkit-scrollbar-thumb{background:var(--line)}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

.app{display:flex;height:100vh;overflow:hidden}

/* ================= SIDEBAR ================= */
.sidebar{
  width:272px;flex:0 0 272px;
  background:var(--bg-2);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:12px;gap:10px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 4px 6px}
.logo{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;
  box-shadow:0 4px 14px rgba(16,163,127,.35);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-txt strong{font-size:14.5px;letter-spacing:.2px}
.brand-txt span{font-size:11.5px;color:var(--ink-3)}

.new-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  background:var(--panel);border:1px solid var(--line);
  padding:10px 12px;border-radius:10px;cursor:pointer;
  font-size:13.5px;font-weight:600;transition:.15s;
}
.new-btn:hover{background:var(--panel-2);border-color:var(--accent)}

.side-section{display:flex;flex-direction:column;gap:4px;min-height:0}
.side-section.grow{flex:1;overflow:hidden}
.side-label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;
  color:var(--ink-3);padding:8px 6px 4px;font-weight:700;
}
.link-btn{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:10.5px;text-transform:none;letter-spacing:0}
.link-btn:hover{color:var(--accent)}

.topic-list{display:flex;flex-direction:column;gap:2px}
.topic{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:9px;cursor:pointer;
  font-size:13.3px;color:var(--ink-2);border:1px solid transparent;
}
.topic:hover{background:var(--panel)}
.topic.active{background:var(--panel-2);color:var(--ink);border-color:var(--line);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.topic .cnt{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.recent-list{display:flex;flex-direction:column;gap:2px}
.recent-item{
  padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.8px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recent-item:hover{background:var(--panel);color:var(--ink)}
.recent-empty{font-size:12px;color:var(--ink-3);padding:6px 9px}

.side-foot{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:2px}
.foot-btn{
  display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:8px 9px;border-radius:9px;font-size:13px;color:var(--ink-2);text-align:left;width:100%;
}
.foot-btn:hover{background:var(--panel);color:var(--ink)}
.foot-btn.on{color:var(--accent)}
/* the install offer — worth noticing once, then it is gone for good */
.foot-btn.install{
  color:var(--accent); font-weight:600;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
}
.foot-btn.install:hover{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--ink); }

/* ================= MAIN ================= */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}

.topbar{
  height:52px;flex:0 0 52px;display:flex;align-items:center;gap:12px;
  padding:0 18px;border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(8px);
}
.topbar-title{font-weight:650;font-size:14.5px;letter-spacing:.2px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.select{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:6px 10px;font-size:12.8px;cursor:pointer;outline:none;max-width:210px;
}
.select:focus{border-color:var(--accent)}
.progress-pill{
  font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:20px;
  background:var(--chip);color:var(--ink-2);border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.icon-btn{background:none;border:0;color:var(--ink-2);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center}
.icon-btn:hover{background:var(--panel);color:var(--ink)}
.only-mobile{display:none}

/* ================= THREAD ================= */
.thread{flex:1;overflow-y:auto;scroll-behavior:smooth;padding:10px 0 20px}
.wrap{max-width:820px;margin:0 auto;padding:0 22px}

/* welcome */
.welcome{max-width:820px;margin:0 auto;padding:46px 22px 10px;text-align:center}
.hero-logo{
  width:58px;height:58px;border-radius:17px;margin:0 auto 18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:25px;
  box-shadow:0 10px 30px rgba(16,163,127,.3);
}
.welcome h1{font-size:27px;margin:0 0 10px;letter-spacing:-.4px;font-weight:700}
.hero-sub{color:var(--ink-2);font-size:14.3px;margin:0 auto 22px;max-width:580px}
.hero-sub b{color:var(--accent);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.chip{
  background:var(--chip);border:1px solid var(--line);color:var(--ink-2);
  padding:7px 13px;border-radius:20px;font-size:12.8px;cursor:pointer;transition:.14s;
}
.chip:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}

.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;text-align:left}
.hero-card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;cursor:pointer;transition:.15s;
}
.hero-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.hero-card h3{margin:0 0 3px;font-size:13.5px;display:flex;align-items:center;gap:7px}
.hero-card p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45}

/* message rows */
.row{padding:14px 0;animation:fade .25s ease}
.row.user{background:transparent}
.row.bot{background:color-mix(in srgb,var(--panel) 55%,transparent);border-block:1px solid var(--line-soft)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.msg{display:flex;gap:14px;align-items:flex-start}
.avatar{
  width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;margin-top:2px;
}
.avatar.u{background:linear-gradient(135deg,#6b7280,#434a56)}
.avatar.b{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.body{flex:1;min-width:0}
.q-text{font-size:15px;font-weight:600;padding-top:3px}

/* answer card */
.ans-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.ans-title{font-size:16.5px;font-weight:700;letter-spacing:-.2px;line-height:1.35;flex:1 1 220px}
.badge{
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap;
}
.score{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.block{margin:0 0 13px}
.block-label{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;
}
.block-label::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--accent)}
.block.simple .block-label::before{background:var(--accent-2)}
.block.proj .block-label::before{background:var(--warn)}
.block p{margin:0 0 7px}
.block ul{margin:4px 0 7px;padding-left:19px}
.block li{margin-bottom:3px}
.block b,.block strong{color:var(--ink);font-weight:650}

.say{
  background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;padding:12px 14px;
}
.proj-box{
  background:color-mix(in srgb,var(--warn) 8%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 28%,var(--line));
  border-radius:10px;padding:11px 14px;font-size:14.2px;
}
.block.tip .block-label::before{background:var(--accent-2)}
.tip-box{
  background:color-mix(in srgb,var(--accent-2) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--accent-2) 30%,var(--line));
  border-radius:10px;padding:11px 14px;font-size:13.8px;color:var(--ink-2);
}
.tip-box b{color:var(--ink)}
.remember{
  display:flex;gap:9px;align-items:flex-start;font-size:13.4px;color:var(--ink-2);
  background:var(--panel-2);border:1px dashed var(--line);border-radius:10px;padding:10px 13px;
}
.remember b{color:var(--ink)}

code{
  font-family:var(--mono);font-size:12.6px;
  background:var(--panel-2);border:1px solid var(--line);
  padding:1px 5px;border-radius:5px;color:var(--accent);
}
pre{
  margin:6px 0 10px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;overflow-x:auto;
}
pre code{background:none;border:0;padding:0;color:var(--ink);font-size:12.6px;line-height:1.6;display:block}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:11px;color:var(--ink-3);background:var(--chip);border:1px solid var(--line-soft);padding:2px 8px;border-radius:14px}

.ans-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft)}
.act{
  display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink-2);padding:6px 11px;border-radius:8px;font-size:12.2px;cursor:pointer;transition:.14s;
}
.act:hover{border-color:var(--accent);color:var(--ink)}
.act.done{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent);color:var(--accent)}

.related{margin-top:14px}
.related .block-label{margin-bottom:7px}
.rel-chips{display:flex;flex-wrap:wrap;gap:7px}
.rel{
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  padding:6px 12px;border-radius:18px;font-size:12.4px;cursor:pointer;text-align:left;
}
.rel:hover{border-color:var(--accent-2);color:var(--ink)}

/* typing */
.typing{display:flex;gap:4px;padding:6px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:bl 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* no result */
.nores{font-size:14px;color:var(--ink-2)}
.nores b{color:var(--ink)}

/* ================= COMPOSER ================= */
.composer{
  padding:10px 22px 14px;border-top:1px solid var(--line-soft);
  background:var(--bg);position:relative;
}
.composer-box{
  max-width:820px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:8px 8px 8px 16px;transition:.15s;box-shadow:var(--shadow);
}
.composer-box:focus-within{border-color:var(--accent)}
.composer-box textarea{
  flex:1;background:none;border:0;outline:none;resize:none;
  max-height:150px;padding:7px 0;line-height:1.5;font-size:14.5px;
}
.composer-box textarea::placeholder{color:var(--ink-3)}
.send{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;border:0;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center;transition:.15s;
}
.send:hover{filter:brightness(1.1)}
.send:disabled{background:var(--chip);color:var(--ink-3);cursor:default}
.composer-hint{text-align:center;font-size:11px;color:var(--ink-3);margin-top:8px}

/* autocomplete */
.suggest{
  position:absolute;bottom:calc(100% - 4px);left:50%;transform:translateX(-50%);
  width:min(820px,calc(100% - 44px));
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;z-index:30;max-height:290px;overflow-y:auto;
}
.sg{
  display:flex;align-items:center;gap:10px;padding:9px 15px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);font-size:13.4px;
}
.sg:last-child{border-bottom:0}
.sg:hover,.sg.sel{background:var(--panel-2)}
.sg .sg-q{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg mark{background:none;color:var(--accent);font-weight:700}
.sg .mini{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:12px;border:1px solid;white-space:nowrap}

/* ================= LIBRARY ================= */
.library{flex:1;overflow-y:auto;padding:22px 26px 40px}
.lib-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:1100px;margin:0 auto 18px;
}
.lib-head h2{margin:0;font-size:20px}
.lib-filter{
  margin-left:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px 13px;font-size:13px;outline:none;min-width:240px;
}
.lib-filter:focus{border-color:var(--accent)}
#libBody{max-width:1100px;margin:0 auto}
.lib-group{margin-bottom:26px}
.lib-group h3{
  display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;
}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:9px}
.lib-card{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;cursor:pointer;transition:.14s;position:relative;
}
.lib-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.lib-card .lq{font-size:13.3px;font-weight:600;margin-bottom:4px;line-height:1.4}
.lib-card .lt{font-size:11.5px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-card.learned::after{
  content:"✓";position:absolute;top:9px;right:11px;color:var(--accent);font-weight:800;font-size:13px;
}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--accent);color:var(--ink);
  padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:.25s;z-index:99;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
  .only-mobile{display:grid}
  .sidebar{
    position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);
    transition:transform .22s;box-shadow:var(--shadow);
  }
  .sidebar.open{transform:none}
  .topbar{padding:0 12px}
  .select{max-width:130px}
  .wrap,.welcome{padding-left:14px;padding-right:14px}
  .composer{padding:10px 12px 12px}
  .welcome h1{font-size:22px}
}
@media print{
  .sidebar,.composer,.topbar,.ans-actions,.related{display:none!important}
  body{overflow:visible}
  .thread{overflow:visible}
  .row.bot{background:none}
}

/* ============================================================
   Polish pass — richer sidebar, livelier cards, clearer search
   ============================================================ */

/* --- sidebar: the active topic now carries its own colour --- */
.topic{
  position:relative;
  padding:8px 10px 8px 11px;
  transition:background .14s, color .14s;
}
.topic::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:0 3px 3px 0;
  background:var(--topic-color, var(--accent)); transition:height .18s;
}
.topic.active::before{ height:19px; }
.topic.active{ background:var(--panel-2); color:var(--ink); }
.topic .cnt{
  background:var(--chip); border:1px solid var(--line-soft);
  padding:1px 7px; border-radius:11px; font-size:10.5px; font-weight:600;
}
.topic.active .cnt{ border-color:transparent; }

/* --- brand --- */
.brand{ padding-bottom:10px; border-bottom:1px solid var(--line-soft); margin-bottom:2px; }
.logo{ box-shadow:0 4px 16px rgba(16,163,127,.28), inset 0 1px 0 rgba(255,255,255,.22); }

/* --- hero: topic cards read as a set, each in its own colour --- */
.hero-card{ position:relative; overflow:hidden; }
.hero-card::after{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--topic-color, var(--accent)); opacity:.55; transition:opacity .15s;
}
.hero-card:hover::after{ opacity:1; }
.hero-card:hover{ border-color:var(--topic-color, var(--accent)); }
.hero-card h3{ font-size:13.5px; letter-spacing:.1px; }
.hero-card .count{
  float:right; font-size:11px; font-weight:700; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* --- chips --- */
.chip{ font-weight:500; }
.chip:hover{ background:var(--panel-2); }

/* --- "did you mean" line above a loose match --- */
.didyoumean{
  display:flex; align-items:center; gap:8px;
  font-size:12.6px; color:var(--ink-2);
  background:color-mix(in srgb, var(--accent-2) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-2) 26%, var(--line));
  border-radius:9px; padding:7px 12px; margin-bottom:12px;
}
.didyoumean::before{ content:"⌕"; font-size:15px; color:var(--accent-2); }
.didyoumean b{ color:var(--ink); }
.didyoumean i{ color:var(--ink-3); font-style:normal; text-decoration:line-through; }

/* --- answer card: a little more presence --- */
.ans-head{ padding-bottom:9px; border-bottom:1px solid var(--line-soft); }
.say{ box-shadow:0 1px 0 rgba(0,0,0,.04); }

/* --- library cards take their topic colour on hover --- */
.lib-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--topic-color, var(--accent)); opacity:0; transition:opacity .15s;
}
.lib-card:hover::after{ opacity:.9; }
.lib-card:hover{ border-color:color-mix(in srgb, var(--topic-color, var(--accent)) 55%, var(--line)); }

/* --- composer gets a soft focus glow --- */
.composer-box:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --- collapsible sidebar (desktop) --- */
.sidebar{ transition:width .2s ease, flex-basis .2s ease, padding .2s ease, opacity .15s ease; }
.app.nav-collapsed .sidebar{
  width:0; flex-basis:0; padding-left:0; padding-right:0;
  opacity:0; pointer-events:none; border-right-color:transparent; overflow:hidden;
}
#openSide{ transition:transform .2s; }
.app.nav-collapsed #openSide{ transform:rotate(90deg); }
@media (max-width:860px){
  .app.nav-collapsed .sidebar{ width:272px; flex-basis:272px; padding:12px; opacity:1; pointer-events:auto; }
}

/* ============================================================
   Chat surface — composer, bubbles, streaming
   ============================================================ */

/* ---------- the composer ---------- */
.composer{ padding:14px 22px 16px; border-top:0; background:
  linear-gradient(to top, var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent)); }

.composer-shell{
  max-width:820px; margin:0 auto; position:relative; border-radius:24px; padding:1.5px;
  background:var(--line);
  transition:background .25s ease, box-shadow .25s ease;
}
.composer-shell:focus-within{
  background:linear-gradient(120deg, var(--accent), var(--accent-2), #c084fc, var(--accent));
  background-size:300% 300%;
  animation:shellGlow 7s ease infinite;
  box-shadow:0 10px 40px -12px color-mix(in srgb, var(--accent) 45%, transparent);
}
@keyframes shellGlow{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}

.composer-box{
  display:block; background:var(--panel); border:0; border-radius:22.5px;
  padding:12px 14px 9px; box-shadow:none;
}
.composer-box:focus-within{ box-shadow:none; }
.composer-box textarea{
  display:block; width:100%; background:none; border:0; outline:none; resize:none;
  max-height:190px; padding:4px 4px 6px; line-height:1.55; font-size:15.2px;
}
.composer-box textarea::placeholder{ color:var(--ink-3); }

.composer-bar{ display:flex; align-items:center; gap:10px; padding-top:4px; }
.composer-left{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }

.scope-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--chip); border:1px solid var(--line); color:var(--ink-2);
  border-radius:16px; padding:4px 10px; font-size:11.8px; cursor:pointer;
  white-space:nowrap; transition:.15s;
}
.scope-pill:hover{ border-color:var(--accent); color:var(--ink); }
.scope-pill .dot{ width:7px; height:7px; flex:0 0 7px; background:var(--ink-3); }
.scope-x{ opacity:0; width:0; transition:.15s; }
.scope-pill.filtered .scope-x{ opacity:.7; width:12px; }
.scope-pill.filtered{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }

.kbd-hint{ font-size:11px; color:var(--ink-3); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.kbd-hint kbd{
  font-family:var(--sans); font-size:10.5px; background:var(--chip);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 5px; color:var(--ink-2);
}
.sep-dot{ opacity:.5 }

.composer-box .send{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%; margin-left:auto;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
  display:grid; place-items:center; border:0; cursor:pointer;
  transition:transform .15s, filter .15s, opacity .15s;
  box-shadow:0 3px 12px -2px color-mix(in srgb, var(--accent) 60%, transparent);
}
.composer-box .send:hover:not(:disabled){ transform:translateY(-1px) scale(1.05); filter:brightness(1.08); }
.composer-box .send:active:not(:disabled){ transform:scale(.94); }
.composer-box .send:disabled{
  background:var(--chip); color:var(--ink-3); box-shadow:none; cursor:default;
}
.composer-hint{ margin-top:10px; }

/* ---------- message rows ---------- */
.row{ padding:16px 0; border-block:0 !important; background:none !important; }
.row.user .msg{ justify-content:flex-end; }
.row.user .avatar{ display:none; }
.row.user .body{ flex:0 1 auto; max-width:78%; }
.row.user .q-text{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 16%, var(--panel)),
    color-mix(in srgb, var(--accent-2) 14%, var(--panel)));
  border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius:18px 18px 5px 18px;
  padding:10px 15px; font-size:14.6px; font-weight:500; line-height:1.5;
}
.row.bot .avatar{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 3px 10px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.row.bot + .row.user{ margin-top:6px; }

/* ---------- streaming reveal ---------- */
.stream-hidden{ opacity:0; transform:translateY(5px); }
.stream-in{ animation:streamIn .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes streamIn{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
.caret{
  display:inline-block; width:7px; height:15px; margin-left:3px; border-radius:1px;
  background:var(--accent); vertical-align:-2px; animation:caret .9s steps(2) infinite;
}
@keyframes caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ---------- typing dots, warmer ---------- */
.typing{ gap:5px; padding:8px 0; }
.typing i{
  width:8px; height:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  animation:bl 1.05s ease-in-out infinite;
}

/* ---------- jump to latest ---------- */
.to-bottom{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:124px; z-index:20;
  width:34px; height:34px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow);
  animation:streamIn .2s both;
}
.to-bottom:hover{ border-color:var(--accent); color:var(--ink); transform:translateX(-50%) translateY(-2px); }

/* ---------- welcome, a touch brighter ---------- */
.welcome h1{
  background:linear-gradient(100deg, var(--ink) 20%, var(--accent) 55%, var(--accent-2) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:2px;
}
.hero-logo{ animation:floaty 5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }

/* ---------- suggestion list, closer to a real autocomplete ---------- */
.suggest{ bottom:calc(100% + 6px); border-radius:18px; padding:5px; }
.sg{ border-bottom:0; border-radius:12px; padding:9px 12px; }
.sg.sel{ background:color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }

@media (max-width:860px){
  .kbd-hint{ display:none }
  .composer{ padding:10px 12px 12px }
  .to-bottom{ bottom:150px }
}

/* [hidden] must win over display:grid / display:flex */
[hidden]{ display:none !important; }

/* ============================================================
   Voice search
   ============================================================ */
.mic{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:var(--chip); border:1px solid var(--line); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; transition:.15s;
}
.mic:hover{ border-color:var(--accent); color:var(--ink); }
.mic.listening{
  background:linear-gradient(135deg, #f43f5e, #fb7185); border-color:transparent; color:#fff;
  animation:micPulse 1.4s ease-out infinite;
}
@keyframes micPulse{
  0%   { box-shadow:0 0 0 0   rgba(244,63,94,.55) }
  70%  { box-shadow:0 0 0 11px rgba(244,63,94,0) }
  100% { box-shadow:0 0 0 0   rgba(244,63,94,0) }
}
.composer-shell.listening{
  background:linear-gradient(120deg,#f43f5e,#fb7185,#f43f5e);
  background-size:300% 300%; animation:shellGlow 3s ease infinite;
}
.listening-note{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:#fb7185; font-weight:500;
}
.listening-note .bars{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.listening-note .bars i{ width:2.5px; background:currentColor; border-radius:2px; animation:bars .9s ease-in-out infinite; }
.listening-note .bars i:nth-child(1){ animation-delay:0s }
.listening-note .bars i:nth-child(2){ animation-delay:.15s }
.listening-note .bars i:nth-child(3){ animation-delay:.3s }
.listening-note .bars i:nth-child(4){ animation-delay:.45s }
@keyframes bars{ 0%,100%{ height:4px } 50%{ height:12px } }

#input.interim{ color:var(--ink-3); font-style:italic; }
.foot-btn.on #voiceTxt{ color:var(--accent); }

/* ---------- mode switch: text | voice ---------- */
.mode-switch{
  position:relative; display:flex; gap:2px; padding:3px;
  background:var(--chip); border:1px solid var(--line); border-radius:11px; margin-bottom:2px;
}
.mode-glider{
  position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  transition:transform .22s cubic-bezier(.3,.8,.3,1), background .2s, border-color .2s;
}
.mode-switch.voice .mode-glider{
  transform:translateX(100%);
  background:linear-gradient(135deg, color-mix(in srgb,#f43f5e 22%,var(--panel)), color-mix(in srgb,#fb7185 18%,var(--panel)));
  border-color:color-mix(in srgb,#f43f5e 45%,var(--line));
}
.mode-opt{
  position:relative; z-index:1; flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:7px 4px;
  font-size:12.3px; font-weight:600; color:var(--ink-3); transition:color .18s;
}
.mode-opt.active{ color:var(--ink); }
.mode-switch.voice .mode-opt.active{ color:#fb7185; }

/* ---------- the live voice bar ----------
   Sits above the composer the whole time voice is on, and says which of
   the four things is happening: listening, hearing you, answering, or
   reconnecting. During an interview there is no time to wonder whether
   the microphone is still awake — this answers it without being read. */
.voice-bar{
  display:flex; align-items:center; gap:10px;
  max-width:820px; margin:0 auto 8px; padding:8px 14px;
  background:color-mix(in srgb,#f43f5e 10%,transparent);
  border:1px solid color-mix(in srgb,#f43f5e 26%,var(--line));
  border-radius:14px; font-size:12.4px; color:var(--ink-2);
  animation:vbIn .22s cubic-bezier(.3,.9,.3,1);
}
@keyframes vbIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.voice-bar b{ color:#fb7185; }
.voice-bar .spacer{ flex:1 }
.voice-bar button{
  background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:11.5px; text-decoration:underline;
}
.voice-bar button:hover{ color:var(--ink); }

/* the orb — four bars that rise and fall inside a soft gradient disc */
.voice-bar .orb{
  position:relative; flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  background:linear-gradient(135deg,#f43f5e,#fb7185);
  box-shadow:0 0 0 0 rgba(244,63,94,.5); animation:micPulse 1.7s ease-out infinite;
}
.voice-bar .orb i{
  width:2.5px; height:5px; border-radius:2px; background:#fff;
  animation:bars .9s ease-in-out infinite;
}
.voice-bar .orb i:nth-child(1){ animation-delay:0s }
.voice-bar .orb i:nth-child(2){ animation-delay:.15s }
.voice-bar .orb i:nth-child(3){ animation-delay:.3s }
.voice-bar .orb i:nth-child(4){ animation-delay:.45s }

/* the words it is hearing, as it hears them */
.voice-bar .vb-txt{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .2s;
}
.voice-bar.hearing .vb-txt{ color:var(--ink); font-style:italic; }
.voice-bar.working .orb{ animation-play-state:paused; }
.voice-bar.working .orb i{ animation-duration:.45s; }

/* reconnecting: amber, so a dropped session is never mistaken for a quiet room */
.voice-bar.warn{
  background:color-mix(in srgb,#f59e0b 10%,transparent);
  border-color:color-mix(in srgb,#f59e0b 32%,var(--line));
}
.voice-bar.warn .orb{ background:linear-gradient(135deg,#d97706,#f59e0b); animation:none; }
.voice-bar.warn b{ color:#f59e0b; }

/* ============================================================
   Mobile — phone layout
   ============================================================ */
@media (max-width:760px){
  /* sidebar becomes a slide-over with a dimmed backdrop */
  .sidebar{
    position:fixed; inset:0 auto 0 0; z-index:60; width:min(84vw,300px); flex-basis:auto;
    transform:translateX(-102%); transition:transform .24s cubic-bezier(.3,.8,.3,1);
    box-shadow:0 0 40px rgba(0,0,0,.45);
  }
  .sidebar.open{ transform:none; }
  .app.nav-collapsed .sidebar{ width:min(84vw,300px); flex-basis:auto; padding:12px; opacity:1; pointer-events:auto; }
  .app::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.5);
    opacity:0; pointer-events:none; transition:opacity .24s; z-index:55;
  }
  .app.side-open::after{ opacity:1; pointer-events:auto; }
  .only-mobile{ display:grid; }

  /* top bar: title + menu, the select moves out of the way */
  .topbar{ height:50px; flex-basis:50px; padding:0 10px; gap:8px; }
  .topbar-title{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .select{ max-width:124px; font-size:12px; padding:6px 8px; }
  .progress-pill{ display:none; }

  /* welcome: single column, smaller hero */
  .welcome{ padding:26px 14px 6px; }
  .hero-logo{ width:48px; height:48px; font-size:21px; border-radius:14px; margin-bottom:14px; }
  .welcome h1{ font-size:21px; }
  .hero-sub{ font-size:13.2px; margin-bottom:16px; }
  .chips{ gap:6px; margin-bottom:20px; }
  .chip{ font-size:12px; padding:6px 11px; }
  .hero-grid{ grid-template-columns:1fr; gap:8px; }

  /* answers */
  .wrap{ padding:0 14px; }
  .row{ padding:12px 0; }
  .row.user .body{ max-width:88%; }
  .ans-title{ font-size:15.5px; }
  .msg{ gap:10px; }
  .avatar{ width:26px; height:26px; flex-basis:26px; }
  pre{ padding:10px 12px; }
  pre code{ font-size:11.6px; }
  .block{ margin-bottom:11px; }
  .ans-actions .act{ padding:8px 12px; font-size:12.5px; }   /* bigger tap targets */
  .rel{ padding:9px 13px; }

  /* library: one column */
  .library{ padding:16px 14px 30px; }
  .lib-head{ gap:10px; }
  .lib-head h2{ font-size:17px; }
  .lib-filter{ min-width:0; width:100%; margin-left:0; }
  .lib-grid{ grid-template-columns:1fr; }

  /* composer: roomier, thumb friendly */
  .composer{ padding:8px 10px 10px; }
  .composer-box{ padding:10px 10px 8px; border-radius:19px; }
  .composer-shell{ border-radius:21px; }
  .composer-box textarea{ font-size:16px; }      /* 16px stops iOS zooming on focus */
  .composer-bar{ gap:8px; }
  .kbd-hint{ display:none; }
  .scope-pill{ font-size:11px; padding:5px 9px; }
  .scope-pill span:not(.dot){ max-width:94px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mic{ width:34px; height:34px; flex-basis:34px; }
  .composer-box .send{ width:36px; height:36px; flex-basis:36px; }
  .composer-hint{ font-size:10.2px; margin-top:7px; }
  .listening-note{ font-size:11px; }

  /* suggestions fill the width and are easier to tap */
  .suggest{ width:calc(100% - 20px); max-height:46vh; border-radius:16px; }
  .sg{ padding:11px 12px; font-size:13px; }
  .sg .mini{ font-size:9.5px; padding:2px 6px; }

  .to-bottom{ bottom:118px; }
  .voice-bar{ margin:0 0 7px; font-size:11.4px; padding:6px 11px; }
}

/* very small phones */
@media (max-width:380px){
  .welcome h1{ font-size:19px; }
  .scope-pill span:not(.dot){ max-width:62px; }
  .topbar-title{ font-size:13px; }
}

/* landscape phones: the composer must not eat the screen */
@media (max-height:460px) and (orientation:landscape){
  .welcome{ padding-top:14px; }
  .hero-logo{ display:none; }
  .hero-grid{ grid-template-columns:repeat(2,1fr); }
}

/* phone sidebar: lists scroll, footer stays pinned */
@media (max-width:760px){
  .sidebar{ overflow:hidden; }
  .sidebar .side-section:not(.grow){ flex:0 0 auto; min-height:0; }
  .topic-list{ overflow-y:auto; max-height:44vh; -webkit-overflow-scrolling:touch; }
  .side-section.grow{ min-height:0; flex:1 1 auto; }
  .recent-list{ overflow-y:auto; max-height:16vh; }
  .side-foot{ flex:0 0 auto; }
  .topic{ padding:9px 10px; }          /* easier to tap */
}

/* ---------- key points ---------- */
.block.keypts .block-label::before{ background:#c084fc; }
.kp-list{
  margin:0; padding:0; list-style:none;
  counter-reset:kp; display:flex; flex-direction:column; gap:6px;
}
.kp-list li{
  counter-increment:kp;
  position:relative; padding:7px 12px 7px 34px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  border-radius:9px; font-size:13.6px; line-height:1.45;
}
.kp-list li::before{
  content:counter(kp);
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:color-mix(in srgb,#c084fc 22%,transparent);
  color:#c084fc; font-size:10.5px; font-weight:800;
  display:grid; place-items:center;
}
.kp-list li b{ color:var(--ink); }

/* ---------- comparison table ---------- */
.block.cmp .block-label::before{ background:var(--accent-2); }
.cmp-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.cmp-table{ border-collapse:collapse; width:100%; font-size:13.2px; min-width:420px; }
.cmp-table th, .cmp-table td{
  padding:8px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.cmp-table thead th{
  background:var(--panel-2); font-size:11px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--ink-2); font-weight:700;
  position:sticky; top:0;
}
.cmp-table thead th:nth-child(2){ color:var(--accent); }
.cmp-table thead th:nth-child(3){ color:var(--accent-2); }
.cmp-table tbody th{
  font-weight:600; color:var(--ink-2); font-size:12.4px; width:26%;
  background:color-mix(in srgb,var(--panel-2) 55%,transparent);
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td{ border-bottom:0; }
.cmp-table td{ color:var(--ink); }

@media (max-width:760px){
  .kp-list li{ font-size:13px; padding-left:31px; }
  .cmp-table{ font-size:12.4px; min-width:360px; }
  .cmp-table th, .cmp-table td{ padding:7px 9px; }
}

/* ============================================================
   Assistant-style answer — prose, not a reference card
   ============================================================ */
.thread{ scroll-padding-bottom:120px; }
.wrap{ max-width:764px; }

/* the reply reads as one piece of writing */
.a-head{ display:flex; align-items:flex-start; gap:12px; margin:0 0 14px; }
.a-title{
  margin:0; font-size:21px; line-height:1.3; font-weight:650;
  letter-spacing:-.35px; color:var(--ink); flex:1; text-wrap:balance;
}
.a-chip{
  flex:0 0 auto; margin-top:3px; font-size:10.5px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; padding:3px 9px;
  border-radius:20px; border:1px solid; white-space:nowrap;
}

.a-lead{
  font-size:16.2px; line-height:1.72; color:var(--ink-2);
  margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--line-soft);
}
.a-lead p{ margin:0 0 10px; }
.a-lead p:last-child{ margin-bottom:0; }

/* the words the interviewer is listening for */
.a-keys{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin:-8px 0 22px;
}
.a-keys-lab{
  font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:var(--ink-3); margin-right:3px;
}
.a-key{
  font-size:12.3px; font-weight:600; color:var(--ink-2);
  background:var(--chip-bg, color-mix(in srgb,var(--ink-1) 7%,transparent));
  border:1px solid var(--line-soft);
  border-radius:7px; padding:3px 9px; white-space:nowrap;
}

.a-h{
  margin:26px 0 10px; font-size:13.4px; font-weight:700;
  letter-spacing:.2px; color:var(--ink);
}
.a-h:first-child{ margin-top:0; }

.a-body{ font-size:15.6px; line-height:1.75; color:var(--ink); }
.a-body p{ margin:0 0 13px; }
.a-body p:last-child{ margin-bottom:0; }
.a-body ul{ margin:10px 0 14px; padding-left:20px; }
.a-body li{ margin-bottom:8px; line-height:1.68; }
.a-body li::marker{ color:var(--ink-3); }
.a-body b{ font-weight:650; color:var(--ink); }

/* key points: a plain numbered list, no chips or boxes */
.a-kp{ margin:0; padding-left:20px; font-size:15.2px; line-height:1.68; }
.a-kp li{ margin-bottom:8px; padding-left:3px; }
.a-kp li::marker{ color:var(--accent); font-weight:700; }

/* code with a real header, like every assistant ships */
.a-code{ margin:16px 0 20px; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.a-code figcaption{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 13px; background:var(--panel-2); border-bottom:1px solid var(--line);
}
.a-lang{ font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.a-copycode{
  background:none; border:0; color:var(--ink-3); cursor:pointer;
  font-size:11.5px; padding:2px 6px; border-radius:6px;
}
.a-copycode:hover{ color:var(--ink); background:var(--chip); }
.a-code pre{ margin:0; border:0; border-radius:0; background:var(--bg-2); padding:14px 15px; }

/* a quiet left rule instead of a tinted box */
.a-note{
  font-size:15.2px; line-height:1.72; color:var(--ink-2);
  border-left:2px solid color-mix(in srgb,var(--warn) 55%,transparent);
  padding:2px 0 2px 15px; margin:0;
}
.a-note.tip{ border-left-color:color-mix(in srgb,var(--accent-2) 60%,transparent); }
.a-note p{ margin:0 0 9px; }
.a-note p:last-child{ margin-bottom:0; }

.a-remember{
  margin:24px 0 0; padding-top:15px; border-top:1px solid var(--line-soft);
  font-size:14.2px; color:var(--ink-2); line-height:1.6;
}
.a-remember b{ color:var(--ink); font-weight:650; }

/* actions sit quietly until you hover the message */
.a-actions{ display:flex; align-items:center; gap:4px; margin-top:16px; }
.a-act{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; color:var(--ink-3); cursor:pointer;
  font-size:12.3px; padding:6px 9px; border-radius:8px; transition:.14s;
}
.a-act:hover{ background:var(--panel-2); color:var(--ink); }
.a-act.on{ color:var(--accent); }
.a-ms{ margin-left:auto; font-size:10.5px; color:var(--ink-3); opacity:0; transition:.2s; font-variant-numeric:tabular-nums; }
.row.bot:hover .a-ms{ opacity:.8; }

.a-rel{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft); }
.a-rel .a-h{ margin-top:0; }

/* word-by-word streaming */
.w{ transition:opacity .16s ease; }
.w-off{ opacity:0; }
.blk-off{ opacity:0; transform:translateY(4px); }
pre, .cmp-wrap, .a-rel, .a-actions{ transition:opacity .22s ease, transform .22s ease; }

/* the old card chrome is gone */
.block, .block-label, .say, .proj-box, .remember, .ans-head, .ans-title,
.ans-actions, .act, .badge, .score, .tags, .tag, .kp-list, .keypts{ all:revert; }

@media (max-width:760px){
  .a-title{ font-size:18.5px; }
  .a-lead{ font-size:15.3px; }
  .a-body, .a-note{ font-size:15px; }
  .a-kp{ font-size:14.6px; }
  .a-act span{ display:none; }
  .a-act{ padding:9px 11px; }
}

/* comparison table inside the new prose layout */
.cmp-wrap{ margin:10px 0 18px; }
.cmp-table thead th{ background:var(--panel-2); }

/* ---------- the spoken script ---------- */
.a-script{
  margin:0 0 4px; padding:14px 16px 14px 18px;
  background:color-mix(in srgb,var(--accent) 7%,var(--panel));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-left:3px solid var(--accent);
  border-radius:10px;
  font-size:15.6px; line-height:1.78; color:var(--ink);
}
.a-script p{ margin:0 0 11px; }
.a-script p:last-child{ margin-bottom:0; }

/* ---------- what they ask next ---------- */
.a-fu{ margin:0; }
.a-fu dt{
  font-size:14.4px; font-weight:650; color:var(--ink);
  margin:14px 0 5px; padding-left:19px; position:relative;
}
.a-fu dt:first-child{ margin-top:0; }
.a-fu dt::before{
  content:"Q"; position:absolute; left:0; top:1px;
  font-size:10.5px; font-weight:800; color:var(--accent-2);
  background:color-mix(in srgb,var(--accent-2) 16%,transparent);
  width:14px; height:14px; border-radius:4px; display:grid; place-items:center;
}
.a-fu dd{
  margin:0 0 0 19px; font-size:14.6px; line-height:1.68; color:var(--ink-2);
}

@media (max-width:760px){
  .a-script{ font-size:15px; padding:12px 13px 12px 15px; }
  .a-fu dt{ font-size:14px; }
  .a-fu dd{ font-size:14.2px; }
}

/* ================= TOPIC FILTER BAR =================
   The topic filter used to live only in a dropdown and the sidebar, so a
   search ran across everything without it being obvious. As a chip row it
   is always in view: one click pins the search to a subject, a second
   click on the same chip clears it.                                      */
.filterbar{
  flex:0 0 auto; display:flex; gap:7px; align-items:center;
  padding:9px 18px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--bg) 85%,transparent);
}
.filterbar::-webkit-scrollbar{ height:0 }
.fchip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:transparent; border:1px solid var(--line); color:var(--ink-2);
  padding:5px 11px; border-radius:18px; font-size:12.4px; cursor:pointer;
  font-family:inherit; transition:border-color .13s, color .13s, background .13s;
}
.fchip:hover{ color:var(--ink); border-color:var(--ink-3); }
.fchip .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.fchip .fcnt{ font-size:10.8px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.fchip.active{
  color:var(--ink); font-weight:600;
  border-color:var(--topic-color,var(--accent));
  background:color-mix(in srgb,var(--topic-color,var(--accent)) 14%,transparent);
}
.fchip.active .fcnt{ color:var(--ink-2); }

/* ================= NO DIRECT ANSWER =================
   Shown in place of an answer when the best match is weak. Every row
   carries its topic badge, so it is plain at a glance which subject the
   suggestion comes from — the failure this replaces was a SQL answer
   arriving silently in response to a C# question.                        */
.nomatch{ font-size:14px; color:var(--ink-2); }
.nm-lead{ margin:0 0 2px; font-size:15px; color:var(--ink); }
.nm-sub{ margin:12px 0 8px; font-size:13px; color:var(--ink-3); }
.nm-foot{ margin:14px 0 0; font-size:12.6px; color:var(--ink-3); }
.near-list{ display:flex; flex-direction:column; gap:6px; }
.near{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:1px solid var(--line); color:var(--ink-2);
  padding:9px 12px; border-radius:10px; cursor:pointer; font-family:inherit; font-size:13.6px;
  transition:border-color .13s, background .13s;
}
.near:hover{ border-color:var(--accent-2); background:var(--panel); color:var(--ink); }
.near .mini{
  font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:2px 7px; border-radius:12px; border:1px solid; white-space:nowrap; flex:0 0 auto;
}
.near-q{ min-width:0; }

@media (max-width:760px){
  .filterbar{ padding:8px 14px; }
  .fchip{ padding:6px 11px; }
  .near{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* A short window used to squash the footer onto the last topic: the topic
   list now scrolls instead, and the footer keeps its own height. */
.side-section{ flex:0 1 auto; }
.side-section .topic-list{ overflow-y:auto; scrollbar-width:thin; }
.side-foot{ flex:0 0 auto; }