/* ── 1:1 음성/영상 통화 오버레이 ──────────────────────────────────────── */
.call-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(17, 24, 39, .92);
  display: flex; align-items: center; justify-content: center;
}
.call-card {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.call-remote-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #11182B;
}
.call-remote-video.call-hide { display: none; }
.call-local-video {
  position: absolute; right: 16px; top: 16px; width: 108px; height: 144px;
  border-radius: 12px; object-fit: cover; background: #1B2333;
  border: 2px solid rgba(255,255,255,.25); box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.call-local-video.call-hide { display: none; }
.call-info { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; z-index: 1; }
.call-peer-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff; background: #5B6B93;
  background-size: cover; background-position: center;
}
.call-peer-avatar.call-ring { animation: callRingPulse 1.4s ease-in-out infinite; }
@keyframes callRingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  50% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}
.call-peer-name { font-size: 19px; font-weight: 700; }
.call-status-text { font-size: 13.5px; color: rgba(255,255,255,.72); }
.call-controls {
  position: absolute; left: 0; right: 0; bottom: 48px; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.call-ctrl-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(255,255,255,.16); color: #fff; transition: background .12s;
}
.call-ctrl-btn:hover { background: rgba(255,255,255,.28); }
.call-ctrl-btn.call-btn-on { background: #fff; color: #37415A; }
.call-ctrl-btn.call-btn-accept { background: #1B7F4B; }
.call-ctrl-btn.call-btn-accept:hover { background: #17693F; }
.call-ctrl-btn.call-btn-end { background: #D93025; }
.call-ctrl-btn.call-btn-end:hover { background: #B7241B; }

/* 친구정보 모달의 "통화하기" 버튼 아래 음성/영상 선택 팝오버 */
.call-type-popover {
  position: absolute; z-index: 9600; background: #fff; border: 1px solid #DDE1E9;
  border-radius: 10px; box-shadow: 0 6px 20px rgba(17,24,39,.16); padding: 6px; min-width: 128px;
}
.call-type-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none;
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: #37415A; cursor: pointer; text-align: left;
}
.call-type-opt:hover { background: #EEF3FB; }

/* 수신 벨 토스트(다른 탭/모달을 보고 있을 때도 눈에 띄게) */
.call-toast {
  position: fixed; left: 50%; transform: translate(-50%, 12px);
  bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 9000;
  max-width: 82%; padding: 10px 16px; border-radius: 20px;
  background: rgba(17, 24, 39, .92); color: #FFFFFF; font-size: 13px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.call-toast.on { opacity: 1; transform: translate(-50%, 0); }