:root {
  --drawer-width: min(360px, calc(100vw - 56px));
  --ui-top: max(16px, env(safe-area-inset-top));
  --ui-edge: max(16px, env(safe-area-inset-right));
}
#app-shell { position:fixed; inset:0; overflow:hidden; background:#e9e5dc; }
#experience { position:absolute; inset:0; z-index:2; transition:transform .35s ease; overflow:hidden; }
.drawer-open #experience { transform:translateX(calc(-1 * var(--drawer-width))); box-shadow:12px 0 40px #0003; }
.topbar { position:absolute; top:var(--ui-top); left:max(16px, env(safe-area-inset-left)); right:var(--ui-edge); height:44px; display:flex; align-items:center; z-index:30; }
/* Reset the old mobile offsets explicitly: all three top controls share a row. */
.topbar .view-switch, body.walking .topbar .view-switch { position:absolute; left:50%; right:auto; top:0; bottom:auto; transform:translateX(-50%); height:44px; display:flex; align-items:center; }
.topbar .view-switch button { min-height:36px; height:36px; }
.help-controls, .bottom-bar .utilities { display:none!important; }
#menu-toggle { position:absolute; right:0; top:0; }
#main-tools { position:absolute; top:56px; right:0; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:auto; }
#menu-toggle, #main-tools .tool-button, #saved-toggle, #tour-info-toggle {
  width:44px; height:44px; min-width:44px; min-height:44px; padding:11px;
  border-radius:50%; border:1px solid #ffffff85; background:#f5f3edef; color:#292d29;
  box-shadow:0 3px 16px #00000012; display:grid; place-items:center;
}
#main-tools svg, #menu-toggle svg, .render-tools svg, .side-drawer .icon-button svg {
  width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round;
}
#main-tools .render-controls { position:relative; display:block; width:44px; height:44px; margin:0; }
/* The camera occupies its own fourth row, with no legacy bottom/right offset. */
#main-tools #render-view-btn { position:relative; inset:auto; margin:0; }
body.video-home #render-view-btn { display:grid!important; }
#render-view-btn[hidden] { visibility:hidden; }
.render-spinner { display:none; position:absolute; inset:3px; border:1.5px solid #373f3525; border-top-color:#373f35; border-radius:50%; animation:render-spin 1s linear infinite; }
.is-processing .render-spinner { display:block; }
.is-processing svg { opacity:.45; }
@keyframes render-spin { to { transform:rotate(360deg); } }
#saved-toggle { position:absolute; right:52px; top:0; font-size:14px; font-variant-numeric:tabular-nums; }
#saved-renders { position:absolute; right:52px; top:52px; width:min(220px, calc(100vw - 100px)); max-width:none; max-height:calc(100dvh - 190px); overflow:auto; display:flex; flex-direction:column; gap:10px; padding:12px; background:#f5f3ed; border-radius:16px; box-shadow:0 10px 35px #0003; }
#saved-renders .render-thumbnail { width:100%; height:110px; flex:none; border-radius:9px; overflow:hidden; padding:0; }
#saved-renders img { width:100%; height:100%; object-fit:cover; transform:scale(1.5); }
#render-status { position:absolute; left:auto; right:54px; top:0; bottom:auto; transform:none; width:max-content; max-width:calc(100vw - 98px); height:auto; min-height:44px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; background:#f5f3ed; color:#292d29; border:0; border-radius:15px; box-shadow:0 5px 24px #0002; font-size:12px; animation:notice-in .2s ease; }
#render-status button { min-height:30px; height:auto; padding:6px 10px; border-radius:20px; }
body.render-open #render-status { display:none!important; }
@keyframes notice-in { from { opacity:0; translate:8px 0; } to { opacity:1; translate:0 0; } }
/* Render actions stay accessible even when the main menu is collapsed. */
.topbar > .render-tools { position:absolute; top:56px; bottom:auto; left:50%; right:auto; transform:translateX(-50%); width:max-content; max-width:calc(100% - 112px); min-height:44px; display:none; align-items:center; gap:4px; padding:4px 6px 4px 14px; border-radius:18px; background:#f5f3edef; color:#292d29; box-shadow:0 5px 24px #0002; font-size:12px; white-space:normal; }
body.render-open .topbar > .render-tools { display:flex; }
.topbar > .render-tools span { max-width:160px; line-height:1.3; }
.topbar > .render-tools .render-icon { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:11px; border-radius:50%; background:none; color:inherit; text-decoration:none; }
/* Rooms and Settings share the same full-height reveal beneath the experience. */
#settings-drawer, #room-panel.side-drawer {
  position:absolute; inset:0 0 0 auto; width:var(--drawer-width); max-width:none; height:100%; max-height:none;
  box-sizing:border-box; padding:max(30px, env(safe-area-inset-top)) 26px max(30px, env(safe-area-inset-bottom));
  overflow:auto; overscroll-behavior:contain; background:#e9e5dc; color:#292d29; z-index:1;
  border:0; border-radius:0; box-shadow:none; backdrop-filter:none;
}
#settings-drawer h2, #room-panel.side-drawer h2 { font-size:25px; line-height:1.2; font-weight:400; margin:56px 0 32px; }
#settings-close, #room-panel.side-drawer .close-panel { position:absolute; right:20px; top:var(--ui-top); width:44px; height:44px; min-height:44px; background:#f5f3edef; }
#room-panel.side-drawer .panel-head { display:block; margin:0; }
#room-panel.side-drawer .panel-head .eyebrow { display:none; }
#room-panel.side-drawer .room-item { min-height:64px; padding:16px 0; gap:12px; font-size:14px; border-color:#292d2930; }
#room-panel.side-drawer .room-number { font-family:inherit; font-size:12px; }
#room-panel.side-drawer .room-group { margin:28px 0 10px; }
#settings-drawer details, #fullscreen-row { border-top:1px solid #292d2930; padding:20px 0; }
#settings-drawer summary { font-size:15px; cursor:pointer; min-height:24px; }
#settings-drawer p { font-size:13px; line-height:1.7; }
#settings-drawer label { display:block; font-size:13px; margin:20px 0 10px; }
#settings-drawer select { width:100%; min-height:44px; background:#f5f3ed; padding:10px; border:1px solid #292d2940; border-radius:8px; }
#settings-drawer .check-row { display:flex; gap:10px; align-items:center; }
.settings-row, #settings-return { border:0; background:none; color:inherit; text-align:left; width:100%; padding:8px 0; min-height:44px; font-size:15px; }
#settings-return { margin-top:25px; }
#drawer-return { position:absolute; inset:0 var(--drawer-width) 0 0; border:0; background:transparent; z-index:3; cursor:pointer; }
.bottom-bar { left:auto; right:var(--ui-edge); bottom:max(20px, env(safe-area-inset-bottom)); width:auto; transform:none; display:block; z-index:22; }
.tour-controls { position:static; transform:none; display:flex; gap:8px; }
.tour-controls button { height:44px; min-height:44px; }
.tour-controls .primary { padding:0 20px; }
#tour-info-toggle { position:absolute; left:max(16px, env(safe-area-inset-left)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:24; font-family:Georgia,serif; font-size:22px; font-style:italic; }
#tour-card { display:none!important; left:16px; right:auto; top:auto; bottom:76px; width:min(290px, calc(100vw - 100px)); max-height:40dvh; overflow:auto; transform:none; z-index:24; }
body.tour-info-open #tour-card:not([hidden]) { display:block!important; }
#joystick { left:auto; right:24px; bottom:86px; }
#walk-hint, #video-toggle, #video-explore, #explore-model { display:none!important; }
#scene-label { display:none; }
#tour-back { width:44px; min-width:44px; }
.panel { z-index:26; }
.credits { bottom:3px; font-size:8px; pointer-events:none; }
body.video-home #main-tools #orbit-btn, body.plans #main-tools #orbit-btn { display:grid; }
#plan-floor-switch { top:calc(var(--ui-top) + 56px); }
button:focus-visible, summary:focus-visible, a:focus-visible { outline:2px solid #66806a; outline-offset:3px; }
[hidden] { display:none!important; }
@media (max-width:600px) {
  :root { --ui-edge:max(12px, env(safe-area-inset-right)); }
  .topbar { left:max(12px, env(safe-area-inset-left)); }
  .topbar .wordmark > span:nth-child(2) { display:none; }
  .topbar .wordmark { display:flex; }
  .topbar .mark { width:36px; height:36px; font-size:23px; }
  .topbar .view-switch button { font-size:11px; padding:0 12px; }
  .topbar > .render-tools { font-size:11px; padding-left:10px; }
  .topbar > .render-tools span { min-width:0; max-width:100px; }
  #tour-info-toggle { left:max(12px, env(safe-area-inset-left)); }
}
@media (max-width:600px) {
  body.render-open.menu-open.has-saved-renders .topbar > .render-tools { left:calc(50% - 26px); max-width:calc(100% - 164px); flex-wrap:wrap; justify-content:center; padding:4px; }
  body.render-open.menu-open.has-saved-renders .topbar > .render-tools span { flex-basis:100%; max-width:none; text-align:center; padding:4px 6px 0; }
}
@media (max-width:360px) {
  .topbar .view-switch button { padding:0 9px; font-size:10px; }
  .topbar > .render-tools { max-width:calc(100% - 96px); gap:0; padding-left:8px; padding-right:4px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  #experience { transition:none; }
  .render-spinner { animation-duration:2s; }
  #render-status { animation:none; }
}