/* ════════════════════════════════════════════════
   transcript-widget.css
   契约：server/public/js/transcript-widget/dom-contract.md §4

   仅声明 widget 专属样式（is-current / locate / empty）。
   .line / .word-span / .play-btn / .content / .custom-bold 等
   共享类沿用 player.css，**绝不**在此重复声明。
   ════════════════════════════════════════════════ */

/* ─── 容器自身：尽量保持透明，让宿主容器（抽屉/overlay/Shadow root）控制布局 ─── */
.transcript-widget {
  /* widget 不强行设置 background / padding；由宿主容器决定 */
  position: relative;
}

/* list mode：占满父容器，纵向滚动由父容器（browser-transcript-list）控制 */
.transcript-widget--list {
  width: 100%;
}

/* bar mode：单行字幕条，紧凑布局 */
.transcript-widget--bar {
  width: 100%;
}
.transcript-widget--bar .line {
  border-bottom: none;
  padding: 4px 8px;
}

/* ─── 当前播放行高亮（widget 专属，避开主播放器 .line.active） ─── */
.transcript-widget--list .line.is-current {
  background: rgba(0, 122, 255, 0.1);
  border-left: 3px solid var(--blue);
  padding-left: 1px;  /* 抵消 border-left 占位；player.css .line padding-left = 4px */
}

.transcript-widget--list .line.is-current .play-btn {
  border-color: var(--blue);
  color: var(--blue);
}

/* ─── 空态 ─── */
.transcript-widget__empty {
  padding: 20px 14px;
  color: #909499;
  font-size: 13px;
  text-align: center;
}

/* ─── 「定位到当前句」浮动按钮（Step 5/6 用，Step 1 仅声明 CSS） ─── */
.transcript-widget__locate-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(115, 3, 244, 0.95);  /* 紫色，需求 §4.4 C 提到 */
  color: #fff;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.transcript-widget__locate-btn.is-visible {
  display: flex;
}

/* ─── 暗色模式适配 ─── */
body.dark .transcript-widget--list .line.is-current {
  background: rgba(10, 132, 255, 0.18);
  border-left-color: var(--blue);
}
body.dark .transcript-widget__empty {
  color: rgba(255, 255, 255, 0.45);
}

/* ─── 抽屉宿主特化：当 widget 挂在 #browserTranscriptList 时，
       继承抽屉容器原有的 padding / scrollbar 样式（见 base.css .browser-transcript-list）。
       widget 自身不重复声明，但在此预留一个 hook 类，便于宿主调整。 ─── */
#browserTranscriptList.transcript-widget--list {
  /* 抽屉宽度受 .browser-transcript-drawer 控制（360px），widget 充满即可 */
  padding: 0;  /* base.css 的 padding 0 0 6px 0 在 .browser-transcript-list 上保留 */
}

/* 抽屉内 .line 的字号/行高沿用 player.css 的 var(--subtitle-font-size)；
   如需窄抽屉特调，在此追加规则。 */