Refine voice bubble styles in demo interface for improved aesthetics and interaction, including hover and active effects, while hiding unnecessary microphone UI elements.

app.py

@@ -582,22 +582,36 @@ def create_demo():
     with gr.Blocks(
         theme=gr.themes.Soft(),
         css='''
-        /* Voice bubble styles */
+        /* Voice bubble styles - clean and centered */
         #voice-bubble { 
-            width: 240px; height: 240px; border-radius: 9999px; margin: 24px auto; 
+            width: 240px; height: 240px; border-radius: 9999px; margin: 40px auto; 
             display: flex; align-items: center; justify-content: center;
-            background: radial-gradient(100% 100% at 50% 0%, #6ee7b7 0%, #34d399 100%);
-            box-shadow: 0 10px 20px rgba(16,185,129,0.35), 0 6px 6px rgba(16,185,129,0.30);
-            transition: transform 150ms ease, box-shadow 150ms ease;
+            background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
+            box-shadow: 0 20px 40px rgba(16,185,129,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;
+            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+            cursor: pointer;
+            position: relative;
+        }
+        #voice-bubble:hover { 
+            transform: translateY(-2px) scale(1.02); 
+            box-shadow: 0 25px 50px rgba(16,185,129,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset;
+        }
+        #voice-bubble:active { transform: translateY(0px) scale(0.98); }
+        #voice-bubble.listening { 
+            animation: bubble-pulse 1.5s ease-in-out infinite; 
+            background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
+            box-shadow: 0 20px 40px rgba(239,68,68,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
         }
-        #voice-bubble:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(16,185,129,0.40), 0 10px 10px rgba(16,185,129,0.35); }
-        #voice-bubble.listening { animation: bubble-pulse 1.2s ease-in-out infinite; background: radial-gradient(100% 100% at 50% 0%, #fb7185 0%, #ef4444 100%); }
-        #voice-bubble button { background: transparent; border: none; font-size: 48px; color: #ffffff; box-shadow: none; }
         @keyframes bubble-pulse {
-            0% { transform: scale(1.0); box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
-            70% { transform: scale(1.06); box-shadow: 0 0 0 20px rgba(239,68,68,0.0); }
-            100% { transform: scale(1.0); box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
+            0%, 100% { transform: scale(1.0); box-shadow: 0 20px 40px rgba(239,68,68,0.4), 0 0 0 0 rgba(239,68,68,0.5); }
+            50% { transform: scale(1.05); box-shadow: 0 25px 50px rgba(239,68,68,0.5), 0 0 0 15px rgba(239,68,68,0.0); }
         }
+        /* Hide all microphone UI chrome except the bubble itself */
+        #voice-bubble .mic-dropdown, 
+        #voice-bubble select,
+        #voice-bubble .source-selection,
+        #voice-bubble button:not(.record-button) { display: none !important; }
+        #voice-bubble .controls { display: none !important; }
         /* Hide TTS player UI but keep it in DOM for autoplay */
         #tts-player { width: 0 !important; height: 0 !important; opacity: 0 !important; position: absolute; pointer-events: none; }
         '''