:root{--bg:#fff;--fg:#0f1419;--mu:#536471;--bd:#eff3f4;--bb:#0f1419;--bt:#fff;--in:#eff3f4;--red:#f4212e}
[data-theme=dark]{--bg:#000;--fg:#e7e9ea;--mu:#71767b;--bd:#2f3336;--bb:#eff3f4;--bt:#0f1419;--in:#16181c}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font-family:Vazirmatn,system-ui,Tahoma,sans-serif;line-height:1.6}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}
input,select,textarea{width:100%;background:transparent;border:1px solid var(--bd);border-radius:12px;padding:.65rem .85rem;outline:0}
input:focus,textarea:focus,select:focus{border-color:var(--fg)}
.btn{background:var(--bb);color:var(--bt);border-radius:999px;padding:.6rem 1.3rem;font-weight:700}.btn.o{background:none;color:var(--fg);border:1px solid var(--bd)}.btn.r{background:none;color:var(--red);border:1px solid var(--red)}
.lg{height:2.2rem}.lw{display:none}[data-theme=dark] .lw{display:inline}[data-theme=dark] .lb{display:none}
.bd{background:var(--red);color:#fff;font-size:.62rem;font-weight:700;border-radius:6px;padding:0 .35rem;margin-inline:.3rem;vertical-align:middle}
.auth{max-width:22rem;margin:12vh auto;padding:1rem;display:grid;gap:.8rem}.auth h1{font-size:1.6rem}.err{color:var(--red);font-size:.88rem;min-height:1.3em}.lk{color:var(--mu);text-align:center}.lk b{color:var(--fg);cursor:pointer}
.app{display:grid;grid-template-columns:76px 340px 1fr;height:100dvh}
.tabs{grid-column:1;border-inline-end:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem .3rem}
.tabs button{padding:.45rem .3rem;border-radius:12px;color:var(--mu);font-size:.8rem;width:100%}.tabs button.on{color:var(--fg);font-weight:700;background:var(--in)}
.list{grid-column:2;border-inline-end:1px solid var(--bd);overflow:auto;display:flex;flex-direction:column}
.list .s{padding:.8rem;position:sticky;top:0;background:var(--bg)}
.main{grid-column:3;display:flex;flex-direction:column;min-height:0;overflow:auto}
.t-settings .list,.t-admin .list{display:none}.t-settings .main,.t-admin .main{grid-column:2/4}
.row{display:flex;gap:.7rem;align-items:center;padding:.75rem 1rem;width:100%;text-align:start;border-bottom:1px solid var(--bd)}.row:hover{background:var(--in)}
.av{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--bb);color:var(--bt);display:grid;place-items:center;font-weight:700;flex:none}
.row .mid{flex:1;min-width:0}.row .mid small{display:block;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.un{background:var(--bb);color:var(--bt);border-radius:999px;min-width:1.4rem;text-align:center;font-size:.75rem;padding:0 .4rem}
.empty{margin:auto;color:var(--mu);text-align:center;padding:2rem}
.ch{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--bd)}.back{display:none;font-size:1.3rem}
.msgs{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.35rem}
.m{max-width:min(30rem,82%);animation:in .2s ease}@keyframes in{from{opacity:0;transform:translateY(6px)}}
.m.o{align-self:flex-start}.m.i{align-self:flex-end}
.b{padding:.5rem .85rem;border-radius:18px;background:var(--in);white-space:pre-wrap;overflow-wrap:anywhere}.m.o .b{background:var(--bb);color:var(--bt)}
.b i{opacity:.6}.q{font-size:.8rem;color:var(--mu);border-inline-start:3px solid var(--mu);padding:0 .6rem;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt{font-size:.7rem;color:var(--mu);display:flex;gap:.4rem;padding:0 .4rem}.tk{letter-spacing:-2px}.tk.r{color:var(--red);font-weight:700}.tk.f{color:var(--red);cursor:pointer}
.rxs{display:flex;gap:.3rem;margin-top:.15rem}.rx{font-size:.78rem;border:1px solid var(--bd);border-radius:999px;padding:0 .45rem}.rx.me{border-color:var(--fg)}
.act{display:flex;gap:.2rem;margin-top:.2rem;flex-wrap:wrap}.act button{border:1px solid var(--bd);border-radius:999px;padding:0 .6rem;font-size:.82rem}
.comp{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--bd);align-items:flex-end;padding-bottom:max(.7rem,env(safe-area-inset-bottom))}.comp textarea{resize:none;max-height:8rem;border-radius:20px}
.rp{padding:.4rem 1rem;border-top:1px solid var(--bd);font-size:.85rem;color:var(--mu);display:flex;justify-content:space-between}
.pn{padding:1.2rem;max-width:36rem;display:grid;gap:.7rem;align-content:start}.pn h2{margin-top:.8rem;font-size:1.05rem}.pn label{font-size:.85rem;color:var(--mu)}
.warn{border:1px solid var(--red);color:var(--red);border-radius:12px;padding:.6rem .9rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}td{padding:.5rem .3rem;border-bottom:1px solid var(--bd)}td .btn{padding:.1rem .7rem;font-size:.78rem;margin-inline-end:.2rem}
@media(max-width:760px){
.app{grid-template-columns:1fr;grid-template-rows:1fr auto}
.tabs{grid-column:1;grid-row:2;flex-direction:row;border:0;border-top:1px solid var(--bd);padding:.3rem .5rem max(.3rem,env(safe-area-inset-bottom))}.tabs .lg{display:none}.tabs button{flex:1}
.list,.main,.t-settings .main,.t-admin .main{grid-column:1;grid-row:1}
.t-chat.c-1 .list,.t-chat.c-0 .main{display:none}.back{display:block}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}