/* =========================================================
   全局音乐播放器（Like Girl 情侣小站版）
   - 日系温柔 / 暖白玻璃毛玻璃质感 + 粉色珊瑚粉主色
   - 左下角悬浮 position: fixed，避免遮挡留言板右下发表按钮
   - 不引入外部背景图（用户明确要求）
   ========================================================= */

#lg-music-player-root {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 24px;
  z-index: 9998;              /* 低于全屏遮罩，高于内容卡 */
  pointer-events: none;       /* 外层透明区域不抢 hover（播放器容器内部恢复） */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Noto Serif SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

#lg-music-player-root * { box-sizing: border-box; }

/* =========================================================
   .lg-mover：player + 收柄 tab 的统一移动容器
   ---------------------------------------------------------
   为什么要单独加这层？
   之前 .lg-player (transform) + .lg-minimize-tab (left) 分别走不同属性动画：
   · 参考系不同：translateX(-100%) 按 player 自身宽度，left 按 root 宽度 → 位移量不一致
   · 渲染路径不同：transform 走 GPU compositor，left 走 Layout reflow → 掉帧不同步
   结果：移动过程中两者之间出现"断缝 / 相对漂移"，看起来完全不像是连在一起的。
   ✅ 修复：把 player + tab 一起包到 mover，最小化时**只给 mover 加一个统一的 translateX(-100%)**，
        俩元素永远共享同一个父容器位移 → 全程丝滑贴合，绝不脱节。
   ========================================================= */
.lg-mover {
  position: relative;                /* 给 tab 的 position:absolute 提供 containing block（直接子） */
  display: block;
  width: auto;
  min-width: 0;
  pointer-events: none;              /* 继承 root 的透明穿透（内部 player/tab 各自恢复 auto）*/
  will-change: transform;

  /* ===== 整体圆角 + 大范围柔和悬浮阴影（关键！解决"播放器与背景白卡片融在一起"问题） =====
     · 圆角：player 左 24px 圆弧 + tab 右 24px 圆弧 → 整体就是一块四端 24px 圆角的标准圆角矩形，
       把阴影 shape 严格对齐这块整体圆角矩形（而不是分裂到两个元素各自画）
     · 阴影：四层叠加的柔和粉灰色大范围悬浮阴影（右下偏置，低透明度，绝不用黑色）
         第1层：超广域 60px 粉灰光晕 = 最远端的环境漂浮感（重点解决背景白色卡片上看不到播放器）
         第2层：中域 36px 暖粉柔光 = 贴近卡片下方的"浮空 2-3cm"真实感
         第3层：紧域 18px 暖粉灰紧贴 = 卡片底部/右侧的近距离阴影（重点加强底部+右侧层次感）
         第4层：超紧域 10px 暖粉灰 = 右下边缘最内层，让轮廓即使在浅色背景上也可清晰分辨
       所有颜色用粉灰系（低饱和暖粉色、灰粉紫色），整体只有 12%～22% 透明度 ——
       有明显层次但不突兀，绝不用黑色阴影（避免廉价玻璃拟态感）。 */
  border-radius: 24px;
  box-shadow:
    20px 24px 60px rgba(178, 138, 158, 0.22),
    12px 16px 36px rgba(255, 150, 170, 0.16),
     6px 10px 18px rgba(160, 122, 145, 0.15),
     2px  4px 10px rgba(150, 110, 135, 0.12);
  transition: transform 0.38s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease;
}
/* hover：所有柔和粉灰阴影同步加深一档，营造"轻轻被托起"的反馈感。
   注意：mover 是 player + tab 的统一父容器，hover 任意子元素都会冒泡到这里，
   所以这里 hover 即代表"鼠标进入播放器任意区域"。 */
.lg-mover:hover {
  box-shadow:
    22px 28px 68px rgba(178, 138, 158, 0.26),
    14px 18px 40px rgba(255, 150, 170, 0.20),
     7px 12px 22px rgba(160, 122, 145, 0.18),
     3px  5px 12px rgba(150, 110, 135, 0.14);
}

/* =========================================================
   「边缘折叠控制区」 Tab 2026-08 第三次设计：
   日系温柔一体风 · 不是按钮！是播放器右侧玻璃自然收窄成的一块竖窄带
   ---------------------------------------------------------
   用户需求重点：
   · 不是圆形按钮、不是独立容器 —— 是播放器本身右缘的一块"窄型竖向控制区"
   · 与主体共用背景、毛玻璃、圆角；无单独描边、无白色实心背景、无明显阴影
   · 右侧整体轻微内凹/渐变过渡 → 像播放器自然收窄出来的边缘
   · 图标：简洁线性 ‹ / ›（单箭头，不是双箭头）；淡粉/灰粉色；悬停只加深颜色，不放大不弹跳
   ========================================================= */
.lg-minimize-tab {
  position: absolute;
  top: 0;
  left: 100%;
  bottom: 0;                         /* top+bottom=0：竖向占满 player 高度，视觉上就是玻璃右缘 */
  margin-left: -1px;                 /* 向左重叠 1px：让 tab 左侧新加的灰色边框线，正好压在 player 原本的 1px 白色右边框上 →
                                        只看到一条干净的灰色分割线（位于 player 玻璃与右侧收起按钮窄带之间） */
  right: auto;
  width: 30px;                       /* 竖窄带宽度：30px（在你要求的 28～34px 区间） */
  pointer-events: auto;

  /* ---------- 与 player 主体完全一致的玻璃材质： ---------- */
  /* 注意：因为有 margin-left:-1px 重叠进 player，player 本身已经提供了这 1px 区域
     的背景+毛玻璃，所以 tab 背景用 90deg 渐变：
     · 左 0%：rgba(255,246,248,0.88) → 与 player 完全同色（视觉无缝连接，暖粉白）
     · 右 100%：rgba(255,242,245,0.80) → 极轻微变淡/透明 = "收窄/内凹" 的柔和过渡感
     整体保持暖粉白色调，与 player 的暖色调一致，叠在白色主页卡片上时同样能透出微暖粉调。 */
  background: linear-gradient(
    90deg,
    rgba(255, 246, 248, 0.88) 0%,
    rgba(255, 242, 245, 0.80) 100%
  );
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);

  /* 边框：
     · TOP / RIGHT / BOTTOM：与 player 完全相同的极淡暖粉白描边（透明度低，几乎看不出边框）
     · LEFT：用户要求"只有收起按钮的左侧加一条灰色边线" → 单独给 tab 左侧画日系柔和暖灰色 1px 分割线，
       作为 player 玻璃主体与右侧控制窄带之间的分界。margin-left:-1px 让这条灰线正好压在 player
       与 tab 的接缝上（盖住 player 原本的极淡描边 → 只看到一条灰线）。*/
  border: 1px solid rgba(255, 238, 243, 0.45);
  border-left: 1px solid rgba(150, 128, 140, 0.42);

  /* 圆角策略（终于搞对啦！之前理解反了 😅）：
     · 左侧 TL / BL = 0（贴在 player 右侧，保持与玻璃主体的干净接缝，不与灰色分割线打架）
     · 右侧 TR / BR = 24px（与 player 左侧的 24px 大圆弧呼应，播放器整体视觉上就是一个左右两端都圆润的圆角矩形，
       柔和日系感。圆角数值严格与 player 左侧保持一致：桌面 24px / 移动端 22px）*/
  border-top-left-radius:     0 !important;
  border-top-right-radius:   24px !important;
  border-bottom-right-radius:24px !important;
  border-bottom-left-radius:  0 !important;

  /* ❌ 绝对不能加"独立 box-shadow"！用户要求不要明显阴影。
     player 本身的柔和粉色阴影已经延伸到右侧足够覆盖这里，tab 不再单独加阴影，
     彻底消除"这是一个额外贴上去的按钮"的立体感。*/
  box-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* 图标：淡粉色 / 灰粉色（不要太艳的深粉，强调"折叠控制"的克制感） */
  color: rgba(255, 107, 129, 0.70);
  z-index: 2;
  user-select: none;

  /* 动画：只做颜色 200ms 柔和过渡；不做 transform（禁止放大/弹跳/缩放） */
  transition:
    background 0.20s ease,
    color 0.20s ease;
}
/* SVG 单箭头：宽度 14px（30px 宽竖条里居中，左右各 8px 呼吸空间） */
.lg-minimize-tab svg {
  width: 14px;
  height: auto;
  display: block;
}
/* hover：只做颜色稍微加深（灰粉 → 饱和粉）；背景稍均匀一点；不放大、不弹跳、不加阴影 */
.lg-minimize-tab:hover {
  background: linear-gradient(
    90deg,
    rgba(255, 246, 248, 0.92) 0%,
    rgba(255, 240, 244, 0.86) 100%
  );
  color: rgba(230, 93, 115, 0.92);   /* 稍深一点，提示可点击 */
  transform: none;                    /* 强制禁止任何 transform（不放大不弹跳） */
}
.lg-minimize-tab:active {
  transform: none;                    /* 点击也不做缩放反馈 */
  color: rgba(255, 107, 129, 0.95);  /* 只稍微再深 1 档颜色当反馈 */
}

/* ===== 最小化：整组 mover 向左平移（player 完全藏到视口外，仅 tab 留 30px 窄条在屏幕最左边） =====
   · root.left = 24px（桌面）= 12px（<520px 移动端）。
   · translateX(-100%) 只是按 mover 自身宽度(=player 宽度 W)平移，会让 mover 右边缘停在 root.left 的位置（即 x=24px）。
     结果：player 最右边 24px 毛玻璃背景还会露在屏幕最左边，看起来"没藏干净"。
   · ✅ 正确做法：translateX(calc(-100% - var(--lg-root-left, 24px))) — 在 -100% 基础上再额外向左减去 root 的 left 偏移，
     让 mover 盒子右边缘正好对齐视口 x=0 → player 主体完全消失在视口外。
     tab 用 position:absolute; left:100% 挂在 mover 右缘外侧，所以此时 tab 正好从 x=0 附近开始露出 30px 宽，
     视觉效果就是"屏幕最左边只有一条细细的展开窄条"，不会再看到 player 背景的尾巴。
   · ⚠️ 必须同步清掉 mover 的大范围 box-shadow：否则 20px X 偏移 + 60px 模糊的粉灰光晕会从 x=0 向右延伸约 50px，
     看起来就是"没藏干净 / 还有一块影子贴在左边界"。最小化时窄条本身足够显眼，不需要阴影衬托。 */
#lg-music-player-root {
  --lg-root-left: 24px;     /* 桌面端 root.left 备份（移动端 <520px 会覆盖成 12px） */
}
#lg-music-player-root.minimized .lg-mover {
  transform: translateX(calc(-100% - var(--lg-root-left, 24px)));
  box-shadow: none;   /* 关键：最小化时去掉大范围悬浮阴影，避免从屏幕左缘"露出来" */
}
#lg-music-player-root.minimized .lg-player {
  pointer-events: none;
}

/* 最小化态 tab：颜色稍微突出一点（但仍然克制柔和），提示用户这里可以点开播放器 */
#lg-music-player-root.minimized .lg-minimize-tab {
  background: linear-gradient(
    90deg,
    rgba(255, 246, 248, 0.92) 0%,
    rgba(255, 238, 243, 0.84) 100%
  );
  color: rgba(255, 107, 129, 0.85);
  box-shadow: none;                  /* 仍然不加独立阴影，保持整体一致 */
  /* 最小化态（"展开播放器按钮"状态）：与基础态保持完全一致的右侧圆弧，避免状态切换时圆角跳变
     TL/BL=0（贴左侧玻璃），TR/BR=24px（与 player 左侧 24px 圆弧呼应，整体两端圆润）*/
  border-top-left-radius:     0 !important;
  border-top-right-radius:   24px !important;
  border-bottom-right-radius:24px !important;
  border-bottom-left-radius:  0 !important;
}

/* 移动端（< 520px）：player 圆角从 24px 缩成 22px，竖窄带也同步变窄 26px */
@media (max-width: 520px) {
  #lg-music-player-root {
    --lg-root-left: 12px;   /* 移动端 root.left=12px，覆盖桌面端变量 */
  }
  .lg-minimize-tab {
    width: 26px;                      /* 移动端收一点宽度：26px（仍在 28± 范围附近） */
    left: 100%;
    margin-left: -1px;                /* 同样重叠 1px 融合 player 右边框 */
    right: auto;
    /* 移动端：匹配 player 左侧 22px 圆弧 → tab 右侧也 22px 圆角，左右视觉对称
       TL/BL=0（贴 player），TR/BR=22px（移动端小圆弧）*/
    border-top-left-radius:     0 !important;
    border-top-right-radius:   22px !important;
    border-bottom-right-radius:22px !important;
    border-bottom-left-radius:  0 !important;
  }
  .lg-minimize-tab svg {
    width: 13px;
    height: auto;
  }
  /* 移动端最小化：与桌面端一样，减去 root.left=12px，让 player 完全进入视口外
     （避免从屏幕最左边漏出 12px 的 player 背景尾巴） */
  #lg-music-player-root.minimized .lg-mover {
    transform: translateX(calc(-100% - var(--lg-root-left, 12px)));
  }
}

.lg-player {
  pointer-events: auto;
  width: min(440px, calc(100vw - 48px));
  max-width: min(440px, calc(100vw - 48px)); /* 双保险：锁死最大宽度，长内容任何情况都撑不开 */
  box-sizing: border-box;                     /* padding 算进 width，不再额外叠加 */
  /* 暖粉白半透明毛玻璃：比纯白主页卡片 (#fff) 更暖、偏粉、稍微更不透明，
     叠在白色卡片上时能透出极轻微的暖粉色调 → 与背景拉开层级，不再"两块白叠在一起"。
     0.88 不透明度：足够遮住后方内容噪点，又保留毛玻璃透感。 */
  background: rgba(255, 246, 248, 0.88);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  /* 极淡的暖粉白描边：透明度低到几乎看不见一圈边框（避免廉价玻璃拟态），
     但能在边缘形成极轻微的色温变化，辅助阴影一起界定轮廓。 */
  border: 1px solid rgba(255, 238, 243, 0.45);
  border-radius: 24px 0 0 24px;  /* 右侧不要圆角：只保留左上+左下圆弧，右侧改成直角，与右侧的竖窄带自然连成一条直线 */
  /* ❌ 不再在 player 上画 box-shadow：避免与 .lg-mover 的整体大范围阴影形成"双层重影"，
     悬浮层次统一交给外层 .lg-mover 的柔和粉灰光晕处理（更干净、更自然）。 */
  box-shadow: none;
  color: #4a3b48;
  overflow: hidden;
  position: relative;  /* 给 absolute 折叠按钮做定位基准 */
  /* 最小化时的 transform/opacity 过渡（box-shadow 已移除，无需 transition） */
  transition:
    transform 0.38s cubic-bezier(.22,.61,.36,1),
    opacity 0.28s ease;
  will-change: transform;
}

/* ---------- 顶部工具栏 ---------- */
.lg-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 0;
  gap: 10px;
  min-width: 0;
  overflow: hidden;  /* 整个 bar 不溢出 player 边界 */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
/* 右侧按钮组（刷新/随机/循环/折叠）：4个按钮固定一组，flex-shrink:0 不被压缩，
   overflow:hidden 防止任何按钮溢出 player 右边界，
   flex-nowrap 保证按钮永远单行排列不换行。
   ⚠️ max-width 精确计算：刷新 56 + 随机 28 + 循环 28 + 折叠 28 + 3 gap×8 = 164，给 170px 上限留 6px 缓冲。
   任何设备上按钮组不会超过 170px，就不会把折叠按钮推到 player 右边界之外。 */
.lg-player-bar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  max-width: 170px;
  width: auto;
  box-sizing: border-box;
}
.lg-refresh-btn-label {
  display: inline;
  white-space: nowrap;
}

.lg-player-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; opacity: 0.55; color: #7a5f6f;
  flex: 0 1 auto;  /* 不 grow 占满，只占内容宽度；允许 shrink 被压缩 */
  min-width: 0;
  max-width: calc(100% - 180px);  /* 给右侧按钮组至少留 180px，标题超长省略号截断 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  /* 长标题省略号，不会把按钮组推溢出 */
}

/* 折叠按钮：跟其他按钮同级，flex 流中排列，不单独 absolute 定位 */
.lg-icon-btn.lg-collapse-toggle-btn {
  /* 左侧保持柔和半圆（日系温柔风），右侧严格直角 */
  border-radius: 14px 0 0 14px !important;
  flex-shrink: 0;  /* 不被压缩 */
}

.lg-icon-btn.active-mode { background: #ff6b81; color: #fff; }

.lg-icon-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255, 107, 129, 0.08);
  color: #ff6b81;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}
.lg-icon-btn:hover { background: rgba(255, 107, 129, 0.18); transform: scale(1.05); }
.lg-icon-btn:active { transform: scale(0.93); }
.lg-icon-btn svg { width: 14px; height: 14px; }

.lg-refresh-btn {
  padding: 0 10px;
  width: auto; height: 26px; border-radius: 13px;
  font-size: 11px; display: inline-flex; align-items: center; gap: 4px;
  /* ⚠️ 硬锁尺寸：不同设备/微信 WebView 中文字渲染宽度波动 ±4px 会让按钮组总宽度
     从 170 → 186，造成循环按钮与折叠按钮之间 8px gap 被吃掉 → 重叠。
     固定 min/max-width 让刷新按钮无论在什么设备上宽度都锁定在 54-56px 左右，
     配合下方 bar-right 的 max-width: 172px，按钮组永远不会溢出/重叠。 */
  min-width: 54px;
  max-width: 56px;
  overflow: hidden;
  box-sizing: border-box;
}
.lg-refresh-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- 展开时的播放器主体 ---------- */
.lg-player-main { padding: 8px 14px 14px; min-width: 0; overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }

.lg-cover-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  min-width: 0;        /* 防止长歌词通过 info-col 撑大 cover-row → 撑大 player → 挤溢出按钮 */
  overflow: visible;   /* ⚠️ 必须 visible：封面旋转 45° 时对角线约 135px，左右各超出 ~19px，hidden 会裁掉 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.lg-cover-wrap {
  position: relative;
  width: 96px; height: 96px;
  flex-shrink: 0;
  overflow: visible;   /* 封面旋转时允许超出 wrap 边界，不被裁 */
}

.lg-cover {
  width: 100%; height: 100%;
  border-radius: 22px;
  object-fit: cover;
  /* 白色内描边合并到 box-shadow 里 → 边框成为图片自身的一部分，跟着旋转动画一起转 */
  box-shadow: 0 8px 24px rgba(255, 150, 170, 0.22), inset 0 0 0 1px rgba(255,255,255,0.5);
  animation: lg-spin 10s linear infinite;
  animation-play-state: paused;
}
.lg-cover.spinning { animation-play-state: running; }

@keyframes lg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.lg-info-col {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;   /* cover-row 改成 visible 后，由 info-col 自己限制内部文字/控件不溢出到封面区域 */
}
.lg-song-name {
  font-size: 16px; font-weight: 700; color: #3e2f3c;
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lg-song-artist {
  font-size: 12px; color: rgba(122, 95, 111, 0.72);
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lg-song-meta { font-size: 11px; opacity: 0.6; color: #9f8693; margin-top: 2px; }

/* ---------- 控制条 ---------- */
.lg-controls-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 12px 0 6px;
  min-width: 0;
  width: 100%;
  max-width: 100%;           /* 绝不超过 info-col，挤爆按钮组 */
  flex-wrap: nowrap;          /* 单行：防止上一首/下一首跑到下一行 */
  overflow: visible;          /* 允许 play-btn 的大阴影略微超出 row（不影响宽度） */
  box-sizing: border-box;
}
/* 左右上一首/下一首小圆按钮：本身 28px + flex-shrink:0 已在 .lg-icon-btn 定义，
   但移动端极窄宽度下仍保持原尺寸 → 防止被压成椭圆形。 */
.lg-controls-row > .lg-icon-btn { flex-shrink: 0; }
.lg-play-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid rgba(255, 107, 129, 0.35);
  background-color: #ff6b81;   /* 纯色兜底：避免 linear-gradient 渲染异常时白图标+白/透明背景融为一体 */
  background-image: linear-gradient(135deg, #ff6b81 0%, #f78fb3 100%);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(255, 107, 129, 0.35);
  transition: transform 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}
.lg-play-btn:hover { transform: scale(1.05); }
.lg-play-btn:active { transform: scale(0.94); }
.lg-play-btn svg { width: 18px; height: 18px; }

/* ---------- 进度 ---------- */
.lg-progress-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
}
.lg-time { font-size: 11px; color: #9f8693; min-width: 32px; text-align: center; }
.lg-progress {
  flex: 1 1 auto; height: 4px;
  background: rgba(122, 95, 111, 0.12);
  border-radius: 4px; overflow: hidden; cursor: pointer;
  position: relative;
}
.lg-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff6b81, #f78fb3);
  border-radius: 4px;
  transition: width 0.1s linear;
}
.lg-volume {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  min-width: 0;
  flex-shrink: 1;             /* 允许在窄屏时收缩（关键：音量条可以被压窄，不让上下按钮溢出） */
}
.lg-volume > span { flex-shrink: 0; }   /* 音量小图标保持尺寸 */
.lg-volume input[type=range] {
  width: 70px;
  min-width: 0;              /* 关键：允许 range 被压窄到 0，不再硬撑 70px 溢出父容器 */
  max-width: 70px;
  accent-color: #ff6b81;
  flex-shrink: 1;
}

/* ---------- 展开歌词区 ---------- */
.lg-lyrics-panel {
  position: relative;   /* ⚠️ 必须：让 .lg-lyric-line 的 offsetTop 以本面板为基准，
                            否则 JS 的 offsetTop 会算到 .lg-player（外层），
                            导致 scrollTop 过大（滚到第5行），即"高亮第1行框显示第5行" */
  margin-top: 10px;
  max-height: 180px; overflow-y: auto;
  padding: 10px 12px;
  border-radius: 14px;
  width: 100%;           /* 关键：显式占满 main 宽度，不再让长文本决定自己的宽度 */
  max-width: 100%;       /* 双保险：任何情况不超过 main */
  box-sizing: border-box;
  min-width: 0;          /* 关键：防止长歌词撑大面板 → 撑大 player → 挤溢出右上角按钮 */
  /* 内部面板：极淡暖粉白半透明，与外层暖粉白 player 形成轻微的"内浅外暖"层次，
     不破坏整体日系暖白基调；边框极淡几乎不可见。 */
  background: rgba(255, 248, 250, 0.48);
  border: 1px solid rgba(255, 235, 240, 0.55);
}
.lg-lyrics-panel::-webkit-scrollbar { width: 4px; }
.lg-lyrics-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 129, 0.35);
  border-radius: 4px;
}

/* ---------- 歌词偏移调整工具条 ---------- */
.lg-lyric-offset-bar {
  display: flex; align-items: center; gap: 4px;
  position: absolute; top: 6px; right: 8px; z-index: 10;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;   /* 默认不拦截歌词面板的点击 */
}
.lg-lyrics-panel:hover ~ .lg-lyric-offset-bar,
.lg-lyric-offset-bar:hover,
.lg-lyric-offset-bar.has-offset {
  opacity: 1; pointer-events: auto;
}
.lg-lyric-offset-btn {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255, 107, 129, 0.3);
  background: rgba(255, 248, 250, 0.85);
  color: #e76a82; font-size: 14px; font-weight: bold;
  cursor: pointer; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.lg-lyric-offset-btn:hover {
  background: #ff6b81; color: #fff; border-color: #ff6b81;
  transform: scale(1.1);
}
.lg-lyric-offset-btn:active { transform: scale(0.95); }
.lg-lyric-offset-val {
  font-size: 11px; color: #9f8693; min-width: 28px; text-align: center;
  cursor: pointer; user-select: none;
  font-variant-numeric: tabular-nums;
}
.lg-lyric-offset-bar.has-offset .lg-lyric-offset-val {
  color: #ff6b81; font-weight: 600;
}
.lg-lyric-line {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 6px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(74, 59, 72, 0.48);
  transition: all 0.25s ease;
  border-radius: 8px;
  cursor: pointer;      /* 提示可以点击跳转 */
}
.lg-lyric-line:hover {
  background: rgba(255, 107, 129, 0.10);
  color: rgba(74, 59, 72, 0.80);
}
.lg-lyric-line.active {
  color: #ff6b81;
  font-weight: 600;
  font-size: 14px;
  background: rgba(255, 107, 129, 0.08);
  text-shadow: 0 0 6px rgba(255, 107, 129, 0.15);
}

/* =========================================================
   收起 / 展开动画（核心：CSS grid-template-rows: 1fr ↔ 0fr）
   经验方案A：grid rows 0fr/1fr 过渡，无 max-height 末尾突变、无 padding 不同步问题。
   .lg-player 直接 THREE 子节点（3 行 grid）：
     row0 .lg-player-bar       = 标题栏（auto，【折叠/展开都常驻】刷新/随机/循环/折叠按钮都在这）
     row1 .lg-expand-wrap      = 只含 main（大封面 + 控制 + 歌词 + 播放列表）
     row2 .lg-collapsed-layout = 折叠小条 90px
   ========================================================= */
.lg-player {
  display: grid;                      /* ⚠️ 关键：启用 grid，3 行切换 0fr/1fr 控制高度 */
  grid-template-rows: auto 1fr 0fr;   /* 默认展开：row0=标题栏(auto) row1=主体(1fr) row2=折叠条(0fr→不占空间) */
  /* transition：只保留 minimized 飞出动画。
     ⚠️ 按要求去掉上下展开的"高度过渡动画"（即 grid-template-rows 不再进 transition），
     收起/展开直接瞬间切高度，不再有 0.42s 的高度伸缩。
     ⚠️ box-shadow 已移除到 .lg-mover，这里不再 transition box-shadow。 */
  transition:
    transform 0.38s cubic-bezier(.22,.61,.36,1),
    opacity 0.28s ease;
  will-change: transform;
  min-height: 0;
}

/* ==================== 首帧防跳变 ====================
   播放器挂载后，JS 会从 localStorage 读取 collapsed 状态并立刻加/去 .collapsed 类。
   如果 transition 此时已经生效，会出现"从默认尺寸动画到记忆尺寸"的奇怪入场动画，
   并可能导致 expand-wrap / collapsed-layout 在 0~0.42s 内处于"半显示"造成按钮瞬间看不见。
   解决：挂载初期强制 transition:none，下一帧后再由 JS 加上 .transition-ready 恢复过渡。 */
.lg-player:not(.transition-ready),
.lg-player:not(.transition-ready) * {
  transition: none !important;
  animation: none !important;
}

/* 【折叠态】3 行切分配：row0 标题栏不动(auto)，row1 主体收起(0fr)，row2 折叠条展开(1fr) →
   总高度 = 标题栏(约 38px) + 折叠条(90px) ≈ 128px，顶部工具栏照常可点（刷新/随机/循环/折叠） */
.lg-player.collapsed {
  grid-template-rows: auto 0fr 1fr;
}

/* ---------- 3 个直接子节点：bar（auto，不动） + expand-wrap（动画） + collapsed-layout（动画）
   grid 行内的动画节点必须 min-height:0 才能用 0fr 把高度彻底压平。
   ⚠️ 注意！.lg-expand-wrap 绝对不能加 overflow:hidden！
   否则 .lg-player-main 里所有 position:relative/absolute 子元素
   （例如下方居中的大号播放暂停按钮、循环/随机小图标按钮）只要有任何一点超出 expand-wrap
   盒模型就会被直接裁掉，表现为"按钮DOM存在但看不见"。
   collapsed-layout 本身是固定 90px 高度小条，可以保留 overflow:hidden。 */
.lg-expand-wrap {
  overflow: visible;   /* ← 关键：展开区域不做裁剪（保留按钮悬浮） */
  min-height: 0;
  width: 100%;         /* 明确占 player 整列宽度，不再由子内容决定 */
  min-width: 0;        /* 允许收缩到 0，防止子元素把宽度顶开 */
  /* 外层 .lg-player 本身有 overflow:hidden（之前已设），
     grid-template-rows: 0fr 时由 .lg-player 自己裁掉整行，
     expand-wrap 不需要再裁一层。 */
}
.lg-collapsed-layout {
  overflow: hidden;    /* 折叠小条固定高度，允许裁掉溢出的歌词文字 */
  min-height: 0;
}
/* 【关键修复：展开后底部 90px 空白】
   collapsed-layout 有固定 height:90px，会把 grid row3 的"理论 0fr"硬生生顶成 90px →
   展开后底部就多出一块什么都没有的透明带。这里在非 collapsed 态把它的 height/padding 直接干掉，
   0fr 才能真正塌成 0px。 */
.lg-player:not(.collapsed) > .lg-collapsed-layout {
  height: 0 !important;
  padding: 0 !important;
}

/* ---------- 展开主体（只含 main：封面+控制+歌词+列表）的淡入淡出 + 上移微动画 ---------- */
.lg-expand-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear;
}
.lg-player.collapsed .lg-expand-wrap {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);       /* 收的时候有一点点往上飘走的感觉，更自然 */
  transition:
    opacity 0.20s ease,
    transform 0.28s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0.22s;      /* visibility 延迟到动画快结束再切，避免中间"闪一下看不见" */
}

/* ---------- 折叠小条（90px 条）的淡入淡出 + 下移微动画（反向） ---------- */
.lg-collapsed-layout {
  /* 注意：这里不要再 display:none ↔ grid 切换了！默认就是 grid 布局（只是 opacity 0 + 0fr 隐藏）*/
  display: grid !important;
  /* 三列：左侧封面歌名(固定不被挤) | 中间歌词(弹性收缩) | 播放按钮(42px)
     （"展开/折叠切换"按钮已经移到顶部常驻标题栏里，不再放在小条里了）*/
  grid-template-columns: 150px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 16px;
  height: 90px;
  min-width: 0;
  padding: 0 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);        /* 未展开时在"下面" 8px，展开后上移归位（反向 expand-wrap）*/
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear;
}
/* 【折叠态】：collapsed-layout 显示 */
.lg-player.collapsed .lg-collapsed-layout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.32s ease 0.08s,         /* 高度动画快结束时淡入 → 高度先缩，内容再出现 */
    transform 0.34s cubic-bezier(.22,.61,.36,1) 0.06s,
    visibility 0s linear;
}

/* 旧规则清理：之前用 display:none/block 干切 → 不再需要，下面两段已被上面新规则完全覆盖 */
/* .lg-player .lg-player-main { display: block; }  */
/* .lg-player .lg-collapsed-layout { display: none; } */
/* .lg-player.collapsed .lg-player-main { display: none; }  */

/* ---------- 折叠布局三列 ---------- */
.lg-collapsed-left {
  width: 150px; min-width: 150px; max-width: 150px;
  min-height: 0;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden;
}
.lg-cover-sm {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  animation: lg-spin 10s linear infinite;
  animation-play-state: paused;
}
.lg-cover-sm.spinning { animation-play-state: running; }

.lg-collapsed-info {
  min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.lg-collapsed-name {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #3e2f3c;
}
.lg-collapsed-artist {
  font-size: 11px; opacity: 0.6; margin-top: 2px;
  color: #9f8693;
}

.lg-collapsed-right {
  width: 100%; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid rgba(255,150,170,0.22);
  padding-left: 16px;
  height: 100%;
}
.lg-collapsed-right .lyric-line {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 13px;
  color: rgba(74, 59, 72, 0.5);
  line-height: 1.6;
  transition: all 0.3s ease;
}
.lg-collapsed-right .lyric-line.active {
  color: #ff6b81;
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(255,107,129,0.18);
}

.lg-collapsed-play-btn {
  width: 42px; height: 42px; min-width: 42px; max-width: 42px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 129, 0.35);
  background-color: #ff6b81;   /* 纯色兜底（与 .lg-play-btn 相同策略） */
  background-image: linear-gradient(135deg, #ff6b81 0%, #f78fb3 100%);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(255, 107, 129, 0.28);
  transition: transform 0.2s ease;
  padding: 0;
}
.lg-collapsed-play-btn svg { width: 16px; height: 16px; }
.lg-collapsed-play-btn:hover { transform: scale(1.06); }
.lg-collapsed-play-btn:active { transform: scale(0.94); }

/* ---------- 播放列表（展开时底部） ---------- */
.lg-playlist {
  margin-top: 10px;
  max-height: 180px; overflow-y: auto;
  border-radius: 14px;
  /* 与歌词面板一致的极淡暖粉白半透明 */
  background: rgba(255, 248, 250, 0.48);
  border: 1px solid rgba(255, 235, 240, 0.55);
}
.lg-playlist::-webkit-scrollbar { width: 4px; }
.lg-playlist::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 129, 0.35);
  border-radius: 4px;
}
.lg-song-item {
  display: grid;
  grid-template-columns: 26px 40px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(255, 235, 240, 0.40);
}
.lg-song-item:last-child { border-bottom: none; }
.lg-song-item:hover { background: rgba(255, 246, 248, 0.60); }
.lg-song-item.active {
  background: rgba(255, 107, 129, 0.10);
}
.lg-song-item .idx {
  font-size: 12px; color: #b89fac; text-align: center;
}
.lg-song-item.active .idx { color: #ff6b81; font-weight: 700; }
.lg-song-item img {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
}
.lg-song-item .info { min-width: 0; }
.lg-song-item .sname {
  font-size: 13px; font-weight: 600; color: #3e2f3c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-song-item .sartist {
  font-size: 11px; color: #9f8693;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.lg-tag {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  border: 1px solid #84fab0; color: #34b98a; font-size: 10px; margin-left: 6px;
  vertical-align: middle;
}

/* ---------- Toast ---------- */
#lg-toast {
  position: fixed;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%) translateY(30px);
  background: rgba(62, 47, 60, 0.88);
  color: #fff;
  padding: 10px 18px;
  border-radius: 16px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  z-index: 99999;
  max-width: calc(100vw - 48px);
  white-space: normal;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#lg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 移动端 ---------- */
@media (max-width: 520px) {
  /* ⚠️ 只设 left / bottom，不设 right！
     同时设 left+right 会让 root 宽度=100vw-24px（把整屏撑满），
     mover 作为 block 会继承 root 宽度，导致 tab 的 left:100%
     按 mover（过宽）定位 → player 右缘到 tab 左缘之间多出一块"透明空白"。
     取消 right 让 root 宽度由内容（mover / player）决定：
     player(100vw-50px) + tab(26px) = 100vw-24px → 左右各 12px 边距，正好贴满屏幕无空白。 */
  #lg-music-player-root { left: 12px; bottom: 12px; right: auto; }
  .lg-player {
    width: calc(100vw - 50px);
    max-width: calc(100vw - 50px);   /* 移动端双保险：任何情况下不超过此宽度，歌词/Oops 长句都撑不开 */
    box-sizing: border-box;
    border-radius: 22px 0 0 22px;
    overflow: hidden;
  }

  .lg-cover-wrap { width: 72px; height: 72px; }
  .lg-cover { border-radius: 18px; }
  .lg-song-name { font-size: 14px; }
  .lg-song-artist { font-size: 11px; }

  /* --- 移动端工具栏右按钮组（刷新/随机/循环/折叠）防溢出 ---
     4个按钮同一组，flex-shrink:0 + overflow:hidden 固定不溢出。
     移动端隐藏刷新文字、缩小 gap 来节省宽度。
     精确像素上限：4按钮×28px + 3 gap×6px = 130px。 */
  .lg-player-bar { padding: 10px 12px 0; gap: 6px; }
  .lg-player-bar-right {
    gap: 6px;
    flex-wrap: nowrap;
    max-width: 130px !important;  /* 4×28 + 3×6 = 130，精确硬限，任何设备不会溢出边界 */
  }
  .lg-player-title { max-width: calc(100% - 140px); }  /* 给按钮组留 140px（130+10 缓冲） */
  /* 移动端隐藏刷新按钮的"刷新"文字，只保留图标（宽度从 ~60px → 28px，立刻省 32px）*/
  .lg-refresh-btn-label { display: none; }
  .lg-refresh-btn {
    padding: 0;
    width: 28px !important;
    min-width: 28px !important;  /* 覆盖桌面端的 54px min-width，强制同尺寸 */
    max-width: 28px !important;
    height: 28px;
    border-radius: 50% !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* --- 移动端控制条：极限宽度压缩，保证"上一首/播放/下一首"永远不溢出 --- */
  .lg-controls-row {
    gap: 8px;              /* 从 14px 缩到 8px，省 12px */
    margin: 10px 0 4px;
    justify-content: flex-start;  /* 左对齐，而不是 center：避免 range 缩到很小时控件"居中飘移" */
  }
  /* 上一首/下一首小圆按钮：尺寸稍缩 */
  .lg-controls-row > .lg-icon-btn { width: 26px; height: 26px; }
  .lg-controls-row > .lg-icon-btn svg { width: 12px; height: 12px; }
  /* 主播放按钮：46 → 40，省 12px */
  .lg-play-btn { width: 40px; height: 40px; min-width: 40px; max-width: 40px; }
  .lg-play-btn svg { width: 16px; height: 16px; }
  /* 音量：移动端隐藏喇叭图标（range 本身已经暗示音量），margin-left:4px，进一步省空间 */
  .lg-volume { margin-left: 4px; gap: 0; }
  .lg-volume > span { display: none; }
  .lg-volume input[type=range] {
    width: 52px;              /* 桌面 70 → 移动 52 */
    max-width: 100%;          /* 允许在 info-col 极窄时缩到 <52px，绝不溢出 */
    min-width: 30px;          /* 最小 30px，还能拖 */
  }

  .lg-player.collapsed .lg-collapsed-layout {
    /* 移动端三列：125px | 歌词 | 38px 播放 */
    grid-template-columns: 125px minmax(0, 1fr) 38px;
    height: 82px;
    gap: 10px;
    padding: 0 12px;
  }
  .lg-collapsed-left { width: 125px; min-width: 125px; max-width: 125px; gap: 8px; }
  .lg-cover-sm { width: 48px; height: 48px; }
  .lg-collapsed-name { font-size: 13px; }
  .lg-collapsed-right { padding-left: 10px; }
  .lg-collapsed-right .lyric-line { font-size: 11px; }
  .lg-collapsed-right .lyric-line.active { font-size: 12px; }
  .lg-collapsed-play-btn {
    width: 38px; height: 38px; min-width: 38px; max-width: 38px;
  }
  .lg-collapsed-play-btn svg { width: 14px; height: 14px; }
}

/* ---------- 缓冲 / 播放中 / 错误 状态视觉（日系温柔动效，不廉价）---------- */
/* 原则：只用淡粉/半透明白做光效,不用彩色/强对比,不闪,不晃 */

/* --- 1) 缓冲中：封面外围呼吸光圈（比 player 自带阴影更柔和的粉色扩散光）--- */
.lg-player.lg-buffering .lg-cover-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(255, 160, 180, 0.55) 0%, rgba(255, 190, 205, 0.25) 35%, rgba(255, 220, 230, 0.0) 72%);
  animation: lg-breathe 1.9s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.lg-player.lg-buffering .lg-cover-sm {
  position: relative;
}
/* 收起状态下小封面也有呼吸感（用 box-shadow，避免 ::before 层级问题） */
.lg-player.lg-buffering .lg-cover-sm {
  box-shadow: 0 0 0 4px rgba(255, 160, 180, 0.22), 0 0 18px 6px rgba(255, 160, 180, 0.28);
  animation: lg-breathe-box 1.9s ease-in-out infinite;
}
@keyframes lg-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes lg-breathe-box {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 160, 180, 0.18), 0 0 14px 4px rgba(255, 160, 180, 0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 160, 180, 0.28), 0 0 22px 10px rgba(255, 160, 180, 0.34); }
}

/* --- 2) 缓冲中：meta 文案柔和脉冲（"缓冲中…(开始加载)" 这一行）--- */
.lg-player.lg-buffering .lg-song-meta {
  color: #e76a82;
  opacity: 1;
  animation: lg-pulse 1.4s ease-in-out infinite;
}
@keyframes lg-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* --- 3) 进度条：已缓冲范围（JS 持续设置 --lg-buffered）--- */
.lg-progress::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--lg-buffered, 0%);
  background: rgba(255, 107, 129, 0.16);
  border-radius: 4px;
  transition: width 0.25s linear;
  z-index: 0;
}
.lg-progress-bar {
  position: relative;
  z-index: 1;
}

/* --- 4) 缓冲中：进度条上的流光扫过（表示"正在下载",不刺眼）--- */
.lg-player.lg-buffering .lg-progress::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: lg-shimmer 1.4s linear infinite;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: soft-light;
}
@keyframes lg-shimmer {
  0%   { transform: translateX(-40px); }
  100% { transform: translateX(520px); }
}

/* --- 5) 错误态：meta 文字变红 + 轻微震动（不晃眼,5 秒自动消失）--- */
.lg-player.lg-play-error .lg-song-meta {
  color: #d6485f;
  opacity: 1;
  animation: lg-shake 0.35s ease-in-out 0.15s 2;
}
.lg-player.lg-play-error .lg-cover {
  box-shadow: 0 8px 24px rgba(214, 72, 95, 0.26);
}
@keyframes lg-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .lg-cover, .lg-cover-sm { animation: none !important; }
  .lg-player.lg-buffering .lg-cover-wrap::before,
  .lg-player.lg-buffering .lg-cover-sm,
  .lg-player.lg-buffering .lg-song-meta,
  .lg-player.lg-buffering .lg-progress::after,
  .lg-player.lg-play-error .lg-song-meta { animation: none !important; }
}