/* Only installed apps opt in. Normal browser/desktop geometry is untouched. */
@media all {
  html[data-wave-standalone] { --wave-app-side: 24px; --wave-app-top: env(safe-area-inset-top, 0px); --wave-app-bottom: env(safe-area-inset-bottom, 0px); }
  html[data-wave-standalone] .gust-nav {
    height: calc(48px + var(--wave-app-top)) !important;
    min-height: calc(48px + var(--wave-app-top)) !important;
    padding-top: var(--wave-app-top) !important;
    padding-left: max(var(--wave-app-side), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--wave-app-side), env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }
  html[data-wave-standalone] .gust-nav #profile-menu { top: calc(44px + var(--wave-app-top)) !important; }
  html[data-wave-standalone] .content {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: var(--wave-app-bottom);
    box-sizing: border-box;
  }
  html[data-wave-standalone] body[data-page=chat] .content { padding-bottom: 0; }
  html[data-wave-standalone] body[data-page=chat] .ai-workspace {
    top: var(--ai-mobile-top, calc(48px + var(--wave-app-top))) !important;
    left: env(safe-area-inset-left, 0px) !important;
    right: env(safe-area-inset-right, 0px) !important;
    width: auto !important;
    height: var(--ai-mobile-height, calc(100dvh - 48px - var(--wave-app-top))) !important;
  }
  html[data-wave-standalone] #gust-navigation { margin-top: calc(60px + var(--wave-app-top)); }
  html[data-wave-standalone] #gust-toasts { top: calc(60px + var(--wave-app-top)); }
  html[data-wave-standalone] body:not(.media-playing)[data-page=watch] #watch-frame,
  html[data-wave-standalone] #gust-frame {
    inset: calc(48px + var(--wave-app-top)) env(safe-area-inset-right, 0px) var(--wave-app-bottom) env(safe-area-inset-left, 0px) !important;
    width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    height: calc(100dvh - 48px - var(--wave-app-top) - var(--wave-app-bottom)) !important;
  }
  html[data-wave-standalone] body[data-page=view] main,
  html[data-wave-standalone] body[data-page=view] #view-panel {
    height: calc(100dvh - 48px - var(--wave-app-top) - var(--wave-app-bottom)) !important;
  }
}

@media (max-width: 760px) { html[data-wave-standalone] { --wave-app-side: 12px; } }