/* ============================================================
   音乐灵动岛 2.0（对齐 lczld.cn 实现）
   一个宿主两种形态：欢迎语 island-content ↔ 播放器 is-music
   ============================================================ */

/* APlayer 原生界面整体隐藏，只留音频内核 */
body .ip-music{display:none !important}

/* ---------- 宿主：欢迎语形态 ---------- */
#ipIsland{
  position:fixed; top:75px; left:50%; z-index:99990;
  transform:translateX(-50%) scale(0); transform-origin:center;
  width:auto; max-width:calc(100vw - 24px); height:40px;
  background:#241f18; border-radius:25px; color:#fdfaf1;
  display:flex; align-items:center; justify-content:space-between;
  padding-left:36px; padding-right:20px;
  box-shadow:0 0 10px rgba(0,0,0,.45);
  overflow:visible; pointer-events:none;
  transition:transform .4s ease-in-out, height .6s ease-in-out, border-radius .6s ease-in-out,
             box-shadow .5s ease-in-out, opacity .5s ease-in-out, padding-left .8s ease-in-out;
}
#ipIsland.active{transform:translateX(-50%) scale(1); opacity:1; pointer-events:auto}
#ipIsland.inactive{transform:translateX(-50%) scale(0); opacity:0; pointer-events:none}

/* 头像（欢迎态左上圆标） */
#ipIsland>img{
  position:absolute; left:8px; width:24px; height:24px; border-radius:50%; object-fit:cover;
  transition:opacity .18s ease, visibility 0s linear, height .8s ease-in-out, width .8s ease-in-out,
             left .8s ease-in-out, filter .8s ease-in-out;
}
#ipIsland:hover{height:60px; border-radius:50px; padding-left:56px}
#ipIsland:hover>img{width:34px; height:34px; left:12px}

/* 欢迎文字 + 音条 */
#ipIsland .ip-island-msg{
  opacity:0; transition:opacity .9s ease-in-out, filter .8s ease-in-out;
  font-weight:700; flex:0 0 auto; margin-left:auto; width:auto; text-align:right;
}
#ipIsland.active .ip-island-msg{opacity:1}
#ipIslandText{
  margin:0; font-size:13px; padding-right:12px; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; color:#fdfaf1; font-weight:700; line-height:1; text-align:right;
}
.ip-msg-bars{display:flex; align-items:center; justify-content:flex-end; gap:3px; height:100%}
.ip-msg-bar{width:2px; height:13px; background:#9fb096; animation:ip-island-bounce 1s ease-in-out infinite alternate}
.ip-msg-bar:nth-of-type(2){animation-duration:.9s}
.ip-msg-bar:nth-of-type(3){animation-duration:.8s}
.ip-msg-bar:nth-of-type(4){animation-duration:.7s}
.ip-msg-bar:nth-of-type(5){animation-duration:.6s}
.ip-msg-bar:nth-of-type(6){animation-duration:.9s}
.ip-msg-bar:nth-of-type(7){animation-duration:.7s}
@keyframes ip-island-bounce{
  0%{transform:scaleY(.3); background:#9fb096}
  50%{transform:scaleY(1); background:#d9a566}
  to{transform:scaleY(.3); background:#9fb096}
}

/* ---------- 宿主：播放器形态（is-music） ---------- */
#ipIsland.is-music{
  width:64px; height:40px; padding-left:0; padding-right:0; overflow:hidden;
  border-radius:999px; background:#241f18;
  box-shadow:0 14px 32px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  transform:translateX(-50%) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:width .38s cubic-bezier(.2,.8,.2,1), height .38s cubic-bezier(.2,.8,.2,1),
             border-radius .38s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease,
             transform .4s ease, opacity .3s ease;
}
#ipIsland.is-music:hover,
#ipIsland.is-music.is-open{
  width:min(320px,calc(100vw - 24px)); height:58px; border-radius:29px;
  box-shadow:0 22px 50px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12);
}
/* 下滑藏岛、上滑复现 */
#ipIsland.is-music.is-scroll-hidden{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(-18px) scale(.92);
}

/* 播放态下隐藏欢迎内容（opacity + visibility 延迟切换，坑④配套） */
#ipIsland.is-music>img,
#ipIsland.is-music .ip-island-msg{
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, visibility 0s linear .18s;
}

/* ---------- 播放器内容层 ---------- */
#ipIsland .ip-player{opacity:0; transition:opacity .22s ease}
#ipIsland:not(.is-music) .ip-player{display:none}
#ipIsland.is-music .ip-player{
  opacity:1; position:absolute; inset:0; display:flex; align-items:center;
  width:100%; height:100%; color:#fdfaf1; cursor:pointer; user-select:none;
}
.ip-island-cover{
  flex:0 0 auto; width:26px; height:26px; margin-left:4px; overflow:hidden;
  border-radius:50%; background:#191510;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:width .35s ease, height .35s ease, margin .35s ease, border-radius .35s ease;
}
.ip-island-cover img{display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none}
#ipIsland.is-music:hover .ip-island-cover,
#ipIsland.is-music.is-open .ip-island-cover{width:40px; height:40px; margin-left:9px; border-radius:12px}

/* 播放状态跳动音条 */
.ip-island-bars{display:flex; align-items:center; justify-content:center; gap:2px; margin:0 auto; width:18px; height:16px}
.ip-island-bars i{display:block; width:2px; height:7px; border-radius:2px; background:#9fb096}
.ip-island-bars i:nth-child(2){height:12px; background:#d9a566}
.ip-island-bars i:nth-child(3){height:9px; background:#e6d3ac}
.ip-island-bars i:nth-child(4){height:5px; background:#7f9273}
#ipIsland.is-music.is-playing .ip-island-bars i{animation:ip-island-wave .9s ease-in-out infinite alternate}
#ipIsland.is-music.is-playing .ip-island-bars i:nth-child(2){animation-delay:.12s}
#ipIsland.is-music.is-playing .ip-island-bars i:nth-child(3){animation-delay:.24s}
#ipIsland.is-music.is-playing .ip-island-bars i:nth-child(4){animation-delay:.36s}
@keyframes ip-island-wave{from{transform:scaleY(.55); opacity:.65}to{transform:scaleY(1.35); opacity:1}}

/* 展开后的歌名 / 歌手 / 控制按钮 */
.ip-island-copy{display:none; flex:1; min-width:0; flex-direction:column; justify-content:center; gap:2px; padding:0 8px}
#ipIsland.is-music:hover .ip-island-copy,
#ipIsland.is-music.is-open .ip-island-copy{display:flex}
.ip-island-title{overflow:hidden; color:#fdfaf1; font-size:13px; font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap}
.ip-island-artist{overflow:hidden; color:rgba(233,223,203,.62); font-size:10px; font-weight:500; line-height:1.2; text-overflow:ellipsis; white-space:nowrap}

.ip-island-actions{display:none; align-items:center; gap:1px; flex:0 0 auto; padding-right:7px}
#ipIsland.is-music:hover .ip-island-actions,
#ipIsland.is-music.is-open .ip-island-actions{display:flex}
.ip-island-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:27px; height:27px; padding:0; border:0; border-radius:50%;
  background:transparent; color:rgba(253,250,241,.78); cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.ip-island-btn:hover{background:rgba(255,255,255,.12); color:#fff; transform:scale(1.06)}
.ip-island-btn svg{width:15px; height:15px; display:block}
.ip-island-toggle{width:32px; height:32px; background:#d9a566; color:#4a3418}
.ip-island-toggle:hover{background:#c6955a; color:#4a3418}

/* 底部进度线 */
.ip-island-progress{
  position:absolute; left:12px; right:12px; bottom:7px; height:2px; overflow:hidden;
  border-radius:999px; background:rgba(233,223,203,.22); opacity:0; transition:opacity .2s ease;
}
#ipIsland.is-music:hover .ip-island-progress,
#ipIsland.is-music.is-open .ip-island-progress{opacity:1}
.ip-island-progress span{display:block; width:0; height:100%; border-radius:inherit; background:#d9a566; transition:width .25s linear}

/* ---------- 拖拽 ---------- */
#ipIsland{cursor:grab; touch-action:none}
#ipIsland.is-dragging{cursor:grabbing}
#ipIsland.is-dragging,
#ipIsland.is-dragging *{-webkit-user-select:none; user-select:none}
/* 拖拽中固定为展开尺寸，夹紧与呈现一致（坑③） */
#ipIsland.is-music.is-dragging{width:min(320px,calc(100vw - 24px)); height:58px; border-radius:29px}
#ipIsland.is-music.is-dragging .ip-island-cover{width:40px; height:40px; margin-left:9px; border-radius:12px}
#ipIsland.is-music.is-dragging .ip-island-copy,
#ipIsland.is-music.is-dragging .ip-island-actions{display:flex}
#ipIsland.is-music.is-dragging .ip-island-progress{opacity:1}