.call-overlay{
  position:fixed;inset:0;z-index:3000;display:grid;place-items:center;
  padding:18px;background:rgba(2,6,23,.82);backdrop-filter:blur(10px)
}
.call-overlay.hidden{display:none}
.call-shell{
  width:min(760px,100%);max-height:calc(100dvh - 36px);overflow:hidden;
  border:1px solid #334155;border-radius:22px;background:#0b1222;
  box-shadow:0 28px 80px rgba(0,0,0,.55);display:flex;flex-direction:column
}
.call-top{padding:18px 20px 12px;text-align:center}
.call-top strong{display:block;font-size:clamp(24px,5vw,38px);font-variant-numeric:tabular-nums}
.call-top span{display:block;margin-top:5px;color:#94a3b8;font-size:14px}
.call-stage{position:relative;min-height:300px;background:#020617;overflow:hidden}
.remote-video{width:100%;height:min(58vh,520px);min-height:300px;object-fit:cover;background:#020617}
.local-video{
  position:absolute;right:14px;bottom:14px;width:min(28%,180px);aspect-ratio:3/4;
  object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:#111827;box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.audio-avatar{
  display:none;position:absolute;inset:0;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 40%,#1e3a5f,#020617 70%)
}
.audio-avatar .bubble{
  width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  background:#1e293b;border:3px solid #22c55e;box-shadow:0 0 38px rgba(34,197,94,.28);
  font-size:30px;font-weight:900
}
.call-shell.audio .audio-avatar{display:grid}
.call-shell.audio .remote-video{position:absolute;width:1px;height:1px;min-height:0;opacity:.01;pointer-events:none}
.call-shell.audio .local-video{display:none}
.call-controls,.incoming-controls{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:16px 18px 20px
}
.call-control{
  min-width:54px;height:54px;border-radius:999px;border:1px solid #334155;
  background:#172033;color:#fff;font-size:21px;font-weight:800;padding:0 18px
}
.call-control:hover{background:#243148}
.call-control.danger{background:#dc2626;border-color:#ef4444}
.call-control.accept{background:#22c55e;border-color:#4ade80;color:#052e16;min-width:120px;font-size:15px}
.call-control.reject{background:#dc2626;border-color:#ef4444;min-width:120px;font-size:15px}
.call-control.off{background:#7f1d1d;border-color:#b91c1c}
.call-controls.hidden,.incoming-controls.hidden{display:none}
.call-note{padding:0 18px 14px;text-align:center;color:#64748b;font-size:12px}
@media(max-width:760px){
  .call-overlay{padding:0}
  .call-shell{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}
  .call-stage{flex:1;min-height:0}
  .remote-video{height:100%;min-height:100%;object-fit:cover}
  .local-video{width:28%;right:10px;bottom:10px}
  .call-top{padding-top:max(16px,env(safe-area-inset-top))}
  .call-controls,.incoming-controls{padding-bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px))}
}