/* ================= Звонки ================= */
#call-overlay { position:fixed; inset:0; z-index:700; display:none; flex-direction:column; color:#fff; overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%, #3B2A8C 0%, #171033 55%, #07050F 100%); }
#call-overlay.active { display:flex; }
#call-remote { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; opacity:0; transition:opacity .25s; }
#call-overlay.remote-video #call-remote { opacity:1; }
#call-remote-audio { display:none; }
.call-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 22%, transparent 70%, rgba(0,0,0,.55)); opacity:0; }
#call-overlay.remote-video .call-shade { opacity:1; }
.call-top { position:relative; display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 0; }
.call-ibtn { width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,.14); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.call-ibtn svg { width:22px; height:22px; }
.call-e2e { font-size:12px; opacity:.75; background:rgba(0,0,0,.25); padding:5px 10px; border-radius:12px; }
.call-center { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 20px; text-align:center; }
#call-overlay.remote-video .call-center { justify-content:flex-start; padding-top:18px; }
.call-avatar { width:128px !important; height:128px !important; font-size:56px !important; border-radius:50%; position:relative; overflow:hidden; box-shadow:0 0 0 8px rgba(255,255,255,.06), 0 0 0 18px rgba(255,255,255,.03); }
#call-overlay.incoming .call-avatar, #call-overlay:not(.ended):not(.remote-video) .call-avatar { animation:callPulse 2s ease-in-out infinite; }
@keyframes callPulse { 50% { box-shadow:0 0 0 14px rgba(255,255,255,.08), 0 0 0 30px rgba(255,255,255,.035); } }
#call-overlay.remote-video .call-avatar { display:none; }
.call-name { font-size:26px; font-weight:800; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.call-status { font-size:15px; opacity:.85; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.call-peer-muted { font-size:13px; background:rgba(0,0,0,.35); padding:5px 12px; border-radius:12px; }
#call-local { position:absolute; right:14px; top:calc(70px + env(safe-area-inset-top, 0px)); width:108px; height:148px; border-radius:16px; object-fit:cover; background:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.2); display:none; z-index:2; }
#call-overlay.local-video #call-local { display:block; }
.call-controls, .call-incoming { position:relative; display:flex; justify-content:center; align-items:center; gap:18px; padding:16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.call-incoming { display:none; gap:34px; }
#call-overlay.incoming .call-controls { display:none; }
#call-overlay.incoming .call-incoming { display:flex; }
#call-overlay.ended .call-controls, #call-overlay.ended .call-incoming { visibility:hidden; }
.call-btn { width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; position:relative; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .12s, background .15s; }
.call-btn:active { transform:scale(.92); }
.call-btn svg { width:27px; height:27px; }
.call-btn.off { background:#fff; color:#1A1530; }
.call-btn.hang { background:#FF3B5C; }
.call-btn.hang svg { transform:rotate(135deg); }
.call-btn.accept { background:#22C55E; }
.call-incoming .call-btn { width:70px; height:70px; }
.call-incoming .call-btn span { position:absolute; top:calc(100% + 8px); font-size:12.5px; font-weight:700; white-space:nowrap; opacity:.9; }
.call-incoming .call-btn.hang svg { transform:rotate(135deg); }
#call-accept { animation:callShake 1.4s ease-in-out infinite; }
@keyframes callShake { 0%, 60%, 100% { transform:rotate(0); } 70% { transform:rotate(-14deg); } 80% { transform:rotate(14deg); } 90% { transform:rotate(-8deg); } }
.call-unlock { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; padding:12px 18px; border-radius:18px; background:#fff; color:#2A1670; font-weight:800; }

#call-mini { position:fixed; z-index:690; left:50%; transform:translateX(-50%); top:calc(10px + env(safe-area-inset-top, 0px)); display:none; align-items:center; gap:8px;
  padding:9px 16px; border-radius:20px; background:#22C55E; color:#fff; font-weight:800; font-size:13.5px; box-shadow:0 10px 26px rgba(0,0,0,.3); max-width:calc(100vw - 24px); }
#call-mini.show { display:inline-flex; }
.call-mini-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:vrLive 1.4s infinite; flex-shrink:0; }
.call-mini-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Карточка звонка в переписке */
.call-card { display:flex; align-items:center; gap:10px; padding:4px 2px; min-width:190px; text-align:left; color:inherit; }
.call-card-ico { width:38px; height:38px; border-radius:50%; background:color-mix(in srgb, currentColor 14%, transparent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.call-card-ico svg { width:19px; height:19px; }
.call-card.missed .call-card-ico { background:rgba(255,59,92,.18); color:#FF3B5C; }
.call-card-body { display:flex; flex-direction:column; gap:1px; }
.call-card-body b { font-size:14.5px; }
.call-card-body span { font-size:12.5px; opacity:.75; font-variant-numeric:tabular-nums; }

/* ================= Видео: зеркало только для фронтальной камеры, экран собеседника целиком ================= */
#call-overlay.mirror-local #call-local { transform:scaleX(-1); }
#call-overlay.sharing #call-local { object-fit:contain; background:#000; }
#call-overlay.peer-screen #call-remote { object-fit:contain; }
#call-btn-screen.on { background:#fff; color:#1A1530; }
#call-btn-flip.spin svg { animation:callSpin .6s ease-in-out; }
@keyframes callSpin { to { transform:rotate(180deg); } }
.call-controls { flex-wrap:wrap; gap:14px; }
@media (max-width:380px) { .call-btn { width:56px; height:56px; } .call-controls { gap:10px; } }

/* ================= Мини-окно звонка ================= */
#call-pip { position:fixed; z-index:695; width:120px; height:168px; border-radius:22px; overflow:hidden; display:none; touch-action:none; user-select:none;
  background:radial-gradient(120% 90% at 50% 0%, #3B2A8C 0%, #171033 70%); color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12);
  transition:left .22s cubic-bezier(.2,.8,.2,1), top .22s cubic-bezier(.2,.8,.2,1), transform .15s; }
#call-pip.show { display:block; animation:pipIn .22s cubic-bezier(.2,.8,.2,1); }
#call-pip.dragging { transition:none; transform:scale(1.04); }
@keyframes pipIn { from { transform:scale(.6); opacity:0; } }
#call-pip video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; background:#000; }
#call-pip.has-video video { display:block; }
#call-pip.mirror video { transform:scaleX(-1); }
#call-pip.screen video { object-fit:contain; }
.call-pip-face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#call-pip.has-video .call-pip-face { display:none; }
.call-pip-ava { width:62px !important; height:62px !important; font-size:28px !important; border-radius:50%; overflow:hidden; box-shadow:0 0 0 6px rgba(255,255,255,.07); animation:callPulse 2s ease-in-out infinite; }
.call-pip-bar { position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:5px; padding:8px 10px; font-size:11.5px; font-weight:800;
  font-variant-numeric:tabular-nums; background:linear-gradient(rgba(0,0,0,.45), transparent); }
.call-pip-dot { width:6px; height:6px; border-radius:50%; background:#22C55E; flex:none; }
.call-pip-time { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.call-pip-btn { width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.42); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.call-pip-btn svg { width:17px; height:17px; }
.call-pip-btn.off { background:#fff; color:#1A1530; }
.call-pip-btn.hang { background:#FF3B5C; }
.call-pip-btn.hang svg { transform:rotate(135deg); }
.call-pip-hide { position:absolute; right:6px; top:28px; width:26px; height:26px; }
.call-pip-hide svg { width:15px; height:15px; }
.call-pip-ctrls { position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:10px; }