/* V38.21 — MOBILE CHAT VIEWPORT LOCK — TARGETED ONLY
 *
 * Scope: mobile chat screen only.
 * Goal: keep the message viewport as the single vertical scroll surface,
 * keep the composer attached to the bottom edge/keyboard, and stop browser
 * scroll anchoring / overscroll from moving the chat shell or message rows.
 *
 * No Firebase, message, send, camera, voice, search or navigation logic.
 */
@media (max-width: 767px){
  :root{
    --v3821-composer-reserve:88px;
  }

  /* The active chat page is the fixed app shell. Only #chatWindow may scroll. */
  html,
  body{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  #chatMainContainer.mobile-active,
  body.mobile-chat-focus #chatMainContainer{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:none !important;
    box-sizing:border-box !important;
  }

  /* Header/composer are non-scrolling siblings. */
  #chatMainContainer.mobile-active > .chat-header,
  body.mobile-chat-focus #chatMainContainer > .chat-header{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:20 !important;
  }

  /* ONLY this element owns vertical scrolling. */
  #chatMainContainer.mobile-active #chatWindow,
  body.mobile-chat-focus #chatWindow{
    position:relative !important;
    flex:1 1 0 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:0 !important;
    max-height:none !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y !important;

    /* Do not let DOM insertion/reflow re-anchor the scroll position. */
    overflow-anchor:none !important;

    /* Keep the last bubble above the fixed/keyboard composer. */
    scroll-padding-top:8px !important;
    scroll-padding-bottom:var(--v3821-composer-reserve) !important;
  }

  #chatMainContainer.mobile-active #chatWindow > *,
  body.mobile-chat-focus #chatWindow > *{
    overflow-anchor:none !important;
  }

  /* Message rows themselves must never become the browser's scroll anchor. */
  #chatMainContainer.mobile-active #chatWindow .msg-row,
  body.mobile-chat-focus #chatWindow .msg-row{
    overflow-anchor:none !important;
    transform:none;
  }

  /* The composer never participates in message scrolling. */
  #chatMainContainer.mobile-active .chat-input-zone,
  body.mobile-chat-focus .chat-input-zone{
    flex:0 0 auto !important;
    flex-shrink:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    z-index:100 !important;
  }

  /* Keyboard state: NEVER shrink the chat shell to --app-vh.
     responsive.js intentionally tracks the visual viewport in --app-vh, and
     on iOS that value becomes the keyboard-reduced height. If the chat shell
     also uses it, the entire chat page collapses upward and the composer can
     appear hundreds of pixels above the native keyboard. Keep the shell fixed
     to the layout viewport; V35.23 places only the composer at visualViewport's
     keyboard top. */
  html.keyboard-open #chatMainContainer.mobile-active,
  html.keyboard-open body.mobile-chat-focus #chatMainContainer{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100vh !important;
    min-height:100vh !important;
    max-height:100vh !important;
    overflow:hidden !important;
    transform:translateX(0) !important;
  }

  html.keyboard-open #chatMainContainer.mobile-active #chatWindow,
  html.keyboard-open body.mobile-chat-focus #chatWindow{
    min-height:0 !important;
    height:0 !important;
    flex:1 1 0 !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y !important;
    overflow-anchor:none !important;
    scroll-padding-bottom:var(--v3821-composer-reserve) !important;
  }

  /* Existing keyboard/composer positioning classes remain functional.
     They may move only the composer; they cannot move the message viewport. */
  html.keyboard-open #chatMainContainer.mobile-active .chat-input-zone.v3523-keyboard,
  html.keyboard-open #chatMainContainer.mobile-active .chat-input-zone.v3522-keyboard-active,
  html.keyboard-open body.mobile-chat-focus .chat-input-zone.v3523-keyboard,
  html.keyboard-open body.mobile-chat-focus .chat-input-zone.v3522-keyboard-active{
    z-index:2200 !important;
  }

  /* Disable browser scroll chaining caused by a drag that reaches the
     beginning/end of the message list. */
  #chatMainContainer.mobile-active #chatWindow::-webkit-scrollbar{
    width:4px;
  }
}