/* Mobile keyboard viewport v4.
   Keep the status bar and app header anchored at the top. The software keyboard
   only reduces the usable bottom edge of the active app surface. */
@media(max-width:780px){
  html.typing-keyboard-viewport #app-root,
  html.typing-keyboard-viewport #story-viewer,
  html.typing-keyboard-viewport #overlay-root{
    bottom:var(--chat-keyboard-inset,0px)!important;
    height:auto!important;
    max-height:none!important;
  }

  html.typing-keyboard-viewport .screen{
    min-height:0!important;
    overflow:hidden!important;
  }

  /* WhatsApp + iMessage chat panes. */
  html.chat-keyboard-viewport .chat-navbar{
    flex-shrink:0!important;
    z-index:20;
  }
  html.chat-keyboard-viewport .chat-scroll{
    min-height:0!important;
    flex:1 1 0!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
  }
  html.chat-keyboard-viewport .composer{
    flex-shrink:0!important;
    margin-bottom:0!important;
    padding-bottom:8px!important;
  }

  /* X DM. */
  html.chat-keyboard-viewport[data-social-app="x"] .screen.active,
  html.chat-keyboard-viewport[data-social-app="x"] .x56-dm-room{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  html.chat-keyboard-viewport[data-social-app="x"] .x56-dm-list{
    min-height:0!important;
    flex:1 1 0!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
  }
  html.chat-keyboard-viewport[data-social-app="x"] .x56-dm-composer{
    flex:0 0 auto!important;
    margin-bottom:0!important;
    padding-bottom:8px!important;
  }

  /* Instagram DM. */
  html.chat-keyboard-viewport[data-social-app="instagram"] .screen.active,
  html.chat-keyboard-viewport[data-social-app="instagram"] .ig72-dm-room{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  html.chat-keyboard-viewport[data-social-app="instagram"] .ig72-dm-list{
    min-height:0!important;
    flex:1 1 0!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
  }
  html.chat-keyboard-viewport[data-social-app="instagram"] .ig72-dm-composer{
    flex:0 0 auto!important;
    margin-bottom:6px!important;
    padding-bottom:6px!important;
  }

  /* Forms, story replies and editors inside overlays stay scrollable above the keyboard. */
  html.typing-keyboard-viewport #overlay-root .sheet,
  html.typing-keyboard-viewport #overlay-root .card-modal{
    max-height:calc(100% - 8px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  html.typing-keyboard-viewport #overlay-root input:focus,
  html.typing-keyboard-viewport #overlay-root textarea:focus,
  html.typing-keyboard-viewport #overlay-root [contenteditable="true"]:focus{
    scroll-margin-top:12px;
    scroll-margin-bottom:12px;
  }

  /* Avoid iOS focus zoom without disabling user pinch zoom outside editing. */
  html[data-social-app="whatsapp"] .composer textarea,
  html[data-social-app="imessage"] .composer textarea,
  html.chat-keyboard-viewport[data-social-app="x"] #xdm-input,
  html.chat-keyboard-viewport[data-social-app="instagram"] #ig72-dm-input{
    font-size:max(16px,calc(16px * var(--yappy-font-scale,1)))!important;
  }
}