/* NOVO: Animações para as mensagens */

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-incoming {
  animation: slideInFromLeft 0.4s ease-out forwards;
}

.animate-outgoing {
  animation: slideInFromRight 0.4s ease-out forwards;
}

[effect=ripple], [effect=ripple-light] {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(208,208,208,0.81);
}

[effect=ripple]:before, [effect=ripple-light]:before {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transform-origin: center;
  top: calc(var(--y) * 1px);
  left: calc(var(--x) * 1px);
  width: calc(var(--d) * 1px);
  height: calc(var(--d) * 1px);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
  transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
}

[effect=ripple]:before {
  background: var(--ripple-background, #b5b5b5);
}

@keyframes fadeUpIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}