Update app.py

app.py

@@ -122,8 +122,64 @@ def generate_feedback(user_profile):
         feedback.append(fb)
     return "\n".join(feedback)
 
-# creating the visual elements
-with gr.Blocks() as demo:
+
+# Entire app with CSS styling applied
+with gr.Blocks(css="""
+    body {
+        background-color: #f2f4f8;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    h1, h2, h3 {
+        text-align: center;
+        color: #2c3e50;
+        margin-bottom: 10px;
+    }
+    img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 15px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    button {
+        font-size: 16px;
+        padding: 12px 24px;
+        background-color: #3B82F6;
+        color: white;
+        border: none;
+        border-radius: 10px;
+        transition: background-color 0.3s ease;
+    }
+    button:hover {
+        background-color: #2563EB;
+    }
+    .gr-chatbot {
+        background-color: #ffffff;
+        border-radius: 15px;
+        padding: 20px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        max-height: 600px;
+        overflow-y: auto;
+    }
+    textarea {
+        font-size: 15px;
+        border-radius: 10px;
+        padding: 10px;
+        border: 1px solid #ddd;
+    }
+    input[type="text"] {
+        font-size: 15px;
+        border-radius: 10px;
+        padding: 10px;
+        border: 1px solid #ddd;
+    }
+    .gr-textbox {
+        background-color: #f9fafb;
+        border-radius: 10px;
+        padding: 10px;
+    }
+""") as demo:
+    
     user_profile = gr.State({"interview_type": "", "field": "", "interview_in_progress": False})
     chat_history = gr.State([])