/* Final layout rules share safe-area offsets and reserve space for each control. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
dialog{max-height:calc(100dvh - 40px);overflow:auto}
#designClose,.panel-heading button{min-width:44px;min-height:44px}
.design-grid button span{min-width:0;overflow-wrap:anywhere}
body:has(#roomPanel.open) .scene-caption{visibility:hidden}
body.inside:has(#restAction:not([hidden])) .scene-caption{visibility:hidden}
@media(min-width:651px){
 .intro{top:max(220px,25vh)}
 .right-tools{top:190px;bottom:auto}
 body.inside .right-tools{top:205px;bottom:auto}
 .plan{bottom:120px}
 #designLibrary{bottom:118px}
 body.inside .scene-caption{bottom:122px;max-width:calc(100vw - 330px)}
}
@media(min-width:651px) and (max-height:760px){
 .intro{top:215px}.intro h1{font-size:36px;margin:12px 0}.intro p{font-size:11px;line-height:1.6}
 .specs{margin:18px 0;gap:18px}.specs strong{font-size:19px}.specs small{font-size:6px}
 .intro .primary{padding:12px 16px}.drawing-note{margin-top:10px}
 .scene-caption{bottom:118px}.plan{bottom:116px;width:130px}.plan svg{height:68px}
}
@media(max-width:650px){
 header{padding-top:calc(18px + var(--safe-top));height:calc(78px + var(--safe-top))}
 #designToggle,#renderQuality{top:calc(82px + var(--safe-top));min-height:40px;padding:9px 8px;font-size:10px;white-space:nowrap}
 #designToggle{left:12px;width:calc(55% - 16px)}#renderQuality{left:auto;right:12px;width:calc(45% - 16px)}
 .intro{top:calc(139px + var(--safe-top));left:20px;width:calc(100% - 40px)}
 .intro h1{font-size:29px;margin:6px 0 9px}.intro .primary{min-height:40px}
 #scene{top:calc(245px + var(--safe-top));bottom:calc(85px + var(--safe-bottom))}
 footer{height:calc(85px + var(--safe-bottom));padding-bottom:calc(13px + var(--safe-bottom));z-index:6}
 nav button,body.inside nav button{min-height:44px;padding:9px 8px;font-size:8px}
 .light-switch{min-width:44px;min-height:44px;justify-content:center}.light-switch .switch{display:none}
 .right-tools{bottom:calc(245px + var(--safe-bottom));right:12px;gap:6px}
 .right-tools button{width:40px!important;height:40px!important}
 .right-tools #zoomIn,.right-tools #zoomOut{display:none}
 .plan{bottom:calc(100px + var(--safe-bottom))}
 .scene-caption{bottom:calc(105px + var(--safe-bottom));left:20px;max-width:calc(100% - 125px)}
 body.inside .plan,body.inside:has(#restAction:not([hidden])) .plan{top:calc(139px + var(--safe-top));bottom:auto}
 body.inside .right-tools{top:auto;bottom:calc(150px + var(--safe-bottom))}
 body.inside .scene-caption,body.inside:has(#restAction:not([hidden])) .scene-caption{bottom:calc(246px + var(--safe-bottom));max-width:calc(100% - 90px)}
 .room-panel{bottom:calc(94px + var(--safe-bottom));max-height:calc(100dvh - 180px - var(--safe-top) - var(--safe-bottom))}
 #designLibrary{top:calc(76px + var(--safe-top));bottom:calc(94px + var(--safe-bottom));width:calc(100% - 24px);max-width:410px}
 .design-open footer{pointer-events:none;opacity:.5}
 #toast{top:calc(128px + var(--safe-top))}
}
@media(min-width:651px) and (max-width:850px),(min-width:651px) and (pointer:coarse){body.inside .scene-caption{left:152px;max-width:calc(100vw - 360px)}}
@media(min-width:651px) and (max-height:650px){
 .intro{top:215px}.intro h1{font-size:34px}.intro .specs,.intro .drawing-note{display:none}
 .right-tools,body.inside .right-tools{flex-direction:row;top:115px;right:28px;bottom:auto}.right-tools button:nth-child(3){margin-top:0}
}
@media(max-width:650px) and (max-height:650px) and (orientation:portrait){body:not(.inside) .plan{display:none}body:not(.inside) .right-tools{bottom:calc(110px + var(--safe-bottom))}}
@media(max-height:500px) and (max-width:950px){
 header,body.inside header{height:60px;padding:10px 16px}.wordmark{font-size:24px}.header-center{display:none}
 #designToggle,#renderQuality{top:calc(64px + var(--safe-top));width:auto;min-height:38px;padding:8px 12px;font-size:10px}
 #designToggle{left:16px}#renderQuality{left:200px;right:auto}
 .intro{top:112px;left:20px;width:280px}.intro .eyebrow,.intro p,.specs,.drawing-note{display:none}.intro h1{font-size:27px;margin:0 0 8px}.intro .primary{padding:9px 12px;min-height:38px}
 #scene{top:185px;bottom:calc(64px + var(--safe-bottom))}body.inside #scene{inset:0}
 footer,body.inside footer{height:calc(64px + var(--safe-bottom));padding:8px 16px calc(8px + var(--safe-bottom))}
 .plan,body.inside .plan,body.inside:has(#restAction:not([hidden])) .plan{display:none}
 .right-tools,body.inside .right-tools{top:115px;bottom:auto;right:14px;gap:6px}
 .right-tools #zoomIn,.right-tools #zoomOut{display:none}.right-tools button{width:40px!important;height:40px!important;margin:0!important}
 .scene-caption,body.inside .scene-caption,body.inside:has(#restAction:not([hidden])) .scene-caption{top:auto;left:125px;bottom:calc(80px + var(--safe-bottom));max-width:calc(100vw - 330px)}
 .move-stick{bottom:calc(88px + var(--safe-bottom))}
 #designLibrary{top:calc(60px + var(--safe-top));bottom:calc(74px + var(--safe-bottom));padding:14px 18px;width:min(410px,calc(100% - 24px))}.design-heading{top:-14px}
 .room-panel{bottom:calc(74px + var(--safe-bottom));max-height:calc(100dvh - 90px - var(--safe-bottom))}
 #restAction{bottom:calc(78px + var(--safe-bottom));right:68px}
}