/* ESC Stage compact, first batch (2026-10-24).
   Loaded after esc-stage.css. It does not edit esc-stage.js or esc-stage.css.
   Items 2, 3 and 4 below were already shipped in the 2026-10-22 five-item
   pass (stage-bar count removed, header player hidden in stage mode, desk
   plate docked); the rules here reaffirm them so a later change cannot
   quietly reintroduce the duplicate, the second volume, or the floating
   pill. Item 6 gets its missing piece (a dismiss button, added by
   esc-stage-compact.js). Item 19 is new: the Queue / Room / Chat panel
   becomes a bottom sheet on narrow widths and inside the Discord
   Activity, where the old in-flow panel pushed the stage off screen.
   On wide web layouts the held 360px column is deliberately kept, per
   the 2026-10-22 hold rule, so the stage reflows instead of being
   covered. No blur is used anywhere in this file; the sheet uses a
   solid chrome background, so it cannot re-anchor a fixed descendant.
   The sheet itself uses a slide transform; it has no fixed-position
   descendants, and none of its ancestors use a transform. */

/* Item 2: one listener count, in the deck bar only.
   The deck bar count is #erWhoN inside .er-who. Guard only: if a
   stage-bar count ever comes back, it stays hidden. */
#esRoom .er-bar .wc,
#esRoom .er-bar #erCount {
  display: none !important;
}

/* Item 3: one volume control for one stream.
   While Stage mode is on, the globe header player (which carries the
   header volume slider) stays hidden; the Stage bar's own mute and
   slider own volume. Outside Stage mode this file touches nothing. */
body.esc-stage-mode #nowPlaying {
  display: none !important;
}
body.esc-stage-mode #nowPlaying .vol-wrap {
  display: none !important;
}

/* Item 4: Take the deck pill docked flush into the bottom band.
   The desk plate sits across the scene's bottom band, full width,
   square to the frame, with name, points and PLAY MUSIC on one line. */
#esRoom .er-desk {
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  max-width: none;
}
#esRoom .er-desk .dm {
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  flex-wrap: nowrap;
}
#esRoom .er-desk .dm .meta {
  min-width: 0;
}
#esRoom .er-desk .er-play {
  flex: 0 0 auto;
  min-height: 44px;
}

/* Item 6: Queue notice as one row, dismissible.
   The off-note banner already carries .er-oneline in esc-stage.js;
   the on-break banner did not, so both are row-ified here. The
   dismiss button itself is appended by esc-stage-compact.js. */
#erPaneQueue .er-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
#erPaneQueue .er-banner .tx {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#erPaneQueue .er-banner .es-btn {
  flex: 0 0 auto;
}
#erPaneQueue .er-banner > div {
  margin-top: 0 !important;
  flex: 0 0 auto;
}
.er-sheet-dismiss {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
}

/* Item 19: bottom sheet, shared shape.
   Closed: slid below the viewport, invisible, untappable.
   Open: fixed to the bottom of the stage area, tabs on top, one pane
   scrolling inside, close button always visible, safe-area respected.
   The sheet is a panel, not a bar: portrait Stage stays two bars. */
#esRoom .er-side .er-tabs {
  flex: 0 0 auto;
}
#esRoom .er-side .er-tabs button {
  min-height: 44px;
}
#esRoom .er-side .er-tabs .er-sidex {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex: 0 0 44px;
  height: 44px;
  padding: 0;
}
#esRoom .er-side .er-pane {
  flex: 1 1 auto;
  overflow: auto;
  max-height: none !important;
}

/* Narrow widths: sheet replaces the in-flow panel below the stage. */
@media (max-width: 820px) {
  #esRoom:not(.side-open) .er-side {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto !important;
    flex: none !important;
    height: min(72vh, 620px) !important;
    max-height: calc(100dvh - 140px) !important;
    transform: translateY(105%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #esRoom.side-open .er-side {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto !important;
    flex: none !important;
    height: min(72vh, 620px) !important;
    max-height: calc(100dvh - 140px) !important;
    z-index: 50 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--s-bd) !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--s-chrome) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s !important;
  }
  #esRoom.side-open .er-side::before {
    content: "";
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--s-mu);
    flex: 0 0 auto;
  }
}

/* Discord Activity at any width: same sheet, wide column kept only
   for the plain web. esc-stage-compact.js adds er-sheet-mode to the
   body when window.ESC_DISCORD is present. */
body.er-sheet-mode #esRoom:not(.side-open) .er-side {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  width: auto !important;
  flex: none !important;
  height: min(72vh, 620px) !important;
  max-height: calc(100dvh - 140px) !important;
  transform: translateY(105%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.er-sheet-mode #esRoom.side-open .er-side {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  width: auto !important;
  flex: none !important;
  height: min(72vh, 620px) !important;
  max-height: calc(100dvh - 140px) !important;
  z-index: 50 !important;
  border-left: 0 !important;
  border-top: 1px solid var(--s-bd) !important;
  border-radius: 16px 16px 0 0 !important;
  background: var(--s-chrome) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s !important;
}
body.er-sheet-mode #esRoom.side-open .er-side::before {
  content: "";
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--s-mu);
  flex: 0 0 auto;
}