/* ===== WORKSPACE ===== */

.ws-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
    padding:20px 0;
    min-width:0;
    width:100%;
}
@media(min-width:1024px){
    .ws-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media(min-width:1600px){
    .ws-grid{
        gap:clamp(22px, 2vw, 40px);
        padding:20px 0 28px;
    }
}
@media(min-width:1025px){
    #section-workspace > .container{
        padding-left:max(10px, env(safe-area-inset-left, 0px));
        padding-right:max(10px, env(safe-area-inset-right, 0px));
    }
}
.ws-panel {
    background:var(--surface);
    border:2px solid var(--border);
    padding:16px;
    position:relative;
    min-width:0;
}
.ws-panel-head {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
}
.ws-panel-reset-btn {
    margin-left:auto;
    flex-shrink:0;
}
.ws-panel-title {
    margin:0;
    font-family:var(--font-ui);
    font-size:var(--text-title);
    font-weight:700;
    color:var(--role-brand-text, var(--accent-red));
    text-transform:uppercase;
    letter-spacing:.04em;
    line-height:var(--leading-tight);
}
.ws-output {
    background:var(--bg-dark);
}
.ws-panel .form-label {
    color:var(--text-white);
    font-weight:600;
}

.stt-block {
    margin-top:10px;
    padding:12px;
    border:2px solid var(--border);
    background:var(--bg-black);
}
.stt-strip {
    position:relative;
    margin:0 0 8px;
    padding:6px 8px 8px;
    border:1px solid color-mix(in srgb, var(--accent-red) 35%, var(--border));
    border-radius:4px;
    background:color-mix(in srgb, var(--accent-red) 8%, var(--bg-black));
    overflow:visible;
}
.stt-strip-row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
}
.stt-strip-dictate-btn {
    flex-shrink:0;
    margin:0;
    padding:10px 18px;
    min-height:40px;
    font-size:var(--text-body);
    font-weight:700;
    letter-spacing:.02em;
    line-height:var(--leading-tight);
    white-space:nowrap;
    background:var(--role-cta-primary);
    color:var(--role-cta-primary-text);
    border:2px solid var(--role-cta-primary);
}
.stt-strip-dictate-btn:hover,
.stt-strip-dictate-btn:focus-visible {
    filter:brightness(1.08);
    color:var(--role-cta-primary-text);
    outline:none;
}
.stt-strip-status {
    display:flex;
    align-items:center;
    gap:4px;
    flex:1 1 auto;
    min-width:0;
}
.stt-engage-msg {
    margin:0;
    padding:0 4px;
    max-width:100%;
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:600;
    line-height:1.25;
    color:color-mix(in srgb, var(--role-error-text, var(--error)) 82%, var(--text-muted));
    opacity:.88;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    white-space:normal;
}
.stt-engage-msg[hidden] {
    display:none !important;
}
.stt-strip-options-btn {
    flex-shrink:0;
    margin:0 0 0 auto;
    padding:6px 12px;
    min-height:32px;
    border:1px solid var(--border);
    background:var(--bg-black);
    color:var(--text-muted);
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    cursor:pointer;
    border-radius:4px;
    transition:background .15s, color .15s, border-color .15s;
    white-space:nowrap;
    line-height:var(--leading-tight);
}
.stt-strip-options-btn:hover,
.stt-strip-options-btn:focus-visible {
    color:var(--text-white);
    border-color:var(--text-muted);
    outline:none;
}
.stt-strip-options-btn.is-open {
    color:var(--role-brand-text, var(--accent-red));
    border-color:color-mix(in srgb, var(--accent-red) 50%, var(--border));
    background:color-mix(in srgb, var(--accent-red) 10%, var(--bg-black));
}
.stt-strip-options {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:8px 6px 6px;
    margin-top:6px;
    border-top:1px dashed color-mix(in srgb, var(--accent-red) 25%, var(--border));
    background:color-mix(in srgb, var(--bg-black) 40%, transparent);
    border-radius:0 0 3px 3px;
}
.stt-strip-options[hidden] { display:none !important; }
.stt-opt-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 8px;
    padding:4px 0;
}
.stt-opt-row--mic {
    flex-wrap:nowrap;
}
.stt-opt-row--toggle {
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:8px;
}
.stt-opt-label {
    flex:0 0 auto;
    min-width:6.5em;
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.3px;
    white-space:nowrap;
}
.stt-opt-select {
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:100%;
    height:36px;
    padding:4px 10px;
    font-size:var(--text-small);
}
.stt-opt-row--mic .stt-opt-select {
    flex:1 1 auto;
}
.stt-opt-row--toggle .ws-stt-insert-toggle {
    margin-left:auto;
}
.stt-opt-action-btn,
.stt-preload-btn {
    flex-shrink:0;
    width:auto;
    min-width:0;
    height:36px;
    padding:0 12px;
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    line-height:var(--leading-tight);
    white-space:nowrap;
    color:var(--role-chrome-text, var(--text-white));
    border:1px solid var(--border);
    background:var(--bg-black);
    border-radius:4px;
}
.stt-opt-action-btn:hover,
.stt-opt-action-btn:focus-visible,
.stt-preload-btn:hover,
.stt-preload-btn:focus-visible {
    color:var(--role-brand-text, var(--accent-red));
    border-color:color-mix(in srgb, var(--role-brand-text, var(--accent-red)) 55%, var(--border));
    background:color-mix(in srgb, var(--role-brand-text, var(--accent-red)) 8%, var(--bg-black));
    outline:none;
}
.stt-preload-btn.stt-preload-btn-ready {
    opacity:.75;
    cursor:default;
    color:var(--role-stt-ok-text, var(--success));
    border-color:color-mix(in srgb, var(--role-stt-ok-text, var(--success)) 45%, var(--border));
}
.stt-preload-btn:disabled:not(.stt-preload-btn-ready) {
    opacity:.55;
    cursor:not-allowed;
}
.stt-strip-icon-btn {
    color:var(--role-chrome-text, var(--text-white));
    border:1px solid var(--border);
    background:var(--bg-black);
}
.stt-strip-icon-btn:hover,
.stt-strip-icon-btn:focus-visible {
    color:var(--role-brand-text, var(--accent-red));
    border-color:color-mix(in srgb, var(--role-brand-text, var(--accent-red)) 55%, var(--border));
    background:color-mix(in srgb, var(--role-brand-text, var(--accent-red)) 8%, var(--bg-black));
    outline:none;
}
.stt-strip-refresh-btn {
    flex-shrink:0;
    width:36px;
    min-width:36px;
    height:36px;
    padding:0;
    line-height:1;
}
.ws-stt-insert-toggle {
    flex-shrink:0;
    gap:6px;
    padding:0 2px;
    font-size:var(--text-caption);
    white-space:nowrap;
}
.ws-stt-insert-toggle input[type=checkbox] {
    width:30px;
    height:17px;
}
.ws-stt-insert-toggle input:checked::after {
    left:15px;
}
.ws-stt-insert-toggle span {
    min-width:3.2em;
}
.stt-strip-chip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    min-width:32px;
    height:32px;
    padding:0 8px;
    border:1px solid var(--border);
    background:var(--role-stt-chip-bg, var(--bg-black));
    color:var(--role-stt-chip-text, var(--text-white));
    border-radius:4px;
}
.stt-strip-chip .stt-model-badge {
    margin:0;
    padding:2px 8px;
    font-size:var(--text-small);
    line-height:1.2;
    white-space:nowrap;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
}
.stt-model-status-bar.stt-strip-chip {
    width:auto;
    max-width:none;
    flex-shrink:1;
    min-width:0;
}
.stt-strip-chip .stt-mic-badge {
    margin:0;
    padding:2px 8px;
    font-size:var(--text-small);
    line-height:1.2;
    white-space:nowrap;
}
.stt-strip-hint {
    margin:4px 0 0;
    padding:0 4px;
    font-size:var(--text-caption);
    line-height:var(--leading-normal);
    color:var(--text-muted);
}
.stt-strip-hint[hidden] {
    display:none !important;
}
.stt-strip-hint--error {
    color:var(--role-error-text, var(--error));
}
.stt-strip-hint--warn {
    color:var(--role-brand-text, var(--accent-red));
}
.stt-strip-hint a {
    color:var(--role-brand-text, var(--accent-red));
    font-weight:700;
}
.stt-strip-hint a:hover,
.stt-strip-hint a:focus-visible {
    color:var(--role-brand-text-hover, var(--accent-hover, var(--accent-red)));
}
.stt-strip-load {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    margin:0;
    padding:0;
    border:none;
    background:transparent;
    border-radius:0;
    overflow:hidden;
    pointer-events:none;
}
.stt-strip-load[hidden] {
    display:none !important;
}
.stt-strip-load .stt-load-label,
.stt-strip-load .stt-load-detail {
    display:none !important;
}
.stt-strip-load .stt-load-bar {
    height:3px;
    margin:0;
    border-radius:0;
    background:color-mix(in srgb, var(--border) 60%, transparent);
}
.stt-strip-load .stt-load-fill {
    border-radius:0;
}
.stt-block-head {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 2px;
    padding-bottom:8px;
    border-bottom:1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.stt-block-title {
    font-family:var(--font-ui);
    font-size:var(--text-ui);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--role-brand-text, var(--accent-red));
}
.stt-btn-big {
    width:100%;
    padding:12px 16px !important;
    font-size:var(--text-body);
    font-weight:700;
    letter-spacing:.5px;
}
.stt-status-inline {
    display:flex;
    align-items:stretch;
    gap:8px;
    width:100%;
    min-width:0;
    font-size:var(--text-caption);
}
.stt-inline-chip {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:1;
    min-width:0;
    padding:6px 8px;
    border:1px solid var(--border);
    background:var(--bg-black);
    border-radius:4px;
}
.stt-inline-chip .stt-status-key {
    min-width:auto;
    font-size:var(--text-caption);
    flex-shrink:0;
    color:var(--text-muted);
    letter-spacing:.02em;
}
.stt-inline-chip .stt-model-badge,
.stt-inline-chip .stt-mic-badge {
    flex-shrink:0;
}
.stt-status-inline .stt-status-compact,
.stt-strip .stt-status-compact {
    display:none !important;
}
.stt-workspace-hint {
    margin:6px 0 0;
    font-size:var(--text-small);
}
.stt-engine-select { flex:1; min-width:140px; max-width:100%; }
.stt-settings-actions { margin-bottom:4px; }
.stt-ws-compute-hint:empty,
.stt-ws-compute-hint[hidden] {
    display:none;
    margin:0;
}
.stt-ws-compute-hint {
    margin:0;
    font-size:var(--text-small);
    line-height:var(--leading-tight);
    color:var(--text-muted);
}
.stt-ws-lan-settings-link.btn-link {
    background:none;
    border:none;
    padding:0;
    margin:0;
    color:var(--role-brand-text, var(--accent-red));
    font:inherit;
    font-weight:700;
    cursor:pointer;
    text-decoration:underline;
}
.stt-ws-lan-settings-link.btn-link:hover,
.stt-ws-lan-settings-link.btn-link:focus-visible {
    color:var(--role-brand-text-hover, var(--accent-hover, var(--accent-red)));
}
.stt-row {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.stt-row #stt-btn {
    display:inline-block;
}
#stt-btn:disabled {
    opacity:0.55;
    cursor:not-allowed;
    animation:none !important;
}
#stt-btn.stt-btn-waiting:disabled {
    opacity:0.72;
}
@keyframes stt-perm-pulse {
    0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--role-cta-primary) 40%, transparent); }
    50% { box-shadow:0 0 0 6px transparent; }
}
.stt-status { font-size:var(--text-caption); }
.stt-status-grid {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
    font-size:var(--text-caption);
}
.stt-status-grid-settings { margin-bottom:10px; }
.stt-model-status-bar,
.stt-mic-status-bar {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.stt-status-key {
    min-width:52px;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    font-size:var(--text-caption);
    letter-spacing:.03em;
}
.stt-status-val {
    flex:1;
    min-width:120px;
    color:var(--text-white);
}
.stt-model-badge,
.stt-mic-badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:2px 8px;
    border-radius:3px;
    font-size:var(--text-caption);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    border:1px solid transparent;
}
.stt-badge-icon {
    flex-shrink:0;
    font-size:var(--text-body);
    line-height:1;
    font-style:normal;
    text-transform:none;
    letter-spacing:0;
}
.stt-badge-label {
    line-height:1.2;
    white-space:nowrap;
}
.stt-strip-chip .stt-model-badge,
.stt-strip-chip .stt-mic-badge {
    text-transform:none;
    letter-spacing:.02em;
    font-weight:700;
}
.stt-model-badge-pending,
.stt-mic-badge-unknown {
    background:var(--role-stt-pending-bg, color-mix(in srgb, var(--text-muted) 12%, var(--bg-black)));
    color:var(--role-stt-pending-text, var(--text-white));
    border-color:var(--role-stt-pending-border, var(--border));
}
.stt-model-badge-loading,
.stt-mic-badge-prompt {
    background:var(--role-stt-loading-bg, color-mix(in srgb, var(--accent-red) 14%, var(--bg-black)));
    color:var(--role-stt-loading-text, var(--role-badge-text, var(--accent-red)));
    border-color:var(--role-stt-loading-border, var(--accent-red));
    animation:stt-perm-pulse 1.2s ease-in-out infinite;
}
.stt-model-badge-ready,
.stt-mic-badge-ok {
    background:var(--role-stt-ok-bg, var(--bg-black));
    color:var(--role-stt-ok-text, var(--success));
    border:2px solid var(--role-stt-ok-text, var(--success));
    font-weight:800;
    text-shadow:none;
}
.stt-model-badge-stale {
    background:var(--role-stt-warn-bg, color-mix(in srgb, #ffb020 14%, var(--bg-black)));
    color:var(--role-stt-warn-text, #ffb020);
    border:2px solid color-mix(in srgb, var(--role-stt-warn-text, #ffb020) 45%, var(--border));
    font-weight:800;
    text-shadow:none;
}
.stt-model-badge-lan,
.stt-model-badge-unsupported,
.stt-mic-badge-blocked,
.stt-mic-badge-denied {
    background:var(--role-stt-error-bg, color-mix(in srgb, var(--error) 12%, var(--bg-black)));
    color:var(--role-stt-error-text, var(--role-error-text, var(--error)));
    border-color:color-mix(in srgb, var(--role-stt-error-text, var(--error)) 35%, var(--border));
}
.stt-mic-badge-listening {
    background:var(--role-stt-loading-bg, color-mix(in srgb, var(--accent-red) 16%, var(--bg-black)));
    color:var(--role-stt-loading-text, var(--role-badge-text, var(--accent-red)));
    border-color:var(--role-stt-loading-border, var(--accent-red));
}
.stt-device-row {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:10px;
}
.stt-device-label {
    margin:0;
    font-size:var(--text-small);
    min-width:90px;
}
.stt-device-select { flex:1; min-width:140px; max-width:100%; }
.stt-help { margin:8px 0 0; font-size:var(--text-small); }
.stt-lan-panel {
    margin-top:10px;
    padding:12px;
    border:2px dashed var(--accent-red);
    background:rgba(0,0,0,.25);
    font-size:var(--text-small);
}
.stt-lan-title { margin:0 0 6px; color:var(--role-brand-text, var(--accent-red)); }
.stt-lan-desc { margin:0 0 10px; color:var(--text-muted); }
.stt-lan-details { margin:8px 0; }
.stt-lan-details summary { cursor:pointer; font-weight:600; color:var(--text-white); }
.stt-lan-steps { margin:8px 0 0 18px; padding:0; color:var(--text-muted); }
.stt-lan-steps code { font-size:var(--text-caption); word-break:break-all; }
.stt-lan-note { margin:8px 0 0 18px; color:var(--role-brand-text, var(--accent-red)); font-size:var(--text-small); }
.stt-lan-localhost { margin:10px 0 0; color:var(--text-muted); }
.stt-lan-localhost-hint { font-size:var(--text-caption); color:var(--role-brand-text, var(--accent-red)); }
.stt-lan-retry { margin-top:10px; }
.stt-ws-lan-hint {
    margin-top:10px;
    padding:10px 12px;
    border:2px dashed var(--accent-red);
    background:rgba(0,0,0,.2);
    font-size:var(--text-small);
}
.stt-ws-lan-title { margin:0 0 6px; color:var(--role-brand-text, var(--accent-red)); }
.stt-ws-lan-desc { margin:0 0 8px; color:var(--text-muted); }
.stt-ws-lan-actions { margin:0; color:var(--text-muted); }
.stt-ws-lan-settings-link { font-weight:700; }
.stt-denied-panel {
    margin-top:10px;
    padding:12px;
    border:2px dashed var(--error);
    background:rgba(255,0,0,.06);
    font-size:var(--text-small);
}
.stt-denied-title { margin:0 0 6px; color:var(--role-error-text, var(--error)); }
.stt-denied-desc { margin:0 0 10px; color:var(--text-muted); }
.stt-denied-details { margin:8px 0; }
.stt-denied-details summary { cursor:pointer; font-weight:600; color:var(--text-white); }
.stt-denied-steps { margin:8px 0 0 18px; padding:0; color:var(--text-muted); }
.stt-denied-retry { margin-top:10px; }
.stt-block.stt-strip.stt-listening {
    border-color:var(--role-listening, var(--accent-red));
    animation:stt-pulse-border 1.5s ease-in-out infinite;
}
.stt-block.stt-strip.stt-permission { border-color:var(--text-muted); }
.stt-block.stt-strip.stt-loading {
    border-color:var(--text-muted);
    animation:stt-pulse-border 1.5s ease-in-out infinite;
}
.stt-block.stt-strip.stt-error { border-color:var(--role-error-text, var(--error)); }
.stt-block.stt-listening {
    border-color:var(--role-listening, var(--accent-red));
    animation:stt-pulse-border 1.5s ease-in-out infinite;
}
.stt-block.stt-permission { border-color:var(--text-muted); }
.stt-block.stt-loading {
    border-color:var(--text-muted);
    animation:stt-pulse-border 1.5s ease-in-out infinite;
}
.stt-block.stt-error { border-color:var(--role-error-text, var(--error)); }
.stt-block-load-active .stt-workspace-hint { opacity:.55; }
.stt-load-panel {
    margin-top:10px;
    padding:10px 12px;
    border:1px solid var(--accent-red);
    background:rgba(255, 40, 40, 0.06);
    border-radius:4px;
}
.stt-load-label {
    margin:0 0 8px;
    font-size:var(--text-small);
    font-weight:600;
    color:var(--text-white);
}
.stt-load-bar {
    height:10px;
    background:rgba(255,255,255,0.08);
    border-radius:5px;
    overflow:hidden;
}
.stt-load-fill {
    height:100%;
    width:0%;
    background:var(--accent-red);
    border-radius:5px;
    transition:width .25s ease;
}
.stt-load-bar-indeterminate .stt-load-fill {
    width:40% !important;
    animation:stt-load-indeterminate 1.2s ease-in-out infinite;
}
@keyframes stt-load-indeterminate {
    0% { transform:translateX(-100%); }
    100% { transform:translateX(350%); }
}
.stt-load-detail {
    margin:6px 0 0;
    font-size:var(--text-caption);
    color:var(--text-muted);
}
.stt-btn-loading {
    animation:stt-perm-pulse 1.2s ease-in-out infinite;
}
.stt-block.stt-listening #stt-btn { animation:pulse 1s infinite; }
.stt-block.stt-listening #stt-btn.stt-btn-loading { animation:stt-perm-pulse 1.2s ease-in-out infinite; }
.stt-status-listening { color:var(--role-brand-text, var(--accent-red)); font-weight:600; }
.stt-status-error { color:var(--role-error-text, var(--error)); }
.stt-status-ok { color:var(--text-muted); }
.ws-textarea.stt-streaming {
    border-color:var(--accent-red);
}
@keyframes stt-pulse-border {
    0%, 100% { border-color:var(--border); box-shadow:none; }
    50% { border-color:var(--role-listening, var(--accent-red)); box-shadow:0 0 8px color-mix(in srgb, var(--role-listening, var(--accent-red)) 30%, transparent); }
}

.ws-history-panel {
    margin-top:16px;
    border:1px solid var(--border);
    background:var(--surface);
}
.ws-history-summary {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.ws-history-summary::-webkit-details-marker { display:none; }
.ws-history-summary::before {
    content:'▸';
    color:var(--role-brand-text, var(--accent-red));
    font-size:var(--text-small);
    transition:transform .2s;
    flex-shrink:0;
}
.ws-history-panel[open] .ws-history-summary::before { transform:rotate(90deg); }
.ws-history-summary-title {
    font-family:var(--font-ui);
    font-size:var(--text-ui);
    font-weight:700;
    color:var(--role-brand-text, var(--accent-red));
    text-transform:uppercase;
    letter-spacing:.4px;
    flex:1;
    min-width:0;
}
.ws-history-count {
    font-size:var(--text-caption);
    color:var(--text-muted);
    font-family:var(--font-body);
    flex-shrink:0;
}
.ws-history-purge-btn {
    flex-shrink:0;
    margin:0;
    padding:5px 10px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text-muted);
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    cursor:pointer;
    border-radius:3px;
    transition:background .15s, color .15s, border-color .15s;
}
.ws-history-purge-btn:hover,
.ws-history-purge-btn:focus-visible {
    color:var(--role-brand-text, var(--accent-red));
    border-color:color-mix(in srgb, var(--accent-red) 45%, var(--border));
    background:color-mix(in srgb, var(--accent-red) 8%, transparent);
    outline:none;
}
.ws-history-body {
    padding:0 10px 10px;
}
.ws-history-empty {
    font-size:var(--text-small);
    color:var(--text-muted);
    padding:16px;
    border:2px dashed var(--border);
    text-align:center;
    margin:0;
}
.ws-history-empty.hidden { display:none; }
.ws-history-list {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.history-card {
    background:var(--surface);
    border:2px solid var(--border);
    padding:10px 12px;
}
.history-card-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid var(--border);
}
.history-card-meta {
    font-size:var(--text-caption);
    color:var(--text-muted);
    line-height:var(--leading-tight);
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.history-meta-line {
    display:block;
    white-space:normal;
    word-break:break-word;
}
.history-meta-model {
    display:block;
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    color:var(--text-muted);
    white-space:normal;
    word-break:break-all;
    opacity:.9;
}
.history-card-meta .val { color:var(--text-white); }
.history-head-tools {
    display:flex;
    gap:4px;
    flex-shrink:0;
}
.history-icon-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:0;
    border:1px solid var(--border);
    background:color-mix(in srgb, var(--surface) 85%, var(--bg-black));
    color:var(--text-muted);
    cursor:pointer;
    border-radius:4px;
    transition:background .15s, color .15s, border-color .15s;
}
.history-icon-btn svg {
    width:14px;
    height:14px;
}
.history-icon-btn-copy {
    width:34px;
    height:34px;
}
.history-icon-btn-copy svg {
    width:17px;
    height:17px;
}
.history-icon-btn:hover,
.history-icon-btn:focus-visible {
    color:var(--text-white);
    border-color:var(--text-muted);
    background:var(--bg-black);
    outline:none;
}
.history-icon-btn.is-active {
    color:var(--thinking-text);
    border-color:color-mix(in srgb, var(--thinking-accent) 50%, var(--border));
    background:color-mix(in srgb, var(--thinking-accent) 12%, var(--bg-black));
}
.history-icon-btn-danger:hover,
.history-icon-btn-danger:focus-visible {
    color:var(--role-brand-text, var(--accent-red));
    border-color:var(--accent-red);
}
.history-zones {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.history-sections {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.history-block {
    border:1px solid var(--border);
    background:color-mix(in srgb, var(--surface) 92%, var(--bg-black));
    border-radius:4px;
}
.history-card-preview {
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0 0 8px;
    padding:8px 10px;
    border:1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    background:color-mix(in srgb, var(--bg-black) 35%, var(--surface));
    font-size:var(--text-caption);
    color:var(--text-muted);
    line-height:1.35;
}
.history-card-preview-line {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-white);
}
.history-card-preview-k {
    display:inline-block;
    min-width:1.8em;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:var(--text-muted);
}
.history-block-summary {
    cursor:pointer;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 8px;
    width:100%;
    padding:8px 10px;
    border:none;
    background:transparent;
    text-align:left;
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    letter-spacing:.2px;
    text-transform:uppercase;
    color:var(--text-white);
    user-select:none;
}
.history-block-summary::before {
    content:'▸';
    color:var(--text-muted);
    font-size:.85em;
}
.history-block.is-open > .history-block-summary::before { content:'▾'; }
.history-block-title { flex:1; min-width:0; }
.history-block-pip {
    font-size:10px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    padding:2px 6px;
    border-radius:3px;
    border:1px solid var(--border);
    color:var(--text-muted);
    background:var(--bg-black);
}
.history-block-pip--compress {
    color:var(--text-white);
    border-color:color-mix(in srgb, var(--role-brand, var(--accent-red)) 45%, var(--border));
    background:color-mix(in srgb, var(--role-brand, var(--accent-red)) 18%, var(--bg-black));
}
.history-meta-flag {
    display:inline-block;
    font-size:10px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    padding:1px 5px;
    border:1px solid var(--border);
    border-radius:3px;
    color:var(--text-muted);
}
.history-meta-flag--compress {
    color:var(--text-white);
    border-color:color-mix(in srgb, var(--role-brand, var(--accent-red)) 45%, var(--border));
}
.history-block-body {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0 8px 8px;
}
.history-block-body[hidden],
.history-block-contexts[hidden] {
    display:none !important;
}
.history-block-body--pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.history-block-contexts {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:0 8px 8px;
}
.history-block-empty {
    margin:0;
    padding:6px 2px;
    font-size:var(--text-caption);
    color:var(--text-muted);
}
.history-zone-label {
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:3px;
}
.history-zone-label-before {
    color:var(--role-brand-text, var(--accent-red));
    opacity:.82;
}
.history-zone-label-after {
    color:var(--success);
    opacity:.88;
}
.history-zone-label-thinking {
    color:var(--thinking-text);
    opacity:.9;
}
@supports (color: color-mix(in srgb, red, blue)) {
    .history-zone-label-before {
        color:color-mix(in srgb, var(--role-brand-text, var(--accent-red)) 68%, var(--text-muted));
        opacity:1;
    }
    .history-zone-label-after {
        color:color-mix(in srgb, var(--role-success-text, var(--success)) 68%, var(--text-muted));
        opacity:1;
    }
    .history-zone-label-thinking {
        color:color-mix(in srgb, var(--thinking-accent) 68%, var(--text-muted));
        opacity:1;
    }
}
.history-zone-field {
    position:relative;
}
.history-zone-text {
    display:block;
    width:100%;
    box-sizing:border-box;
    font-family:inherit;
    font-size:var(--text-small);
    line-height:var(--leading-normal);
    color:var(--text-white);
    background:var(--bg-black);
    border:1px solid var(--border);
    padding:8px 10px;
    padding-right:86px;
    word-break:break-word;
}
.history-zone-field:not(.is-expanded) .history-zone-text {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    white-space:normal;
}
.history-zone-field.is-expanded .history-zone-text {
    display:block;
    overflow:auto;
    max-height:min(40vh, 28em);
    white-space:pre-wrap;
    -webkit-line-clamp:unset;
}
.history-zone-expand {
    display:block;
    width:100%;
    margin-top:4px;
    padding:2px 0 0;
    border:none;
    background:none;
    font-family:inherit;
    font-size:var(--text-caption);
    color:var(--text-muted);
    text-align:left;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:2px;
}
.history-zone-expand:hover,
.history-zone-expand:focus-visible {
    color:var(--text-white);
    outline:none;
}
.history-thinking .history-zone-expand:hover,
.history-thinking .history-zone-expand:focus-visible {
    color:var(--thinking-text);
}
.history-zone-text.thinking {
    border-color:color-mix(in srgb, var(--thinking-accent) 40%, var(--border));
    color:var(--thinking-text);
}
.history-zone-tools {
    position:absolute;
    top:4px;
    right:4px;
    display:flex;
    gap:2px;
    padding:2px;
    border-radius:4px;
    background:color-mix(in srgb, var(--bg-black) 88%, transparent);
    opacity:.55;
    transition:opacity .15s;
}
.history-zone-field:hover .history-zone-tools,
.history-zone-field:focus-within .history-zone-tools {
    opacity:1;
}
.history-thinking {
    margin:8px 0;
}
.history-thinking.collapsed {
    display:none;
}
.history-thinking .history-zone-text {
    padding-right:50px;
}
body.history-modal-open {
    overflow:hidden;
}
.history-view-modal {
    position:fixed;
    inset:0;
    z-index:5000;
    display:none;
    padding:18px;
}
.history-view-modal.show {
    display:flex;
    align-items:stretch;
    justify-content:center;
}
.history-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, .78);
    backdrop-filter:blur(8px);
}
.history-modal-shell {
    position:relative;
    z-index:1;
    width:min(var(--container-max-app), 100%);
    max-height:calc(100vh - 36px);
    display:flex;
    flex-direction:column;
    border:2px solid var(--border);
    background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--bg-black)), var(--bg-dark));
    box-shadow:0 24px 70px rgba(0, 0, 0, .55);
}
.history-modal-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb, var(--bg-black) 34%, transparent);
}
.history-modal-title-wrap {
    min-width:0;
}
.history-modal-kicker {
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.5px;
}
.history-modal-title {
    margin:2px 0 6px;
    font-size:var(--text-title);
    color:var(--text-white);
}
.history-modal-meta {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:var(--text-caption);
    color:var(--text-muted);
    line-height:var(--leading-tight);
}
.history-modal-meta span {
    word-break:break-word;
}
.history-modal-model {
    font-family:var(--font-ui);
    color:var(--text-white);
}
.history-modal-actions {
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}
.history-modal-icon {
    width:32px;
    height:32px;
}
.history-modal-icon.history-icon-btn-copy {
    width:36px;
    height:36px;
}
.history-modal-icon.history-icon-btn-copy svg {
    width:18px;
    height:18px;
}
.history-modal-close,
.history-modal-copy {
    border:1px solid var(--border);
    background:var(--bg-black);
    color:var(--text-muted);
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    cursor:pointer;
    border-radius:4px;
}
.history-modal-close {
    min-height:32px;
    padding:0 10px;
}
.history-modal-copy {
    min-height:36px;
    padding:8px 14px;
    font-size:var(--text-small);
}
.history-modal-close:hover,
.history-modal-close:focus-visible,
.history-modal-copy:hover,
.history-modal-copy:focus-visible {
    color:var(--text-white);
    border-color:var(--text-muted);
    outline:none;
}
.history-modal-body {
    flex:1;
    min-height:0;
    overflow:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:14px 18px 18px;
}
.history-modal-section {
    min-width:0;
    border:1px solid var(--border);
    background:color-mix(in srgb, var(--bg-black) 62%, transparent);
}
.history-modal-section-thinking {
    grid-column:1 / -1;
    border-color:color-mix(in srgb, var(--thinking-accent) 38%, var(--border));
}
.history-modal-section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-bottom:1px solid var(--border);
}
.history-modal-section-title {
    margin:0;
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.history-modal-text {
    padding:12px;
    color:var(--text-white);
    white-space:pre-wrap;
    word-break:break-word;
    line-height:var(--leading-normal);
    font-size:var(--text-small);
}
.history-modal-section-thinking .history-modal-text {
    color:var(--thinking-text);
}
.ws-textarea {
    width:100%; min-height:160px;
    background:var(--input-bg); border:2px solid var(--border);
    color:var(--text-white); padding:12px 10px 28px;
    font-family:var(--font-body); font-size:var(--text-title);
    resize:vertical; transition:all .2s;
}
.ws-input-field {
    position:relative;
}
.ws-input-tools {
    position:absolute;
    left:6px;
    bottom:6px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:2px 4px;
    border-radius:4px;
    background:color-mix(in srgb, var(--bg-black) 82%, transparent);
}
.ws-icon-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:0;
    border:1px solid var(--border);
    background:color-mix(in srgb, var(--surface) 85%, var(--bg-black));
    color:var(--text-muted);
    cursor:pointer;
    border-radius:4px;
    font-size:var(--text-small);
    line-height:1;
    transition:background .15s, color .15s, border-color .15s;
}
.ws-icon-btn:hover:not(:disabled),
.ws-icon-btn:focus-visible:not(:disabled) {
    color:var(--text-white);
    border-color:var(--text-muted);
    background:var(--bg-black);
    outline:none;
}
.ws-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ws-btn-tooltip-wrap {
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
}
.ws-btn-tooltip-wrap[data-blocked="true"] {
    cursor: not-allowed;
}
.ws-btn-tooltip-wrap[data-blocked="true"] > .ws-icon-btn:disabled,
.ws-btn-tooltip-wrap[data-blocked="true"] > .ws-audio-new-input-btn:disabled {
    pointer-events: none;
}
.ws-icon-btn-wrap {
    line-height: 0;
}
.ws-audio-new-input-wrap {
    display: inline-flex;
}
.ws-audio-new-input-wrap[data-blocked="true"] {
    cursor: not-allowed;
}
.char-count { font-size:var(--text-caption); color:var(--text-muted); }
.ws-textarea::placeholder {
    color:var(--text-muted);
    opacity:1;
}
.ws-textarea:focus { outline:none; border-color:var(--accent-red); background:var(--bg-dark); }
.ws-textarea[readonly] { cursor:default; }
.ws-prompt-guard {
    padding:8px 10px;
    border:1px solid var(--accent-red);
    background:rgba(255, 40, 40, 0.08);
    color:var(--text-white);
    font-size:var(--text-small);
    line-height:var(--leading-normal);
}
.ws-prompt-guard-compact {
    margin:0;
    flex:1;
    min-width:0;
}
.ws-prompt-guard a {
    color:var(--role-brand-text, var(--accent-red));
    font-weight:700;
}
.ws-compress-panel {
    margin-top: 10px;
    overflow: visible;
}
.ws-compress-body {
    gap: 10px;
    overflow: visible;
}
.ws-compress-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    padding-bottom: 2px;
}
.ws-compress-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-black);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 650;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s, box-shadow .2s, transform .15s;
}
.ws-compress-chip:hover:not(.is-disabled) {
    color: var(--text-white);
    border-color: color-mix(in srgb, var(--role-brand, var(--accent-red)) 55%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--role-brand, var(--accent-red)) 18%, transparent);
}
.ws-compress-chip .tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    min-width: 200px;
    max-width: min(320px, 70vw);
    width: max-content;
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.ws-compress-chip:hover .tip {
    display: block;
}
.ws-compress-chip.is-compressed:hover:not(.is-disabled) {
    border-color: color-mix(in srgb, var(--role-ok, #3d9a5f) 80%, var(--border));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--role-ok, #3d9a5f) 22%, transparent);
}
.ws-compress-chip:has(input:checked):not(.is-disabled) {
    color: var(--text-white);
    border-color: var(--role-brand, var(--accent-red));
    background: color-mix(in srgb, var(--role-brand, var(--accent-red)) 14%, var(--bg-black));
}
.ws-compress-chip input {
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    accent-color: var(--role-brand, var(--accent-red));
}
.ws-compress-chip.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ws-compress-chip.is-compressed {
    color: var(--text-white);
    border-color: color-mix(in srgb, var(--role-ok, #3d9a5f) 70%, var(--border));
    background: color-mix(in srgb, var(--role-ok, #3d9a5f) 16%, var(--bg-black));
    box-shadow: inset 5px 0 0 var(--role-ok, #3d9a5f);
}
.ws-compress-chip.is-compressed:has(input:checked):not(.is-disabled) {
    border-color: color-mix(in srgb, var(--role-ok, #3d9a5f) 75%, var(--role-brand, var(--accent-red)));
    background: color-mix(in srgb, var(--role-ok, #3d9a5f) 18%, var(--bg-black));
}
.ws-compress-chip.is-compressed::after {
    content: '';
    width: 11px;
    height: 11px;
    margin-left: 2px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--role-ok, #3d9a5f);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--role-ok, #3d9a5f) 28%, transparent),
        0 0 10px color-mix(in srgb, var(--role-ok, #3d9a5f) 55%, transparent);
}
.ws-compress-cancel-btn {
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--error, #c44) 55%, var(--border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--error, #c44) 14%, var(--bg-black));
    color: var(--text-white);
    cursor: pointer;
}
.ws-compress-cancel-btn:hover:not(:disabled) {
    border-color: var(--error, #c44);
    background: color-mix(in srgb, var(--error, #c44) 28%, var(--bg-black));
}
.ws-compress-cancel-btn[hidden] {
    display: none !important;
}
.ws-compress-cancel-btn--lock {
    margin-top: 2px;
}
/* Preload / statut : uniquement zone Output pendant Nettoyer (pas dans le dropdown) */
.ws-panel.ws-output {
    position: relative;
}
.ws-output-compress-lock {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    background: color-mix(in srgb, var(--bg-black) 72%, transparent);
    backdrop-filter: blur(2px);
    pointer-events: all;
}
.ws-output-compress-lock[hidden] {
    display: none !important;
}
.ws-output-compress-lock-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 24rem;
    width: min(100%, 24rem);
}
.ws-output-compress-lock-pulse {
    width: min(100%, 14rem);
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 65%, var(--bg-black));
    overflow: hidden;
}
.ws-output-compress-lock-pulse::after {
    content: '';
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent,
        var(--role-brand, var(--accent-red)),
        transparent
    );
    box-shadow: 0 0 12px color-mix(in srgb, var(--role-brand, var(--accent-red)) 35%, transparent);
    animation: ws-compress-preload 1.15s ease-in-out infinite;
}
.ws-compress-status {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-small);
    color: var(--text-muted);
    min-height: 1.2em;
    max-width: 100%;
}
.ws-compress-status[hidden] {
    display: none !important;
}
.ws-compress-status.is-busy {
    color: var(--text-white);
}
.ws-output-compress-lock-label {
    font-family: var(--font-ui);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--text-white);
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--role-brand, var(--accent-red)) 50%, var(--border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--role-brand, var(--accent-red)) 16%, var(--bg-black));
}
.ws-panel.ws-output.ws-compress-locked {
    pointer-events: none;
}
.ws-panel.ws-output.ws-compress-locked .ws-output-compress-lock {
    pointer-events: all;
}
@keyframes ws-compress-preload {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
@media (max-width: 1023px) {
    .ws-compress-chips {
        flex-wrap: wrap;
        overflow: visible;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ws-output-compress-lock-pulse::after {
        animation: none;
        width: 100%;
        transform: none;
        background: color-mix(in srgb, var(--role-brand, var(--accent-red)) 45%, transparent);
        opacity: 0.85;
    }
}
.ws-panel.ws-input.ws-blocked .ws-textarea {
    opacity:.72;
}
.ws-panel.ws-input.ws-blocked + .ws-panel.ws-output .ws-sniperise-btn {
    opacity:.55;
    cursor:not-allowed;
}

.profiles-bar {
    padding:12px 0;
    display:flex;
    flex-wrap:wrap;
    gap:3px;
    align-items:center;
}
.tag {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 14px;
    margin:3px;
    background:var(--surface);
    border:2px solid var(--border);
    color:var(--text-muted);
    font-family:var(--font-body);
    font-size:var(--text-ui);
    cursor:pointer;
    transition:all .15s;
    position:relative;
    user-select:none;
}
.tag:hover { border-color:var(--role-brand, var(--accent-red)); color:var(--text-white); }
.tag .tip {
    display:none;
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    background:var(--bg-dark);
    border:2px solid var(--border);
    padding:8px 12px;
    font-size:var(--text-ui);
    color:var(--text-white);
    white-space:normal;
    min-width:200px;
    z-index:50;
    pointer-events:none;
    text-align:left;
}
.tag:hover .tip { display:block; }
.tag-link { font-size:var(--text-ui); color:var(--text-muted); cursor:pointer; }
.tag-link:hover { color:var(--role-brand-text, var(--accent-red)); }
.tag-link:hover { text-decoration:none; }

.context-panel {
    margin-top:10px;
    border:2px solid var(--border);
    background:var(--surface);
}
.context-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    cursor:pointer;
    list-style:none;
    font-family:var(--font-ui);
    font-size:var(--text-body);
    font-weight:700;
    color:var(--text-white);
    user-select:none;
}
.context-summary-lead {
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:0;
}
.context-summary::-webkit-details-marker { display:none; }
.context-summary::before {
    content:'▸';
    margin-right:8px;
    color:var(--role-brand-text, var(--accent-red));
    transition:transform .2s;
}
.context-panel[open] .context-summary::before { transform:rotate(90deg); }
.context-title { flex:1; }
.context-badge {
    font-size:var(--text-small);
    font-weight:400;
    color:var(--role-brand-text, var(--accent-red));
    font-family:var(--font-body);
}
.context-body {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0 10px 10px;
}
.context-toolbar {
    display:flex;
    gap:0;
    border:1px solid var(--border);
    border-radius:4px;
    overflow:hidden;
    background:var(--bg-black);
}
.context-toolbar-btn {
    flex:1;
    min-width:0;
    margin:0;
    padding:6px 8px;
    border:none;
    border-right:1px solid var(--border);
    background:transparent;
    color:var(--text-muted);
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s, color .15s;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.context-toolbar-btn:last-child {
    border-right:none;
}
.context-toolbar-btn:hover:not(:disabled),
.context-toolbar-link:hover {
    color:var(--text-white);
    background:color-mix(in srgb, var(--surface) 60%, var(--bg-black));
    text-decoration:none;
}
.context-toolbar-btn:disabled {
    opacity:.4;
    cursor:not-allowed;
}
.context-toolbar-link {
    color:var(--role-brand-text, var(--accent-red));
}
.context-toolbar-link:hover {
    color:var(--role-brand-text-hover, var(--accent-hover));
}
.context-title-sub {
    font-weight:400;
    font-size:var(--text-small);
    color:var(--text-muted);
}
.context-order-hint {
    font-size:var(--text-small);
    color:var(--text-white);
    margin:0;
    line-height:var(--leading-normal);
    padding:10px 12px;
    background:var(--surface);
    border:1px solid var(--border);
}
.context-order-intro a {
    color:var(--role-brand-text, var(--accent-red));
    text-decoration:underline;
}
.context-order-current {
    margin-top:8px;
    color:var(--text-muted);
    font-size:var(--text-small);
}
.context-action-hint {
    font-size:var(--text-small);
    color:var(--text-muted);
    margin:0;
}
.profiles-tags {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin:0;
}
.profiles-tags .tag {
    margin:0;
    padding:4px 10px;
    font-size:var(--text-small);
}

.context-inject-box {
    margin:16px 0;
    padding:14px;
    border:2px solid var(--border);
    background:var(--bg-black);
}
.context-inject-title {
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    color:var(--text-white);
    margin-bottom:10px;
}
.context-inject-diagram {
    font-family:var(--font-body);
    font-size:var(--text-small);
    line-height:var(--leading-relaxed);
    color:var(--text-muted);
    white-space:pre-wrap;
    margin-bottom:12px;
    padding:10px;
    border:1px dashed var(--border);
    background:var(--surface);
}
.context-inject-diagram .inject-highlight {
    color:var(--role-brand-text, var(--accent-red));
    font-weight:700;
}
.context-inject-options {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.context-inject-option {
    display:block;
    position:relative;
    padding-left:24px;
    font-size:var(--text-small);
    color:var(--text-white);
    cursor:pointer;
    line-height:var(--leading-normal);
}
.context-inject-option input[type="radio"] {
    position:absolute;
    left:0;
    top:0.2em;
    margin:0;
}
.context-inject-rec {
    color:var(--success);
    font-size:var(--text-small);
}
.context-quick-add,
.context-generate-box,
.context-gen-config-box {
    margin:14px 0;
    border:2px solid var(--border);
    background:var(--surface);
}
.context-quick-add-summary,
.context-generate-summary,
.context-gen-config-summary {
    padding:12px 14px;
    cursor:pointer;
    list-style:none;
    font-family:var(--font-ui);
    font-weight:700;
    color:var(--text-white);
    user-select:none;
}
.context-quick-add-summary::-webkit-details-marker,
.context-generate-summary::-webkit-details-marker,
.context-gen-config-summary::-webkit-details-marker { display:none; }
.context-quick-add-body,
.context-generate-body,
.context-gen-config-body {
    padding:0 14px 14px;
}
.context-quick-add-body .btn,
.context-generate-body .btn {
    text-transform:none;
    letter-spacing:normal;
}

/* Output — strip LLM (miroir stt-strip) */
.llm-strip {
    position:relative;
    margin:0 0 8px;
    padding:6px 8px 8px;
    border:1px solid color-mix(in srgb, var(--thinking-accent) 35%, var(--border));
    border-radius:4px;
    background:color-mix(in srgb, var(--thinking-accent) 8%, var(--bg-black));
    overflow:visible;
}
.llm-strip-row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--border) 70%, transparent) transparent;
    -webkit-overflow-scrolling:touch;
}
.llm-strip-row::-webkit-scrollbar {
    height:4px;
}
.llm-strip-row::-webkit-scrollbar-thumb {
    background:color-mix(in srgb, var(--border) 80%, transparent);
    border-radius:2px;
}
.llm-strip-config {
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 auto;
    min-width:0;
}
.llm-strip-field-label {
    flex-shrink:0;
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.35px;
    color:var(--text-muted);
    white-space:nowrap;
}
.llm-strip-model-select {
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:100%;
    height:36px;
    padding:4px 10px;
    font-size:var(--text-small);
}
.llm-strip-options-btn {
    flex-shrink:0;
    margin:0 0 0 auto;
    padding:6px 12px;
    min-height:32px;
    border:1px solid var(--border);
    background:var(--bg-black);
    color:var(--text-muted);
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    cursor:pointer;
    border-radius:4px;
    transition:background .15s, color .15s, border-color .15s;
    white-space:nowrap;
    line-height:var(--leading-tight);
}
.llm-strip-options-btn:hover,
.llm-strip-options-btn:focus-visible {
    color:var(--text-white);
    border-color:var(--text-muted);
    outline:none;
}
.llm-strip-options-btn.is-open {
    color:var(--thinking-text);
    border-color:color-mix(in srgb, var(--thinking-accent) 50%, var(--border));
    background:color-mix(in srgb, var(--thinking-accent) 10%, var(--bg-black));
}
.llm-strip-hint {
    flex:0 1 auto;
    min-width:0;
    max-width:12em;
    margin:0;
    padding:0 4px;
    font-size:var(--text-caption);
    line-height:var(--leading-tight);
    color:var(--text-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.llm-strip-hint[hidden] { display:none !important; }
.llm-strip-hint--warn { color:var(--role-brand-text, var(--accent-red)); }
.llm-opt-inline-hint {
    margin:0;
    padding:0 2px 2px;
    font-size:var(--text-caption);
    line-height:var(--leading-tight);
    color:var(--text-muted);
}
.llm-opt-inline-hint[hidden] { display:none !important; }
.llm-strip-options {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:8px 6px 6px;
    margin-top:6px;
    border-top:1px dashed color-mix(in srgb, var(--thinking-accent) 25%, var(--border));
    background:color-mix(in srgb, var(--bg-black) 40%, transparent);
    border-radius:0 0 3px 3px;
}
.llm-strip-options[hidden] { display:none !important; }
.llm-opt-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 8px;
    padding:4px 0;
}
.llm-opt-row--toggle {
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:8px;
}
.llm-opt-row--toggle .llm-opt-label {
    flex:1;
    min-width:0;
}
.llm-opt-row--number {
    align-items:center;
}
.llm-opt-row--number[hidden] { display:none !important; }
.llm-opt-row--range {
    flex-wrap:wrap;
    align-items:center;
}
.llm-opt-row--format {
    flex-direction:column;
    align-items:stretch;
    gap:8px;
}
.llm-opt-format-chips {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    width:100%;
}
.llm-opt-format-chip {
    display:inline-flex;
    align-items:center;
    gap:0;
    margin:0;
    padding:0;
    cursor:pointer;
    border:1px solid var(--border);
    border-radius:4px;
    background:var(--bg-black);
    color:var(--text-muted);
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    transition:border-color .15s, color .15s, background .15s, opacity .15s;
}
.llm-opt-format-chip span {
    display:block;
    padding:6px 10px;
}
.llm-opt-format-chip input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    margin:0;
    pointer-events:none;
}
.llm-opt-format-chip:hover,
.llm-opt-format-chip:focus-within {
    color:var(--text-white);
    border-color:color-mix(in srgb, var(--accent-red) 40%, var(--border));
}
.llm-opt-format-chip:has(input:checked) {
    color:var(--text-white);
    border-color:color-mix(in srgb, var(--accent-red) 55%, var(--border));
    background:color-mix(in srgb, var(--accent-red) 12%, var(--bg-black));
}
.llm-opt-format-chip.is-disabled,
.llm-opt-format-chip:has(input:disabled) {
    opacity:.42;
    cursor:not-allowed;
    pointer-events:none;
    color:var(--text-muted);
}
.llm-opt-row--format .llm-opt-hint {
    margin:0;
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    color:var(--text-muted);
    line-height:var(--leading-normal);
}
.llm-opt-label {
    flex:0 0 auto;
    min-width:6.5em;
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.3px;
    white-space:nowrap;
}
.llm-opt-row--number .llm-opt-label {
    min-width:8em;
}
.llm-opt-toggle-btn {
    flex-shrink:0;
    margin:0;
    padding:6px 14px;
    min-width:56px;
    min-height:36px;
    border:1px solid color-mix(in srgb, var(--thinking-accent, var(--border)) 35%, var(--border));
    background:var(--bg-black);
    color:var(--text-white);
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    cursor:pointer;
    border-radius:4px;
    transition:background .15s, color .15s, border-color .15s;
}
.llm-opt-toggle-btn:hover,
.llm-opt-toggle-btn:focus-visible {
    color:var(--text-white);
    border-color:color-mix(in srgb, var(--thinking-accent, var(--text-muted)) 55%, var(--border));
    background:color-mix(in srgb, var(--thinking-accent, var(--accent-red)) 6%, var(--bg-black));
    outline:none;
}
.llm-opt-toggle-btn.is-on {
    color:var(--thinking-text);
    border-color:color-mix(in srgb, var(--thinking-accent) 60%, var(--border));
    background:color-mix(in srgb, var(--thinking-accent) 20%, var(--bg-black));
}
.llm-opt-range-wrap {
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 100%;
    min-width:0;
}
.llm-opt-range-cap {
    flex-shrink:0;
    min-width:2.2em;
    font-family:var(--font-ui);
    font-size:var(--text-caption);
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--text-muted);
    text-align:center;
}
.llm-opt-range-cap--max {
    min-width:3em;
}
.llm-opt-slider {
    flex:1 1 auto;
    min-width:8em;
    max-width:100%;
    height:28px;
    margin:0;
    padding:0;
    cursor:pointer;
    accent-color:var(--thinking-accent);
    background:transparent;
}
.llm-opt-slider::-webkit-slider-runnable-track {
    height:4px;
    border-radius:2px;
    background:color-mix(in srgb, var(--border) 80%, transparent);
}
.llm-opt-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:14px;
    height:14px;
    margin-top:-5px;
    border-radius:50%;
    border:2px solid var(--thinking-accent);
    background:var(--bg-black);
    cursor:pointer;
}
.llm-opt-slider::-moz-range-track {
    height:4px;
    border-radius:2px;
    background:color-mix(in srgb, var(--border) 80%, transparent);
}
.llm-opt-slider::-moz-range-thumb {
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid var(--thinking-accent);
    background:var(--bg-black);
    cursor:pointer;
}
.llm-opt-value {
    flex-shrink:0;
    min-width:3.5em;
    padding:2px 8px;
    border:1px solid var(--border);
    border-radius:4px;
    background:var(--bg-black);
    font-family:var(--font-ui);
    font-size:var(--text-small);
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--text-white);
    text-align:center;
    line-height:var(--leading-tight);
}
.llm-opt-hint {
    flex:1 1 100%;
    font-size:var(--text-caption);
    color:var(--text-muted);
    line-height:var(--leading-tight);
}
.llm-opt-number-input {
    flex:0 0 auto;
    width:88px;
    padding:4px 8px;
    font-size:var(--text-small);
    border:1px solid var(--border);
    background:var(--input-bg);
    color:var(--text-white);
    font-family:var(--font-body);
}
.ws-output-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}
.ws-output-actions-primary {
    display:flex;
    gap:6px;
    align-items:stretch;
}
.ws-reset-btn {
    flex-shrink:0;
    padding:0 12px;
}
.ws-reset-btn:disabled {
    opacity:.45;
    cursor:not-allowed;
}
.ws-panel-reset-btn.ws-reset-btn {
    padding:4px 10px;
}
.ws-sniperise-btn {
    flex:1;
    min-width:0;
    padding:10px 12px;
}
.ws-cancel-btn {
    flex-shrink:0;
    padding:10px 12px;
    background:var(--error);
    color:var(--text-on-accent);
    border-color:var(--role-error-text, var(--error));
}
.ws-iterate-btn {
    flex-shrink:0;
    min-width:48px;
    padding:10px 14px;
    font-size:1.25rem;
    line-height:1;
    background:color-mix(in srgb, var(--role-options, var(--accent)) 55%, var(--role-stream, var(--surface-2, #333)) 45%);
    color:var(--role-options-text, var(--text-white));
    border-color:color-mix(in srgb, var(--role-options, var(--accent)) 70%, var(--border) 30%);
}
.ws-iterate-btn:disabled {
    opacity:.45;
    cursor:not-allowed;
}
.output-field-wrap {
    position:relative;
}
.output-field-wrap .thinking-text,
.output-field-wrap .output-text {
    padding-right:46px;
}
.ws-output-icon-btn {
    position:absolute;
    top:5px;
    right:5px;
    width:34px;
    height:34px;
    font-size:var(--text-ui);
    opacity:.55;
}
.output-field-wrap:hover .ws-output-icon-btn,
.output-field-wrap:focus-within .ws-output-icon-btn {
    opacity:1;
}
.output-box {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.output-box--empty .output-text {
    border-color:var(--border);
    box-shadow:none;
}
.output-box.streaming .output-text {
    border-color: var(--output-highlight);
    box-shadow: 0 0 12px color-mix(in srgb, var(--output-highlight) 25%, transparent);
    animation: pulse-border 1.5s ease-in-out infinite;
}
.output-box.loading .output-text {
    border-color: var(--output-highlight);
    box-shadow: 0 0 16px color-mix(in srgb, var(--output-highlight) 35%, transparent);
    animation: pulse-border 1s ease-in-out infinite;
}
@keyframes pulse-border {
    0%, 100% { border-color: var(--output-highlight); }
    50% { border-color: var(--accent-red); }
}
.output-text {
    width:100%; min-height:180px;
    background:var(--output-bg); border:2px solid var(--border);
    color:var(--output-text); padding:14px;
    font-family:var(--font-body); font-size:var(--text-title);
    line-height:var(--leading-normal);
    resize:vertical;
    transition: border-color .3s, box-shadow .3s;
}
.output-text::placeholder {
    color:var(--text-muted);
    opacity:1;
}
.output-text:not(:placeholder-shown) {
    border-color: color-mix(in srgb, var(--output-highlight) 55%, var(--border));
}
.streaming-dot {
    color: var(--output-highlight);
    animation: blink 1s step-end infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.output-meta {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:var(--text-ui);
    color:var(--text-muted);
}
.output-meta span { display:flex; align-items:center; gap:4px; }
.output-meta .val { color:var(--text-white); }

.thinking-panel {
    display:none;
    border:2px solid var(--border);
    background:var(--bg-dark);
}
.thinking-panel.show { display:block; }
.thinking-panel.streaming {
    border-color:var(--thinking-accent);
    box-shadow:0 0 12px color-mix(in srgb, var(--thinking-accent) 20%, transparent);
}
.thinking-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    cursor:pointer;
    list-style:none;
    font-family:var(--font-ui);
    font-size:var(--text-body);
    font-weight:700;
    color:var(--text-white);
    user-select:none;
}
.thinking-summary::-webkit-details-marker { display:none; }
.thinking-summary::before {
    content:'▸';
    margin-right:8px;
    color:var(--thinking-accent);
    transition:transform .2s;
}
.thinking-panel[open] .thinking-summary::before { transform:rotate(90deg); }
.thinking-title { flex:1; }
.thinking-badge {
    font-size:var(--text-small);
    font-weight:400;
    color:var(--thinking-accent);
    font-family:var(--font-body);
}
.thinking-body {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:0 14px 14px;
}
.thinking-text {
    width:100%;
    min-height:120px;
    max-height:280px;
    background:var(--thinking-bg);
    border:2px solid var(--border);
    color:var(--thinking-text);
    padding:12px;
    font-family:var(--font-body);
    font-size:var(--text-ui);
    line-height:var(--leading-normal);
    resize:vertical;
}
.thinking-text::placeholder {
    color:var(--text-muted);
    opacity:1;
}
.thinking-panel.streaming .thinking-text {
    border-color:var(--thinking-accent);
    animation:pulse-border 1.5s ease-in-out infinite;
}

.ws-panel.ws-input > .ws-audio-status {
    margin: 12px 0 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    clear: both;
}
.ws-panel.ws-input:not(:has(> #ws-audio-status[hidden])) .ws-input-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.ws-panel.ws-input:not(:has(> #ws-audio-status[hidden])) .ws-input-tools {
    position: static;
    order: 2;
    margin: 8px 0 0;
    align-self: flex-start;
    z-index: auto;
}
.ws-panel.ws-input:not(:has(> #ws-audio-status[hidden])) .pdm-resize-host,
.ws-panel.ws-input:not(:has(> #ws-audio-status[hidden])) .pdm-resize-wrap {
    order: 1;
    width: 100%;
}
.ws-audio-status {
    font-size:var(--text-caption);
    color: var(--text-muted);
    font-family:var(--font-body);
    line-height:var(--leading-normal);
}
.ws-panel.ws-input > .ws-image-status {
    margin: 0.35rem 0 0;
}
.ws-image-status {
    font-size:var(--text-caption);
    color: var(--text-muted);
    font-family:var(--font-body);
    line-height:var(--leading-normal);
}
.ws-image-status-processing {
    color: var(--accent, var(--text-muted));
}
.ws-image-status-done {
    color: var(--ok, var(--text-muted));
}
.ws-audio-status-processing {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent-red) 45%, var(--border));
    background: color-mix(in srgb, var(--accent-red) 10%, var(--bg-black));
    border-radius: 4px;
}
.ws-audio-processing-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.ws-audio-status-spinner {
    flex-shrink: 0;
    font-size:var(--text-small);
    animation: ws-audio-spin 1.2s linear infinite;
}
@keyframes ws-audio-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ws-audio-status-detail {
    color: var(--text-white);
    font-size:var(--text-caption);
}
.ws-audio-status-hint {
    font-size:var(--text-caption);
    color: var(--text-muted);
    line-height:var(--leading-normal);
    display: block;
}
.ws-audio-progress {
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--border) 80%, var(--bg-black));
    overflow: hidden;
}
.ws-audio-progress-fill {
    height: 100%;
    background: var(--accent-red);
    border-radius: 2px;
    transition: width .35s ease;
    min-width: 4px;
}
.ws-audio-status-done {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent-red) 35%, var(--border));
    background: color-mix(in srgb, var(--accent-red) 8%, var(--bg-black));
    border-radius: 4px;
}
.ws-audio-status-label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-white);
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height:var(--leading-normal);
}
.ws-audio-new-input-btn {
    flex-shrink: 0;
    font-size:var(--text-caption);
    padding: 6px 14px;
    white-space: nowrap;
    align-self: flex-end;
    margin-left: 0;
}
.ws-audio-new-input-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ws-icon-btn.ws-audio-clear-hint,
.ws-icon-btn.ws-audio-clear-cancel {
    border-color: var(--accent-red);
    color: var(--role-brand-text, var(--accent-red));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-red) 25%, transparent);
}
.ws-icon-btn.ws-audio-clear-cancel {
    animation: ws-audio-pulse-cancel 1.4s ease-in-out infinite;
}
@keyframes ws-audio-pulse-cancel {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-red) 25%, transparent); }
    50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-red) 35%, transparent); }
}
.ws-icon-btn#ws-dictation-audio-btn {
    color: var(--role-brand-text, var(--accent-red));
    border-color: color-mix(in srgb, var(--accent-red) 60%, var(--border));
    background: color-mix(in srgb, var(--accent-red) 8%, var(--bg-black));
}
.ws-icon-btn#ws-tts-download-btn {
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--text-muted) 50%, var(--border));
    background: color-mix(in srgb, var(--surface) 85%, var(--bg-black));
}
.ws-icon-btn#ws-tts-download-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ws-icon-btn#ws-dictation-audio-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-red) 15%, var(--bg-black));
    border-color: var(--accent-red);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-red) 20%, transparent);
}
.ws-icon-btn#ws-dictation-audio-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ws-input-field.ws-audio-mode-processing .ws-textarea {
    border-color: var(--accent-red);
    animation: pulse-border 1.5s ease-in-out infinite;
}
.ws-input-field.ws-audio-mode .ws-textarea[readonly] {
    background: var(--bg-dark);
    border-color: var(--accent-red);
    cursor: default;
}
.ws-panel.ws-input:has(.ws-audio-mode-processing) #stt-block.stt-strip {
    opacity: .45;
    pointer-events: none;
}
.ws-panel.ws-input:has(.ws-audio-mode-processing) #stt-block.stt-strip::after {
    content: 'Whisper Maxi transcrit votre fichier en local\u2026';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    text-align:center;
    font-size:var(--text-caption);
    color:var(--text-muted);
    font-family:var(--font-body);
    background:color-mix(in srgb, var(--bg-black) 55%, transparent);
    pointer-events:none;
}


body.stt-disruptive-modal-open {
    overflow:hidden;
}
.stt-disruptive-modal {
    position:fixed;
    inset:0;
    z-index:5200;
    display:none;
    padding:18px;
    align-items:center;
    justify-content:center;
}
.stt-disruptive-modal.show {
    display:flex;
}
.stt-disruptive-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, .72);
    backdrop-filter:blur(6px);
}
.stt-disruptive-shell {
    position:relative;
    z-index:1;
    width:min(420px, 100%);
    padding:20px 22px;
    border:2px solid var(--border);
    background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--bg-black)), var(--bg-dark));
    box-shadow:0 18px 48px rgba(0, 0, 0, .5);
}
.stt-disruptive-title {
    margin:0 0 10px;
    font-family:var(--font-ui);
    font-size:var(--text-title);
    color:var(--text-white);
}
.stt-disruptive-body {
    margin:0 0 18px;
    font-family:var(--font-body);
    font-size:var(--text-body);
    line-height:1.45;
    color:var(--text-muted);
}
.stt-disruptive-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}