Update app.py

app.py

@@ -305,20 +305,24 @@ demo_css = """
     font-size: 13px !important;
 }
 
+body {
+    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 45%, #f8fafc 100%);
+}
+.gradio-container {
+    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
 .main-container {
     max-width: 1250px;
     margin: auto;
 }
-
 .header-card {
-    background: #020E28;
+    background: rgba(255, 255, 255, 0.95);
     border-radius: 24px;
     padding: 26px;
     box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
     border: 1px solid #e5e7eb;
     margin-bottom: 20px;
 }
-
 .sidebar-card {
     background: rgba(255, 255, 255, 0.96);
     border-radius: 24px;
@@ -327,7 +331,41 @@ demo_css = """
     border: 1px solid #e5e7eb;
     height: 100%;
 }
-
+.chat-card {
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: 24px;
+    padding: 22px;
+    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
+    border: 1px solid #e5e7eb;
+}
+.logo-img {
+    max-width: 175px;
+    margin-bottom: 8px;
+}
+.title-text {
+    font-size: 32px;
+    font-weight: 850;
+    color: #111827;
+    margin-bottom: 8px;
+    letter-spacing: -0.03em;
+}
+.subtitle-text {
+    font-size: 16px;
+    color: #4b5563;
+    line-height: 1.65;
+    max-width: 850px;
+}
+.badge {
+    display: inline-block;
+    background: #eef2ff;
+    color: #3730a3;
+    padding: 7px 13px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 650;
+    margin-right: 7px;
+    margin-bottom: 8px;
+}
 .status-box {
     background: #f8fafc;
     border: 1px solid #e5e7eb;
@@ -337,17 +375,31 @@ demo_css = """
     color: #374151;
     line-height: 1.6;
 }
-
 .small-note {
     font-size: 13px;
     color: #6b7280;
     line-height: 1.55;
 }
-
+.footer-note {
+    font-size: 13px;
+    color: #6b7280;
+    text-align: center;
+    margin-top: 18px;
+}
+#chatbot {
+    min-height: 540px;
+    border-radius: 18px;
+    border: 1px solid #e5e7eb;
+}
 #question_box textarea {
     border-radius: 16px !important;
 }
-
+.example-button {
+    margin-bottom: 8px !important;
+    border-radius: 14px !important;
+    white-space: normal !important;
+    text-align: left !important;
+}
 .primary-action {
     border-radius: 14px !important;
 }
@@ -357,8 +409,7 @@ demo_css = """
 """
 
 # Create the Gradio interface using `gr.Blocks` for a custom layout.
-with gr.Blocks(
-    title="# 🤖 Dox the Data Professional's Advisor 🤖"#,
+with gr.Blocks(title="🤖 Dox the Data Professional's Guide 🤖"#,
     #theme=theme,
     #css=demo_css,
     #fill_width=True
@@ -375,6 +426,7 @@ with gr.Blocks(
                     <img src="{DOX_LOGO}" class="logo-img" alt="DOX Logo">
                     """
                 )
+            
             with gr.Column(scale=5):
                 gr.HTML(
                     """
@@ -401,12 +453,12 @@ with gr.Blocks(
                     """
                     ### 🧠 Dox is an expert in the following topics: 
                     
-                    -1️⃣ **Hugging Face** 
-                    -2️⃣ **AI Agents**
-                    -3️⃣ **SQL with AI**  
-                    -4️⃣ **Azure CLI**
-                    -5️⃣ **Power BI** 
-                    -6️⃣ **Python**
+                    - 1️⃣ **Hugging Face**
+                    - 2️⃣ **AI Agents**
+                    - 3️⃣ **SQL with AI** 
+                    - 4️⃣ **Azure CLI**
+                    - 5️⃣ **Power BI** 
+                    - 6️⃣ **Python**
                     """
                 )