<template>
  <div class="typing-indicator">
    <div class="typing-dots">
      <div class="dot dot-1"></div>
      <div class="dot dot-2"></div>
      <div class="dot dot-3"></div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.typing-indicator {
  display: flex;
  margin-top: 8px;
}

.typing-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #6b7280; /* gray-500 */
  animation: typing 1.4s infinite ease-in-out;
}

.dot-1 {
  animation-delay: 0s;
}

.dot-2 {
  animation-delay: 0.2s;
}

.dot-3 {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-2px);
    opacity: 1;
  }
}
</style>
