/* Speak into any search field (js/field-voice.js, VS1): a small mic inside the end of every search field. The mic is
   placed by the script over the field's end and the field gets room for it, so the typed words are never covered.
   Greyed in the web version (no ear there); a ring that pulses while the field is being spoken into. Colours follow
   the Talk to Dew mark (--voice-ring and friends) so every look wears it. */
.fv-mic { position: absolute; z-index: 3; box-sizing: border-box; display: inline-grid; place-items: center; padding: 0; margin: 0;
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--voice-ring, #2e8b57); transition: background-color .15s ease, box-shadow .15s ease; }
.fv-mic[hidden] { display: none; }
.fv-mic svg { width: var(--fv-icon, 17px); height: var(--fv-icon, 17px); fill: currentColor; pointer-events: none; }
.fv-mic:hover { background: rgba(var(--tint, 128, 128, 128), .14); }
.fv-mic:focus-visible { outline: 3px solid var(--voice-focus, #2a6fdb); outline-offset: 1px; }
.fv-mic[data-state="unavailable"] { color: var(--voice-ring-off, #8a8a84); opacity: .55; }
.fv-mic[data-state="listening"] { box-shadow: 0 0 0 2px var(--voice-ring, #2e8b57); animation: fv-pulse 1.2s ease-in-out infinite; }
.fv-mic[data-state="listening"] svg rect { fill: currentColor; }
@keyframes fv-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--voice-ring, #2e8b57); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .fv-mic { transition: none; } .fv-mic[data-state="listening"] { animation: none; } }

/* room for the mic at the end of the words (the dock's halves set their own padding, so the selectors outrank them) */
input.fv-has, textarea.fv-has { padding-inline-end: var(--fv-room, 42px); }
#nx-input.fv-has { padding-right: var(--fv-room, 42px); }      /* the AI box (VS4): its own padding is set by id */
html .search-pair > input.fv-has,
html .search-pair:not([data-room]) > input.fv-has,
html .search-pair[data-room] > input.fv-has.has-room { padding-right: var(--fv-room, 42px); }
[dir="rtl"] input.fv-has, [dir="rtl"] textarea.fv-has { padding-right: revert; padding-inline-end: var(--fv-room, 42px); }
[dir="rtl"] #nx-input.fv-has { padding-right: 14px; padding-left: var(--fv-room, 42px); }

/* while the field is spoken into: the words that are still being heard are greyed, a ring marks the field */
input.fv-partial, textarea.fv-partial { color: var(--muted, #888); }
input.fv-listening, textarea.fv-listening { caret-color: transparent; }
.search-pair:has(> input.fv-listening) { border-color: var(--voice-ring, #2e8b57); }
:is(input, textarea).fv-listening:not(.search-pair > input) { box-shadow: 0 0 0 2px var(--voice-ring, #2e8b57); }

/* the little line over a mic: the tip, or "Speaking comes with the Dew program" */
.fv-note { position: fixed; z-index: 2147483000; box-sizing: border-box; max-width: min(280px, calc(100vw - 16px)); padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--line, #c9c9c2); background: var(--solid, #0e131f); color: var(--text, #e8eefc);
  font-size: calc(13px * var(--ts, 1)); line-height: 1.35; box-shadow: 0 4px 16px var(--shadow, rgba(0, 0, 0, .55)); pointer-events: none; }
.fv-note[hidden] { display: none; }
.fv-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }