/* -----------------------------------------------------------------------------
 * MIDI-first cold-start activation banner (issue #1614)
 *
 * Surfaced by `midiActivationBanner.js` the moment a hardware MIDI note-on
 * arrives while the AudioContext is still suspended (no user-activation gesture
 * yet). Web MIDI is NOT a user activation under the autoplay policy, so without
 * this cue the user's first note(s) are silently swallowed with no signal that
 * they must click/tap/type first. The banner self-dismisses on the first
 * qualifying gesture (which is what actually resumes audio).
 *
 * Visual conventions mirror `19-audio-suspended-banner.css` (rounded, monospace,
 * dark translucent surface, bottom-center) so the cue feels native to the
 * synth shell. It sits a row above the audio-suspended banner so the two
 * never overlap if both are ever live.
 *
 * `role="status"` / `aria-live="polite"`: announced when it appears without
 * stealing focus. There is no in-banner button — the dismiss affordance is "do
 * the gesture the page is already waiting for", so the whole page is the target.
 * --------------------------------------------------------------------------- */

#wt-midi-activation-banner {
    position: fixed;
    left: 50%;
    bottom: 108px; /* Above the audio-suspended banner (64px) + its height. */
    transform: translateX(-50%);
    z-index: var(--z-floating, 10000);
    display: none; /* Hidden by default; .is-visible toggles on. */
    align-items: center;
    gap: var(--spacing-sm, 10px);
    padding: 10px 16px;
    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 sibling banners. */
    will-change: opacity, transform;
    opacity: 0;
    transition: opacity 160ms ease-out;
}

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

#wt-midi-activation-banner .wt-midi-activation-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-midi-activation-banner .wt-midi-activation-message {
    flex: 1;
    line-height: 1.4;
}