Update app.py

app.py

@@ -38,21 +38,39 @@ dark_css = """
     color: white;              /* Light text color */
 }
 #input-container {
+    display: flex;
+    align-items: center;
     background-color: #2e2e2e; /* Dark input container */
     border: 1px solid #444;    /* Dark border */
     border-radius: 20px;       /* Rounded corners */
+    padding: 5px;
 }
 #message-input {
+    flex: 1;
     background-color: #3e3e3e; /* Dark input field */
     color: white;              /* Light text color */
+    border: none;
+    border-radius: 15px;
+    padding: 8px 12px;
+}
+#message-input:focus {
+    outline: none;
 }
 #send-button {
-    color: #007BFF;            /* Button text color */
+    background-color: #007BFF; /* Button background */
+    color: white;              /* Button text color */
     border: none;              /* No border */
-    background: none;         /* No background */
+    border-radius: 50%;        /* Round button */
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;           /* Pointer cursor */
-    padding: 0;                /* No padding */
-    margin-left: -5px;         /* Overlap with input */
+    margin-left: 10px;
+}
+#send-button:hover {
+    background-color: #0056b3; /* Hover state */
 }
 """
 
@@ -62,7 +80,7 @@ def toggle_dark_mode(is_dark):
 
 # Create Gradio interface
 def create_interface():
-    with gr.Blocks() as demo:
+    with gr.Blocks(css=dark_css) as demo:
         gr.Markdown("## 💬 Chatbot")
 
         # Chat display area
@@ -90,4 +108,4 @@ def create_interface():
 # Launch the interface
 if __name__ == "__main__":
     interface = create_interface()
-    interface.launch()
+    interface.launch()