.chat-screen .chat-history{
  position:absolute;inset:0;z-index:0;flex:none;display:block;
  padding-top:calc(var(--chat-header-height,18cqw) + 4px);
  padding-bottom:0;
  scroll-padding-top:var(--chat-header-height,18cqw);
  scroll-padding-bottom:calc(var(--chat-composer-height,60px) + 5px);
}
/* Real flow content preserves the bottom inset in Safari flex overflow as well.
   The history's 4px gap plus this extra 1px keep the requested 5px panel spacing. */
.chat-history .history-bottom-space{
  flex:0 0 calc(var(--chat-composer-height,60px) + 1px);
  height:calc(var(--chat-composer-height,60px) + 1px);
  pointer-events:none;
}
/* Clip transformed paint without extending native scrollHeight during motion. */
.history-clip{display:flex;flex-direction:column;min-height:100%;overflow:clip;}
.history-content{display:flex;flex-direction:column;flex:1 0 auto;min-width:0;gap:4px;}
.chat-screen .phone-head{
  position:absolute;top:0;left:0;right:0;z-index:3;isolation:isolate;
  flex-shrink:0;margin:0;transform:none;translate:none;
  animation:none;transition:none;
}
.chat-screen .composer-wrap{position:relative;z-index:3;isolation:isolate;margin-top:auto;flex-shrink:0;}
.chat-screen .phone-head::before,.chat-screen .composer-wrap::before{
  content:'';position:absolute;left:0;right:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.chat-screen .phone-head::before{
  top:0;bottom:-20px;
  mask-image:linear-gradient(to bottom,#000 0%,#000 45%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 45%,transparent 100%);
}
.chat-screen .composer-wrap::before{
  top:0;bottom:0;
  mask-image:linear-gradient(to top,#000 0%,#000 45%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 45%,transparent 100%);
}
.chat-screen .phone-head{
  height:calc(18cqw + max(0px,env(safe-area-inset-top) - 12px));
  min-height:calc(18cqw + max(0px,env(safe-area-inset-top) - 12px));
}