/* Live-call shot: the mobile app keeps voice notes and live calls separate. */
.mv-call-intro { margin: auto; color: var(--subtle); font-size: 14px; }
.mv-placeholder { color: var(--subtle); }
.mv-voice-note, .mv-live-call { flex: none; }
.mv-live-call { color: #fff; background: #2563eb; }
.mv-live-call svg { width: 21px; height: 21px; }

.mv-body--call { padding: 0; }
.mv-call-screen {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 1.4fr 1fr;
  place-items: center;
  padding: clamp(10px, 3vw, 28px);
  animation: mv-scene 0.4s var(--ease);
}
.mv-call-head { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mv-call-head strong { font-size: clamp(16px, 2.2vw, 22px); letter-spacing: -0.02em; }
.mv-call-status { font-size: 14px; color: var(--subtle); }
.mv-call-clock { font: 12px/1.4 var(--font-mono); color: var(--muted); }
.mv-call-wave { height: min(122px, 12vw); display: flex; align-items: center; justify-content: center; gap: clamp(5px, 1vw, 9px); }
.mv-call-wave span {
  width: clamp(7px, 1.2vw, 12px);
  height: min(var(--bar-height), 11vw);
  border-radius: 999px;
  background: var(--muted);
  transform: scaleY(0.35);
  animation: mv-call-breathe 1.3s var(--ease) var(--bar-delay) infinite alternate;
}
.mv-call-wave.is-speaking span { background: #2563eb; animation-duration: 0.42s; }
@keyframes mv-call-breathe { to { transform: scaleY(1); } }
.mv-call-controls { align-self: end; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 24px); }
.mv-call-control {
  width: clamp(34px, 5.4vw, 54px);
  height: clamp(34px, 5.4vw, 54px);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: var(--bg-raised);
}
.mv-call-control svg { width: 22px; height: 22px; }
.mv-call-end { border-color: #e11d48; color: #fff; background: #e11d48; }
.mv-call-end svg { transform: rotate(135deg); }