/* SherikTop runtime surfaces
   The visual system is shared. Only Telegram/iOS/Android chrome insets differ. */

:root {
  --tg-safe-top: 0px;
  --tg-content-top: 0px;
  --tg-safe-bottom: 0px;
  --tg-content-bottom: 0px;
  --tg-left-inset: 0px;
  --tg-right-inset: 0px;
}

html.is-browser-surface {
  --tg-top-inset: 0px !important;
  --tg-bottom-inset: 0px !important;
}

html.is-bot-surface body {
  overscroll-behavior-y: none;
}

html.is-bot-surface .app-shell {
  min-height: 100dvh;
}

/* Expanded Mini Apps already start below Telegram's header. Fullscreen Mini
   Apps do not, so only fullscreen receives the measured content-safe top. */
html.is-bot-surface.is-telegram-webapp:not(.is-tg-fullscreen) .app-header {
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
}

html.is-bot-surface.is-telegram-webapp.is-tg-fullscreen .app-header,
html.is-bot-surface.is-telegram-webapp.is-tg-fullscreen body.experience-v2 .app-header.product-header,
html.is-bot-surface.is-telegram-webapp.is-tg-fullscreen body.experience-v2 .app-header.product-subheader {
  position: relative !important;
  top: auto !important;
  padding-top: calc(var(--tg-top-inset, 0px) + 10px) !important;
}

html.is-bot-surface.is-telegram-webapp.is-tg-fullscreen body {
  padding-right: var(--tg-right-inset, 0px);
  padding-left: var(--tg-left-inset, 0px);
}

/* Content below the app header must never add the top inset a second time. */
html.is-bot-surface.is-telegram-webapp .content,
html.is-bot-surface.is-telegram-webapp body.home-page .content,
html.is-bot-surface.is-telegram-webapp body.profile-page .content,
html.is-bot-surface.is-telegram-webapp body.post-page .content,
html.is-bot-surface.is-telegram-webapp body.detail-page .content {
  padding-top: 14px;
}

html.is-bot-surface.is-telegram-webapp body.home-page .home-intro {
  padding-top: 8px;
}

/* Telegram owns the back affordance on inner Mini App pages. Keep the HTML
   header for browser/fallback clients and remove it only after BackButton.show
   succeeds, avoiding duplicate back controls. */
html.is-bot-surface.is-telegram-webapp.has-native-back .app-header.compact,
html.is-bot-surface.is-telegram-webapp.has-native-back .app-header.detail-topbar {
  display: none !important;
}

html.is-bot-surface.is-telegram-webapp.has-native-back .content,
html.is-bot-surface.is-telegram-webapp.has-native-back body.detail-page .detail-content {
  padding-top: 12px !important;
}

html.is-bot-surface.is-telegram-webapp body.home-page .search-card,
html.is-bot-surface.is-telegram-webapp.is-tg-fullscreen body.home-page .search-card {
  top: 8px !important;
}

html.is-bot-surface.is-telegram-webapp .with-bottom-nav,
html.is-bot-surface.is-telegram-webapp body.experience-v2 .with-bottom-nav {
  padding-bottom: calc(104px + var(--tg-bottom-inset, 0px)) !important;
}

html.is-bot-surface.is-telegram-webapp .bottom-nav,
html.is-bot-surface.is-telegram-webapp body.experience-v2 .bottom-nav {
  bottom: calc(8px + var(--tg-bottom-inset, 0px)) !important;
}

html.is-bot-surface.is-telegram-webapp .filter-sheet {
  bottom: calc(var(--bottom-nav-height, 74px) + var(--tg-bottom-inset, 0px) + 16px) !important;
  max-height: calc(100dvh - var(--tg-top-inset, 0px) - var(--bottom-nav-height, 74px) - var(--tg-bottom-inset, 0px) - 28px) !important;
}

html.is-bot-surface.is-telegram-webapp .gallery-toolbar {
  padding-top: calc(12px + var(--tg-top-inset, 0px));
}

html.is-bot-surface.is-telegram-webapp .gallery-modal {
  padding-bottom: var(--tg-bottom-inset, 0px);
}

/* iOS needs a little more breathing room around the home indicator; Android
   navigation insets are already included in Telegram's reported bottom value. */
html.is-bot-surface.is-telegram-webapp.is-tg-ios .bottom-nav,
html.is-bot-surface.is-telegram-webapp.is-tg-ios body.experience-v2 .bottom-nav {
  bottom: calc(6px + var(--tg-bottom-inset, 0px)) !important;
}

html.is-bot-surface.is-telegram-webapp.is-tg-ios .with-bottom-nav,
html.is-bot-surface.is-telegram-webapp.is-tg-ios body.experience-v2 .with-bottom-nav {
  padding-bottom: calc(108px + var(--tg-bottom-inset, 0px)) !important;
}

@media (display-mode: standalone) {
  html.is-browser-surface .bottom-nav {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  html.is-browser-surface .with-bottom-nav {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
}