:root{
  --tl-transcript-font-size: 22px;
  --tl-transcript-line-height: 1.18;
  --tl-transcript-line-gap: 6px;

  --tl-transcript-bg: transparent;
  --tl-transcript-text: #e5e7eb;
  --tl-transcript-muted: #9ca3af;
  --tl-transcript-border: rgba(255,255,255,.08);

  --tl-transcript-corrected-text: #f8fafc;
  --tl-transcript-corrected-bg: rgba(255,255,255,.05);
  --tl-transcript-corrected-border: rgba(255,255,255,.18);

  --tl-transcript-partial-opacity: .78;

  --tl-transcript-manual-bg: rgba(255,255,255,.04);
  --tl-transcript-manual-border: rgba(255,255,255,.10);

  --tl-transcript-speaker-text: #cbd5e1;
  --tl-font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.tl-transcript{
  font-family: var(--tl-font-family);
  white-space: pre-wrap;
  line-height: var(--tl-transcript-line-height);
  font-size: var(--tl-transcript-font-size);
  color: var(--tl-transcript-text);
}



.tl-transcript .line.partial{
  opacity: var(--tl-transcript-partial-opacity);
}
.tl-transcript .line{
  display:block;
  margin: var(--tl-transcript-line-gap) 0;
  color: var(--tl-transcript-text);
}

.tl-transcript .line.corrected{
  background: transparent;
  color: #fde047;
  border-left: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.tl-transcript .speaker-label{
  display:inline;
  margin-right: .35em;
  font-size: 1em;              /* zelfde grootte als tekst */
  font-weight: 700;            /* vet */
  letter-spacing: .01em;
  text-transform: none;        /* optioneel: rustiger lezen */
  color: var(--tl-transcript-text);
  opacity: 1;
}
.tl-transcript .speaker-label::after{
  content: ":";
  margin-right: .2em;
}

.tl-transcript .line > .speaker-label{
  margin-top: 4px;
}

.tl-transcript .line.corrected .speaker-label{
  margin-bottom: 2px;
}

.tl-transcript .line .speaker-label + *{
  display:block;
}

.tl-transcript .manual-block{
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);   /* donkerblauw/zwart */
  border: 1px solid rgba(250, 204, 21, 0.25); /* subtiele gele rand */
}

.tl-transcript .manual-title{
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #facc15; /* geel */
}

.tl-transcript .manual-block .line{
  color: #fde047; 
  font-weight: inherit;   /* zelfde als normale tekst */
}

.tl-transcript-mode{
  font-size: 12px;
  color: var(--tl-transcript-muted);
}

.tl-transcript-mode.manual{
  color: var(--tl-transcript-muted);
}

.tl-transcript.variant-live{
  --tl-transcript-font-size: var(--font-size, 18px);
  --tl-transcript-line-height: 1.08;
  --tl-transcript-line-gap: var(--line-gap, 1px);

  --tl-transcript-text: #e5e7eb;
  --tl-transcript-muted: #9ca3af;
  --tl-transcript-corrected-text: #f8fafc;
  --tl-transcript-corrected-bg: rgba(255,255,255,.04);
  --tl-transcript-corrected-border: rgba(255,255,255,.14);

  --tl-transcript-manual-bg: rgba(255,255,255,.03);
  --tl-transcript-manual-border: rgba(255,255,255,.10);
  --tl-transcript-speaker-text: #cbd5e1;
}

/* view variant */
.tl-transcript.variant-view{
  --tl-transcript-font-size: var(--font-size, 22px);
  --tl-transcript-line-height: 1.18;
  --tl-transcript-line-gap: var(--line-gap, 4px);

  --tl-transcript-text: #ffffff;
  --tl-transcript-muted: #bdbdbd;
  --tl-transcript-corrected-text: #ffffff;
  --tl-transcript-corrected-bg: rgba(255,255,255,.04);
  --tl-transcript-corrected-border: rgba(255,255,255,.14);

  --tl-transcript-manual-bg: rgba(255,255,255,.03);
  --tl-transcript-manual-border: rgba(255,255,255,.10);
  --tl-transcript-speaker-text: #d1d5db;
}