Fix invalid rule application feedback

Display a modal when an invalid rule is applied to premises, and return the rule to the "Drop rule" box.

src/components/RulesOfInferencePlayground.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { useToast } from "@/components/ui/use-toast";
+import { useToast } from "@/hooks/use-toast";
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 
 // Rules of Inference Playground (Example 1: Resolution)
 // Layout: 3 columns (Premises | Notepad lines with rule margin | Rules)
@@ -127,6 +128,7 @@ export default function RulesOfInferencePlayground() {
   const [steps, setSteps] = useState<Step[]>([]);
   const [activePremises, setActivePremises] = useState<string[]>([]);
   const [activeRule, setActiveRule] = useState<string | undefined>(undefined);
+  const [showInvalidRuleModal, setShowInvalidRuleModal] = useState(false);
 
   useEffect(() => {
     // Reset when example changes
@@ -203,11 +205,8 @@ export default function RulesOfInferencePlayground() {
     // Validate again defensively
     const valid = deriveCandidates(activeRule, activePremises).includes(result);
     if (!valid) {
-      toast({
-        title: "Rule not applicable",
-        description: `The rule "${activeRule}" cannot be applied to the selected premises. Try a different rule or different premises.`,
-        variant: "destructive",
-      });
+      setShowInvalidRuleModal(true);
+      setActiveRule(undefined); // Clear the rule from the drop zone
       return;
     }
 
@@ -395,6 +394,23 @@ export default function RulesOfInferencePlayground() {
           </div>
         </div>
       </section>
+
+      {/* Invalid Rule Modal */}
+      <AlertDialog open={showInvalidRuleModal} onOpenChange={setShowInvalidRuleModal}>
+        <AlertDialogContent className="bg-background border-border">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Rule Not Applicable</AlertDialogTitle>
+            <AlertDialogDescription>
+              The selected rule cannot be applied to the chosen premises. Please try a different rule or select different premises.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => setShowInvalidRuleModal(false)}>
+              Try Again
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }