/* public/app/css/dash-status.css
 * Synopsis: Pastille statut dictée sous le slogan.
 * Objectif: Discret, calé thème, aligné au wordmark.
 */

.dash .dash-status {
    color: var(--dash-muted);
    flex: 0 1 auto;
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 500;
    max-width: min(100%, 22rem);
    min-width: 0;
    order: 3;
}

.dash.dash--fs .dash-status {
    flex: 1 0 100%;
    margin-left: calc(clamp(2.4rem, 5.5vw, 3.4rem) + .4rem);
    margin-top: .28rem;
    max-width: 100%;
}

.dash .dash-status[data-kind="error"],
.dash .dash-status[data-kind="warn"] {
    color: var(--dash-hot);
}

.dash .dash-status[data-kind="listening"] {
    align-items: center;
    background: color-mix(in srgb, var(--dash-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dash-accent) 42%, transparent);
    border-radius: 999px;
    color: var(--dash-accent);
    display: inline-flex;
    flex: 0 1 auto;
    font-size: clamp(.7rem, 1.05vw, .8rem);
    font-weight: 600;
    gap: .4rem;
    letter-spacing: .035em;
    line-height: 1.2;
    max-width: calc(100% - 0.5rem);
    padding: .18rem .65rem .18rem .45rem;
    width: max-content;
}

.dash .dash-status[data-kind="listening"]::before {
    animation: dash-live-dot 1.35s ease-in-out infinite;
    background: var(--dash-accent);
    border-radius: 50%;
    content: "";
    flex: 0 0 auto;
    height: .42rem;
    width: .42rem;
}

.dash .dash-status[hidden] {
    display: none;
}

@keyframes dash-live-dot {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--dash-accent) 0%, transparent);
        opacity: 1;
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--dash-accent) 28%, transparent);
        opacity: .72;
        transform: scale(.92);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash .dash-status[data-kind="listening"]::before {
        animation: none;
    }
}