:root {
  --telegram-safe-top: 0px;
  --telegram-safe-right: 0px;
  --telegram-safe-bottom: 0px;
  --telegram-safe-left: 0px;
}

html, body {
  min-height: var(--tg-viewport-stable-height, 100vh);
}

.app-shell {
  min-height: var(--tg-viewport-stable-height, 100vh);
  padding-top: max(20px, calc(var(--telegram-safe-top) + 12px));
  padding-right: max(18px, calc(var(--telegram-safe-right) + 14px));
  padding-left: max(18px, calc(var(--telegram-safe-left) + 14px));
  padding-bottom: calc(108px + max(var(--safe-bottom), var(--telegram-safe-bottom)));
}

.bottom-nav {
  height: calc(69px + max(var(--safe-bottom), var(--telegram-safe-bottom)));
  padding-bottom: max(var(--safe-bottom), var(--telegram-safe-bottom));
}

.fab {
  bottom: calc(80px + max(var(--safe-bottom), var(--telegram-safe-bottom)));
}

.sheet {
  padding-bottom: calc(25px + max(var(--safe-bottom), var(--telegram-safe-bottom)));
}

.toast {
  bottom: calc(90px + max(var(--safe-bottom), var(--telegram-safe-bottom)));
}

.telegram-fullscreen .topbar {
  margin-top: 2px;
}

@media (max-width: 370px) {
  .app-shell {
    padding-right: max(14px, calc(var(--telegram-safe-right) + 10px));
    padding-left: max(14px, calc(var(--telegram-safe-left) + 10px));
  }
}