/* =====================================================================
   search.com/chat — mobile viewport fix (pair with mobile-viewport-fix.js)
   Verified on BrowserStack real devices:
     - OnePlus 11R, Android 13, Chrome
     - iPhone 16, iOS 18.5, Safari
   Load AFTER bootstrap and the site stylesheets.
   Include this file ONLY on the /chat page: the body rules below would stop
   page scrolling on normal pages (home, blog, about, ...).

   Root cause:
     <main class="flex-fill d-flex flex-column vh-100">  -> height:100vh, overflow:hidden
       <header class="... position-sticky top-0">        -> sticky, but its scroll
                                                            container is <main>
     body { overflow:hidden }
   100vh is the *largest* viewport. When the keyboard opens, Android Chrome
   scrolls the page and iOS Safari pans the visual viewport, so the header
   goes off-screen and can't be scrolled back (body overflow:hidden).
   ===================================================================== */

body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Height (and on mobile, position/top) is set by mobile-viewport-fix.js
   from window.visualViewport. */
main.vh-100 {
  min-height: 0;
  overflow: hidden;
}

/* Header: normal non-shrinking flex item at the top of <main>. */
main.vh-100 > header {
  position: relative !important;
  flex: 0 0 auto;
  z-index: 1030;
}

/* The chat area is the only thing that scrolls. */
main.vh-100 .main-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Composer stays at the bottom of the visible area, clear of the
   iPhone home indicator. */
.chat-input.position-sticky {
  bottom: 0;
  z-index: 20;
  background: var(--bs-body-bg, #fff);
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* iOS zooms the page on focus if the field is under 16px. */
#search-form-input {
  font-size: 16px !important;
}