/* ════════════════════════════════════════════════
   Transcript Translation Bar
   ════════════════════════════════════════════════ */

/* === TRANSCRIPT TRANSLATE BAR === */
.ts-translate-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
}
.ts-lang-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px; color: #ccc;
    font-size: 12px; padding: 4px 8px;
    cursor: pointer; outline: none;
    transition: border-color 0.15s;
}
.ts-lang-select:focus { border-color: rgba(139,92,246,0.5); }
.ts-translate-btn {
    padding: 5px 12px; border-radius: 7px;
    border: 1px solid rgba(139,92,246,0.35);
    background: rgba(139,92,246,0.1);
    color: #c4b5fd; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ts-translate-btn:hover:not([disabled]) { background: rgba(139,92,246,0.22); }
.ts-translate-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ts-translate-toggle {
    padding: 5px 10px; border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #888; font-size: 11px;
    cursor: pointer; transition: all 0.15s;
}
.ts-translate-toggle:hover { background: rgba(255,255,255,0.1); color: #ccc; }
.ts-translate-clear {
    width: 24px; height: 24px; border-radius: 6px;
    border: none; background: transparent;
    color: #555; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.ts-translate-clear:hover { background: rgba(239,68,68,0.15); color: #f87171; }

/* Inline translation under each transcript line */
.tl-translation {
    display: block;
    font-size: 11.5px; color: #a78bfa;
    line-height: 1.5; margin-top: 2px;
    padding-left: 2px;
    font-style: italic;
}