:root {
  color-scheme: dark;
  --bg:#10141c; --surface:#1b212c; --fg:#eaedf4; --muted:#9da7b9; --border:#303847;
  --user-bg:#252b36; --tool-bg:#171d27; --code-bg:#121721; --accent:#ff9a2c; --error:#ff9b98;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f6f7fa; --surface:#fff; --fg:#202631; --muted:#606a7b; --border:#dce1e9;
  --user-bg:#fff1df; --tool-bg:#f0f2f6; --code-bg:#f4f5f8; --accent:#a95500; --error:#b52a35;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); }
body { font:15px/1.7 "Segoe UI",system-ui,sans-serif; padding:22px 32px 36px; }
main { max-width:900px; margin:auto; }
.welcome { padding:24px 28px 22px; margin:2px 0 24px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
h1 { margin:0 0 14px; font-size:20px; line-height:1.3; font-weight:600; }
.session { display:grid; grid-template-columns:max-content 1fr; gap:3px 20px; margin:0 0 16px; font-size:13px; }
.session dt { color:var(--muted); }
.session dd { margin:0; font-family:Consolas,"Cascadia Mono",monospace; overflow-wrap:anywhere; }
.welcome p { margin:0 0 8px; color:var(--fg); max-width:680px; font-size:14px; }
.welcome .hint { color:var(--muted); font-size:12.5px; }
.examples { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.examples-title { font-size:11px; font-weight:650; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.examples ul { margin:6px 0 0; padding-left:20px; font-size:13.5px; line-height:1.9; }
body.has-messages .welcome { display:none; }
.msg { margin:0 0 22px; overflow-wrap:anywhere; }
.who { font-weight:650; font-size:11px; letter-spacing:1px; text-transform:uppercase; margin:0 0 8px 2px; color:var(--muted); }
.msg.assistant .who { color:var(--accent); }
.msg.assistant .who::before { content:""; display:inline-block; width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:#f78400; margin-right:9px; }
.msg.user { margin-left:clamp(12px,8vw,96px); }
.msg.user .body { background:var(--user-bg); border:1px solid var(--border); border-radius:15px 15px 4px 15px; padding:14px 20px; white-space:pre-wrap; }
.msg.assistant .body { background:var(--surface); border:1px solid var(--border); border-radius:4px 15px 15px 15px; padding:20px 24px; }
.msg.user .files { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.msg.user .file { font-size:12px; border:1px solid var(--border); border-radius:8px; padding:2px 9px; background:var(--surface); white-space:nowrap; }
.msg.user .file::before { content:"⎘ "; color:var(--accent); }
.msg.system { margin-bottom:10px; }
.msg.system .body { color:var(--muted); font-size:12px; }
.msg.error .body { color:var(--error); border-left:3px solid var(--error); padding:10px 16px; background:var(--surface); border-radius:0 8px 8px 0; white-space:pre-wrap; }
.body>:first-child { margin-top:0; } .body>:last-child { margin-bottom:0; }
.body p { margin:0 0 12px; }
.body ul,.body ol { margin:5px 0 12px; padding-left:22px; }
.body h1,.body h2,.body h3,.body h4 { margin:18px 0 8px; font-size:1.15em; }
.body a { color:var(--accent); text-underline-offset:3px; }
.body code { background:var(--code-bg); border-radius:4px; padding:2px 5px; font:13px Consolas,"Cascadia Mono",monospace; }
.body pre { background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:16px; overflow:auto; }
.body pre code { background:none; padding:0; }
.body table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; margin:12px 0; font-size:13px; }
.body th,.body td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
.body th { background:var(--tool-bg); font-weight:600; }
.body blockquote { margin:10px 0; padding-left:15px; border-left:3px solid var(--accent); color:var(--muted); }
.tool { margin:8px 0 12px; font-size:12px; color:var(--muted); background:var(--tool-bg); border:1px solid var(--border); border-radius:9px; padding:8px 12px; }
body.hide-tools .tool { display:none; }
.tool summary { cursor:pointer; }
.tool .name { font-family:Consolas,monospace; color:var(--fg); }
.tool .ok { color:#72c996; } .tool .err { color:var(--error); }
.tool pre { margin:8px 0 0; padding:10px; background:var(--code-bg); border-radius:6px; max-height:240px; overflow:auto; font:12px/1.6 Consolas,monospace; white-space:pre-wrap; word-break:break-all; }
.thinking { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite alternate; margin:4px 6px; box-shadow:12px 0 0 #f7840060,24px 0 0 #f7840030; }
.working-label { margin-left:33px; font-size:12px; color:var(--muted); }
@keyframes pulse { from { opacity:.3; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .thinking { animation:none; } }
@media(max-width:600px) { body { padding:16px; } .welcome { padding:24px; } h1 { font-size:26px; } .msg.assistant .body { padding:16px; } }
:root { --scroll:#3a4352; --scroll-hover:#525c6e; }
:root[data-theme="light"] { --scroll:#c9cfd9; --scroll-hover:#aab2bf; }
html { scrollbar-gutter:stable; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scroll); border-radius:10px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--scroll-hover); }
::-webkit-scrollbar-corner { background:transparent; }
.body pre::-webkit-scrollbar-thumb,.tool pre::-webkit-scrollbar-thumb { border-color:var(--code-bg); }
.body table::-webkit-scrollbar-thumb { border-color:var(--surface); }