/* ============================================================
   Bonjour · 统一音频播放器
   暖纸 + 法国国旗深蓝 + 老唱片黄铜
   ------------------------------------------------------------
   设计: 法语教科书的暖纸底 + 法国国旗深蓝 + 老唱片的黄铜
   签名元素 = 播放键外围一圈黄铜进度环 (conic-gradient + --ap-ring)
   时间码用等宽 + tabular-nums, 防止数字跳动

   用法: task.html / feed.html / admin.html 共用
   配套 js/audio-player.js
   ============================================================ */
@property --ap-ring {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* 播放器配色令牌：三个播放器根节点共用。
   听力圆钮(.custom-listening-audio)和评语音泡(.audio-bubble)都不是 .aplayer,
   令牌必须挂在共同作用域 —— 否则 var(--ap-blue) 取不到值,
   background/color 会整条失效(掉回 initial), 圆钮就变成灰白。 */
.aplayer, .custom-listening-audio, .audio-bubble {
  --ap-paper: #FFFDF7;
  --ap-sand: #EDE4D1;
  --ap-brass: #E0A23C;
  --ap-ring-idle: #E3D2AC;
  --ap-blue: #16276B;
  --ap-dim: #7A7263;
}

/* 深色模式（2026-11-09） */
[data-theme="dark"] .aplayer,
[data-theme="dark"] .custom-listening-audio,
[data-theme="dark"] .audio-bubble {
  --ap-paper: #1b2436;
  --ap-sand: #2c3a52;
  --ap-brass: #e0a23c;
  --ap-ring-idle: #334155;
  --ap-blue: #7dd3fc;
  --ap-dim: #8b95a7;
}
[data-theme="dark"] .aplayer-chip { background: rgba(125, 211, 252, .12); border-color: rgba(125, 211, 252, .32); }
[data-theme="dark"] .aplayer-chip.off { background: #263449; }
[data-theme="dark"] .ap-exhausted .aplayer-disc::after { background: #475569; }
[data-theme="dark"] .aplayer-play:disabled { color: #4b5563; }
/* hover 态原本是浅奶油 #FFE9C2 —— 暗色下播放键底色是浅蓝 #7dd3fc，
   奶油色压上去看不清；改成更深的墨色，靠「变深」表达 hover */
[data-theme="dark"] .aplayer-play:hover:not(:disabled) { color: #0f172a; }
.aplayer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--ap-paper);
  border: 1px solid var(--ap-sand);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(224, 162, 60, 0.22), 0 2px 10px rgba(31, 41, 55, 0.05);
  margin: 0.45rem 0;
  max-width: 560px;
}
.media-block > .aplayer { margin-top: 0; }
/* --- 黄铜进度环 (签名元素) --- */
.aplayer-disc {
  --ap-ring: 0;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--ap-brass) calc(var(--ap-ring) * 360deg), var(--ap-ring-idle) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.18s ease;
}
/* 黄铜环上的一点点光泽（只落在环带上，蓝色内核在其后绘制） */
.aplayer-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}
.aplayer-disc::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--ap-blue);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.38);
}
.ap-is-playing .aplayer-disc { box-shadow: 0 0 0 3px rgba(224, 162, 60, 0.18); }
.aplayer-play {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ap-paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, color 0.15s ease;
}
.aplayer-play svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.aplayer-play .ic-pause, .aplayer-play .ic-lock { display: none; }
.ap-is-playing .aplayer-play .ic-play { display: none; }
.ap-is-playing .aplayer-play .ic-pause { display: block; }
.ap-exhausted .aplayer-disc { background: var(--ap-sand); }
.ap-exhausted .aplayer-disc::after { background: #B4AC9B; box-shadow: none; }
.ap-exhausted .aplayer-play .ic-play { display: none; }
.ap-exhausted .aplayer-play .ic-lock { display: block; }
.aplayer-play:hover:not(:disabled) { color: #FFE9C2; }
.aplayer-play:active:not(:disabled) { transform: scale(0.93); }
.aplayer-play:disabled { cursor: default; color: #D5CEC0; }
.aplayer-play:focus-visible { outline: 2px solid var(--ap-blue); outline-offset: 3px; }
/* --- 主体 --- */
.aplayer-body { flex: 1 1 auto; min-width: 0; }
.aplayer-name {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ap-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.22rem;
}
.aplayer-line { display: flex; align-items: center; gap: 0.5rem; }
.aplayer-range {
  --ap-fill: 0;
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 46px;
  height: 6px;
  margin: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ap-brass) calc(var(--ap-fill) * 100%), var(--ap-sand) calc(var(--ap-fill) * 100%));
  cursor: pointer;
}
.aplayer-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ap-brass);
  border: 2px solid var(--ap-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.aplayer-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ap-brass);
  border: 2px solid var(--ap-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.aplayer-t {
  font-family: ui-monospace, 'SF Mono', 'Consolas', 'Menlo', monospace;
  font-size: 0.72rem;
  color: var(--ap-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.aplayer-chip {
  display: inline-block;
  margin-top: 0.32rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  /* 数字等宽: 「下载中 10%」和「下载中 100%」一样宽 → 改文案时整颗 chip 不动 */
  font-variant-numeric: tabular-nums;
  background: #EEF1FB;
  color: var(--ap-blue);
  border: 1px solid #D6DDF6;
}
.aplayer-chip.off { background: #F4F1E9; color: var(--ap-dim); border-color: var(--ap-sand); }
.aplayer-note {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.7rem;
  color: var(--ap-dim);
  line-height: 1.5;
}
/* --- 紧凑变体（老师后台录音列表，30px 单行横排） --- */
.aplayer-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.aplayer-compact .aplayer-disc { width: 26px; height: 26px; }
.aplayer-compact .aplayer-disc::after { inset: 1.5px; }
.aplayer-compact .aplayer-play svg { width: 10px; height: 10px; }
.aplayer-compact .aplayer-range { height: 4px; min-width: 34px; }
.aplayer-compact .aplayer-range::-webkit-slider-thumb { width: 10px; height: 10px; }
.aplayer-compact .aplayer-range::-moz-range-thumb { width: 10px; height: 10px; }
.aplayer-compact .aplayer-t { font-size: 0.66rem; }
/* --- 听力练习行内圆钮 --- */
.custom-listening-audio {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.25rem 0.55rem 0.25rem 0;
  vertical-align: middle;
}
.custom-listening-audio .aplayer-disc { width: 38px; height: 38px; }
.custom-listening-audio .aplayer-disc::after { inset: 1.5px; }
.custom-listening-audio .aplayer-play svg { width: 14px; height: 14px; }
.custom-listening-audio .aplayer-note { margin-top: 0; }
/* --- 评语里的示范录音小气泡 --- */
.audio-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
  margin: 0 0.35rem;
}
.audio-bubble .aplayer-disc { width: 28px; height: 28px; }
.audio-bubble .aplayer-disc::after { inset: 1.5px; }
.audio-bubble .aplayer-play svg { width: 11px; height: 11px; }
.audio-bubble .aplayer-t { font-size: 0.66rem; }
@media (max-width: 420px) {
  .aplayer { gap: 0.55rem; padding: 0.5rem 0.6rem; }
  .aplayer-disc { width: 40px; height: 40px; flex-basis: 40px; }
  .aplayer-chip { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .aplayer-disc, .aplayer-play { transition: none; }
}

/* =====================================================
   浮窗播放器 (2026-11-12) —— 只给老师后台 admin.html 用
   ---------------------------------------------------------------
   · 贴在【右侧垂直居中】(Lucienne 选的: 右下角太难看到)
   · z-index 10050 → 高于批改 modal(9999) 和 PDF 灯箱(10000),
     所以弹窗里打开的批改文件也能在浮窗里暂停
   · 配色全部走站点变量 (--surface/--text/--muted/--border/--accent)
     → 深色模式自动适配, 不写死颜色
   ===================================================== */
.ap-float {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10050;
  width: 260px;
  max-width: calc(100vw - 32px);
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem 0.5rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
  font-size: 0.82rem;
  line-height: 1.35;
}
.ap-float.ap-float-on { display: flex; }
/* 2026-11-13 Lucienne: 浮窗可拖动 —— 拖动区是标题栏(不含 ✕ 按钮)
   cursor: grab / grabbing + 禁选文字, 免得拖动时把文件名选中 */
.ap-float-head {
  display: flex; align-items: center; gap: 0.4rem;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.ap-float.ap-float-dragging { cursor: grabbing; box-shadow: 0 16px 44px rgba(15, 23, 42, 0.34); }
.ap-float.ap-float-dragging .ap-float-head { cursor: grabbing; }
.ap-float-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-float-sub {
  font-size: 0.72rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-float-x {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 0.9rem; line-height: 1;
  padding: 0.1rem 0.25rem; border-radius: 6px;
}
.ap-float-x:hover { background: var(--surface-4); color: var(--text); }
.ap-float-ctrls { display: flex; align-items: center; gap: 0.25rem; }
.ap-float-btn {
  border: none; background: var(--surface-3); color: var(--text);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.72rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.ap-float-btn:hover { background: var(--surface-4); }
.ap-float-btn-main {
  background: var(--accent); color: var(--on-accent, #fff);
  width: 30px; height: 30px; font-size: 0.8rem;
}
.ap-float-time {
  margin-left: auto; font-size: 0.72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ap-float-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.ap-float-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 10051;
  max-width: 300px; padding: 0.5rem 0.7rem; border-radius: 8px;
  background: var(--danger, #dc2626); color: #fff; font-size: 0.8rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.ap-float-toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) {
  .ap-float {
    right: 8px; left: 8px; width: auto;
    top: auto; bottom: 8px; transform: none;
  }
}