<!-- Toast notification container -->
<div id="toast-container"
     class="fixed top-4 right-4 z-[9999] flex flex-col gap-2 max-h-[80vh] overflow-hidden"
     style="pointer-events: none;"
     x-data="{ toasts: [] }"
     @show-toast.window="toasts.push({ id: Date.now(), message: $event.detail.message, type: $event.detail.type || 'info' }); setTimeout(() => { toasts = toasts.filter(t => t.id !== toasts[0].id) }, 5000)">

    <template x-for="toast in toasts" :key="toast.id">
        <div class="alert shadow-lg max-w-sm animate-slide-in"
             style="pointer-events: auto;"
             :class="{
                 'alert-success': toast.type === 'success',
                 'alert-error': toast.type === 'error',
                 'alert-info': toast.type === 'info'
             }"
             x-show="true"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-x-8"
             x-transition:enter-end="opacity-100 translate-x-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-x-0"
             x-transition:leave-end="opacity-0 translate-x-8">
            <i class="fa-solid"
               :class="{
                   'fa-circle-check': toast.type === 'success',
                   'fa-circle-exclamation': toast.type === 'error',
                   'fa-circle-info': toast.type === 'info'
               }"></i>
            <span class="text-sm" x-text="toast.message"></span>
            <button class="btn btn-ghost btn-xs" @click="toasts = toasts.filter(t => t.id !== toast.id)">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
    </template>
</div>

<style>
@keyframes slide-in {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in {
    animation: slide-in 0.3s ease-out;
}
</style>
