Fix css injection

app.py

@@ -77,39 +77,42 @@ def chat_fn(message, history, persona_name):
 # Gradio UI
 # ==============================
 
-custom_css = """
-.gradio-container {
-    background-color: #F5FAFF !important;
-}
-button.primary {
-    background-color: #1A73E8 !important;
-    border-color: #1A73E8 !important;
-}
-button.primary:hover {
-    background-color: #1557B0 !important;
-}
-.message.user {
-    background-color: #EDEDED !important;
-}
-.message.bot {
-    background-color: #E8F1FF !important;
-}
-h1 {
-    color: #1A73E8 !important;
-    text-align: center;
-}
-.gr-markdown {
-    text-align: center;
-}
-.gr-radio {
-    background-color: white;
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-"""
-
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks() as demo:
+
+    # Inject custom CSS
+    gr.HTML("""
+    <style>
+        .gradio-container {
+            background-color: #F5FAFF !important;
+        }
+        button.primary {
+            background-color: #1A73E8 !important;
+            border-color: #1A73E8 !important;
+        }
+        button.primary:hover {
+            background-color: #1557B0 !important;
+        }
+        .message.user {
+            background-color: #EDEDED !important;
+        }
+        .message.bot {
+            background-color: #E8F1FF !important;
+        }
+        h1 {
+            color: #1A73E8 !important;
+            text-align: center;
+        }
+        .gr-markdown {
+            text-align: center;
+        }
+        .gr-radio {
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+    </style>
+    """)
 
     gr.Markdown(
         """