/* 字幕模式：flex 列，控制栏固定顶部，下方滚动区自适应 */
#imm-lyrics-content.subtitle-mode {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ── 控制栏 ─────────────────────────────────────────────── */
.sub-ctrl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.055);
  border-bottom: 0.5px solid rgba(255,255,255,0.09);
}

/* ── 延迟指示 chip（只显示当前 delay，无交互）─────────────── */
.sub-delay-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  user-select: none;
  -webkit-user-select: none;
}

/* 小圆点：LIVE 指示 */
.sub-delay-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4fc3f7;
  box-shadow: 0 0 6px rgba(79,195,247,0.6);
  animation: sub-dot-breathe 2.4s ease-in-out infinite;
}

@keyframes sub-dot-breathe {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}

.sub-delay-val {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.92);
  transition: color 0.22s;
}

/* 校准时短暂变蓝，给用户即时反馈 */
.sub-delay-val.flash { color: #4fc3f7; }

/* ── 中间提示文字（首次提示用户单击字幕）─────────────────── */
.sub-tip-text {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.42);
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.5s ease, color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 用户首次校准后，提示淡出但保留占位 */
.sub-tip-text.faded {
  opacity: 0;
  pointer-events: none;
}

/* ── ↓ 当前 按钮（用户上划后才出现）─────────────────────── */
.sub-jump {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 11px;
  background: rgba(10,132,255,0.18);
  border: 1px solid rgba(10,132,255,0.32);
  border-radius: 999px;
  color: #64b5f6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sub-jump:active { background: rgba(10,132,255,0.38); }

/* ── 滚动区 ──────────────────────────────────────────────
   不再依赖 sentinel + overflow-anchor，
   改为 JS 主动 scrollIntoView，并监听用户滚动决定是否暂停跟随。 */
.sub-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scroll-behavior: smooth;
  padding: 14px 20px 36px;
  -webkit-mask-image: linear-gradient(
    to bottom, transparent 0%, #000 6%, #000 92%, transparent 100%);
  mask-image: linear-gradient(
    to bottom, transparent 0%, #000 6%, #000 92%, transparent 100%);
}

.sub-scroll::-webkit-scrollbar { display: none; }

/* ── 字幕行 ──────────────────────────────────────────── */
.sub-line {
  position: relative;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  color: rgba(255,255,255,0.32);
  margin: 0;
  padding: 1px 0 1px 10px;       /* 左 10px 留给校准后的绿色脉冲边界 */
  cursor: pointer;
  transition: color 0.45s ease, font-weight 0.3s ease, background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  contain: layout style;
  min-height: calc(1.85em);       /* 避免 partial 长度跳变引起抖动 */
}

/* 与 active 相邻的行（提供学习语境） */
.sub-line.adjacent {
  color: rgba(255,255,255,0.58);
}

/* 当前正在播放的行（active） */
.sub-line.active {
  color: #ffffff;
  font-weight: 600;
}

/* 校准成功：整行绿色脉冲一次 */
.sub-line.sub-calibrated {
  animation: sub-calibrated-pulse 0.8s ease-out;
}

@keyframes sub-calibrated-pulse {
  0%   { background: rgba(52,199,89,0.0);  box-shadow: inset 3px 0 0 0 rgba(52,199,89,0); }
  18%  { background: rgba(52,199,89,0.20); box-shadow: inset 3px 0 0 0 rgba(52,199,89,0.9); }
  100% { background: rgba(52,199,89,0.0);  box-shadow: inset 3px 0 0 0 rgba(52,199,89,0); }
}

/* ── 连接中提示 ─────────────────────────────────────── */
.sub-hint {
  font-size: 14px;
  color: rgba(255,255,255,0.34);
  text-align: center;
  padding: 44px 0 0;
  margin: 0;
}