/* Yappy chat behavior v125
   Keep the conversation header visible while the software keyboard is open.
   iOS can pan visualViewport upward when focusing the composer even though the
   installed app shell itself stays anchored at y=0. Compensate only the chat
   header by visualViewport.offsetTop; never move the entire app canvas. */
@media(max-width:780px){
  html.chat-keyboard-viewport[data-social-app="whatsapp"] .chat-navbar,
  html.chat-keyboard-viewport[data-social-app="imessage"] .chat-navbar,
  html.chat-keyboard-viewport[data-social-app="x"] .x56-dm-head,
  html.chat-keyboard-viewport[data-social-app="instagram"] .ig72-dm-head{
    visibility:visible!important;
    opacity:1!important;
    transform:translate3d(0,var(--chat-visible-top,0px),0)!important;
    flex-shrink:0!important;
    z-index:120!important;
    pointer-events:auto!important;
    will-change:transform;
  }

  /* iMessage's chat header is intentionally absolute in the native mock.
     Keep its layout origin at 0 and use the transform above only for the
     transient visual-viewport pan. */
  html.chat-keyboard-viewport[data-social-app="imessage"] .imessage-v19 .chat-navbar{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
  }

  /* The other room headers remain in normal flex flow so the message list keeps
     its reserved header space while the header is visually compensated. */
  html.chat-keyboard-viewport[data-social-app="whatsapp"] .chat-navbar,
  html.chat-keyboard-viewport[data-social-app="x"] .x56-dm-head,
  html.chat-keyboard-viewport[data-social-app="instagram"] .ig72-dm-head{
    position:relative!important;
    top:0!important;
  }

  /* Keep the scrolling body below the raised header instead of letting it paint
     over the contact/title chrome during the keyboard transition. */
  html.chat-keyboard-viewport[data-social-app="whatsapp"] .chat-scroll,
  html.chat-keyboard-viewport[data-social-app="imessage"] .chat-scroll,
  html.chat-keyboard-viewport[data-social-app="x"] .x56-dm-list,
  html.chat-keyboard-viewport[data-social-app="instagram"] .ig72-dm-list{
    position:relative;
    z-index:1;
  }
}


/* v126 — keep the editable Yappy status bar in the same visual position while
   iOS pans the visual viewport for the software keyboard. The header already
   compensates by --chat-visible-top; the status bar must move with it too.
   Extend its background upward so the native safe-area never exposes the chat
   wallpaper while typing. */
@media(max-width:780px){
  html.app-standalone.chat-keyboard-viewport #phone-screen>#statusbar.statusbar{
    visibility:visible!important;
    opacity:1!important;
    transform:translate3d(0,var(--chat-visible-top,0px),0)!important;
    z-index:130!important;
    will-change:transform;
  }

  html.app-standalone.chat-keyboard-viewport #phone-screen>#statusbar.statusbar::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    height:calc(var(--native-safe-top-resolved,0px) + var(--chat-visible-top,0px));
    background:var(--yappy-keyboard-top-bg,var(--nav-bg,var(--bg-app,#000)));
    pointer-events:none;
  }

  html.app-standalone.chat-keyboard-viewport[data-social-app="whatsapp"]{
    --yappy-keyboard-top-bg:var(--nav-bg,#0c1210);
  }
  html.app-standalone.chat-keyboard-viewport[data-social-app="imessage"]{
    --yappy-keyboard-top-bg:var(--im-bg,var(--bg-app,#000));
  }
  html.app-standalone.chat-keyboard-viewport[data-social-app="x"]{
    --yappy-keyboard-top-bg:var(--x-bg,#000);
  }
  html.app-standalone.chat-keyboard-viewport[data-social-app="instagram"]{
    --yappy-keyboard-top-bg:var(--ig-bg,var(--bg-app,#000));
  }
}