/* KB4 Custom Pages (Product_Admin, Product_User, ...) */

/* These pages' content is entirely position:fixed, so <main> collapses to
   0 height and the footer rides up under the header. Scope a sticky-footer
   flex layout to just these pages (via :has) instead of touching body/main
   globally. */
body:has(#forethought-widget-embed-script) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(#forethought-widget-embed-script) main {
  flex: 1 0 auto;
}

body:has(#forethought-widget-embed-script) header .navbar-btn {
  display: none !important;
}

body:has(#forethought-widget-embed-script) .footer-wrapper {
  display: none;
}

body:has(#forethought-widget-embed-script) #forethought-chat {
  position: fixed !important;
  /* --ft-header-h is set by JS (see the custom page templates); if that
     script never runs (e.g. blocked in a sandboxed preview frame), falling
     back to 0px would put the widget's top edge at the very top of the
     viewport, covering the header entirely. 6rem is a safe floor taller
     than the real header at any breakpoint, so the worst case is "slightly
     too much gap," not "covers the header." */
  top: var(--ft-header-h, 6rem) !important;
  bottom: var(--ft-footer-h, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  margin: auto !important;
  /* A fixed 700px leaves generous centering margin on tall screens but
     barely fits (near-zero margin) on shorter ones, making the widget look
     pinned to the header instead of centered. Scale it to the available
     space instead, always keeping ~15% as breathing room. */
  height: min(
    700px,
    calc((100vh - var(--ft-header-h, 6rem) - var(--ft-footer-h, 0px)) * 0.85)
  ) !important;
  max-height: calc(
    100vh - var(--ft-header-h, 6rem) - var(--ft-footer-h, 0px)
  ) !important;
}

/* On mobile the centered look doesn't work — whether the widget ends up
   flush with the header or has a gap above it becomes a coin flip based on
   how much vertical slack happens to be left over. Anchor it flush to the
   header instead of centering; same breakpoint the header itself switches
   to its mobile layout at (see css-page-header.css). */
@media screen and (max-width: 54.89em) {
  body:has(#forethought-widget-embed-script) #forethought-chat {
    margin-top: 0.75rem !important;
    margin-bottom: auto !important;
  }

  /* The mobile hamburger nav (.header-nav, an overlay dropdown) should cover
     the widget the same way it already covers the rest of the page, but the
     widget's own z-index otherwise sits above everything. Force it below
     the header's stacking context (z-index: 10, see css-page-header.css)
     while the nav is open. */
  body:has(#forethought-widget-embed-script):has(.header-nav.is-open) #forethought-chat {
    z-index: 1 !important;
  }
}