Update app.py

app.py

@@ -58,47 +58,54 @@ Be friendly, professional, and supportive.
         return f"Error: {str(e)}"
 
 css = """
+* { box-sizing: border-box; }
 body {
-    background: #f0f4ff;
+    background: #fafafa;
     min-height: 100vh;
 }
 .gradio-container {
-    max-width: 800px !important;
-    margin: auto !important;
+    max-width: 780px !important;
+    margin: 0 auto !important;
     font-family: 'Segoe UI', sans-serif !important;
+    padding-top: 20px !important;
 }
-.chat-header {
-    text-align: center;
-    padding: 24px 20px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 16px;
-    margin-bottom: 20px;
-    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+.header-box {
+    background: white;
+    border: 1px solid #e8e8e8;
+    border-radius: 12px;
+    padding: 28px 32px;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 }
-.chat-header h1 {
-    color: white !important;
-    font-size: 2.2em !important;
-    font-weight: 800 !important;
-    margin: 0 0 8px 0 !important;
-    letter-spacing: 1px;
+.header-icon {
+    font-size: 40px;
 }
-.chat-header .creator {
-    color: rgba(255,255,255,0.95) !important;
-    font-size: 1em !important;
-    font-weight: 600 !important;
-    background: rgba(255,255,255,0.2);
-    padding: 4px 16px;
-    border-radius: 20px;
-    display: inline-block;
+.header-text h1 {
+    margin: 0;
+    font-size: 1.8em;
+    font-weight: 700;
+    color: #1a1a2e;
+    letter-spacing: -0.5px;
+}
+.header-text p {
+    margin: 4px 0 0;
+    font-size: 0.9em;
+    color: #888;
 }
 footer { display: none !important; }
 """
 
 with gr.Blocks(css=css) as demo:
     gr.HTML("""
-    <div class="chat-header">
-        <h1>📚 AI Study Buddy</h1>
-        <span class="creator">✨ Created by Areeba Iqbal</span>
+    <div class="header-box">
+        <div class="header-icon">📚</div>
+        <div class="header-text">
+            <h1>AI Study Buddy</h1>
+            <p>Created by Areeba Iqbal &nbsp;•&nbsp; Ask me anything</p>
+        </div>
     </div>
     """)