/* v11.12 — Mobile immersive viewer: controls overlay the canvas. Desktop unchanged. */
@media (pointer:coarse) and (max-width: 1000px) {
  #lightbox.mobileImmersive {height:100dvh;max-height:100dvh;overflow:hidden;isolation:isolate;background:#050505}
  #lightbox.mobileImmersive .viewerStage.sphereStage{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;display:block;z-index:0}
  #lightbox.mobileImmersive .sphereWrap{width:100%;height:100%;min-height:0}
  #lightbox.mobileImmersive .lightboxTop{position:absolute;left:0;right:0;top:0;z-index:15;height:auto;min-height:58px;padding:calc(8px + env(safe-area-inset-top,0px)) max(11px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px));display:flex;align-items:flex-start;gap:8px;pointer-events:none;background:linear-gradient(#000b,#0000)}
  #lightbox.mobileImmersive .lightboxInfo{flex:1;min-width:0;gap:0;padding:7px 0;pointer-events:none}
  #lightbox.mobileImmersive .lightboxInfo strong{font-size:clamp(13px,3.6vw,16px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000}
  #lightbox.mobileImmersive .lightboxInfo span{display:none}
  #lightbox.mobileImmersive .lightboxActions{display:flex;align-items:flex-start;gap:7px;pointer-events:auto;flex:none}
  #lightbox.mobileImmersive .lightboxActions .viewerIcon{width:44px;height:44px;min-height:44px;min-width:44px;padding:0;background:#0008;border:1px solid #fffa;backdrop-filter:blur(7px);color:#fff}
  #lightbox.mobileImmersive .lightboxActions .viewerIcon svg{width:23px;height:23px}
  #lightbox.mobileImmersive .lightboxActions > :not(#closeViewer):not(#mobile360More){display:none!important}
  #lightbox.mobileImmersive #mobile360More{display:grid;place-items:center;font-size:24px;font-weight:700;line-height:1}
  #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen{position:relative}
  #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen > :not(#closeViewer):not(#mobile360More):not([hidden]){display:grid!important;position:absolute;right:0;width:46px;height:46px}
  #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #editDateBtn{top:54px}
  #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #editMediaBtn{top:108px}
  #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #downloadLink{top:162px}
  #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #deleteViewer{top:216px;font-size:11px}
  #lightbox.mobileImmersive .viewerArrow{z-index:9;top:50%;width:45px;height:54px;line-height:44px;border-radius:12px;font-size:42px;background:#0005}
  #lightbox.mobileImmersive .viewerArrow.prev{left:max(4px,env(safe-area-inset-left,0px))}
  #lightbox.mobileImmersive .viewerArrow.next{right:max(4px,env(safe-area-inset-right,0px))}
  #lightbox.mobileImmersive .lightboxBottom{position:absolute;bottom:0;left:0;right:0;z-index:8;height:auto;min-height:35px;padding:4px 12px calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(#0000,#0008);pointer-events:none}
  #lightbox.mobileImmersive .lightboxBottom #viewerIndex{font-size:10px;color:#fffc}
  #lightbox.mobileImmersive .sphereHint{display:none}
  #lightbox.mobileImmersive .sphereActions{bottom:auto;top:calc(65px + env(safe-area-inset-top,0px));right:12px;background:transparent;border:0;box-shadow:none}
  #lightbox.mobileImmersive .sphereActions button:not(.sphereFullscreenButton){display:none!important}
  #lightbox.mobileImmersive .sphereActions .sphereFullscreenButton{font-size:0;min-width:44px;width:44px;height:44px;border:1px solid #fffa;border-radius:50%;padding:0;background:#0008;backdrop-filter:blur(7px)}
  #lightbox.mobileImmersive .sphereActions .sphereFullscreenButton::before{content:'⛶';font-size:26px}
  #lightbox.mobileImmersive .sphereVideoControls{bottom:calc(33px + env(safe-area-inset-bottom,0px));left:50%;max-width:calc(100% - 28px);width:calc(100% - 28px);height:42px;padding:4px 7px}
  #lightbox.mobileImmersive .sphereWrap:has(.sphereVideoControls) .sphereActions{bottom:auto}
  #lightbox.mobileImmersive .editorMediaInfo{display:none!important}
  #lightbox.mobileImmersive .viewerZoomControls{display:none!important}
}
@media (pointer:coarse) and (max-width:1000px) and (orientation:landscape){
 #lightbox.mobileImmersive .lightboxTop{padding-top:max(5px,env(safe-area-inset-top,0px));padding-bottom:5px}
 #lightbox.mobileImmersive .lightboxInfo{padding:5px 0}
 #lightbox.mobileImmersive .sphereActions{top:calc(55px + env(safe-area-inset-top,0px))}
 #lightbox.mobileImmersive .sphereVideoControls{bottom:calc(9px + env(safe-area-inset-bottom,0px));height:35px}
 #lightbox.mobileImmersive .lightboxBottom{width:100px;background:transparent;bottom:calc(7px + env(safe-area-inset-bottom,0px))}
}
/* v11.12a: keep the viewer above the gallery in both orientations. */
@media (pointer:coarse) and (max-width: 1000px) {
 html:has(#lightbox.mobileImmersive),body:has(#lightbox.mobileImmersive){overflow:hidden!important;overscroll-behavior:none!important}
 body #lightbox.mobileImmersive{position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;z-index:2147483000!important;display:block!important;overflow:hidden!important;background:#050505!important}
 body #lightbox.mobileImmersive #viewerStage.viewerStage.sphereStage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;margin:0!important;overflow:hidden!important}
 body #lightbox.mobileImmersive .sphereWrap{position:relative!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;overflow:hidden!important}
 body #lightbox.mobileImmersive .lightboxBottom>span:last-child{display:none!important}
}
/* v11.12b: bound mobile panorama/video canvas and admin controls to viewport. */
@media (pointer:coarse) and (max-width:1000px){
 html,body{max-width:100%;overflow-x:clip}
 body #lightbox.mobileImmersive{box-sizing:border-box!important;width:100%!important;max-width:100%!important;overflow:hidden!important}
 body #lightbox.mobileImmersive .viewerStage,body #lightbox.mobileImmersive .sphereWrap{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
 body #lightbox.mobileImmersive .sphereWrap canvas,body #lightbox.mobileImmersive .sphereWrap video{max-width:100%!important}
 body #lightbox.mobileImmersive .lightboxTop{box-sizing:border-box;max-width:100%;width:100%;min-width:0}
 body #lightbox.mobileImmersive .lightboxActions{min-width:0;max-width:calc(100% - 52px);flex-wrap:nowrap}
 body #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen{z-index:30}
 body #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen > :not(#closeViewer):not(#mobile360More):not([hidden]){right:0!important;max-width:46px;box-sizing:border-box}
 body #lightbox.mobileImmersive .sphereVideoControls{box-sizing:border-box!important;left:12px!important;right:12px!important;transform:none!important;width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;min-width:0!important;overflow:hidden!important;opacity:1;transition:opacity .5s ease}
 body #lightbox.mobileImmersive .sphereVideoControls.isDimmed{opacity:.22}
 body #lightbox.mobileImmersive .sphereVideoControls:active,body #lightbox.mobileImmersive .sphereVideoControls:focus-within{opacity:1}
 body #lightbox.mobileImmersive .sphereVideoControls>*{min-width:0}
 body #lightbox.mobileImmersive .lightboxBottom{max-width:100%;box-sizing:border-box;pointer-events:none}
 /* The administrator toolbar must scroll within the screen, never expand the page. */
 header,header>*{max-width:100%;box-sizing:border-box}
}

/* v11.12c: hide empty more menu for public visitors. */
@media (pointer:coarse) and (max-width:1000px){#lightbox.mobileImmersive #mobile360More[hidden]{display:none!important}}

/* v11.13 desktop/tablet: same immersive overlay as mobile, without changing the gallery grid. */
@media (pointer:fine), (min-width:1001px){
 html:has(#lightbox.mobileImmersive),body:has(#lightbox.mobileImmersive){overflow:hidden!important}
 body #lightbox.mobileImmersive{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;z-index:2147483000!important;display:block!important;overflow:hidden!important;background:#050505!important;isolation:isolate}
 #lightbox.mobileImmersive #viewerStage.viewerStage.sphereStage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;overflow:hidden!important;padding:0!important;margin:0!important}
 #lightbox.mobileImmersive .sphereWrap{position:relative!important;width:100%!important;height:100%!important;max-width:100%!important;overflow:hidden!important}
 #lightbox.mobileImmersive .lightboxTop{position:absolute!important;top:0;left:0;right:0;z-index:15;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 22px;pointer-events:none;background:linear-gradient(#000b,#0000)}
 #lightbox.mobileImmersive .lightboxInfo{flex:1;min-width:0;pointer-events:none}
 #lightbox.mobileImmersive .lightboxInfo strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 5px #000}
 #lightbox.mobileImmersive .lightboxInfo span{display:none}
 #lightbox.mobileImmersive .lightboxActions{display:flex;flex:none;align-items:flex-start;gap:9px;pointer-events:auto}
 #lightbox.mobileImmersive .lightboxActions .viewerIcon{min-width:44px;width:44px;height:44px;padding:0;background:#0009;border:1px solid #ffffff77;color:white}
 #lightbox.mobileImmersive .lightboxActions>:not(#closeViewer):not(#mobile360More){display:none!important}
 #lightbox.mobileImmersive #mobile360More{display:grid;place-items:center;font-size:24px}
 #lightbox.mobileImmersive #mobile360More[hidden]{display:none!important}
 #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen{position:relative;z-index:30}
 #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen>:not(#closeViewer):not(#mobile360More):not([hidden]){display:grid!important;position:absolute;right:0;width:44px;height:44px}
 #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #editDateBtn{top:54px}
 #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #editMediaBtn{top:108px}
 #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #downloadLink{top:162px}
 #lightbox.mobileImmersive .lightboxActions.mobileMoreOpen #deleteViewer{top:216px;font-size:11px}
 #lightbox.mobileImmersive .viewerArrow{z-index:9}
 #lightbox.mobileImmersive .lightboxBottom{position:absolute;bottom:0;left:0;right:0;z-index:8;pointer-events:none;background:transparent;padding:10px 18px}
 #lightbox.mobileImmersive .lightboxBottom>span:last-child{display:none}
 #lightbox.mobileImmersive .sphereHint{display:none}
 #lightbox.mobileImmersive .sphereActions{position:absolute;top:76px;right:20px;bottom:auto;background:transparent;border:0}
 #lightbox.mobileImmersive .sphereActions button:not(.sphereFullscreenButton){display:none!important}
 #lightbox.mobileImmersive .sphereVideoControls{box-sizing:border-box!important;position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 40px));max-width:calc(100% - 40px);opacity:1;transition:opacity .5s ease;z-index:12}
 #lightbox.mobileImmersive .sphereVideoControls.isDimmed{opacity:.22}
 #lightbox.mobileImmersive .sphereVideoControls:hover,#lightbox.mobileImmersive .sphereVideoControls:focus-within{opacity:1}
 #lightbox.mobileImmersive .editorMediaInfo,#lightbox.mobileImmersive .viewerZoomControls{display:none!important}
}

/* v11.13a: tablet synthetic hover must not override idle dimming. */
@media (hover:none), (pointer:coarse){
 #lightbox.mobileImmersive .sphereVideoControls.isDimmed,
 #lightbox.mobileImmersive .sphereVideoControls.isDimmed:hover{opacity:.22!important}
 #lightbox.mobileImmersive .sphereVideoControls.isDimmed:active,
 #lightbox.mobileImmersive .sphereVideoControls.isDimmed:focus-within{opacity:1!important}
}

/* v11.13b: idle inline opacity wins over synthetic hover and focus on tablets. */
#lightbox.mobileImmersive .sphereVideoControls{transition:opacity .45s ease!important}

/* v11.13c: editing dialogs must appear above immersive viewer. */
.galleryEditModal:not([hidden]) {
  position:fixed!important;
  z-index:2147483640!important;
}
.galleryEditModal:not([hidden]) .galleryEditPanel {
  position:relative;
  z-index:1;
  max-height:calc(100dvh - 28px);
  overflow-y:auto;
}

/* v11.13d: date dialog above the immersive viewer, including native date input. */
body #galleryDateModal:not([hidden]){
 display:flex!important;
 position:fixed!important;
 inset:0!important;
 z-index:2147483646!important;
 isolation:isolate;
}
body #galleryDateModal:not([hidden]) .galleryDatePanel{
 position:relative!important;
 z-index:1!important;
 max-height:calc(100dvh - 24px);
 overflow-y:auto;
}
body:has(#galleryDateModal:not([hidden])) #lightbox.mobileImmersive{
 z-index:2147483000!important;
}