.v2-action-bar {
  position: absolute;
  bottom: var(--action-bar-margin, 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.v2-action-bar .action-bar-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 50px;
  background: var(--primary-bg, rgba(20, 20, 20, 0.75));
  backdrop-filter: var(--glass-blur, blur(16px));
  -webkit-backdrop-filter: var(--glass-blur, blur(16px));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.v2-action-bar .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--icon-color, white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.v2-action-bar .action-btn svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}

.v2-action-bar .action-btn:hover {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.25));
}

.v2-action-bar .action-btn:hover svg {
  transform: scale(1.1);
}

.v2-action-bar .action-btn:active {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.95);
}

/* Standout Grid CTA */
.v2-action-bar .cta-btn {
  background: var(--accent-dark, rgba(255, 255, 255, 0.1));
  border: 1px solid var(--accent, rgba(255, 255, 255, 0.2));
}

.v2-action-bar .cta-btn:hover {
  background: var(--accent, rgba(255, 255, 255, 0.3));
  box-shadow: 0 0 15px var(--accent-glow, rgba(255, 255, 255, 0.5));
}

/* Integration with existing features */
body:has(#sceneDock:not(.dock-hidden)) .v2-action-bar.layout-floating {
  bottom: calc(var(--bottom-dock-height, 100px) + var(--action-bar-margin, 10px));
}

/* FIXED STRIP LAYOUT */
.v2-action-bar.layout-fixed {
  bottom: 0px;
  width: 100%;
  transform: none;
  left: 0;
}

.v2-action-bar.layout-fixed .action-bar-inner {
  border-radius: 0;
  width: 100%;
  justify-content: center;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 10px 12px;
}

/* SIDE PILL LAYOUT: the same pill standing upright at the middle of the right edge (Ben, 2026-10-11: at the foot it stood over the
   Info & Media panel). Its margin is the gap to the edge. It keeps clear of an open sidebar on the right, and the Pan Controls at the
   same spot move in beside it. A phone has its own bars, as for the other layouts. */
.v2-action-bar.layout-side {
  top: 50%;
  bottom: auto;
  left: auto;
  right: var(--action-bar-margin, 10px);
  transform: translateY(-50%);
}

.v2-action-bar.layout-side .action-bar-inner {
  flex-direction: column;
  padding: 12px 8px;
}

@media (min-width: 769px) {
  body:has(.sidebar-right:not(.sidebar-closed)) .v2-action-bar.layout-side {
    right: calc(var(--sidebar-width, 300px) + var(--action-bar-margin, 10px));
  }
}

body.ctrl-center-right:has(.v2-action-bar.layout-side) .view-controls {
  right: calc(var(--action-bar-margin, 10px) + 76px);
}

/* Push the underlying gallery navigation upwards so it avoids the fixed strip completely */
body:has(.v2-action-bar.layout-fixed) #sceneDock {
  margin-bottom: calc(65px + var(--gallery-margin, 5px));
}

/* The Info & Media panel, closed, leaves its handle on the foot of the player (36 px high, left of the middle): a floating action bar
   stands above it instead of across it (Ben, 2026-10-11). Open, the panel's own rule lifts the bar above the whole panel (info-media.css).
   Wider screens only: a phone has its own bars at the foot. */
@media (min-width: 768px) {
  body:has(#infoMediaPanel.im-closed:not([hidden])) .v2-action-bar.layout-floating {
    bottom: calc(36px + var(--action-bar-margin, 10px));
  }
}

/* ANY STYLE AT ANY EDGE (Ben, 2026-10-12: "two menus. One for full width and floating pill, the other for position ... Bottom, Top,
   Left and Right. This way it can be put anywhere in any style"). The three combinations there were keep their class and every rule
   above (layout-floating and layout-fixed at the foot, layout-side: a pill at the right). The others are a style, layout-pill or
   layout-strip, and an edge, pos-top, pos-left or pos-right (App\Support\ActionBarPlace). A bar at the top starts under the Top Nav
   Bar - Multi Menu (--menu-bar-h, 0 without it) and under the Top Nav Bar - Dropdown where the page has one. */

/* a pill at the top, in the middle */
.v2-action-bar.layout-pill.pos-top {
  top: calc(var(--menu-bar-h, 0px) + var(--action-bar-margin, 10px));
  bottom: auto;
}
body:has(#topBar) .v2-action-bar.layout-pill.pos-top {
  top: calc(var(--menu-bar-h, 0px) + 81px + var(--action-bar-margin, 10px));
}

/* a pill at the middle of the left edge: the Side Pill's twin */
.v2-action-bar.layout-pill.pos-left {
  top: 50%;
  bottom: auto;
  left: var(--action-bar-margin, 10px);
  right: auto;
  transform: translateY(-50%);
}
.v2-action-bar.layout-pill.pos-left .action-bar-inner {
  flex-direction: column;
  padding: 12px 8px;
}
@media (min-width: 769px) {
  body:has(.sidebar-left:not(.sidebar-closed)) .v2-action-bar.layout-pill.pos-left {
    left: calc(var(--sidebar-width, 300px) + var(--action-bar-margin, 10px));
  }
}
body.ctrl-center-left:has(.v2-action-bar.layout-pill.pos-left) .view-controls {
  left: calc(var(--action-bar-margin, 10px) + 76px);
}

/* a strip across the top */
.v2-action-bar.layout-strip.pos-top {
  top: var(--menu-bar-h, 0px);
  bottom: auto;
  left: 0;
  width: 100%;
  transform: none;
}
body:has(#topBar) .v2-action-bar.layout-strip.pos-top {
  top: calc(var(--menu-bar-h, 0px) + 81px);
}
.v2-action-bar.layout-strip.pos-top .action-bar-inner {
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-left: none;
}

/* a strip down the left or the right edge, the height of the player */
.v2-action-bar.layout-strip.pos-left,
.v2-action-bar.layout-strip.pos-right {
  top: var(--menu-bar-h, 0px);
  bottom: 0;
  transform: none;
}
.v2-action-bar.layout-strip.pos-left {
  left: 0;
  right: auto;
}
.v2-action-bar.layout-strip.pos-right {
  left: auto;
  right: 0;
}
.v2-action-bar.layout-strip.pos-left .action-bar-inner,
.v2-action-bar.layout-strip.pos-right .action-bar-inner {
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 12px 10px;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
}
.v2-action-bar.layout-strip.pos-left .action-bar-inner {
  border-left: none;
}
.v2-action-bar.layout-strip.pos-right .action-bar-inner {
  border-right: none;
}
@media (min-width: 769px) {
  body:has(.sidebar-left:not(.sidebar-closed)) .v2-action-bar.layout-strip.pos-left {
    left: var(--sidebar-width, 300px);
  }
  body:has(.sidebar-right:not(.sidebar-closed)) .v2-action-bar.layout-strip.pos-right {
    right: var(--sidebar-width, 300px);
  }
}

/* The side menu's open button stands clear of a strip along its own edge, or across the top: the strip is over that corner of the
   player (seen in the browser: a strip down the left covered the button, so the menu could not be opened) */
body:has(.v2-action-bar.layout-strip.pos-left) #sidebarToggleWrapper.sidebar-left-toggle:not(.toggle-style-arrow) {
  left: 85px;
}
body:has(.v2-action-bar.layout-strip.pos-right) #sidebarToggleWrapper.sidebar-right-toggle:not(.toggle-style-arrow) {
  right: 85px;
}
body:has(.v2-action-bar.layout-strip.pos-top) #sidebarToggleWrapper:not(.toggle-style-arrow) {
  margin-top: 65px;
}


/* Arabic and Hebrew (dir="rtl"): the bar is where the owner put it and its buttons stay in their order (previous, next, play, rooms),
   like the pan arrows: they are controls of the room, not a line of text */
[dir='rtl'] #v2ActionBar {
  direction: ltr;
}