.walkthrough-panel { position:absolute; z-index:3; left:32px; top:133px; width:290px; padding:17px; border:1px solid #d3ddd6; border-radius:15px; background:#fafcf9f2; color:#30463b; box-shadow:0 8px 30px #2c463018; backdrop-filter:blur(12px); }
.walk-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.walk-heading h2 { margin:0; font-size:18px; font-weight:560; letter-spacing:-.4px; }
.walk-heading .eyebrow { font-size:9px; margin-bottom:5px; }
.walkthrough-panel button,.reference-panel button,.walk-movement button { border:1px solid #d5dfd6; background:#f7faf5; color:#395643; border-radius:8px; font:inherit; font-size:11px; padding:9px 10px; min-height:38px; }
.walkthrough-panel button:hover,.reference-panel button:hover,.walk-movement button:hover { background:#e3ece1; }
.floor-picker { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.floor-picker button { flex:1 1 calc(33.333% - 6px); min-width:0; min-height:44px; padding:9px 5px; font-size:10px; }
.floor-picker button[aria-pressed="true"] { color:white; background:#365841; border-color:#365841; }
#walk-status { font-size:11px; line-height:1.55; margin:11px 0 0; color:#5a6e62; }
#walk-return { max-width:116px; font-size:10px; line-height:1.4; min-height:44px; }
#walk-retry { margin-top:10px; }
#walk-tools { margin-top:8px; }
#walk-tools summary { cursor:pointer; font-size:11px; line-height:1.5; padding:8px 0; }
#walk-tools summary:focus-visible { outline:3px solid #27745e; outline-offset:3px; border-radius:4px; }
.walk-help { font-size:11px; line-height:1.7; margin:12px 0; color:#506356; }
.walk-hotspots { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px; }
.walk-hotspots button { font-size:10px; }
#walk-reference { width:100%; }
.walk-estimate { font-size:9px; line-height:1.6; color:#718074; margin:11px 0 0; }
.reference-panel { position:absolute; z-index:5; right:32px; top:110px; width:min(440px,calc(100% - 36px)); max-height:calc(100% - 145px); overflow:auto; padding:14px; border:1px solid #d3ddd6; border-radius:14px; background:#fafcf9fa; box-shadow:0 12px 50px #193b392b; }
.reference-heading { display:flex; align-items:center; justify-content:space-between; font-size:12px; gap:12px; }
.reference-panel select { width:100%; margin:10px 0; padding:9px; color:#30463b; background:white; border:1px solid #cdd9cd; border-radius:6px; }
.reference-panel img { display:block; width:100%; max-height:55svh; object-fit:contain; border-radius:6px; background:#e4e9e4; }
.reference-panel p { font-size:10px; color:#667b6b; line-height:1.5; }
.walk-movement { position:absolute; z-index:3; bottom:28px; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,48px); gap:6px; padding:9px; border:1px solid #d3ddd6; border-radius:15px; background:#fafcf9ef; }
.walk-movement button { font-size:22px; min-height:44px; touch-action:none; user-select:none; }
.walk-movement button:first-child { grid-column:2; }
.walk-movement button:nth-child(2) { grid-column:1; }
.walk-movement button.held { background:#365841; color:white; }
[hidden] { display:none !important; }
#viewport:not([data-mode="exterior"]):has(.walkthrough-panel) .camera-controls,#viewport:not([data-mode="exterior"]):has(.walkthrough-panel) .light-switch,#viewport:not([data-mode="exterior"]):has(.walkthrough-panel) .bottom,#viewport:not([data-mode="exterior"]):has(.walkthrough-panel) .notice { display:none; }
#viewport[data-mode="interior"] #canvas { cursor:grab; }
#viewport[data-mode="interior"] #canvas:active { cursor:grabbing; }
#viewport[data-mode="interior"] .subline { visibility:hidden; }
@media(min-width:641px) { .walkthrough-panel { max-height:calc(100% - 165px); overflow:auto; } }
@media(max-width:900px) { .walkthrough-panel { width:280px; } .reference-panel { right:18px; } }
@media(max-width:640px) {
  .walkthrough-panel { left:18px; right:18px; width:auto; top:112px; padding:12px; }
  .walk-heading h2 { font-size:16px; } .walk-heading .eyebrow { display:none; }
  .floor-picker { margin-top:10px; }.floor-picker button { min-height:44px; padding:7px; }
  #walk-status { margin-top:8px; font-size:10px; }.walk-help { font-size:10px; line-height:1.6; margin:8px 0; }
  .walk-help br { display:none; }.walk-hotspots { display:inline-flex; margin:0 5px 0 0; gap:4px; }
  .walk-hotspots button { min-height:44px; padding:6px; }#walk-reference { width:auto; min-height:44px; font-size:10px; padding:6px; }
  .walk-estimate { margin-top:7px; line-height:1.4; font-size:9px; }
  .walk-movement { bottom:18px; }.reference-panel { top:103px; max-height:calc(100% - 122px); }
  #viewport:not([data-mode="exterior"]):has(.walkthrough-panel) .topbar { display:none; }
  #viewport:not([data-mode="exterior"]) .walkthrough-panel { top:14px; padding:8px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; row-gap:4px; max-height:calc(100% - 162px); overflow:auto; }
  #viewport:not([data-mode="exterior"]) .walk-heading,#viewport:not([data-mode="exterior"]) .floor-picker { grid-column:1 / -1; }
  #viewport:not([data-mode="exterior"]) .floor-picker { margin-top:0; }
  #viewport:not([data-mode="exterior"]) #walk-status { grid-column:1; grid-row:3; margin:0; align-self:center; }
  #viewport:not([data-mode="exterior"]) #walk-tools { grid-column:2; grid-row:3; margin:0; }
  #viewport:not([data-mode="exterior"]) #walk-tools summary { font-size:10px; white-space:nowrap; }
  #viewport:not([data-mode="exterior"]) #walk-tools[open] { grid-column:1 / -1; grid-row:4; }
  #viewport:not([data-mode="exterior"]) #walk-retry { grid-column:1 / -1; }
  #viewport:not([data-mode="exterior"]) .reference-panel { top:14px; max-height:calc(100% - 32px); }
}
@media(max-height:620px) and (min-width:641px) { .walkthrough-panel { top:104px; padding:12px; }.walk-estimate { margin-top:5px; }.walk-help { margin:7px 0; }.walk-movement { left:auto; right:24px; bottom:20px; transform:none; } }

/* One compact entry point on phones; the native bottom-sheet dialog is only
   opened on demand. Desktop retains the existing always-visible panel. */
#floor-menu-toggle { display:none; }
#floor-menu-dialog { padding:0; border:0; background:transparent; color:#30463b; }
@media (max-width:640px), (max-width:900px) and (max-height:500px) {
  body #viewport { min-height:0; height:100svh; }
  #floor-menu-toggle:not([hidden]) { position:absolute; z-index:3; top:112px; left:18px; display:flex; align-items:center; gap:8px; min-height:44px; max-width:calc(100% - 36px); padding:10px 15px; border:1px solid #cad7cc; border-radius:24px; background:#fafcf9f2; color:#304c3b; box-shadow:0 4px 16px #1d3c2920; font-size:12px; font-weight:600; }
  #floor-menu-toggle svg { flex:none; }
  #floor-menu-dialog { position:fixed; inset:auto 12px max(12px,env(safe-area-inset-bottom)); margin:0 auto; width:min(480px,calc(100% - 24px)); max-width:none; max-height:calc(100svh - 24px - env(safe-area-inset-bottom)); max-height:min(72svh,calc(100svh - 24px - env(safe-area-inset-bottom))); overflow:auto; border:1px solid #d3ddd6; border-radius:20px; background:#fafcf9; box-shadow:0 16px 60px #18372344; overscroll-behavior:contain; }
  #floor-menu-dialog::backdrop { background:#18312538; }
  #viewport #floor-menu-dialog .walkthrough-panel { position:static; display:block; width:auto; max-height:none; overflow:visible; margin:0; padding:18px; border:0; border-radius:0; box-shadow:none; background:transparent; backdrop-filter:none; }
  #viewport #floor-menu-dialog .walk-heading { display:flex; align-items:center; gap:10px; }
  #floor-menu-dialog .walk-heading > div { flex:1; }
  #floor-menu-close { flex:none; min-width:44px; min-height:44px; padding:5px; font-size:24px; line-height:1; }
  #viewport #floor-menu-dialog .floor-picker { margin-top:14px; }
  #viewport #floor-menu-dialog #walk-status { margin-top:10px; }
  #viewport #floor-menu-dialog #walk-tools { margin-top:8px; }
  #viewport:not([data-mode="exterior"]) #floor-menu-toggle { top:14px; left:14px; }
  #viewport:not([data-mode="exterior"]) .topbar { display:none; }
  .night #floor-menu-toggle { background:#233027f2; border-color:#465546; color:#edf0df; }
}