/* 音乐面板：1/3 · 2/3 · 全屏切图；拖分屏时浅灰遮罩 */

.music-panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 600;
    display: none;
    overflow: hidden;
    border-radius: inherit;
    background-color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.music-panel-overlay.is-on {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 被应用中心/车控顶替：与对方渐显同节奏（0.6s）渐隐 */
.music-panel-overlay.is-on.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        visibility 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.music-panel-overlay.is-mode-1-3.is-on {
    background-image: url('../Music/music-1-3.png?v=15');
}

.music-panel-overlay.is-mode-2-3.is-on {
    background-image: url('../Music/music-2-3.png?v=15');
}

.music-panel-overlay.is-mode-full.is-on {
    background-image: url('../Music/music-fullscreen.png?v=15');
}

/* 拖分屏：浅灰遮罩，松手后由 JS 去掉并换切图 */
.music-panel-overlay.is-on.is-split-dragging {
    background-image: none !important;
    background-color: #E4E7ED;
}

.music-panel-overlay.is-on.is-split-dragging::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(228, 231, 237, 0.92);
    pointer-events: none;
}

/*
 * 音乐真全屏（state-a / state-c）：窗体全屏，边缘拖动条保留（对齐壁纸全屏）
 */
#canvas.music-host-full:not(.state-2) #divider-touch-zone {
    display: block !important;
    z-index: 12150;
    top: 72px;
    width: 56px;
    height: 912px;
}

/* 场景全屏：条在右侧 */
#canvas.music-host-full:not(.state-2):not(.state-c) #divider-touch-zone {
    left: 1860px;
}

#canvas.music-host-full:not(.state-2):not(.state-c) #mid-widget {
    left: 1905px;
    z-index: 12150;
    opacity: 1;
    visibility: visible;
}

/* 地图全屏：条在左侧（未 swapped） */
#canvas.music-host-full.state-c:not(.swapped) #divider-touch-zone {
    left: -4px;
}

#canvas.music-host-full.state-c:not(.swapped) #mid-widget {
    left: 11px;
    z-index: 12150;
    opacity: 1;
    visibility: visible;
}

/* 地图全屏 swapped：条在右侧 */
#canvas.music-host-full.state-c.swapped #divider-touch-zone {
    left: 1860px;
}

#canvas.music-host-full.state-c.swapped #mid-widget {
    left: 1905px;
    z-index: 12150;
    opacity: 1;
    visibility: visible;
}

.map-window > .music-panel-overlay.is-on {
    pointer-events: auto;
}

.cockpit-dock .dock-media-block.is-active,
.cockpit-dock .dock-music-app-btn.is-active {
    outline: none;
}

.cockpit-dock .dock-media-block.is-active .dock-media-cover {
    box-shadow: 0 0 0 2px rgba(14, 15, 18, 0.18);
}