/* Applied only inside a native Telegram Mini App; the browser layout is unchanged. */
html.telegram-mini-app {
    --app-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
    --app-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
    --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
    --app-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
    --app-inset-top: calc(var(--app-safe-top) + var(--tg-content-safe-area-inset-top, 0px));
    --app-inset-bottom: calc(var(--app-safe-bottom) + var(--tg-content-safe-area-inset-bottom, 0px));
    scroll-padding-top: calc(16px + var(--app-inset-top));
    scroll-padding-bottom: calc(110px + var(--app-inset-bottom));
}

.telegram-mini-app body,
.telegram-mini-app #app,
.telegram-mini-app .home-shell,
.telegram-mini-app .maintenance-page,
.telegram-mini-app .app-loading-page {
    min-height: var(--app-viewport-height, 100vh);
}

.telegram-mini-app #app {
    padding-top: var(--app-inset-top);
    padding-right: calc(var(--app-safe-right) + var(--tg-content-safe-area-inset-right, 0px));
    padding-left: calc(var(--app-safe-left) + var(--tg-content-safe-area-inset-left, 0px));
}

.telegram-mini-app .app-toast-container {
    top: calc(112px + var(--app-inset-top));
    right: var(--app-safe-right);
}

@media (max-width: 940px) {
    .telegram-mini-app .app-toast-container {
        top: calc(92px + var(--app-inset-top));
    }
}

@media (max-width: 820px) {
    .telegram-mini-app .app-bottom-nav {
        padding-right: max(8px, var(--app-safe-right));
        padding-bottom: calc(6px + var(--app-inset-bottom));
        padding-left: max(8px, var(--app-safe-left));
    }

    .telegram-mini-app .profile-body,
    .telegram-mini-app .home-footer {
        padding-bottom: calc(98px + var(--app-inset-bottom));
    }
}