/* ========================= */
/* TYPING */
/* ========================= */

.typing {

  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 70px;

}


/* ========================= */
/* DOT */
/* ========================= */

.typing span {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: white;

  animation:
    bounce 1.2s infinite;

}


.typing span:nth-child(2) {

  animation-delay:
    0.2s;

}


.typing span:nth-child(3) {

  animation-delay:
    0.4s;

}


/* ========================= */
/* ANIMATION */
/* ========================= */

@keyframes bounce {

  0% {

    transform:
      translateY(0);

    opacity: 0.3;

  }

  50% {

    transform:
      translateY(-6px);

    opacity: 1;

  }

  100% {

    transform:
      translateY(0);

    opacity: 0.3;

  }

}
/* ========================= */
/* STREAMING EFFECT */
/* ========================= */

.message-content {

  animation:
    fadeIn 0.3s ease;

}


@keyframes fadeIn {

  from {

    opacity: 0;

    transform:
      translateY(10px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}