/* LAUNCH_FIX10: foreground calls, physical-edge paper and chat edge masks. */

/* FIX4/FIX6 shortened the authenticated surface back to 100dvh after FIX2B.
   In standalone mode the shell, app, screen and its flex scroller all keep the
   measured physical-screen bleed.  Keyboard occlusion includes that same
   bleed so the composer still follows the visual viewport. */
@media (max-width:599px) {
  #blueink-r11[data-pwa-standalone].preview-shell,
  #blueink-r11[data-pwa-standalone] .app {
    height:calc(100dvh + var(--pwa-bleed,0px));
    min-height:calc(100dvh + var(--pwa-bleed,0px));
  }

  #blueink-r11[data-pwa-standalone] .screen {
    top:0;
    right:0;
    bottom:0;
    left:0;
    height:auto;
    min-height:0;
  }

  html[data-keyboard-open="true"] #blueink-r11[data-pwa-standalone] .screen {
    bottom:calc(var(--kb-inset,0px) + var(--pwa-bleed,0px));
  }

  #blueink-r11[data-pwa-standalone] .screen > [data-scroll] {
    flex:1 1 auto;
    min-height:0;
    align-self:stretch;
  }
}

/* Safari may promote frosted message bubbles into their own compositing
   layers.  Keep the mask on the actual overflow owner and give the floating
   header an opaque-to-transparent guard so promoted text cannot show through
   the status area or avatar row. */
#blueink-r11 [data-scroll="conversation"] {
  --scroll-fade-top:calc(var(--top-safe) + 82px);
  --scroll-content-top:calc(var(--top-safe) + 78px);
  isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 calc(var(--top-safe) + 76px),#000 calc(100% - var(--scroll-fade-bottom)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 calc(var(--top-safe) + 76px),#000 calc(100% - var(--scroll-fade-bottom)),transparent 100%);
}

#blueink-r11 .r12-chat-header::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 -34px;
  pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 96%,transparent) calc(100% - 34px),transparent 100%);
}

#blueink-r11 .r12-chat-header > * {
  position:relative;
  z-index:1;
}