/* Relik — экран звонка */
.call-overlay{position:fixed;inset:0;z-index:130;display:grid;place-items:center;overflow:hidden}
.call-overlay[hidden]{display:none!important}
.call-overlay::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(720px 520px at 50% 18%,rgba(91,108,249,.28),transparent 64%),
    radial-gradient(620px 520px at 18% 92%,rgba(159,92,246,.18),transparent 64%),
    rgba(6,8,14,.94);
  backdrop-filter:blur(20px);
}
.call-card{position:relative;display:grid;justify-items:center;gap:10px;padding:36px 28px;width:min(360px,92vw);text-align:center}
.call-peer{width:104px;height:104px;position:relative;display:grid;place-items:center;margin-bottom:6px}
.call-peer .avatar{width:104px;height:104px;font-size:34px;border-radius:34%}
.call-overlay.ringing .call-peer::after{
  content:"";position:absolute;inset:-12px;border-radius:40%;
  border:1px solid var(--accent-glow);animation:callPulse 1.9s infinite;
}
@keyframes callPulse{
  0%{transform:scale(.94);opacity:.8}
  70%{transform:scale(1.12);opacity:0}
  100%{opacity:0}
}
.call-name{font-size:20px;font-weight:700;letter-spacing:-.01em}
.call-status{font-size:13px;color:var(--tx-2);min-height:18px}
.call-timer{font-size:13px;color:var(--tx-3);font-variant-numeric:tabular-nums;min-height:16px}
.call-actions{display:flex;gap:16px;margin-top:16px}
.call-btn{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--surface-3);border:1px solid var(--line-2);
  transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9);
}
.call-btn:hover{transform:translateY(-1px)}
.call-btn:active{transform:scale(.94)}
.call-btn.end{background:linear-gradient(135deg,#f0566e,#c13b58);border-color:transparent;box-shadow:0 14px 30px -12px rgba(240,86,110,.7)}
.call-btn.accept{background:linear-gradient(135deg,#3ecf8e,#1fa974);border-color:transparent;box-shadow:0 14px 30px -12px rgba(62,207,142,.7)}
.call-btn.decline{background:var(--surface-3)}
.call-btn.off{background:var(--raise);color:var(--warn)}
.call-btn[hidden]{display:none}
#remoteAudio{display:none}

/* Видеорежим */
#remoteVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000;z-index:0}
.call-overlay.has-remote-video #remoteVideo{display:block}
.call-shade{position:absolute;inset:0;display:none;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 64%,rgba(0,0,0,.68))}
.call-overlay.has-remote-video .call-shade{display:block}
#localVideo{
  position:absolute;top:calc(18px + env(safe-area-inset-top));right:18px;
  width:112px;height:150px;object-fit:cover;border-radius:16px;display:none;z-index:3;
  background:#000;border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 36px -16px rgba(0,0,0,.9);
}
.call-overlay.video #localVideo{display:block}
.call-overlay.video .call-card{
  position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;
  padding:0 20px calc(28px + env(safe-area-inset-bottom));
  z-index:3;gap:6px;
}
.call-overlay.video .call-peer{display:none}
.call-overlay.video .call-name{font-size:18px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.call-overlay.video .call-status,.call-overlay.video .call-timer{text-shadow:0 2px 10px rgba(0,0,0,.6);color:#cfd6ea}
.call-overlay.video .call-actions{margin-top:14px}

.call-btn.rec{color:#f0566e}
.call-btn.rec.on{background:rgba(240,86,110,.18);border-color:rgba(240,86,110,.55);color:#ff7d92}
.call-rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#f0566e;margin-right:6px;animation:blink 1s infinite;vertical-align:middle}

.call-rec{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-xs);font-weight:700;
  color:#ffb4c0;background:rgba(240,86,110,.14);border:1px solid rgba(240,86,110,.4);padding:3px 10px;border-radius:999px}
.call-rec i{width:8px;height:8px;border-radius:50%;background:#f0566e;animation:blink 1s infinite}
.call-rec[hidden]{display:none!important}