Refactor modal closing logic with CSS fix and JS fallback

app.py

@@ -714,12 +714,8 @@ with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
     # Add custom CSS styling via HTML
     gr.HTML("""
         <style>
-            /* Modal backdrop using body::after when modal exists */
-            body:has(#registration_modal) #registration_modal {
-                display: block !important;
-            }
-
-            body:has(#registration_modal)::after {
+            /* Modal backdrop using body::after when modal exists and is visible */
+            body:has(#registration_modal:not([style*="display: none"]))::after {
                 content: '';
                 position: fixed;
                 top: 0;
@@ -1100,7 +1096,17 @@ with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
     modal_submit_btn.click(
         fn=handle_modal_submit,
         inputs=[modal_name_input, modal_school_input, modal_year_input],
-        outputs=[registration_modal, student_name_display, student_name_state]
+        outputs=[registration_modal, student_name_display, student_name_state],
+        js="""
+        (name, school, year) => {
+            if (name && name.trim() !== "" && school && school.trim() !== "" && year) {
+                const modal = document.getElementById('registration_modal');
+                if (modal) {
+                    modal.style.display = 'none';
+                }
+            }
+        }
+        """
     )
     
     # Event handlers for Learning Mode