:root{--bg:#f6f6f4;--panel:#fff;--fg:#1d1d1f;--muted:#6b6b70;--line:#e2e2de;--accent:#2f6fde;--danger:#c0392b;--me:#e9f0fd;--code:#f0f0ec}
@media (prefers-color-scheme:dark){:root{--bg:#141416;--panel:#1d1d20;--fg:#ececf0;--muted:#9a9aa3;--line:#2e2e33;--accent:#6b9cff;--danger:#ff6b5b;--me:#1f2a40;--code:#26262b}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none!important}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:8px;padding:7px 12px;cursor:pointer;text-decoration:none;display:inline-block}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger,.danger{color:var(--danger)}
button.danger.primary,#btn-stop{background:var(--danger);color:#fff;border-color:var(--danger)}
button.icon,label.icon{border:none;background:none;padding:6px 8px;font-size:18px;cursor:pointer}
input,textarea{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
.muted{color:var(--muted)}.small{font-size:13px}.msg{min-height:1.2em;color:var(--danger)}
code{background:var(--code);padding:1px 4px;border-radius:4px}
.screen{display:flex;align-items:center;justify-content:center;min-height:100%;padding:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px}
.card h1{margin:0;font-size:22px}
details{display:flex;flex-direction:column;gap:8px}details>*{margin-top:8px}
#app{display:flex;height:100%;height:100dvh}
aside{width:280px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}
.side-top,.side-bottom{padding:12px;display:flex;gap:8px;flex-direction:column}.side-top{flex-direction:row}
.side-top .primary{flex:1}
#chats{list-style:none;margin:0;padding:0 6px;overflow-y:auto;flex:1}
#chats li{padding:8px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chats li.active{background:var(--me)}#chats li:hover{background:var(--code)}
#chats li .busy{color:var(--accent)}
main{flex:1;display:flex;flex-direction:column;min-width:0}
header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
header h2{flex:1;font-size:16px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.m{max-width:860px;width:100%;margin:0 auto}
.m.user .bubble{background:var(--me);border-radius:12px;padding:10px 14px;margin-left:auto;max-width:85%;white-space:pre-wrap;word-wrap:break-word;width:fit-content}
.m.assistant .bubble{overflow-wrap:anywhere}
.bubble pre{background:var(--code);padding:10px;border-radius:8px;overflow-x:auto}
.bubble table{border-collapse:collapse;display:block;overflow-x:auto}.bubble td,.bubble th{border:1px solid var(--line);padding:4px 8px}
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:13px;background:var(--panel);max-width:100%}
.chip a{color:var(--accent)}.chip .err{color:var(--danger)}
.note{font-size:13px;color:var(--muted);margin-top:4px}.note.err{color:var(--danger)}
details.think{font-size:13px;color:var(--muted);margin-bottom:6px}details.think pre{white-space:pre-wrap;font:inherit}
footer{border-top:1px solid var(--line);background:var(--panel);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.composer{display:flex;gap:6px;align-items:flex-end;max-width:860px;margin:0 auto}
.composer textarea{resize:none;max-height:40vh}
#attach-list{display:flex;flex-wrap:wrap;gap:6px;max-width:860px;margin:0 auto 6px}
#status{max-width:860px;margin:4px auto 0}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);max-width:520px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
dialog li{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
dialog input{margin:6px 0}
.only-mobile{display:none}
@media (max-width:760px){
  aside{position:fixed;inset:0 auto 0 0;z-index:5;width:86%;max-width:320px;transform:translateX(-100%);transition:transform .2s}
  aside.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .only-mobile{display:inline-block}
  #msgs{padding:10px}
  .m.user .bubble{max-width:92%}
}