/* Yappy installed edge refinement v138
   Installed/A2HS only. Preserve native top safe area + Yappy's simulated status bar;
   tighten only lower chrome so the app feels attached to the device viewport. */

@media (max-width:780px){
  html.app-standalone{
    --yappy-installed-dock-bottom:clamp(2px,calc(var(--native-safe-bottom-resolved, env(safe-area-inset-bottom,0px)) - 28px),8px);
    --yappy-installed-composer-bottom:clamp(5px,calc(var(--native-safe-bottom-resolved, env(safe-area-inset-bottom,0px)) - 25px),9px);
  }

  /* Intentionally no top/inset overrides here. pwa-safe-v12 remains the source
     of truth so the physical phone status UI never overlaps Yappy's status bar. */

  html.app-standalone[data-social-app="whatsapp"] #tabbar:not(.imessage-main-tabs):not(.ig72-tabs):not(.x56-tabs){
    margin-top:2px!important;
    margin-left:10px!important;
    margin-right:10px!important;
    margin-bottom:var(--yappy-installed-dock-bottom)!important;
  }

  html.app-standalone[data-social-app="imessage"] #tabbar.imessage-main-tabs{
    margin-top:2px!important;
    margin-left:10px!important;
    margin-right:10px!important;
    margin-bottom:var(--yappy-installed-dock-bottom)!important;
  }

  html.app-standalone[data-social-app="instagram"] #tabbar.ig72-tabs{
    bottom:var(--yappy-installed-dock-bottom)!important;
  }

  html.app-standalone[data-social-app="x"]{
    --x-nav-safe-bottom:var(--yappy-installed-dock-bottom)!important;
  }

  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:var(--yappy-installed-composer-bottom)!important;
  }
}

@media (max-width:780px) and (display-mode:fullscreen){
  html{
    --yappy-installed-dock-bottom:clamp(2px,calc(var(--native-safe-bottom-resolved, env(safe-area-inset-bottom,0px)) - 28px),8px);
  }
  html[data-social-app="instagram"] #tabbar.ig72-tabs{
    bottom:var(--yappy-installed-dock-bottom)!important;
  }
  html[data-social-app="x"]{
    --x-nav-safe-bottom:var(--yappy-installed-dock-bottom)!important;
  }
}


/* v2 — true installed viewport fill.
   On iOS Home Screen, 100dvh may stop above the final compositor/safe-area band.
   The fixed inset box is more reliable: let top/right/bottom/left define the
   actual installed viewport and remove the explicit height constraint. */
@media (max-width:780px){
  html.app-standalone,
  html.app-standalone body{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  html.app-standalone #stage{
    position:fixed!important;
    inset:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
  }

  html.app-standalone #phone-frame,
  html.app-standalone #phone-screen{
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
  }

  /* If WebKit still exposes a compositor-only bottom band, make that band
     indistinguishable from the active app instead of leaking Yappy's desktop
     #0d0d0d body background. */
  html.app-standalone,
  html.app-standalone body,
  html.app-standalone #stage{
    background:var(--bg-app,#fff)!important;
  }
  html.app-standalone[data-social-app="x"],
  html.app-standalone[data-social-app="x"] body,
  html.app-standalone[data-social-app="x"] #stage{
    background:var(--x-bg,#000)!important;
  }
  html.app-standalone[data-social-app="instagram"],
  html.app-standalone[data-social-app="instagram"] body,
  html.app-standalone[data-social-app="instagram"] #stage{
    background:var(--ig-bg,var(--bg-app,#fff))!important;
  }
  html.app-standalone[data-social-app="imessage"],
  html.app-standalone[data-social-app="imessage"] body,
  html.app-standalone[data-social-app="imessage"] #stage{
    background:var(--im-bg,var(--bg-app,#fff))!important;
  }
}

/* Same fill strategy for engines that expose fullscreen media state before the
   JS class lands. This still does not alter top safe-area/statusbar ownership. */
@media (max-width:780px) and (display-mode:fullscreen){
  #stage{
    position:fixed!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
  }
}


/* v3 — adaptive near-edge docking after true viewport fill.
   Uses each device's resolved safe inset instead of a platform-specific fixed
   offset. This keeps iOS gesture devices and Android navigation modes usable
   while avoiding the visibly floating dock position. */


/* v4 — safe area is functional, never a visible placeholder.
   The application surface reaches bottom:0. Interactive controls may keep a
   small internal lift, but the OS gesture inset no longer pushes the whole bar
   upward or creates a separate white/black band. */
@media (max-width:780px){
  html.app-standalone{
    --yappy-installed-dock-bottom:0px;
    --yappy-installed-composer-bottom:clamp(
      7px,
      calc(var(--native-safe-bottom-resolved, env(safe-area-inset-bottom,0px)) - 22px),
      12px
    );
  }

  /* Main navigation surfaces physically reach the viewport edge. */
  html.app-standalone[data-social-app="whatsapp"]
  #tabbar:not(.imessage-main-tabs):not(.ig72-tabs):not(.x56-tabs),
  html.app-standalone[data-social-app="imessage"]
  #tabbar.imessage-main-tabs{
    margin-bottom:0!important;
  }

  html.app-standalone[data-social-app="instagram"] #tabbar.ig72-tabs{
    bottom:0!important;
  }

  html.app-standalone[data-social-app="x"]{
    --x-nav-safe-bottom:0px!important;
  }

  /* Keep icons optically/ergonomically just above the home gesture while the
     bar surface itself remains flush with the bottom edge. */
  html.app-standalone[data-social-app="whatsapp"]
  #tabbar:not(.imessage-main-tabs):not(.ig72-tabs):not(.x56-tabs) .tab-btn,
  html.app-standalone[data-social-app="imessage"]
  #tabbar.imessage-main-tabs .tab-btn,
  html.app-standalone[data-social-app="instagram"]
  #tabbar.ig72-tabs .tab-btn,
  html.app-standalone[data-social-app="x"]
  #tabbar.x56-tabs .tab-btn{
    transform:translateY(-3px)!important;
  }

  /* In chat rooms, safe area belongs INSIDE the composer. The chat/wallpaper
     remains visible behind/under it all the way to the physical screen edge. */
  html.app-standalone[data-social-app="whatsapp"]:not(.chat-keyboard-viewport) .screen.active>.composer,
  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport) .imessage-v19 .composer{
    margin-bottom:0!important;
    box-sizing:border-box!important;
    padding-bottom:max(
      var(--yappy-installed-composer-bottom),
      var(--native-safe-bottom-resolved, env(safe-area-inset-bottom,0px))
    )!important;
  }

  /* Wallpaper/chat canvases must never terminate above the compositor edge. */
  html.app-standalone[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.wa129-wallpaper-layer{
    bottom:0!important;
  }
  html.app-standalone[data-social-app="whatsapp"] .screen.active,
  html.app-standalone[data-social-app="imessage"] .screen.active,
  html.app-standalone[data-social-app="instagram"] .screen.active,
  html.app-standalone[data-social-app="x"] .screen.active{
    bottom:0!important;
    min-height:100%!important;
  }

  /* The lower app canvas is always the app's own surface, never the desktop
     frame/body colour. This is especially visible in light chat rooms. */
  html.app-standalone[data-social-app="whatsapp"] #phone-screen,
  html.app-standalone[data-social-app="whatsapp"] #app-root{
    background:var(--bg-app,#fff)!important;
  }
  html.app-standalone[data-social-app="imessage"] #phone-screen,
  html.app-standalone[data-social-app="imessage"] #app-root{
    background:var(--im-bg,var(--bg-app,#fff))!important;
  }
  html.app-standalone[data-social-app="instagram"] #phone-screen,
  html.app-standalone[data-social-app="instagram"] #app-root{
    background:var(--ig-bg,var(--bg-app,#fff))!important;
  }
  html.app-standalone[data-social-app="x"] #phone-screen,
  html.app-standalone[data-social-app="x"] #app-root{
    background:var(--x-bg,#000)!important;
  }
}

/* CSS-only fullscreen fallback before standalone-init has attached its class. */
@media (max-width:780px) and (display-mode:fullscreen){
  html{
    --yappy-installed-dock-bottom:0px;
  }
  html[data-social-app="instagram"] #tabbar.ig72-tabs{
    bottom:0!important;
  }
  html[data-social-app="x"]{
    --x-nav-safe-bottom:0px!important;
  }
}


/* v5 — native-like composer docking.
   Do NOT reserve the entire iOS bottom safe inset inside the composer. Installed
   web apps already paint through that region; we only need a small optical/tap
   cushion above the home gesture. */
@media (max-width:780px){
  html.app-standalone{
    --yappy-installed-composer-bottom:clamp(
      4px,
      calc(var(--native-safe-bottom-resolved, env(safe-area-inset-bottom,0px)) - 30px),
      8px
    );
  }

  html.app-standalone[data-social-app="whatsapp"]:not(.chat-keyboard-viewport)
  .screen.active>.composer,
  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport)
  .imessage-v19 .composer{
    bottom:0!important;
    margin-bottom:0!important;
    padding-bottom:var(--yappy-installed-composer-bottom)!important;
  }

  /* Keep the text field/button row itself low. Older iMessage rules add large
     safe-area padding; this final installed-only layer intentionally wins. */
  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport)
  .imessage-v19 .composer{
    padding-top:7px!important;
  }

  html.app-standalone[data-social-app="whatsapp"]:not(.chat-keyboard-viewport)
  .screen.active>.composer{
    padding-top:6px!important;
  }

  /* Bottom navigation icons also no longer need the previous 3px lift now that
     the app surface really reaches the physical viewport edge. */
  html.app-standalone[data-social-app="whatsapp"]
  #tabbar:not(.imessage-main-tabs):not(.ig72-tabs):not(.x56-tabs) .tab-btn,
  html.app-standalone[data-social-app="imessage"]
  #tabbar.imessage-main-tabs .tab-btn,
  html.app-standalone[data-social-app="instagram"]
  #tabbar.ig72-tabs .tab-btn,
  html.app-standalone[data-social-app="x"]
  #tabbar.x56-tabs .tab-btn{
    transform:translateY(-1px)!important;
  }
}


/* v6 */
@media (max-width:780px){
  html.app-standalone,
  html.app-standalone body,
  html.app-standalone #stage,
  html.app-standalone #phone-frame,
  html.app-standalone #phone-screen{
    position:fixed!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }

  html.app-standalone[data-social-app="whatsapp"] #phone-frame,
  html.app-standalone[data-social-app="whatsapp"] #phone-screen{
    background:var(--bg-app,#fff)!important;
  }
  html.app-standalone[data-social-app="imessage"] #phone-frame,
  html.app-standalone[data-social-app="imessage"] #phone-screen{
    background:var(--im-bg,var(--bg-app,#fff))!important;
  }
  html.app-standalone[data-social-app="instagram"] #phone-frame,
  html.app-standalone[data-social-app="instagram"] #phone-screen{
    background:var(--ig-bg,var(--bg-app,#fff))!important;
  }
  html.app-standalone[data-social-app="x"] #phone-frame,
  html.app-standalone[data-social-app="x"] #phone-screen{
    background:var(--x-bg,#000)!important;
  }

  html.app-standalone #app-root{
    right:0!important;
    bottom:0!important;
    left:0!important;
    height:auto!important;
  }

  html.app-standalone[data-social-app="whatsapp"]:not(.chat-keyboard-viewport) .screen.active>.composer,
  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport) .imessage-v19 .composer{
    bottom:0!important;
    margin-bottom:0!important;
    padding-bottom:4px!important;
  }

  html.app-standalone[data-social-app="instagram"] #tabbar.ig72-tabs{bottom:0!important}
  html.app-standalone[data-social-app="x"]{--x-nav-safe-bottom:0px!important}
}


/* v7 — the installed viewport has one visual surface.
   Any compositor/safe-area pixels outside the app layout inherit the currently
   active Yappy screen colour via installed-surface-v139.js. */
@media (max-width:780px){
  html.app-standalone,
  html.app-standalone body,
  html.app-standalone #stage,
  html.app-standalone #phone-frame,
  html.app-standalone #phone-screen{
    background:var(--yappy-viewport-surface,var(--bg-app,#fff))!important;
  }

  html.app-standalone{
    --yappy-installed-control-gap:6px;
  }

  /* Keep a small native-looking breathing room INSIDE the same app surface. */
  html.app-standalone[data-social-app="whatsapp"]
  #tabbar:not(.imessage-main-tabs):not(.ig72-tabs):not(.x56-tabs),
  html.app-standalone[data-social-app="imessage"] #tabbar.imessage-main-tabs{
    margin-bottom:var(--yappy-installed-control-gap)!important;
  }

  html.app-standalone[data-social-app="instagram"] #tabbar.ig72-tabs{
    bottom:var(--yappy-installed-control-gap)!important;
  }

  html.app-standalone[data-social-app="x"] #tabbar.x56-tabs{
    margin-bottom:var(--yappy-installed-control-gap)!important;
  }

  html.app-standalone[data-social-app="whatsapp"]:not(.chat-keyboard-viewport)
  .screen.active>.composer,
  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport)
  .imessage-v19 .composer{
    bottom:0!important;
    margin-bottom:0!important;
    padding-bottom:6px!important;
  }

  html.app-standalone[data-social-app="instagram"] .ig72-dm-composer,
  html.app-standalone[data-social-app="x"] .x56-dm-composer{
    padding-bottom:6px!important;
  }
}


/* v8 — installed PWA full-height shell.
   iOS Home Screen can report 100dvh without the bottom gesture safe-area band,
   leaving a visible blank strip below Yappy. For installed mode we deliberately
   size the outer shell with the LARGE viewport instead. Safe-area spacing still
   belongs to the controls/composers, not to the app canvas itself. */
@media (max-width:780px){
  html.app-standalone,
  html.app-standalone body{
    width:100%!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  html.app-standalone #stage,
  html.app-standalone #phone-frame,
  html.app-standalone #phone-screen{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100vw!important;
    height:100vh!important;
    min-width:100vw!important;
    min-height:100vh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
  }

  @supports (height:100lvh){
    html.app-standalone,
    html.app-standalone body,
    html.app-standalone #stage,
    html.app-standalone #phone-frame,
    html.app-standalone #phone-screen{
      height:100lvh!important;
      min-height:100lvh!important;
    }
  }

  /* The app root and every full-screen overlay now resolve against the complete
     installed canvas, so tutorial/modals also cover the home-indicator region. */
  html.app-standalone #app-root,
  html.app-standalone #story-viewer,
  html.app-standalone #overlay-root{
    right:0!important;
    bottom:0!important;
    left:0!important;
  }
}

/* CSS-only fallback while standalone-init.js is still booting. */
@media (max-width:780px) and (display-mode:standalone){
  html,body{
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #stage,#phone-frame,#phone-screen{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100vw!important;
    height:100vh!important;
    min-width:100vw!important;
    min-height:100vh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
  }
  @supports (height:100lvh){
    html,body,#stage,#phone-frame,#phone-screen{
      height:100lvh!important;
      min-height:100lvh!important;
    }
  }
}


/* v9 — installed iMessage child-control docking.
   The outer installed shell now paints through the physical bottom safe-area.
   Older iMessage controls still added env(safe-area-inset-bottom) to their own
   absolute offsets, which double-counted that inset and made the waveform/send
   control, reply preview and + drawer visibly float above the composer. */
@media (max-width:780px){
  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport)
  .imessage-v19 .voice-main{
    right:14px!important;
    bottom:6px!important;
    margin:0!important;
  }

  html.app-standalone[data-social-app="imessage"]:not(.chat-keyboard-viewport)
  .imessage-v19 .voice-main.send-main{
    right:17px!important;
    bottom:11px!important;
    margin:0!important;
  }

  html.app-standalone[data-social-app="imessage"] .im44-reply-compose{
    bottom:calc(var(--im131-composer-h,57px) + 8px)!important;
  }

  html.app-standalone[data-social-app="imessage"] #sheet-el.im28-attach-sheet{
    margin-bottom:calc(70px + var(--yappy-installed-control-gap,6px))!important;
  }

  html.chat-keyboard-viewport[data-social-app="imessage"] .imessage-v19 .voice-main{
    right:14px!important;
    bottom:8px!important;
    margin:0!important;
  }
  html.chat-keyboard-viewport[data-social-app="imessage"] .imessage-v19 .voice-main.send-main{
    right:17px!important;
    bottom:13px!important;
    margin:0!important;
  }
  html.chat-keyboard-viewport[data-social-app="imessage"] .im44-reply-compose{
    bottom:calc(var(--im131-composer-h,60px) + 8px)!important;
  }
}


/* v11 — keyboard never moves the installed app top.
   The installed shell stays full-height and anchored at y=0. Only app/story/modal
   content shortens from the bottom by the measured keyboard inset. */
@media(max-width:780px){
  html.app-standalone.typing-keyboard-viewport #stage,
  html.app-standalone.typing-keyboard-viewport #phone-frame,
  html.app-standalone.typing-keyboard-viewport #phone-screen{
    position:fixed!important;
    inset:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    height:100vh!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
  }

  @supports (height:100lvh){
    html.app-standalone.typing-keyboard-viewport #stage,
    html.app-standalone.typing-keyboard-viewport #phone-frame,
    html.app-standalone.typing-keyboard-viewport #phone-screen{
      height:100lvh!important;
    }
  }

  html.app-standalone.typing-keyboard-viewport #app-root,
  html.app-standalone.typing-keyboard-viewport #story-viewer,
  html.app-standalone.typing-keyboard-viewport #overlay-root{
    right:0!important;
    bottom:var(--chat-keyboard-inset,0px)!important;
    left:0!important;
    height:auto!important;
    max-height:none!important;
  }

  html.app-standalone.chat-keyboard-viewport[data-social-app="whatsapp"] .screen.active>.composer,
  html.app-standalone.chat-keyboard-viewport[data-social-app="imessage"] .imessage-v19 .composer{
    bottom:0!important;
    margin-bottom:0!important;
    padding-bottom:8px!important;
  }

  html.app-standalone.chat-keyboard-viewport[data-social-app="x"] .x56-dm-composer{
    margin-bottom:0!important;
    padding-bottom:8px!important;
  }

  html.app-standalone.chat-keyboard-viewport[data-social-app="instagram"] .ig72-dm-composer{
    margin-bottom:6px!important;
    padding-bottom:6px!important;
  }
}