@media (display-mode: standalone) {
  html,
  body {
    min-height: 100dvh;
  }

  .app-shell {
    min-height: calc(100dvh - 86px);
  }

  .lesson-sidebar {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

@media (display-mode: standalone) and (max-width: 1050px) {
  html:not(.is-ipad) .site-header {
    height: calc(86px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  html:not(.is-ipad) .app-shell {
    min-height: calc(100dvh - 86px - env(safe-area-inset-top));
  }

  html:not(.is-ipad) .header-actions {
    right: max(12px, env(safe-area-inset-right));
  }
}