/* ─────────────────────────────────────────────────────────────
   Audio > Cleanup — TechSmith Audiate-parity layout
   Scoped under #audioPanel-cleanup so it won't leak.
   Uses Taleclip's --tc-* tokens (see web/static/css/style.css);
   Audiate-specific pinks/magentas are hard-coded.
   ───────────────────────────────────────────────────────────── */

#audioPanel-cleanup {
    color: var(--tc-text-primary, #f1f5f9);
    font-family: var(--tc-font-sans, 'Inter', system-ui, sans-serif);
    min-height: 100%;
}

/* ─────────────────────────────────────────────────────────────
   1. Empty state  (load screen — panel #1 of the reference)
   ───────────────────────────────────────────────────────────── */
.cleanup-empty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 32px 24px;
    max-width: 720px;
    margin: 0 auto;
}
.cleanup-drop {
    border: 2px dashed rgba(148, 163, 184, 0.18);
    border-radius: var(--tc-radius-lg, 18px);
    padding: 56px 24px;
    text-align: center;
    background: var(--tc-glass-bg, rgba(255,255,255,0.06));
    backdrop-filter: blur(var(--tc-glass-blur, 16px));
    transition: border-color .18s, background-color .18s;
    cursor: pointer;
}
.cleanup-drop.dragover {
    border-color: var(--tc-primary, #3B82F6);
    background: var(--tc-primary-surface, rgba(59,130,246,0.10));
}
.cleanup-drop .cl-hero     { font-size: 2.2em; margin-bottom: 6px; }
.cleanup-drop .cl-sub      { color: var(--tc-text-secondary, #94a3b8); font-size: .9em; margin: 6px 0 0; }
.cleanup-drop .cl-hint     { color: var(--tc-text-muted, #64748b); font-size: .78em; margin-top: 4px; }
.cleanup-empty-cta {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px;
}
.cleanup-recent {
    background: var(--tc-glass-bg, rgba(255,255,255,0.04));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    border-radius: var(--tc-radius-md, 12px);
    padding: 12px 14px;
}
.cleanup-recent h4 { margin: 0 0 8px; font-size: .9em; color: var(--tc-text-secondary, #94a3b8); font-weight: 600; }
.cleanup-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cleanup-recent li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.cleanup-recent li:hover { background: var(--tc-glass-bg-hover, rgba(255,255,255,0.10)); }
.cleanup-recent .cl-recent-del {
    background: transparent; border: none; color: var(--tc-text-muted, #64748b);
    cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.cleanup-recent .cl-recent-del:hover { color: var(--tc-error, #ef4444); background: var(--tc-error-surface, rgba(239,68,68,0.1)); }

/* ─────────────────────────────────────────────────────────────
   2. Main shell — Audiate grid
   Rows:
     1 toolbar (auto)
     2 waveform strip (auto, 80px content)
     3 playback bar (auto, 56px content)
     4 scene bar (auto)
     5 script view + properties panel (1fr)
   Cols:
     1fr script | 340px properties
   ───────────────────────────────────────────────────────────── */
.cleanup-shell {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-columns: 1fr 340px;
    gap: 0;
    height: 100%;
    min-height: 640px;
    background: var(--tc-bg-gradient, linear-gradient(160deg, #0c1425, #0e1a30, #0b1222));
    border-radius: var(--tc-radius-lg, 18px);
    overflow: hidden;
    position: relative;
}
.cleanup-shell > * { min-width: 0; }     /* prevent horiz scroll from grid children */

/* ─────────────────────────────────────────────────────────────
   3. Top toolbar
   Span both columns; grouped into File · Edit · Enhance · Export · Settings
   ───────────────────────────────────────────────────────────── */
.cl-toolbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--tc-glass-bg-topbar, rgba(255,255,255,0.05));
    border-bottom: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    backdrop-filter: blur(var(--tc-glass-blur, 16px));
    flex-wrap: wrap;
}
.cl-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
}
.cl-group[data-label]::before {
    content: attr(data-label);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tc-text-muted, #64748b);
    margin-right: 6px;
    font-weight: 600;
}
.cl-sep {
    width: 1px;
    height: 22px;
    background: var(--tc-glass-border, rgba(148,163,184,0.15));
    margin: 0 4px;
    flex-shrink: 0;
}

/* Shared buttons — keep the JS-facing class names intact */
.cl-btn {
    background: var(--tc-glass-bg, rgba(255,255,255,0.06));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    color: var(--tc-text-primary, #f1f5f9);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 6px 10px;
    font-size: .82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--tc-transition-fast, 150ms ease),
                border-color var(--tc-transition-fast, 150ms ease),
                transform var(--tc-transition-fast, 150ms ease);
    white-space: nowrap;
}
.cl-btn:hover  { background: var(--tc-glass-bg-hover, rgba(255,255,255,0.10)); border-color: rgba(148,163,184,0.25); }
.cl-btn:active { transform: translateY(1px); }
.cl-btn:disabled { opacity: .45; cursor: not-allowed; }
.cl-btn.primary {
    background: var(--tc-primary, #3B82F6);
    border-color: var(--tc-primary, #3B82F6);
    color: #fff;
    box-shadow: var(--tc-glow-primary, 0 0 12px rgba(59,130,246,0.25));
}
.cl-btn.primary:hover { background: var(--tc-primary-hover, #2563eb); }
.cl-btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--tc-text-secondary, #94a3b8);
}
.cl-btn.ghost:hover { background: var(--tc-glass-bg, rgba(255,255,255,0.05)); color: var(--tc-text-primary, #f1f5f9); }
.cl-btn.danger {
    background: var(--tc-error-surface, rgba(239,68,68,0.12));
    border-color: rgba(239,68,68,0.35);
    color: var(--tc-error, #ef4444);
}
.cl-btn.danger:hover { background: rgba(239,68,68,0.22); }
.cl-btn.icon {
    padding: 6px;
    width: 30px;
    height: 30px;
    justify-content: center;
}
.cl-btn.active {
    background: var(--tc-primary-surface, rgba(59,130,246,0.12));
    border-color: rgba(59,130,246,0.45);
    color: var(--tc-primary, #3B82F6);
}
.cl-select {
    background: var(--tc-glass-bg-input, rgba(255,255,255,0.05));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    color: var(--tc-text-primary, #f1f5f9);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 5px 8px;
    font-size: .82rem;
    cursor: pointer;
}
.cl-select:focus {
    outline: none;
    border-color: var(--tc-primary, #3B82F6);
    box-shadow: var(--tc-focus-ring, 0 0 0 2px rgba(59,130,246,0.4));
}

/* ─────────────────────────────────────────────────────────────
   4. Scene Bar (Smart Scenes)
   Horizontal scroll of 160×90 cards with mini-waveform canvas.
   ───────────────────────────────────────────────────────────── */
.cl-scenes {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    background: var(--tc-glass-bg-sidebar, rgba(255,255,255,0.04));
    border-bottom: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    min-height: 0;
}
.cl-scenes:empty { display: none; }        /* hide the row until scenes exist */
.cl-scenes::-webkit-scrollbar { height: 6px; }
.cl-scenes::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 3px; }

.cl-scene {
    flex: 0 0 160px;
    height: 90px;
    position: relative;
    border-radius: var(--tc-radius-md, 10px);
    background: var(--tc-glass-bg, rgba(255,255,255,0.06));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: start;
    transition: border-color var(--tc-transition-fast, 150ms ease),
                transform var(--tc-transition-fast, 150ms ease);
    display: flex;
    flex-direction: column;
}
.cl-scene:hover { transform: translateY(-1px); border-color: rgba(148,163,184,0.25); }
.cl-scene.current {
    border-color: var(--tc-primary, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.35), var(--tc-glow-primary, 0 0 12px rgba(59,130,246,0.2));
}
.cl-scene canvas {
    width: 100%;
    height: 52px;
    display: block;
    background: rgba(0,0,0,0.25);
}
.cl-scene .cl-scene-label {
    flex: 1;
    padding: 4px 8px;
    font-size: .72rem;
    color: var(--tc-text-secondary, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-scene .cl-scene-time {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: .65rem;
    color: var(--tc-text-muted, #64748b);
    background: rgba(0,0,0,0.35);
    padding: 1px 4px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   5. Find bar — sits just above the transcript
   ───────────────────────────────────────────────────────────── */
.cl-find-bar {
    grid-column: 1;
    display: none;                         /* shown via .open class from JS */
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--tc-glass-bg, rgba(255,255,255,0.06));
    border-bottom: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    flex-wrap: wrap;
}
.cl-find-bar.open { display: flex; }
.cl-find-bar input[type="text"] {
    flex: 1;
    min-width: 180px;
    background: var(--tc-glass-bg-input, rgba(255,255,255,0.05));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    color: var(--tc-text-primary, #f1f5f9);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 6px 10px;
    font-size: .85rem;
    font-family: var(--tc-font-sans, 'Inter', sans-serif);
}
.cl-find-bar input[type="text"]:focus {
    outline: none;
    border-color: var(--tc-primary, #3B82F6);
    box-shadow: var(--tc-focus-ring, 0 0 0 2px rgba(59,130,246,0.4));
}
.cl-find-bar .cl-find-count {
    font-size: .78rem;
    color: var(--tc-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cl-find-bar .cl-find-opts { display: inline-flex; gap: 4px; }
.cl-find-bar.replace .cl-find-replace-row { display: flex; }
.cl-find-replace-row { display: none; gap: 8px; width: 100%; align-items: center; }

/* ─────────────────────────────────────────────────────────────
   6. Script View (dominant transcript)
   ───────────────────────────────────────────────────────────── */
.cl-script {
    grid-column: 1;
    grid-row: 5;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 32px 40px;
    background: transparent;
    position: relative;
    min-height: 0;
}
.cl-script-inner {
    max-width: 820px;
    margin: 0 auto;
    font-size: 1.2em;
    line-height: 1.9;
    letter-spacing: .01em;
    color: var(--tc-text-primary, #f1f5f9);
    font-family: var(--tc-font-sans, 'Inter', system-ui, sans-serif);
    word-break: break-word;
}
.cl-script-inner p { margin: 0 0 1em; }
.cl-script::-webkit-scrollbar        { width: 8px; }
.cl-script::-webkit-scrollbar-thumb  { background: rgba(148,163,184,0.22); border-radius: 4px; }
.cl-script::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.40); }

/* Speaker / segment separator */
.cl-seg {
    display: block;
    padding: 4px 0;
}
.cl-seg-time {
    display: inline-block;
    font-size: .7em;
    color: var(--tc-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    margin-right: 10px;
    user-select: none;
}

/* ─────────────────────────────────────────────────────────────
   7. Token (word) states
   ───────────────────────────────────────────────────────────── */
.cl-tok {
    display: inline;
    padding: 1px 2px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    position: relative;
}
.cl-tok:hover        { background: var(--tc-glass-bg-hover, rgba(255,255,255,0.10)); }
.cl-tok.current      { background: var(--tc-primary-surface, rgba(59,130,246,0.25)); color: #fff; }

/* Filler (pink — Audiate's signature) */
.cl-tok.filler {
    background: rgba(244, 114, 182, 0.26);
    color: #fce7f3;
    border-radius: 4px;
    padding: 1px 4px;
}

/* Repeated word (magenta) */
.cl-tok.repeat {
    background: rgba(217, 70, 239, 0.26);
    color: #fae8ff;
    border-radius: 4px;
    padding: 1px 4px;
}

/* Pause adjustment (subtle cyan underline) */
.cl-tok.pause-adj {
    text-decoration: underline;
    text-decoration-color: rgba(34, 211, 238, 0.6);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* Silenced — grey chip with muted speaker icon */
.cl-tok.silenced {
    background: rgba(148, 163, 184, 0.18);
    color: var(--tc-text-muted, #64748b);
    border-radius: 4px;
    padding: 1px 4px;
    padding-right: 18px;
}
.cl-tok.silenced::after {
    content: "🔇";
    font-size: .72em;
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .75;
}

/* Shortened (cyan dotted border) */
.cl-tok.shortened {
    border: 1px dotted rgba(34, 211, 238, 0.8);
    border-radius: 4px;
    padding: 0 3px;
}

/* Inserted — faint green left-border */
.cl-tok.inserted {
    border-left: 3px solid rgba(34, 197, 94, 0.75);
    padding-left: 5px;
    background: rgba(34, 197, 94, 0.08);
}

/* Mismatch — red wavy underline (script-diff) */
.cl-tok.mismatch {
    text-decoration: wavy underline #f87171;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* Find match */
.cl-tok.found {
    background: rgba(250, 204, 21, 0.28);
    color: #fef3c7;
    border-radius: 3px;
}
.cl-tok.found.current-match {
    background: rgba(250, 204, 21, 0.55);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.7);
}

/* Deleted (existing) */
.cl-tok.deleted {
    text-decoration: line-through;
    color: var(--tc-text-muted, #64748b);
    opacity: .55;
}

/* Selection (existing) */
.cl-tok.selected {
    background: var(--tc-primary-surface, rgba(59,130,246,0.28));
    color: #fff;
    outline: 1px solid rgba(59,130,246,0.5);
}

/* Per-word time handles (Edit Transcription Timing toggle) */
.cl-script.timing-mode .cl-tok {
    border-bottom: 1px dashed rgba(148,163,184,0.3);
    margin: 0 2px;
}
.cl-script.timing-mode .cl-tok::before {
    content: attr(data-t);
    display: inline-block;
    font-size: .6em;
    color: var(--tc-text-muted, #64748b);
    margin-right: 3px;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   8. Properties Panel (right column)
   ───────────────────────────────────────────────────────────── */
.cl-props {
    grid-column: 2;
    grid-row: 5;
    display: flex;
    flex-direction: column;
    background: var(--tc-glass-bg-sidebar, rgba(255,255,255,0.04));
    border-left: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    overflow: hidden;
    min-height: 0;
}
.cl-props-tabs {
    display: flex;
    border-bottom: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    background: var(--tc-glass-bg, rgba(255,255,255,0.03));
    flex-shrink: 0;
}
.cl-props-tab {
    flex: 1;
    padding: 10px 6px;
    background: transparent;
    border: none;
    color: var(--tc-text-secondary, #94a3b8);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--tc-transition-fast, 150ms ease), border-color var(--tc-transition-fast, 150ms ease);
    font-family: inherit;
}
.cl-props-tab:hover { color: var(--tc-text-primary, #f1f5f9); }
.cl-props-tab.active {
    color: var(--tc-primary, #3B82F6);
    border-bottom-color: var(--tc-primary, #3B82F6);
}
.cl-props-pane {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: none;
    min-height: 0;
}
.cl-props-pane.active { display: block; }
.cl-props-pane h5 {
    margin: 0 0 8px;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tc-text-muted, #64748b);
    font-weight: 600;
}
.cl-props-pane section { margin-bottom: 18px; }

/* Effect Chain checklist */
.cl-fx-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-fx-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--tc-radius-sm, 6px);
    background: var(--tc-glass-bg, rgba(255,255,255,0.04));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    font-size: .82rem;
    cursor: pointer;
}
.cl-fx-list li:hover { background: var(--tc-glass-bg-hover, rgba(255,255,255,0.10)); }
.cl-fx-list input[type="checkbox"] { accent-color: var(--tc-primary, #3B82F6); }

/* Output Gain slider */
.cl-gain {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.cl-gain input[type="range"] {
    flex: 1;
    accent-color: var(--tc-primary, #3B82F6);
}
.cl-gain .cl-gain-val {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--tc-text-secondary, #94a3b8);
    min-width: 44px;
    text-align: right;
}

/* Filler dictionary chips */
.cl-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 10px;
}
.cl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(244, 114, 182, 0.18);
    color: #fce7f3;
    border-radius: var(--tc-radius-pill, 9999px);
    font-size: .76rem;
    border: 1px solid rgba(244, 114, 182, 0.3);
}
.cl-chip .cl-chip-x {
    background: none; border: none; color: inherit;
    cursor: pointer; padding: 0 2px; font-size: .85em; line-height: 1;
    opacity: .7;
}
.cl-chip .cl-chip-x:hover { opacity: 1; }
.cl-chip-input {
    flex: 1;
    min-width: 80px;
    background: var(--tc-glass-bg-input, rgba(255,255,255,0.05));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    color: var(--tc-text-primary, #f1f5f9);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 4px 8px;
    font-size: .78rem;
    font-family: inherit;
}

/* Threshold number rows */
.cl-prop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: .8rem;
}
.cl-prop-row label  { color: var(--tc-text-secondary, #94a3b8); }
.cl-prop-row input[type="number"],
.cl-prop-row input[type="text"] {
    width: 90px;
    background: var(--tc-glass-bg-input, rgba(255,255,255,0.05));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    color: var(--tc-text-primary, #f1f5f9);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 4px 6px;
    font-family: inherit;
    font-size: .8rem;
}

/* Suggestions list (Edits tab) */
.cl-suggestions { display: flex; flex-direction: column; gap: 6px; }
.cl-suggestion {
    background: var(--tc-glass-bg, rgba(255,255,255,0.04));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    border-radius: var(--tc-radius-sm, 6px);
    padding: 8px 10px;
    font-size: .82rem;
}
.cl-suggestion header {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--tc-text-secondary, #94a3b8);
}
.cl-suggestion .cl-suggestion-actions { display: flex; gap: 4px; }

/* Script diff area */
.cl-script-diff {
    width: 100%;
    min-height: 140px;
    background: var(--tc-glass-bg-input, rgba(255,255,255,0.05));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    color: var(--tc-text-primary, #f1f5f9);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 8px 10px;
    font-size: .82rem;
    font-family: inherit;
    resize: vertical;
}

/* Translate coming-soon block */
.cl-coming-soon {
    padding: 24px 12px;
    text-align: center;
    color: var(--tc-text-muted, #64748b);
    font-size: .85rem;
    border: 1px dashed rgba(148,163,184,0.2);
    border-radius: var(--tc-radius-md, 10px);
    background: var(--tc-glass-bg, rgba(255,255,255,0.03));
}
.cl-coming-soon strong { color: var(--tc-text-secondary, #94a3b8); display: block; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────────────────
   9. Waveform View strip (80 px, full width) — sits directly below
   the toolbar so playback/preview controls stay at eye level.
   ───────────────────────────────────────────────────────────── */
.cl-wave {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 80px;
    background: rgba(0, 0, 0, 0.35);
    border-top: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    border-bottom: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    position: relative;
    overflow: hidden;
}
.cl-wave canvas,
.cl-wave > div,
.cl-wave > wave {
    width: 100%;
    height: 100%;
    display: block;
}
.cl-wave .cl-wave-regions-layer { position: absolute; inset: 0; pointer-events: none; }

/* ─────────────────────────────────────────────────────────────
   10. Playback bar (56 px) — sits under the waveform, directly
   below the toolbar, so media controls are always at the top.
   ───────────────────────────────────────────────────────────── */
.cl-playbar {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--tc-glass-bg-topbar, rgba(255,255,255,0.06));
    border-top: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    backdrop-filter: blur(var(--tc-glass-blur, 16px));
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.cl-playbar::-webkit-scrollbar { height: 0; }
.cl-playbar .cl-transport { display: inline-flex; gap: 4px; }
.cl-playbar .cl-time {
    font-variant-numeric: tabular-nums;
    font-family: var(--tc-font-mono, 'JetBrains Mono', monospace);
    font-size: .85rem;
    color: var(--tc-text-secondary, #94a3b8);
    min-width: 110px;
    text-align: center;
}
.cl-playbar .cl-zoom { display: inline-flex; gap: 2px; }
.cl-playbar .cl-quick-anchor { margin-left: auto; }

/* Play/pause primary button look */
.cl-btn.cl-play {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--tc-radius-round, 50%);
    background: var(--tc-primary, #3B82F6);
    border-color: var(--tc-primary, #3B82F6);
    color: #fff;
    justify-content: center;
    box-shadow: var(--tc-glow-primary, 0 0 12px rgba(59,130,246,0.25));
}
.cl-btn.cl-play:hover { background: var(--tc-primary-hover, #2563eb); }

/* ─────────────────────────────────────────────────────────────
   11. Floating selection toolbar
   Four inline buttons near the caret (reference panel #4).
   ───────────────────────────────────────────────────────────── */
.cl-float-toolbar {
    position: fixed;
    display: none;                          /* JS toggles via display */
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(10, 15, 30, 0.94);
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: var(--tc-radius-md, 10px);
    box-shadow: var(--tc-shadow-lg, 0 8px 32px rgba(0,0,0,0.25));
    backdrop-filter: blur(var(--tc-glass-blur, 16px));
    z-index: var(--tc-z-dropdown, 200);
    pointer-events: auto;
    font-family: var(--tc-font-sans, 'Inter', sans-serif);
}
.cl-float-toolbar.open { display: inline-flex; }
.cl-float-toolbar .cl-btn { padding: 5px 8px; font-size: .78rem; }
.cl-float-toolbar::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: rgba(10, 15, 30, 0.94);
    border-top: 1px solid rgba(148,163,184,0.25);
    border-left: 1px solid rgba(148,163,184,0.25);
    transform: rotate(45deg);
}

/* ─────────────────────────────────────────────────────────────
   12. Suggested Edits dropdown (reference panel #5)
   ───────────────────────────────────────────────────────────── */
.cl-quick-menu {
    position: absolute;
    display: none;
    min-width: 280px;
    max-width: 340px;
    background: rgba(10, 15, 30, 0.96);
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: var(--tc-radius-md, 10px);
    box-shadow: var(--tc-shadow-xl, 0 16px 48px rgba(0,0,0,0.35));
    backdrop-filter: blur(var(--tc-glass-blur-heavy, 24px));
    z-index: var(--tc-z-dropdown, 200);
    padding: 6px 0;
    font-family: var(--tc-font-sans, 'Inter', sans-serif);
}
.cl-quick-menu.open { display: block; }
.cl-quick-menu .cl-quick-section {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tc-text-muted, #64748b);
    padding: 8px 14px 4px;
    font-variant: small-caps;
}
.cl-quick-menu .cl-quick-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    font-size: .88rem;
    color: var(--tc-text-primary, #f1f5f9);
    cursor: pointer;
    transition: background var(--tc-transition-fast, 150ms ease);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.cl-quick-menu .cl-quick-item:hover { background: var(--tc-glass-bg-hover, rgba(255,255,255,0.10)); }
.cl-quick-menu .cl-quick-item:disabled { opacity: .4; cursor: not-allowed; }
.cl-quick-menu .cl-quick-count {
    background: var(--tc-glass-bg, rgba(255,255,255,0.08));
    border-radius: var(--tc-radius-pill, 9999px);
    padding: 1px 8px;
    font-size: .72rem;
    color: var(--tc-text-secondary, #94a3b8);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: center;
}
.cl-quick-menu .cl-quick-sep {
    height: 1px;
    background: var(--tc-glass-border, rgba(148,163,184,0.15));
    margin: 4px 0;
}

/* ─────────────────────────────────────────────────────────────
   13. Record overlay (fullscreen modal)
   ───────────────────────────────────────────────────────────── */
.cl-record-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 18, 0.72);
    backdrop-filter: blur(8px);
    z-index: var(--tc-z-overlay, 9000);
}
.cl-record-overlay.open { display: flex; }
.cl-record-modal {
    background: rgba(12, 20, 37, 0.95);
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.15));
    border-radius: var(--tc-radius-lg, 18px);
    padding: 32px 36px;
    width: min(460px, 92vw);
    box-shadow: var(--tc-shadow-xl, 0 16px 48px rgba(0,0,0,0.45));
    text-align: center;
    font-family: var(--tc-font-sans, 'Inter', sans-serif);
}
.cl-record-modal h3 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--tc-text-primary, #f1f5f9);
}
.cl-record-modal .cl-record-sub {
    margin: 0 0 18px;
    color: var(--tc-text-secondary, #94a3b8);
    font-size: .82rem;
}
.cl-record-modal .cl-device-picker {
    width: 100%;
    margin-bottom: 16px;
}
.cl-record-btn {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--tc-error, #ef4444);
    border: 4px solid rgba(239, 68, 68, 0.25);
    color: #fff;
    font-size: 1.8em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tc-glow-error, 0 0 20px rgba(239,68,68,0.3));
    transition: transform var(--tc-transition-fast, 150ms ease);
    margin: 8px 0 16px;
}
.cl-record-btn:hover { transform: scale(1.05); }
.cl-record-btn.recording {
    background: #fff;
    color: var(--tc-error, #ef4444);
    animation: cl-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes cl-rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
    50%      { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
}
.cl-record-timer {
    font-family: var(--tc-font-mono, 'JetBrains Mono', monospace);
    font-size: 1.4rem;
    color: var(--tc-text-primary, #f1f5f9);
    font-variant-numeric: tabular-nums;
    margin-bottom: 14px;
}
.cl-record-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 8px;
}

/* VU meter — 24 bars */
.cl-vu {
    display: flex;
    gap: 3px;
    height: 36px;
    align-items: flex-end;
    justify-content: center;
    margin: 10px auto 16px;
    max-width: 320px;
}
.cl-vu-bar {
    flex: 1;
    min-width: 6px;
    height: 12%;
    background: linear-gradient(180deg, var(--tc-success, #14b8a6) 0%, var(--tc-warning, #f59e0b) 70%, var(--tc-error, #ef4444) 100%);
    border-radius: 2px;
    transform-origin: bottom;
    transition: height 60ms linear, opacity 120ms linear;
    opacity: .25;
}
.cl-vu-bar.active { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   14. Custom Word modal (Audiate spell-correct dialog)
   ───────────────────────────────────────────────────────────── */
.cl-custom-word {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 18, 0.6);
    z-index: var(--tc-z-modal, 1000);
}
.cl-custom-word.open { display: flex; }
.cl-custom-word .cl-cw-modal {
    background: rgba(12, 20, 37, 0.96);
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.15));
    border-radius: var(--tc-radius-md, 10px);
    padding: 18px 20px;
    width: min(360px, 90vw);
}
.cl-custom-word h4 { margin: 0 0 10px; font-size: .95rem; color: var(--tc-text-primary); }
.cl-custom-word input[type="text"] {
    width: 100%;
    background: var(--tc-glass-bg-input, rgba(255,255,255,0.05));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    color: var(--tc-text-primary, #f1f5f9);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 8px 10px;
    font-size: .95rem;
    font-family: inherit;
}
.cl-custom-word .cl-cw-actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px;
}

/* ─────────────────────────────────────────────────────────────
   15. Toasts / status inline
   ───────────────────────────────────────────────────────────── */
.cl-status {
    position: absolute;
    bottom: 72px;
    right: 16px;
    background: rgba(10,15,30,0.92);
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: var(--tc-radius-sm, 6px);
    padding: 6px 12px;
    font-size: .78rem;
    color: var(--tc-text-secondary, #94a3b8);
    display: none;
    z-index: 6;
}
.cl-status.show { display: block; }
.cl-status.error { color: var(--tc-error, #ef4444); border-color: rgba(239,68,68,0.35); }

/* ─────────────────────────────────────────────────────────────
   16. Responsive — Properties Panel collapses to slide-over < 900px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cleanup-shell {
        grid-template-columns: 1fr;
    }
    .cl-script      { grid-column: 1; }
    .cl-wave        { grid-column: 1; }
    .cl-playbar     { grid-column: 1; }
    .cl-scenes      { grid-column: 1; }
    .cl-toolbar     { grid-column: 1; }

    .cl-props {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 90vw);
        transform: translateX(100%);
        transition: transform var(--tc-transition-slow, 300ms ease);
        z-index: var(--tc-z-drawer, 300);
        border-left: var(--tc-glass-border, 1px solid rgba(148,163,184,0.15));
        background: rgba(12, 20, 37, 0.98);
        box-shadow: var(--tc-shadow-xl, -8px 0 32px rgba(0,0,0,0.35));
    }
    .cl-props.open { transform: translateX(0); }

    .cl-script-inner { font-size: 1.1em; }
}

@media (max-width: 560px) {
    .cl-toolbar { padding: 6px 8px; }
    .cl-group[data-label]::before { display: none; }
    .cl-script { padding: 16px 16px 24px; }
}

/* ─────────────────────────────────────────────────────────────
   17. Misc: recording indicator in-transcript
   ───────────────────────────────────────────────────────────── */
.cl-rec-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tc-error, #ef4444);
    animation: cl-rec-blink 1s ease-in-out infinite;
    margin-right: 6px;
    vertical-align: middle;
}
@keyframes cl-rec-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

.cl-inline-loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(148,163,184,0.2);
    border-top-color: var(--tc-primary, #3B82F6);
    border-radius: 50%;
    animation: cl-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   Audiate visual-parity overrides (per reference screenshots)
   • Filler words render as pink inline TEXT (no pill background)
   • Pause chips GONE from prose (JS no longer inserts them)
   • Transcript is tighter, readable paragraph prose
   • Floating toolbar shows on any single word click
   ───────────────────────────────────────────────────────────── */
#audioPanel-cleanup .cl-tok.filler {
    background: transparent !important;
    color: #e879f9 !important;               /* Audiate pink */
    font-weight: 500;
    cursor: pointer;
}
#audioPanel-cleanup .cl-tok.filler:hover {
    background: rgba(232, 121, 249, 0.10) !important;
    border-radius: 3px;
}
#audioPanel-cleanup .cl-tok.repeat {
    background: transparent !important;
    color: #f0abfc !important;
    font-weight: 500;
    cursor: pointer;
}
#audioPanel-cleanup .cl-tok.repeat:hover {
    background: rgba(240, 171, 252, 0.10) !important;
    border-radius: 3px;
}
/* Retire the pause-adj underline — it cluttered prose. */
#audioPanel-cleanup .cl-tok.pause-adj {
    text-decoration: none !important;
    background: transparent !important;
}

/* Scene 1 label above the script (Audiate shows "Scene 1" centred) */
#audioPanel-cleanup .cl-scene-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 0 10px;
    color: var(--tc-text-muted, #94a3b8);
    font-size: .8em;
    letter-spacing: .05em;
}
#audioPanel-cleanup .cl-scene-header b { color: var(--tc-text-primary, #f1f5f9); font-weight: 600; }

/* Make the Suggested Edits toolbar button feel like Audiate's top-left count. */
#audioPanel-cleanup #cleanupBtnSuggested {
    background: rgba(232, 121, 249, 0.14);
    border-color: rgba(232, 121, 249, 0.30);
    color: #f5d0fe;
    font-weight: 600;
}
#audioPanel-cleanup #cleanupBtnSuggested:hover {
    background: rgba(232, 121, 249, 0.22);
}
#audioPanel-cleanup #cleanupSugBadge {
    background: #e879f9;
    color: #0f172a;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

/* Current-playhead word gets a subtle blue ring so it doesn't clash with filler pink. */
#audioPanel-cleanup .cl-tok.current {
    background: rgba(59, 130, 246, 0.18) !important;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45);
}

/* Bible references render inline via display_text ("Acts 4:33") but get
   NO special styling — they should look like any other prose word. Only
   filler words are visually highlighted. */

/* One-click Clean button — emerald accent so it stands apart from the
   Suggested Edits + Export buttons. Subtle pulse while idle invites click;
   pulse stops when button is disabled (in-flight). */
#audioPanel-cleanup #cleanupBtnAutoClean {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #a7f3d0;
    font-weight: 600;
    position: relative;
}
#audioPanel-cleanup #cleanupBtnAutoClean::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35);
    pointer-events: none;
    animation: cl-clean-pulse 2.4s ease-out infinite;
}
#audioPanel-cleanup #cleanupBtnAutoClean:hover {
    background: rgba(16, 185, 129, 0.30);
}
#audioPanel-cleanup #cleanupBtnAutoClean:disabled {
    opacity: .75;
}
#audioPanel-cleanup #cleanupBtnAutoClean:disabled::after { animation: none; }
@keyframes cl-clean-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ─────────────────────────────────────────────────────────────
   Batch mode (multi-file auto-clean)
   ───────────────────────────────────────────────────────────── */
.cleanup-batch {
    background: var(--tc-glass-bg, rgba(255,255,255,0.04));
    border: var(--tc-glass-border, 1px solid rgba(148,163,184,0.08));
    border-radius: var(--tc-radius-lg, 18px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    backdrop-filter: blur(var(--tc-glass-blur, 16px));
}
.cl-batch-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.cl-batch-head strong { font-size: 1.05em; }
.cl-batch-sub { color: var(--tc-text-muted, #64748b); font-size: .85em; }
.cl-batch-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
}
.cl-batch-row {
    display: grid;
    grid-template-columns: 1fr 70px 220px auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--tc-radius-md, 12px);
    background: var(--tc-glass-bg, rgba(255,255,255,0.04));
    border: 1px solid rgba(148,163,184,0.10);
}
.cl-batch-row.uploading  { border-color: rgba(59,130,246,0.35); }
.cl-batch-row.processing { border-color: rgba(244,114,182,0.32); }
.cl-batch-row.done       { border-color: rgba(16,185,129,0.45); }
.cl-batch-row.error      { border-color: rgba(239,68,68,0.45); }
.cl-batch-name {
    font-size: .9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-batch-size { color: var(--tc-text-muted, #64748b); font-size: .78em; text-align: right; }
.cl-batch-bar {
    position: relative;
    height: 8px;
    background: rgba(148,163,184,0.18);
    border-radius: 999px;
    overflow: hidden;
}
.cl-batch-bar > i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--tc-primary, #3B82F6) 0%,
        var(--tc-accent, #a855f7) 100%);
    transition: width .25s ease;
}
.cl-batch-row.done .cl-batch-bar > i {
    background: var(--tc-success, #10b981);
}
.cl-batch-row.error .cl-batch-bar > i {
    background: var(--tc-error, #ef4444);
}
.cl-batch-status {
    color: var(--tc-text-secondary, #94a3b8);
    font-size: .82em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cl-batch-row.done .cl-batch-status { color: var(--tc-success, #10b981); }
.cl-batch-row.error .cl-batch-status { color: var(--tc-error, #ef4444); }
.cl-batch-dl {
    font-size: .85em;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--tc-success-surface, rgba(16,185,129,0.15));
    color: var(--tc-success, #10b981);
    border: 1px solid rgba(16,185,129,0.35);
}
.cl-batch-dl:hover { background: rgba(16,185,129,0.25); }
.cl-batch-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}