/* -----------------------------------------------------------------------------
 * Audio-suspended banner (issue #1178)
 *
 * Surfaced by `WavetableSynthComponent` when the engine reports the
 * AudioContext is suspended on a VISIBLE tab — autoplay-policy block, OS
 * audio-session loss, or an external pause via DevTools. The browser
 * autoplay policy requires a user gesture to resume the context, so we
 * present an explicit, keyboard-accessible Resume button rather than
 * trying to resume from a non-gesture event.
 *
 * Visual conventions match the existing `wt-mipbuild-overlay` (rounded,
 * monospace, dark translucent background, bottom-center) so the surface
 * feels native to the synth shell. The dot and edge use the app's one
 * accent grey rather than a dedicated "alert" hue - the explicit message
 * and Resume button already say this needs attention.
 *
 * The banner is a `role="status"` / `aria-live="polite"` region: screen
 * readers announce the message when it appears, but it does NOT steal
 * focus from the user's current control — the Resume button is kept in
 * tab order so a keyboard user can reach it without a forced focus jump.
 * --------------------------------------------------------------------------- */

#wt-audio-suspended-banner {
    position: fixed;
    left: 50%;
    bottom: 64px; /* Sits above the wt-mipbuild-overlay slot (24px). */
    transform: translateX(-50%);
    z-index: var(--z-floating, 10000);
    display: none; /* Hidden by default; .is-visible toggles on. */
    align-items: center;
    gap: var(--spacing-md, 16px);
    padding: 10px 14px 10px 18px;
    background: rgba(0, 0, 0, 0.92);
    color: var(--text-primary, #ececec);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.03em;
    border: 1px solid rgba(201, 201, 201, 0.4);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
    /* Promote to its own compositor layer so the visibility transition
     * does not contend with the audio thread / FFT loop. Mirrors the
     * mipbuild overlay's rationale. */
    will-change: opacity, transform;
    opacity: 0;
    transition: opacity 160ms ease-out;
}

#wt-audio-suspended-banner.is-visible {
    display: inline-flex;
    opacity: 1;
}

#wt-audio-suspended-banner .wt-audio-suspended-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(201, 201, 201, 0.6);
    flex-shrink: 0;
}

#wt-audio-suspended-banner .wt-audio-suspended-message {
    flex: 1;
    line-height: 1.4;
}

#wt-audio-suspended-banner .wt-audio-suspended-resume {
    /* Standalone button so default browser styles don't bleed in via
     * `04-buttons.css`. Matches the surface's monospace voice. */
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(201, 201, 201, 0.6);
    background: rgba(201, 201, 201, 0.08);
    color: var(--accent-color);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

#wt-audio-suspended-banner .wt-audio-suspended-resume:hover,
#wt-audio-suspended-banner .wt-audio-suspended-resume:focus-visible {
    background: rgba(201, 201, 201, 0.18);
    border-color: rgba(201, 201, 201, 0.9);
    outline: none;
}

#wt-audio-suspended-banner .wt-audio-suspended-resume:focus-visible {
    /* Visible keyboard-focus ring on top of the existing border. */
    box-shadow: 0 0 0 2px rgba(201, 201, 201, 0.35);
}

#wt-audio-suspended-banner .wt-audio-suspended-resume:active {
    background: rgba(201, 201, 201, 0.28);
}

#wt-audio-suspended-banner .wt-audio-suspended-resume[disabled] {
    cursor: progress;
    opacity: 0.6;
}