@if (session('success') || session('error'))
  <div class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-end gap-2 px-4 sm:px-6" aria-live="polite" aria-atomic="true">

    @if (session('success'))
      <div x-data="{ show: true }" x-show="show" x-cloak
        x-init="setTimeout(() => show = false, 4000)"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-1"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        role="status"
        class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl border border-emerald-500/30 bg-white dark:bg-zinc-900 p-4 shadow-lg">
        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        </span>
        <p class="flex-1 text-sm text-zinc-800 dark:text-zinc-100">{{ session('success') }}</p>
        <button type="button" @click="show = false" aria-label="Schließen" class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
    @endif

    @if (session('error'))
      <div x-data="{ show: true }" x-show="show" x-cloak
        x-init="setTimeout(() => show = false, 4000)"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-1"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        role="alert"
        class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl border border-red-500/30 bg-white dark:bg-zinc-900 p-4 shadow-lg">
        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-500/10 text-red-600 dark:text-red-400">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>
        </span>
        <p class="flex-1 text-sm text-zinc-800 dark:text-zinc-100">{{ session('error') }}</p>
        <button type="button" @click="show = false" aria-label="Schließen" class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
    @endif

  </div>
@endif