/* calls.css — full-screen voice call overlay */
.call-overlay { align-items: center; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 10000; }
.call-overlay.is-hidden { display: none; }
.call-backdrop { background: radial-gradient(120% 90% at 50% 0%, #3a2f9e 0%, #1a1740 45%, #0a0c18 100%); inset: 0; position: absolute; }
.call-card { align-items: center; color: #fff; display: flex; flex-direction: column; gap: 6px; padding: max(32px, env(safe-area-inset-top)) 24px max(36px, env(safe-area-inset-bottom)); position: relative; text-align: center; width: min(100%, 420px); height: 100%; justify-content: center; }
.call-eyebrow { align-items: center; color: rgba(255,255,255,.7); display: flex; font-size: 12px; font-weight: 700; gap: 7px; letter-spacing: .04em; margin: 0 0 22px; text-transform: uppercase; }
.call-eyebrow-icon svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }
.call-avatar-stage { align-items: center; display: flex; height: 190px; justify-content: center; position: relative; width: 190px; }
.call-avatar { border: 3px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 44px; height: 120px; overflow: hidden; width: 120px; z-index: 1; }
.call-avatar .avatar-img { height: 100%; object-fit: cover; width: 100%; }
.call-ring { border: 2px solid rgba(167,139,250,.5); border-radius: 50%; height: 120px; position: absolute; width: 120px; animation: call-pulse 2.4s ease-out infinite; }
.call-ring.r2 { animation-delay: .8s; } .call-ring.r3 { animation-delay: 1.6s; }
.call-overlay[data-state="active"] .call-ring { animation-duration: 4s; border-color: rgba(23,201,100,.4); }
@keyframes call-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.65); } }
.call-name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 0; }
.call-status { color: rgba(255,255,255,.75); font-size: 15px; font-variant-numeric: tabular-nums; margin: 4px 0 0; min-height: 22px; }
.call-actions { align-items: flex-start; display: flex; gap: 26px; justify-content: center; margin-top: 64px; }
.call-btn { align-items: center; background: none; border: 0; color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.call-btn span { align-items: center; background: rgba(255,255,255,.14); border-radius: 50%; display: flex; height: 62px; justify-content: center; transition: transform .15s ease, background .15s ease; width: 62px; }
.call-btn:active span { transform: scale(.92); }
.call-btn svg { fill: none; height: 26px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 26px; }
.call-btn small { color: rgba(255,255,255,.8); font-size: 12px; font-weight: 600; }
.call-btn.decline span { background: #f0384a; box-shadow: 0 8px 22px rgba(240,56,74,.45); }
.call-btn.decline svg { transform: rotate(135deg); }
.call-btn.accept span { background: #17c964; box-shadow: 0 8px 22px rgba(23,201,100,.45); animation: call-wiggle 1.2s ease-in-out infinite; }
.call-btn.mute.is-on span { background: #fff; color: #1a1740; }
.call-btn:disabled { cursor: default; opacity: .45; }
@keyframes call-wiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(0); } }
body.call-open { overflow: hidden; }