:root{--bg:#171b27;--tx:#eaeefb;--mu:#8792ae;--ac:#7c8cff;--ac2:#c07bff;--ok:#43e6a5;--hi:#283048;--lo:#0a0d14;
--out:8px 8px 18px var(--lo),-6px -6px 16px var(--hi);--in:inset 4px 4px 10px var(--lo),inset -4px -4px 10px var(--hi);
--shine:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,0) 48%);--grad:linear-gradient(135deg,var(--ac),var(--ac2))}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:radial-gradient(circle at 12% 0,#2b3455,var(--bg) 58%) fixed;color:var(--tx);font:15px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;touch-action:manipulation;-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit;border:0;outline:0;background:none}
button,label{cursor:pointer}
input{font-size:16px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
small{color:var(--mu)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ambient glow */
.orb{position:fixed;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.28;pointer-events:none;z-index:-1}
.o1{top:-18vmax;left:-14vmax;background:var(--ac)}
.o2{bottom:-22vmax;right:-14vmax;background:var(--ac2)}

.glass{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid rgba(255,255,255,.1);box-shadow:var(--out),inset 0 1px 0 rgba(255,255,255,.14)}
.field{width:100%;padding:13px 20px;border-radius:999px;background:var(--bg);box-shadow:var(--in);transition:box-shadow .2s}
.field::placeholder{color:var(--mu)}
.field:focus{box-shadow:var(--in),0 0 0 2px rgba(124,140,255,.5),0 0 18px rgba(124,140,255,.25)}
.pill{padding:10px 20px;border-radius:999px;background:var(--shine),var(--bg);box-shadow:var(--out),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.pill:active,.round:active{transform:scale(.94);box-shadow:var(--in)}
.pill.sm{padding:6px 14px;font-size:13px}
.pill.big{background:var(--shine),var(--grad);padding:14px;font-weight:600;width:100%;box-shadow:var(--out),0 8px 26px rgba(124,140,255,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.pill:disabled{opacity:.6;pointer-events:none}
.round{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--shine),var(--bg);box-shadow:var(--out),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .15s,box-shadow .15s}
.round.go{background:var(--shine),var(--grad);box-shadow:var(--out),0 6px 20px rgba(124,140,255,.4)}

/* auth */
#auth{position:fixed;inset:0;display:grid;place-items:center;padding:16px}
html.in #auth,html:not(.in) .app{display:none}
.card{width:min(380px,100%);padding:30px 26px;border-radius:34px;display:flex;flex-direction:column;gap:14px}
.logo{display:flex;align-items:center;justify-content:center;gap:12px}
.logo img{width:46px;height:46px;border-radius:15px;box-shadow:var(--out)}
h1{font-size:26px;letter-spacing:.5px}
.tabs{display:flex;padding:5px;border-radius:999px;background:var(--bg);box-shadow:var(--in)}
.tabs button{flex:1;padding:9px;border-radius:999px;color:var(--mu);transition:.25s}
.tabs .on{color:#fff;background:var(--shine),var(--grad);box-shadow:var(--out)}
.names{display:none;gap:10px}
.up .names{display:flex}
.names .field{min-width:0}

/* layout */
.app{height:100dvh;max-width:1180px;margin:auto;padding:16px;display:grid;grid-template-columns:330px 1fr;gap:16px}
.side,.main{border-radius:32px;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.side{padding:16px;gap:14px}
.top{display:flex;align-items:center;gap:12px;flex:none}
.rt{flex:1;min-width:0;display:flex;flex-direction:column}
.rt b,.rt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--shine),var(--grad);box-shadow:var(--out),inset 0 1px 0 rgba(255,255,255,.3)}
.av img{width:100%;height:100%;border-radius:50%}
.rows{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:6px;scrollbar-width:none}
.rows::-webkit-scrollbar,.msgs::-webkit-scrollbar{display:none}
#list{flex:1;min-height:0}
.row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;background:var(--shine),var(--bg);box-shadow:var(--out);cursor:pointer;transition:box-shadow .2s}
.row.on{box-shadow:var(--in)}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:#3a4256;box-shadow:var(--in)}
.dot.live{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.empty{text-align:center;color:var(--mu);padding:14px;font-size:14px}

/* chat */
.ph{flex:1;display:grid;place-items:center}
.ph img{width:104px;height:104px;border-radius:30px;opacity:.35;filter:grayscale(.4);box-shadow:var(--out)}
.pane{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px;gap:14px}
.back{display:none}
#hs.live{color:var(--ok)}
.msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px;overscroll-behavior:contain;scrollbar-width:none}
.bub,.file{max-width:min(78%,440px);padding:10px 16px;border-radius:22px;word-break:break-word;white-space:pre-wrap}
.bub small{display:block;font-size:10px;text-align:right;margin-top:2px;opacity:.7;color:inherit}
.me{align-self:flex-end;background:var(--shine),var(--grad);box-shadow:var(--out),inset 0 1px 0 rgba(255,255,255,.3);border-bottom-right-radius:8px}
.them{align-self:flex-start;background:var(--shine),var(--bg);box-shadow:var(--out),inset 0 1px 0 rgba(255,255,255,.08);border-bottom-left-radius:8px}
.file{width:min(78%,340px);display:flex;flex-direction:column;gap:8px;white-space:normal}
.file b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file.me small{color:rgba(255,255,255,.8)}
.bar{height:10px;border-radius:999px;background:var(--bg);box-shadow:var(--in);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--ok),#5be7ff);box-shadow:0 0 10px rgba(91,231,255,.6);transition:width .12s linear}
.fr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc{flex:1;font-size:12px;min-width:110px}
.comp{flex:none;display:flex;align-items:center;gap:10px}
.comp.off{opacity:.4;pointer-events:none}

/* modal & toasts */
#modal{position:fixed;inset:0;display:none;place-items:center;padding:16px;background:rgba(6,8,14,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:20}
#modal.show{display:grid}
.mbox{position:relative;max-width:min(920px,100%);max-height:100%;padding:56px 16px 16px;border-radius:30px;overflow:auto}
#x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:42px;height:42px;z-index:2}
#mb img,#mb video{display:block;max-width:100%;max-height:72vh;border-radius:18px;margin:auto}
#mb audio{display:block;width:min(420px,80vw)}
#mb iframe{display:block;width:min(800px,86vw);height:70vh;border:0;border-radius:18px;background:#fff}
#mb pre{max-height:70vh;overflow:auto;padding:14px;border-radius:18px;background:var(--bg);box-shadow:var(--in);font:13px/1.5 Consolas,monospace;white-space:pre-wrap;word-break:break-word}
#toasts{position:fixed;top:calc(14px + env(safe-area-inset-top));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:30}
.toast{max-width:90vw;padding:9px 20px;border-radius:999px;font-size:14px;background:rgba(30,36,54,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:var(--out);animation:in .25s ease}
.toast.out{opacity:0;transform:translateY(-8px);transition:.35s}
@keyframes in{from{opacity:0;transform:translateY(-10px)}}

@media(max-width:760px){
  .app{grid-template-columns:1fr;padding:8px;position:relative;overflow:hidden}
  .side,.main{border-radius:28px}
  .main{position:absolute;inset:8px;transform:translateX(112%);transition:transform .3s ease}
  .app.chat .main{transform:none}
  .back{display:grid}
  .pane{padding:12px}
  .bub,.file{max-width:88%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* profiles, drag & drop */
.av{font-size:19px;overflow:hidden}
.lk{cursor:pointer}
.row small.lk:hover,.rt.lk:hover small{color:var(--tx)}
.main.drag{box-shadow:var(--out),0 0 0 2px var(--ac),0 0 44px rgba(124,140,255,.4)}
.prof{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(340px,80vw);text-align:center}
.prof h2{font-size:20px;line-height:1.2;word-break:break-word}
.prof p{color:var(--mu);font-size:14px;word-break:break-word}
.ban{width:100%;height:92px;border-radius:24px;background:var(--shine),var(--grad);box-shadow:var(--out),inset 0 1px 0 rgba(255,255,255,.3)}
.av.xl{width:88px;height:88px;font-size:40px;margin-top:-50px;border:4px solid var(--bg)}
.stats{display:flex;gap:8px;width:100%}
.stat{flex:1;min-width:0;padding:9px 6px;border-radius:20px;background:var(--bg);box-shadow:var(--in);display:flex;flex-direction:column;font-size:13px}
.stat small{font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:var(--shine),var(--bg);box-shadow:var(--out);transition:transform .15s}
.chip.on{box-shadow:var(--in),0 0 0 2px var(--ac);transform:scale(.92)}
#mb video{width:min(880px,88vw);background:#000}

/* inline previews & viewer */
.pv{position:relative;height:160px;border-radius:18px;overflow:hidden;background:var(--bg);box-shadow:var(--in);cursor:pointer;display:grid;place-items:center;flex:none}
.pv img,.pv video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pv.video::after{content:'▶';position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;background:rgba(10,13,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:var(--out);pointer-events:none}
.pv.audio,.pv.pdf{height:64px;display:flex;align-items:center;gap:12px;padding:0 14px}
.pv .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:700;color:#fff;background:var(--shine),var(--grad);box-shadow:var(--out)}
.pv.text{height:92px;place-items:start}
.pv pre{width:100%;height:100%;padding:10px 12px;overflow:hidden;font:11px/1.45 Consolas,monospace;white-space:pre-wrap;word-break:break-word;text-align:left;color:var(--mu);pointer-events:none}
.file.me .pv pre{color:var(--tx)}
#mb img,#mb video{max-height:66vh}
#mb pre{max-height:62vh}
.vbar{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.vbar .round{width:40px;height:40px;font-size:22px;line-height:1}
.vbar .cap{flex:1;min-width:0;max-width:300px;text-align:center;font-size:13px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.vbar{flex-wrap:wrap}.vbar .cap{order:-1;flex-basis:100%;max-width:none}}

/* viewer: close button lives on the overlay, prev/next sit on the stage */
#modal{padding:64px 16px 16px}
.mbox{padding:16px}
.vstage{position:relative;display:grid;place-items:center}
.vstage.audio{padding:10px 54px}
#mb audio{width:min(420px,calc(100vw - 170px))}
#mb iframe{width:min(780px,calc(100vw - 200px))}
.vstage.text,.vstage.pdf{padding:0 52px}
.vn{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;display:grid;place-items:center;z-index:1;color:var(--tx);background:rgba(20,24,36,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);box-shadow:var(--out);transition:transform .15s}
.vn.l{left:8px}
.vn.r{right:8px}
.vn:active{transform:scale(.92)}
@media(max-width:760px){.vstage.text,.vstage.pdf{padding:0}#mb iframe{width:calc(100vw - 64px)}}