/* Voice search — mic button inside the Play / Practice / Jam search bars.
 *
 * Its own stylesheet because Play and Practice load songs.css while Jam loads jam.css; no single
 * existing sheet covers all three. Everything here is sized relative to the input (em) or the wrap
 * (%), so it tracks the responsive search-bar tiers in both sheets without duplicating breakpoints.
 */

/* The wrap is already position:relative in both sheets, and the input is its only in-flow child,
   so the wrap's height IS the input's height. */
.voice-mic-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    aspect-ratio: 1;          /* square tap target as tall as the input */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--text-muted, #6b6b70);
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    transition: color 0.15s, background-color 0.15s;
}

.voice-mic-btn svg {
    width: 44%;
    height: 44%;
}

.voice-mic-btn:hover { color: var(--text, #1c1c1e); }
.voice-mic-btn:active { background: var(--accent-dim, rgba(212, 98, 42, 0.1)); }

/* Input height / font-size lands at ~2.6 across all three responsive tiers in both sheets. */
.play-search-input.has-voice { padding-right: 2.7em; }

/* ── States ─────────────────────────────────────────────────────────────── */

.voice-mic-btn[data-state="listening"] {
    color: var(--accent, #d4622a);
    background: var(--accent-dim, rgba(212, 98, 42, 0.1));
    animation: voice-pulse 1.3s ease-in-out infinite;
}

.voice-mic-btn[data-state="denied"],
.voice-mic-btn[data-state="error"] {
    color: var(--red, #c42b2b);
}

.play-search-input.voice-listening::placeholder {
    color: var(--accent, #d4622a);
    opacity: 0.75;
}

@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-dim, rgba(212, 98, 42, 0.1)); }
    50%      { box-shadow: 0 0 0 0.45em var(--accent-dim, rgba(212, 98, 42, 0.1)); }
}

/* ── Auto-open countdown ────────────────────────────────────────────────── */
/* The row about to open itself. The bar fills over AUTO_OPEN_DELAY (1500ms in voice-search.js);
   keep the two in sync if either changes. */

.ta-song.voice-pending {
    position: relative;
    background: var(--accent-dim, rgba(212, 98, 42, 0.1));
}

.ta-song.voice-pending::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--accent, #d4622a);
    transform-origin: left center;
    animation: voice-countdown 1500ms linear forwards;
}

@keyframes voice-countdown {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .voice-mic-btn[data-state="listening"] { animation: none; }
    .ta-song.voice-pending::after { animation-duration: 1ms; }
}