:root{
  --bg:#11151b; --panel:#1a2029; --panel2:#222a35; --line:#2b3441;
  --text:#e9eef5; --muted:#8d98a8; --accent:#5ec2a8; --accent-ink:#06231c;
  --danger:#e5575f; --warn:#e0b04a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.45 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}
.screen{height:100%}
button{font:inherit;cursor:pointer}

/* вход */
#join{display:grid;place-items:center;padding:16px;overflow:auto}
.card{width:min(100%,390px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}
h1{font-size:22px;margin:0}
.card p{margin:0}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
input{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:inherit;min-width:0}
input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:9px;padding:11px 14px;font-weight:600}
.primary:disabled{opacity:.6;cursor:default}
.primary:focus-visible,.ctl:focus-visible,.leave:focus-visible,.plain:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.muted{color:var(--muted)}
.error{color:var(--danger)}
.note{background:#2b2616;border:1px solid #5a4a1c;color:#e9d9a6;border-radius:9px;padding:9px 11px;font-size:13px}
.status{font-size:12px;min-height:16px}
.status.ok{color:var(--accent)}
.status.bad{color:var(--danger)}

#join{gap:12px;align-content:center}
.small{font-size:12px}
.tabs{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.tab{flex:1;border:0;background:transparent;color:var(--muted);border-radius:7px;padding:8px 6px}
.tab.on{background:var(--panel2);color:var(--text);font-weight:600}
.tab:focus-visible{outline:2px solid var(--accent)}
.me-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.me-row strong{font-size:18px}
.dial{display:flex;flex-direction:column;gap:10px}
.recent{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.recent button{width:100%;display:flex;justify-content:space-between;gap:10px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:8px 10px;text-align:left}
.recent .k{color:var(--muted);font-size:12px;white-space:nowrap}
.recent .k.miss{color:var(--danger)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}

/* входящий и исходящий вызов */
.ring{position:fixed;inset:0;z-index:20;background:var(--bg);display:grid;place-items:center;padding:16px}
.ring-box{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:min(100%,360px)}
.ring-avatar{width:96px;height:96px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-size:40px;font-weight:600;color:var(--accent);margin-bottom:8px}
.ring.active .ring-avatar{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(94,194,168,.5)}50%{box-shadow:0 0 0 18px rgba(94,194,168,0)}}
.ring-title{font-size:22px;font-weight:600;word-break:break-word}
.ring-btns{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.accept{border:0;background:#2fa36b;color:#fff;border-radius:24px;padding:0 24px;height:48px;font-weight:600}
.accept:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* звонок */
#call{display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);min-height:48px}
.topbar .muted{margin-left:10px;font-size:13px}
.banner{margin-left:auto;background:#3a2d12;color:#f0d28a;border-radius:8px;padding:4px 10px;font-size:13px}
.stage{flex:1;min-height:0;display:flex;position:relative}
.grid{
  flex:1;min-width:0;min-height:0;display:grid;gap:8px;padding:8px;
  grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows,1),minmax(0,1fr));
}
.tile{position:relative;background:var(--panel);border-radius:12px;overflow:hidden;border:2px solid transparent;min-height:0}
.tile.speaking{border-color:var(--accent)}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.tile.local video.mirror{transform:scaleX(-1)}
.tile.novideo video{visibility:hidden}
.avatar{position:absolute;inset:0;display:none;place-items:center}
.tile.novideo .avatar{display:grid}
.avatar span{width:72px;height:72px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-size:30px;font-weight:600;color:var(--accent)}
.meta{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;pointer-events:none}
.meta .nm{background:rgba(0,0,0,.55);padding:2px 8px;border-radius:7px;font-size:13px;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .mic{background:rgba(120,30,36,.85);padding:2px 7px;border-radius:7px;font-size:12px}
.q{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.q.excellent,.q.good{background:var(--accent)}
.q.poor{background:var(--warn)}
.q.lost{background:var(--danger)}

/* панель управления */
.controls{display:flex;justify-content:center;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.ctl{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);display:grid;place-items:center;position:relative}
.ctl svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctl .slash{display:none}
.ctl.off{background:#3a1d20;border-color:#6b2c31;color:#ff9aa0}
.ctl.off .slash{display:block}
.badge{position:absolute;top:-3px;right:-3px;background:var(--danger);color:#fff;border-radius:9px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center;padding:0 4px}
.leave{border:0;background:var(--danger);color:#fff;border-radius:24px;padding:0 20px;height:48px;font-weight:600}
.plain{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:6px 12px}
.pill{border-radius:24px;height:40px}

/* чат */
.chat{width:320px;border-left:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel);min-height:0}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.messages{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:0}
.msg{max-width:88%;background:var(--panel2);border-radius:10px;padding:6px 9px;align-self:flex-start;word-break:break-word}
.msg.me{align-self:flex-end;background:#1d3b34}
.msg b{font-size:12px;color:var(--muted);font-weight:500}
.msg time{font-size:11px;color:var(--muted);margin-left:8px}
.msg div{margin-top:2px}
#chatForm{display:flex;gap:8px;padding:8px;border-top:1px solid var(--line)}
#chatForm input{flex:1}

@media (max-width:700px){
  .chat{position:absolute;inset:0;width:auto;border-left:0;z-index:5}
  .controls{gap:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}