<template>
  <div class="loading-card animate-pulse">
    <div class="flex items-start gap-4">
      <div class="w-14 h-14 bg-base-300 rounded-xl"></div>
      <div class="flex-1 space-y-3">
        <div class="h-4 bg-base-300 rounded w-3/4"></div>
        <div class="h-8 bg-base-300 rounded w-1/2"></div>
        <div class="h-3 bg-base-300 rounded w-2/3"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// No props needed - this is a pure skeleton loader
</script>

<style scoped>
.loading-card {
  @apply p-5 bg-neutral rounded-xl shadow-soft;
}
</style>
