.telegram-miniapp {
  --rg-safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --rg-safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --rg-safe-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
  --rg-safe-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
  /* Reserve only the area excluded from Telegram's stable visible viewport. */
  --rg-bottom-ui: max(0px, calc(100dvh - var(--tg-viewport-stable-height, 100dvh)));
  scroll-padding-top: calc(25px + var(--rg-safe-top));
  scroll-padding-bottom: calc(20px + var(--rg-safe-bottom) + var(--rg-bottom-ui));
}

.telegram-miniapp body {
  min-height: var(--tg-viewport-stable-height, 100dvh);
  padding-top: var(--rg-safe-top);
  padding-right: var(--rg-safe-right);
  padding-bottom: calc(var(--rg-safe-bottom) + var(--rg-bottom-ui));
  padding-left: var(--rg-safe-left);
}

.telegram-miniapp .product-dialog {
  top: var(--rg-safe-top);
  bottom: calc(var(--rg-safe-bottom) + var(--rg-bottom-ui));
  max-height: max(100px, calc(min(90dvh, var(--tg-viewport-stable-height, 100dvh)) - var(--rg-safe-top) - var(--rg-safe-bottom) - 32px));
  max-width: calc(100% - var(--rg-safe-left) - var(--rg-safe-right) - 32px);
}

.telegram-miniapp .skip-link:focus { top: calc(20px + var(--rg-safe-top)); }

@media (max-width: 800px) {
  .telegram-miniapp .navigation {
    top: calc(90px + var(--rg-safe-top));
    left: var(--rg-safe-left);
    right: var(--rg-safe-right);
    max-height: max(100px, calc(var(--tg-viewport-stable-height, 100dvh) - var(--rg-safe-top) - var(--rg-safe-bottom) - 110px));
    overflow-y: auto;
  }
}

@media (max-width: 580px) {
  .telegram-miniapp .navigation { top: calc(86px + var(--rg-safe-top)); }
}