.direct-message-bubble.message-live-arrival {
  animation: message-live-arrival-theirs 0.42s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  transform-origin: bottom left;
}

.direct-message-bubble.mine.message-live-arrival {
  animation-name: message-live-arrival-mine;
  transform-origin: bottom right;
}

@keyframes message-live-arrival-theirs {
  from {
    opacity: 0;
    transform: translate3d(-10px, 5px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes message-live-arrival-mine {
  from {
    opacity: 0;
    transform: translate3d(10px, 5px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.message-live-typing {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.message-live-typing:not(.hidden) {
  animation: message-live-typing-enter 0.2s ease-out both;
}

@keyframes message-live-typing-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .direct-message-bubble.message-live-arrival,
  .message-live-typing:not(.hidden) {
    animation: none;
  }
}