/**
 * APlayer 外观覆盖（必须在 APlayer.min.css 之后加载）
 *
 * 修掉三个坑：
 *   1. 折叠按钮（.aplayer-miniswitcher）是绝对定位在 body 右边缘的 18px 竖条，
 *      body 原本靠 padding-right:18px 给它留位；之前把 padding 清零，
 *      竖条就直接压在封面/信息区上。现在把它改成右上角独立圆形按钮。
 *   2. APlayer 的 fixed 模式会在初始化时写死 body 的行内宽度（offsetWidth-18），
 *      展开后卡片仍然只有几十像素。用 width:100%!important 拉回。
 *   3. 旧选择器写成 `#aplayer-fixed .aplayer .xxx`，但 APlayer 是把 aplayer 类
 *      加在容器本身上的，容器内并不存在 .aplayer 祖先，规则全部落空。这里统一改成
 *      `#aplayer-fixed .xxx`。
 */

/* ---------- 容器 ---------- */
#aplayer-fixed {
  position: fixed;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 32px);
  font-family: inherit;
  line-height: 1.5;
  /* APlayer 基础样式自带白底 + 5px 外边距 + 2px 圆角 + overflow:hidden，
     会让卡片外面露出一圈白边、位置偏移，还会把角上的展开按钮裁掉 */
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;

  --ap-card: #ffffff;
  --ap-card-soft: #f5f6f8;
  --ap-line: rgba(17, 20, 26, 0.08);
  --ap-text: #2b2f36;
  --ap-sub: #7b818b;
  --ap-theme: #9e0f24;
  --ap-shadow: 0 10px 30px rgba(17, 20, 26, 0.14);
  --ap-radius: 12px;
}

#aplayer-fixed.aplayer-narrow {
  width: 66px;
}

/* ---------- 卡片主体 ---------- */
#aplayer-fixed .aplayer-body {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important; /* 折叠按钮已挪到角上，不再需要右侧留白 */
  background: var(--ap-card) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow);
  transition: none;
}

/* 封面 */
#aplayer-fixed .aplayer-pic {
  height: 66px !important;
  width: 66px !important;
  border-radius: var(--ap-radius) 0 0 var(--ap-radius);
  overflow: hidden;
}

/* 迷你态整块就是封面，白底+圆角会因为抗锯齿露出一圈白边，改由封面自己投影 */
#aplayer-fixed.aplayer-narrow .aplayer-body {
  background: transparent !important;
  box-shadow: none;
}

#aplayer-fixed.aplayer-narrow .aplayer-pic {
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
}

/* ---------- 折叠 / 展开按钮 ---------- */
/* 展开态：按钮收在卡片右上角内侧，信息区右侧已留出 30px，不会压住文字 */
#aplayer-fixed .aplayer-miniswitcher {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 50% !important;
  background: var(--ap-card) !important;
  box-shadow: 0 2px 6px rgba(17, 20, 26, 0.18);
  z-index: 6;
  transition: background 0.2s ease, transform 0.2s ease;
}

#aplayer-fixed .aplayer-miniswitcher:hover {
  background: var(--ap-card-soft) !important;
  transform: scale(1.08);
}

/* 迷你态：按钮挪到方块右侧外面，完全不盖住封面 */
#aplayer-fixed.aplayer-narrow .aplayer-miniswitcher {
  top: 50% !important;
  right: -27px !important;
  transform: translateY(-50%);
}

#aplayer-fixed.aplayer-narrow .aplayer-miniswitcher:hover {
  transform: translateY(-50%) scale(1.08);
}

#aplayer-fixed .aplayer-miniswitcher .aplayer-icon {
  width: 100% !important;
  height: 100% !important;
  padding: 5px !important;
  box-sizing: border-box;
}

#aplayer-fixed .aplayer-miniswitcher .aplayer-icon path {
  fill: var(--ap-sub) !important;
}

#aplayer-fixed .aplayer-miniswitcher:hover .aplayer-icon path {
  fill: var(--ap-text) !important;
}

/* ---------- 信息区 ---------- */
#aplayer-fixed .aplayer-info {
  height: 66px !important;
  margin-left: 66px !important;
  /* 右侧 30px 给折叠按钮让位，文字和图标都不会钻到按钮下面 */
  padding: 11px 30px 0 12px !important;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
}

#aplayer-fixed.aplayer-narrow .aplayer-info {
  display: none !important;
}

#aplayer-fixed .aplayer-music {
  display: flex !important;
  align-items: baseline;
  gap: 4px;
  width: 100% !important;
  height: 17px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  box-sizing: border-box;
  line-height: 17px !important;
  overflow: hidden;
}

#aplayer-fixed .aplayer-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px !important;
  line-height: 17px !important;
  color: var(--ap-text);
}

#aplayer-fixed .aplayer-author {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px !important;
  line-height: 17px !important;
  color: var(--ap-sub) !important;
}

/* 进度条单独一行，图标和时间放下面一行，避免挤在 70px 里 */
#aplayer-fixed .aplayer-controller {
  position: relative !important;
  display: block !important;
}

#aplayer-fixed .aplayer-bar-wrap {
  display: block !important;
  margin: 0 !important;
  padding: 3px 0 !important;
}

#aplayer-fixed .aplayer-time {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  height: 16px;
  padding-left: 0 !important;
  color: var(--ap-sub) !important;
  font-size: 10px !important;
  white-space: nowrap;
}

/* 时间靠左，图标靠右 */
#aplayer-fixed .aplayer-time-inner {
  order: 1;
  margin-right: auto;
  font-size: 10px;
  letter-spacing: 0.2px;
}

/* 关键：吸底模式把这几个按钮绝对定位到底栏右上角（bottom:27px; right:0~75px），
   卡片矮的时候它们正好压在标题行上。全部拉回文档流，改成一行图标。 */
#aplayer-fixed .aplayer-time .aplayer-icon-back,
#aplayer-fixed .aplayer-time .aplayer-icon-play,
#aplayer-fixed .aplayer-time .aplayer-icon-forward,
#aplayer-fixed .aplayer-time .aplayer-icon-menu,
#aplayer-fixed .aplayer-time .aplayer-icon-lrc,
#aplayer-fixed .aplayer-time .aplayer-icon-loop,
#aplayer-fixed .aplayer-time .aplayer-icon-order,
#aplayer-fixed .aplayer-time .aplayer-volume-wrap {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 2px !important;
  display: inline-block !important;
}

/* 音量图标外面还套了一层 .aplayer-volume-wrap，它也是拿行高撑高度，
   图标会被基线再压低约 1.8px，这里改成 flex 居中。
   注意选择器要带上 .aplayer-time，否则压不过上面那条 inline-block !important */
#aplayer-fixed .aplayer-time .aplayer-volume-wrap {
  width: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* 还要留定位，音量悬浮条才有参照物贴着喇叭弹出 */
  position: relative !important;
}

/* 上一首 / 播放 / 下一首 / 循环 / 随机 / 音量 / 列表 / 歌词 */
#aplayer-fixed .aplayer-icon-back { order: 2; }
#aplayer-fixed .aplayer-icon-play { order: 3; }
#aplayer-fixed .aplayer-icon-forward { order: 4; }
#aplayer-fixed .aplayer-icon-loop { order: 5; }
#aplayer-fixed .aplayer-icon-order { order: 6; }
#aplayer-fixed .aplayer-volume-wrap { order: 7; }
#aplayer-fixed .aplayer-icon-menu { order: 8; }
#aplayer-fixed .aplayer-icon-lrc { order: 9; }

#aplayer-fixed .aplayer-icon {
  width: 13px !important;
  height: 13px !important;
  margin: 0 2px !important;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#aplayer-fixed .aplayer-icon:hover {
  opacity: 1;
}

/* 关键：图标里的 <svg> 默认是行内元素 + 基线对齐，垂直位置会跟着字体行高上下漂
   （实测线上比按钮盒低约 3.3px）。而「下一首」是「上一首」旋转 180° 得来的
   （APlayer 自带 .aplayer-icon-forward{transform:rotate(180deg)}），
   这点偏移被翻转成「向上 3.3px」，看着就比别的图标高一截。
   让 svg 铺满整个 13×13 方块，位置就与字体无关，旋转也不会再移位。 */
#aplayer-fixed .aplayer-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  vertical-align: middle;
}

#aplayer-fixed .aplayer-icon path {
  fill: var(--ap-text);
}

#aplayer-fixed .aplayer-icon-lrc.aplayer-icon-lrc-inactivity {
  opacity: 0.35;
}

/* ---------- 歌词 ---------- */
#aplayer-fixed .aplayer-lrc {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: block;
  width: auto !important;
  max-width: none !important;
  height: 72px !important;
  margin: 8px 0 0 !important;
  padding: 6px 12px !important;
  box-sizing: border-box;
  background: var(--ap-card) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow);
  overflow: hidden !important;
  text-align: center;
  text-shadow: none !important;
  pointer-events: auto !important;
}

/* 上下用卡片色做渐变淡出，最后一行不会硬生生被裁断 */
#aplayer-fixed .aplayer-lrc::before,
#aplayer-fixed .aplayer-lrc::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0;
  right: 0;
  height: 22px;
  width: auto !important;
  z-index: 1;
  pointer-events: none;
  filter: none !important;
}

#aplayer-fixed .aplayer-lrc::before {
  top: 0;
  bottom: auto !important;
  background: linear-gradient(180deg, var(--ap-card) 10%, transparent) !important;
}

#aplayer-fixed .aplayer-lrc::after {
  bottom: 0 !important;
  top: auto !important;
  background: linear-gradient(0deg, var(--ap-card) 10%, transparent) !important;
}

/* 点了「词」按钮 / 收起状态 / 迷你态：不显示歌词块 */
#aplayer-fixed .aplayer-lrc.aplayer-lrc-hide,
#aplayer-fixed.aplayer-narrow .aplayer-lrc {
  display: none !important;
}

/* APlayer 是按 16px/行、translateY 滚动的，所以行高必须锁 16px；
   上方垫 22px 让「当前句」落在歌词框垂直正中（72 - 12padding - 16行高)/2 ≈ 22 */
#aplayer-fixed .aplayer-lrc-contents {
  padding-top: 22px;
}

#aplayer-fixed .aplayer-lrc p {
  font-size: 12px !important;
  line-height: 16px !important;
  height: 16px !important;
  color: var(--ap-sub) !important;
  opacity: 0.5;
}

#aplayer-fixed .aplayer-lrc p.aplayer-lrc-current {
  color: var(--ap-theme) !important;
  font-weight: 600;
  opacity: 1;
}

/* ---------- 播放列表 ---------- */
#aplayer-fixed .aplayer-list {
  margin-bottom: 0 !important;
  border: none !important;
  border-top: 1px solid var(--ap-line) !important;
  /* 列表是从播放器上方展开的，圆角留在上面两个角 */
  border-radius: var(--ap-radius) var(--ap-radius) 0 0;
  box-shadow: var(--ap-shadow);
  background: var(--ap-card) !important;
  backdrop-filter: blur(10px);
  /* 让左侧播放标记被圆角裁进卡片里，不会在左上角戳出一个小红条 */
  overflow: hidden !important;
}

/* 列表项改成一行 flex：歌名自动省略，歌手固定靠右，
   不会因为歌名太长把歌手挤掉（原来整行 32px，第二行直接被裁） */
#aplayer-fixed .aplayer-list ol li {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  line-height: 34px;
  padding: 0 14px;
  color: var(--ap-text);
  border-top: 1px solid var(--ap-line);
  overflow: hidden;
}

#aplayer-fixed .aplayer-list ol li.aplayer-list-light {
  background: var(--ap-card-soft);
}

#aplayer-fixed .aplayer-list ol li:hover {
  background: var(--ap-card-soft);
}

/* 左侧那个播放标记正好卡在圆角上，像戳出去一条红边，直接换成文字高亮 */
#aplayer-fixed .aplayer-list ol li .aplayer-list-cur {
  display: none !important;
}

#aplayer-fixed .aplayer-list ol li.aplayer-list-light .aplayer-list-title {
  color: var(--ap-theme);
  font-weight: 600;
}

#aplayer-fixed .aplayer-list ol li .aplayer-list-index {
  flex: 0 0 auto;
  width: 16px;
  margin-right: 0;
  text-align: right;
  color: var(--ap-sub);
}

#aplayer-fixed .aplayer-list ol li .aplayer-list-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#aplayer-fixed .aplayer-list ol li .aplayer-list-author {
  flex: 0 1 auto;
  float: none !important;
  max-width: 42%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  color: var(--ap-sub);
}

#aplayer-fixed .aplayer-list ol::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.35);
}

/* ---------- 提示条 ---------- */
#aplayer-fixed .aplayer-notice {
  background: rgba(17, 20, 26, 0.78) !important;
  color: #fff !important;
  font-size: 12px !important;
}

/* ---------- 深色模式 ---------- */
[data-bs-theme="dark"] #aplayer-fixed {
  --ap-card: #1e2128;
  --ap-card-soft: #282c35;
  --ap-line: rgba(255, 255, 255, 0.1);
  --ap-text: #e6e8ec;
  --ap-sub: #98a0ac;
  --ap-theme: #f2667c;
  --ap-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ---------- 手机端 ---------- */
@media (max-width: 480px) {
  #aplayer-fixed:not(.aplayer-narrow) {
    width: calc(100vw - 32px);
  }
}