/* -----------------------------------------------------------------------
   Video Transcript module styles
   ----------------------------------------------------------------------- */

.video-transcript-player {
  margin-bottom: 1.25rem;
}

.video-transcript-player iframe {
  max-width: 100%;
  display: block;
}

/* Scrollable transcript panel */
.video-transcript {
  max-height: 420px;
  overflow-y: auto;
  padding: 0.5rem 0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
}

/* Each paragraph block */
.transcript-paragraph {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 1rem;
  border-left: 3px solid transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.transcript-paragraph.active {
  border-left-color: #065fd4;
  background-color: #f8f9fa;
}

/* Timestamp badge button */
.transcript-timestamp {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #212121;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 0.15rem;
  font-family: inherit;
}

.transcript-timestamp:hover {
  color: #065fd4;
  text-decoration: underline;
}

/* Paragraph text */
.transcript-text {
  margin: 0;
  line-height: 1.8;
  font-size: 0.95rem;
  color: #3e3e3e;
  transition: color 0.15s ease;
}

.transcript-paragraph.active .transcript-text {
  color: #0f0f0f;
  font-weight: 500;
}

/* Individual segments — inline, highlighted when playing */
.transcript-segment {
  display: inline;
  cursor: pointer;
  border-radius: 2px;
  padding: 1px 2px;
}

.transcript-segment:hover {
  background-color: #e3f2fd;
}

.transcript-segment.active {
  background-color: #fff59d;
}

/* Status messages */
.transcript-loading,
.transcript-error {
  color: #666;
  font-style: italic;
  padding: 0.5rem 1rem;
}

.transcript-error {
  color: #c62828;
}