{{-- Toaster: catches Livewire-dispatched `notify` browser events. Shared by the app
     and auth layouts so notifications surface on every page. --}}
<div
    x-data="{ toasts: [] }"
    x-on:notify.window="
        const msg = $event.detail?.message ?? $event.detail?.[0]?.message ?? @js(__('shell.toast_done'));
        const level = $event.detail?.level ?? $event.detail?.[0]?.level ?? 'success';
        const id = (window.crypto?.randomUUID?.() ?? String(Date.now() + Math.random()));
        toasts.push({ id, msg, level });
        setTimeout(() => { toasts = toasts.filter(t => t.id !== id) }, 4000);
    "
    class="pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col items-center gap-2 px-4 sm:items-end sm:px-6"
    aria-live="polite"
>
    <template x-for="t in toasts" :key="t.id">
        <div
            x-transition.opacity.duration.200ms
            class="pointer-events-auto flex items-center gap-2.5 rounded-md border border-line bg-raised px-4 py-2.5 shadow-pop"
        >
            <span class="h-1.5 w-1.5 shrink-0 rounded-full" :class="t.level === 'error' ? 'bg-offline' : 'bg-online'"></span>
            <span class="font-mono text-xs text-ink-2" x-text="t.msg"></span>
        </div>
    </template>
</div>