:root{--navy:#151B27;--accent:#2F7FD6;--accl:#8DBEFF;--green:#23A06D;--red:#DC4F58;--orange:#E8903A;--bg:#0A0E14;--card:#171E2B;--card2:#1F2837;--line:rgba(255,255,255,.12);--ink:#EEF2F8;--mut:#9AA8BC;--r1:10px;--r2:14px;--r3:20px;--sh2:0 14px 40px rgba(0,0,0,.5);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
header{display:flex;align-items:center;gap:10px;padding:10px 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));background:var(--navy);border-bottom:1px solid var(--line);flex:none}
header img{border-radius:6px}
h1{font-size:16px;margin:0;letter-spacing:.4px;font-weight:600}
.sp{flex:1}
.chip{font-size:12px;font-weight:600;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.1)}
.chip.ok{background:rgba(35,160,109,.85)}
.chip.warn{background:rgba(232,144,58,.92);color:#1b1206}
.chip.bad{background:rgba(220,79,88,.92)}
button,input,select{font:inherit;color:inherit}
button{border:1px solid var(--line);background:var(--card2);border-radius:var(--r1);font-weight:600;cursor:pointer;transition:background .16s var(--ease),transform .12s var(--ease)}
button:hover{background:#2A3650}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accl);outline-offset:2px}
.screen{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;background:radial-gradient(120% 90% at 50% 0%,#141B29 0%,#0A0E14 70%)}
.box{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:24px;box-shadow:var(--sh2)}
.box h2{margin:0 0 6px;font-size:22px}
.sub{color:var(--mut);margin:0 0 16px;line-height:1.45;font-size:15px}
.fine{color:var(--mut);font-size:12.5px;margin:14px 0 0;text-align:center}
label{display:block;font-size:13px;color:var(--mut);margin:12px 0 5px;font-weight:600}
input[type=text],select{width:100%;height:46px;padding:0 12px;border-radius:var(--r1);border:1px solid var(--line);background:#0F141D;font-size:16px}
.info{margin:16px 0;padding:11px 13px;border-radius:var(--r1);background:rgba(232,144,58,.12);border:1px solid rgba(232,144,58,.4);font-size:14px;line-height:1.4}
.prim{width:100%;height:50px;background:var(--accent);border-color:var(--accent);color:#fff;font-size:16px}
.prim:hover{background:#4290E6}
.prim:disabled{opacity:.5;cursor:default}

#vCall{flex:1;display:flex;min-height:0}
.stage{position:relative;flex:1;min-width:0;background:radial-gradient(120% 100% at 50% 0%,#141B29 0%,#0A0E14 70%);overflow:hidden}
#remote{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#06090D;display:none}
#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px 24px 110px;color:var(--mut);line-height:1.45}
#empty b{color:var(--ink);font-size:22px;font-weight:600}
.av{width:84px;height:84px;border-radius:50%;background:linear-gradient(145deg,#3C8DEB,#1F5FB0);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:600;color:#fff;box-shadow:0 0 0 6px rgba(76,155,255,.14),0 10px 30px rgba(0,0,0,.4)}
#selfWrap{position:absolute;right:12px;top:12px;width:168px;aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;border:1px solid rgba(255,255,255,.25);background:#141A26;box-shadow:var(--sh2);z-index:3}
#self{width:100%;height:100%;object-fit:cover}
#self.cam{transform:scaleX(-1)}
#selfWrap .lbl{position:absolute;left:6px;bottom:5px;font-size:11px;font-weight:600;background:rgba(10,14,20,.65);padding:1px 7px;border-radius:99px}
#share{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;background:rgba(220,79,88,.95);padding:6px 8px 6px 14px;border-radius:99px;font-size:14px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.28);max-width:calc(100% - 24px)}
#share i{width:9px;height:9px;border-radius:50%;background:#fff;flex:none}
#share button{background:rgba(255,255,255,.2);border-color:transparent;height:32px;padding:0 12px;border-radius:99px;font-size:13px}
#toast{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:6;max-width:min(92%,520px);background:rgba(23,30,43,.97);border:1px solid var(--line);padding:10px 16px;border-radius:var(--r2);font-size:14px;line-height:1.4;box-shadow:var(--sh2);opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
#bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(6,9,13,.94) 45%)}
#bar button{position:relative;min-width:64px;height:56px;padding:4px 10px;border-radius:var(--r2);background:rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px}
#bar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bar button .sl{display:none}
#bar button.off .sl{display:block}
#bar button.off{background:var(--red)}
#bar button.on{background:var(--green)}
#bar button.end{background:var(--red)}
#bar button:disabled{opacity:.4;cursor:not-allowed}
#bdg{position:absolute;top:4px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--orange);display:none}
#bdg.on{display:block}
#menu{position:absolute;z-index:7;left:50%;transform:translateX(-50%);bottom:84px;width:min(92%,360px);background:var(--card);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh2);padding:6px;max-height:50%;overflow:auto}
#menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;font-weight:500;font-size:15px}
#menu button.sel{background:rgba(47,127,214,.25)}
#menu h3{margin:6px 12px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}

#chat{width:340px;flex:none;display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--line);min-height:0}
.ch{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.ch button{width:36px;height:36px}
#msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0}
.m{max-width:88%;padding:8px 12px;border-radius:var(--r2);background:var(--card2);line-height:1.4;font-size:15px;overflow-wrap:anywhere}
.m small{display:block;color:var(--mut);font-size:11.5px;margin-bottom:2px}
.m.ich{align-self:flex-end;background:#1F4B80}
.sys{align-self:center;color:var(--mut);font-size:12.5px;text-align:center}
#chatForm{display:flex;gap:8px;padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
#chatForm input{flex:1;min-width:0;height:46px;padding:0 12px;border-radius:var(--r1);border:1px solid var(--line);background:#0F141D;font-size:16px}
#chatForm button{height:46px;padding:0 16px;background:var(--accent);border-color:var(--accent);color:#fff}

@media (max-width:700px){
 #vCall.chatOpen .stage{display:none}
 #chat{width:100%;border-left:0}
 #vCall:not(.chatOpen) #chat{display:none}
 #selfWrap{width:112px;right:8px;top:8px}
 #bar{gap:5px;padding-left:6px;padding-right:6px}
 #bar button{min-width:0;flex:1;max-width:76px;padding:4px 2px;font-size:11px}
 #empty b{font-size:19px}
 #toast{bottom:96px}
}