/* Taleclip — Audio > Enhance tab styles
 * Dark theme matching cleanup tab. Loaded by index.html.
 */

#audioPanel-enhance {
    color: #e0e0e0;
    font-size: 0.92em;
}

#audioPanel-enhance .enh-card {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

#audioPanel-enhance .enh-card h3 {
    margin: 0 0 12px;
    font-size: 1.0em;
    color: #e0e0e0;
    font-weight: 600;
    letter-spacing: 0.2px;
}

#audioPanel-enhance .enh-muted { color: #888; font-size: 0.85em; }
#audioPanel-enhance .enh-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ---- Header capabilities chips ---- */
.enh-chip {
    display: inline-flex; align-items:center; gap:6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 500;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.10);
    color: #c8c8c8;
    line-height: 1;
}
.enh-chip.ok { color: #34d399; border-color: rgba(52,211,153,0.35); }
.enh-chip.miss { color: #f87171; border-color: rgba(248,113,113,0.30); }
.enh-chip.gpu { color: #34d399; border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.06); }
.enh-chip.cpu { color: #fbbf24; border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.06); }
.enh-chip.warn { color: #fbbf24; border-color: rgba(251,191,36,0.45); }

/* ---- Upload card ---- */
.enh-drop {
    border: 2px dashed rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 28px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #0c0c0c;
}
.enh-drop:hover, .enh-drop.dragover {
    border-color: #00d4ff;
    background: rgba(0,212,255,0.04);
}
.enh-drop.disabled {
    opacity: 0.5; cursor: not-allowed;
    pointer-events: none;
}
.enh-drop .enh-drop-icon { font-size: 1.8em; margin-bottom: 6px; }
.enh-file-meta {
    margin-top: 12px;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px 16px;
    font-size: 0.82em;
}
.enh-file-meta .lbl { color:#888; display:block; font-size:0.75em; margin-bottom:2px; }
.enh-file-meta .val { color:#e0e0e0; }

/* ---- Preset cards ---- */
.enh-preset-row {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
.enh-preset {
    flex: 0 0 auto;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    color: #c8c8c8;
    font-size: 0.85em;
    font-weight: 500;
    transition: transform 0.12s, border-color 0.12s, background 0.12s;
    white-space: nowrap;
}
.enh-preset:hover {
    transform: translateY(-1px);
    border-color: rgba(0,212,255,0.4);
    background: rgba(0,212,255,0.04);
}
.enh-preset.active {
    border-color: #00d4ff;
    background: rgba(0,212,255,0.08);
    color: #fff;
}

/* ---- Sliders ---- */
.enh-slider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 22px;
}
.enh-slider {
    display: flex; flex-direction: column; gap: 6px;
}
.enh-slider .enh-slider-head {
    display: flex; justify-content: space-between; align-items:center;
    font-size: 0.84em;
}
.enh-slider .enh-slider-head .name { color:#e0e0e0; font-weight: 500; }
.enh-slider .enh-slider-head .val { color:#00d4ff; font-variant-numeric: tabular-nums; }

.enh-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, #f59e0b 0%, #00d4ff 100%);
    outline: none;
    cursor: pointer;
}
.enh-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff;
    border: 2px solid #00d4ff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    cursor: pointer;
}
.enh-range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff;
    border: 2px solid #00d4ff;
    cursor: pointer;
}

.enh-select, .enh-number {
    background: #0c0c0c;
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.85em;
    font-family: inherit;
}
.enh-select:focus, .enh-number:focus { outline: none; border-color: #00d4ff; }

.enh-radio-row { display: flex; gap: 14px; align-items: center; }
.enh-radio-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.85em; color: #c8c8c8; }
.enh-radio-row input[type=radio] { accent-color: #00d4ff; }

.enh-btn {
    background: #00d4ff;
    color: #001018;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92em;
    font-family: inherit;
    transition: filter 0.15s, transform 0.06s;
}
.enh-btn:hover:not(:disabled) { filter: brightness(1.08); }
.enh-btn:active:not(:disabled) { transform: translateY(1px); }
.enh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.enh-btn.secondary {
    background: transparent;
    color: #c8c8c8;
    border: 1px solid rgba(255,255,255,0.18);
}
.enh-btn.secondary:hover:not(:disabled) {
    background: rgba(255,255,255,0.04);
    border-color: rgba(0,212,255,0.5);
    color: #fff;
}
.enh-btn.danger {
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(248,113,113,0.35);
}
.enh-btn.danger:hover:not(:disabled) { background: rgba(248,113,113,0.08); }
.enh-btn.big { padding: 12px 28px; font-size: 1.0em; }

/* ---- A/B player ---- */
.enh-ab {
    display: flex; flex-direction: column; gap: 10px;
}
.enh-ab-toggle {
    display: inline-flex; gap: 0;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    overflow: hidden;
    align-self: flex-start;
}
.enh-ab-toggle button {
    background: transparent;
    color: #c8c8c8;
    border: none;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 0.82em;
    font-family: inherit;
}
.enh-ab-toggle button.active {
    background: #00d4ff;
    color: #001018;
    font-weight: 600;
}
.enh-ab audio { width: 100%; }

/* ---- Progress / status ---- */
.enh-progress-wrap {
    display: flex; flex-direction: column; gap: 6px;
}
.enh-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
}
.enh-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f59e0b, #00d4ff);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.enh-progress-meta {
    display: flex; justify-content: space-between; align-items:center;
    font-size: 0.8em; color: #888;
}
.enh-error-banner {
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.35);
    color: #fecaca;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85em;
}

/* ---- Status badges ---- */
.enh-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.enh-badge.queued    { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.enh-badge.processing{ background: rgba(0,212,255,0.15); color: #67e8f9; }
.enh-badge.complete  { background: rgba(52,211,153,0.15); color: #6ee7b7; }
.enh-badge.failed    { background: rgba(248,113,113,0.15); color: #fca5a5; }

/* ---- History table ---- */
.enh-history-wrap { overflow-x: auto; }
.enh-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}
.enh-history th, .enh-history td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.enh-history th {
    color: #888;
    font-weight: 500;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.enh-history tr:hover td { background: rgba(255,255,255,0.02); }
.enh-history .enh-row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.enh-history .enh-row-actions .enh-btn {
    padding: 4px 10px; font-size: 0.78em; font-weight: 500;
}
.enh-history input[type=checkbox] { accent-color: #00d4ff; }

/* ---- Modal ---- */
.enh-modal-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.enh-modal {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 18px 20px;
    max-width: 720px;
    width: 92%;
    max-height: 80vh;
    display: flex; flex-direction: column;
}
.enh-modal h3 { margin: 0 0 10px; color: #e0e0e0; font-size: 1.0em; }
.enh-modal pre {
    flex: 1;
    overflow: auto;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.78em;
    color: #c8c8c8;
    white-space: pre-wrap;
    margin: 0 0 12px;
}
.enh-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- GPU warmup chips ---- */
.enh-chip.loading {
    background: #fbbf24;
    color: #1c1c1c;
    position: relative;
    padding-right: 22px;
}
.enh-chip.loading::after {
    content: "";
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px;
    border: 2px solid rgba(0,0,0,0.25);
    border-top-color: #1c1c1c;
    border-radius: 50%;
    animation: enh-spin 0.8s linear infinite;
}
.enh-chip.failed { background: #ef4444; color: #fff; }
.enh-chip.missing { background: #374151; color: #9ca3af; }
@keyframes enh-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Loading banner */
.enh-warmup-banner {
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.4);
    color: #fde68a;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    margin-top: 8px;
}

/* License modal */
.enh-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.enh-modal-backdrop .enh-modal {
    background: #141414;
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 20px 24px;
    max-width: 480px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.enh-modal-backdrop .enh-modal h3 { margin: 0 0 12px 0; color: #00d4ff; }
.enh-modal-backdrop .enh-modal p { font-size: 0.9em; line-height: 1.5; opacity: 0.9; }
.enh-modal-backdrop .enh-modal .enh-modal-actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}
.enh-modal-backdrop .enh-modal button {
    padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer;
    font-weight: 600;
}
.enh-modal-backdrop .enh-modal .enh-cancel { background: #374151; color: #e0e0e0; }
.enh-modal-backdrop .enh-modal .enh-accept { background: #00d4ff; color: #000; }
.enh-modal-backdrop .enh-modal .enh-accept:disabled { background: #4b5563; cursor: not-allowed; }

/* ── Voice Inflection sub-panel ─────────────────────────────────── */
.enh-inflection-panel {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.03);
}
.enh-inflection-panel h3 {
    margin: 0 0 4px 0;
    color: #00d4ff;
}
.enh-inflection-sub {
    font-size: 0.82em;
    color: #888;
    margin-bottom: 14px;
}
.enh-preset-chip {
    display: inline-flex; align-items: center;
    padding: 6px 12px;
    margin: 0 6px 6px 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: #1a1a1a;
    color: #ddd;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.15s;
}
.enh-preset-chip:hover { background: #222; }
.enh-preset-chip.active {
    border-color: #00d4ff;
    color: #00d4ff;
    background: rgba(0,212,255,0.08);
}
.enh-source-toggle {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.enh-source-toggle button {
    padding: 6px 14px;
    background: #1a1a1a;
    color: #ddd;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    font-size: 0.85em;
}
.enh-source-toggle button:last-child { border-right: none; }
.enh-source-toggle button.active {
    background: #00d4ff;
    color: #000;
    font-weight: 600;
}
.enh-source-toggle button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.enh-infl-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}
.enh-infl-slider-row label { width: 110px; color: #ccc; font-size: 0.85em; }
.enh-infl-slider-row input[type=range] { flex: 1; }
.enh-infl-slider-row .enh-infl-value {
    width: 60px; text-align: right; color: #888; font-size: 0.8em;
}
.enh-infl-slider-row .enh-infl-reset {
    background: none; border: none; color: #888; cursor: pointer;
    font-size: 0.75em; padding: 2px 6px;
}
.enh-infl-slider-row .enh-infl-reset:hover { color: #00d4ff; }
.enh-infl-history table {
    width: 100%; border-collapse: collapse; font-size: 0.85em; margin-top: 12px;
}
.enh-infl-history th, .enh-infl-history td {
    padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left;
}
.enh-infl-history th { color: #888; font-weight: normal; }

/* ── Manual EQ Spectrum (parametric editor) ─────────────────────── */
.enh-eq-card {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: #0f0f0f;
}
.enh-eq-card h4 {
    margin: 0 0 4px 0;
    color: #00d4ff;
    font-size: 0.95em;
}
.enh-eq-sub {
    font-size: 0.78em;
    color: #888;
    margin-bottom: 10px;
}
.enh-eq-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    font-size: 0.85em;
}
.enh-eq-toolbar button {
    padding: 4px 10px;
    background: #1a1a1a;
    color: #ddd;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 0.8em;
    cursor: pointer;
}
.enh-eq-toolbar button:hover { background: #222; border-color: #00d4ff; color: #00d4ff; }
.enh-eq-toolbar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.enh-eq-toolbar .enh-eq-counter { margin-left: auto; color: #888; }
.enh-eq-canvas {
    display: block;
    width: 100%;
    max-width: 640px;
    height: 220px;
    background: #050505;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    cursor: crosshair;
}
.enh-eq-canvas.disabled { opacity: 0.35; cursor: not-allowed; }
.enh-eq-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.85);
    color: #00d4ff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.75em;
    pointer-events: none;
    z-index: 100;
}