:root{
  --paper:#F5F6F8; --card:#fff; --ink:#14171F; --soft:#4A5060; --faint:#767D8C;
  --rule:#DDE0E6; --accent:#9E2A2B; --held:#1F6F5C; --held-wash:#E3EFEB;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101219; --card:#171A22; --ink:#E9EBF0; --soft:#A2A9B8; --faint:#79808F;
    --rule:#262A34; --accent:#E5726F; --held:#54C3A3; --held-wash:#13241F;
  }
}
*{box-sizing:border-box}

/* The `hidden` attribute hides an element through the user-agent stylesheet, so
   ANY author rule that sets display beats it — .login{display:grid} left the
   login form on the page after signing in, above the app, reachable by
   scrolling. Author-level and !important so it outranks whatever a class says;
   every panel here is toggled by .hidden, so this has to be the rule that wins. */
[hidden]{display:none !important}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
h1{font:600 1.7rem/1.15 Georgia,serif;margin:0 0 4px}

/* ---- login ---- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login form{
  width:min(360px,100%);background:var(--card);border:1px solid var(--rule);
  padding:28px;display:flex;flex-direction:column;gap:6px;
}
.sub{color:var(--faint);font-size:13px;margin:0 0 18px}
label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:10px}
input{
  font:inherit;padding:10px 12px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);border-radius:0;
}
input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button{
  font:inherit;cursor:pointer;padding:10px 16px;margin-top:18px;
  background:var(--ink);color:var(--paper);border:none;
}
button[disabled]{opacity:.55;cursor:default}
.error{color:var(--accent);font-size:13.5px;margin:12px 0 0}

/* ---- app shell ---- */
.bar{
  display:flex;align-items:center;gap:14px;padding:10px 18px;
  border-bottom:1px solid var(--rule);background:var(--card);
  position:sticky;top:0;z-index:6;height:49px;
}
.brand{font:600 1rem/1 Georgia,serif}
.spacer{flex:1}
.who{color:var(--faint);font-size:13px}
.linkish{background:none;color:var(--soft);border:none;margin:0;padding:4px 6px;font-size:13px}
.linkish:hover{color:var(--ink)}

.shell{display:grid;grid-template-columns:286px 1fr;height:calc(100dvh - 49px)}
.shell.collapsed{grid-template-columns:0 1fr}

/* ---- conversation list ---- */
.side{
  border-right:1px solid var(--rule);background:var(--card);
  display:flex;flex-direction:column;overflow:hidden;min-height:0;
}
.shell.collapsed .side{display:none}
.side-head{display:flex;flex-direction:column;gap:8px;padding:12px;border-bottom:1px solid var(--rule)}
.newbtn{
  margin:0;padding:9px 12px;font-size:13.5px;background:var(--ink);color:var(--paper);
  border:none;text-align:left;
}
.hsearch{padding:7px 10px;font-size:13.5px}
.hempty{color:var(--faint);font-size:13px;padding:16px 14px;margin:0}
.hlist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
.hlist li{border-bottom:1px solid var(--rule);display:flex;align-items:flex-start}
.hlist li:hover{background:var(--paper)}
.hlist li.on{background:var(--held-wash);box-shadow:inset 3px 0 0 var(--held)}
.hitem{
  flex:1;min-width:0;padding:11px 4px 11px 12px;background:none;border:none;
  margin:0;cursor:pointer;text-align:left;
}
.hitem .q{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;
  overflow:hidden;color:var(--ink);font-size:13.5px;line-height:1.4;
}
.hitem .when{display:block;color:var(--faint);font-size:11.5px;margin-top:3px}
.hitem mark{background:transparent;color:var(--accent);font-weight:600}
.spin{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--held);
  margin-right:6px;vertical-align:1px;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;opacity:.7}}
.del{
  background:none;border:none;color:var(--faint);cursor:pointer;
  margin:0;padding:12px 10px 12px 4px;font-size:15px;line-height:1;opacity:0;flex:none;
}
.hlist li:hover .del,.del:focus-visible{opacity:1}
.del:hover{color:var(--accent)}

/* ---- conversation ---- */
.chat{display:flex;flex-direction:column;min-width:0;min-height:0}
.stream{flex:1;overflow-y:auto;padding:28px 20px 8px}
.thread{max-width:780px;margin:0 auto}
.welcome{max-width:620px;margin:8vh auto 0;color:var(--soft)}
.welcome h2{font:600 1.5rem/1.25 Georgia,serif;color:var(--ink);margin:0 0 10px}
.welcome p{margin:0;font-size:15px}

.turn{margin:0 0 26px}
.turn.user{display:flex;justify-content:flex-end}
.turn.user .body{
  background:var(--ink);color:var(--paper);padding:11px 15px;
  max-width:78%;white-space:pre-wrap;font-size:15px;border-radius:2px;
}
.turn.bot .body{font-size:15.5px}
.turn.bot .body>*:first-child{margin-top:0}
.meta{color:var(--faint);font-size:11.5px;margin:8px 0 0;font-family:"IBM Plex Mono",monospace}
.status{color:var(--held);font-size:13px;margin:0 0 8px}
.err{color:var(--accent);font-size:13.5px;margin:6px 0 0}
details.trace{margin:0 0 12px;border:1px solid var(--rule);background:var(--card)}
details.trace summary{cursor:pointer;padding:7px 11px;font-size:12.5px;color:var(--soft)}
details.trace pre{
  margin:0;padding:0 11px 11px;overflow-x:auto;white-space:pre-wrap;
  font:12px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--soft);
}
.cursor::after{content:"▍";color:var(--faint)}

.body h2,.body h3{font:600 1.12rem/1.3 Georgia,serif;margin:22px 0 8px}
.body p{margin:0 0 12px}
.body ul,.body ol{margin:0 0 12px;padding-left:22px}
.body li{margin:0 0 5px}
.body blockquote{
  margin:0 0 12px;padding:8px 14px;border-left:3px solid var(--rule);
  color:var(--soft);background:var(--card);
}
.body code{
  font:.88em/1 "IBM Plex Mono",ui-monospace,monospace;
  background:var(--card);border:1px solid var(--rule);padding:1px 5px;
}
.body hr{border:none;border-top:1px solid var(--rule);margin:18px 0}

/* ---- composer ---- */
.composer{
  display:flex;gap:10px;align-items:flex-end;
  border-top:1px solid var(--rule);background:var(--card);padding:12px 20px;
}
.composer textarea{
  flex:1;font:inherit;font-size:15px;padding:10px 12px;resize:none;max-height:40vh;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);line-height:1.5;
}
.composer button{margin:0;white-space:nowrap;padding:10px 18px}

@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;top:49px;bottom:0;left:0;right:0;z-index:5;border-right:none}
  .shell:not(.collapsed) .chat{display:none}
}