/* Отступы под системные зоны нативной оболочки: ?app=...&platform=ios|android|windows.
   Класс native-app вешает PHP в templates/app.php. Внутри Telegram эти зоны
   закрывают --tg-*-safe-area-inset-*, в обычном WebView их никто не отдаёт.
   Windows: --native-inset-top 52px, iOS/Android — 90px.

   macOS не в native-app: тот путь ломает широкое окно (запрет .web-desktop + 90px).
   Для ?platform=macos только лёгкий inset 52px поверх обычной веб-раскладки.

   Селекторы намеренно избыточны по специфичности: layout.css и bottom-menu.css
   обнуляют те же отступы для веб-режима (.has-web-top-bar, .ios-mobile-web),
   и эти правила надо перебить. .web-desktop исключён — там своя раскладка. */

body.native-app {
    --native-inset-top: 5.625rem;
    --native-inset-bottom: 0.9375rem;
}

body.native-app--windows {
    --native-inset-top: 3.25rem;
}

body.native-app.has-web-top-bar {
    --app-top-bar-inset: calc(0.9375rem + 2.875rem + 0.5rem + var(--native-inset-top));
}

body.native-app--windows {
    --native-inset-top: 52px;
}

/* До авторизации панели ещё нет, а статус-бар уже есть: шторкам нужна его
   граница, иначе они открываются под системную зону. */
body.native-app:not(.has-web-top-bar) {
    --app-top-bar-inset: var(--native-inset-top);
}

body.native-app .web-top-bar {
    top: calc(0.9375rem + var(--native-inset-top));
}

body.native-app .mainpage-wallet-fab,
body.native-app .mainpage-profile-fab {
    top: calc(0.375rem + var(--native-inset-top));
}

body.native-app .mainpage-wallet-fab,
body.native-app .mainpage-profile-fab {
    top: calc(6px + var(--native-inset-top));
}

body.native-app .main-container {
    padding-top: calc(0.9375rem + var(--native-inset-top));
    padding-bottom: calc(0.9375rem + var(--native-inset-bottom));
}

html body.native-app.has-web-top-bar:not(.web-desktop) .main-container,
html body.native-app.has-web-top-bar.ios-mobile-web:not(.web-desktop) .main-container {
    padding-top: var(--app-top-bar-inset);
    padding-bottom: calc(0.625rem + var(--native-inset-bottom));
}

html body.native-app:not(.web-desktop) .bottom-menu,
html body.native-app.has-web-top-bar:not(.web-desktop) .bottom-menu,
html body.native-app.has-web-top-bar.ios-mobile-web:not(.web-desktop) .bottom-menu {
    bottom: max(var(--bottom-menu-gap), var(--native-inset-bottom));
}

html body.native-app.has-web-top-bar.ios-mobile-web:not(.web-desktop) .content-area {
    padding-bottom: var(--native-inset-bottom);
}

/* Оболочка не отдаёт ни --tg-*, ни env(safe-area-*), поэтому нижнюю системную
   зону шторке приходится называть вручную — как это уже делает нижнее меню. */
html body.native-app:not(.web-desktop) .bottom-panel__content {
    --sheet-safe-bottom: var(--native-inset-bottom);
}

body.native-app #email-login-overlay {
    padding-top: calc(1.25rem + var(--native-inset-top));
    padding-bottom: calc(1.25rem + var(--native-inset-bottom));
}

/* Полноэкранные оверлеи рисуются поверх раскладки и своих отступов от
   .main-container не наследуют — системные зоны им нужно отдать отдельно. */
html body.native-app .support-chat__header {
    padding-top: calc(0.75rem + var(--native-inset-top));
}

html body.native-app .support-chat__input-area {
    padding-bottom: calc(0.625rem + var(--native-inset-bottom));
}

/* macOS: обычная веб-раскладка + 52px под titlebar. Без native-app. */
body.native-macos {
    --native-macos-inset-top: 3.25rem;
}

body.native-macos.has-web-top-bar {
    --app-top-bar-inset: calc(0.9375rem + 2.875rem + 0.5rem + var(--native-macos-inset-top));
}

body.native-macos .web-top-bar {
    top: calc(0.9375rem + var(--native-macos-inset-top));
}

body.native-macos .mainpage-profile-fab {
    top: calc(0.375rem + var(--native-macos-inset-top));
}

body.native-macos:not(.has-web-top-bar) .main-container {
    padding-top: calc(0.9375rem + var(--native-macos-inset-top));
}

html body.native-macos.has-web-top-bar .main-container,
html body.native-macos.has-web-top-bar.ios-mobile-web .main-container {
    padding-top: var(--app-top-bar-inset);
}

body.native-macos #email-login-overlay {
    padding-top: calc(1.25rem + var(--native-macos-inset-top));
}

html body.native-macos .support-chat__header {
    padding-top: calc(0.75rem + var(--native-macos-inset-top));
}

body.native-macos:not(.web-desktop) .notification {
    --notification-top-inset: var(--native-macos-inset-top);
}

/* macOS: обычная веб-раскладка + 52px под titlebar. Без native-app. */
body.native-macos {
    --native-macos-inset-top: 52px;
}

body.native-macos .web-top-bar {
    top: calc(15px + var(--native-macos-inset-top));
}

body.native-macos .mainpage-profile-fab {
    top: calc(6px + var(--native-macos-inset-top));
}

body.native-macos:not(.has-web-top-bar) .main-container {
    padding-top: calc(15px + var(--native-macos-inset-top));
}

html body.native-macos.has-web-top-bar .main-container,
html body.native-macos.has-web-top-bar.ios-mobile-web .main-container {
    padding-top: calc(15px + 46px + 8px + var(--native-macos-inset-top));
}

body.native-macos #email-login-overlay {
    padding-top: calc(20px + var(--native-macos-inset-top));
}

html body.native-macos .support-chat__header {
    padding-top: calc(12px + var(--native-macos-inset-top));
}

body.native-macos:not(.web-desktop) .notification {
    --notification-top-inset: var(--native-macos-inset-top);
}