/* ═══ DubSegmentRow extracted layout styles ═══ */ /* Row transition — smooth bg/border changes during generation */ .segment-row { transition: background 0.2s ease, border-left 0.15s ease, opacity 0.3s ease; border-left: 2px solid transparent; } .segment-active { border-left: 2px solid #d3869b !important; background: rgba(211, 134, 155, 0.08) !important; } .segment-done { opacity: 0.6; border-left: 2px solid rgba(142, 192, 124, 0.35) !important; } .segment-selected { background: rgba(211, 134, 155, 0.05) !important; } .seg-check { width: 14px; flex-shrink: 0; margin-right: 1px; cursor: pointer; } .seg-time { width: 46px; flex-shrink: 0; display: flex; flex-direction: column; } .seg-sync-badge { font-size: 0.48rem; margin-top: 1px; display: inline-flex; align-items: center; gap: 1px; } .seg-rate-badge { font-size: 0.48rem; margin-top: 1px; font-variant-numeric: tabular-nums; } .seg-speed-badge { font-size: 0.52rem; margin-left: 1px; } .seg-speaker-input { width: 40px; flex-shrink: 0; font-size: 0.52rem; color: #a89984; padding: 1px 2px; text-align: center; } .seg-text-col { flex: 1 1 0%; display: flex; flex-direction: column; gap: 1px; min-width: 80px; overflow: hidden; } .seg-text-col .segment-input { width: 100%; min-width: 0; } .seg-orig-row { font-size: 0.52rem; color: #6b6657; display: flex; align-items: center; gap: 3px; padding: 0 2px; overflow: hidden; } .seg-orig-label { opacity: 0.8; text-transform: uppercase; font-weight: 600; font-size: 0.48rem; color: #7c6f64; } .seg-orig-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seg-budget-warn { color: #fabd2f; font-size: 0.48rem; } .seg-restore-btn { background: none; border: none; color: #83a598; cursor: pointer; padding: 0; font-size: 0.52rem; } .seg-lang-select { width: 38px; flex-shrink: 0; font-size: 0.48rem; padding: 1px 1px; } .seg-profile-select { width: 56px; flex-shrink: 0; font-size: 0.52rem; padding: 1px 2px; overflow: hidden; text-overflow: ellipsis; } .seg-gain-slider { width: 36px !important; max-width: 36px; flex-shrink: 0; flex-grow: 0; height: 3px; padding: 0; margin: 0; } .seg-actions { display: flex; gap: 1px; width: 38px; flex-shrink: 0; }