<template>
  <div
    class="tw:flex tw:items-center tw:justify-center tw:p-6 tw:min-h-[120px]"
  >
    <div class="tw:flex tw:flex-col tw:items-center tw:gap-3">
      <!-- Subtle pulsing dot animation -->
      <div class="tw:flex tw:gap-1">
        <div
          v-for="i in 3"
          :key="i"
          class="tw:w-2 tw:h-2 tw:bg-gray-400 tw:rounded-full tw:animate-pulse"
          :style="{ 'animation-delay': `${(i - 1) * 0.2}s` }"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes pulse {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

.tw\\:animate-pulse {
  animation: pulse 1.4s ease-in-out infinite;
}
</style>
