/* ========== CALL OVERLAY ========== */
.call-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: overlayIn 0.22s ease-out;
  padding: 20px;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.call-modal {
  width: 100%; max-width: 520px;
  background: var(--bg);
  border: 1px solid var(--fg);
  box-shadow: 8px 8px 0 rgba(166, 255, 77, 0.35);
  font-family: var(--f-mono);
  animation: modalIn 0.26s ease-out;
}
@keyframes modalIn {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.call-modal__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--fg); color: var(--bg);
  font-size: 11px; letter-spacing: 0.14em;
}
.call-close {
  background: transparent; border: none; color: var(--bg);
  font-size: 20px; line-height: 1; cursor: crosshair; padding: 0 4px;
}
.dot-live {
  display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: pulseDot 1.2s infinite;
}

.call-body {
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.call-blurb { font-size: 13px; line-height: 1.55; }

.call-status {
  font-size: 14px; letter-spacing: 0.15em;
  padding: 10px 12px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 4px;
}
.call-log { max-height: 260px; min-height: 160px; overflow-y: auto; }

.call-actions { display: flex; gap: 10px; margin-top: 4px; }
.call-mic-note { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

.waveform {
  display: flex; gap: 3px; align-items: flex-end;
  height: 20px; margin-top: 8px;
}
.waveform span {
  display: block; width: 4px; background: var(--accent);
  animation: wave 0.9s ease-in-out infinite;
}
.waveform span:nth-child(1) { animation-delay: 0.0s; height: 50%; }
.waveform span:nth-child(2) { animation-delay: 0.1s; height: 80%; }
.waveform span:nth-child(3) { animation-delay: 0.2s; height: 40%; }
.waveform span:nth-child(4) { animation-delay: 0.3s; height: 90%; }
.waveform span:nth-child(5) { animation-delay: 0.4s; height: 60%; }
.waveform span:nth-child(6) { animation-delay: 0.5s; height: 30%; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}