Update app.py

app.py

@@ -51,28 +51,33 @@ def chat_with_groq(user_message, history):
 def clear_chat():
     return [], ""
 
-/* -------- RESET ONLY CHAT AREA -------- */
-.chatbot * {
-  all: unset;
-}
-
-/* -------- RESTORE DEFAULT BLOCKS -------- */
-.chatbot .message,
-.chatbot .message * {
-  all: revert;
-}
-
-/* -------- COLOR SYSTEM -------- */
+# =====================================================
+# CSS (Light/Dark + Gradio 6 UI FIX)
+# =====================================================
+custom_css = """
+/* ---------- Color System ---------- */
 :root {
-  --bg: #0b0f19;
-  --surface: #111827;
+  --bg: #f9fafb;
+  --surface: #ffffff;
   --user: #2563eb;
-  --assistant: #1f2937;
-  --text: #f9fafb;
-  --muted: #9ca3af;
-  --border: #1f2937;
+  --assistant: #e5e7eb;
+  --text: #111827;
+  --muted: #6b7280;
+  --border: #d1d5db;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0b0f19;
+    --surface: #111827;
+    --assistant: #1f2937;
+    --text: #f9fafb;
+    --muted: #9ca3af;
+    --border: #1f2937;
+  }
 }
 
+/* ---------- Base Layout ---------- */
 body {
   background-color: var(--bg);
 }
@@ -82,10 +87,24 @@ body {
   margin: auto;
   padding: 24px;
   overflow-x: hidden !important;
-  font-family: system-ui, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* ---------- Typography ---------- */
+h1 {
+  color: var(--text);
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 6px;
 }
 
-/* -------- CHAT WINDOW -------- */
+.subtitle {
+  color: var(--muted);
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+/* ---------- Chatbot ---------- */
 .chatbot {
   background: var(--surface);
   border-radius: 16px;
@@ -96,32 +115,32 @@ body {
   overflow-y: auto;
 }
 
-/* -------- MESSAGES -------- */
-.chatbot .message {
-  display: block !important;
+/* ---------- Messages ---------- */
+.message {
   max-width: 72%;
   padding: 12px 14px;
   border-radius: 14px;
   margin-bottom: 10px;
   line-height: 1.6;
   font-size: 15px;
-  white-space: pre-wrap !important;
-  word-break: normal !important;
+  box-sizing: border-box;
 }
 
-.chatbot .message.user {
+.message.user {
   background: var(--user);
   color: white;
   margin-left: auto;
+  border-bottom-right-radius: 4px;
 }
 
-.chatbot .message.bot {
+.message.bot {
   background: var(--assistant);
   color: var(--text);
   margin-right: auto;
+  border-bottom-left-radius: 4px;
 }
 
-/* -------- INPUT -------- */
+/* ---------- Input ---------- */
 textarea {
   background: var(--surface) !important;
   color: var(--text) !important;
@@ -131,7 +150,11 @@ textarea {
   font-size: 15px;
 }
 
-/* -------- BUTTONS -------- */
+textarea::placeholder {
+  color: var(--muted);
+}
+
+/* ---------- Buttons ---------- */
 button {
   background: var(--user) !important;
   color: white !important;
@@ -140,7 +163,11 @@ button {
   font-weight: 600 !important;
 }
 
-/* -------- REMOVE FLOATING ICONS -------- */
+button:hover {
+  opacity: 0.9;
+}
+
+/* ---------- GRADIO 6 FIXES ---------- */
 .chatbot-toolbar,
 .chatbot-actions,
 button[aria-label="Copy"],
@@ -149,6 +176,11 @@ button[aria-label="Clear"] {
   display: none !important;
 }
 
+.chatbot .scroll-to-bottom {
+  right: 16px !important;
+  bottom: 80px !important;
+}
+"""
 
 # =====================================================
 # Gradio UI
@@ -179,4 +211,4 @@ with gr.Blocks(title="GROQ AI CHATBOT") as demo:
 # Launch (Gradio 6)
 # =====================================================
 if __name__ == "__main__":
-    demo.launch(css=custom_css)
+    demo.launch(css=custom_css)