/* ==========================================================================
   EndlessLoop · 音乐播放器样式（玻璃迷你卡片 + 可拖动展开面板）
   --------------------------------------------------------------------------
   1. 迷你卡片（封面唱片 / 歌名歌手 / 进度条 / 控制键）
   2. 展开面板
   3. APlayer 外观覆写
   4. 深色模式
   5. 移动端 / 降级

   依赖 custom.css 里的设计令牌（--el-*）

   ⚠️ 第 3 节全部用 #el-music-player 这个 ID 当前缀，不是随手写的 ——
      APlayer 的样式表是 music.js 在运行时 <link> 进 <head> 的，
      也就是说它排在 music.css **后面**。
      而 APlayer 自己的选择器是 .aplayer .aplayer-lrc p 这种 (0,2,1) 级别的，
      和 .el-music-player .aplayer-lrc p 完全打平 ——
      平手时后加载的赢，所以用类名前缀写的覆写会**整片失效**。
      换成 ID 前缀（1,x,x）就能无条件压过它所有的类选择器。

   ⚠️ 还有一条铁律：绝对不要改 .aplayer-lrc p 的 height / line-height。
      APlayer 的歌词滚动是 JS 写死的 translateY(16 * -index)，
      每行固定按 16px 步进；而 p 上的 height/line-height:16px 带 !important。
      改了行高，步进和实际行高就对不上，歌词会越滚越偏。
      字号可以随便改（<=16px 就行），行高不能碰。
   ========================================================================== */

/* ==========================================================================
   1. 迷你卡片 —— 底部居中横向控制栏
   --------------------------------------------------------------------------
   位置说明：Live2D 看板娘已下架，控制栏固定在整个屏幕底部正中央，
   不再悬浮在文章内容区域、也不占右下角。
   用 left:0 / right:0 / margin:0 auto 居中（不碰 transform，保留 hover 上浮），
   右下角是自建的返回顶部 .el-to-top，控制栏居中也天然不会和它重叠。
   ========================================================================== */

.el-music-mini {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 28px;
  margin: 0 auto;
  z-index: 90;

  display: flex;
  align-items: center;
  gap: 14px;
  width: 460px;
  /* 居中时右侧留足返回顶部按钮（right:24px + 46px 宽）的空间，避免靠拢 */
  max-width: calc(100vw - 150px);
  height: 68px;
  padding: 10px 18px 10px 9px;
  box-sizing: border-box;

  border: 1px solid var(--el-glass-border);
  border-radius: 20px;
  background: var(--el-glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  /* 阴影 + 上沿内发光（液态玻璃的"厚度"） */
  box-shadow: var(--el-shadow-3), inset 0 1px 0 var(--el-liquid-inset);

  user-select: none;
  -webkit-user-select: none;

  transition: transform 0.4s var(--el-ease), box-shadow 0.4s var(--el-ease),
    border-color 0.4s var(--el-ease), opacity 0.35s var(--el-ease);
}

/* 镜面高光（左上到右下的液态玻璃 sheen） */
.el-music-mini::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--el-liquid-sheen);
  opacity: 0.55;
  pointer-events: none;
}

/* 顶部一条细渐变描边，二次元科技感的点睛之笔 */
.el-music-mini::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--el-sakura-deep), transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* 内容压在镜面高光之上 */
.el-music-mini > * {
  position: relative;
  z-index: 1;
}

.el-music-mini:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--el-shadow-3), var(--el-shadow-glow),
    inset 0 1px 0 var(--el-liquid-edge);
}

/* 全局拖动态（展开面板拖动时）：光标变抓紧 + 禁用文本选中 */
body.el-music-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- 封面唱片 ---- */
.el-music-mini__disc {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* 渐变描边环：用 conic 渐变做底，中间被 inner 盖住只露出 3px 边，
     和侧栏头像那圈光环同一套四色（紫 → 蓝紫 → 蓝 → 青）。 */
  background: conic-gradient(
    from 0deg,
    hsl(var(--accent-hue), 100%, 81%),
    hsl(calc(var(--accent-hue) - 37), 92%, 76%),
    hsl(calc(var(--accent-hue) - 74), 100%, 72%),
    hsl(calc(var(--accent-hue) - 110), 77%, 64%),
    hsl(var(--accent-hue), 100%, 81%)
  );
  box-shadow: 0 4px 14px hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.4);
  /* 播放时缓缓自转，像转动的唱片 */
  animation: el-disc-spin 8s linear infinite;
  animation-play-state: paused;
}

.el-music-mini.is-playing .el-music-mini__disc {
  animation-play-state: running;
}

/* 播放态：一圈淡紫柔光，让「正在播放」一眼可辨 */
.el-music-mini.is-playing {
  box-shadow: var(--el-shadow-3), 0 0 36px hsla(276, 60%, 80%, 0.38),
    inset 0 1px 0 var(--el-liquid-inset);
}

/* 加载中快速转，暗示"正在准备" */
.el-music-mini.is-loading .el-music-mini__disc {
  animation-play-state: running;
  animation-duration: 1.6s;
}

.el-music-mini__disc-inner {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--el-grad-main);
}

.el-music-mini__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s var(--el-ease);
}

.el-music-mini__disc.has-cover .el-music-mini__cover {
  opacity: 1;
}

.el-music-mini__note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  transition: opacity 0.35s var(--el-ease);
}

.el-music-mini__disc.has-cover .el-music-mini__note {
  opacity: 0;
}

/* 中心轴孔 */
.el-music-mini__cap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--el-glass-bg-strong);
  box-shadow: inset 0 1px 0 var(--el-liquid-inset), 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* ---- 信息区（歌名 / 均衡器 / 歌手 / 进度） ---- */
.el-music-mini__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.el-music-mini__title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.el-music-mini__title-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--el-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-music-mini__artist {
  font-size: 11.5px;
  color: var(--el-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放态均衡器：三根跳动的小柱 */
.el-music-mini__eq {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 6px;
  opacity: 0.55;
  transition: opacity 0.3s var(--el-ease);
}

.el-music-mini__eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--el-grad-main);
  transform-origin: bottom;
  transform: scaleY(0.3);
  animation: el-eq-bounce 1s ease-in-out infinite;
  animation-play-state: paused;
}

.el-music-mini__eq i:nth-child(1) {
  animation-delay: 0s;
}

.el-music-mini__eq i:nth-child(2) {
  animation-delay: 0.2s;
}

.el-music-mini__eq i:nth-child(3) {
  animation-delay: 0.4s;
}

.el-music-mini.is-playing .el-music-mini__eq {
  opacity: 1;
}

.el-music-mini.is-playing .el-music-mini__eq i {
  animation-play-state: running;
}

/* 进度条 + 时间 */
.el-music-mini__bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.el-music-mini__bar {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: var(--el-hairline);
  overflow: hidden;
}

.el-music-mini__bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--el-grad-main);
  box-shadow: 0 0 8px hsla(var(--accent-hue), 100%, 81%, 0.6);
}

.el-music-mini__time {
  flex: 0 0 auto;
  font-size: 10px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--el-text-mute);
}

/* ---- 控制键 ---- */
.el-music-mini__controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.el-music-mini__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--el-violet);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s var(--el-ease-back), background 0.25s var(--el-ease),
    color 0.25s var(--el-ease), box-shadow 0.25s var(--el-ease);
}

.el-music-mini__btn:hover {
  background: hsla(var(--accent-hue), 100%, 81%, 0.16);
  color: var(--el-sakura-deep);
  transform: scale(1.12);
}

.el-music-mini__btn:focus-visible {
  outline: 2px solid hsl(var(--accent-hue), 72%, 46%);
  outline-offset: 1px;
}

/* 播放 / 暂停主键 */
.el-music-mini__play {
  width: 34px;
  height: 34px;
  background: var(--el-grad-main);
  color: #fff;
  box-shadow: 0 6px 16px hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.4);
}

.el-music-mini__play:hover {
  background: var(--el-grad-main);
  color: #fff;
  box-shadow: 0 8px 22px hsla(var(--accent-hue), 100%, 81%, 0.5);
}

.el-music-mini__ico {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 两个图标都渲染，按播放态二选一（避免 JS 去改 innerHTML） */
.el-music-mini__ico--pause {
  display: none;
}

.el-music-mini.is-playing .el-music-mini__ico--play {
  display: none;
}

.el-music-mini.is-playing .el-music-mini__ico--pause {
  display: flex;
}

/* 展开键：比其它键更轻，暗示"次要动作" */
.el-music-mini__expand {
  width: 22px;
  height: 22px;
  margin-left: 2px;
  color: var(--el-text-mute);
}

.el-music-mini__expand:hover {
  color: var(--el-sakura-deep);
}

/* 上一首 / 下一首：横向控制栏够宽，桌面端常驻显示 */
.el-music-mini__prev,
.el-music-mini__next {
  display: flex;
}

/* 加载中：播放键呼吸提示 */
.el-music-mini.is-loading .el-music-mini__play {
  animation: el-pulse-glow 1.2s ease-out infinite;
}

/* 上一首 / 下一首在播放器没就绪前是无效的，压暗暗示不可用 */
.el-music-mini:not(.is-ready) .el-music-mini__prev,
.el-music-mini:not(.is-ready) .el-music-mini__next {
  opacity: 0.4;
}

@keyframes el-disc-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes el-eq-bounce {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

/* ==========================================================================
   2. 展开面板
   ========================================================================== */

.el-music-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 110px; /* 控制栏顶约 96px，这里留 14px 间距再起面板 */
  margin: 0 auto;
  z-index: 91;

  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 140px);
  overflow: hidden;

  border: 1px solid var(--el-glass-border);
  border-radius: var(--el-radius-lg);
  background: var(--el-glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--el-shadow-3);

  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 0.34s var(--el-ease), transform 0.34s var(--el-ease),
    visibility 0s linear 0.34s;
}

body.el-music-open .el-music-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.34s var(--el-ease), transform 0.34s var(--el-ease),
    visibility 0s;
}

/* 标题栏是拖动把手 */
.el-music-panel__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--el-hairline);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body.el-music-dragging .el-music-panel__head {
  cursor: grabbing;
}

body.el-music-dragging .el-music-panel__close {
  cursor: pointer;
}

/* 把手上的小横条：hover 时浮现，暗示这里能拖 */
.el-music-panel__head::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  width: 26px;
  height: 3px;
  margin-left: -13px;
  border-radius: 999px;
  background: var(--el-hairline);
  opacity: 0;
  transition: opacity 0.3s var(--el-ease);
}

.el-music-panel:hover .el-music-panel__head::before {
  opacity: 1;
}

.el-music-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: var(--el-grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 标题前的弯月，月光电台的点睛之笔 */
.el-music-panel__title::before {
  content: '☾';
  font-size: 15px;
  -webkit-text-fill-color: var(--el-violet);
}

.el-music-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--el-text-mute);
  cursor: pointer;
  transition: transform 0.3s var(--el-ease-back), background 0.3s var(--el-ease),
    color 0.3s var(--el-ease);
}

.el-music-panel__close:hover {
  transform: rotate(90deg);
  background: hsla(var(--accent-hue), 100%, 81%, 0.18);
  color: var(--el-sakura-deep);
}

.el-music-panel__hint {
  padding: 16px 16px 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--el-text-mute);
}

.el-music-panel__hint.is-error {
  /* 语义色，固定红：不跟 --accent-hue 走，原因见 custom.css 里 --el-danger 的注释 */
  color: var(--el-danger);
}

/* 面板出现时把播放器内容淡入 */
.el-music-player {
  padding: 8px;
}

body.el-music-open .el-music-player {
  animation: el-fade-up 0.5s 0.06s var(--el-ease) both;
}

/* ==========================================================================
   3. APlayer 外观覆写（全部用 #el-music-player 前缀压特异度）
   ========================================================================== */

/* ⚠️ 这里必须是 `#el-music-player.aplayer`（容器自己带 aplayer 类），
   而不是 `#el-music-player .aplayer`（容器里的 aplayer 子元素）——
   APlayer 初始化时是 `this.container.classList.add("aplayer")`，
   把 aplayer 类直接加到了我们传入的容器 #el-music-player 身上，
   里面并没有再包一层 .aplayer。写成后代选择器会匹配不到，
   .aplayer 的 background:#fff 就一直压不住（浅色下白配白看不出来，
   暗夜模式下一进就露馅）。 */
#el-music-player.aplayer {
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: var(--el-radius-md);
  font-family: inherit;
  color: var(--el-text);
}

#el-music-player .aplayer-body {
  padding: 6px;
}

/* 信息区与歌单之间的分隔线：APlayer 用 .aplayer-withlist .aplayer-info
   写死 border-bottom:1px solid #e9e9e9，暗夜模式下是白线，换成随亮暗换色的 hairline。 */
#el-music-player .aplayer-info {
  border-bottom: 1px solid var(--el-hairline);
}

/* 封面 */
#el-music-player .aplayer-pic {
  border-radius: var(--el-radius-sm);
  box-shadow: var(--el-shadow-1);
}

#el-music-player .aplayer-pic:hover {
  transform: scale(1.04);
}

/* 曲名 / 艺术家 —— APlayer 原本是 .aplayer .aplayer-info .aplayer-music
   .aplayer-title 这种 (0,3,0) 的选择器，只有 ID 前缀压得住。 */
#el-music-player .aplayer-title {
  font-weight: 700;
  color: var(--el-text);
}

#el-music-player .aplayer-author {
  color: var(--el-text-mute);
}

/* 进度条 */
#el-music-player .aplayer-bar-wrap {
  padding: 3px 0;
}

#el-music-player .aplayer-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--el-hairline);
}

#el-music-player .aplayer-loaded {
  height: 4px;
  border-radius: 999px;
  background: hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.35);
}

#el-music-player .aplayer-played {
  height: 4px;
  border-radius: 999px;
  background: var(--el-grad-main) !important;
}

#el-music-player .aplayer-thumb {
  width: 11px;
  height: 11px;
  margin-top: -3.5px;
  box-shadow: 0 0 0 3px hsla(var(--accent-hue), 100%, 81%, 0.25);
  background: #fff !important;
}

/* 音量条 */
#el-music-player .aplayer-volume-bar-wrap {
  height: 4px;
  border-radius: 999px;
}

#el-music-player .aplayer-volume-bar {
  border-radius: 999px;
}

#el-music-player .aplayer-volume {
  border-radius: 999px;
  background: var(--el-grad-main) !important;
}

/* 控制图标 */
#el-music-player .aplayer-icon {
  color: var(--el-violet);
  transition: transform 0.3s var(--el-ease-back), color 0.3s var(--el-ease);
}

#el-music-player .aplayer-icon:hover {
  transform: scale(1.15);
  color: var(--el-sakura-deep);
}

#el-music-player .aplayer-time {
  color: var(--el-text-mute);
}

/* 播放列表 */
#el-music-player .aplayer-list {
  max-height: 200px;
  /* APlayer 默认 border:1px solid #eee（浅灰），暗夜模式下会显成白边。
     全量换成 --el-hairline（随亮暗自动换色）；border-bottom 维持 APlayer 的 none。 */
  border: 1px solid var(--el-hairline);
  border-bottom: none;
}

#el-music-player .aplayer-list ol {
  max-height: 200px;
}

/* 列表滚动条：APlayer 写死 #eee / #ccc 浅灰，同样换成主题渐变 */
#el-music-player .aplayer-list ol::-webkit-scrollbar-thumb {
  background: var(--el-grad-main);
  border-radius: 3px;
}

#el-music-player .aplayer-list ol::-webkit-scrollbar-thumb:hover {
  background: var(--el-grad-main);
}

#el-music-player .aplayer-list li {
  height: 34px;
  line-height: 34px;
  padding: 0 12px;
  /* APlayer 给每行写死 border-top:1px solid #e9e9e9（浅灰分隔线），
     暗夜模式下是一条条白线，这里换成随亮暗换色的 --el-hairline。 */
  border-top: 1px solid var(--el-hairline);
  border-radius: var(--el-radius-sm);
  background: transparent;
  color: var(--el-text-soft);
  transition: background 0.25s var(--el-ease), color 0.25s var(--el-ease),
    transform 0.25s var(--el-ease);
}

/* 首行不画分隔线（APlayer 的 :first-child 特异性低于这里的 ID 前缀，需显式补回） */
#el-music-player .aplayer-list li:first-child {
  border-top: none;
}

/* 错误提示气泡：APlayer 写死 #f4f4f5 浅灰底 + #909399 灰字，换成玻璃底随主题走 */
#el-music-player .aplayer-notice {
  background-color: var(--el-glass-bg-strong);
  color: var(--el-text-soft);
  border: 1px solid var(--el-glass-border);
}

#el-music-player .aplayer-list li:hover {
  background: hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.12);
  color: var(--el-text);
  transform: translateX(3px);
}

#el-music-player .aplayer-list-light,
#el-music-player .aplayer-list li.aplayer-list-light:hover {
  border-radius: var(--el-radius-sm);
  background: linear-gradient(120deg, hsla(var(--accent-hue), 100%, 81%, 0.24), hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.2));
  color: var(--el-text);
}

#el-music-player .aplayer-list-index {
  color: var(--el-text-mute);
}

#el-music-player .aplayer-list-light .aplayer-list-index {
  color: var(--el-sakura-deep);
  font-weight: 700;
}

#el-music-player .aplayer-list-cur {
  background: var(--el-sakura) !important;
}

#el-music-player .aplayer-list-author {
  color: var(--el-text-mute);
}

/* -------------------------------------------------------------------------
   歌词区
   ------------------------------------------------------------------------- */

/* 默认高度只有 30px（约两行），提到 68px 能看见四行出头，
   滚动时上下文更清楚。容器高度不影响 16px 的逐行步进。 */
#el-music-player .aplayer-lrc {
  height: 68px;
  margin: 2px 0 6px;
  text-align: center;
}

/* APlayer 自带的两条渐隐遮罩是**写死的白色**
   （before: 顶部 10%，after: 底部 33%）。
   深色模式下白雾会糊在玻璃面板上非常突兀，所以这里换成面板自身的底色，
   视觉上就是歌词从面板背景里淡入淡出。 */
#el-music-player .aplayer-lrc::before {
  top: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0));
}

#el-music-player .aplayer-lrc::after {
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.82));
}

/* white-space: nowrap 是这里最要紧的一条。
   APlayer 给 .aplayer-lrc-current 设了 height:auto，
   长歌词一旦折行，那一行就变成 32px 高，而 JS 仍然按 16px 步进 ——
   结果是当前行之后的所有歌词整体错位。禁止折行才能保证对得上。 */
#el-music-player .aplayer-lrc p {
  font-size: 13px;
  color: var(--el-text-soft);
  text-shadow: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#el-music-player .aplayer-lrc p.aplayer-lrc-current {
  font-size: 14px;
  color: var(--el-sakura-deep);
  font-weight: 700;
  text-shadow: 0 0 14px hsla(var(--accent-hue), 100%, 81%, 0.55);
}

/* ==========================================================================
   4. 深色模式
   ========================================================================== */

[data-theme='dark'] .el-music-mini {
  border-color: var(--el-glass-border);
}

[data-theme='dark'] #el-music-player .aplayer-thumb {
  background: hsl(calc(var(--accent-hue) - 37), 100%, 92%) !important;
}

[data-theme='dark'] #el-music-player .aplayer-list li:hover {
  background: hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.2);
}

[data-theme='dark'] .el-music-panel__hint.is-error {
  color: var(--el-danger-dark);
}

/* 深色下面板底色是 rgba(26,28,48,.82)，渐隐遮罩跟着走 */
[data-theme='dark'] #el-music-player .aplayer-lrc::before {
  background: linear-gradient(180deg, rgba(26, 28, 48, 0.9), rgba(26, 28, 48, 0));
}

[data-theme='dark'] #el-music-player .aplayer-lrc::after {
  background: linear-gradient(180deg, rgba(26, 28, 48, 0), rgba(26, 28, 48, 0.9));
}

[data-theme='dark'] #el-music-player .aplayer-lrc p.aplayer-lrc-current {
  color: hsl(var(--accent-hue), 100%, 86%);
  text-shadow: 0 0 16px hsla(var(--accent-hue), 100%, 81%, 0.45);
}

/* ==========================================================================
   5. 移动端 / 降级
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* 移动端：横向控制栏自动缩窄、降低高度，仍居中贴底 */
  .el-music-mini {
    bottom: 14px;
    width: calc(100% - 28px);
    max-width: 460px;
    height: 56px;
    gap: 10px;
    padding: 7px 14px 7px 7px;
    border-radius: 18px;
  }

  .el-music-mini__disc {
    width: 40px;
    height: 40px;
  }

  /* 上一首 / 下一首在窄屏收起，只留播放键 + 展开键 */
  .el-music-mini__prev,
  .el-music-mini__next {
    display: none;
  }

  /* 时间文本太占地方，移动端藏掉，进度条保留 */
  .el-music-mini__time {
    display: none;
  }

  /* 播放键略缩小 */
  .el-music-mini__play {
    width: 30px;
    height: 30px;
  }

  /* 展开面板变底部抽屉，提到控制栏（底 14px + 高 56px = 70px）之上 */
  .el-music-panel {
    left: 8px;
    right: 8px;
    bottom: 82px;
    width: auto;
    max-width: none;
    max-height: 70vh;
    border-radius: var(--el-radius-lg) var(--el-radius-lg) 0 0;
    transform-origin: bottom center;
  }

  #el-music-player .aplayer-list ol {
    max-height: 30vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-music-mini__disc,
  .el-music-mini__eq i,
  .el-music-mini.is-loading .el-music-mini__play {
    animation: none;
  }
}

/* 不支持 backdrop-filter：玻璃退回不透明，否则文字会糊在背景图上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .el-music-mini,
  .el-music-panel {
    background: rgba(255, 255, 255, 0.96);
  }

  [data-theme='dark'] .el-music-mini,
  [data-theme='dark'] .el-music-panel {
    background: rgba(24, 25, 44, 0.97);
  }
}