:root{--bg:#0f172a;--panel:#111827;--card:#1f2937;--line:#374151;--fg:#f3f4f6;--mut:#9ca3af;--acc:#22c55e;--acc2:#3b82f6;--bad:#ef4444}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
[hidden]{display:none!important}
button,.btn,select,input,textarea{font:inherit;color:inherit}
button,.btn{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5em .9em;cursor:pointer;text-decoration:none;display:inline-block}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
button.primary{background:var(--acc);border-color:var(--acc);color:#052e16;font-weight:700}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
button.icon{background:none;border:none;font-size:1.3em;padding:.2em .4em}
input,textarea,select{width:100%;background:#0b1220;border:1px solid var(--line);border-radius:10px;padding:.6em}
label{display:block;margin:.7em 0}label small{color:var(--mut)}
.hint{color:var(--mut);font-size:.9em}
.card-page{display:flex;min-height:100%;align-items:center;justify-content:center;padding:1em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4em;width:100%;max-width:440px}
.card h1{margin-top:0;font-size:1.5em}.card .primary{width:100%;margin-top:.6em;padding:.8em}
.qr{background:#fff;border-radius:12px;padding:8px;width:220px;margin:auto}.qr svg{width:100%;height:auto;display:block}
code{word-break:break-all}
#appView{display:grid;grid-template-columns:270px 1fr;grid-template-rows:auto 1fr;height:100dvh}
header{grid-column:1/3;display:flex;align-items:center;gap:.5em;padding:.4em .6em;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
header .title{font-weight:700;flex:1;min-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modes{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mode{border:none;border-radius:0;padding:.4em .7em;background:var(--card)}
.mode.on{background:var(--acc2);color:#fff;font-weight:700}
#provider{width:auto}
.meter{min-width:110px}.meter .bar{height:8px;background:#0b1220;border-radius:6px;overflow:hidden}.meter .bar span{display:block;height:100%;background:var(--acc);width:0}
.meter.warn .bar span{background:#f59e0b}.meter.over .bar span{background:var(--bad)}.meter small{color:var(--mut);font-size:.8em}
aside{background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:.8em}
aside h3{font-size:.85em;color:var(--mut);margin:1em 0 .3em}
aside ul{list-style:none;margin:0;padding:0}
#projList li button{width:100%;text-align:right;margin:.15em 0;background:none;border-color:transparent}
#projList li button.on{background:var(--card);border-color:var(--line);font-weight:700}
.tools{display:grid;gap:.35em}.tools>*{text-align:right}
.files li{font-size:.85em;padding:.15em 0;direction:ltr;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li a{color:#93c5fd;cursor:pointer}
.wide{width:100%}
#chat{display:flex;flex-direction:column;min-height:0}
#msgs{flex:1;overflow:auto;padding:1em;display:flex;flex-direction:column;gap:.6em}
.empty{color:var(--mut);margin:auto;text-align:center}
.m{max-width:min(760px,92%);padding:.6em .9em;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.m.user{align-self:flex-start;background:var(--acc2);color:#fff}
.m.assistant{align-self:flex-end;background:var(--card)}
.m.info{align-self:center;background:none;color:var(--mut);font-size:.9em}
.m.error{align-self:center;background:#450a0a;border:1px solid var(--bad)}
.m .meta{display:block;color:var(--mut);font-size:.75em;margin-top:.3em}
details.tool{align-self:flex-end;max-width:min(760px,92%);background:#0b1220;border:1px solid var(--line);border-radius:10px;padding:.3em .7em;font-size:.85em}
details.tool pre{white-space:pre-wrap;direction:ltr;text-align:left;max-height:300px;overflow:auto;margin:.4em 0}
details.tool.err summary{color:#fca5a5}
.typing{align-self:flex-end;color:var(--mut)}
#sendForm{display:flex;gap:.5em;padding:.6em;border-top:1px solid var(--line);background:var(--panel);padding-bottom:max(.6em,env(safe-area-inset-bottom))}
#sendForm textarea{flex:1;resize:none}
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:16px;width:min(560px,94vw);max-height:90dvh;padding:1em}
dialog::backdrop{background:#0009}
.dlg-head{display:flex;justify-content:space-between;align-items:center}
#viewerBody{white-space:pre-wrap;max-height:70dvh;overflow:auto;font-size:.85em;text-align:left}
.row{display:flex;gap:.5em;margin-top:1em}
#toast{position:fixed;top:1em;left:50%;transform:translateX(-50%);background:#000c;padding:.6em 1em;border-radius:10px;z-index:9;display:none;max-width:90vw}
#menuBtn{display:none}
@media (max-width:760px){
 #appView{grid-template-columns:1fr}
 header{grid-column:1}
 #menuBtn{display:block}
 aside{position:fixed;top:0;right:0;bottom:0;width:82vw;max-width:320px;z-index:5;transform:translateX(100%);transition:transform .2s;box-shadow:0 0 30px #000}
 aside.open{transform:none}
 .meter{min-width:80px}
 header .title{order:-1;flex-basis:50%}
}