/* The same microphone on every "Speak" control from signup to the offer.
   Alex, 2026-10-09: "if we're using this icon for speaking (that microphone one),
   it's used throughout the onboarding flow… We'll have to update it later on
   throughout the rest of the platform."

   ⚠️ STYLE ONLY, AND ONLY INSIDE THE ONBOARDING SCREENS. voice-input.js draws a
   dot (.vi-dot) and is inlined into every published community, so changing the
   file would ask every coach to republish. Here the dot is redrawn as the mic
   (the same glyph as the signup modal's Talk button) inside the builder
   (.onb-step / #onb-overlay) and the onboarding journey (.oj-veil) only;
   everywhere else keeps its dot until the platform-wide pass.

   ⚠️ SPECIFICITY IS DELIBERATE. voice-input.js injects its own sheet into
   <head> at runtime, AFTER this file, so a selector of equal weight loses to
   it (`.vi-btn[data-state="rec"]` would turn the button red again). Every rule
   below carries the extra `.vi-row` (or the #onb-overlay id) to win. */
.onb-step .vi-row .vi-btn:not([data-state="rec"]) .vi-dot,
.oj-veil .vi-row .vi-btn:not([data-state="rec"]) .vi-dot {
  width: 16px; height: 16px; border-radius: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── One look for every Speak control in the onboarding (Alex, 2026-10-10:
   the review's "Speak" looked different from the builder's talk buttons). ──
   The builder's own: a filled violet #6c4cf1 pill, white mic and words. */
.onb-step .vi-row .vi-btn,
.oj-veil .vi-row .vi-btn {
  background: #6c4cf1; border: 1px solid #6c4cf1; color: #fff;
  border-radius: 999px; padding: 9px 16px; min-height: 40px;
  font-weight: 700; font-size: 14px; gap: 8px;
  box-shadow: 0 10px 22px -12px #6c4cf1;
}
.onb-step .vi-row .vi-btn:hover,
.oj-veil .vi-row .vi-btn:hover { background: #5636d9; border-color: #5636d9; filter: none; }
.onb-step .vi-row .vi-btn:focus-visible,
.oj-veil .vi-row .vi-btn:focus-visible { outline: 2px solid #6c4cf1; outline-offset: 2px; }
.onb-step .vi-row .vi-btn[data-state="busy"],
.oj-veil .vi-row .vi-btn[data-state="busy"] { background: #6c4cf1; border-color: #6c4cf1; color: #fff; opacity: .75; }

/* Recording stays violet, never red. Since 2026-10-10 voice-input.js draws
   its own wave that follows the voice (canvas.vi-wave, in the button's text
   colour); the bars below are only the fallback where a canvas cannot draw. */
.onb-step .vi-row .vi-btn[data-state="rec"],
.oj-veil .vi-row .vi-btn[data-state="rec"] {
  background: #6c4cf1; border-color: #6c4cf1; color: #fff;
  box-shadow: 0 0 0 4px rgba(108, 76, 241, .18);
}
.onb-step .vi-row .vi-btn[data-state="rec"] .vi-dot,
.oj-veil .vi-row .vi-btn[data-state="rec"] .vi-dot {
  width: 23px; height: 16px; border-radius: 0; background: none;
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 50%, 5px 50%, 10px 50%, 15px 50%, 20px 50%;
  background-size: 3px 35%, 3px 80%, 3px 55%, 3px 95%, 3px 45%;
  animation: onbMicWave 0.9s ease-in-out infinite;
}
@keyframes onbMicWave {
  0%, 100% { background-size: 3px 35%, 3px 80%, 3px 55%, 3px 95%, 3px 45%; }
  25%      { background-size: 3px 70%, 3px 40%, 3px 95%, 3px 50%, 3px 80%; }
  50%      { background-size: 3px 95%, 3px 60%, 3px 35%, 3px 75%, 3px 55%; }
  75%      { background-size: 3px 50%, 3px 95%, 3px 70%, 3px 35%, 3px 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-step .vi-row .vi-btn[data-state="rec"] .vi-dot,
  .oj-veil .vi-row .vi-btn[data-state="rec"] .vi-dot { animation: none; }
}
/* Which box is listening, and the "Listening 0:04" line: violet too. */
.onb-step .vi-recording, .oj-veil .vi-recording {
  border-color: #6c4cf1 !important; box-shadow: 0 0 0 3px rgba(108, 76, 241, .15) !important;
}
.onb-step .vi-row .vi-status[data-live="1"],
.oj-veil .vi-row .vi-status[data-live="1"] { color: #6c4cf1; }