/* ============================================================
   全站音乐引擎 · 底部常驻播放器
   ── 只在有歌在放/暂停时出现；音乐页自己有大播放器，会关掉这个
   ── 变量全走 site.css，亮暗主题自动跟
   ============================================================ */

.hkp{
  position:fixed;left:18px;bottom:18px;z-index:78;
  display:flex;align-items:center;gap:10px;
  padding:8px 10px 8px 8px;border-radius:16px;
  border:1px solid var(--line-2);
  background:var(--sheet);
  -webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);
  box-shadow:var(--shadow);
  color:var(--text);
  transform:translateY(14px) scale(.98);opacity:0;pointer-events:none;
  transition:transform .34s var(--ease),opacity .28s var(--ease),border-color .3s;
  max-width:min(430px,calc(100vw - 36px));
}
.hkp.on{transform:none;opacity:1;pointer-events:auto}
.hkp:hover{border-color:var(--accent)}
[data-perf="lite"] .hkp{transition:opacity .2s linear}

.hkp-cover{
  position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;text-decoration:none;
  background:
    radial-gradient(75% 75% at 30% 22%,var(--accent-soft),transparent 62%),
    conic-gradient(from 210deg,var(--surface-3),var(--surface-2),var(--surface-3));
  border:1px solid var(--line);
}
.hkp-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hkp-cover.has-cover > svg{display:none}
.hkp-cover.has-cover{background:var(--surface-2)}
.hkp.blocked .hkp-meta span{color:var(--accent)}
.hkp.playing .hkp-cover::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  animation:hkpPulse 2.8s ease-in-out infinite;
}
@keyframes hkpPulse{0%,100%{opacity:.25}50%{opacity:.9}}

.hkp-meta{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.hkp-meta b{
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;
}
.hkp-meta span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}

.hkp-viz{width:46px;height:26px;flex:0 0 auto;display:block;opacity:.92}

.hkp-ctl{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.hkp-btn{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--muted);
  transition:background .2s,color .2s,border-color .2s;
}
.hkp-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.hkp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hkp-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hkp-btn.main{width:34px;height:34px;border-radius:50%;color:var(--accent-ink);border:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px -10px var(--accent)}
.hkp-btn.main:hover{filter:brightness(1.06);color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.hkp-btn.main svg{width:17px;height:17px;fill:currentColor;stroke:none}
.hkp-btn[disabled]{opacity:.4;cursor:default}

.hkp-bar{
  position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:2px;
  background:var(--surface-3);overflow:hidden;cursor:pointer;
}
.hkp-bar i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .18s linear}
.hkp-bar:hover{height:5px;bottom:2px}
.hkp.playing .hkp-bar i{transition:none}

/* 收起后的小圆钮：让用户随时能叫回来 */
.hkp-mini{
  position:fixed;right:16px;bottom:18px;z-index:77;width:42px;height:42px;border-radius:50%;
  display:none;place-items:center;cursor:pointer;border:1px solid var(--line-2);
  background:var(--sheet);-webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);
  box-shadow:var(--shadow-sm);color:var(--accent);
}
.hkp-mini.on{display:grid}
.hkp-mini svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hkp-mini.playing svg{fill:currentColor;stroke:none}
.hkp-mini:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 手机上不要压到底部导航 */
@media (max-width:860px){
  html.has-mnav .hkp{bottom:76px;left:12px;max-width:calc(100vw - 24px)}
  html.has-mnav .hkp-mini{bottom:76px;right:12px}
  .hkp-meta b,.hkp-meta span{max-width:120px}
  .hkp-viz{display:none}
}
@media (max-width:520px){
  .hkp{padding:7px 8px;border-radius:14px}
  .hkp-cover{width:38px;height:38px;border-radius:10px}
  .hkp-meta b,.hkp-meta span{max-width:86px}
}

/* 在音乐页隐藏底部播放器（那一页有自己的大播放器） */
body[data-hk-player="off"] .hkp,
body[data-hk-player="off"] .hkp-mini{display:none !important}

@media (prefers-reduced-motion: reduce){
  .hkp{transition:opacity .15s linear}
  .hkp.playing .hkp-cover::after{animation:none}
}

/* 自动播放被拦时，主按钮闪一下，提示「点我」 */
.hkp.blocked .hkp-btn.main{animation:hkpNudge 1.6s ease-in-out infinite}
@keyframes hkpNudge{0%,100%{transform:none;box-shadow:0 8px 20px -10px var(--accent)}
50%{transform:scale(1.08);box-shadow:0 10px 26px -8px var(--accent)}}
@media (prefers-reduced-motion: reduce){.hkp.blocked .hkp-btn.main{animation:none}}