/* Keep search outside the account/window action area at every desktop width. */
@media (min-width: 901px) {
  body #search-area, body.simple-mode #search-area {
    left: 24px; transform: none; width: min(620px, calc(100vw - var(--header-actions-width, 340px) - 60px));
    max-width: calc(100vw - var(--header-actions-width, 340px) - 60px);
  }
  body #search-area #search-stack, body.simple-mode #search-area #search-stack { width: 100%; min-width: 0; }
  body #search-area #search-input { min-width: 0; }
  body.desktop-shell #search-area.peek, body.desktop-shell #search-area.stage-mode.peek { top: 58px; }
}
/* The Windows shell keeps its desktop controls even in a narrow window. */
body.desktop-shell #search-area, body.desktop-shell.simple-mode #search-area {
  left:24px; transform:none; width:min(620px,calc(100vw - var(--header-actions-width,340px) - 60px));
  max-width:calc(100vw - var(--header-actions-width,340px) - 60px);
}
body.desktop-shell #search-stack { width:100%; min-width:0; }
body.mobile-device .fullscreen-toggle-btn, body.mobile-device #volume-slider,
body.mobile-device #volume-value, body.mobile-device .volume-main-row { display: none !important; }
@media (max-width: 900px) {
  body.web-mobile-more-open[data-mobile-page="player"] #web-player-stage { visibility: hidden; pointer-events: none; }
  body.web-adapter.web-mobile-more-open[data-mobile-page="player"] #web-player-more {
    height: calc(var(--web-viewport-height, 100dvh) - var(--web-mobile-top, 72px) - var(--web-nav-height, 64px) - 184px);
    max-height: none; align-content: start;
  }
  body.mobile-device #web-player-more #volume-btn svg { display: none; }
  body.mobile-device #web-player-more #volume-btn::before { content: '↗↘'; font-size: 20px; }
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference) {
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #web-player-stage .control-cover {
    transition:opacity .24s ease .24s,transform .24s ease .24s !important;
  }
  body.web-adapter.web-mobile-active.web-mobile-lyrics-open[data-mobile-page="player"] #web-player-stage .control-cover {
    transition:opacity .24s ease,transform .24s ease !important;
  }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #web-mobile-lyrics {
    transition:opacity .24s ease,transform .24s ease,visibility 0s .24s !important;
  }
  body.web-adapter.web-mobile-active.web-mobile-lyrics-open[data-mobile-page="player"] #web-mobile-lyrics {
    transition:opacity .24s ease .24s,transform .24s ease .24s,visibility 0s !important;
  }
}
#song-mv-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .35s; background: #050609; }
#song-mv-layer.active { opacity: 1; }
#song-mv-layer video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
body.song-mv-active #canvas-container { visibility: hidden; }
body.empty-home-active #song-mv-layer { opacity: 0; visibility: hidden; }
body.immersive-mode #bottom-bar {
  transition-duration: .18s, .18s, .18s, .22s, .18s;
}
/* Keep the video below the controls within the desktop shell's stacking context. */
body.song-mv-selected #bottom-bar { z-index: 32; }
body.song-mv-selected:not(.immersive-mode) #desktop-titlebar {
  opacity: 1 !important; visibility: visible !important;
}
/* Avoid re-filtering every decoded video frame through the SVG glass filter. */
body.song-mv-active #bottom-bar.visible,
html.control-glass-svg-ok body.song-mv-active #bottom-bar.visible {
  background: rgba(18, 20, 25, .88); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.song-mv-selected.immersive-mode #bottom-bar.visible {
  width: min(1080px, calc(100vw - 56px)); border-radius: 50px;
}
body.song-mv-selected.immersive-mode .control-track { display: flex !important; }
body.song-mv-selected.immersive-mode #heart-btn,
body.song-mv-selected.immersive-mode #collect-btn,
body.song-mv-selected.immersive-mode #play-mode-btn,
body.song-mv-selected.immersive-mode .lyrics-toggle-btn,
body.song-mv-selected.immersive-mode #mini-queue-btn,
body.song-mv-selected.immersive-mode #quality-control,
body.song-mv-selected.immersive-mode #volume-control,
body.song-mv-selected.immersive-mode .control-divider { display: revert !important; }
body.song-mv-selected.immersive-mode .control-cluster.actions { display: flex; }
body.song-mv-selected.immersive-mode #mini-queue-popover { display: block !important; }
body.song-mv-selected.immersive-mode #controls { flex-wrap: nowrap; }
/* An invisible, touchable edge remains available while immersed. */
body.song-mv-selected.immersive-mode:not(.controls-visible) #bottom-handle {
  display: block; opacity: 0 !important; pointer-events: auto !important;
  bottom: 0; height: 48px; width: min(620px, 90vw); transform: translateX(-50%) !important;
}
.mv-fallback-settings {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 4px;
  color: var(--text-secondary, #bfc1c8); font-size: 12px;
}
.mv-fallback-settings[hidden] { display: none; }
.mv-fallback-settings select {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; color: inherit;
  background: rgba(90, 90, 100, .18); border: 1px solid rgba(160, 160, 170, .3); font: inherit;
}
.mv-fallback-settings option { background: #202126; color: #eee; }