frontend/src/components/DubSegmentRow.css

/* ═══ 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;
}