/* ============================================================
   550W 媒体分发终端 · 网站迷你音乐播放器样式
   ============================================================

   配色沿用站点同一套变量（--cyan / --bg-soft / --line / --text ...），
   变量定义在 style.css 的 :root 里，所以本文件必须【在 style.css 之后】引入。

   为什么单独一个文件而不是塞进 style.css：
     style.css 已经 700+ 行，播放器是独立功能块，
     单独放以后要删/要改都干净，不会牵动别的样式。

   ------------------------------------------------------------
   【2026-10 重构一：为什么放在 #mc-player-host 里】
     以前 .mc-player 自己 position:fixed 钉在视口底部。
     现在它被放在 #mc-player-host 里，而宿主在 #mc-view 外面 ——
     这样无刷新导航（router.js）换内容时不会把播放器连同 <audio>
     一起换掉，音乐才能连续播放。

   【2026-10 重构二：为什么改成悬浮胶囊】
     原来是一条横贯整个视口宽度的黑条，压着页面、很难看。
     现在改成右下角的悬浮胶囊：
       · 不再占满整行，宽度自适应内容
       · 圆角 + 玻璃质感，像一张浮起来的小卡片
       · 进度条会自然填满"胶囊右边缘 → 视口右边缘"那段空白
         （靠 JS 把胶囊实际宽度写进 --mc-player-edge）
       · 滚页面时自动淡出，不挡视线；鼠标移上去或点一下又出来
       · 【不再】给 body 加底部留白 —— 悬浮层不占文档流
   ------------------------------------------------------------
   【改样式前必读】
     1) 这里的类名和 music.js 里 build() 创建的结构一一对应，
        改名字要同步改 JS，否则播放器会变成一堆无样式的按钮。
     2) 窄屏规则故意隐藏了进度条和音量（手机上太挤）。
     3) 收起状态的曲名靠 .mc-player__bar 上的 data-now 属性 + ::after 显示，
         JS 会持续更新它。
   ============================================================ */

:root {
  /* 播放器占的高度：由 music.js 计算后写入 */
  --mc-player-h: 52px;
  /* 胶囊右边缘到视口右侧的距离（含边距），由 JS 写入。
     进度条用它自动撑满剩余宽度，所以宽度变了不用改这里。 */
  --mc-player-edge: 420px;
}

/* ============================================================
   宿主：钉在视口右下角
   ------------------------------------------------------------
   它在 #mc-view 外面，无刷新导航不会碰它。
   空的时候不接收鼠标事件，避免一块透明区域挡住页面点击。
   ============================================================ */
#mc-player-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

/* 只有真正装了播放器才接收鼠标事件 */
#mc-player-host:not(:empty) {
  pointer-events: auto;
}

/* 滚动时自动隐藏（由 music.js 加这个类） */
#mc-player-host.is-hidden {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

/* ============================================================
   播放器本体：胶囊
   ------------------------------------------------------------
   max-width 是这里的关键：胶囊宽度上限 720px。
   不设上限的话，下面的进度条（flex:1 撑满）会把胶囊一路拉到
   接近整屏宽，又变回"一条横贯全宽的黑条"。

   为什么是 720 而不是更小：实测展开状态下各控件宽度为
     按钮 32×3 + 曲名 ~79 + 播放键 104 + 音量 106 = 542
     gap 48 + padding 28                          =  76
   合计已经 618px。留得太紧的话进度条会被挤到只剩几十像素，
   完全没法拖。720px 能给进度条留出约 160px，够用。
   ============================================================ */
.mc-player {
  position: relative;
  width: auto;
  max-width: min(720px, calc(100vw - 32px));

  border-radius: 22px;
  border: 1px solid var(--line-2);
  background: rgba(9, 18, 30, .88);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .04);

  backdrop-filter: blur(var(--glass-blur, 11px)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur, 11px)) saturate(1.2);

  color: var(--text);
  font-size: 13px;
  user-select: none;
}

/* ============================================================
   控制条：一行放全部控件
   ============================================================ */
.mc-player__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
}

/* ============================================================
   曲目信息
   ============================================================ */
.mc-player__info {
  min-width: 0;              /* 关键：让内部的 ellipsis 生效 */
  flex: 0 1 auto;
  /* 【踩过的坑】max-width 设小了，flex 收缩时会被压到只剩一个字母。
     这里给一个像样的下限，保证曲名至少能看出一两个字。 */
  min-width: 96px;
  max-width: 240px;
}
.mc-player__title {
  color: var(--text-hi);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-player__sub {
  color: var(--dim);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 【2026-10 调整】展开状态不显示副标题（歌手/提示语）。
   理由：胶囊里同时有曲名、播放键、进度、音量、模式、列表，
   两行文字会把曲名挤到只剩一个字母。
   收起状态本来就不显示 info，所以曲名靠 data-now 那行 ::after 顶上。
   副标题在展开时信息价值最低，优先砍它。 */
.mc-player:not(.is-collapsed) .mc-player__sub {
  display: none;
}
.mc-player:not(.is-collapsed) .mc-player__title {
  line-height: 52px;         /* 只有一行时垂直居中 */
  font-size: 13.5px;
}

/* ============================================================
   按钮
   ============================================================ */
.mc-player__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.mc-player__icon:hover {
  background: rgba(34, 211, 238, .10);
  border-color: rgba(34, 211, 238, .35);
  color: var(--cyan);
}
.mc-player__icon:active { transform: scale(.94); }
.mc-player__icon:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.mc-player__ctrl {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

/* 播放键稍微突出一点 */
.mc-player__play {
  width: 36px;
  height: 36px;
  font-size: 17px;
  background: rgba(34, 211, 238, .14);
  border-color: rgba(34, 211, 238, .45);
  color: var(--cyan);
}
.mc-player__play:hover {
  background: rgba(34, 211, 238, .24);
}

/* ============================================================
   进度条
   ------------------------------------------------------------
   【重要】这里用 flex:1 让它填满"胶囊内剩下的空间"，
   而不是用 calc(100vw - xx) 去量视口 —— 后者会把胶囊本身撑宽，
   结果又变成一条横贯全宽的黑条（踩过这个坑）。
   胶囊的最大宽度由 .mc-player 的 max-width 控制。
   ============================================================ */
.mc-player__seek {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 160px;          /* 可伸缩，最小 160px */
  min-width: 120px;
}
.mc-player__time {
  color: var(--dim);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 34px;
  text-align: center;
}

/* ============================================================
   滑块（进度 / 音量）
   ============================================================ */
.mc-player__range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
}
.mc-player__range:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.mc-player__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid #08101c;
  box-shadow: 0 0 8px rgba(34, 211, 238, .55);
  transition: transform .12s;
}
.mc-player__range:hover::-webkit-slider-thumb { transform: scale(1.15); }

.mc-player__range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid #08101c;
}
.mc-player__range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

/* ============================================================
   音量
   ============================================================ */
.mc-player__vol {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.mc-player__range--vol { width: 66px; flex: 0 0 auto; }

/* ============================================================
   收起状态
   ------------------------------------------------------------
   收起后只留：展开按钮 + 一行曲名（data-now）+ 列表按钮。
   曲名用 ::after 从 data-now 读，避免多塞一个 DOM 元素。
   ============================================================ */
.mc-player.is-collapsed .mc-player__info,
.mc-player.is-collapsed .mc-player__seek,
.mc-player.is-collapsed .mc-player__vol,
.mc-player.is-collapsed .mc-player__ctrl {
  display: none;
}
.mc-player.is-collapsed .mc-player__bar {
  gap: 6px;
  padding: 0 12px;
}
.mc-player.is-collapsed {
  background: rgba(9, 18, 30, .82);
}
.mc-player.is-collapsed .mc-player__bar::after {
  content: attr(data-now);
  color: var(--dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  padding-right: 4px;
}

/* ============================================================
   曲目列表
   ------------------------------------------------------------
   从胶囊上方弹出（absolute + bottom:100%），
   不撑高胶囊本身，所以不会把页面顶动。
   ============================================================ */
.mc-player__list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(360px, calc(100vw - 28px));

  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(9, 18, 30, .97);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
  backdrop-filter: blur(var(--glass-blur, 11px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 11px));

  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mc-player__list[hidden] { display: none; }

.mc-player__listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--dim);
  font-size: 12px;
  position: sticky;
  top: 0;
  background: rgba(9, 18, 30, .99);
  border-bottom: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
}

.mc-player__tracks {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.mc-player__track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.mc-player__track:hover {
  background: rgba(34, 211, 238, .08);
}
.mc-player__track.is-current {
  background: rgba(34, 211, 238, .12);
  border-left-color: var(--cyan);
}
.mc-player__track.is-current .mc-player__name { color: var(--cyan); }

.mc-player__no {
  flex: 0 0 26px;
  color: var(--dim);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mc-player__name {
  flex: 1 1 auto;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-player__artist {
  flex: 0 1 auto;
  color: var(--dim);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.mc-player__empty {
  padding: 16px 14px;
  color: var(--dim);
  font-size: 12.5px;
  list-style: none;
}

/* 自定义滚动条，和深色主题统一 */
.mc-player__list::-webkit-scrollbar { width: 8px; }
.mc-player__list::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 4px;
}
.mc-player__list::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ============================================================
   窄屏
   ------------------------------------------------------------
   手机上宽度很宝贵：藏掉进度条和音量，只留曲名 + 播放控制。
   胶囊也放宽到接近满屏，圆角收小一点。
   ============================================================ */
@media (max-width: 760px) {
  #mc-player-host {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .mc-player { border-radius: 16px; max-width: none; }
  .mc-player__bar {
    height: 50px;
    gap: 6px;
    padding: 0 8px;
  }
  .mc-player__info { flex: 1 1 auto; max-width: none; }
  .mc-player__seek { display: none; }        /* 手机上进度条太挤 */
  .mc-player__vol { display: none; }         /* 音量交给手机系统键 */
  .mc-player__icon { width: 30px; height: 30px; font-size: 14px; }
  .mc-player__play { width: 34px; height: 34px; font-size: 16px; }
  .mc-player.is-collapsed .mc-player__bar::after { max-width: 46vw; }
  .mc-player__list {
    left: 0;
    right: 0;
    width: auto;
    max-height: 40vh;
  }
}

/* 极窄 */
@media (max-width: 420px) {
  .mc-player__artist { display: none; }
  #mcMode { display: none; }
}

/* ============================================================
   尊重"减少动画"偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #mc-player-host,
  .mc-player__icon,
  .mc-player__track,
  .mc-player__range::-webkit-slider-thumb {
    transition: none;
  }
}