<script lang="ts">
  // Single global toast renderer. Mounted once in +layout.svelte; pages call
  // pushToast() from $lib/stores/toast.svelte. The {#key} re-mount on id
  // change is what makes screen readers re-announce a replacement toast.
  import { toast } from '$lib/stores/toast.svelte';
</script>

{#if toast.value}
  {#key toast.value.id}
    <div
      role="status"
      aria-live="polite"
      data-testid="toast"
      class="fixed bottom-4 right-4 z-50 max-w-sm rounded-md border bg-surface px-4 py-3 text-sm shadow-lg"
      class:border-border={toast.value.variant === 'info'}
      class:text-text-primary={toast.value.variant === 'info'}
      class:border-error={toast.value.variant === 'error'}
      class:text-error={toast.value.variant === 'error'}
    >
      {toast.value.message}
    </div>
  {/key}
{/if}
