/* 播放器 2.0 / 分享 / 文稿同步 —— 追加样式，不改动原有视觉基线 */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 波形 canvas 覆盖原来的伪随机条容器，保留点击/拖拽 seek */
.pl__track, .detail-player__track{ position:relative; overflow:hidden }
.wave-canvas{ display:block; width:100%; height:100%; }
.pl__track .wave-canvas{ position:absolute; inset:0 }
.detail-player__track .wave-canvas{ position:absolute; inset:0 }
.pl__track, .detail-player__track{ mask-image:none; -webkit-mask-image:none }

/* 播放器扩展控件 */
.pl__select{ display:inline-flex; align-items:center }
.pl__select select{
  font-family:var(--mono); font-size:var(--t-12); color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-full);
  padding:4px 10px; cursor:pointer; max-width:112px;
}
.pl__select select:hover{ border-color:var(--ink-3) }
.pl__select select:focus-visible{ outline:2px solid var(--cinnabar); outline-offset:2px }

/* 续播提示 */
.pl__resume{
  position:fixed; right:24px; bottom:88px; z-index:60;
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--cinnabar);
  box-shadow:0 8px 28px rgba(40,25,15,.16); border-radius:var(--r-md, 8px);
  padding:var(--s-3) var(--s-4); font-size:var(--t-14); color:var(--ink-2);
}
.pl__resume[hidden]{ display:none }

/* 文稿逐段同步高亮：文本始终是真文本，读屏与搜索都能读到 */
.script-line{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  font:inherit; color:inherit; padding:2px 10px; margin:0 -10px; border-radius:6px;
  cursor:pointer; transition:background var(--dur-s), color var(--dur-s);
}
.script-line:hover{ background:var(--paper-2) }
.script-line.on{ background:var(--cinnabar-tint); color:var(--cinnabar-dp); font-weight:600 }
.script-line:focus-visible{ outline:2px solid var(--cinnabar); outline-offset:2px }

/* 分享操作区 */
.share-bar{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px dashed var(--line);
}
.share-bar .share-label{ font-size:var(--t-13); color:var(--ink-4) }
.share-toast{
  display:inline-block; font-size:var(--t-12); color:var(--cinnabar-dp);
  background:var(--cinnabar-tint); border-radius:var(--r-full); padding:3px 10px;
}

/* 片段时间提示（?t= 深链） */
.seek-note{ font-size:var(--t-12); color:var(--ink-4); margin-top:6px }

/* 移动端：波形与倍速/定时不能一起被隐藏，否则只剩播放键 */
/* 搜索命中词高亮 */
mark{ background:var(--cinnabar-tint); color:var(--cinnabar-dp); padding:0 2px; border-radius:2px }

/* 播放条原有的固定宽度（封面 52 + 信息 210 + 控件 + 右侧 167）在 1100px 以下
   会把波形挤到 0，进度条直接看不见。这里让信息区可缩、波形有下限，
   太窄时把波形整行放到下面——宁可多一行，也不能没有进度条。 */
.fe-player{ gap:var(--s-4) }
.pl__info{ flex:1 1 auto; min-width:0; max-width:320px }
.pl__wave{ flex:2 1 220px; min-width:150px }
.pl__track{ min-width:90px }
@media (max-width:1180px){
  .pl__info{ max-width:230px }
  .pl__extra .pl__list-btn{ display:none }
}
@media (max-width:960px){
  .fe-player{ flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; row-gap:8px }
  .pl__info{ flex:1 1 140px; max-width:none }
  .pl__wave{ order:5; flex:1 1 100%; min-width:0 }
  .pl__extra{ margin-left:auto }
  .pl__select select{ max-width:88px; padding:3px 8px }
}
@media (max-width:760px){
  .pl__wave{ display:flex; flex:1 1 100% }
  .pl__extra .pl__list-btn{ display:none }
  #playerNext{ display:none }
  .pl__resume{ left:12px; right:12px; bottom:96px }
  .share-bar{ gap:var(--s-2) }
}
@media (max-width:560px){
  .pl__select--sleep{ display:none }
  .pl__info{ flex:1 1 100px }
}

/* ── P1-1 高能热区：进度条下方一条 10px 的热度柱 ───────────────────────── */
.detail-player__wave{ position:relative }
.detail-heat{
  position:relative; height:10px; margin-top:1px; border-radius:3px;
  /* 一条极淡的基线：没有热度时也不至于像什么都没做 */
  background:linear-gradient(var(--line-soft), var(--line-soft)) bottom/100% 1px no-repeat;
}
.detail-heat:empty{ background:none }
.heat-bar{
  position:absolute; bottom:0; width:4px; min-height:3px; border-radius:2px 2px 0 0;
  margin-left:-2px; background:var(--cinnabar); opacity:.5;
}
.heat-bar:hover{ opacity:.9 }

/* ── P1-2 章节条：横向滚动，窄屏不换行、不挤压播放器 ────────────────── */
.chapters{
  display:flex; align-items:flex-start; gap:var(--s-3);
  margin-top:var(--s-4); padding:0 0 var(--s-2);
}
.chapters[hidden]{ display:none }
.chapters__label{
  flex:0 0 auto; font-size:var(--t-12); color:var(--ink-4);
  padding-top:6px; letter-spacing:.08em;
}
.chapters__list{
  display:flex; gap:var(--s-2); overflow-x:auto; padding-bottom:2px;
  /* flex 子项默认 min-width:auto，不给 0 的话滚动区会被内容撑开，整页跟着横向溢出 */
  flex:1 1 auto; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.chapters__list::-webkit-scrollbar{ height:0; width:0; display:none }
.chapter{
  flex:0 0 auto; display:inline-flex; align-items:baseline; gap:8px;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  border-radius:var(--r-full); padding:5px 12px; cursor:pointer; max-width:260px;
  transition:border-color var(--dur-s), color var(--dur-s), background var(--dur-s);
}
.chapter:hover{ border-color:var(--cinnabar); color:var(--cinnabar-dp) }
.chapter.on{ background:var(--cinnabar-tint); border-color:var(--cinnabar); color:var(--cinnabar-dp) }
.chapter:focus-visible{ outline:2px solid var(--cinnabar); outline-offset:2px }
.chapter__t{ font-family:var(--mono); font-size:var(--t-12); opacity:.75 }
.chapter__name{
  font-size:var(--t-13); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── P1-1 时间戳评论 ─────────────────────────────────────────────────── */
[data-comment-form]{ flex-direction:column; align-items:stretch }
.comment-tools{
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
}
.comment-tools .btn{ margin-left:auto }
.comment-chip{
  border:1px solid var(--line); background:var(--white); color:var(--ink-3);
  border-radius:var(--r-full); padding:5px 12px; cursor:pointer; font-size:var(--t-13);
  transition:border-color var(--dur-s), color var(--dur-s), background var(--dur-s);
}
.comment-chip:hover{ border-color:var(--ink-3); color:var(--ink) }
.comment-chip.on{ background:var(--cinnabar-tint); border-color:var(--cinnabar); color:var(--cinnabar-dp) }
.comment-chip:focus-visible{ outline:2px solid var(--cinnabar); outline-offset:2px }
.comment-private{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--t-13); color:var(--ink-3);
  cursor:pointer; user-select:none;
}
.comment-private input{ accent-color:var(--cinnabar); width:14px; height:14px }
.comment-hint{
  margin-top:var(--s-2); font-size:var(--t-12); color:var(--cinnabar-dp);
}
.comment-hint[hidden]{ display:none }
.comment-ts{
  border:0; background:var(--paper-2); color:var(--cinnabar-dp); font-family:var(--mono);
  font-size:var(--t-12); padding:1px 7px; border-radius:var(--r-full); cursor:pointer;
}
.comment-ts:hover{ background:var(--cinnabar-tint) }
.comment-ts:focus-visible{ outline:2px solid var(--cinnabar); outline-offset:2px }
.comment-badge{
  font-size:var(--t-12); color:#fff; background:var(--cinnabar);
  border-radius:var(--r-full); padding:1px 8px; letter-spacing:.04em;
}

/* ── 打点笔记：视觉与评论区分开，避免误以为别人也能看见 ───────────────── */
.notes{
  margin-top:var(--s-5); padding:var(--s-4) var(--s-5);
  border:1px dashed var(--line); border-radius:var(--r-2); background:var(--paper-2);
}
.notes__head{
  display:flex; align-items:baseline; gap:var(--s-3); font-size:var(--t-14);
  font-weight:600; color:var(--ink-2);
}
.notes__hint{ font-weight:400; font-size:var(--t-12); color:var(--ink-4) }
.notes__list{ margin-top:var(--s-3); display:flex; flex-direction:column; gap:8px }
.note{ display:flex; align-items:baseline; gap:var(--s-3); font-size:var(--t-14); color:var(--ink-2) }
.note__text{ flex:1; min-width:0; line-height:1.8 }
.note__time{ font-size:var(--t-12); color:var(--ink-4); flex:0 0 auto }
.notes__empty{ margin-top:var(--s-3); font-size:var(--t-13); color:var(--ink-4) }

@media (max-width:760px){
  /* 竖排时 flex-basis 作用在高度上，宽度靠 align-items:stretch；
     再显式给 width:100% 兜底，否则 Chrome 会按内容的 max-content 撑成 700+，整页横向溢出 */
  .chapters{ flex-direction:column; align-items:stretch; gap:var(--s-2) }
  .chapters__label{ padding-top:0 }
  .chapters__list{ width:100% }
  .detail-heat{ height:9px }
}