/* ============================================================
   Звонки в личных чатах (v464) — js/calls.js
   ============================================================ */
.call-ui { position: fixed; inset: 0; z-index: 9996; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden;
    padding: max(48px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); color: #fff; background: #0b0c12;
    opacity: 0; transform: scale(1.03); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.call-ui.is-in { opacity: 1; transform: none; }
.call-ui.is-out { opacity: 0; transform: scale(.97); }
.call-ui * { box-sizing: border-box; }

/* размытый аватар собеседника на фоне */
.call-bg { position: absolute; inset: -10%; z-index: 0; filter: blur(48px) saturate(1.4) brightness(.55); transform: scale(1.2); }
.call-bg .call-ava { width: 100%; height: 100%; border-radius: 0; font-size: 40vmin; }
.call-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 30%, transparent, rgba(5, 6, 10, .7)); }

.call-ava { display: grid; place-items: center; overflow: hidden; border-radius: 50%; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--accent, #7a6cff), var(--accent-2, #f7931e)); }
.call-ava img, .call-ava video { width: 100%; height: 100%; object-fit: cover; }

.call-remote { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .4s; }
.call-ui.has-remote .call-remote { opacity: 1; }
.call-local { position: absolute; z-index: 3; right: 16px; top: max(16px, env(safe-area-inset-top)); width: 112px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px;
    background: #111; transform: scaleX(-1); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7); border: 2px solid rgba(255, 255, 255, .18); opacity: 0; pointer-events: none; transition: opacity .3s; }
.call-ui.has-local .call-local { opacity: 1; }

.call-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6vh; text-align: center; transition: transform .4s, margin .4s; }
.call-head .call-ava { width: 128px; height: 128px; font-size: 48px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 24px 50px -16px rgba(0, 0, 0, .7); }
.call-ui:not(.is-live) .call-head .call-ava { animation: call-pulse 1.8s ease-out infinite; }
@keyframes call-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35), 0 24px 50px -16px rgba(0, 0, 0, .7); } 100% { box-shadow: 0 0 0 28px rgba(255, 255, 255, 0), 0 24px 50px -16px rgba(0, 0, 0, .7); } }
.call-name { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.call-state { font-size: 16px; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
/* при видео шапка уезжает наверх и уменьшается */
.call-ui.has-remote .call-head { margin-top: 0; flex-direction: row; gap: 10px; align-self: flex-start; }
.call-ui.has-remote .call-head .call-ava { width: 40px; height: 40px; font-size: 16px; animation: none; box-shadow: none; }
.call-ui.has-remote .call-name { font-size: 17px; }
.call-ui.has-remote .call-state { font-size: 14px; }

.call-btns { position: relative; z-index: 2; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 4vh; }
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.call-btn span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
    background: rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), background .2s; }
.call-btn:hover span { background: rgba(255, 255, 255, .26); }
.call-btn:active span { transform: scale(.9); }
.call-btn:focus-visible span { outline: 3px solid #fff; outline-offset: 3px; }
.call-btn.is-off span { background: #fff; color: #111; }
.call-btn.is-red span { background: #ff3b30; }
.call-btn.is-red span i { transform: rotate(0deg); }
.call-btn.is-green span { background: #34c759; }
.call-btn.is-green.is-soft span { background: rgba(52, 199, 89, .35); }
.call-btn.is-pulse span { animation: call-btn-pulse 1.4s ease-in-out infinite; }
@keyframes call-btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 50% { box-shadow: 0 0 0 14px rgba(52, 199, 89, 0); } }
.call-btn small { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* кнопки звонка в шапке личного чата */
.chat-call-btn { color: var(--accent, #7a6cff); }

@media (max-width: 420px) { .call-btns { gap: 12px; } .call-btn span { width: 58px; height: 58px; font-size: 20px; } .call-btn { font-size: 11.5px; max-width: 76px; text-align: center; } }
@media (min-width: 900px) {
    .call-local { width: 220px; aspect-ratio: 16 / 10; right: 24px; top: 24px; }
    .call-btn span { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) { .call-ui, .call-head .call-ava, .call-btn.is-pulse span { animation: none !important; transition: none; } }