/**
 * adaptive/safe-area.css — Этап 5.3
 * Notch / home-indicator. Desktop: env()=0 → визуально без изменений.
 * Подключать поздно (после mobile/voltark/page padding overrides).
 */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --va-header-safe: calc(var(--voltark-header-h, 52px) + var(--safe-top));
}

/* —— Header: fallback, затем max с inset —— */
.app-header {
  padding-top: 12px;
  padding-top: max(12px, var(--safe-top));
}

/* Desktop glass chrome (voltark-2026): base 8px + notch if any (обычно 0) */
body:not(.mobile-layout) .app-header {
  padding-top: 8px;
  padding-top: max(8px, var(--safe-top));
}

body.mobile-layout .app-header {
  padding-top: 8px;
  padding-top: max(8px, var(--safe-top));
  padding-left: 10px;
  padding-left: max(10px, var(--safe-left));
  padding-right: 10px;
  padding-right: max(10px, var(--safe-right));
}

@media (width <= 900px) and (orientation: landscape) {
  body.mobile-layout.landscape .app-header,
  body.mobile-layout .app-header {
    padding-top: 4px;
    padding-top: max(4px, var(--safe-top));
    padding-left: 10px;
    padding-left: max(10px, var(--safe-left));
    padding-right: 10px;
    padding-right: max(10px, var(--safe-right));
  }
}

/* —— Main: горизонтальные insets (перебиваем page padding:0 !important) —— */
body.mobile-layout .main-content {
  padding-left: max(10px, var(--safe-left)) !important;
  padding-right: max(10px, var(--safe-right)) !important;
  padding-bottom: calc(var(--voltark-bottom-nav-h) + 12px + var(--safe-bottom)) !important;
}

/* Full-bleed stage pages: только safe insets, без лишних 10px */
body.mobile-layout .main-content:has(.vk-home-stage),
body.mobile-layout .main-content:has(.store-page--hero),
body.mobile-layout .main-content:has(.store-page--immersive),
body.mobile-layout .main-content:has(.community-page),
body.mobile-layout .main-content:has(.lw-stage),
body.mobile-layout .main-content:has(.fm-stage),
body.mobile-layout .main-content:has(.inv-stage),
body.mobile-layout .main-content:has(.wl-stage),
body.mobile-layout .main-content:has(.th-stage) {
  padding-left: var(--safe-left) !important;
  padding-right: var(--safe-right) !important;
}

/* —— Bottom-nav: home indicator —— */
body.mobile-layout .bottom-navigation {
  padding-bottom: 6px;
  padding-bottom: max(6px, var(--safe-bottom));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* —— Fixed overlays / modals —— */
body.mobile-layout .notif-panel {
  top: calc(var(--va-header-safe, var(--voltark-header-h)) + 8px);
  left: max(8px, var(--safe-left));
  right: max(8px, var(--safe-right));
}

body.mobile-layout .modal-overlay {
  padding-top: max(8px, var(--safe-top));
  padding-left: max(8px, var(--safe-left));
  padding-right: max(8px, var(--safe-right));
  padding-bottom: max(8px, var(--safe-bottom));
}

body.mobile-layout .modal-overlay .modal,
body.mobile-layout .steam-profile-modal-full,
body.mobile-layout .chat-forward-modal {
  max-height: calc(100dvh - var(--voltark-bottom-nav-h) - 16px - var(--safe-top) - var(--safe-bottom));
}