fix: pause playback on Ask click and tab switch (Explore/Clone)

- Add cancels=[play_event] to ask_btn.click
- Add explore_tab.select and clone_tab.select handlers to cancel TTS

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app.py

@@ -947,7 +947,8 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
     ask_btn.click(
         enter_asking_state,
         inputs=[],
-        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio]
+        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio],
+        cancels=[play_event]
     )
 
     # 9. Submit question
@@ -1074,5 +1075,28 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
         outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio, question_text, question_audio]
     )
 
+    # 11. Pause playback when switching to other tabs
+    def pause_on_tab_switch():
+        status_html = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #f59e0b; font-family: monospace;">PAUSED</span>
+            </div>
+        """
+        return status_html, gr.Button(visible=True), gr.Button(visible=False)
+
+    explore_tab.select(
+        pause_on_tab_switch,
+        inputs=[],
+        outputs=[player_status_bar, play_btn, pause_btn],
+        cancels=[play_event]
+    )
+    clone_tab.select(
+        pause_on_tab_switch,
+        inputs=[],
+        outputs=[player_status_bar, play_btn, pause_btn],
+        cancels=[play_event]
+    )
+
 if __name__ == "__main__":
     demo.queue().launch(allowed_paths=[str(Path(__file__).parent / "assets")])