<template>
  <div class="max-w-7xl mx-auto">
    <!-- Stats grid skeleton -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <div v-for="n in 4" :key="n" class="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
        <div class="h-3 w-24 bg-gray-200 rounded animate-pulse"></div>
        <div class="h-7 w-28 bg-gray-300 rounded mt-3 animate-pulse"></div>
        <div class="h-3 w-32 bg-gray-200 rounded mt-2 animate-pulse"></div>
      </div>
    </div>

    <!-- Chart + Recent skeleton -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Chart card skeleton -->
      <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-4 lg:col-span-2">
        <div class="h-5 w-56 bg-gray-200 rounded animate-pulse mb-3"></div>
        <div class="h-64 bg-gray-100 rounded animate-pulse"></div>
      </div>

      <!-- Recent conversations skeleton -->
      <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-4">
        <div class="h-5 w-48 bg-gray-200 rounded animate-pulse mb-3"></div>
        <div class="divide-y divide-gray-100">
          <div v-for="i in 6" :key="i" class="py-3 flex items-start justify-between">
            <div class="min-w-0 flex items-center gap-3">
              <div class="w-8 h-8 rounded-full bg-gray-200 animate-pulse"></div>
              <div class="space-y-2">
                <div class="h-3 w-40 bg-gray-200 rounded animate-pulse"></div>
                <div class="h-3 w-64 bg-gray-100 rounded animate-pulse"></div>
              </div>
            </div>
            <div class="h-5 w-12 bg-gray-200 rounded-full animate-pulse"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Pure presentational skeleton component
</script>

