* {
  -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,
#agencyContact #brandLogo.agencyAutoPress { 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;
}
\n\n/* UNIVERSAL IMPORTER V2: drawer surface starts below the independent toggle.\n   Removes the transparent continuation/ghost strip on bright panoramas. */\n@media (min-width: 601px) {\n  #sceneList {\n    top: 50px !important;\n    padding-top: 0 !important;\n    max-height: calc(100% - 60px) !important;\n  }\n  #sceneList .scenes {\n    max-height: calc(100vh - 70px) !important;\n  }\n  .sceneScrollBar { top: 12px !important; }\n}\n/* A tour without a supplied plan never inherits another property's minimap. */\nbody.no-minimap #minimapToggle,\nbody.no-minimap #minimapPanel { display: none !important; }\n

/* V3 SAFE FIX: the drawer parent reserves space for the independent toggle.
   Its old shadow outlined that transparent reserved area as a ghost shape.
   Remove only the parent shadow; the .scenes surface, geometry and behavior stay unchanged. */
#sceneList { box-shadow: none !important; }

/* V3 SAFE FIX: no plan supplied. Keep minimap control in layout, but inactive. */
body.no-minimap #minimapToggle { display: block !important; }
body.no-minimap #minimapToggle.enabled { display: block !important; }
body.no-minimap #minimapToggle[aria-disabled="true"] { cursor: default; }
#minimapPanel { display: none !important; }

/* V4 SAFE FIX: keep the reserved toggle gap geometrically identical, but do not
   use parent padding for it. The visible drawer surface starts on .scenes only.
   This avoids translucent/backdrop-filter compositor bleed into the 54/58px gap. */
#sceneList {
  padding-top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}
#sceneList .scenes {
  margin-top: 54px !important;
  height: calc(100% - 54px) !important;
}
@media (max-width: 600px) {
  #sceneList .scenes {
    margin-top: 58px !important;
    height: calc(100% - 58px) !important;
  }
}

/* V5 PHONE GEOMETRY FIX
   V4 correctly moved the transparent reserved gap from parent padding to the
   visible .scenes surface. The established smartphone rule still applied its
   own 58px !important parent padding, so phones counted the same gap twice.
   Keep the V4 transparent solution, but remove only that duplicate phone
   padding. The existing body.mobile sizing rules remain authoritative, so the
   drawer continues to fit its actual rows and scroll only at the viewport cap. */
@media (max-width: 600px), (max-height: 600px) and (pointer: coarse) {
  #sceneList,
  body.mobile #sceneList {
    padding-top: 0 !important;
  }
  #sceneList .scenes,
  body.mobile #sceneList .scenes {
    margin-top: 58px !important;
  }
}

/* Original PRIVATI contact component. */
#agencyContact.privateContact #brandLogo.privateContactButton {
  min-width: 184px;
  height: 52px;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #fff;
  font: 600 16px/1.1 Arial, sans-serif;
  letter-spacing: .1px;
  white-space: nowrap;
}
#agencyContact.privateContact .privateContactText { display:block; }

/* Same inner-button material already used by the agency social popup. */
#agencyContact.privateContact .agencySocialLink {
  background: rgba(255,255,255,.08);
}

@media (max-width: 600px), (max-height: 600px) and (pointer: coarse) {
  #agencyContact.privateContact #brandLogo.privateContactButton {
    min-width: 154px;
    width: auto !important;
    height: 44px;
    padding: 0 12px !important;
    font-size: 14px;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  #agencyContact.privateContact #brandLogo.privateContactButton {
    min-width: 142px;
    height: 40px;
    padding: 0 10px !important;
    font-size: 13px;
  }
}