{{--
    Global notification host — the product's single toast surface. Every Livewire
    component fires a browser `toast` event ({type, message}); this one listener
    renders it, so "Settings saved." from the admin and "Landing published." from
    the Studio look and land identically: top-right, icon-led, themed for light
    and dark. Shared by every authenticated shell (admin, client, Studio) so the
    style can never drift between screens. Behaviour lives in
    Alpine.data('rfToasts') (resources/js/app.js).
--}}
<div x-data="rfToasts()" @toast.window="add($event.detail)"
     class="flex flex-col" role="status" aria-live="polite"
     style="position:fixed;top:72px;right:16px;z-index:90;gap:10px;width:360px;max-width:calc(100vw - 32px);pointer-events:none;">
    <template x-for="t in toasts" :key="t.id">
        <div x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-x-4"
             x-transition:enter-end="opacity-100 translate-x-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-x-0"
             x-transition:leave-end="opacity-0 translate-x-4"
             class="flex items-start gap-3 rounded-xl p-3"
             {{--
                 Belt-and-suspenders auto-dismiss for danger toasts, set directly
                 here (not only in Alpine.data('rfToasts').add(), resources/js/
                 app.js): app.js ships through the Vite build, and this project's
                 rule is "no npm build" for a targeted UX fix — a blade-only
                 change takes effect immediately (view:clear), a JS-only one would
                 sit inert in the compiled bundle until someone runs `npm run
                 build`. add() already carries the fixed 6s timer for every type
                 for whenever that eventual rebuild happens; this x-init is what
                 makes danger toasts ALSO auto-hide on production today.
             --}}
             x-init="if (t.type === 'danger') { setTimeout(() => remove(t.id), 6000); }"
             {{--
                 Every style lives in THIS ONE :style binding — none of it is a
                 separate static style="" on the same element. Alpine's reactive
                 :style fully REPLACES the style attribute on each re-evaluation
                 (e.g. whenever a sibling toast is pushed/removed and this x-for
                 block re-renders); mixing it with a static style="" here used to
                 silently wipe `pointer-events:auto` off every existing toast the
                 moment a second one appeared — the × button (and the toast
                 itself) went dead, un-clickable, with no visible symptom.
             --}}
             :style="`pointer-events:auto;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-3);border-left:3px solid ${color(t.type)};`">
            <span x-html="icon(t.type)" aria-hidden="true"
                  :style="`flex:none;display:inline-flex;margin-top:1px;color:${color(t.type)};`"></span>
            <span class="text-sm" x-text="t.message" style="color:var(--color-text);flex:1;line-height:1.4;"></span>
            <button type="button" @click="remove(t.id)" aria-label="{{ __('Dismiss') }}"
                    style="flex:none;color:var(--color-text-subtle);font-size:18px;line-height:1;margin:-2px -2px 0 2px;">&times;</button>
        </div>
    </template>
</div>