<template>
  <div class="flex items-start gap-3 justify-start">
    <ChatAvatar :src="aiAvatarSrc" />
    <div
      class="px-4 py-3 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-2xl rounded-tl-sm flex items-center gap-1"
    >
      <span class="dot" />
      <span class="dot" />
      <span class="dot" />
    </div>
  </div>
</template>

<script setup lang="ts">
import ChatAvatar from '../ChatAvatar.vue'
import aiAvatarSrc from '@assets/images/login/blue_logo.png'
</script>

<style scoped>
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #2b7fff;
  animation: wave 1.3s linear infinite;
}
.dot:nth-child(2) {
  animation-delay: -1.1s;
}
.dot:nth-child(3) {
  animation-delay: -0.9s;
}
@keyframes wave {
  0%,
  60%,
  100% {
    transform: initial;
  }
  30% {
    transform: translateY(-4px);
  }
}
</style>
