/* Transcript dock panel */
.tx { display: flex; flex-direction: column; }
.tx-bar { flex-wrap: wrap; row-gap: 6px; }
.tx-bar .btn { padding: 4px 10px; font-size: 12px; }
.tx-bar .btn:disabled { opacity: .45; cursor: default; }
.tx-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tx-info .link { color: var(--amber); font-size: inherit; text-decoration-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.tx-spacer { flex: 1; }
.tx-selinfo { color: var(--amber); font-variant-numeric: tabular-nums; }
.tx-more { font-size: 16px; line-height: 1; }

.tx-doc {
  height: 220px; overflow: auto; margin: 0 10px 10px; padding: 10px 14px 14px;
  background: var(--doc-bg); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; line-height: 1.75; color: var(--doc-text); user-select: none; outline: none;
  scroll-padding: 24px;
}
.tx-doc:focus-visible { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

.tx-seg { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.tx-seg + .tx-seg { margin-top: 2px; }
.tx-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-top: 4px; }
.tx-time { background: none; border: 0; padding: 0; font: 11px/1.4 var(--mono); color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; }
.tx-time:hover { color: var(--amber); }
.tx-track { display: inline-flex; align-items: center; gap: 5px; max-width: 64px; font-size: 11px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-track::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--c, var(--amber)); }
.tx-track.same { font-size: 0; gap: 0; }
.tx-words { max-width: 78ch; }

.tx-doc .w { border-radius: 3px; padding: 1px 0; cursor: text; transition: color .08s; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tx-doc .w:hover { color: var(--text); background: var(--hover-tint); }
.tx-doc .w.low { text-decoration: underline dotted color-mix(in srgb, var(--muted) 70%, transparent); text-underline-offset: 4px; }
.tx-doc .w.filler { color: var(--filler); background: color-mix(in srgb, var(--amber) 8%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--amber) 35%, transparent); }
.tx-doc .w.now { color: var(--amber); box-shadow: inset 0 -2px 0 var(--amber); }
.tx-doc .w.cursor { box-shadow: inset 1px 0 0 var(--amber); }
.tx-doc .w.sel { background: color-mix(in srgb, var(--amber) 26%, transparent); color: var(--sel-text); }
.tx-doc .w.sel.join { box-shadow: .28em 0 0 color-mix(in srgb, var(--amber) 26%, transparent); }
.tx-doc .w.sel.now { box-shadow: inset 0 -2px 0 var(--amber); }

.tx-empty { padding: 4px 12px 16px; }
.tx-intro { max-width: 640px; }
.tx-intro h3 { margin: 4px 0 4px; font-size: 14px; font-weight: 600; }
.tx-intro p { margin: 0 0 12px; line-height: 1.5; }
.tx-intro-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tx-intro-actions .btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 900px) {
  .tx-seg { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tx-meta { flex-direction: row; gap: 8px; padding-top: 0; }
}