/* Keep desktop windows inside the visible area between the menu bar and Dock. */
:root{--desktop-height:100dvh;--menu-bottom:38px;--window-top:46px;--window-bottom:132px}
.desktop-window{display:flex;flex-direction:column;max-height:calc(var(--desktop-height) - var(--window-top) - var(--window-bottom))}
.desktop-window .win-titlebar,.desktop-window .win-status{flex-shrink:0}
.desktop-window .win-content{min-height:0;max-height:none;flex:0 1 auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.desktop-window.maximized{top:var(--window-top)!important;height:calc(var(--desktop-height) - var(--window-top) - var(--window-bottom))}
.desktop-window.maximized .win-content{flex:1}
.photo-window .win-content>img{max-height:min(430px,calc(var(--desktop-height) - var(--window-top) - var(--window-bottom) - 100px))}
.photo-window.maximized .win-content>img{max-height:100%}
/* Lock the desktop canvas; window content keeps its own touch scrolling. */
html.desktop-active,body.desktop-active{overflow:hidden;overscroll-behavior:none}
body.desktop-active{position:fixed;inset:0;width:100%;height:100dvh}
.desktop-active #desktop{height:100dvh;min-height:0;overflow:hidden}
.desktop-active #desktop .topbar{flex-shrink:0}
.desktop-active .win-content{overflow-x:hidden;touch-action:pan-y pinch-zoom}
/* Popovers are children of the menu bar, so their placement follows it. */
#desktop .topbar .youtube-notification,#desktop .topbar .notification-center{position:absolute;top:calc(100% + 8px);right:8px;width:min(350px,calc(100vw - 16px));max-height:calc(var(--desktop-height) - var(--menu-bottom) - var(--window-bottom) - 8px);overflow-y:auto;overscroll-behavior:contain;border-radius:10px;text-shadow:none}
#desktop .topbar .notification-close,#desktop .topbar .notification-center-close{display:grid;place-items:center;flex:none;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:0;border-radius:5px;background:transparent;box-shadow:none;color:#316682;font-size:22px;line-height:1}
#desktop .topbar .notification-close:hover,#desktop .topbar .notification-center-close:hover{background:#ffffffa8}
#desktop .topbar .notification-icon span{padding:0}
@media(max-width:600px),(max-height:500px) and (pointer:coarse){
  #desktop{height:100dvh;min-height:100dvh}
  #desktop .topbar{padding-top:calc(6px + env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .folders{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;width:min(430px,calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none;gap:4px;height:104px;padding:0 10px 21px;bottom:max(7px,env(safe-area-inset-bottom))}
  .folders .folder{width:100%;height:60px;min-width:0;min-height:44px}
  .folders .folder>.app-icon{width:min(52px,100%);height:auto;aspect-ratio:1}
  .folders .folder>img.dock-reflection{left:50%;transform:translateX(-50%) scaleY(-1);width:min(52px,100%);height:26px;top:58px}
  .folders .folder>span{opacity:1;bottom:calc(100% + 2px);width:calc(100% + 4px);max-width:none;padding:3px 2px;font-size:11px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;text-align:center}
  #desktop .desktop-window:not(.maximized){width:min(360px,calc(100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(var(--desktop-height) - var(--window-top) - var(--window-bottom) - 24px)}
  .photo-window:not(.maximized) .win-content>img{max-height:min(406px,calc(var(--desktop-height) - var(--window-top) - var(--window-bottom) - 124px))}
  #desktop .desktop-window{border-top:0;border-radius:0 0 8px 8px;box-shadow:0 5px 18px #003d6650}
  #desktop .desktop-window .win-titlebar{cursor:default;touch-action:pan-y}
  .desktop-window.maximized{left:max(8px,env(safe-area-inset-left))!important;width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  .win-titlebar{min-height:48px;padding:8px 94px}
  .win-controls{left:12px;top:12px;gap:20px}
  .win-controls button{position:relative;width:24px;height:24px;font-size:18px}
  .win-controls button::after{content:"";position:absolute;inset:-10px}
  .win-status .next-photo,.model-toolbar .next-photo{min-height:44px;padding-inline:12px}
  .win-status{line-height:1.4;overflow-wrap:anywhere}
  .desktop-pet{z-index:20;bottom:calc(116px + env(safe-area-inset-bottom))}
  .youtube-notification,.notification-center{top:calc(56px + env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
  #desktop .topbar #exit,#desktop .topbar .language-switch,#desktop .topbar .notification-bell{min-height:44px;min-width:44px}
  #desktop .topbar{gap:4px}
  .notification-close,.notification-center-close{width:32px;height:32px}
  .notification-close::after,.notification-center-close::after{content:"";position:absolute;inset:-6px}
  .notification-center-close{position:relative}
}
@media(max-height:500px) and (pointer:coarse){
  .folders{height:84px}
  .folders .folder{height:46px}
  .folders .folder>.app-icon{width:min(42px,100%)}
  .folders .folder>img.dock-reflection{top:45px;height:20px}
  .folders .folder>span{font-size:10px}
  .desktop-label,.menu-clock #date{display:none}
}