#mobileUI,#mobileExit{display:none}
@media(max-width:960px){
 body.mobile-layout{height:100dvh;overflow:hidden;background:#fff}
 .mobile-layout header{height:60px;padding:12px 16px;flex-wrap:nowrap}
 .mobile-layout header span{display:none}
 .mobile-layout header h1{font-size:1rem}
 .mobile-layout header strong.brand{font-size:1.25rem}
 .mobile-layout .layout{position:fixed;inset:60px 0 0;padding:0;display:block;max-width:none}
 .mobile-layout .sidebar,.mobile-layout .foot,.mobile-layout .print-only{display:none}
 .mobile-layout .layout>div,.mobile-layout .workspace{height:100%;border:0;border-radius:0}
 .mobile-layout #stage{position:absolute;inset:0;height:100%;min-height:0;max-height:none}
 .mobile-layout .toolbar{position:absolute;top:8px;right:8px;left:8px;z-index:750;border:0;padding:0;background:transparent;justify-content:flex-end;flex-wrap:nowrap;gap:6px;pointer-events:none}
 .mobile-layout .toolbar>.tools:first-child{display:none}
 .mobile-layout .toolbar>.tools{gap:6px;flex-wrap:nowrap;pointer-events:auto}
 .mobile-layout .toolbar button,.mobile-layout .toolbar select{height:42px;box-shadow:0 2px 8px #17223226;border-color:#cdd4dd}
 .mobile-layout .toolbar select{max-width:112px;min-width:0}
 .mobile-layout #view{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-layout #full{display:none}
 .mobile-layout #mobileExit{display:flex;align-items:center;justify-content:center;width:42px;padding:10px;pointer-events:auto}
 #mobileExit svg{width:22px;height:22px}
 .mobile-layout #mobileUI{display:block}
 #mobileWelcome{position:fixed;inset:60px 0 0;z-index:780;background:#17223226;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
 #mobileStart{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:bold;padding:16px 22px;box-shadow:0 5px 20px #17223233}
 #mobileStart svg{width:24px;height:24px}
 #mobileWelcome>span{background:#fff;padding:6px 10px;border-radius:6px;font-size:.875rem}
 #mobileNav{display:none}
 .mobile-active header{display:none}
 .mobile-active .layout{inset:0}
 .mobile-active #stage{bottom:calc(70px + env(safe-area-inset-bottom));height:auto}
 .mobile-active #mobileWelcome{display:none}
 .mobile-active #mobileNav{position:fixed;bottom:0;left:0;right:0;z-index:900;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:white;border-top:1px solid var(--line);padding:0 4px env(safe-area-inset-bottom);height:calc(70px + env(safe-area-inset-bottom))}
 #mobileNav button{border:0;border-radius:0;background:white;color:#617185;padding:8px 2px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;font-size:.875rem;position:relative}
 #mobileNav svg{width:23px;height:23px}
 #mobileNav button.active{color:var(--red);background:#fff5f5}
 #mobileNav button.active:before{content:'';height:3px;background:var(--red);position:absolute;top:0;left:18%;right:18%;border-radius:0 0 3px 3px}
 #mobileSheet{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom));left:0;right:0;z-index:850;background:white;border-radius:18px 18px 0 0;box-shadow:0 -5px 24px #17223230;max-height:52dvh;display:flex;flex-direction:column}
 #mobileSheet[hidden],#mobileDrawActions[hidden],#mobileEditButton[hidden],#mobileNew[hidden]{display:none}
 #mobileSheet.expanded{max-height:calc(100dvh - 132px - env(safe-area-inset-bottom))}
 .sheet-head{display:flex;align-items:center;gap:6px;padding:12px 12px 8px;flex-shrink:0;border-bottom:1px solid var(--line)}
 .sheet-head h2{font-size:1.125rem;flex:1;margin:0;min-width:0}
 .sheet-head button{min-width:40px;min-height:40px;padding:8px;display:flex;align-items:center;justify-content:center}
 .sheet-head svg{width:20px;height:20px}
 .expanded #mobileExpand svg{transform:rotate(180deg)}
 .sheet-scroll{overflow:auto;overscroll-behavior:contain;padding:12px;min-height:0}
 #mobileSheet .panel{border:0;border-radius:0;padding:0;margin:0 0 12px}
 #mobileSheet .step{display:none}
 #mobileContent-place>.panel>h2,#mobileCameraCreate>h2,#mobileContent-draw .object-tools{border:0;margin:0;padding:0}
 #mobileContent-place>.panel>h2,#mobileCameraCreate>h2{display:none}
 #mobileSheet .types{grid-template-columns:1fr 1fr;gap:6px}
 #mobileSheet .types button{min-height:46px;padding:8px;display:flex;align-items:center;gap:7px}
 #mobileSheet .types button[data-type="PTZ"]{grid-column:1/-1}
 #mobileSheet .type-copy,#mobileSheet .types b{font-size:.875rem}
 #mobileSheet .object-tools .tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #mobileSheet button,#mobileSheet select,#mobileSheet input[type=text],#mobileSheet input[type=number]{min-height:44px}
 #mobileSheet input[type=text],#mobileSheet input[type=number],#mobileSheet select{font-size:1rem}
 #mobileSheet label{margin:8px 0 4px}
 #mobileSheet .camera-note{margin:8px 0}
 #mobileSheet .camera-list{max-height:none}
 #mobileSheet:not(.editing) #edit{display:none!important}
 #mobileSheet.editing #mobileCameraCreate{display:none}
 #mobileSheet .stats{margin:10px 0;gap:6px}
 #mobileSheet .stat{padding:10px 6px}
 #mobileSheet .stat b{font-size:1.25rem}
 #mobileSheet .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #mobileSheet .offers-section{margin-top:18px!important}
 #mobileDrawActions{position:fixed;left:8px;right:8px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:800;display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:#ffffffed;border:1px solid var(--line);border-radius:9px;box-shadow:0 2px 10px #17223226}
 #mobileHint{width:100%;font-size:.875rem;line-height:1.3}
 #mobileDrawActions button{min-height:42px}
 #mobileEditButton{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));left:12px;z-index:800;min-height:44px;box-shadow:0 2px 10px #17223226}
 .mobile-layout .rotate-controls{bottom:12px;right:8px;max-width:calc(100% - 16px);padding:6px;gap:4px}
 .mobile-layout .map .badge{bottom:26px;left:auto;right:8px;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mobile-layout:not(.mobile-active) .toolbar{display:none}
 .mobile-layout:not(.mobile-active) #mobileSheet,.mobile-layout:not(.mobile-active) #mobileDrawActions,.mobile-layout:not(.mobile-active) #mobileEditButton{display:none}
}
@media print{
 #mobileUI,#mobileExit{display:none!important}
 body.mobile-layout{height:auto;overflow:visible}
 .mobile-layout .layout{position:static;display:block;padding:0}
 .mobile-layout .layout>div,.mobile-layout .workspace{height:auto}
 .mobile-layout #stage{position:relative;inset:auto;height:150mm;min-height:0;max-height:none}
 .mobile-layout .toolbar{display:none}
 .mobile-layout .foot{display:block}
}

body.embedded>header{display:none}
body.embedded.mobile-layout .layout{inset:0}
body.embedded:not(.mobile-layout) .layout{padding:8px;gap:10px;grid-template-columns:300px minmax(0,1fr)}
body.embedded:not(.mobile-layout) #stage{height:clamp(360px,calc(var(--host-height,var(--planner-height,800px)) * .65),680px);min-height:0;max-height:none}
body.embedded.embed-expanded:not(.mobile-layout) #stage{height:calc(var(--host-height,var(--planner-height,800px)) - 150px)}

.embedded.mobile-layout #full{display:flex;align-items:center;justify-content:center;width:42px;padding:10px}
.embedded.mobile-layout #mobileExit{display:none}

/* An iframe must use its own viewport height, including when the host resizes it. */
@media(max-width:960px){
 body.embedded.mobile-layout{height:var(--planner-height,100%);}
 body.embedded.mobile-layout .layout{bottom:auto;height:var(--planner-height,100%);}
 body.embedded.mobile-layout #mobileSheet{max-height:calc(var(--planner-height,100vh) * .52);}
 body.embedded.mobile-layout #mobileSheet.expanded{max-height:calc(var(--planner-height,100vh) - 132px - env(safe-area-inset-bottom));}
}
