/* =====================================================================
   悬浮迷你音乐播放器 —— 样式（theme-lalmes-replica）
   · 零外链：图标是片段里的内联 SVG，颜色全部取主题已有 CSS 变量
     （--accent / --panel-bg / --text / --text-2 / --text-3 / --line /
       --line-soft / --radius-sm / --shadow-up / --chip-bg / --accent-10…），
     所以 html[data-skin=…] 的 7 套换肤与主题设置里的主题色都会跟着变。
   · 位置：右下角，主动让开已有的 .side-top 浮动按钮列
       ≥992px：.side-top 在 right:0 / bottom:50px / 宽 40px → 本播放器 right:52px、bottom:50px
       ≤768px：.side-top 在 right:12px / bottom:20px / 宽 38px（只剩「回到顶部」）
               → 本播放器 left:8px、right:58px、bottom:12px，做成一条紧凑底栏，
                 面板向上展开成整屏宽；并给 body 留出等高空白，不挡页脚内容。
   · 层级：桌面 880（低于 .side-top 的 900，高于正文）；≤991px 260
     （高于左上角抽屉按钮 250，低于抽屉 300 ⇒ 抽屉打开时自然盖住播放器）。
   · 移动端不做整屏遮罩：面板就是「贴着底栏向上展开的卡片」，不挡内容。
   ===================================================================== */

.lmp {
  position: fixed;
  right: 52px;
  bottom: 50px;
  z-index: 880;
  width: 306px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

.lmp *,
.lmp *::before,
.lmp *::after {
  box-sizing: border-box;
}

.lmp .lmp-ic {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  pointer-events: none;
}

/* ---------------------------- 折叠态：迷你条 ---------------------------- */

.lmp-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  box-shadow: var(--shadow-up);
  cursor: pointer;
  user-select: none;
}

.lmp-bar:hover {
  border-color: var(--accent-60);
}

.lmp-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-10);
  color: var(--accent);
  cursor: pointer;
}

.lmp-expand:hover {
  background: var(--accent-12);
}

.lmp-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: var(--link-quiet);
}

.lmp-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lmp-thumb-ph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}

/* 封面缺失/加载失败：隐藏 img，露出占位块（class 由 JS 切换） */
.lmp-thumb.is-ph .lmp-thumb-img {
  display: none;
}

.lmp-thumb:not(.is-ph) .lmp-thumb-ph {
  display: none;
}

.lmp-meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.lmp-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lmp-sub {
  display: block;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lmp-btns {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.lmp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.lmp-btn:hover {
  background: var(--accent-10);
  color: var(--accent);
}

.lmp-btn:active {
  transform: scale(0.92);
}

.lmp-btn-main,
.lmp-btn-main:hover {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: #fff;
}

.lmp-btn-main:hover {
  filter: brightness(1.08);
}

.lmp-btn-main .lmp-ic {
  width: 15px;
  height: 15px;
}

/* 播放/暂停两个图标按 .is-playing 切换 */
.lmp-ic-pause {
  display: none;
}

.lmp.is-playing .lmp-ic-play {
  display: none;
}

.lmp.is-playing .lmp-ic-pause {
  display: block;
}

/* 进度条：贴在迷你条底边，点击/拖动都能跳转（JS 用 Pointer Events） */
.lmp-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 10px;
  cursor: pointer;
  touch-action: none;
}

.lmp-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 3px;
  background: var(--line-soft);
}

.lmp-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

.lmp-progress:hover .lmp-progress-track,
.lmp-progress:focus-visible .lmp-progress-track {
  height: 5px;
}

.lmp-progress:focus-visible {
  outline: 2px solid var(--accent-60);
  outline-offset: -2px;
}

/* ---------------------------- 展开态：面板 ---------------------------- */

.lmp-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  width: 344px;
  max-height: min(72vh, 540px);
  padding: 9px 11px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  box-shadow: var(--shadow-up);
}

/* [hidden] 要压过上面的 display:flex */
.lmp-panel[hidden],
.lmp-clear[hidden],
.lmp-hint[hidden] {
  display: none;
}

.lmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: 22px;
  margin-bottom: 7px;
}

.lmp-head-title {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

.lmp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.lmp-close:hover {
  background: var(--accent-10);
  color: var(--accent);
}

.lmp-close .lmp-ic {
  width: 14px;
  height: 14px;
}

/* 搜索 */
.lmp-search {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.lmp-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
}

.lmp-input:focus {
  border-color: var(--accent-60);
  box-shadow: 0 0 0 2px var(--accent-10);
}

.lmp-input::placeholder {
  color: var(--text-3);
}

.lmp-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.lmp-search-btn:hover {
  filter: brightness(1.08);
}

.lmp-search-btn:active {
  transform: translateY(1px);
}

.lmp-search-btn .lmp-ic {
  width: 14px;
  height: 14px;
}

.lmp-hint {
  flex: 0 0 auto;
  margin: 7px 0 0;
  color: var(--text-3);
  font-size: 11.5px;
  word-break: break-all;
}

/* 列表 */
.lmp-sec {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 8px;
}

.lmp-sec + .lmp-sec {
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
}

.lmp-sec-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-2);
  font-size: 11.5px;
}

.lmp-count {
  color: var(--accent);
  font-size: 11px;
}

.lmp-clear {
  margin-left: auto;
  padding: 1px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--link-quiet);
  font-family: inherit;
  font-size: 11px;
  line-height: 18px;
  cursor: pointer;
}

.lmp-clear:hover {
  border-color: var(--accent-60);
  color: var(--accent);
}

.lmp-list {
  flex: 1 1 auto;
  max-height: 21vh;
  margin: 5px 0 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  list-style: none;
}

.lmp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.lmp-row:hover {
  background: var(--accent-07);
}

.lmp-row.is-cur {
  background: var(--accent-10);
}

.lmp-row.is-cur .lmp-row-name {
  color: var(--accent);
  font-weight: 600;
}

.lmp-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lmp-row-sub {
  flex: 0 1 auto;
  max-width: 40%;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lmp-row-time {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.lmp-row-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.lmp-row-btn:hover {
  border-color: var(--accent-60);
  background: var(--accent-10);
  color: var(--accent);
}

.lmp-empty {
  padding: 8px 7px;
  color: var(--text-3);
  font-size: 11.5px;
  list-style: none;
}

/* 音量 / 时间 */
.lmp-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-3);
}

.lmp-vol-ic {
  width: 15px;
  height: 15px;
}

.lmp-vol {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.lmp-time {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------- 窄屏：紧凑底栏 ---------------------------- */

@media (max-width: 991px) {
  /* 低于抽屉(300)、高于左上角抽屉按钮(250) */
  .lmp {
    z-index: 260;
  }
}

@media (max-width: 768px) {
  .lmp {
    left: 8px;
    right: 58px; /* 让开 .side-top 的 38px「回到顶部」按钮（right:12px） */
    bottom: 12px;
    width: auto;
  }

  .lmp-bar {
    height: 48px;
    gap: 6px;
    padding: 0 8px;
  }

  .lmp-thumb {
    width: 30px;
    height: 30px;
  }

  .lmp-name {
    font-size: 12.5px;
  }

  .lmp-sub {
    font-size: 10.5px;
  }

  .lmp-btn {
    width: 24px;
    height: 24px;
  }

  .lmp-btn-main,
  .lmp-btn-main:hover {
    width: 28px;
    height: 28px;
  }

  /* 面板向上展开成整屏宽（用负偏移抵掉 .lmp 的左右让位） */
  .lmp-panel {
    left: -8px;
    right: -58px;
    bottom: calc(100% + 6px);
    width: auto;
    max-height: 64vh;
    padding: 8px 11px 10px;
  }

  .lmp-list {
    max-height: 17vh;
  }

  /* 底栏固定在最下方，给页面留出等高空白，避免压住页脚最后一行
     （class 由 JS 在片段存在时加到 body 上） */
  body.lmp-on {
    padding-bottom: 62px;
  }
}

@media (max-width: 380px) {
  .lmp-sub {
    display: none;
  }

  .lmp-row-sub {
    display: none;
  }
}

/* 无障碍 / 打印 */
@media (prefers-reduced-motion: reduce) {
  .lmp * {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .lmp {
    display: none !important;
  }
}


/* ================= 自动播放（autoplay）=================
   ① .lmp-toggle：面板标题栏里的「自动播放」开关（圆点 + 中文标签，纯 CSS，无图标外链）
   ② .lmp-tip   ：播放条上方的短提示，只在「载入即播放被浏览器拦下」时出现
   ③ .lmp-needs-gesture：等待首次交互的状态，给主按钮加一圈光晕
   颜色全部取主题变量（--accent / --accent-10 / --accent-60 / --line / --text-2 /
   --text-3 / --panel-bg / --shadow-up），跟随 7 套换肤与主题色。 */

.lmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 8px;
  padding: 1px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}

.lmp-toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line);
}

.lmp-toggle:hover {
  border-color: var(--accent-60);
  color: var(--accent);
}

.lmp-toggle.is-on {
  border-color: var(--accent-60);
  background: var(--accent-10);
  color: var(--accent);
}

.lmp-toggle.is-on::before {
  background: var(--accent);
}

/* 播放条上方的小胶囊提示（挂在 #lmp 下：.lmp-bar 有 overflow:hidden，不能放进去） */
.lmp-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  max-width: 100%;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: var(--shadow-up);
  pointer-events: none;
}

.lmp-tip[hidden] {
  display: none;
}

.lmp.lmp-needs-gesture .lmp-bar {
  border-color: var(--accent-60);
}

.lmp.lmp-needs-gesture .lmp-btn-main,
.lmp.lmp-needs-gesture .lmp-btn-main:hover {
  box-shadow: 0 0 0 3px var(--accent-10);
}

/* ④ 修一个既有特异性 bug：上面 `.lmp .lmp-ic`（0,2,0）压过了 `.lmp-ic-pause`（0,1,0），
   于是「播放▶」和「暂停‖」两个图标会同时画在按钮里（截图实测：两个图形重叠）。
   这里用同等特异性的选择器补回互斥切换（放在后面，平手时后者胜）。 */
.lmp .lmp-ic-pause {
  display: none;
}

.lmp.is-playing .lmp-ic-play {
  display: none;
}

.lmp.is-playing .lmp-ic-pause {
  display: block;
}