/**
 * 灵动岛 v3 - 胶囊 CSS
 * 精确复刻 em.chujun.vip 的 meet-island.css
 * 核心: 999px圆角药丸 + 玻璃质感 + 封面液体流动 + EQ频谱条
 */
:root {
    --di-cover-ink: #08080c;
    --di-cover-violet: #a78bfa;
    --di-cover-glass-blur: 16px;
    --di-glass-saturate: 1.15;
    --di-glass-brightness: 0.82;
    --di-gap: 10px;
    /* 以下变量由后台设置注入，这里仅作兜底 */
    --di-cover: 54px;
    --di-glass-blur: 28px;
    --di-glass-opacity: 0.8;
}

/* === 岛底座 === */
.dim-island {
    position: fixed; left: 50%; bottom: var(--di-bottom, 18px); z-index: 99990;
    width: fit-content; max-width: min(380px, calc(100vw - 28px));
    transform: translateX(-50%) translateY(12px);
    opacity: 0; pointer-events: none;
    transition: opacity .38s ease, transform var(--di-anim-dur, .42s) cubic-bezier(.22,1,.32,1);
}
.dim-island[data-position="right"] { left: auto; right: 0; transform: translateY(12px); }
.dim-island[data-position="left"] { left: 0; right: auto; transform: translateY(12px); }
.dim-island[data-position="center"] { left: 50%; right: auto; transform: translateX(-50%) translateY(12px); }
.dim-island.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.dim-island.show[data-position="right"], .dim-island.show[data-position="left"] { transform: translateY(0); }
.dim-island.show[data-position="center"] { transform: translateX(-50%) translateY(0); }
.dim-island.hiding {
    opacity: 0; transform: translateX(-50%) translateY(12px);
    pointer-events: none;
    transition: opacity .28s ease, transform .42s cubic-bezier(.45,.05,.2,1);
}

/* === 药丸条 === */
.dim-island-bar {
    display: flex; align-items: center; gap: var(--di-gap);
    min-height: calc(var(--di-cover) + var(--di-gap) * 2);
    padding: var(--di-gap); border-radius: 999px;
    background: linear-gradient(165deg,
        rgba(255,255,255, calc(.06 * var(--di-glass-opacity))) 0%,
        rgba(255,255,255, calc(.02 * var(--di-glass-opacity))) 100%
    ), rgba(0,0,0, calc(.72 * var(--di-glass-opacity)));
    backdrop-filter: blur(var(--di-glass-blur)) saturate(var(--di-glass-saturate)) brightness(var(--di-glass-brightness));
    -webkit-backdrop-filter: blur(var(--di-glass-blur)) saturate(var(--di-glass-saturate)) brightness(var(--di-glass-brightness));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 -4px 20px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.4);
    overflow: hidden; width: min(380px, calc(100vw - 40px));
    max-width: min(380px, calc(100vw - 40px));
    box-sizing: border-box; cursor: default; position: relative; z-index: 2;
    transition: width .58s cubic-bezier(.22,1,.36,1), gap .58s cubic-bezier(.22,1,.36,1);
}

/* === 封面容器 (紫色液体流动效果) === */
.dim-cover-wrap {
    position: relative; width: 0; height: var(--di-cover); flex-shrink: 0;
    opacity: 0; border-radius: var(--di-cover-radius, 50%); overflow: hidden;
    background: var(--di-cover-ink);
    box-shadow: inset 0 1px 0 rgba(167,139,250,.22), inset 0 0 0 1px rgba(167,139,250,.12);
    transition: width .45s cubic-bezier(.34,1.2,.64,1), opacity .35s ease;
}
.dim-island.playing .dim-cover-wrap,
.dim-island.paused .dim-cover-wrap,
.dim-island.show .dim-cover-wrap {
    width: var(--di-cover); min-width: var(--di-cover); max-width: var(--di-cover); opacity: 1;
}

/* 液体流动伪元素 */
.dim-cover-wrap::before {
    content: ''; position: absolute; inset: -45%; z-index: 0; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle at 28% 32%, rgba(167,139,250,.92) 0%, transparent 52%),
        radial-gradient(circle at 72% 68%, rgba(8,8,12,.98) 0%, transparent 48%),
        radial-gradient(circle at 52% 18%, rgba(167,139,250,.55) 0%, transparent 46%),
        radial-gradient(circle at 18% 78%, rgba(8,8,12,.94) 0%, transparent 44%),
        linear-gradient(135deg, var(--di-cover-ink) 0%, rgba(167,139,250,.35) 52%, var(--di-cover-ink) 100%);
    background-size: 180% 180%, 190% 190%, 170% 170%, 185% 185%, 220% 220%;
    filter: blur(7px) saturate(1.25); opacity: 1;
    transform: translate3d(0,0,0) scale(1.18);
    animation: diLiquid 4.8s ease-in-out infinite;
}
.dim-cover-wrap.cover-ready::before { opacity: 0; filter: blur(0) saturate(1); animation: none; }

/* 毛玻璃遮罩 */
.dim-cover-wrap::after {
    content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
    background: linear-gradient(148deg, rgba(167,139,250,.16) 0%, rgba(8,8,12,.42) 42%, rgba(255,255,255,.06) 100%);
    backdrop-filter: blur(var(--di-cover-glass-blur)) saturate(1.45) brightness(.92);
    -webkit-backdrop-filter: blur(var(--di-cover-glass-blur)) saturate(1.45) brightness(.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08); opacity: 1;
}
.dim-cover-wrap.cover-ready::after { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: transparent; box-shadow: none; }
.dim-cover-wrap.cover-ready { background: transparent; box-shadow: none; }

@keyframes diLiquid {
    0%,100% { transform: translate3d(-6%,-4%,0) rotate(0deg) scale(1.18); background-position: 0% 50%,100% 50%,40% 20%,80% 70%,0% 50%; }
    25% { transform: translate3d(8%,-9%,0) rotate(92deg) scale(1.24); background-position: 100% 20%,0% 80%,70% 90%,20% 10%,50% 0%; }
    50% { transform: translate3d(9%,7%,0) rotate(180deg) scale(1.2); background-position: 50% 100%,50% 0%,15% 55%,85% 45%,100% 50%; }
    75% { transform: translate3d(-7%,9%,0) rotate(268deg) scale(1.22); background-position: 80% 60%,20% 40%,60% 10%,40% 90%,50% 100%; }
}

/* 封面图片 */
.dim-cover-img {
    position: relative; z-index: 1; width: 100%; height: 100%;
    object-fit: cover; display: block; border-radius: 0;
    opacity: 0; filter: blur(14px) saturate(.8); transform: scale(1.12);
    transition: opacity 1s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.dim-cover-wrap.cover-ready .dim-cover-img.loaded {
    opacity: 1; filter: blur(0) saturate(1); transform: scale(1.06);
}

/* 旋转 */
.dim-island.playing .dim-cover-wrap.cover-ready,
.dim-island.paused .dim-cover-wrap.cover-ready { animation: diSpin 14s linear infinite; }
.dim-island.paused .dim-cover-wrap.cover-ready { animation-play-state: paused; }
@keyframes diSpin { to { transform: rotate(360deg); } }

/* === EQ 频谱条 === */
.dim-eq { display: none; align-items: center; justify-content: center; gap: 3px; width: 42px; height: 30px; flex-shrink: 0; margin: 0; overflow: hidden; }
.dim-island.playing .dim-eq,
.dim-island.paused .dim-eq { display: flex; visibility: visible; }

.dim-eq-bar {
    --bar-width: 3px; display: block; width: var(--bar-width); border-radius: 999px;
    background: linear-gradient(180deg, var(--di-accent, #a78bfa) 0%, var(--di-accent, #7c3aed) 55%, color-mix(in srgb, var(--di-accent, #6d28d9) 60%, #000) 100%);
    box-shadow: 0 0 8px rgba(255,0,127,.4); flex-shrink: 0;
    transition: transform .85s cubic-bezier(.25,.9,.35,1), opacity .65s ease, box-shadow .65s ease;
}
.dim-eq-bar:nth-child(1) { height: 11px; }
.dim-eq-bar:nth-child(2) { height: 19px; }
.dim-eq-bar:nth-child(3) { height: 26px; }
.dim-eq-bar:nth-child(4) { height: 15px; }
.dim-eq-bar:nth-child(5) { height: 21px; }

.dim-island.paused .dim-eq-bar { animation: none !important; opacity: .72; box-shadow: 0 0 6px rgba(255,0,127,.32); }
.dim-island.paused .dim-eq-bar:nth-child(1) { transform: scaleY(.273) !important; }
.dim-island.paused .dim-eq-bar:nth-child(2) { transform: scaleY(.158) !important; }
.dim-island.paused .dim-eq-bar:nth-child(3) { transform: scaleY(.115) !important; }
.dim-island.paused .dim-eq-bar:nth-child(4) { transform: scaleY(.2) !important; }
.dim-island.paused .dim-eq-bar:nth-child(5) { transform: scaleY(.143) !important; }

.dim-island.playing:not(.paused) .dim-eq-bar { animation: diEqBar 2.1s cubic-bezier(.45,.05,.25,1) infinite; }
.dim-island.playing:not(.paused) .dim-eq-bar:nth-child(1) { animation-duration: 1.85s; animation-delay: 0s; }
.dim-island.playing:not(.paused) .dim-eq-bar:nth-child(2) { animation-duration: 2.35s; animation-delay: .22s; }
.dim-island.playing:not(.paused) .dim-eq-bar:nth-child(3) { animation-duration: 1.9s; animation-delay: .08s; }
.dim-island.playing:not(.paused) .dim-eq-bar:nth-child(4) { animation-duration: 2.2s; animation-delay: .35s; }
.dim-island.playing:not(.paused) .dim-eq-bar:nth-child(5) { animation-duration: 2.05s; animation-delay: .14s; }

@keyframes diEqBar {
    0%,100% { transform: scaleY(.32); opacity: .5; }
    20% { transform: scaleY(.58); opacity: .72; }
    38% { transform: scaleY(.88); opacity: .9; }
    52% { transform: scaleY(.4); opacity: .65; }
    68% { transform: scaleY(1); opacity: 1; }
    84% { transform: scaleY(.52); opacity: .78; }
}

/* === 歌曲信息 === */
.dim-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; border: none; background: transparent; color: inherit; text-align: left; cursor: default; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; user-select: none; }
.dim-title { font-size: .8125rem; font-weight: 600; line-height: 1.25; color: var(--di-lyric-color, rgba(255,255,255,.6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dim-sub { font-size: .6875rem; line-height: 1.25; color: rgba(255,255,255,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* === 按钮 === */
.dim-btn {
    flex-shrink: 0; width: 36px; height: 36px; min-width: 36px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
    font-size: 16px; padding: 0;
    transition: background .2s;
}
.dim-btn:hover { background: rgba(255,255,255,.18); }

/* === 展开面板 === */
.dim-panel {
    position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1;
    max-height: 0; overflow: hidden;
    border-radius: 18px; background: transparent;
    opacity: 0; pointer-events: none;
    transition: max-height .42s cubic-bezier(.34,1.2,.64,1), opacity .32s ease, background .32s ease;
}
.dim-island.expanded .dim-panel {
    max-height: var(--di-panel-max-h, min(80vh, 600px)); opacity: 1; pointer-events: auto;
    display: flex; flex-direction: column;
    background: linear-gradient(165deg, rgba(255,255,255, calc(.06*var(--di-glass-opacity))), rgba(255,255,255, calc(.02*var(--di-glass-opacity)))), rgba(0,0,0, calc(.72*var(--di-glass-opacity)));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 -8px 40px rgba(0,0,0,.32);
    backdrop-filter: blur(var(--di-glass-blur)) saturate(var(--di-glass-saturate)) brightness(var(--di-glass-brightness));
    -webkit-backdrop-filter: blur(var(--di-glass-blur)) saturate(var(--di-glass-saturate)) brightness(var(--di-glass-brightness));
    z-index: 5;
}

.dim-panel-inner { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* 面板标题 */
.dim-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px 8px; flex-shrink: 0;
}
.dim-panel-title { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.55); }

/* 列表 */
.dim-chart-list {
    list-style: none; margin: 0; padding: 0 8px 10px;
    flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0;
}
.dim-chart-list::-webkit-scrollbar { width: 4px; }
.dim-chart-list::-webkit-scrollbar-track { background: transparent; }
.dim-chart-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 4px; }

.dim-chart-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px; border: none; border-radius: 12px;
    background: transparent; color: #fff; text-align: left;
    cursor: pointer; outline: none; font-size: .8125rem; font-weight: 500; line-height: 1.25;
    transition: background .25s;
    box-sizing: border-box;
}
.dim-chart-item:hover { background: rgba(255,255,255,.06); }
.dim-chart-item.active { background: rgba(239,68,68,.18); color: #fca5a5; }

/* 队列项布局 */
.dim-chart-left { flex: 1; min-width: 0; overflow: hidden; }
.dim-chart-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dim-chart-artist { display: block; font-size: .6875rem; color: rgba(255,255,255,.45); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.dim-empty { color: rgba(255,255,255,.25) !important; cursor: default !important; justify-content: center; }

/* 操作按钮 */
.dim-btn-add, .dim-btn-remove {
    flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.5);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; padding: 0; transition: all .2s;
}
.dim-btn-add:hover, .dim-btn-remove:hover { background: rgba(255,255,255,.18); color: #fff; }
.dim-btn-remove:hover { background: rgba(239,68,68,.3); color: #fca5a5; }
.dim-btn-added {
    flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: rgba(74,222,128,.15); color: #4ade80;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; padding: 0; transition: all .2s;
}
.dim-btn-added:hover { background: rgba(239,68,68,.2); color: #fca5a5; }

/* 播放按钮 */
.dim-btn-play {
    width: 38px !important; height: 38px !important; min-width: 38px !important;
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    box-shadow: 0 2px 8px rgba(59,130,246,.35);
    font-size: 18px !important;
}
.dim-btn-play:hover { box-shadow: 0 4px 16px rgba(59,130,246,.5); background: linear-gradient(135deg, #60a5fa, #818cf8) !important; }

/* === 面板 Tab === */
.dim-panel-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.06); border-radius: 8px; padding: 3px; }
.dim-tab {
    padding: 5px 14px; border: 0; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,.4);
    font-size: .75rem; cursor: pointer; transition: all .2s;
    font-weight: 500;
}
.dim-tab:hover { color: rgba(255,255,255,.7); }
.dim-tab.active { background: rgba(255,255,255,.15); color: #fff; }

.dim-tab-content { display: none; }
.dim-tab-content.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* === 搜索 === */
.dim-search-box { display: flex; gap: 6px; padding: 0 14px 10px; flex-shrink: 0; }
.dim-tab-content select {
    color-scheme: dark;
    appearance: none; -webkit-appearance: none;
    outline: none;
}
.dim-tab-content select option {
    background: #1f2937; color: #e5e7eb;
}
.dim-chart-actions {
    display: flex; gap: 6px; padding: 0 14px 6px; flex-wrap: wrap; flex-shrink: 0;
}
.dim-chart-actions .dim-btn { font-size: 11px; padding: 4px 10px; }
.dim-search-input {
    flex: 1; min-width: 0; padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
    background: rgba(255,255,255,.06); color: #fff; font-size: .8125rem;
    outline: none; transition: border-color .2s;
}
.dim-search-input::placeholder { color: rgba(255,255,255,.25); }
.dim-search-input:focus { border-color: rgba(59,130,246,.5); background: rgba(255,255,255,.1); }

.dim-btn-sm { width: auto !important; height: auto !important; min-width: auto !important; border-radius: 10px !important; padding: 8px 14px !important; font-size: .8125rem !important; }

/* === 响应式 === */
@media (max-width: 640px) {
    .dim-island { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .dim-btn { width: 44px; height: 44px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .dim-island, .dim-island-bar, .dim-btn, .dim-panel { transition: none !important; }
    .dim-cover-wrap, .dim-cover-wrap::before, .dim-cover-wrap::after, .dim-cover-img { transition: none !important; animation: none !important; }
    .dim-cover-wrap.cover-ready::before, .dim-cover-wrap.cover-ready::after { opacity: 0; }
    .dim-cover-wrap.cover-ready .dim-cover-img.loaded { opacity: 1; filter: none; transform: scale(1.06); }
    .dim-eq-bar { animation: none !important; opacity: .72; transform: scale(.85); }
}