/* Telegram updates these SDK variables when its viewport or safe areas change.
   Outside Telegram this stylesheet leaves the existing website untouched. */
.telegram-mini-app {
  --app-safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  --app-safe-left: max(env(safe-area-inset-left, 0px), calc(var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px)));
  --app-safe-right: max(env(safe-area-inset-right, 0px), calc(var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px)));
  scroll-padding-top: calc(28px + var(--app-safe-top));
}
.telegram-mini-app body {
  padding-top: var(--app-safe-top);
  padding-left: var(--app-safe-left);
  padding-right: var(--app-safe-right);
}
.telegram-mini-app :is(.workspace, .lesson-page, .onboarding-page) {
  min-height: calc(var(--tg-viewport-stable-height, 100svh) - var(--app-safe-top));
}
.telegram-mini-app .sidebar {
  top: var(--app-safe-top);
  bottom: var(--app-safe-bottom);
  left: var(--app-safe-left);
}
.telegram-mini-app .onboarding-page { padding-bottom: max(24px, var(--app-safe-bottom)); }
.telegram-mini-app .lesson-footer { padding-bottom: max(25px, var(--app-safe-bottom)); }
.telegram-mini-app .skip-link:focus { top: calc(16px + var(--app-safe-top)); }

@media (max-width: 980px) {
  .telegram-mini-app .mobile-nav.gooey-nav {
    padding-left: calc(16px + var(--app-safe-left));
    padding-right: calc(16px + var(--app-safe-right));
    padding-bottom: max(12px, var(--app-safe-bottom));
  }
  .telegram-mini-app .workspace { padding-bottom: calc(108px + var(--app-safe-bottom)); }
  .telegram-mini-app .toast { bottom: calc(105px + var(--app-safe-bottom)); }
  .telegram-mini-app :is(.is-lesson, .is-onboarding) .toast { bottom: max(24px, var(--app-safe-bottom)); }
}