:root{--bg:#0f1115;--panel:#161a21;--line:#262c36;--fg:#e8ebf0;--mute:#9aa3b2;--acc:#6aa7ff;--accfg:#06101f;--err:#ff7a7a;--me:#1d2a44;--bot:#1a1f28}
@media (prefers-color-scheme:light){:root{--bg:#f6f7f9;--panel:#fff;--line:#dfe3ea;--fg:#14171c;--mute:#5b6676;--acc:#1f6feb;--accfg:#fff;--err:#c62828;--me:#e3eeff;--bot:#fff}}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
[hidden]{display:none!important}
button{font:inherit;border:0;border-radius:10px;padding:.6rem 1rem;background:var(--acc);color:var(--accfg);cursor:pointer;min-height:44px}
button.ghost{background:transparent;color:var(--mute);border:1px solid var(--line)}
button:disabled{opacity:.5;cursor:default}
input,textarea,select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.65rem .8rem;width:100%;min-height:44px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.card{max-width:26rem;margin:8vh auto;padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.card h1{margin:.2rem 0 1rem;font-size:1.4rem}.stack{display:grid;gap:.9rem}label{display:grid;gap:.3rem;color:var(--mute);font-size:.9rem}
.error{color:var(--err);min-height:1.5em;margin:.8rem 0 0}.secret{word-break:break-all;background:var(--bg);padding:.5rem;border-radius:8px;border:1px solid var(--line)}
.codes{background:var(--bg);padding:.8rem;border-radius:8px;border:1px solid var(--line);font-size:1.05rem;line-height:1.8}
#qr{background:#fff;padding:6px;border-radius:8px;justify-self:center}
#app{display:grid;grid-template-columns:18rem 1fr;height:100dvh}
#side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.side-head{display:flex;gap:.5rem;padding:.8rem}.side-head button:first-child{flex:1}
#convs{list-style:none;margin:0;padding:0 .5rem;overflow:auto;flex:1}
#convs li button{width:100%;text-align:left;background:transparent;color:var(--fg);padding:.55rem .7rem;border-radius:8px;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#convs li button[aria-current=true]{background:var(--me)}
.side-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.8rem;border-top:1px solid var(--line);color:var(--mute);font-size:.85rem}
.side-foot span{overflow:hidden;text-overflow:ellipsis}
#main{display:flex;flex-direction:column;min-width:0;min-height:0}
#main header{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
#title{flex:1;font-size:1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc{display:flex;align-items:center;gap:.4rem;font-size:.8rem}.dc select{width:auto;min-height:38px;padding:.3rem .5rem}
#msgs{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.m{max-width:min(46rem,92%);padding:.7rem .9rem;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line)}
.m.user{align-self:flex-end;background:var(--me)}.m.assistant{align-self:flex-start;background:var(--bot)}
.m small{display:block;color:var(--mute);margin-top:.4rem;font-size:.75rem}.m.failed{border-color:var(--err)}
.empty{color:var(--mute);margin:auto;text-align:center;max-width:28rem}
#composer{display:flex;gap:.6rem;padding:.7rem .9rem;border-top:1px solid var(--line);align-items:flex-end}
#composer textarea{resize:none;max-height:10rem}
#composer .send{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}
.kn{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--mute);white-space:nowrap}.kn input{width:auto;min-height:0}
.sources{margin-top:.6rem;padding-top:.5rem;border-top:1px dashed var(--line);font-size:.85rem}.sources a{color:var(--acc);overflow-wrap:anywhere}
.mobile-only{display:none}
@media (max-width:760px){
 #app{grid-template-columns:1fr}
 #side{position:fixed;inset:0 20% 0 0;z-index:5;transform:translateX(-100%);transition:transform .2s}
 #side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
 .mobile-only{display:inline-block}.dc{font-size:.7rem}.dc select{max-width:7.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}