fix: prevent toasts from blocking UI interaction

CRITICAL FIX: Toast notifications were blocking all UI interaction,
requiring a page refresh (F5) to click buttons again.

Root cause: The [data-sonner-toaster] container was capturing all
pointer events, preventing clicks on the page underneath.

Solution:
- Added CSS: pointer-events: none on [data-sonner-toaster]
- Added CSS: pointer-events: auto on [data-sonner-toast]
- This allows the toast itself to be interactive (buttons, close)
- But lets clicks pass through to the page underneath

After this fix, users can continue working immediately after
a toast appears without refreshing the page.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

keep-notes/app/globals.css

@@ -204,3 +204,16 @@
     font-family: 'Vazirmatn', sans-serif !important;
   }
 }
+
+/* ============================================
+   Toast Notifications - Fix UI Blocking Issue
+   ============================================ */
+/* Ensure the toaster container doesn't block clicks on the page underneath */
+[data-sonner-toaster] {
+  pointer-events: none !important;
+}
+
+/* But allow interaction with the toast itself (buttons, close, etc) */
+[data-sonner-toast] {
+  pointer-events: auto !important;
+}

keep-notes/components/ui/toast.tsx

@@ -14,6 +14,7 @@ export function Toaster() {
       richColors
       closeButton
       duration={3000}
+      className="toaster"
       toastOptions={{
         classNames: {
           toast: 'toast pointer-events-auto',