/* 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;
}
.vmic svg{width:19px;height:19px}
.vmic:hover{color:var(--pine-2);background:var(--surface-2)}
.vmic.on{color:#fff;background:var(--coral);animation:vmic-pulse 1.4s ease-out infinite}

@keyframes vmic-pulse{
  0%  {box-shadow:0 0 0 0   rgba(240,100,59,.45)}
  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)}
.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)}

@media (prefers-reduced-motion:reduce){
  .vmic.on{animation:none}
}