fix: toast hidden behind modals due to stacking context

[ssantss]

Problem

Toasts render inline in the DOM tree wherever <Toaster /> is placed.
When a modal or overlay with a higher z-index is open, toasts appear behind it
because of CSS stacking context limitations — no matter how high the z-index is.

Solution

• Use createPortal from react-dom to render toast viewports directly into document.body
• Add SSR guard (mounted state) to prevent document.body access during server-side rendering (Next.js, Remix, etc.)
• Bump viewport z-index from 50 to 9999 (industry standard for notifications)

This is the same approach used by sonner, react-hot-toast, and react-toastify.

Files changed

• src/toast.tsx — portal + SSR guard
• src/styles.css — z-index 50 → 9999

[varseb]

Having same issue when integrating with react-modal-sheet. Toaster shows behind the modals.