/* public/app/css/dash-chrome-pro.css
 * Synopsis: Couleurs repos / survol chrome dictée.
 * Objectif: Flat, calme, lisible avec le thème engagé.
 */

.dash .dash-panel--keyboard {
    --dash-kbd-hover: color-mix(in srgb, var(--dash-accent) 22%, var(--dash-elev2));
    --dash-kbd-ring: color-mix(in srgb, var(--dash-accent) 48%, var(--dash-line));
}

.dash .dash-act:hover:not(:disabled),
.dash .dash-seg-btn:hover:not([aria-pressed="true"]),
.dash .dash-mode:hover:not([aria-selected="true"]) {
    background: color-mix(in srgb, var(--dash-accent) 10%, var(--dash-elev2));
    border-color: color-mix(in srgb, var(--dash-accent) 32%, var(--dash-line));
    color: var(--dash-text);
}

.dash .dash-kbd-tab:hover,
.dash .dash-kbd-key:hover,
.dash .dash-kbd-mod:hover,
.dash .dash-kbd-mod:focus-visible {
    background: var(--dash-kbd-hover);
    border-color: var(--dash-kbd-ring);
    color: color-mix(in srgb, var(--dash-text) 88%, var(--dash-accent));
}

.dash .dash-compose-ico:hover:not(:disabled),
.dash .dash-compose-ico:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--dash-accent) 18%, var(--dash-input-bg));
    border-color: color-mix(in srgb, var(--dash-accent) 42%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-accent) 78%, var(--dash-text));
}

.dash .dash-compose #stt-btn.dash-go--in:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dash-accent) 14%, var(--dash-input-bg));
    border-color: color-mix(in srgb, var(--dash-accent) 42%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-accent) 82%, var(--dash-text));
}

.dash .dash-reset--kbd {
    background: color-mix(in srgb, var(--dash-hot) 10%, var(--dash-elev2));
    border-color: color-mix(in srgb, var(--dash-hot) 38%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-hot) 70%, var(--dash-text));
}

.dash .dash-reset--kbd:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dash-hot) 18%, var(--dash-elev2));
    border-color: color-mix(in srgb, var(--dash-hot) 55%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-hot) 82%, var(--dash-text));
}

.dash .dash-chars {
    background: color-mix(in srgb, var(--dash-input-bg) 82%, var(--dash-accent-dim));
    border-color: color-mix(in srgb, var(--dash-accent) 28%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-muted) 55%, var(--dash-text));
}

.dash .dash-eq {
    background: color-mix(in srgb, var(--dash-accent-dim) 70%, var(--dash-input-bg));
    border-color: color-mix(in srgb, var(--dash-accent) 22%, var(--dash-line));
    opacity: .78;
}

.dash .dash-eq[data-eq-state="live"],
.dash .dash-eq.dash-eq--live {
    border-color: color-mix(in srgb, var(--dash-accent) 42%, var(--dash-line));
    opacity: 1;
}