/* public/app/css/visual-ultra-llm.css
 * Synopsis: Mode Ultra — section Reformulation LLM.
 * Objectif: Matrice modes et sources façon cockpit IA.
 */

html[data-vok-visual="ultra"] .dash .dash-panel--modes {
    background:
        radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--dash-accent) 16%, transparent), transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--dash-accent) 7%, transparent), transparent 2.4rem),
        var(--dash-elev);
}

html[data-vok-visual="ultra"] .dash .dash-modes-matrix {
    gap: .42rem;
}

html[data-vok-visual="ultra"] .dash .dash-mode {
    border-color: color-mix(in srgb, var(--dash-accent) 26%, var(--dash-line));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
        0 2px 8px color-mix(in srgb, var(--dash-text) 8%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-mode[aria-selected="true"] {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--dash-accent) 48%, transparent),
        0 0 16px color-mix(in srgb, var(--dash-accent) 26%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-source-pick {
    border-color: color-mix(in srgb, var(--dash-accent) 34%, var(--dash-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dash-accent) 12%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-source-pick[aria-pressed="true"] {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--dash-accent) 55%, transparent),
        0 0 14px color-mix(in srgb, var(--dash-accent) 30%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-mode-refresh {
    border-color: color-mix(in srgb, var(--dash-accent) 30%, var(--dash-line));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--dash-text) 10%, transparent);
}

html[data-vok-visual="ultra"] .dash .llm-status:not([hidden]) {
    background: color-mix(in srgb, var(--dash-accent) 10%, var(--dash-elev2));
    border-color: color-mix(in srgb, var(--dash-accent) 28%, var(--dash-line));
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--dash-accent) 8%, transparent);
}

html[data-vok-visual="ultra"] .dash .llm-modes-note a {
    color: var(--dash-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
}

@media (prefers-reduced-motion: no-preference) {
    html[data-vok-visual="ultra"] .dash .dash-mode:hover:not([aria-selected="true"]):not(:disabled) {
        transform: translateY(-1px);
    }
}