{{-- Bottom-right AI chatbot / live chat widget. --}}
<div x-data="chatWidget()" class="fixed bottom-5 right-5 z-40">
    <div x-show="open" x-cloak class="bg-white rounded-2xl shadow-xl w-80 h-96 flex flex-col mb-3 overflow-hidden border">
        <div class="bg-brand text-white p-3 font-semibold flex justify-between items-center">
            <span>Chat with us</span>
            <button @click="open = false" class="text-white/80">&times;</button>
        </div>
        <div class="flex-1 overflow-y-auto p-3 space-y-2 text-sm" x-ref="messages">
            <template x-for="m in messages" :key="m.id">
                <div :class="m.sender === 'customer' ? 'text-right' : 'text-left'">
                    <span class="inline-block px-3 py-2 rounded-xl"
                          :class="m.sender === 'customer' ? 'bg-brand text-white' : 'bg-gray-100'"
                          x-text="m.message"></span>
                </div>
            </template>
        </div>
        <form @submit.prevent="send" class="p-2 border-t flex gap-2">
            <input x-model="draft" placeholder="Type a message..." class="flex-1 border rounded-full px-3 py-2 text-sm">
            <button class="bg-brand text-white rounded-full px-4 text-sm">Send</button>
        </form>
    </div>
    <button @click="toggle" class="w-14 h-14 rounded-full bg-brand text-white shadow-lg flex items-center justify-center text-2xl">💬</button>
</div>