/* Installed chat layout: use the real standalone viewport without reserving the
   bottom gesture inset twice. Browser mode keeps the existing safe-area rules,
   while chat-keyboard-v66 owns the viewport whenever the software keyboard is open. */
@media(max-width:780px){
  /* Keep CSS type sizes stable inside installed iOS/Android webviews. This avoids
     browser text autosizing making the chat-list copy disproportionately large. */
  html.app-standalone{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  html.app-standalone:not(.chat-keyboard-viewport) #stage{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    inset:0!important;
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
  }
  html.app-standalone:not(.chat-keyboard-viewport) #phone-frame,
  html.app-standalone:not(.chat-keyboard-viewport) #phone-screen{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
    padding:0!important;
  }

  /* Match the intended compact WhatsApp list proportions even when the global
     typography preference stylesheet is loaded after the iOS mobile rules. */
  html.app-standalone[data-social-app="whatsapp"] .row-name{
    font-size:calc(17px * var(--yappy-font-scale,1))!important;
  }
  html.app-standalone[data-social-app="whatsapp"] .row-preview{
    font-size:calc(15.5px * var(--yappy-font-scale,1))!important;
  }
  html.app-standalone[data-social-app="whatsapp"] .row-time{
    font-size:calc(14.5px * var(--yappy-font-scale,1))!important;
  }

  /* In installed mode the OS/webview already keeps the page above its system
     gesture/navigation region on affected devices. Applying env(safe-area-inset-bottom)
     here again creates the visible empty strip shown on iOS Home Screen installs.
     A small fixed breathing room works as the legacy-safe fallback on iOS/Android. */
  html.app-standalone[data-social-app="whatsapp"]:not(.chat-keyboard-viewport) .composer,
  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport) .composer{
    margin-bottom:0!important;
    padding-bottom:8px!important;
  }
}


/* v3 — CSS-only fallback for browsers that expose display-mode before JS. */
@media (max-width:780px) and (display-mode:fullscreen){
  #stage{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
  }
  #phone-frame,#phone-screen{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
    padding:0!important;
  }
}