/* Voice Lab composition; controls, type, colors and surfaces come from UI canon. */
.voice-workspace { container: voice-workspace / inline-size; }
.voice-workspace [hidden] { display: none !important; }
.voice-workspace .detail-header { align-items: center; }
.voice-workspace .detail-header h2 { margin: 0 0 var(--space-xs, 4px); }
.voice-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); min-height: 0; }
.voice-workspace-grid[data-resizable] { grid-template-columns: minmax(0, var(--voice-list-width, 1.65fr)) 12px minmax(0, 1fr); }
.voice-divider { position: relative; align-self: stretch; cursor: col-resize; touch-action: none; -webkit-user-select: none; user-select: none; background: var(--bg-secondary); border-inline: 1px solid var(--border-color); }
.voice-divider::after { content: ''; position: absolute; inset-block: calc(50% - 24px); inset-inline: 4px; border-radius: 2px; background: var(--text-muted); }
.voice-divider:is(:hover, :focus-visible), [data-resizing] > .voice-divider { background: var(--bg-hover, var(--bg-secondary)); outline: 2px solid var(--color-primary); outline-offset: -2px; }
.voice-divider:is(:hover, :focus-visible)::after, [data-resizing] > .voice-divider::after { background: var(--color-primary); }
.voice-history { container: voice-history / inline-size; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.voice-history-tools { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 160px) auto auto; align-items: center; gap: var(--space-sm, 8px); padding: var(--space-md, 16px); border-bottom: 1px solid var(--border-color); }
.voice-history-tools :is(input, select) { width: 100%; min-width: 0; margin: 0; }
.voice-history-notice { margin: 0; padding: var(--space-xs, 4px) var(--space-md, 16px); background: var(--bg-secondary); font-size: var(--text-sm, .875rem); }
.voice-history-notice:empty { display: none; }
.voice-history-list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0; margin: 0; list-style: none; }
.voice-history-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-bottom: 1px solid var(--border-color); padding-inline-end: var(--space-sm, 8px); }
.voice-history-row:has([aria-current="true"]) { background: var(--bg-secondary); box-shadow: inset 3px 0 var(--color-primary); }
.voice-history-row:hover { background: var(--bg-hover, var(--bg-secondary)); }
button.voice-history-select { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: var(--space-sm, 8px); align-items: start; width: 100%; min-width: 0; padding: var(--space-sm, 8px) var(--space-md, 16px); border: 0; border-radius: 0; background: transparent; color: var(--text-primary); text-align: start; box-shadow: none; font-weight: normal; white-space: normal; }
button.voice-history-select:hover { transform: none; background: transparent; }
.voice-history-number { color: var(--text-muted); font-size: var(--text-xs, .75rem); font-variant-numeric: tabular-nums; padding-block-start: 3px; }
.voice-history-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; overflow-wrap: anywhere; }
.voice-history-meta { display: block; margin-block-start: 4px; color: var(--text-secondary); font-size: var(--text-xs, .75rem); line-height: 1.35; }
.voice-history-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm, 8px); padding: var(--space-sm, 8px) var(--space-md, 16px); border-top: 1px solid var(--border-color); }
.voice-history-footer p { margin: 0; font-size: var(--text-sm, .875rem); font-variant-numeric: tabular-nums; }
.voice-history-empty { padding: var(--space-lg, 24px); color: var(--text-secondary); }
.voice-preview { container: voice-preview / size; min-width: 0; min-height: 0; overflow-y: auto; border-inline-start: 1px solid var(--border-color); padding: var(--space-md, 16px); display: flex; flex-direction: column; align-items: stretch; gap: var(--space-md, 16px); background: var(--bg-secondary); }
.voice-preview-heading { justify-content: space-between; }
.voice-preview #headStage { width: min(100%, max(220px, 60cqw), max(260px, 70cqh)); min-width: 0; margin-inline: auto; flex: none; }
.voice-preview #headStage .talking-head-component { display: flex; }
.voice-preview #speechAudio { width: 100%; min-width: 0; flex: none; }
.voice-preview p { margin: 0; }
.voice-transcript { overflow-wrap: anywhere; min-height: 80px; overflow-y: auto; flex: 1; }
.voice-transcript #spokenCaption { white-space: pre-wrap; line-height: 1.55; font-size: var(--text-lg, 1.125rem); margin-block: var(--space-sm, 8px); }
.voice-transcript :is(#voiceSelectedMeta, #voicePronouncedAs) { font-size: var(--text-sm, .875rem); }
.voice-editor { min-width: 0; min-height: 0; padding: var(--space-md, 16px); overflow-y: auto; display: flex; }
.voice-editor > * { flex: none; margin-block: 0; }
.voice-editor :is(input, textarea) { width: 100%; min-width: 0; }
.voice-editor details > :not(summary), .voice-studio-tools details > :not(summary) { padding: var(--space-sm, 8px); }
.voice-editor #wordRows { max-height: 45dvh; overflow-y: auto; }
.voice-editor #wordRows details > div { display: flex; }
.voice-studio-tools { display: grid; gap: var(--space-sm, 8px); }
.watch-phrase-dialog { width: min(720px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; }
.watch-phrase-panel { padding: var(--space-md, 16px); }
.watch-phrase-panel h2 { flex: 1; margin: 0; }
.watch-phrase-panel p { margin: 0; }
.watch-phrase-list { padding: 0; margin: 0; list-style: none; counter-reset: watch-phrase; }
.watch-phrase-list li { counter-increment: watch-phrase; display: flex; align-items: center; gap: var(--space-sm, 8px); padding-block: var(--space-sm, 8px); border-bottom: 1px solid var(--border-color); overflow-wrap: anywhere; }
.watch-phrase-list li::before { content: counter(watch-phrase); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.watch-phrase-list li > span { flex: 1; min-width: 0; }
.watch-phrase-list li > div { flex: none; flex-wrap: nowrap; gap: 2px; }
.voice-back { display: none; }
.voice-workspace[data-view="recordings"] #replay { display: none; }
.voice-workspace[data-view="compose"] #historyReplay { display: none; }
@container voice-history (max-width: 520px) {
  .voice-history-tools { grid-template-columns: minmax(0, 1fr) auto auto; }
  .voice-history-tools input { grid-column: 1 / -1; }
}
@container voice-workspace (max-width: 640px) {
  .voice-workspace .detail-header { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-sm, 8px) var(--space-md, 16px); }
  .voice-workspace .detail-header h2 { font-size: var(--text-lg, 1.125rem); }
  .voice-workspace .detail-subtitle { display: none; }
  .voice-workspace-grid, .voice-workspace-grid[data-resizable] { grid-template-columns: minmax(0, 1fr); }
  .voice-divider { display: none; }
  .voice-workspace[data-view="recordings"] .voice-preview { display: none; }
  .voice-workspace[data-view="recordings"].has-selection .voice-history { display: none; }
  .voice-workspace[data-view="recordings"].has-selection .voice-preview { display: flex; border: 0; }
  .voice-back { display: inline-grid; }
  .voice-workspace[data-view="compose"] .voice-back { display: none; }
  .voice-workspace[data-view="compose"] .voice-workspace-grid { overflow-y: auto; grid-auto-rows: max-content; }
  .voice-workspace[data-view="compose"] :is(.voice-editor, .voice-preview) { overflow: visible; }
  .voice-workspace[data-view="compose"] .voice-preview { container-type: inline-size; border-inline-start: 0; border-block-start: 1px solid var(--border-color); }
  .voice-workspace[data-view="compose"] #headStage { width: min(100%, 50dvh); }
}

.voice-preview .speech-bubble { display: none !important; }
.voice-preview :is(.head-drift, .persona-pose) { animation: none !important; transform: none !important; }
.voice-secondary-actions > button { flex: 1; }