/* ============================================================================
   voice.css · shared voice UI — mic capture button, 🔊 read-aloud toggle, and
   the animated "listening" overlay. Kept scene-agnostic so all three demos use
   the same voice affordances.
   ========================================================================== */

/* ---- mic button in a composer ---- */
.mv-mic {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--text-soft);
  background: var(--soft); border: 1px solid var(--line);
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.mv-mic .mi { width: 18px; height: 18px; }
.mv-mic:hover { color: var(--mint-700); border-color: var(--mint); background: var(--mint-tint-2); }
.mv-mic:active { transform: scale(.94); }
.mv-mic.is-live { color: #fff; background: var(--mint); border-color: var(--mint); box-shadow: 0 0 0 0 rgba(4,190,140,.5); animation: mv-mic-pulse 1.4s infinite; }
@keyframes mv-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(4,190,140,.45); } 70% { box-shadow: 0 0 0 9px rgba(4,190,140,0); } 100% { box-shadow: 0 0 0 0 rgba(4,190,140,0); } }

/* ---- 🔊 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; }

/* ---- listening overlay ---- */
/* z-index must sit ABOVE the guided-tour layers (ring 9998 / pop 9999) so the
   mic capture is visible during the tour's voice beat, not behind the spotlight */
.mv-listen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(8,14,11,.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.mv-listen[hidden] { display: none; }
.mv-listen.is-in { opacity: 1; }
.mv-listen__card {
  position: relative; width: min(420px, calc(100vw - 40px));
  background: var(--surface); border-radius: 22px; padding: 30px 26px 24px;
  text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.35);
  transform: translateY(10px) scale(.98); transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.mv-listen.is-in .mv-listen__card { transform: none; }
.mv-listen__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--text-soft); }
.mv-listen__close:hover { background: var(--soft); }
.mv-listen__close .mi { width: 22px; height: 22px; }
.mv-listen__close:hover { color: var(--text-1); }

.mv-listen__orb {
  width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 35%, var(--mint-600), var(--mint-700));
  box-shadow: 0 0 0 0 rgba(4,190,140,.45), 0 12px 30px rgba(4,190,140,.35);
  animation: mv-orb 1.6s ease-in-out infinite;
}
.mv-listen__orb .mi { width: 34px; height: 34px; color: #fff; position: relative; z-index: 2; }
@keyframes mv-orb { 0%,100% { box-shadow: 0 0 0 0 rgba(4,190,140,.4), 0 12px 30px rgba(4,190,140,.3); } 55% { box-shadow: 0 0 0 16px rgba(4,190,140,0), 0 12px 30px rgba(4,190,140,.45); } }
.mv-listen.is-heard .mv-listen__orb { animation: none; background: radial-gradient(circle at 50% 35%, #0bbf8c, #047a59); }

/* animated waveform inside the orb */
.mv-wave { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: .5; }
.mv-wave i { width: 3px; height: 12px; border-radius: 3px; background: var(--surface); animation: mv-bar 1s ease-in-out infinite; }
.mv-wave i:nth-child(1){ animation-delay:0s } .mv-wave i:nth-child(2){ animation-delay:.12s } .mv-wave i:nth-child(3){ animation-delay:.24s }
.mv-wave i:nth-child(4){ animation-delay:.36s } .mv-wave i:nth-child(5){ animation-delay:.24s } .mv-wave i:nth-child(6){ animation-delay:.12s } .mv-wave i:nth-child(7){ animation-delay:0s }
@keyframes mv-bar { 0%,100% { height: 8px; } 50% { height: 30px; } }
.mv-listen.is-heard .mv-wave { display: none; }

.mv-listen__state { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-1); }
.mv-listen__text { font-size: 15px; color: var(--text-1); min-height: 22px; margin-top: 8px; font-weight: 600; }
.mv-listen__text::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--mint); animation: mv-blink .9s steps(2) infinite; }
.mv-listen.is-heard .mv-listen__text::after { display: none; }
.mv-listen__hint { font-size: 11.5px; color: var(--text-soft); margin-top: 10px; font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  .mv-listen__orb, .mv-wave i, .mv-mic.is-live { animation: none !important; }
}