<!-- Chat Container -->
<div class="flex flex-col gap-y-3">
    <!-- Message -->
    <div class="flex flex-col items-start gap-y-2.5 w-full max-w-sm">
        <span class="inline-block size-10 rounded-full overflow-hidden">
            <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
        </span>

        <div class="relative bg-muted rounded-2xl p-3.5">
            <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="absolute start-9 -top-3.5 w-5 text-muted rtl:-scale-x-90">
                <path
                    d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                    fill="currentColor" />
            </svg>
            <p class="font-medium text-xs text-muted-foreground">
                درود 👋، خوبی نیکی؟
            </p>
        </div>

        <div class="flex items-center gap-x-2">
            <span class="font-medium text-2xs text-muted-foreground">17:08 بعداظهر</span>
            <span class="inline-block size-1 bg-border rounded-full"></span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 text-primary">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
            </svg>
        </div>
    </div><!-- end Message -->

    <!-- Message -->
    <div class="flex flex-col items-end gap-y-2.5 w-full max-w-sm ms-auto">
        <span class="inline-block size-10 rounded-full overflow-hidden ms-auto">
            <img src="/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
        </span>

        <div class="relative bg-muted rounded-2xl p-3.5">
            <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="absolute end-9 -top-3.5 w-5 text-muted ltr:-scale-x-90">
                <path
                    d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                    fill="currentColor" />
            </svg>
            <p class="font-medium text-xs text-muted-foreground">
                درود ساینا <br /> مرسی خوبم، تو چطوری؟
            </p>
        </div>

        <div class="flex flex-row-reverse items-center gap-x-2">
            <span class="font-medium text-2xs text-muted-foreground">17:22 بعداظهر</span>
            <span class="inline-block size-1 bg-border rounded-full"></span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 text-primary">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
            </svg>
        </div>
    </div><!-- end Message -->

    <!-- Message -->
    <div class="flex flex-col items-start gap-y-2.5 w-full max-w-sm">
        <span class="inline-block size-10 rounded-full overflow-hidden">
            <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
        </span>

        <div class="relative bg-muted rounded-2xl p-3.5">
            <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="absolute start-9 -top-3.5 w-5 text-muted rtl:-scale-x-90">
                <path
                    d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                    fill="currentColor" />
            </svg>
            <p class="font-medium text-xs text-muted-foreground">
                منم خوبم، فقط خیلی درگیر پروژه‌ام این چند روز.
            </p>
        </div>

        <div class="flex items-center gap-x-2">
            <span class="font-medium text-2xs text-muted-foreground">17:25 بعداظهر</span>
            <span class="inline-block size-1 bg-border rounded-full"></span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 text-muted-foreground">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m5 12l5 5L20 7" />
            </svg>
        </div>
    </div><!-- end Message -->
</div><!-- end Chat Container -->