/* ===== 背景音乐 / 背景图 控制条（V77） =====
   位置：左下角、「回到顶部」按钮正上方。
     右下角被在线客服气泡 .chat-fab 占用，左下角被「回到顶部」占用。

   V86 修正：原来按「46 高 + 26 底 = 72」算成 84px 就够了，这是错的。
     .to-top 实际是 bottom:70px + height:46px，占掉 70~116px 这一段；
     控制条自己的 bottom 才是「底边距」，量的是下沿，不是上沿。
     84px 落在 to-top 的 70~116 区间内 —— 实侧重叠 32px，
     电脑上「回到顶部」被压掉一半，手机上因为 @media 改过才侥幸没压到。
     现在统一抬到 126px（116 + 10 间隙）；另外 bgmedia.js 里有 JS 兜底，
     to-top 样式再变也会自动让开。
   z-index 9996：低于客服(9998)与回到顶部(9997)，被遮住也不影响主功能。
   配色不跟随主题：主题会切到深色，跟随会导致深色模式下控制条看不清。 */

.xjfc-med{
  position:fixed;left:22px;
  bottom:calc(126px + env(safe-area-inset-bottom));z-index:9996;
  font-family:inherit;
  display:none;               /* JS 判定有内容后才显示 */
}
.xjfc-med.ready{display:block}

/* ---- 收起态：一个小圆钮 ---- */
.xjfc-med-fab{
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#2b3242,#1b2130);
  color:#e8c26a;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;
  transition:transform .18s,filter .15s;
  position:relative;
}
.xjfc-med-fab:hover{filter:brightness(1.15);transform:scale(1.05)}
.xjfc-med-fab.playing{animation:xjfcPulse 2.4s ease-in-out infinite}
@keyframes xjfcPulse{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.22)}
  50%{box-shadow:0 4px 18px rgba(232,194,106,.55)}
}
/* 正在播放时右上角一个跳动的小点，不开声音也能看出状态 */
.xjfc-med-fab .eq{
  position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:#2dc100;display:none;
}
.xjfc-med-fab.playing .eq{display:block}

/* ---- V85：自动播放被浏览器拦下的状态 ----
   桌面版 Chrome 默认拦「无交互的有声自动播放」，这是浏览器策略，改不了。
   不给出任何提示的话，站长看到的是「明明开着音乐却没声音」，
   只会以为配置坏了。这里让圆钮呼吸闪烁，并冒一个气泡告诉他点一下。 */
.xjfc-med-fab.blocked{animation:xjfcBlink 1.5s ease-in-out infinite}
@keyframes xjfcBlink{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.22)}
  50%{box-shadow:0 0 0 6px rgba(232,194,106,.28),0 4px 14px rgba(0,0,0,.22)}
}
.xjfc-med-bub{
  display:none;position:absolute;left:52px;bottom:12px;
  white-space:nowrap;background:#2b3242;color:#e8c26a;
  font-size:12px;line-height:1;padding:7px 10px;border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
/* 小三角指着圆钮 */
.xjfc-med-bub::before{
  content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;
  border:5px solid transparent;border-right-color:#2b3242;border-left:0;
}
@media (prefers-reduced-motion:reduce){
  .xjfc-med-fab.blocked{animation:none}
  .xjfc-med-fab.playing{animation:none}
}

/* ---- 展开面板 ---- */
.xjfc-med-panel{
  position:absolute;left:0;bottom:54px;
  width:246px;background:#fff;border-radius:12px;
  box-shadow:0 10px 34px rgba(20,26,38,.22);
  border:1px solid #e6ebf3;
  /* 限高 + 纵向滚动：
     面板高约 336px，锚在 bottom 上往上长。矮视口（横屏手机、小窗口）
     顶部会被切到视口外 —— 而 overflow:hidden 又不能滚，
     结果连标题栏那个「×」都够不着，面板关不掉。
     100vh - 200px = 扣掉底边距(84+44+48=176)再留 24px 余量。
     用 overflow-y:auto 而非 hidden：非 visible 的 overflow 一样会按圆角裁剪。 */
  max-height:calc(100vh - 200px);
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:none;
}
.xjfc-med.open .xjfc-med-panel{display:block}

.xjfc-med-hd{
  padding:9px 12px;background:linear-gradient(135deg,#2b3242,#1b2130);
  color:#e8c26a;font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;
}
.xjfc-med-hd button{
  background:none;border:0;color:#9aa3b2;cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;font-family:inherit;
}
.xjfc-med-hd button:hover{color:#fff}

.xjfc-med-sec{padding:11px 12px;border-bottom:1px solid #f0f2f6}
.xjfc-med-sec:last-child{border-bottom:0}
.xjfc-med-t{
  font-size:11px;color:#8b93a1;font-weight:700;margin-bottom:7px;
  letter-spacing:.4px;
}

/* 曲名 / 图名 */
.xjfc-med-name{
  font-size:12.5px;color:#2f3742;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:8px;min-height:17px;
}
.xjfc-med-name.off{color:#b3b9c4;font-weight:400}

/* 曲目 / 背景图下拉：一眼看全所有选项，不用一首首按「下一首」试。
   关掉时用灰色（.off）—— 文字说明「已关闭」太占地方，灰掉就够了。
   箭头用内联 SVG，避免多请求一张图。 */
.xjfc-med-sel{
  width:100%;height:31px;margin-bottom:8px;padding:0 24px 0 8px;
  border:1px solid #dfe4ec;background-color:#fafbfc;border-radius:7px;
  font-size:12.5px;color:#2f3742;font-family:inherit;cursor:pointer;
  outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238b93a1'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;
  text-overflow:ellipsis;
}
.xjfc-med-sel:hover{border-color:#c9d2e0}
.xjfc-med-sel.off{color:#b3b9c4}

/* 按钮行 */
.xjfc-med-row{display:flex;align-items:center;gap:6px}
.xjfc-med-btn{
  flex:0 0 auto;min-width:32px;height:30px;padding:0 9px;
  border:1px solid #dfe4ec;background:#fafbfc;border-radius:7px;
  cursor:pointer;font-size:12.5px;color:#3a4352;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .15s,border-color .15s;
}
.xjfc-med-btn:hover{background:#f0f3f8;border-color:#c9d2e0}
.xjfc-med-btn.main{
  background:linear-gradient(135deg,#e8c26a,#c99a30);
  border-color:#c99a30;color:#241d10;font-weight:700;
}
.xjfc-med-btn.main:hover{filter:brightness(1.06)}
.xjfc-med-btn:disabled{opacity:.42;cursor:not-allowed}

/* 音量 */
.xjfc-med-vol{
  flex:1;height:4px;-webkit-appearance:none;appearance:none;
  background:#e4e8ef;border-radius:3px;outline:none;cursor:pointer;
}
.xjfc-med-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:#c99a30;cursor:pointer;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.xjfc-med-vol::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;border:2px solid #fff;
  background:#c99a30;cursor:pointer;
}

/* 底部：全部关闭 */
.xjfc-med-ft{
  padding:8px 12px;background:#fafbfc;border-top:1px solid #f0f2f6;
  display:flex;gap:6px;
}
.xjfc-med-off{
  flex:1;height:29px;border:1px solid #e3e8f0;background:#fff;
  border-radius:7px;cursor:pointer;font-size:12px;color:#8b93a1;
  font-family:inherit;
}
.xjfc-med-off:hover{background:#f5f7fa;color:#e0483c;border-color:#f5c6c0}

/* 提示条 */
.xjfc-med-tip{
  padding:7px 12px;font-size:11.5px;line-height:1.6;
  background:#fff8e6;color:#8a6d1f;border-bottom:1px solid #f4e9c8;
}
.xjfc-med-tip:empty{display:none}

/* 手机端 */
@media (max-width:760px){
  /* ⚠ 这里必须比「回到顶部」.to-top 的上沿高。
     手机端 .to-top 是 bottom:calc(70px + safe) 且高 42px
     —— 占掉 70~112px 这一段。
     126 = 112(顶部按钮上沿) + 14(间距)，两者彻底分开。 */
  .xjfc-med{left:14px;bottom:calc(126px + env(safe-area-inset-bottom))}
  .xjfc-med-fab{width:40px;height:40px;font-size:15px}
  .xjfc-med-panel{
    width:min(246px,calc(100vw - 28px));bottom:48px;
    /* 126+40+48 = 214 已占掉，再留 26 余量 */
    max-height:calc(100vh - 240px);
  }
}

/* ---- 背景图：挂在 body 上，零 z-index 风险 ----
   为什么不用 fixed 定位层：body 有 background（--bg），
   负 z-index 子元素会被父元素背景盖住，这是 CSS 规范行为，改不得。
   直接把图设成 body 的 background-image 最干净。
   白色半透明渐变叠加 = 淡化效果，正文区各自有白底，不会挡阅读。 */
body.xjfc-bg-on{
  background-image:
    linear-gradient(rgba(255,255,255,var(--xjfc-bg-op,.4)),
                    rgba(255,255,255,var(--xjfc-bg-op,.4))),
    var(--xjfc-bg-img,none);
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:fixed;
}
body.xjfc-bg-on.xjfc-bg-cover{background-size:cover}
body.xjfc-bg-on.xjfc-bg-tile{background-size:auto;background-repeat:repeat}

/* iOS / 安卓上 background-attachment:fixed 有性能问题和渲染 bug，
   退化为跟随滚动（视觉差别很小，但顺滑很多） */
@media (max-width:760px){
  body.xjfc-bg-on{background-attachment:scroll}
}

/* 开启背景图后，让原本纯色底的内容区略微透一点，图才透得出来。
   只针对没有自己底色的容器，卡片/表格一律不动，避免文字压在图上读不清。 */
/* 只放开本来就没有底色的容器。
   ⚠ 别再写 .m-page —— 手机版根本没有这个类名（页脚是 .m-foot，
   且它本来就没背景色），写上去是一条永远不生效的死规则。 */
body.xjfc-bg-on .site-footer{background:transparent}