/* ---------- Calls: list ---------- */
.call-row { padding: 6px 8px; }
.call-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; padding: 6px 0; }
.call-row-main:hover { text-decoration: none; }
.call-meta { display: flex; align-items: center; gap: 2px; }
.call-meta.missed { color: var(--danger); }

/* ---------- Calls: full-screen overlay ---------- */
.call-root { position: fixed; inset: 0; z-index: 100; }
.call-root[hidden] { display: none; }
.call {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #1b1140 0%, var(--bg) 60%);
  padding: calc(var(--safe-t) + 24px) 16px calc(var(--safe-b) + 24px);
}
.call-center { position: relative; z-index: 2; flex: 1; display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center; }
.call-center.over-video { align-content: start; padding-top: 8px; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.call-avatar { margin-bottom: 12px; }
.call-avatar .avatar { width: 120px; height: 120px; font-size: 2.5rem; }
.call-name { margin: 0; font-size: 1.5rem; font-weight: 700; }
.call-sub { margin: 0; color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.call-center.over-video .call-sub { color: #fff; }
.call-pill { margin: 6px 0 0; padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(251, 191, 36, .18); color: var(--warning); font-size: .8125rem; }
.call-pill[data-level="poor"] { background: rgba(251, 113, 133, .18); color: var(--danger); }
.call-notice { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: calc(var(--safe-b) + 120px); margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--card-2); text-align: center; }

.remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; pointer-events: none; }
.remote-video.visible { opacity: 1; }
.local-video {
  position: absolute; z-index: 3; right: 16px; top: calc(var(--safe-t) + 16px); width: 96px; height: 128px;
  object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: #000; display: none;
}
.local-video.visible { display: block; }
.local-video.mirror { transform: scaleX(-1); }

.call-controls, .call-actions { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.call-actions { justify-content: space-around; max-width: 360px; width: 100%; margin: 0 auto; }
.call-action { display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: .875rem; }
.call-btn {
  width: 64px; height: 64px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.call-btn:hover { background: rgba(255, 255, 255, .22); }
.call-btn.on { background: #fff; color: #111; }
.call-btn.accept { background: var(--success); color: #04130c; }
.call-btn.hangup { background: #ef4444; color: #fff; }
.call-btn.hangup svg { transform: rotate(135deg); }
.call-btn[disabled] { opacity: .4; cursor: not-allowed; }
.call-btn[hidden] { display: none; }
.call-controls.disabled { pointer-events: none; }
body.in-call { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .call-incoming .call-avatar .avatar { animation: ring-pulse 1.6s ease-in-out infinite; }
  @keyframes ring-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .5); } 50% { box-shadow: 0 0 0 22px rgba(139, 92, 246, 0); } }
}