:root{--bg:#eef2f6;--pan:#fff;--ink:#0f1a2a;--mut:#58677d;--line:#d5dde8;--acc:#007f86;--on:#fff;--bad:#b3261e;--ok:#0a7a4f;--me:#007f86;--them:#e4eaf2;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d0d1f;--pan:#16162e;--ink:#e7ecf6;--mut:#8f98b5;--line:#2a2a4a;--acc:#19d3d3;--on:#041a1a;--bad:#ff8a8a;--ok:#5fe0a8;--me:#0e6b73;--them:#1f2040;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0d0d1f;--pan:#16162e;--ink:#e7ecf6;--mut:#8f98b5;--line:#2a2a4a;--acc:#19d3d3;--on:#041a1a;--bad:#ff8a8a;--ok:#5fe0a8;--me:#0e6b73;--them:#1f2040;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--ink);font:16px/1.45 "Avenir Next","Segoe UI",system-ui,sans-serif}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--pan);border-radius:10px;padding:.5rem .8rem}
button.p{background:var(--acc);color:var(--on);border-color:transparent;font-weight:600}
button:disabled{opacity:.55}
button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input[type=text],input[type=password]{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:.65rem .75rem}
.mut{color:var(--mut)}.sm{font-size:.8rem}.bad{color:var(--bad)}.grow{flex:1;min-width:0}
#lock{height:100%;display:grid;place-items:center;padding:1rem}
.card{width:min(100%,28rem);background:var(--pan);border:1px solid var(--line);border-radius:16px;padding:1.3rem;display:grid;gap:.8rem}
.card h1{margin:0;font-size:1.4rem}.card p{margin:0;font-size:.9rem}
#app{height:100%;display:grid;grid-template-columns:minmax(0,1fr)}
#side,#chat{min-height:0;display:none;flex-direction:column;background:var(--pan)}
#app[data-v=list] #side,#app[data-v=chat] #chat{display:flex}
header{display:flex;gap:.5rem;align-items:center;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.back{padding:.4rem .7rem}
#cl{overflow-y:auto;flex:1}
.ct{display:flex;gap:.6rem;align-items:center;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left;padding:.8rem}
.ct.on{background:var(--bg)}.ct .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{background:var(--acc);color:var(--on);border-radius:99px;font-size:.75rem;padding:0 .5rem;font-weight:700}
.empty{color:var(--mut);padding:1.5rem;text-align:center;font-size:.92rem}
#ms{flex:1;min-height:0;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.45rem;background:var(--bg)}
.b{max-width:82%;padding:.5rem .75rem;border-radius:14px;overflow-wrap:anywhere}
.b small{display:block;opacity:.7;font-size:.72rem;margin-top:.15rem}
.b.out{align-self:flex-end;background:var(--me);color:#fff;border-bottom-right-radius:4px}
.b.in{align-self:flex-start;background:var(--them);border-bottom-left-radius:4px}
.b audio{width:min(16rem,100%)}.b button{margin-top:.3rem}
.sys{align-self:center;color:var(--mut);font-size:.8rem}
#cp{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line)}#cp input[type=text]{flex:1}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:1rem}
.toast{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.5rem .9rem;border-radius:10px;font-size:.88rem;opacity:0;pointer-events:none;max-width:90%}
.toast.on{opacity:1}
@media(min-width:800px){#app{grid-template-columns:20rem minmax(0,1fr)}#side,#chat{display:flex!important}#side{border-right:1px solid var(--line)}.back{display:none}}

#ovc{max-height:90vh;overflow-y:auto}
button.warn{color:var(--bad);border-color:var(--bad)}
.photo img{display:block;max-width:min(16rem,100%);max-height:16rem;border-radius:10px;cursor:zoom-in}
.phx{font-size:.88rem;opacity:.8;padding:.4rem 0}
#ovc>img{max-width:100%;max-height:70vh;border-radius:10px;justify-self:center}
.vp{display:flex;align-items:center;gap:.5rem;min-width:13.5rem}
.b .vp button{margin-top:0}
.vp .pp{width:2.5rem;height:2.5rem;border-radius:99px;padding:0;border:0;background:var(--acc);color:var(--on);font-size:.85rem;flex:none}
.vp input[type=range]{flex:1;min-width:4rem;accent-color:var(--acc)}
.vp .vt{font-size:.78rem;min-width:2.7rem;text-align:right;font-variant-numeric:tabular-nums}
.vp .sp{padding:.2rem .5rem;font-size:.75rem;border-radius:99px;flex:none}
.b.out .vp .pp{background:#fff;color:var(--me)}
.b.out .vp input[type=range]{accent-color:#fff}
.b.out .vp .sp{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}