Skeleton loader for chat messages

<script setup lang="ts">
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
</script>

<template>
  <Card class="w-full max-w-xs">
    <CardContent>
      <!-- Incoming message -->
      <div class="flex items-start gap-2.5">
        <Skeleton class="size-8 shrink-0 rounded-full" />
        <div class="flex flex-col gap-1">
          <Skeleton class="h-3 w-16" />
          <Skeleton class="h-16 w-48 rounded-lg rounded-tl-none" />
          <Skeleton class="h-2.5 w-12" />
        </div>
      </div>

      <!-- Outgoing message -->
      <div class="flex items-start justify-end gap-2.5">
        <div class="flex flex-col items-end gap-1">
          <Skeleton class="h-10 w-40 rounded-lg rounded-tr-none" />
          <Skeleton class="h-2.5 w-12" />
        </div>
      </div>

      <!-- Incoming message -->
      <div class="flex items-start gap-2.5">
        <Skeleton class="size-8 shrink-0 rounded-full" />
        <div class="flex flex-col gap-1">
          <Skeleton class="h-3 w-20" />
          <Skeleton class="h-24 w-56 rounded-lg rounded-tl-none" />
          <Skeleton class="h-2.5 w-12" />
        </div>
      </div>

      <!-- Input area -->
      <div class="flex items-center gap-2 pt-2">
        <Skeleton class="h-9 flex-1 rounded-md" />
        <Skeleton class="h-9 w-9 rounded-md" />
      </div>
    </CardContent>
  </Card>
</template>