/* =========================================================
   vAvtobyse 2.9.19 — STAGE 1B / MOBILE KEYBOARD + VIEWPORT
   Scope: Android/PWA keyboard, visual viewport, bottom navigation,
   composer visibility and keyboard-safe floating composer panels.
   Loaded after Stage 1A on purpose. No visual redesign here.
   ========================================================= */

@media (max-width:820px){
  /* Use the real VisualViewport height while the soft keyboard is visible.
     This avoids the old 100vh/100dvh rail remaining behind the keyboard. */
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode,
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode #appScreen,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode #appScreen{
    height:var(--vav-stage1b-viewport-height,var(--vav-app-height,100dvh))!important;
    min-height:0!important;
    max-height:var(--vav-stage1b-viewport-height,var(--vav-app-height,100dvh))!important;
  }

  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode{
    top:var(--vav-stage1b-viewport-top,var(--vav-viewport-offset-top,0px))!important;
    bottom:auto!important;
  }

  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode .chat-window,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode .chat-window,
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode .active-chat,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode .active-chat{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
  }

  /* The global nav is never allowed to occupy keyboard space. Focus hides it
     immediately; viewport shrink then keeps it hidden for the keyboard lifetime. */
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode .mobile-bottom-nav,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode .mobile-bottom-nav,
  html.vav-mobile-layout body.vav-shell-mode.vav-stage1b-focus .mobile-bottom-nav,
  html.vav-mobile-layout body.vav-shell-mode.vav-stage1b-keyboard .mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Keep the active conversation as a strict flex column. Only the message list
     may shrink; header and composer remain visible above the keyboard. */
  html.vav-mobile-layout body.vav-shell-mode .active-chat{
    display:flex!important;
    flex-direction:column!important;
  }
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode .message-list,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode .message-list{
    flex:1 1 0!important;
    min-height:0!important;
    padding-bottom:8px!important;
    scroll-padding-bottom:12px!important;
  }
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode .composer,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode .composer{
    flex:0 0 auto!important;
    position:relative!important;
    inset:auto!important;
    margin:0!important;
    transform:none!important;
    padding-bottom:5px!important;
  }

  /* Panels belonging to the composer stay inside the visible viewport instead
     of calculating their position from the hidden layout viewport. */
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode .emoji-panel,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode .emoji-panel,
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode .voice-recording-bar,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode .voice-recording-bar{
    bottom:calc(58px + env(safe-area-inset-bottom))!important;
    max-height:min(34vh,240px)!important;
  }

  /* Preserve compact Stage 1A input growth while the keyboard is present. */
  html.vav-mobile-layout.vav-stage1b-focus body.vav-shell-mode #messageInput,
  html.vav-mobile-layout.vav-stage1b-keyboard body.vav-shell-mode #messageInput{
    max-height:min(96px,28vh)!important;
    overscroll-behavior:contain!important;
  }
}