/* ════════════════════════════════════════════════════════
   Mobile scroll + fixed bottom nav (mobile_scroll_fixed_v1)
   Keeps tab bar permanently docked on short Telegram viewports.
   ════════════════════════════════════════════════════════ */

:root {
  --mobile-nav-dock-h: calc(var(--bottom-nav-height, 80px) + 4px);
}

/* Cap shell to the visible CSS viewport so an oversized
   --tg-viewport-height cannot push the nav off-screen. */
.app-frame {
  position: relative;
  width: 100%;
  max-width: var(--app-max, 480px);
  margin: 0 auto;
  height: min(var(--tg-viewport-height, 100dvh), 100dvh, 100vh);
  max-height: min(var(--tg-viewport-height, 100dvh), 100dvh, 100vh);
  min-height: 0;
  overflow: hidden;
  background: var(--bg, #0b0908);
}

/* Pulse orb / status / main timer ONLY on the Pulse tab */
.app[data-active-tab]:not([data-active-tab="pulse"]) #panelDashboard,
.app:not(.is-pulse-tab):not([data-active-tab="pulse"]) #panelDashboard,
#panelDashboard.panel--hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

.app[data-active-tab]:not([data-active-tab="pulse"]) #panelDashboard .cyber-orb-zone,
.app[data-active-tab]:not([data-active-tab="pulse"]) #panelDashboard .core-page__status,
.app[data-active-tab]:not([data-active-tab="pulse"]) #panelDashboard .core-metrics,
.app[data-active-tab]:not([data-active-tab="pulse"]) #panelDashboard .core-tap-timer {
  display: none !important;
}

.app.app-shell,
#app.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  /* Reserve space so fixed nav never covers the last content rows */
  padding-bottom: var(--mobile-nav-dock-h) !important;
  box-sizing: border-box;
}

/* Primary content area — native scroll, room for fixed footer */
#appPages.app-pages,
.app-pages {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 12px;
}

.scroll,
.network-scroll,
.earn-scroll,
.wallet-scroll,
.nodes-scroll,
.core-page {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--mobile-nav-dock-h) + 16px) !important;
  scroll-padding-bottom: calc(var(--mobile-nav-dock-h) + 16px);
}

#panelDashboard.panel--core,
.panel--core {
  overflow: hidden;
  min-height: 0;
}

/* Permanently docked bottom navigation */
.nav.bottom-nav,
nav.nav.bottom-nav,
.bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 1000 !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg, #0b0908) !important;
  border-top: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.nav.bottom-nav .nav__inner,
.bottom-nav .nav__inner {
  pointer-events: auto;
  width: 100%;
  max-width: var(--app-max, 480px);
  margin: 0 auto;
  background: var(--bg, #0b0908) !important;
  border-top: none;
  min-height: var(--nav-bar-height, 76px);
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}

/* Auth gate still hides nav when intentional */
body.is-auth-required .nav.bottom-nav,
body.is-auth-required .bottom-nav {
  display: none !important;
}

/* Chakra modal sits above fixed bottom nav; hide dock while open */
body.chakra-modal-open .nav.bottom-nav {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}