@keyframes chat-popup-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes chat-popup-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
}

.chat-popup {
  box-shadow:
    0 10px 30px 0 rgba(0, 0, 0, 6%),
    0 4px 12px 0 rgba(0, 0, 0, 6%);
  opacity: 1;
  transform-origin: var(--transform-origin);
  will-change: transform, opacity;

  &[data-open] {
    animation: chat-popup-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  &[data-closed] {
    animation: chat-popup-out 120ms ease-in;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.96) translateY(-2px);
  }

  &[data-side="top"][data-starting-style],
  &[data-side="top"][data-ending-style] {
    transform: scale(0.96) translateY(4px);
  }

  &[data-side="bottom"][data-starting-style],
  &[data-side="bottom"][data-ending-style] {
    transform: scale(0.96) translateY(-4px);
  }

  &[data-side="left"][data-starting-style],
  &[data-side="left"][data-ending-style] {
    transform: scale(0.96) translateX(4px);
  }

  &[data-side="right"][data-starting-style],
  &[data-side="right"][data-ending-style] {
    transform: scale(0.96) translateX(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-popup {
    animation: none;
    will-change: auto;

    &[data-starting-style],
    &[data-ending-style] {
      transform: none;
    }
  }
}