/* === CALL OVERLAY === */
.call-overlay{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;animation:fadeIn .25s ease}
.call-incoming-card{background:var(--bg-soft,#f5f0eb);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:28px;padding:48px 40px;text-align:center;min-width:320px;max-width:90vw;box-shadow:0 24px 80px rgba(0,0,0,.4);position:relative}
.call-ringing-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:130px;height:130px;border-radius:50%;border:2px solid var(--success,#22c55e);animation:callRingPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes callRingPulse{0%{transform:translate(-50%,-60%) scale(0.85);opacity:1}100%{transform:translate(-50%,-60%) scale(1.3);opacity:0}}
.call-avatar-large{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:20px;border:3px solid var(--border,rgba(0,0,0,.08));position:relative;z-index:1}
.call-avatar-medium{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:2px solid var(--border,rgba(0,0,0,.08))}
.call-name{font-size:22px;font-weight:700;color:var(--text,#1a1a1a);margin-bottom:4px}
.call-subtitle{font-size:14px;color:var(--text-muted,#888);margin-bottom:40px}
.call-duration{font-size:32px;font-weight:600;color:var(--text,#1a1a1a);font-variant-numeric:tabular-nums;letter-spacing:1px;margin-bottom:4px}
.call-status{font-size:13px;color:var(--text-muted,#888);margin-bottom:28px}
.call-actions-incoming{display:flex;gap:32px;justify-content:center}
.call-btn{width:68px;height:68px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.call-btn svg{color:#fff}
.call-btn-accept{background:var(--success,#22c55e);box-shadow:0 4px 20px rgba(34,197,94,.35);animation:callBtnPulse 2s ease-in-out infinite}
.call-btn-accept:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(34,197,94,.5)}
.call-btn-reject{background:var(--danger,#ef4444);box-shadow:0 4px 20px rgba(239,68,68,.35)}
.call-btn-reject:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(239,68,68,.5)}
.call-btn-end{background:var(--danger,#ef4444);width:60px;height:60px;box-shadow:0 4px 20px rgba(239,68,68,.35)}
.call-btn-end:hover{transform:scale(1.08)}
@keyframes callBtnPulse{0%,100%{box-shadow:0 4px 20px rgba(34,197,94,.35)}50%{box-shadow:0 4px 40px rgba(34,197,94,.55)}}
.call-active-card{background:var(--bg-soft,#f5f0eb);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:28px;padding:40px;text-align:center;min-width:320px;max-width:90vw;box-shadow:0 24px 80px rgba(0,0,0,.4)}
.call-actions-active{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:28px}
.call-action-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--border,rgba(0,0,0,.08));background:var(--surface2,#e8e3de);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text,#1a1a1a)}
.call-action-btn:hover{background:var(--hover,#d5cec5);border-color:var(--primary,#5a4632)}
.call-action-btn.active{background:var(--primary,#5a4632);border-color:var(--primary,#5a4632);color:#fff}
.call-action-btn svg{color:inherit}
.call-screen-video{width:100%;max-height:50vh;border-radius:16px;margin:20px 0;object-fit:contain;background:#000;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:fadeIn .3s ease}
.header-call-btn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;color:var(--text-muted,#888)}
.header-call-btn:hover{background:var(--hover,#e8e3de);color:var(--text,#1a1a1a)}
.header-call-btn svg{width:20px;height:20px}