/* Bottom Dock Navigation */

.toggle-dock {
  position: absolute;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primary-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  transition: all 0.3s ease;
}
.toggle-dock:hover {
  background: var(--bg-dark-hover);
  transform: scale(1.05);
}

#sceneDock {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  padding: 8px;
  width: 100%;
  background: var(--primary-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 0.4s,
    margin 0.4s,
    bottom 0.4s,
    border-radius 0.4s;
  z-index: 40;
}

/* Modifiers */
body.gallery-floating #sceneDock {
  bottom: var(--gallery-margin, 5px);
  width: max-content;
  max-width: calc(100% - 30px);
  border-radius: 24px;
  border: 1px solid var(--glass-border);
}

/* Widths */
body.gallery-w-compact #sceneDock {
  width: max-content;
  max-width: 50vw !important;
}
body.gallery-w-standard #sceneDock {
  width: max-content;
  max-width: 75vw !important;
}
body.gallery-w-wide #sceneDock {
  width: max-content;
  max-width: 95vw !important;
}
body.gallery-w-full #sceneDock {
  width: 100vw;
  max-width: 100vw;
  border-radius: 0;
  border-inline-start: none;
  border-inline-end: none;
  border-bottom: none;
}

/* Edge Strip specifically removes side margins and attaches to bottom */
body.gallery-strip #sceneDock {
  bottom: 0;
  border-radius: 0;
  border-inline-start: none;
  border-inline-end: none;
  border-bottom: none;
  width: 100%;
}

/* Sidebar Avoidance for FULL WIDTH ONLY (whether strip or floating) */
body:has(.sidebar-left:not(.sidebar-closed)).gallery-w-full #sceneDock,
body:has(.sidebar-left:not(.sidebar-closed)).gallery-strip #sceneDock {
  width: calc(100% - var(--sidebar-width, 300px));
  margin-left: calc(var(--sidebar-width, 300px) / 2);
}
body:has(.sidebar-right:not(.sidebar-closed)).gallery-w-full #sceneDock,
body:has(.sidebar-right:not(.sidebar-closed)).gallery-strip #sceneDock {
  width: calc(100% - var(--sidebar-width, 300px));
  margin-right: calc(var(--sidebar-width, 300px) / 2);
}

.dock-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

#v2GalleryList {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
  border-radius: 16px;
  /* Firefox Fallback */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.95) transparent;
}
/* Allow transition on Firefox when hovering the container */
#v2GalleryList:hover {
  scrollbar-color: var(--accent-dark, rgba(0, 0, 0, 0.5)) transparent;
}

#v2GalleryList::-webkit-scrollbar {
  height: 10px;
  background: transparent;
}
#v2GalleryList::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  margin: 0 4px;
}
#v2GalleryList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#v2GalleryList::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark, rgba(0, 0, 0, 0.5));
}
#v2GalleryList::-webkit-scrollbar-button {
  display: none;
}

.scenes-track {
  display: flex;
  gap: 12px;
  padding: 4px;
}

.gallery-scroll-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  width: 28px;
  height: 60px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed);
  flex-shrink: 0;
  z-index: 10;
}
.gallery-scroll-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}
.gallery-scroll-btn:active {
  transform: scale(0.95);
}
.gallery-scroll-btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
#sceneDock.expanded-gallery .gallery-scroll-btn {
  display: none !important;
}

body.thumb-size-small {
  --gallery-thumb-width: 100px;
  --gallery-thumb-height: 60px;
  --gallery-label-font: 0.65rem;
}
body.thumb-size-medium {
  --gallery-thumb-width: 140px;
  --gallery-thumb-height: 80px;
  --gallery-label-font: 0.85rem;
}
body.thumb-size-large {
  --gallery-thumb-width: 200px;
  --gallery-thumb-height: 110px;
  --gallery-label-font: 0.95rem;
}

/* Expanded Gallery Independent Sizing Overrides */
body.expanded-thumb-size-small #sceneDock.expanded-gallery {
  --gallery-thumb-width: 100px;
  --gallery-thumb-height: 60px;
  --gallery-label-font: 0.65rem;
}
body.expanded-thumb-size-medium #sceneDock.expanded-gallery {
  --gallery-thumb-width: 140px;
  --gallery-thumb-height: 80px;
  --gallery-label-font: 0.85rem;
}
body.expanded-thumb-size-large #sceneDock.expanded-gallery {
  --gallery-thumb-width: 200px;
  --gallery-thumb-height: 110px;
  --gallery-label-font: 0.95rem;
}

.scene-thumb {
  position: relative;
  width: var(--gallery-thumb-width, 140px);
  height: var(--gallery-thumb-height, 80px);

  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all var(--transition-speed);
  flex-shrink: 0;
}

.thumb-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition:
    filter var(--transition-speed),
    transform var(--transition-speed);
}

.scene-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  background: var(--primary-bg);
  backdrop-filter: var(--glass-blur);
  opacity: 0;
  transition: all var(--transition-speed);
  pointer-events: none;
  word-break: break-word;
  white-space: normal;
}

.scene-thumb:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.scene-thumb:hover .thumb-background {
  filter: brightness(0.9);
  transform: scale(1.05);
}
.scene-thumb:hover .scene-label {
  opacity: 1;
}

/* Active State: in the tour's Secondary colour where it chose one (--pal-secondary, set only then), else the panels' accent as before */
.scene-thumb.current {
  border-color: var(--pal-secondary, var(--accent));
  box-shadow: 0 0 15px var(--pal-secondary-glow, var(--accent-glow));
}
.scene-thumb.current .thumb-background {
  filter: brightness(1);
}
.scene-thumb.current .scene-label {
  color: var(--pal-secondary, var(--accent));
}

body.view-control-buttons .view-controls {
  display: flex;
}
.view-controls {
  display: none;
  position: absolute;
  /* position set by body layout modifiers below */
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  z-index: 100;
}

/* Nav Controls Positioning Modifiers */
body.ctrl-bottom-right .view-controls {
  bottom: 15px;
  right: 20px;
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.ctrl-bottom-left .view-controls {
  bottom: 15px;
  left: 20px;
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.ctrl-top-right .view-controls {
  top: 80px;
  right: 20px;
}
body.ctrl-top-left .view-controls {
  top: 80px;
  left: 20px;
}
body.ctrl-center-right .view-controls {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
body.ctrl-center-left .view-controls {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
body.ctrl-top-middle .view-controls {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body:has(#topBar).ctrl-top-middle .view-controls {
  top: 96px;
}
body.top-bar-fixed:has(#topBar).ctrl-top-middle .view-controls {
  top: 81px;
}
body:has(#titleDropdownToggle.open).ctrl-top-middle .view-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

/* Match Gallery Toggle Button Geometry */
body.ctrl-bottom-right #v2GalleryToggle {
  bottom: 15px;
  right: 80px;
  left: auto;
  top: auto;
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.ctrl-bottom-left #v2GalleryToggle {
  bottom: 15px;
  left: 80px;
  right: auto;
  top: auto;
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.ctrl-top-right #v2GalleryToggle {
  top: 80px;
  right: 80px;
  left: auto;
  bottom: auto;
}
body.ctrl-top-left #v2GalleryToggle {
  top: 80px;
  left: 80px;
  right: auto;
  bottom: auto;
}
body.ctrl-center-right #v2GalleryToggle {
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  left: auto;
  bottom: auto;
}
body.ctrl-center-left #v2GalleryToggle {
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  right: auto;
  bottom: auto;
}
body.ctrl-bottom-middle #v2GalleryToggle,
body.ctrl-top-middle #v2GalleryToggle {
  bottom: 15px;
  right: 20px;
  left: auto;
  top: auto;
}

/* Horizontal Layout overrides for center stacking (Highly Dynamic) */
body.ctrl-bottom-middle .view-controls,
body.ctrl-top-middle .view-controls {
  flex-direction: row;
  border-radius: 50px;
}
body.ctrl-bottom-middle .view-controls {
  bottom: 15px; /* Default flush to bottom when gallery hidden/missing */
  left: 50%;
  transform: translateX(-50%);
  transition:
    bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s ease;
}
body.ctrl-bottom-middle .viewControlButton,
body.ctrl-top-middle .viewControlButton {
  border-bottom: none;
  border-right: 1px solid var(--glass-border);
}
body.ctrl-bottom-middle .viewControlButton:last-child,
body.ctrl-top-middle .viewControlButton:last-child {
  border-right: none;
}

/* --- HORIZONTAL CORNERS MODIFIERS --- */
body.ctrl-horizontal.ctrl-bottom-right .view-controls,
body.ctrl-horizontal.ctrl-bottom-left .view-controls,
body.ctrl-horizontal.ctrl-top-right .view-controls,
body.ctrl-horizontal.ctrl-top-left .view-controls {
  flex-direction: row;
  border-radius: 50px;
}
body.ctrl-horizontal.ctrl-bottom-right .viewControlButton,
body.ctrl-horizontal.ctrl-bottom-left .viewControlButton,
body.ctrl-horizontal.ctrl-top-right .viewControlButton,
body.ctrl-horizontal.ctrl-top-left .viewControlButton {
  border-bottom: none;
  border-right: 1px solid var(--glass-border);
}
body.ctrl-horizontal.ctrl-bottom-right .viewControlButton:last-child,
body.ctrl-horizontal.ctrl-bottom-left .viewControlButton:last-child,
body.ctrl-horizontal.ctrl-top-right .viewControlButton:last-child,
body.ctrl-horizontal.ctrl-top-left .viewControlButton:last-child {
  border-right: none;
}

/* Push Toggle Button 280px away instead of 80px when horizontal */
body.ctrl-horizontal.ctrl-bottom-right #v2GalleryToggle,
body.ctrl-horizontal.ctrl-top-right #v2GalleryToggle {
  right: 280px;
}
body.ctrl-horizontal.ctrl-bottom-left #v2GalleryToggle,
body.ctrl-horizontal.ctrl-top-left #v2GalleryToggle {
  left: 280px;
}

/* --- DYNAMIC CLEARANCES AROUND DOCK --- */

/* 1. Push up tightly if Dock is fully active */
body:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-middle .view-controls {
  bottom: var(--dynamic-dock-clearance, 150px);
  opacity: 1;
}
body:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-right .view-controls,
body:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-right #v2GalleryToggle {
  bottom: 120px;
}
body:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-left .view-controls,
body:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-left #v2GalleryToggle {
  bottom: 120px;
}
/* ...but only where the thumbnails reach under them: beside a narrow strip of thumbnails in the middle of the player, the bar
   in a corner stays at the foot (gallery.js says when: body.dock-clear-of-controls) */
body.dock-clear-of-controls:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-right .view-controls,
body.dock-clear-of-controls:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-right #v2GalleryToggle,
body.dock-clear-of-controls:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-left .view-controls,
body.dock-clear-of-controls:has(#sceneDock:not(.dock-hidden):not(.dock-minimized)).ctrl-bottom-left #v2GalleryToggle {
  bottom: 15px;
}

.viewControlButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition-speed);
}
.viewControlButton:last-child {
  border-bottom: none;
}
.viewControlButton:hover {
  background: rgba(255, 255, 255, 0.15);
}
.viewControlButton .icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.expand-tab {
  position: absolute;
  top: -40px;
  inset-inline-start: 20px;
  width: auto;
  padding: 0 16px;
  height: 40px;
  background: var(--primary-bg);
  backdrop-filter: var(--glass-blur);
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery-window-controls {
  gap: 16px;
}
.g-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  padding: 0;
}
.g-btn svg {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gallery-window-controls:hover .g-btn svg {
  opacity: 1;
}
.g-minimize {
  background: #ff5f56;
  color: #721310;
}
.g-normal {
  background: #ffbd2e;
  color: #73510c;
}
.g-expand {
  background: #27c93f;
  color: #125e17;
}

.g-btn:hover {
  filter: brightness(1.2);
}

/* Window Controls Active State Fading */
#sceneDock.dock-minimized .g-minimize,
#sceneDock.expanded-gallery .g-expand,
#sceneDock:not(.dock-minimized):not(.expanded-gallery) .g-normal {
  opacity: 0.3;
  pointer-events: none;
}

/* Prevent active window button from showing its inner icon when tab is hovered */
#sceneDock.dock-minimized .gallery-window-controls:hover .g-minimize svg,
#sceneDock.expanded-gallery .gallery-window-controls:hover .g-expand svg,
#sceneDock:not(.dock-minimized):not(.expanded-gallery)
  .gallery-window-controls:hover
  .g-normal
  svg {
  opacity: 0;
}

/* Expanded Gallery State */
#sceneDock.expanded-gallery {
  /* Keep the original positioning so it expands cleanly upwards from the bottom dock line */
  display: flex; /* prevents empty ruleset warning */
}
#sceneDock.expanded-gallery .dock-container {
  width: 100%;
}
#sceneDock.expanded-gallery .expand-tab svg {
  transform: rotate(180deg);
}
#sceneDock.expanded-gallery #v2GalleryList {
  width: 100%;
  max-height: 60vh;
  max-width: none;
  overflow-y: auto;
  overflow-x: hidden;
}
#sceneDock.expanded-gallery #v2GalleryList::-webkit-scrollbar {
  width: 6px;
  height: auto;
}
#sceneDock.expanded-gallery .scenes-track {
  flex-wrap: wrap;
  justify-content: center;
}
#sceneDock.dock-hidden {
  transform: translate(
    -50%,
    calc(100% + var(--gallery-margin, 5px) + 40px)
  ); /* Push entirely away so even tab is offscreen */
}
#sceneDock.dock-minimized {
  transform: translate(
    -50%,
    calc(100% + var(--gallery-margin, 5px))
  ); /* Leaves the top tab visibly sitting on the bottom border */
}

/* User Settings Utility Classes */
#sceneDock.gallery-width-wide #v2GalleryList {
  max-width: 66vw; /* Wide Layout (66%) */
}

/* Columns Math - Explicit Matrix to avoid calc() variable scope bugs */
/* Small Thumbs (100px) */
body.expanded-thumb-size-small.columns-3 #sceneDock.expanded-gallery {
  width: 356px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-small.columns-4 #sceneDock.expanded-gallery {
  width: 468px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-small.columns-5 #sceneDock.expanded-gallery {
  width: 580px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-small.columns-6 #sceneDock.expanded-gallery {
  width: 692px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-small.columns-7 #sceneDock.expanded-gallery {
  width: 804px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-small.columns-8 #sceneDock.expanded-gallery {
  width: 916px !important;
  max-width: calc(100vw - 40px) !important;
}

/* Medium Thumbs (140px) */
body.expanded-thumb-size-medium.columns-3 #sceneDock.expanded-gallery {
  width: 476px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-medium.columns-4 #sceneDock.expanded-gallery {
  width: 628px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-medium.columns-5 #sceneDock.expanded-gallery {
  width: 780px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-medium.columns-6 #sceneDock.expanded-gallery {
  width: 932px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-medium.columns-7 #sceneDock.expanded-gallery {
  width: 1084px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-medium.columns-8 #sceneDock.expanded-gallery {
  width: 1236px !important;
  max-width: calc(100vw - 40px) !important;
}

/* Large Thumbs (200px) */
body.expanded-thumb-size-large.columns-3 #sceneDock.expanded-gallery {
  width: 656px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-large.columns-4 #sceneDock.expanded-gallery {
  width: 868px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-large.columns-5 #sceneDock.expanded-gallery {
  width: 1080px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-large.columns-6 #sceneDock.expanded-gallery {
  width: 1292px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-large.columns-7 #sceneDock.expanded-gallery {
  width: 1504px !important;
  max-width: calc(100vw - 40px) !important;
}
body.expanded-thumb-size-large.columns-8 #sceneDock.expanded-gallery {
  width: 1716px !important;
  max-width: calc(100vw - 40px) !important;
}

/* Arabic and Hebrew (dir="rtl"): the row starts on the right, so the first scroll button is there and goes right; its chevron turns */
[dir='rtl'] .gallery-scroll-btn svg {
  transform: scaleX(-1);
}