/* voice.css — mic button for voice search. Added to a search form by voice.js
   (class .has-voice). Idle = muted icon; listening (.on) = coral with a pulse. */

.vmic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  border:none;background:none;color:var(--muted);
  border-radius:999px;cursor:pointer;transition:background .15s;
}
.vmic svg{width:19px;height:19px}
.vmic:hover{color:var(--pine-2);background:var(--surface-2)}
/* Mic stays a plain grey icon on all sizes (no filled background). */
.vmic.on{color:#fff;background:var(--coral)}   /* no pulse: the waveform is the recording cue */

  70% {box-shadow:0 0 0 10px rgba(240,100,59,0)}
  100%{box-shadow:0 0 0 0   rgba(240,100,59,0)}
}

/* Header pill: smaller, faint to match the leading search icon. */
.head-search .vmic{width:34px;height:34px;color:var(--faint);background:none;border-radius:999px}
.head-search .vmic svg{width:17px;height:17px}
.head-search .vmic:hover{color:var(--pine-2);background:transparent}
.head-search .vmic.on{color:#fff;background:var(--coral)}


/* Voice-reactive scrolling waveform (replaces bouncing bars). */
.voice-wave{display:none;flex:1;min-width:0;height:28px;color:var(--faint)}
.voice-wave-x{display:none;flex:none;border:none;background:none;color:var(--muted);cursor:pointer;padding:6px;align-items:center;justify-content:center}
.voice-wave-x svg{width:18px;height:18px}
.sov-kform .voice-wave-x,.rsearch .voice-wave-x{display:none}
.rsearch.listening .voice-wave,.sov-kform.listening .voice-wave{display:block}
.rsearch.listening .voice-wave-x,.sov-kform.listening .voice-wave-x{display:inline-flex}
.rsearch.listening input,.sov-kform.listening input{display:none}
.rsearch.listening .rsearch-ic{display:none}
/* Recording state: only waveform + X. Hide mic and submit button. */
.rsearch.listening .vmic,.sov-kform.listening .vmic{display:none}
.rsearch.listening .rsearch-go,.sov-kform.listening [type="submit"]{display:none}

/* ---- Mobile: align the mic's right edge with the hamburger above ----
   The search bar has 8px right padding; the mic (last element, submit hidden on mobile)
   sits 8px in from the edge, while the hamburger's right edge is at the gutter. Cancel
   that 8px for the mic so the two right edges (and their centered icons) line up. */
@media(max-width:980px){
  .rsearch .vmic{margin-right:-8px}
}


/* ---- Home search box voice UI (match the results bar) ---- */
.home-box .voice-wave,
.home-box .voice-wave-x{display:none;pointer-events:none}
.home-box.listening .voice-wave{display:block;flex:1 1 auto;min-width:0;height:32px;pointer-events:auto}
.home-box.listening .voice-wave-x{display:inline-flex;pointer-events:auto}
.home-box.listening input{display:none}
.home-box.listening .vmic,
.home-box.listening [type="submit"]{display:none}