Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import gradio as gr
 import logging
 import os
@@ -204,7 +203,6 @@ with gr.Blocks(title="Company Documents Q&A Chatbot", theme=gr.themes.Soft()) as
                 lines=1,
                 interactive=True,
                 elem_id="user-question",
-                visible=True
             )
         with gr.Column(scale=1):
             submit_btn = gr.Button("Submit", variant="primary", elem_id="submit-btn")
@@ -223,4 +221,66 @@ with gr.Blocks(title="Company Documents Q&A Chatbot", theme=gr.themes.Soft()) as
 
     submit_btn.click(fn=process_question, inputs=[question, chat_history], outputs=[chat_history, conf_out, source_out, record_out])
 
+# --- CSS for VFX Styles ---
+    demo.css = """
+    /* Chatbot Container */
+    #chatbox {
+        background-color: #f9f9f9;
+        border-radius: 12px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        padding: 15px;
+        overflow-y: auto;
+    }
+
+    /* User and Bot message bubbles */
+    .gradio-chatbot-message-user {
+        background-color: #0d6efd;
+        color: white;
+        border-radius: 15px;
+        padding: 10px;
+        margin: 5px 0;
+        animation: fadeIn 0.5s ease-in-out;
+    }
+
+    .gradio-chatbot-message-bot {
+        background-color: #f1f1f1;
+        color: #333;
+        border-radius: 15px;
+        padding: 10px;
+        margin: 5px 0;
+        animation: fadeIn 0.5s ease-in-out;
+    }
+
+    /* Input Box */
+    #user-question {
+        background-color: #e9ecef;
+        border-radius: 8px;
+        padding: 10px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: background-color 0.3s ease;
+    }
+
+    #user-question:hover {
+        background-color: #f1f1f1;
+    }
+
+    /* Submit Button */
+    #submit-btn {
+        background-color: #007bff;
+        color: white;
+        border-radius: 8px;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    #submit-btn:hover {
+        transform: scale(1.1);
+    }
+
+    /* Animation for message appearance */
+    @keyframes fadeIn {
+        0% { opacity: 0; transform: translateY(20px); }
+        100% { opacity: 1; transform: translateY(0); }
+    }
+    """
+
 demo.launch(server_name="0.0.0.0", server_port=7860, share=True)