<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
    @foreach($toasts as $t)
        <div wire:key="{{ $t['id'] }}"
             x-data="{ show: true }"
             x-init="setTimeout(() => { show = false; setTimeout(() => $wire.dismiss('{{ $t['id'] }}'), 300); }, {{ $t['duration'] }})"
             x-show="show"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 translate-y-2"
             class="pointer-events-auto min-w-64 max-w-sm px-4 py-3 rounded-xl border shadow-lg backdrop-blur-sm
                    @if($t['type']==='success') bg-green/10 border-green/30 text-green
                    @elseif($t['type']==='error') bg-red/10 border-red/30 text-red
                    @elseif($t['type']==='warning') bg-amber/10 border-amber/30 text-amber
                    @else bg-blue/10 border-blue/30 text-blue @endif"
             x-cloak>
            <div class="flex items-center gap-3">
                {{-- Icon --}}
                <span class="flex-shrink-0 w-4 h-4">
                    @if($t['type']==='success')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l3.5 3.5L13 5"/></svg>
                    @elseif($t['type']==='error')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5v3m0 3h.01M4.93 4.93l6.14 6.14"/></svg>
                    @elseif($t['type']==='warning')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 3l5.5 10H2.5L8 3zm0 4v2.5m0 1.5h.01"/></svg>
                    @else
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><circle cx="8" cy="8" r="5"/><path stroke-linecap="round" d="M8 6v2.5m0 1.5h.01"/></svg>
                    @endif
                </span>
                <span class="flex-1 text-sm font-medium">{{ $t['message'] }}</span>
                <button wire:click="dismiss('{{ $t['id'] }}')"
                        class="flex-shrink-0 opacity-50 hover:opacity-100 transition-opacity text-lg leading-none"
                        aria-label="Dismiss"><x-heroicon-o-x-mark class="w-3.5 h-3.5" /></button>
            </div>
        </div>
    @endforeach
</div>
