/* ============================================================================
   发视频的「背景音乐」选择器 —— **两端共用的一份样式**（T54 第二波①）
   ----------------------------------------------------------------------------
   跟 loc.css / share.css 同一个理由：这块是「两端长得一样、行为也一样」的组件
   （templates/partials/_bgm_picker.html + static/js/bgm-picker.js + 本文件），
   写成两份必然慢慢分家。两端的 base.html 都 <link> 它，
   所以 scripts/audit_css.py 的 SHARED_CSS 里登记了本文件。
   只用 :root 里的公共令牌，不新造、不写死颜色（同 audit_mobile_tokens 的口径）。
   ============================================================================ */

.bgm-field {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r);
}

/* ---- 收起时那一行：一颗钮，选过之后换成「曲名 + ×」 ---- */
.bgm-bar { display: flex; align-items: center; gap: 8px; }
.bgm-open {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.bgm-open .ic { width: 16px; height: 16px; color: var(--brand); }
.bgm-open-n { font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; }

/* 选中后的那枚名片（曲名会一路显示到帖子上，这里先看到的就是将来看到的） */
.bgm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; min-width: 0;
  height: 34px; padding: 0 6px 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: 13px;
}
.bgm-chip[hidden] { display: none; }
.bgm-chip .ic { width: 14px; height: 14px; flex: 0 0 auto; color: var(--brand); }
.bgm-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-chip-x {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.bgm-chip-x .ic { width: 13px; height: 13px; }

/* ---- 那句实话（AI 的理由 / 选不上的曲子 / 读不到的包） ---- */
.bgm-note {
  margin: 8px 0 0; padding: 8px 10px;
  background: var(--surface); border-radius: var(--r);
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.bgm-note[hidden] { display: none; }
.bgm-note.is-bad { color: var(--coral); }
.bgm-note b { font-weight: 600; color: var(--ink); }

/* ---- 展开的抽屉：details 自己做开合 ⇒ 没 JS 也能挑 ---- */
.bgm-panel { margin-top: 8px; }
.bgm-panel > summary { list-style: none; cursor: pointer; }
.bgm-panel > summary::-webkit-details-marker { display: none; }
.bgm-sum {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: 12px;
}
.bgm-sum::after {
  content: '▾'; margin-left: 2px; font-size: 10px; color: var(--ink-3);
}
.bgm-panel[open] .bgm-sum::after { content: '▴'; }

/* 分类胶囊（横滑一行，窄屏不折行 —— 与信息流那排胶囊同一个手感） */
.bgm-cats {
  display: flex; gap: 6px; margin-top: 10px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bgm-cats::-webkit-scrollbar { display: none; }
.bgm-cat {
  flex: 0 0 auto; height: 28px; padding: 0 11px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: 12px; cursor: pointer;
}
.bgm-cat.is-on { background: var(--brand); color: #fff; font-weight: 600; }

/* AI 推荐那颗：JS 绑上了才显形（没绑上留一颗死钮比没有更坏） */
.bgm-ai {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; height: 32px; padding: 0 12px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--brand);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.bgm-ai[hidden] { display: none; }
.bgm-ai .ic { width: 14px; height: 14px; }
.bgm-ai:disabled { color: var(--ink-4); cursor: default; }

/* ---- 曲目列表 ---- */
.bgm-list {
  margin-top: 10px; max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
}
.bgm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
}
.bgm-row[hidden] { display: none; }
.bgm-pick {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
}
.bgm-pick input[type=radio] { flex: 0 0 auto; margin-top: 3px; }
.bgm-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bgm-tx b { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.bgm-tx i {
  font-style: normal; font-size: 12px; line-height: 1.45; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bgm-tx em { font-style: normal; font-size: 11px; line-height: 1.4; color: var(--ink-4); }
.bgm-sec { flex: 0 0 auto; align-self: center; font-size: 11px; color: var(--ink-3); }
.bgm-aud {
  flex: 0 0 auto; height: 26px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; cursor: pointer;
}
.bgm-aud[hidden] { display: none; }
.bgm-aud.is-on { background: var(--brand); color: #fff; }

/* ---- 音量那一行 + 试听条 ---- */
.bgm-vol {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 12px; color: var(--ink-2);
}
.bgm-vol input[type=range] { flex: 1 1 auto; min-width: 0; }
.bgm-vol b { flex: 0 0 auto; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.bgm-hint { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-4); }
/* 外部授权曲目的署名行（CC BY 4.0 的义务）：由服务端 `bgm.credits` 直出，
   不靠 JS —— 署名漏了就是违约，不能做成「脚本跑了才看得见」。 */
.bgm-att {
  display: flex; align-items: flex-start; gap: 5px;
  margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-4);
}
.bgm-att .ic { flex: 0 0 auto; margin-top: 2px; }
.bgm-preview { display: block; width: 100%; margin-top: 8px; height: 36px; }
.bgm-preview[hidden] { display: none; }

/* ==========================================================================
   播放侧（同一份文件的下半场）：帖子上的那行「背景音乐 · 曲名」+ 配乐条
   --------------------------------------------------------------------------
   · `.bgm-tag` 是**内容的一部分**（发布者选的那首曲子，观众得知道），
     两端详情页与沉浸流都用它，所以样式也只这一份。
   · 沉浸流那一条压在视频画面上（暗底），白字在这里是故意的 ——
     与 `.mv-meta` / `.mv-title` 同一套写法，不是漏用令牌。
   · `.mv-bgm` 是沉浸流那个**整屏共用**的 `<audio>`：从不显示、只负责出声
     （为什么只有一个，见 templates/m/circle_video.html 里那段注释）。
   ========================================================================== */
.bgm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-2);
}
.bgm-tag .ic { width: 13px; height: 13px; flex: 0 0 auto; }
.bgm-tag b { font-weight: 600; }
.bgm-tag i { font-style: normal; font-size: 11px; color: var(--ink-4); }
.bgm-tag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 沉浸流（暗底白字）：这一行跟在正文后面，字号与 `.mv-meta` 齐平 */
.mv-info .bgm-tag { color: rgba(255, 255, 255, .82); }
.mv-info .bgm-tag i { color: rgba(255, 255, 255, .58); }

/* 详情页那一条：小牌子 + 原生播放器（禁用 JS 也点得响，见 _bgm_play.html） */
.pcp-bgm { margin: 8px 0 0; }
.pcp-bgm .bgm-tag { margin: 0; }
.bgm-play { display: block; width: 100%; height: 36px; margin-top: 6px; }
.bgm-play[hidden] { display: none; }
.bgm-play-tip { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-4); }

/* 沉浸流那个共用播放器：只出声，不上屏 */
.mv-bgm { display: none; }