Add custom CSS styling for improved UI in chat interface

app.py

@@ -29,11 +29,89 @@ def query_api(message):
     except Exception as e:
         return f"Error: {e}\n\nFull response:\n{response.text}"
 
+custom_css = """
+    @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
+    
+    :root {
+        --color-primary: #030712;
+        --color-accent: #2563eb;
+        --color-muted: #9ca3af;
+        --font-main: "Roboto Condensed", sans-serif;
+    }
+    
+    body {
+        background-color: #030712;
+        color: white;
+        font-family: var(--font-main);
+    }
+    
+    .gradio-container {
+        font-family: var(--font-main);
+        background-color: #030712;
+        color: white;
+    }
+    
+    h1, h2, h3, h4, h5 {
+        font-weight: 600;
+        color: white;
+        font-family: var(--font-main);
+    }
+    
+    .contain {
+        background-color: #030712 !important;
+    }
+    
+    /* Input/Output boxes */
+    textarea, input {
+        background-color: #1f2937 !important;
+        color: white !important;
+        border: 1px solid #374151 !important;
+        border-radius: 0.5rem !important;
+        font-family: var(--font-main);
+    }
+    
+    textarea:focus, input:focus {
+        outline: none !important;
+        border-color: #2563eb !important;
+    }
+    
+    /* Buttons */
+    button {
+        background-color: #2563eb !important;
+        color: white !important;
+        font-weight: 600 !important;
+        border-radius: 0.5rem !important;
+        padding: 0.5rem 1rem !important;
+        font-family: var(--font-main);
+        transition: all 300ms !important;
+    }
+    
+    button:hover {
+        background-color: #1d4ed8 !important;
+    }
+    
+    /* Card-like containers */
+    .block {
+        background-color: #111827 !important;
+        border: 1px solid #1f2937 !important;
+        border-radius: 1rem !important;
+        padding: 1.5rem !important;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
+    }
+    
+    label {
+        color: white !important;
+        font-weight: 600 !important;
+        font-family: var(--font-main);
+    }
+"""
+
 demo = gr.Interface(
     fn=query_api,
-    inputs=gr.Textbox(label="Ask something"),
-    outputs="text",
-    title="Chat with AI Co-Pilot (Llama 3.1)",
+    inputs=gr.Textbox(label="Ask something", placeholder="Type your message here..."),
+    outputs=gr.Textbox(label="Response", lines=10),
+    title="Chat with AI Co-Pilot",
+    css=custom_css
 )
 
 if __name__ == "__main__":