/* Online-only Home Screen app. No viewport/zoom locks, offline cache or JS redirects. */
:root{--app-safe-top:env(safe-area-inset-top,0px);--app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px);--app-safe-right:env(safe-area-inset-right,0px);--app-safe-inline:max(var(--app-safe-left),var(--app-safe-right))}
body.web-app-page{min-height:100vh;min-height:100svh}
.web-app-page.auth-page{padding-top:calc(24px + var(--app-safe-top));padding-bottom:calc(24px + var(--app-safe-bottom));padding-left:calc(24px + var(--app-safe-left));padding-right:calc(24px + var(--app-safe-right))}
.web-app-page .sidebar{top:var(--app-safe-top);left:var(--app-safe-left);height:calc(100vh - var(--app-safe-top) - var(--app-safe-bottom));height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom))}
.web-app-page .workspace{margin-left:calc(244px + var(--app-safe-left));padding-top:var(--app-safe-top);padding-right:var(--app-safe-right);padding-bottom:var(--app-safe-bottom)}
.web-app-page .modal{inset:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);width:calc(100% - 36px - var(--app-safe-left) - var(--app-safe-right));max-height:calc(100vh - 36px - var(--app-safe-top) - var(--app-safe-bottom));max-height:calc(100dvh - 36px - var(--app-safe-top) - var(--app-safe-bottom));overflow:auto}
.web-app-page .toast{bottom:calc(25px + var(--app-safe-bottom));max-width:calc(100vw - 28px - 2 * var(--app-safe-inline))}
@media(max-width:680px){
  .web-app-page .sidebar{position:relative;top:auto;left:auto;height:auto;padding-top:calc(14px + var(--app-safe-top));padding-left:calc(14px + var(--app-safe-left));padding-right:calc(14px + var(--app-safe-right))}
  .web-app-page .workspace{margin-left:0;padding-top:0;padding-left:var(--app-safe-left);padding-right:var(--app-safe-right)}
}