/**
 * Voice Dictation mic button — shared component.
 *
 * Renders a circular mic control next to a text input or textarea. The button
 * pulses gently while active (`.vd-mic-active`) to signal capture.
 *
 * Zero desktop footprint: only active in mobile-sized viewports; desktop pages
 * never mount a VoiceDictation handle, so no media gate is needed here.
 */

.vd-mic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(235, 190, 120, 0.18);
    color: #f4dca8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.14s ease-out, transform 0.12s ease-out, box-shadow 0.14s ease-out;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
}

.vd-mic-btn:active {
    background: rgba(235, 190, 120, 0.32);
    transform: scale(0.94);
}

/* unifying-sayit-voice S5 — the glyph is now the shared `FergiInputControlBoard.MIC_GLYPH`
   and no longer carries this file's own `vd-mic-icon` class. Selecting the element rather
   than a class it no longer has is what keeps this rule attached to the thing it sizes. */
.vd-mic-btn svg {
    display: block;
}

/* Active state — pulsing halo + amber fill. */
.vd-mic-btn.vd-mic-active {
    background: linear-gradient(135deg, #ffd27a 0%, #ebbe78 100%);
    color: #0a1220;
    animation: vd-mic-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(235, 190, 120, 0.55);
}

@keyframes vd-mic-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(235, 190, 120, 0.55); }
    60%  { box-shadow: 0 0 0 12px rgba(235, 190, 120, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(235, 190, 120, 0);    }
}

/*
 * Transcribing state — unifying-dictation-control S2.
 *
 * The mic moved off the browser's speech engine onto the vault's own. The
 * browser engine streamed words into the field while the member spoke; the
 * vault's transcribes the finished recording, so there is now a real pause
 * between "stopped talking" and "text appears". Without a state for it, that
 * pause looks exactly like a mic that did nothing — and a member who believes
 * nothing happened taps again and loses what they said.
 *
 * Slower and dimmer than the recording pulse on purpose: recording is the vault
 * listening to you, this is the vault thinking. They must not look alike.
 */
.vd-mic-btn.vd-mic-busy {
    background: rgba(235, 190, 120, 0.28);
    color: #f4dca8;
    cursor: progress;
    animation: vd-mic-thinking 1.9s ease-in-out infinite;
}

@keyframes vd-mic-thinking {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Reduced-motion users get static states instead of the pulse. */
@media (prefers-reduced-motion: reduce) {
    .vd-mic-btn.vd-mic-active,
    .vd-mic-btn.vd-mic-busy {
        animation: none;
    }
    .vd-mic-btn.vd-mic-busy {
        opacity: 0.75;
    }
}