/* Episode Browser Layout */
.episodes-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  padding: 12px;
  height: 100vh;
}

.episodes-layout > #episode-list {
  overflow-y: auto;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.episodes-layout > #episode-list .scroll-list {
  flex: 1;
  overflow-y: auto;
  max-height: none;
}

.episodes-layout > #episode-detail {
  overflow-y: auto;
  max-height: 100vh;
}

/* Episode List Items */

/* Status filter pills */
.ep-status-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
}

.ep-filter-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.ep-filter-pill:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* Active: "All" — accent */
.ep-filter-pill.active {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: var(--accent);
}

/* Active: completed/ready — green */
.ep-filter-pill.active[data-status="completed"] {
  background: rgba(74, 222, 128, 0.15);
  color: var(--success);
  border-color: var(--success);
}

/* Active: generating — amber */
.ep-filter-pill.active[data-status="generating"] {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
  border-color: var(--warning);
}

/* Active: failed — red */
.ep-filter-pill.active[data-status="failed"] {
  background: rgba(248, 113, 113, 0.15);
  color: var(--error);
  border-color: var(--error);
}

/* Active: draft — gray */
.ep-filter-pill.active[data-status="draft"] {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-secondary);
  border-color: var(--text-muted);
}

.episode-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}

.episode-item:hover {
  background: var(--bg-hover);
}

.episode-item.selected {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.episode-item-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.episode-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Episode Detail */
.detail-panel {
  overflow-y: auto;
}

.episode-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.episode-detail-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Eyebrow: ID pill + status + visibility — small context line above title */
.episode-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.episode-id {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  cursor: pointer;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.episode-id:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Title — dominates the header */
.episode-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

/* Meta line: host avatars + names + scene count */
.episode-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.episode-meta-text {
  white-space: nowrap;
}

.episode-meta-separator {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}

/* Host pills (portrait + name, clickable) */
.header-host-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-host-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.header-host-pill-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.header-host-pill-placeholder {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.header-host-pill-name {
  line-height: 1;
}

/* Rating badge */
.tag-rating {
  font-size: 12px;
}

.tag-rating-up {
  background: rgba(34, 197, 94, 0.12);
  color: var(--status-positive);
  border: 1px solid rgba(34, 197, 94, 0.27);
}

.tag-rating-down {
  background: rgba(239, 68, 68, 0.12);
  color: var(--status-critical);
  border: 1px solid rgba(239, 68, 68, 0.27);
}

/* Collapsible details section */
.episode-details-section {
  margin-top: 10px;
}

.episode-details-section summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  user-select: none;
}

.episode-details-section summary:hover {
  color: var(--text-secondary);
}

.episode-details-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labeled row inside details: LABEL + value side by side */
.details-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}

.details-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  min-width: 64px;
  flex-shrink: 0;
  padding-top: 1px;
}

.details-value {
  color: var(--text-secondary);
  line-height: 1.4;
}

.details-value .tag {
  vertical-align: baseline;
}

/* Sub-scores (inline inside details row) */
.episode-scores {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.episode-score-item b {
  color: var(--text-secondary);
}

.episode-feedback-quote {
  color: var(--text-secondary);
  font-style: italic;
}

/* Scene Strip */
.scene-strip {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scene-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-primary);
}

.scene-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}

.scene-card-header .scene-number {
  color: var(--accent);
}

.scene-image-container {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scene-image-container img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.scene-image-placeholder {
  color: var(--text-muted);
  font-size: 13px;
}

.scene-body {
  padding: 14px;
}

.scene-narrator {
  display: flex;
  align-items: flex-start;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.scene-dialogue {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dialogue-line {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}

.dialogue-line.speaker-a {
  background: rgba(124, 92, 252, 0.08);
}

.dialogue-line.speaker-b {
  background: rgba(56, 189, 248, 0.08);
}

.dialogue-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.dialogue-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.dialogue-speaker {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  margin-right: 10px;
}

.speaker-b .dialogue-speaker {
  color: var(--color-link);
}

.dialogue-text {
  color: var(--text-primary);
}

.dialogue-delivery {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  margin-left: 6px;
}

.scene-flavor {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Image prompt in scene */
.scene-image-prompt {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.scene-image-prompt summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
}

/* Diagnostics Panel */
.diagnostics-panel {
  margin-bottom: 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 16px;
}

.diagnostics-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.diag-scene {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
  background: var(--bg-primary);
}

.diag-scene:last-child {
  margin-bottom: 0;
}

.diag-scene-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.diag-scene-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.diag-section {
  margin-bottom: 12px;
}

.diag-section > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.diag-prompt {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.diag-scene-desc {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  box-sizing: border-box;
}

.diag-expressions {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.diag-ref-sheets {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.diag-ref-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.diag-ref-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.diag-ref-card span {
  font-size: 11px;
  color: var(--text-secondary);
}

.diag-no-refs {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.diag-current-image {
  max-width: 480px;
}

.diag-current-image img {
  width: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.diag-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.diag-actions button {
  font-size: 12px !important;
  padding: 6px 14px !important;
}

.diag-refs-header {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
  background: var(--bg-surface);
}

.diag-refs-header .diag-scene-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.diag-ref-elements {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diag-ref-element-tag {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.diag-ref-element-tag strong {
  color: var(--text-primary);
}

.diag-ref-scenes {
  font-size: 11px;
  color: var(--text-muted);
}

/* Pipeline Steps — Horizontal Flow */
.pipeline-steps-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 14px;
  margin-bottom: 20px;
}

.pipeline-steps-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pipeline-steps-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.pipeline-flow {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 4px 0;
}

.pipeline-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  min-width: 110px;
  text-align: center;
  position: relative;
}

.pipeline-flow-step.completed {
  border-color: var(--success);
  background: rgba(74, 222, 128, 0.08);
}

.pipeline-flow-step.started,
.pipeline-flow-step.running {
  border-color: var(--warning);
  background: rgba(251, 191, 36, 0.08);
}

.pipeline-flow-step.pending {
  border-color: var(--border);
  opacity: 0.6;
}

.pipeline-flow-step.failed {
  border-color: var(--error);
  background: rgba(248, 113, 113, 0.08);
}

.pipeline-flow-step-name {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
}

.pipeline-flow-step-status {
  font-size: 10px;
  font-weight: 500;
}

.pipeline-flow-step.completed .pipeline-flow-step-status { color: var(--success); }
.pipeline-flow-step.started .pipeline-flow-step-status,
.pipeline-flow-step.running .pipeline-flow-step-status { color: var(--warning); }
.pipeline-flow-step.pending .pipeline-flow-step-status { color: var(--text-muted); }
.pipeline-flow-step.failed .pipeline-flow-step-status { color: var(--error); }

.pipeline-flow-step-duration {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.pipeline-flow-arrow {
  color: var(--text-muted);
  font-size: 16px;
  padding: 0 4px;
  flex-shrink: 0;
}

.pipeline-flow-arrow.completed {
  color: var(--success);
}

/* Legacy pipeline step rows (diagnostics panel) */
.pipeline-steps-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pipeline-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--bg-primary);
}

.pipeline-step-row.completed {
  border-left: 3px solid var(--success);
}

.pipeline-step-row.failed {
  border-left: 3px solid var(--status-critical);
}

.pipeline-step-row.started {
  border-left: 3px solid var(--status-warning);
}

.pipeline-step-name {
  font-weight: 600;
  min-width: 100px;
  color: var(--text-primary);
}

.pipeline-step-duration {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.pipeline-step-error {
  color: var(--status-critical);
  font-size: 11px;
}

.pipeline-step-output {
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}

/* Pipeline: parallel group (stacked vertically) */
.pipeline-parallel-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.pipeline-parallel-group .pipeline-flow-step {
  margin: 0;
}
.pipeline-labeled-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  position: relative;
}
.pipeline-group-label {
  position: absolute;
  top: -8px;
  left: 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: 0 4px;
}

/* Hide the separate status label (step name is enough, color indicates status) */
.pipeline-flow-step-status {
  display: none;
}

/* ========== Pipeline Timeline View ========== */
/* Pipeline Timeline — Stitch-style sequential step boxes */
.pipeline-timeline {
  margin-top: 12px;
}

/* Status legend */
.pipeline-tl-legend {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.pipeline-tl-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.pipeline-tl-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pipeline-tl-legend-item.completed .pipeline-tl-legend-dot { background: var(--status-positive); }
.pipeline-tl-legend-item.started .pipeline-tl-legend-dot { background: var(--status-warning); }
.pipeline-tl-legend-item.failed .pipeline-tl-legend-dot { background: var(--status-critical); }
.pipeline-tl-legend-item.pending .pipeline-tl-legend-dot { background: var(--status-neutral); }

/* Step boxes row */
.pipeline-tl-boxes {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
}

/* Connector line between boxes */
.pipeline-tl-connector {
  display: flex;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  position: relative;
}

.pipeline-tl-connector::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}

.pipeline-tl-connector.active::before {
  background: var(--status-positive);
}

/* Individual step box */
.pipeline-tl-box {
  flex: 1;
  min-width: 100px;
  max-width: 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s;
  cursor: default;
}

.pipeline-tl-box:hover {
  border-color: var(--accent);
}

.pipeline-tl-box-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.pipeline-tl-box-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  width: fit-content;
}

.pipeline-tl-box-badge.completed {
  background: rgba(74, 222, 128, 0.2);
  color: var(--status-positive);
}

.pipeline-tl-box-badge.started,
.pipeline-tl-box-badge.running {
  background: rgba(251, 191, 36, 0.2);
  color: var(--status-warning);
}

.pipeline-tl-box-badge.failed {
  background: rgba(248, 113, 113, 0.2);
  color: var(--status-critical);
}

.pipeline-tl-box-badge.pending {
  background: var(--bg-primary);
  color: var(--text-muted);
}

.pipeline-tl-box-dur {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.pipeline-tl-box-error {
  font-size: 10px;
  color: var(--status-critical);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Box color accents */
.pipeline-tl-box.completed {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.05);
}

.pipeline-tl-box.started,
.pipeline-tl-box.running {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.05);
  animation: pulse 2s ease-in-out infinite;
}

.pipeline-tl-box.failed {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.05);
}

.pipeline-tl-box.pending {
  border-color: var(--border);
  background: var(--bg-primary);
  opacity: 0.6;
}

/* Retry button inside box */
.pipeline-tl-box .pipeline-retry-btn {
  font-size: 10px;
  padding: 2px 8px;
  margin-top: 2px;
  width: fit-content;
}

/* Time axis below boxes */
.pipeline-tl-axis {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0 4px;
}

.pipeline-tl-axis-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  flex-shrink: 0;
}

.pipeline-tl-axis-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Script Scores Card */
.script-scores-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 14px;
  margin-bottom: 20px;
}

.script-scores-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.script-scores-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.script-overall-score {
  font-size: 22px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  line-height: 1.2;
}

.script-scores-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.script-score-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.script-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.script-score-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 130px;
  flex-shrink: 0;
}

.script-score-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.script-score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.script-score-value {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 20px;
  text-align: right;
}

.script-score-notes-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  cursor: help;
  border: 1px solid var(--border);
}

/* Per-scene dots */
.script-scene-dots-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.script-scene-dots-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.script-scene-dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.script-scene-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--bg-primary);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.script-scene-dot:hover {
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

/* Feedback collapsible */
.script-feedback-details {
  padding-top: 4px;
}

.script-feedback-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.script-feedback-text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 8px 10px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: pre-wrap;
}

/* Scene detail expand */
.script-scene-detail {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.script-scene-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
}

.script-scene-detail-item {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 4px;
}

.script-scene-detail-item:last-child {
  margin-bottom: 0;
}

/* Pipeline: clickable step links */
a.pipeline-flow-step {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
a.pipeline-flow-step:hover {
  filter: brightness(1.3);
}

/* Pipeline: per-ref image boxes */
.pipeline-ref-step {
  font-size: 10px;
  padding: 3px 8px;
  min-width: unset;
}
.pipeline-ref-step .pipeline-flow-step-name {
  font-size: 10px;
}

/* Pipeline: audio/voice step accent (purple/blue) */
.pipeline-audio-step.completed {
  border-color: var(--color-violet);
  background: rgba(167, 139, 250, 0.10);
}
.pipeline-audio-step.started,
.pipeline-audio-step.running {
  border-color: var(--color-violet-light);
  background: rgba(196, 181, 253, 0.08);
}
.pipeline-audio-step.failed {
  border-color: var(--status-critical);
  background: rgba(248, 113, 113, 0.08);
}

/* Pipeline: forking layout (image + voice branches) */
.pipeline-fork {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 0;
}

.pipeline-fork-connector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pipeline-fork-complete {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pipeline-fork-branches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding: 0 10px;
}

/* Vertical connector bars on left and right of the fork */
.pipeline-fork-branches::before,
.pipeline-fork-branches::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: calc(100% - 16px);
  background: var(--text-muted);
  border-radius: 1px;
}
.pipeline-fork-branches::before { left: 0; }
.pipeline-fork-branches::after { right: 0; }

.pipeline-branch {
  display: flex;
  align-items: center;
  gap: 0;
}

.pipeline-branch-content {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Branch labels */
.pipeline-branch-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
}
.pipeline-branch-label-image {
  color: var(--status-positive);
  background: rgba(74, 222, 128, 0.12);
}
.pipeline-branch-label-voice {
  color: var(--color-violet);
  background: rgba(167, 139, 250, 0.12);
}

/* Inline audio play buttons */
.audio-play-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--color-violet) 27%, transparent);
  color: var(--color-violet);
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  font-size: 9px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  vertical-align: middle;
  margin-right: 6px;
}
.audio-play-btn:hover {
  background: color-mix(in srgb, var(--color-violet) 13%, transparent);
  color: var(--color-violet-light);
}

/* ========== Episode Tab Bar ========== */
.episode-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}

.episode-tab {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -2px;
}

.episode-tab:hover {
  color: var(--text-primary);
}

.episode-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ========== Lineage Tree ========== */
.lineage-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

.lineage-node {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  background: var(--bg-surface);
}

.lineage-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.lineage-node-header strong {
  color: var(--text-primary);
}

.lineage-node-icon {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-glow);
  color: var(--accent);
  letter-spacing: 0.5px;
}

.lineage-node-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.lineage-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 20px;
}

.lineage-connector {
  width: 2px;
  height: 16px;
  background: var(--border);
  margin-left: 16px;
}

/* Pipeline steps bars inside lineage */
.lineage-steps-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.lineage-step-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-size: 12px;
}

.lineage-step-bar.completed {
  background: rgba(74, 222, 128, 0.06);
}

.lineage-step-bar.failed {
  background: rgba(248, 113, 113, 0.06);
}

.lineage-step-name {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 80px;
}

.lineage-step-dur {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.lineage-step-error {
  color: var(--error);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.lineage-retry-btn,
.pipeline-retry-btn {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--error);
  color: var(--error);
  background: none;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
  transition: background 0.15s;
}

.lineage-retry-btn:hover,
.pipeline-retry-btn:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* Model log compact inside lineage */
.lineage-model-log {
  margin-top: 8px;
}

.lineage-model-log .model-log-table {
  font-size: 11px;
}

/* Reference images grid in lineage */
.lineage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.lineage-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
}

.lineage-grid-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
}

.lineage-grid-item.completed img {
  border-color: var(--success);
}

.lineage-grid-item.failed img {
  border-color: var(--error);
}

.lineage-grid-placeholder {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 700;
}

.lineage-grid-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}

/* Scenes grid in lineage */
.lineage-scenes-grid {
  gap: 6px;
}

.lineage-scene-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border);
}

.lineage-scene-item.completed {
  border-color: var(--success);
}

.lineage-scene-item.failed {
  border-color: var(--error);
}

.lineage-scene-num {
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
}

/* ========== Script Inspector ========== */
.script-inspector {
  padding: 4px 0;
}

.script-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.script-column {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
}

.script-pass-header {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.script-critique-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.script-critique-feedback {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Per-dimension critique breakdown */
.critique-dimensions {
  display: flex;
  flex-direction: column;
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--border);
}

.critique-dim-row {
  display: grid;
  grid-template-columns: 100px 40px 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 11px;
  line-height: 1.4;
}

.critique-dim-label {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.critique-dim-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  text-align: right;
}

.critique-dim-notes {
  color: var(--text-muted);
  font-size: 11px;
}

.script-scene-card {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.script-scene-card:last-child {
  border-bottom: none;
}

.script-scene-card-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.script-critique-inline {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.5;
}

.script-critique-point {
  font-size: 11px;
  margin-top: 2px;
  color: var(--text-primary);
}

/* Critique icon prefixes — only the icon gets color, not the text */
.critique-icon {
  display: inline-block;
  width: 14px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}

.critique-icon-strength {
  color: var(--success, #4ade80);
}

.critique-icon-weakness {
  color: var(--error, #f87171);
}

.critique-icon-suggestion {
  color: var(--warning, #fbbf24);
}

.script-narrator {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  margin-bottom: 6px;
}

.script-dialogue-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.5;
}

.script-dialogue-speaker {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
}

.script-dialogue-text {
  color: var(--text-primary);
}

.script-dialogue-delivery {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  flex-shrink: 0;
}

.script-flavor {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* Diff highlighting */
.diff-changed {
  background: rgba(251, 191, 36, 0.12) !important;
  border-left: 2px solid var(--status-warning);
  padding-left: 4px;
}

.diff-word {
  background: rgba(251, 191, 36, 0.25);
  border-radius: 2px;
  padding: 0 1px;
}

/* ═══════════════════════════════════════════════════════════════
   Side-by-Side Script Diff
   ═══════════════════════════════════════════════════════════════ */

.sd-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
}

/* Header bar */
.sd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.sd-header-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sd-header-stats {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Column headers */
.sd-column-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.sd-col-header {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-primary);
}

.sd-col-header:first-child {
  border-right: 1px solid var(--border);
}

/* Side-by-side body — single scrollable container with rows */
.sd-body {
  overflow-y: auto;
  max-height: 70vh;
}

.sd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sd-row > .sd-line:first-child {
  border-right: 1px solid var(--border);
}

/* Individual line row */
.sd-line {
  display: flex;
  align-items: flex-start;
  padding: 3px 10px;
  min-height: 24px;
  font-size: 12px;
  line-height: 1.6;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.sd-line-num {
  width: 32px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  padding-top: 2px;
  user-select: none;
  text-align: right;
  padding-right: 10px;
}

.sd-line-content {
  flex: 1;
  min-width: 0;
}

/* Line type variations */
.sd-line-scene-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.sd-line-scene-header .sd-line-content {
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sd-line-gap {
  background: color-mix(in srgb, var(--border) 15%, transparent);
}

.sd-narrator {
  font-style: italic;
  color: var(--text-secondary);
  padding: 2px 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  border-left: 3px solid var(--accent);
  display: inline-block;
}

.sd-speaker {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  margin-right: 6px;
  font-size: 11px;
}

.sd-text {
  color: var(--text-primary);
}

.sd-delivery {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  margin-left: 4px;
}

.sd-flavor {
  font-style: italic;
  color: var(--text-muted);
  font-size: 11px;
}

/* Diff highlighting: removed (left) / added (right) */
.sd-removed {
  background: color-mix(in srgb, var(--status-critical, #ef4444) 12%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--status-critical, #ef4444) 50%, transparent);
}

.sd-added {
  background: color-mix(in srgb, var(--status-positive) 12%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--status-positive) 50%, transparent);
}

/* Word-level diff marks inside added lines */
.sd-added .diff-word {
  background: color-mix(in srgb, var(--status-positive) 30%, transparent);
}

/* Script sub-tab bar (Draft+Rewrite / Critique N) */
.sd-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 12px;
}

.sd-tab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sd-tab:hover {
  color: var(--text-primary);
}

.sd-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sd-tab-panel {
  display: none;
}

.sd-tab-panel.active {
  display: block;
}

/* Critique panel (full tab content, not collapsible) */
.sd-critique-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
}

.sd-critique-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.sd-critique-panel-body {
  padding: 12px 16px;
}

.sd-critique-scenes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}