:root{
  --bg:#0b0c10; --rail:#0e1015; --panel:#12141b; --line:#20242e;
  --ink:#e6e8ee; --ink-dim:#8b93a5; --ink-faint:#5d6577;
  --accent:#5eead4; --accent-dim:#134e4a;
  --user:#1b2030; --warn:#f5c451; --err:#ff7b72;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 var(--sans);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}

#app{display:grid;grid-template-columns:232px 1fr;height:100vh}

/* ---------------------------------------------------------------- rail */
#rail{background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.rail-head{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.brand{font:600 15px var(--mono);letter-spacing:.06em;color:var(--accent)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:8px;padding:4px 9px;color:var(--ink-dim)}
.ghost:hover{border-color:#39414f;color:var(--ink)}
.ghost.wide{width:100%;text-align:left;padding:8px 10px}
.rail-group{padding:8px 10px;min-height:0;overflow:auto}
.rail-label{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding:6px 4px}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list li{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;color:var(--ink-dim);
  cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-list li:hover{background:#161922;color:var(--ink)}
.rail-list li.on{background:#171b25;color:var(--ink)}
.rail-list li.on .dot{background:var(--accent)}
.dot{width:7px;height:7px;border-radius:50%;background:#39414f;flex:0 0 auto}
.rail-list li .x{margin-left:auto;color:var(--ink-faint);opacity:0;font-size:15px;line-height:1}
.rail-list li:hover .x{opacity:1}
.rail-list li .x:hover{color:var(--err)}
.rail-foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);display:grid;gap:8px}
.home{color:var(--ink-faint);text-decoration:none;font-size:12px;padding:0 2px}
.home:hover{color:var(--ink-dim)}

/* ---------------------------------------------------------------- main */
#main{display:flex;flex-direction:column;min-width:0;min-height:0}
#topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--rail)}
.crumb{font:12.5px var(--mono);color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{margin-left:auto}
.badge{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid}
.badge-ok{color:var(--accent);border-color:var(--accent-dim);background:#0d201d}
.badge-warn{color:var(--warn);border-color:#4a3c14;background:#1e1808}

/* -------------------------------------------------------------- thread */
#thread{flex:1;overflow-y:auto;padding:26px 20px 8px;scroll-behavior:smooth}
.msg{max-width:820px;margin:0 auto 22px;display:grid;grid-template-columns:78px 1fr;gap:14px}
.who{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);padding-top:3px;text-align:right}
.msg.user .who{color:var(--ink-dim)}
.msg.assistant .who{color:var(--accent)}
.bubble{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user .bubble{background:var(--user);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.msg.error .who{color:var(--err)}
.msg.error .bubble{color:var(--err);background:#1d1113;border:1px solid #4a1f22;border-radius:12px;padding:11px 14px}
.bubble code{background:#1a1e28;border-radius:4px;padding:1px 5px;font:12.5px var(--mono)}
.bubble pre{background:#0f1219;border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow-x:auto}
.bubble pre code{background:none;padding:0}
.cursor{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.empty{max-width:620px;margin:9vh auto 0;text-align:center;color:var(--ink-dim)}
.empty h1{font-size:26px;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em}
.empty p{margin:0 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{background:#141821;border:1px solid var(--line);border-radius:999px;padding:8px 15px;color:var(--ink-dim);font-size:13px}
.chip:hover{border-color:var(--accent-dim);color:var(--ink)}

/* ------------------------------------------------------------ composer */
#composer{border-top:1px solid var(--line);background:var(--rail);padding:12px 20px 14px}
.composer-inner{max-width:820px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px}
.composer-inner:focus-within{border-color:#313a49}
#input{flex:1;background:transparent;border:0;outline:none;color:var(--ink);font:14px/1.55 var(--sans);
  resize:none;max-height:190px;padding:6px 0}
#input::placeholder{color:var(--ink-faint)}
#send{background:var(--accent);color:#07211d;border:0;border-radius:10px;width:34px;height:34px;
  font-size:16px;font-weight:700;flex:0 0 auto}
#send:disabled{background:#243036;color:var(--ink-faint);cursor:not-allowed}
.composer-meta{max-width:820px;margin:7px auto 0;display:flex;font:11.5px var(--mono);color:var(--ink-faint)}

/* ------------------------------------------------------------- modal */
dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:16px;
  padding:0;width:min(520px,92vw)}
dialog::backdrop{background:rgba(4,6,10,.72)}
.dlg-head{padding:16px 20px 4px}
.dlg-head h2{margin:0 0 3px;font-size:17px}
.dlg-head p{margin:0;color:var(--ink-dim);font-size:13px}
.dlg-body{padding:14px 20px;display:grid;gap:14px;max-height:60vh;overflow:auto}
.field label{display:block;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.field input{width:100%;background:#0e1118;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  color:var(--ink);font:13px var(--mono);outline:none}
.field input:focus{border-color:#313a49}
.field .hint{font-size:11.5px;color:var(--ink-faint);margin-top:5px}
.dlg-foot{padding:12px 20px 18px;display:flex;gap:9px;justify-content:flex-end;border-top:1px solid var(--line)}
.primary{background:var(--accent);color:#07211d;border:0;border-radius:9px;padding:9px 16px;font-weight:600}

@media(max-width:760px){
  #app{grid-template-columns:1fr}
  #rail{position:fixed;inset:0 auto 0 0;width:232px;z-index:20;transform:translateX(-100%);transition:transform .2s}
  #rail.open{transform:none}
  .msg{grid-template-columns:1fr;gap:5px}
  .who{text-align:left}
}