/* Transcribe: link or upload in, a document-style transcript out. */
.ts-input { display: grid; gap: 16px; }
.ts-mode { justify-self: start; }
.ts-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); }
.ts-file b { font: 600 14px/1.3 var(--sans); word-break: break-all; }
.ts-file span { font: 400 13px/1.3 var(--sans); color: var(--muted); }
.ts-file .chip-btn { flex: 0 0 auto; }
.ts-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.ts-media { display: grid; gap: 10px; align-content: start; }
.ts-poster { width: 100%; border-radius: 14px; overflow: hidden; background: var(--line); }
.ts-poster img { display: block; width: 100%; height: auto; }
.ts-poster.is-portrait { width: 70%; }
.ts-poster.is-audio { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--ink); color: #fff; }
.ts-poster.is-audio svg { width: 56%; height: auto; }
.ts-title { margin: 0; font: 600 15px/1.35 var(--sans); overflow-wrap: anywhere; }
.ts-meta { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.ts-media .link-arrow { justify-self: start; background: none; border: 0; cursor: pointer; }
.ts-doc { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px 22px; min-width: 0; }
.ts-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ts-toolbar .tool-toolbar { gap: 6px; }
.ts-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 14px/1.2 var(--sans); user-select: none; }
.ts-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ts-switch i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(14, 8, 7, 0.22); transition: background var(--t) var(--ease); flex: 0 0 auto; }
.ts-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--t) var(--ease); }
.ts-switch input:checked + i { background: var(--ink); }
.ts-switch input:checked + i::after { transform: translateX(16px); }
.ts-switch input:focus-visible + i { outline: var(--ring); }
.ts-body { max-height: 64vh; overflow: auto; font: 400 16px/1.7 var(--serif); color: var(--ink); padding-right: 6px; }
.ts-body p { margin: 0 0 12px; }
.ts-seg { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; }
.ts-seg time { font: 500 12.5px/1.9 var(--sans); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-para { text-indent: 0; }
@media (max-width: 860px) {
  .ts-grid { grid-template-columns: 1fr; }
  .ts-media { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .ts-poster, .ts-poster.is-portrait { width: 96px; grid-row: span 3; }
  .ts-media .link-arrow { grid-column: 2; }
  .ts-seg { grid-template-columns: 1fr; gap: 2px; }
  .ts-body { max-height: none; }
  .ts-doc { padding: 16px; }
}