/* ============================================================================
   voice.css · the 🔊 read-aloud toggle. Scene-agnostic so all three screens share
   one affordance. Voice INPUT was removed with the mic — capture is text-to-CRM —
   so nothing here styles a microphone or a listening overlay any more.
   ========================================================================== */

/* ---- 🔊 read-aloud toggle (used on brief / answers) ---- */
.mv-speak {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--mint-ink);
  background: var(--mint-tint); border-radius: 999px; padding: 6px 12px;
  transition: background .15s, color .15s, transform .15s;
}
.mv-speak .mi { width: 15px; height: 15px; }
.mv-speak:hover { background: var(--mint); color: #fff; transform: translateY(-1px); }
.mv-speak:hover .mi { color: #fff; }
.mv-speak.is-speaking { background: var(--mint); color: #fff; }
.mv-speak.is-speaking .mi { color: #fff; }
.mv-speak.is-speaking::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); animation: mv-blink .8s steps(2) infinite; }
@keyframes mv-blink { 50% { opacity: .2; } }
.mv-speak.is-nudge { animation: mv-nudge .5s ease; }
@keyframes mv-nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* a small icon-only speaker (in headers) */
.mv-speak--icon { padding: 7px; width: 32px; height: 32px; justify-content: center; background: transparent; color: var(--text-soft); }
.mv-speak--icon:hover { background: var(--mint-tint); color: var(--mint-700); }
.mv-speak--icon.is-speaking { background: var(--mint); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mv-speak.is-speaking::after { animation: none !important; }
}