/* Only newly inserted outgoing rows opt into this movement. */
.chat-outgoing-enter{position:relative;will-change:height,margin-bottom}
.chat-outgoing-enter .message-bubble{transform-origin:center bottom;will-change:transform,opacity}

/* A sentence wipes from left to right. Existing text stays fully opaque. */
.chat-sentence-reveal{
  -webkit-mask-image:linear-gradient(90deg,#000 0 45%,transparent 60% 100%);
  mask-image:linear-gradient(90deg,#000 0 45%,transparent 60% 100%);
  -webkit-mask-size:250% 100%;
  mask-size:250% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation:chat-sentence-reveal 440ms cubic-bezier(.22,.8,.25,1) both;
}
@keyframes chat-sentence-reveal{
  from{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:.35}
  to{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .chat-outgoing-enter,.chat-outgoing-enter .message-bubble{will-change:auto}
  .chat-sentence-reveal{-webkit-mask-image:none;mask-image:none;animation:none}
}