* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #000;
  color: #fff;
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 40px;
  text-align: center;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}

/* If there is a fullscreen button the title bar must make space for it */
body.fullscreen-enabled #titleBar {
  right: 80px;
}

body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}

/* If there are multiple scenes the title bar must make space for the scene list toggle */
body.multiple-scenes #titleBar {
  left: 40px;
}

body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .tourAddress {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow: hidden;
}

#titleBar .tourAddressIcon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

#titleBar .sceneName {
  display: block;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  color: #fff;
  cursor: pointer;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

#titleBar .sceneName:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
}

.mobile #titleBar .tourAddress {
  gap: 6px;
  padding: 0 6px;
}

.mobile #titleBar .tourAddressIcon {
  width: 20px;
  height: 20px;
}

#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
  right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 50px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  left: -220px;
  padding-top: 40px;
  width: 220px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  -webkit-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 220px;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 15px 0 40px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Navigation list indicator: hollow white dot, filled green for current scene. */
#sceneList .scene .text::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
}

#sceneList .scene.current .text {
  color: #2ee6a6;
  font-weight: 500;
}

#sceneList .scene.current .text::before {
  border-color: #2ee6a6;
  background: #2ee6a6;
  box-shadow: 0 0 0 2px rgba(46,230,166,0.12);
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

.mobile #sceneList .scene .text::before {
  left: 15px;
}

.no-touch #sceneList .scene:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene.current {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* View control buttons */

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}



/* Client/property branding overlay. The logo is fixed to the viewport and
   does not move with the 360° panorama. */
#brandLogo {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 20;
  pointer-events: none;
  line-height: 0;
}

#brandLogo .brandLogoImage {
  display: block;
  width: 180px;
  height: auto;
  max-width: 20vw;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}

@media (max-width: 600px) {
  #brandLogo {
    right: 10px;
    bottom: 10px;
  }

  #brandLogo .brandLogoImage {
    width: 110px;
    max-width: 28vw;
  }
}

/* TEST v3: align replacement navigation hotspot with the original yaw/pitch anchor. */
.marzipano-demo-hotspot-wrapper {
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
}

/* Responsive scaling is applied by JS to the inner demo graphic only. The Marzipano wrapper remains unchanged. */
.marzipano-link-hotspot-visual { transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; }

/* Mobile-only size adjustment: scale the complete demo graphic as one object.
   Reduced from 0.92 to 0.63 to match the desktop visual proportion.
   The original .out/.in geometry and sonarEffect remain untouched. */
body.mobile .marzipano-link-hotspot-visual {
  -webkit-transform: scale(0.63);
  -moz-transform: scale(0.63);
  -ms-transform: scale(0.63);
  transform: scale(0.63);
}


/* =========================================================
   MODERN UI V1
   Visual-only layer. Marzipano engine, scenes, hotspots,
   aura/sonarEffect, touch and navigation logic are untouched.
   ========================================================= */

:root {
  --ui-bg: rgba(42, 47, 55, 0.76);
  --ui-bg-strong: rgba(42, 47, 55, 0.90);
  --ui-border: rgba(255,255,255,0.16);
  --ui-shadow: 0 8px 28px rgba(0,0,0,0.24);
  --ui-accent: #2ee6a6;
}

/* Cleaner typography */
html, body {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Top address/title ---------- */

#titleBar {
  top: 14px;
  left: 50% !important;
  right: auto !important;
  width: min(72vw, 560px);
  height: 42px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 30;
}

body.fullscreen-enabled #titleBar,
body.fullscreen-enabled.mobile #titleBar,
body.multiple-scenes #titleBar,
body.multiple-scenes.mobile #titleBar {
  left: 50% !important;
  right: auto !important;
}

#titleBar .tourAddress {
  width: 100%;
  height: 42px;
  padding: 0 15px;
  gap: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

#titleBar .tourAddressIcon {
  width: 18px;
  height: 18px;
  opacity: .9;
}

#titleBar .sceneName {
  height: 42px;
  line-height: 42px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
}

#titleBar .sceneName:hover {
  text-decoration: none;
  opacity: .82;
}

@media (max-width: 600px) {
  #titleBar {
    top: 10px;
    width: min(68vw, 420px);
    height: 40px;
  }

  #titleBar .tourAddress {
    height: 40px;
    padding: 0 12px;
    border-radius: 13px;
  }

  #titleBar .sceneName {
    height: 40px;
    line-height: 40px;
    font-size: 13px;
  }

  #titleBar .tourAddressIcon {
    width: 17px;
    height: 17px;
  }
}

/* ---------- Top action buttons ---------- */

#sceneListToggle,
#autorotateToggle,
#fullscreenToggle {
  width: 42px;
  height: 42px;
  padding: 0;
  top: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
  z-index: 31;
}

#sceneListToggle {
  left: 14px;
}

#autorotateToggle {
  right: 14px;
}

body.fullscreen-enabled #autorotateToggle {
  right: 64px;
}

#fullscreenToggle {
  right: 14px;
}

#sceneListToggle .icon,
#autorotateToggle .icon,
#fullscreenToggle .icon {
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
}

.no-touch #sceneListToggle:hover,
.no-touch #autorotateToggle:hover,
.no-touch #fullscreenToggle:hover {
  transform: translateY(-1px);
  background: rgba(30,35,43,.82);
  border-color: rgba(255,255,255,.25);
}

#sceneListToggle:active,
#autorotateToggle:active,
#fullscreenToggle:active {
  transform: scale(.96);
}

@media (max-width: 600px) {
  #sceneListToggle,
  #autorotateToggle,
  #fullscreenToggle {
    width: 44px;
    height: 44px;
    top: 10px;
    border-radius: 13px;
  }

  #sceneListToggle {
    left: 10px;
  }

  #autorotateToggle {
    right: 10px;
  }

  body.fullscreen-enabled.mobile #autorotateToggle {
    right: 62px;
  }

  #fullscreenToggle {
    right: 10px;
  }

  #sceneListToggle .icon,
  #autorotateToggle .icon,
  #fullscreenToggle .icon {
    top: 7px;
    right: 7px;
  }
}

/* ---------- Minimap button (placeholder) ---------- */
/* The button is intentionally visual-only for this version. The minimap itself
   will be added separately; no active state is used, matching the other controls. */
#minimapToggle {
  position: absolute;
  left: 66px;
  top: 14px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 31;
}

#minimapToggle .icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
}

.no-touch #minimapToggle:hover {
  transform: translateY(-1px);
  background: rgba(30,35,43,.82);
  border-color: rgba(255,255,255,.25);
}

#minimapToggle:active {
  transform: scale(.96);
}

@media (max-width: 600px) {
  /* On phones the minimap control stays at bottom-left.
     Autorotation remains available in the top-right, as in the original UI. */
  #autorotateToggle {
    display: block;
    right: 10px;
  }

  #minimapToggle {
    left: 10px;
    top: auto;
    bottom: 10px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  #minimapToggle .icon {
    top: 7px;
    right: 7px;
  }
}

/* ---------- Scene drawer ---------- */

#sceneList {
  top: 14px;
  left: 14px;
  width: 270px;
  max-height: calc(100% - 28px);
  padding-top: 54px;
  margin-left: -284px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.32);
  transition: margin-left .35s cubic-bezier(.2,.75,.25,1);
  z-index: 29;
}

#sceneList.enabled {
  margin-left: 0;
}

#sceneList .scenes {
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-bg-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow-y: auto;
}

#sceneList .scene {
  height: 42px;
  margin: 2px 0;
  border-radius: 10px;
  overflow: hidden;
  transition: background-color .16s ease, transform .16s ease;
}

#sceneList .scene .text {
  height: 42px;
  padding: 0 14px 0 42px;
  line-height: 42px;
  font-size: 14px;
  color: rgba(255,255,255,.88);
}

#sceneList .scene .text::before {
  left: 14px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-width: 1.5px;
}

#sceneList .scene.current {
  background: rgba(46,230,166,.12);
}

#sceneList .scene.current .text {
  color: var(--ui-accent);
  font-weight: 600;
}

#sceneList .scene.current .text::before {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  box-shadow: 0 0 0 4px rgba(46,230,166,.08);
}

.no-touch #sceneList .scene:hover {
  background: rgba(255,255,255,.08);
  transform: translateX(2px);
}

@media (max-width: 600px) {
  #sceneList {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    max-height: none;
    padding-top: 58px;
    margin-left: calc(-100% - 20px);
    border-radius: 16px;
  }

  #sceneList.enabled {
    margin-left: 0;
  }

  #sceneList .scenes {
    border-radius: 16px;
    padding: 8px;
  }

  #sceneList .scene,
  #sceneList .scene .text {
    height: 46px;
  }

  #sceneList .scene .text {
    line-height: 46px;
    font-size: 15px;
  }
}

/* ---------- Bottom desktop controls ---------- */

.viewControlButton {
  width: 42px;
  height: 42px;
  bottom: 16px;
  padding: 0;
  margin-left: 0;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  transition: transform .18s ease, background-color .18s ease;
}

.viewControlButton .icon {
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
}

.viewControlButton-1 { margin-left: -126px; }
.viewControlButton-2 { margin-left: -84px; }
.viewControlButton-3 { margin-left: -42px; }
.viewControlButton-4 { margin-left: 42px; }
.viewControlButton-5 { margin-left: 84px; }
.viewControlButton-6 { margin-left: 126px; }

.no-touch .viewControlButton:hover {
  transform: translateX(-50%) translateY(-2px);
  background: rgba(30,35,43,.82);
}

.viewControlButton:active {
  transform: translateX(-50%) scale(.96);
}

/* ---------- Brand logo: slightly cleaner presentation ---------- */

#brandLogo {
  right: 18px;
  bottom: 18px;
}

#brandLogo .brandLogoImage {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.48));
}

@media (max-width: 600px) {
  #brandLogo {
    right: 10px;
    bottom: 10px;
  }
}


/* =========================================================
   MODERN UI V1.1 - Android/Tablet hotspot color protection
   Scoped only to the existing Marzipano hotspot graphics.
   Prevents browser forced-dark transformations from changing
   the original hotspot colors on some Android tablets.
   ========================================================= */

#textInfo,
#textInfo .hotspot,
.demo-info-hotspot,
.demo-info-hotspot .out,
.demo-info-hotspot .in,
.demo-info-hotspot .tip {
  color-scheme: only light;
  -webkit-color-adjust: exact;
  color-adjust: exact;
}

/* =========================================================
   SCENE THUMBNAIL MENU - TEST
   Visual-only replacement for the text-only scene list.
   ========================================================= */
#sceneList {
  box-sizing: border-box;
  width: 318px;
  height: calc(100% - 28px);
  max-height: none;
  visibility: hidden;
  pointer-events: none;
  /* Keep the drawer completely outside the viewport when closed,
     including on tablets whose viewport is wider than the mobile breakpoint. */
  margin-left: 0;
  transform: translateX(calc(-100% - 14px));
  transition: transform .35s cubic-bezier(.2,.75,.25,1);
}

#sceneList.enabled {
  margin-left: 0;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

#sceneList .scenes {
  box-sizing: border-box;
  padding: 10px 22px 24px 10px;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#sceneList .scene {
  display: flex;
  align-items: center;
  width: 100%;
  height: 68px;
  margin: 4px 0;
  padding: 5px;
  gap: 0;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease;
  border: 1px solid transparent;
}

#sceneList .sceneThumb {
  display: block;
  flex: 0 0 92px;
  width: 92px;
  height: 56px;
  object-fit: cover;
  object-position: center;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
}

#sceneList .scene .text {
  position: static;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0 8px 0 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: rgba(255,255,255,.90);
  font-size: 14px;
  font-weight: 500;
}

/* Remove the old circular list marker when thumbnails are enabled. */
#sceneList .scene .text::before {
  display: none;
}

#sceneList .scene.current {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.24);
}

#sceneList .scene.current .text {
  color: rgba(255,255,255,.96);
  font-weight: 600;
}

#sceneList .scene.current .sceneThumb {
  box-shadow: 0 0 0 2px rgba(255,255,255,.62), 0 3px 10px rgba(0,0,0,.24);
}

.no-touch #sceneList .scene:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  transform: none !important;
}

@media (max-width: 600px) {
  #sceneList {
    width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    margin-left: 0;
    transform: translateX(calc(-100% - 10px));
  }

  #sceneList.enabled {
    margin-left: 0;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  #sceneList .scenes {
    box-sizing: border-box;
    padding: 10px 10px 24px;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #sceneList .scene {
    height: 76px;
    margin: 5px 0;
    padding: 6px;
    gap: 0;
    border-radius: 13px;
  }

  #sceneList .sceneThumb {
    flex-basis: 104px;
    width: 104px;
    height: 62px;
    border-radius: 10px;
  }

  #sceneList .scene .text {
    font-size: 15px;
    line-height: 1.25;
    padding-left: 12px;
  }
}

/* =========================================================
   MODERN UI V1.4 - STYLE 5 / DARK ELEGANT TEST
   Final visual pass based on the approved Style 5 reference.
   ========================================================= */

:root {
  --ui-bg: rgba(28, 33, 41, 0.92);
  --ui-bg-strong: rgba(25, 30, 38, 0.96);
  --ui-border: rgba(255,255,255,0.20);
  --ui-shadow: 0 10px 30px rgba(0,0,0,0.38);
}

/* Darker, more defined floating controls. */
#sceneListToggle,
#autorotateToggle,
#fullscreenToggle,
#minimapToggle,
.viewControlButton {
  background: rgba(25,30,38,.92);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 7px 22px rgba(0,0,0,.38);
}

.no-touch #sceneListToggle:hover,
.no-touch #autorotateToggle:hover,
.no-touch #fullscreenToggle:hover,
.no-touch #minimapToggle:hover,
.no-touch .viewControlButton:hover {
  background: rgba(32,38,47,.96);
  border-color: rgba(255,255,255,.30);
}

/* Dark elegant scene drawer. */
#sceneList .scenes {
  background: rgba(25,30,38,.96);
  border-color: rgba(255,255,255,.19);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

/* Stronger but neutral selected-scene contrast; no green accent. */
#sceneList .scene.current {
  background: rgba(255,255,255,.23) !important;
  border-color: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.08);
}

#sceneList .scene.current .text {
  color: rgba(255,255,255,.98);
  font-weight: 600;
}

#sceneList .scene.current .sceneThumb {
  box-shadow: 0 0 0 2px rgba(255,255,255,.78), 0 4px 12px rgba(0,0,0,.34);
}

/* Touch/tablet reinforcement: make the selected thumbnail row unmistakable
   without bringing back the old green accent. */
body.touch #sceneList .scene.current,
body.desktop #sceneList .scene.current {
  background: rgba(255,255,255,.30) !important;
  border-color: rgba(255,255,255,.68) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),
              0 0 0 1px rgba(255,255,255,.10);
}

/* Desktop/tablet scrollbar: use our own simple moving thumb.
   The native scrollbar is completely hidden so no browser-specific
   up/down arrow can appear above or below it. */
body.desktop #sceneList .scenes {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.desktop #sceneList .scenes::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.desktop #sceneList .scenes::-webkit-scrollbar-button,
body.desktop #sceneList .scenes::-webkit-scrollbar-track,
body.desktop #sceneList .scenes::-webkit-scrollbar-thumb,
body.desktop #sceneList .scenes::-webkit-scrollbar-corner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Reserve a slim gutter on desktop/tablet so the custom scrollbar never
   sits on top of a thumbnail or its text. The bar occupies this gutter. */
body.desktop #sceneList .scenes {
  padding-right: 22px;
}

/* Phones use their native touch scrolling and do not show the desktop/tablet bar. */
body.mobile .sceneScrollBar {
  display: none !important;
}

/* Custom scrollbar: only a thin rounded moving bar is visible. */
.sceneScrollBar {
  position: absolute;
  /* Keep the custom thumb inside the visible drawer, below its top header area. */
  top: 62px;
  right: 4px;
  bottom: 10px;
  width: 6px;
  z-index: 40;
  pointer-events: auto;
}

.sceneScrollBarTrack {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
}

.sceneScrollBarThumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  box-shadow: 0 1px 5px rgba(0,0,0,.28);
  cursor: pointer;
}

.sceneScrollBarThumb:hover {
  background: rgba(255,255,255,.64);
}

/* Strong, platform-independent selected state for touch tablets. */
@media (min-width: 601px) and (pointer: coarse) {
  #sceneList .scene.current {
    background: rgba(255,255,255,.36) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10),
                0 0 0 1px rgba(255,255,255,.12) !important;
  }

  #sceneList .scene.current .sceneThumb {
    box-shadow: 0 0 0 2px rgba(255,255,255,.92),
                0 4px 12px rgba(0,0,0,.34) !important;
  }
}

/* Tablet: make the selected thumbnail itself visibly different, not only its row. */
@media (min-width: 601px) and (pointer: coarse) {
  #sceneList .scene.current .sceneThumb {
    filter: brightness(1.22) contrast(1.08) !important;
    border: 2px solid rgba(255,255,255,.96) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.38),
                0 4px 12px rgba(0,0,0,.34) !important;
  }
}

/* Smartphone controls: all buttons use one identical 44px square.
   Icons are centered by the button itself, not by fixed offsets. */
body.mobile #sceneListToggle,
body.mobile #autorotateToggle,
body.mobile #minimapToggle {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

body.mobile #sceneListToggle {
  left: 10px;
}

body.mobile #sceneListToggle .icon,
body.mobile #autorotateToggle .icon,
body.mobile #minimapToggle .icon {
  width: 27px;
  height: 27px;
  left: 50%;
  top: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

/* Android phones keep the previously chosen bottom-left minimap. */
body.mobile:not(.ios-phone) #minimapToggle {
  left: 10px;
  right: auto;
  top: auto;
  bottom: 10px;
}

/* iPhone: the minimap replaces rotation in the top-right.
   This avoids covering the thumbnail panel when it is open. */
body.mobile.ios-phone #autorotateToggle {
  display: none;
}

body.mobile.ios-phone #minimapToggle {
  left: auto;
  right: 10px;
  top: 10px;
  bottom: auto;
}

/* Style 5 title bar: slightly darker and more solid. */
#titleBar .tourAddress {
  background: rgba(28,33,41,.92);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 7px 24px rgba(0,0,0,.34);
}

/* Keep the drawer fully outside the viewport when closed on all mobile
   orientations, including landscape phones. */
body.mobile #sceneList {
  box-sizing: border-box;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  max-height: none;
  padding-top: 58px;
  margin-left: 0;
  transform: translateX(calc(-100% - 10px));
  visibility: hidden;
  pointer-events: none;
}

body.mobile #sceneList.enabled {
  margin-left: 0;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

body.mobile #sceneList .scenes {
  box-sizing: border-box;
  height: 100%;
  max-height: none;
  padding-bottom: 24px;
}



/* ---------- Plan-only minimap ---------- */
#minimapPanel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}

#minimapPanel.enabled { display: flex; }

.minimapBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.minimapWindow {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 12px 12px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(25,29,36,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.minimapHeader {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 42px 0 5px;
  font-size: 17px;
  font-weight: 700;
}

.minimapHeaderIcon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.minimapHeaderIcon img { width: 25px; height: 25px; }

#minimapClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 27px;
  line-height: 30px;
  cursor: pointer;
}
#minimapClose:active { transform: scale(.96); }

.minimapFloorSelector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 5px 42px 8px 5px;
}

.minimapFloorButton {
  flex: 0 0 auto;
  min-width: 74px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font: 600 12px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.minimapFloorButton.active {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.34);
  color: #fff;
}

.minimapCanvas {
  width: 100%;
  max-height: calc(100vh - 128px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.minimapImageWrap {
  width: 100%;
  max-height: calc(100vh - 128px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#minimapImage {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 128px);
  object-fit: contain;
  transform-origin: center center;
  transition: transform .18s ease;
}

@media (max-width: 600px) {
  #minimapPanel { align-items: center; }

  .minimapWindow {
    width: min(350px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 10px 10px 8px;
    border-radius: 16px;
  }

  .minimapHeader {
    height: 31px;
    font-size: 15px;
  }

  .minimapFloorSelector {
    margin: 4px 38px 6px 4px;
    gap: 5px;
  }

  .minimapFloorButton {
    min-width: 68px;
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }

  .minimapCanvas,
  .minimapImageWrap {
    max-height: calc(100vh - 118px);
  }

  /* iPhone: keep the plan clearly separated from the close button.
     The supplied plan remains unchanged; only its displayed scale is reduced. */
  .minimapImageWrap {
    width: 82%;
    max-width: 285px;
    margin: 5px auto 0;
  }

  #minimapImage {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 118px);
  }
}

/* ========================================================================== 
   UNIVERSAL RESPONSIVE CONTRACT v1.7.0
   Single source of truth for phone controls and minimap sizing.
   This block intentionally comes last so legacy demo rules cannot override it.
   ========================================================================== */

/* The multi-floor prototype uses pre-oriented image files, never CSS transforms. */
#minimapImage {
  transform: none !important;
  transition: none !important;
}

/* Modal uses the actually visible viewport. 100vh is fallback for older engines. */
.minimapWindow {
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  display: flex;
  flex-direction: column;
}
.minimapCanvas {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.minimapImageWrap {
  width: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
#minimapImage {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 142px);
  max-height: calc(100svh - 142px);
  object-fit: contain;
}

/* Phones: one layout contract for iOS, Android and other touch browsers. */
@media (max-width: 600px), (max-height: 600px) and (pointer: coarse) {
  #sceneListToggle,
  #minimapToggle,
  #fullscreenToggle,
  #autorotateToggle {
    width: 44px !important;
    height: 44px !important;
    top: 10px !important;
    bottom: auto !important;
    padding: 0 !important;
    border-radius: 13px !important;
  }

  #sceneListToggle { left: 10px !important; right: auto !important; }

  /* Rotation is replaced by the minimap on every smartphone. */
  #autorotateToggle { display: none !important; }

  /* Fullscreen is rightmost when the browser supports it. */
  #fullscreenToggle { right: 10px !important; left: auto !important; }

  /* Without fullscreen (e.g. iPhone) minimap is rightmost; with fullscreen it
     automatically moves one button slot left. */
  #minimapToggle {
    left: auto !important;
    right: 10px !important;
  }
  body.fullscreen-enabled #minimapToggle { right: 62px !important; }

  #sceneListToggle .icon,
  #minimapToggle .icon,
  #fullscreenToggle .icon,
  #autorotateToggle .icon {
    width: 27px !important;
    height: 27px !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Address bar fills only the safe space between left and right controls. */
  #titleBar,
  body.multiple-scenes #titleBar,
  body.multiple-scenes.mobile #titleBar,
  body.fullscreen-enabled #titleBar,
  body.fullscreen-enabled.mobile #titleBar {
    top: 10px !important;
    left: 62px !important;
    right: 62px !important;
    width: auto !important;
    height: 44px !important;
    transform: none !important;
  }
  body.fullscreen-enabled #titleBar,
  body.fullscreen-enabled.mobile #titleBar {
    right: 114px !important;
  }
  #titleBar .tourAddress,
  #titleBar .sceneName { height: 44px !important; }
  #titleBar .sceneName { line-height: 44px !important; }

  /* Drawer uses the same phone breakpoint as JavaScript. */
  body.mobile #sceneList {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    height: calc(100svh - 20px);
  }

  /* Compact, centered minimap. Header and close button own their own space. */
  #minimapPanel {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .minimapWindow {
    width: min(350px, 100%);
    max-height: calc(100vh - 24px);
    max-height: calc(100svh - 24px);
    padding: 10px;
  }
  .minimapHeader {
    flex: 0 0 34px;
    height: 34px;
    padding-right: 44px;
  }
  .minimapFloorSelector {
    flex: 0 0 auto;
    width: 100%;
    margin: 4px 0 8px;
    padding: 0 42px 0 0;
    gap: 5px;
  }
  .minimapFloorButton {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    padding: 0 5px;
  }
  .minimapImageWrap {
    width: 88%;
    max-width: 285px;
    margin: 0 auto;
  }
  #minimapImage {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 138px);
    max-height: calc(100svh - 138px);
  }
}

/* ========================================================================== 
   TABLET MINIMAP COMPATIBILITY v1.7.1
   Robust fallback for coarse-pointer tablet browsers (including Chrome Android).
   Keep phone and desktop contracts untouched.
   ========================================================================== */
@media (min-width: 601px) and (min-height: 601px) and (pointer: coarse) {
  /* Do not rely on flex centering for the modal on tablet engines. */
  #minimapPanel.enabled {
    display: block !important;
  }

  #minimapPanel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .minimapWindow {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 430px !important;
    max-width: calc(100% - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100svh - 32px) !important;
    margin: 0 !important;
  }

  /* Explicit spacing: no dependency on flex-gap in the floor selector. */
  .minimapFloorSelector {
    gap: 0 !important;
  }
  .minimapFloorButton + .minimapFloorButton {
    margin-left: 8px !important;
  }
}

/* =========================================================
   AGENCY SOCIAL PANEL TEST v1.8.0
   Isolated from the universal responsive controls/minimap.
   ========================================================= */
.agencyContact {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 20;
  line-height: 0;
}

#agencyContact #brandLogo {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  pointer-events: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#agencyContact #brandLogo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
  border-radius: 4px;
}

.agencySocialPanel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: block;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 8px;
  border-radius: 12px;
  background: rgba(32, 35, 39, 0.94);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.agencySocialPanel.enabled {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.agencySocialLink {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 9px;
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  -webkit-tap-highlight-color: transparent;
}
.agencySocialLink + .agencySocialLink { margin-left: 8px; }
.agencySocialLink img { display:block; width:28px; height:28px; }
.agencySocialLink:hover, .agencySocialLink:focus-visible { background: rgba(255,255,255,0.17); outline: none; }

@media (max-width: 600px) {
  .agencyContact { right: 10px; bottom: 10px; }
  .agencySocialPanel { padding: 7px; bottom: calc(100% + 8px); }
  .agencySocialLink { width: 40px; height: 40px; }
  .agencySocialLink + .agencySocialLink { margin-left: 7px; }
  .agencySocialLink img { width: 27px; height: 27px; }
}

/* =========================================================
   AGENCY LOGO AFFORDANCE TEST A - BUTTON FRAME v1.8.1A
   Visual-only layer. Social panel behavior is unchanged.
   ========================================================= */
#agencyContact #brandLogo {
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  background: rgba(32,35,39,.82);
  box-shadow: 0 3px 12px rgba(0,0,0,.28);
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
#agencyContact #brandLogo:hover,
#agencyContact #brandLogo:focus-visible {
  background: rgba(32,35,39,.94);
  border-color: rgba(255,255,255,.42);
}
#agencyContact #brandLogo:active { transform: scale(.97); }
@media (max-width: 600px) {
  #agencyContact #brandLogo { padding: 6px 8px; border-radius: 10px; }
}

/* =========================================================
   UI TRANSPARENCY TEST v1.8.2
   Match the primary tour controls and address bar to the
   approved agency-logo button transparency. Visual-only.
   ========================================================= */
#sceneListToggle,
#autorotateToggle,
#fullscreenToggle,
#minimapToggle,
.viewControlButton,
#titleBar .tourAddress {
  background: rgba(32,35,39,.82) !important;
  border-color: rgba(255,255,255,.24) !important;
}

.no-touch #sceneListToggle:hover,
.no-touch #autorotateToggle:hover,
.no-touch #fullscreenToggle:hover,
.no-touch #minimapToggle:hover,
.no-touch .viewControlButton:hover,
.no-touch #titleBar .tourAddress:hover {
  background: rgba(32,35,39,.94) !important;
  border-color: rgba(255,255,255,.42) !important;
}

/* ========================================================================== 
   UNIFIED UI SURFACES v1.8.3
   Final visual override: one material language for controls, drawers, modal
   surfaces and agency contact UI. Functional/responsive contracts untouched.
   ========================================================================== */
:root {
  --ui-surface: rgba(32,35,39,.82);
  --ui-surface-hover: rgba(32,35,39,.94);
  --ui-surface-border: rgba(255,255,255,.24);
  --ui-surface-border-hover: rgba(255,255,255,.42);
  --ui-surface-shadow: 0 3px 12px rgba(0,0,0,.28);
  --ui-surface-radius: 12px;
}

/* Primary controls and title bar share the exact same surface treatment. */
#sceneListToggle,
#autorotateToggle,
#fullscreenToggle,
#minimapToggle,
.viewControlButton,
#titleBar .tourAddress,
#agencyContact #brandLogo {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-surface-border) !important;
  box-shadow: var(--ui-surface-shadow) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

#sceneListToggle,
#autorotateToggle,
#fullscreenToggle,
#minimapToggle,
.viewControlButton,
#agencyContact #brandLogo {
  border-radius: var(--ui-surface-radius) !important;
}

.no-touch #sceneListToggle:hover,
.no-touch #autorotateToggle:hover,
.no-touch #fullscreenToggle:hover,
.no-touch #minimapToggle:hover,
.no-touch .viewControlButton:hover,
.no-touch #titleBar .tourAddress:hover,
.no-touch #agencyContact #brandLogo:hover {
  background: var(--ui-surface-hover) !important;
  border-color: var(--ui-surface-border-hover) !important;
}

/* Scene drawer: transparent like the controls, while thumbnails/text remain opaque. */
#sceneList .scenes {
  background: var(--ui-surface) !important;
  border-color: var(--ui-surface-border) !important;
  box-shadow: var(--ui-surface-shadow) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Minimap and social popup use the same material. The plan image itself is untouched. */
.minimapWindow,
.agencySocialPanel {
  background: var(--ui-surface) !important;
  border-color: var(--ui-surface-border) !important;
  box-shadow: var(--ui-surface-shadow) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Phone logo sizing is explicit so width changes cannot enlarge it after rotation. */
@media (max-width: 600px), (max-height: 600px) and (pointer: coarse) {
  #agencyContact #brandLogo .brandLogoImage {
    width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
  }
}

/* Smartphone landscape is deliberately compact: vertical space is the scarce axis.
   This is viewport-based, not browser/OS detection, and therefore remains portable. */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #agencyContact #brandLogo .brandLogoImage {
    width: 94px !important;
    max-width: 94px !important;
  }
  #agencyContact #brandLogo {
    padding: 5px 7px !important;
  }

  #sceneListToggle,
  #autorotateToggle,
  #fullscreenToggle,
  #minimapToggle {
    width: 40px !important;
    height: 40px !important;
    top: 8px !important;
  }
  #sceneListToggle { left: 8px !important; }
  #fullscreenToggle { right: 8px !important; }
  #minimapToggle { right: 8px !important; }
  body.fullscreen-enabled #minimapToggle { right: 56px !important; }

  #sceneListToggle .icon,
  #minimapToggle .icon,
  #fullscreenToggle .icon,
  #autorotateToggle .icon {
    width: 25px !important;
    height: 25px !important;
  }

  #titleBar,
  body.multiple-scenes #titleBar,
  body.multiple-scenes.mobile #titleBar,
  body.fullscreen-enabled #titleBar,
  body.fullscreen-enabled.mobile #titleBar {
    top: 8px !important;
    left: 56px !important;
    right: 56px !important;
    height: 40px !important;
  }
  body.fullscreen-enabled #titleBar,
  body.fullscreen-enabled.mobile #titleBar {
    right: 104px !important;
  }
  #titleBar .tourAddress,
  #titleBar .sceneName {
    height: 40px !important;
  }
  #titleBar .sceneName {
    line-height: 40px !important;
  }
}

/* =========================================================
   FINAL STRUCTURAL POLISH v1.8.4A
   - phone scene drawer sizes to its real content (width + height)
   - selected scene/floor uses outline only: no light fill/filter
   - intentionally does NOT alter the agency social controls
   ========================================================= */

/* Cross-browser selected state: preserve the same dark material and use a
   clearer white perimeter. Avoid filter/backdrop-dependent selection cues. */
#sceneList .scene.current,
body.touch #sceneList .scene.current,
body.desktop #sceneList .scene.current {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) !important;
}

#sceneList .scene.current .sceneThumb,
body.touch #sceneList .scene.current .sceneThumb,
body.desktop #sceneList .scene.current .sceneThumb {
  filter: none !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.20) !important;
}

#sceneList .scene.current .text {
  color: rgba(255,255,255,.98) !important;
  font-weight: 600;
}

.minimapFloorButton.active {
  background: rgba(255,255,255,.06) !important;
  border: 2px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) !important;
  color: #fff !important;
}

/* Phones: the drawer follows the longest actual row and the real list height.
   It may grow only up to a safe viewport limit; beyond that it scrolls. This
   intentionally leaves a tappable strip of panorama to the right. */
@media (max-width: 600px), (max-height: 600px) and (pointer: coarse) {
  body.mobile #sceneList {
    top: 10px !important;
    left: 10px !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
    max-width: 78vw !important;
    height: auto !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding-top: 58px !important;
    overflow: visible !important;
    margin-left: 0 !important;
    transform: translateX(calc(-100% - 20px));
  }

  body.mobile #sceneList.enabled {
    transform: translateX(0) !important;
  }

  body.mobile #sceneList .scenes {
    box-sizing: border-box;
    width: max-content !important;
    max-width: 78vw !important;
    height: auto !important;
    max-height: calc(100vh - 88px) !important;
    max-height: calc(100dvh - 88px) !important;
    padding: 10px 10px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile #sceneList .scene {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile #sceneList .scene .text {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(78vw - 138px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 10px !important;
  }
}

/* =========================================================
   v1.8.4B - neutral scene hover
   Hover must never imitate the selected/current scene.
   Selection remains exclusively the white perimeter above.
   ========================================================= */
.no-touch #sceneList .scene:hover,
body.desktop #sceneList .scene:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Keep the actual current scene visibly selected even while hovered. */
.no-touch #sceneList .scene.current:hover,
body.desktop #sceneList .scene.current:hover {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) !important;
}

/* =========================================================
   v1.8.4D - definitive current-scene indicator
   Keep hover neutral. The CURRENT scene alone gets a clear white perimeter
   on both its row and its thumbnail, without any lightening/filter.
   ========================================================= */
#sceneList .scene.current,
body.mobile #sceneList .scene.current,
body.touch #sceneList .scene.current,
body.desktop #sceneList .scene.current,
.no-touch #sceneList .scene.current:hover,
body.desktop #sceneList .scene.current:hover {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.16) !important;
  filter: none !important;
  transform: none !important;
}

#sceneList .scene.current .sceneThumb,
body.mobile #sceneList .scene.current .sceneThumb,
body.touch #sceneList .scene.current .sceneThumb,
body.desktop #sceneList .scene.current .sceneThumb {
  filter: none !important;
  outline: 2px solid rgba(255,255,255,.92) !important;
  outline-offset: -2px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.20) !important;
}

.no-touch #sceneList .scene:not(.current):hover,
body.desktop #sceneList .scene:not(.current):hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
/* v1.8.4D definitive current-scene indicator */
#sceneList .scene.current,body.mobile #sceneList .scene.current,body.touch #sceneList .scene.current,body.desktop #sceneList .scene.current,.no-touch #sceneList .scene.current:hover,body.desktop #sceneList .scene.current:hover{background:transparent!important;border:2px solid rgba(255,255,255,.92)!important;box-shadow:0 0 0 1px rgba(0,0,0,.16)!important;filter:none!important;transform:none!important}
#sceneList .scene.current .sceneThumb,body.mobile #sceneList .scene.current .sceneThumb,body.touch #sceneList .scene.current .sceneThumb,body.desktop #sceneList .scene.current .sceneThumb{filter:none!important;outline:2px solid rgba(255,255,255,.92)!important;outline-offset:-2px!important;box-shadow:0 2px 8px rgba(0,0,0,.20)!important}
.no-touch #sceneList .scene:not(.current):hover,body.desktop #sceneList .scene:not(.current):hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important;filter:none!important;transform:none!important}

/* =========================================================
   v1.8.4E - coherent selected state
   Same material cue used inside the social panel:
   subtle inner fill + standard UI border. Hover stays neutral.
   ========================================================= */
#sceneList .scene.current,
body.mobile #sceneList .scene.current,
body.touch #sceneList .scene.current,
body.desktop #sceneList .scene.current,
.no-touch #sceneList .scene.current:hover,
body.desktop #sceneList .scene.current:hover {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--ui-surface-border) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* The photo itself is not filtered or separately outlined: selection belongs
   to the whole row, exactly like the inner social-button surface. */
#sceneList .scene.current .sceneThumb,
body.mobile #sceneList .scene.current .sceneThumb,
body.touch #sceneList .scene.current .sceneThumb,
body.desktop #sceneList .scene.current .sceneThumb {
  filter: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.20) !important;
}

/* Non-current desktop hover remains visually neutral. */
.no-touch #sceneList .scene:not(.current):hover,
body.desktop #sceneList .scene:not(.current):hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Minimap floors use the same selected-state language. */
.minimapFloorButton.active {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--ui-surface-border) !important;
  box-shadow: none !important;
  color: #fff !important;
}