/* The Listening sign -- hands-free voice on every page (DK-102, spec 5.2.2).
 *
 * page-commands.js injects <div id="jalpa-listening" class="hf-sign"
 * role="status" aria-live="assertive">. It shows whenever the microphone is
 * open, for any caller (the hands-free loop, Fill by voice, Jalpa's panel), and
 * as a button when hands-free is paused or needs a first tap.
 *
 * Large, plain and high contrast: read from across a room by somebody with
 * gloves on. Only tokens.css colours. Sized in rem, so the text-size setting's
 * zoom (text-size.css) scales it with everything else. No pulse at all, so
 * prefers-reduced-motion has nothing to turn off but the fade.
 */

.hf-sign {
    position: fixed;
    left: 50%;
    bottom: calc(var(--cbs-space-5, 1.5rem) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 950; /* above the phone tab bar (150) and Jalpa's launcher (900) */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem 1.5rem;
    border: 3px solid var(--cbs-ink-inverse);
    border-radius: var(--cbs-radius-pill);
    background: var(--cbs-navy-deep);
    color: var(--cbs-ink-inverse);
    box-shadow: var(--cbs-shadow-lg);
    font-family: var(--cbs-font);
    font-size: 1.5rem;
    font-weight: var(--cbs-weight-bold, 700);
    line-height: 1.25;
    text-align: center;
    transition: opacity var(--cbs-motion, 150ms) ease;
}

.hf-sign[hidden] {
    display: none;
}

.hf-sign--listening {
    background: var(--cbs-alert-ink, var(--cbs-navy-deep));
}

.hf-sign--blocked {
    background: var(--cbs-ink);
    font-size: 1.125rem;
}

.hf-sign__btn {
    min-height: 48px;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.hf-sign__btn:focus-visible {
    outline: 3px solid var(--cbs-amber);
    outline-offset: 4px;
}

/* On a phone the bottom bar is 56px plus the safe area: sit above it. */
@media (max-width: 900px) {
    .hf-sign {
        bottom: calc(56px + var(--cbs-space-3, 0.75rem) + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-sign {
        transition: none;
    }
}

@media (forced-colors: active) {
    .hf-sign {
        border-color: CanvasText;
    }
}