fix: keep voice_panel mounted (CSS-collapsed) so the audio actually plays

visible=False can unmount the component in Gradio so the <audio> never reaches
the DOM and never plays. Mount it and collapse to zero size via CSS instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -530,7 +530,10 @@ with gr.Blocks(title="Hollow") as demo:
 
         with gr.Column(scale=1):
             treasure_panel = gr.HTML(value=render_treasure([]))
-            voice_panel = gr.HTML(visible=False)   # carries Hollow's voice <audio>
+            # carries Hollow's voice <audio>; kept MOUNTED (not visible=False,
+            # which can unmount it so the audio never plays) and collapsed to
+            # zero size via CSS so it has no visual footprint
+            voice_panel = gr.HTML(elem_classes="voice-channel")
 
     # show_progress="hidden" kills Gradio's per-component "processing" overlay;
     # we show our own "..." pending bubble instead (set in _start_turn)

styles.css

@@ -845,3 +845,14 @@ footer { display: none !important; }
   color: #c8b0e0 !important;
   background: rgba(40, 26, 56, 0.8) !important;
 }
+
+/* the voice channel: mounted in the DOM (so the <audio> plays) but collapsed
+   to nothing — audio keeps playing in a zero-size element, no visual footprint */
+.voice-channel {
+  height: 0 !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+  overflow: hidden !important;
+}