/* Independent overlay: artwork never competes with sidebar navigation for height. */
.artworkDrawer {
  position: fixed;
  inset: 0 auto var(--artwork-player-height, var(--slop-player)) 0;
  z-index: 25;
  width: min(var(--slop-sidebar), 100vw);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 12px;
  overflow: hidden;
}
.artworkDrawer[hidden] { display: none; }
.artworkDrawerHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; font-size: 14px; }
.artworkDrawerHeader button { min-width: 44px; min-height: 44px; padding: 8px; }
.artworkDrawerImage { display: flex; flex: 1; min-height: 0; padding-top: 12px; }
.artworkDrawerImage img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.player .playingInfo #artworkToggle { display: block; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.player .playingInfo #artworkToggle:disabled { display: none; }
.player .playingInfo #nowCover { display: block; width: 100%; height: 100%; object-fit: contain; }
.player .playingInfo #nowCover[hidden] { display: none; }
#artworkToggle:focus-visible, #closeArtwork:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width:720px) { .artworkDrawer { width: 100vw; border-right: 0; } }