/* ========== 喵喵猫咪电台 · 本地店长版 ========== */
.cat-music{position:relative;display:inline-flex;align-items:center;font-family:inherit}

/* 迷你唱片机：底座 + 转盘 + 唱针 */
.cat-music-face{position:relative;width:50px;height:50px;padding:0;border:2px solid var(--ink,#493c58);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#f7f2ee 0 60%,#ece3e7 100%);
  cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 0 rgba(73,60,88,.13);
  transition:transform .18s ease,box-shadow .18s ease}
.cat-music-face:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 6px 0 rgba(73,60,88,.13)}
.cat-music-face:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(73,60,88,.13)}
.cat-music-face:focus-visible{outline:3px solid #a9d5c7;outline-offset:3px}

/* 会转的唱片 */
.cat-music-disc{position:absolute;inset:4px;border-radius:50%;overflow:hidden;pointer-events:none;
  background:conic-gradient(from 0deg,
    #f0dee5 0deg,#f2ebd9 45deg,#e0ebe7 90deg,#e3e9f1 135deg,
    #e8e4f0 180deg,#f0e2e8 225deg,#f0ecdc 270deg,#e1ebe7 315deg,#f0dee5 360deg);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),inset 0 0 0 5px rgba(73,60,88,.06);
  animation:catMusicSpin 12s linear infinite}
/* 放射状唱片纹 + 一道扫光：转起来一眼就看得到 */
.cat-music-disc::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.42) 44%,rgba(255,255,255,0) 52%),
    repeating-conic-gradient(from 0deg,
      rgba(73,60,88,.22) 0deg 2.6deg,
      rgba(255,255,255,.34) 2.6deg 5.2deg,
      rgba(255,255,255,0) 5.2deg 30deg)}
/* 盘边的小贴纸，跟着唱片一起绕圈 */
.cat-music-disc::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:#dfb0c3;border:1.5px solid rgba(73,60,88,.36);box-shadow:0 0 0 2px rgba(255,255,255,.45);
  transform:translate(-12px,11px)}

/* 播放时只是稍微快一点，依旧很慢 */
.cat-music.is-playing .cat-music-disc{animation-duration:9s}
.cat-music.is-playing .cat-music-face{box-shadow:0 4px 0 rgba(73,60,88,.13),0 0 0 4px rgba(198,226,217,.45)}
@keyframes catMusicSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* 唱针：固定不动，唱片在下面转，才有"唱片机"的感觉 */
.cat-music-arm{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;
  transform-origin:39px 11px}
.cat-music.is-playing .cat-music-arm{animation:catMusicArm 3.6s ease-in-out infinite}
@keyframes catMusicArm{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-4deg)}}

.cat-music-cat{position:relative;z-index:2;width:29px;height:29px;display:block;overflow:visible}
.catMusicEye{transform-box:fill-box;transform-origin:center;animation:catMusicBlink 8s ease-in-out infinite}
@keyframes catMusicBlink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}96%{transform:scaleY(1)}}

.cat-music-note{position:absolute;right:-5px;top:-8px;font-size:13px;line-height:1;color:#c3a0b4;z-index:5;
  text-shadow:0 1px 0 #fff,0 0 6px rgba(255,255,255,.95);pointer-events:none}
.cat-music-note-2{right:auto;left:-7px;top:-2px;font-size:10px;color:#a9bede;opacity:0}
.cat-music.is-playing .cat-music-note{animation:catMusicNote 2.4s ease-in-out infinite}
.cat-music.is-playing .cat-music-note-2{animation:catMusicNote2 3s ease-in-out infinite}
@keyframes catMusicNote{0%,100%{transform:translateY(0) rotate(-6deg);opacity:.7}50%{transform:translateY(-5px) rotate(7deg);opacity:1}}
@keyframes catMusicNote2{0%{transform:translateY(3px);opacity:0}35%{opacity:.75}100%{transform:translateY(-10px);opacity:0}}

/* 展开面板 */
.cat-music-panel{position:absolute;top:62px;right:0;width:306px;z-index:60;padding:13px;
  border:3px solid var(--ink,#493c58);border-radius:20px;background:#fffdf8;
  box-shadow:0 10px 0 rgba(73,60,88,.13),0 20px 36px rgba(73,60,88,.20);
  animation:catMusicPop .18s ease-out}
.cat-music-panel[hidden]{display:none}
@keyframes catMusicPop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.cat-music-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.cat-music-head b{font-size:13px;color:var(--ink,#493c58)}
.cat-music-close{width:24px;height:24px;padding:0;border:2px solid var(--ink,#493c58);border-radius:50%;
  background:#f5ecf1;color:var(--ink,#493c58);font-size:14px;font-weight:900;line-height:1;cursor:pointer}
.cat-music-close:hover{background:#e9d9e2}

.cat-music-now{border:2px dashed #e3c9dd;border-radius:14px;background:#fff8fb;padding:8px 10px;margin-bottom:9px}
.cat-music-label{display:block;font-size:8px;letter-spacing:.12em;color:#a98fb5;font-weight:900;margin-bottom:2px}
.cat-music-now b{display:block;font-size:12px;color:var(--ink,#493c58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cat-music-bar{position:relative;height:9px;border:2px solid var(--ink,#493c58);border-radius:999px;background:#fffaf5;cursor:pointer;overflow:hidden}
.cat-music-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c3e2d8,#f0e4c4,#eccdd9);transition:width .12s linear}
.cat-music-time{display:flex;justify-content:space-between;font-size:9px;color:#9b88a8;font-weight:900;margin:4px 2px 9px}

.cat-music-ctrl{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:9px}
.cat-music-ctrl button{width:34px;height:34px;padding:0;border:2px solid var(--ink,#493c58);border-radius:12px;
  background:#fff;color:var(--ink,#493c58);font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 rgba(73,60,88,.13);
  transition:transform .12s ease}
.cat-music-ctrl button:hover{transform:translateY(-1px)}
.cat-music-ctrl button:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(73,60,88,.16)}
.cat-music-ctrl .cat-music-play{width:44px;height:44px;border-radius:50%;font-size:16px;background:linear-gradient(135deg,#f6e8c9,#f4dde8)}
.cat-music-ctrl .is-on{background:linear-gradient(135deg,#e4f2ee,#d8ece5)}
.cat-music-ctrl .is-loop-one{background:linear-gradient(135deg,#ebe7f5,#e0d9f0)}

.cat-music-vol{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:6px;margin-bottom:10px}
.cat-music-vol span{font-size:12px;text-align:center}
.cat-music-vol input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border:2px solid var(--ink,#493c58);
  border-radius:999px;background:#fff;outline:none;cursor:pointer}
.cat-music-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border:2px solid var(--ink,#493c58);
  border-radius:50%;background:#ecc4d4;cursor:pointer}
.cat-music-vol input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--ink,#493c58);
  border-radius:50%;background:#ecc4d4;cursor:pointer}

.cat-music-list-wrap{border:2px solid #eee4ef;border-radius:14px;background:#fffbf7;padding:7px;margin-bottom:9px}
.cat-music-list-head{display:flex;justify-content:space-between;font-size:9px;font-weight:900;color:#a98fb5;margin:1px 3px 6px}
.cat-music-list{list-style:none;margin:0;padding:0;max-height:150px;overflow-y:auto}
.cat-music-list li{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:10px;cursor:pointer;font-size:11px;
  color:var(--ink,#493c58);font-weight:800}
.cat-music-list li:hover{background:#fdeff5}
.cat-music-list li.is-active{background:#fff5d9;box-shadow:inset 0 0 0 2px #f0dfae}
.cat-music-list li .cat-music-dot{width:14px;flex:0 0 14px;text-align:center;font-size:10px}
.cat-music-list li .cat-music-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-music-list li .cat-music-del{width:20px;height:20px;flex:0 0 20px;padding:0;border:2px solid #e6d2e0;border-radius:50%;
  background:#fff;font-size:10px;line-height:1;cursor:pointer;color:#b98aa2}
.cat-music-list li .cat-music-del:hover{background:#fbdce8;border-color:#cf9fb4}
.cat-music-empty{padding:10px;text-align:center;font-size:10px;color:#b5a3bf;font-weight:800}

.cat-music-add{width:100%;padding:9px;border:2px solid var(--ink,#493c58);border-radius:13px;
  background:linear-gradient(135deg,#f2dce5,#f4ecdc 52%,#e2f0ec);
  color:var(--ink,#493c58);font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 rgba(73,60,88,.14)}
.cat-music-add:hover{filter:brightness(1.03)}
.cat-music-add:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(73,60,88,.16)}
.cat-music-tip{margin:8px 2px 0;font-size:9px;line-height:1.5;color:#b5a3bf;font-weight:800;text-align:center}

/* 把音乐拖到唱片上 */
.cat-music.is-dropping .cat-music-face{transform:scale(1.12);box-shadow:0 0 0 6px rgba(201,246,232,.75),0 6px 0 rgba(73,60,88,.18)}

/* 展开面板要盖在右侧宠物详情卡上面（仅桌面端） */
@media (min-width:721px){
  .topbar{position:relative;z-index:50}
  .cat-music-panel{max-height:calc(100vh - 150px);overflow-y:auto}
}

/* 手机端：面板不要跑出屏幕 */
@media (max-width:720px){
  .cat-music-panel{left:0;right:auto;width:min(306px,calc(100vw - 24px));max-height:min(72vh,470px);overflow-y:auto}
}

/* 系统开启"减少动态效果"就不转 */
@media (prefers-reduced-motion:reduce){
  .cat-music-disc,.cat-music-arm,.catMusicEye,.cat-music-note,.cat-music-note-2{animation:none}
}

/* 没有喜欢的歌？去网易云翻翻 */
.cat-music-actions{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.cat-music-actions .cat-music-add{flex:1 1 auto;margin:0}
.cat-music-netease{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 11px;border:2px solid var(--ink,#493c58);
  border-radius:13px;background:#fff;color:var(--ink,#493c58);font-size:11px;font-weight:900;text-decoration:none;
  white-space:nowrap;box-shadow:0 4px 0 rgba(73,60,88,.14);cursor:pointer}
.cat-music-netease img{width:18px;height:18px;display:block;border-radius:50%;pointer-events:none}
.cat-music-netease:hover{background:#ffeceb;box-shadow:0 6px 0 rgba(73,60,88,.14);transform:translateY(-1px)}
.cat-music-netease:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(73,60,88,.16)}