Update app.py

app.py

@@ -52,29 +52,25 @@ def clear_chat():
     return [], ""
 
 # =====================================================
-# CSS (Light/Dark + Gradio 6 UI FIX)
+# CSS (FINAL FIXED VERSION)
 # =====================================================
 custom_css = """
+/* ---------- GLOBAL BOX FIX ---------- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box !important;
+}
+
 /* ---------- Color System ---------- */
 :root {
-  --bg: #f9fafb;
-  --surface: #ffffff;
+  --bg: #0b0f19;
+  --surface: #111827;
   --user: #2563eb;
-  --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;
-  }
+  --assistant: #1f2937;
+  --text: #f9fafb;
+  --muted: #9ca3af;
+  --border: #1f2937;
 }
 
 /* ---------- Base Layout ---------- */
@@ -90,20 +86,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-/* ---------- Typography ---------- */
-h1 {
-  color: var(--text);
-  text-align: center;
-  font-size: 2rem;
-  margin-bottom: 6px;
-}
-
-.subtitle {
-  color: var(--muted);
-  text-align: center;
-  margin-bottom: 20px;
-}
-
 /* ---------- Chatbot ---------- */
 .chatbot {
   background: var(--surface);
@@ -121,7 +103,7 @@ h1 {
   padding: 15px 20px;
   border-radius: 12px;
   margin-bottom: 12px;
-  line-height: 1.3;
+  line-height: 1.4;
   font-size: 15px;
 
   white-space: normal !important;
@@ -129,39 +111,35 @@ h1 {
   overflow-wrap: break-word !important;
 
   box-sizing: border-box !important;
+  background-clip: padding-box !important;
 }
 
-/* 🔧 REMOVE BLACK GHOST BLOCKS */
-.message::before,
-.message::after,
-.chatbot .message div::before,
-.chatbot .message div::after {
-  display: none !important;
-  content: none !important;
-}
-
-.message {
-  overflow: visible !important;
-  background-clip: padding-box !important;
+/* Remove ghost masks */
+.chatbot .message,
+.chatbot .message * {
+  mask: none !important;
+  -webkit-mask: none !important;
+  background-image: none !important;
 }
 
-.chatbot * {
-  box-shadow: none !important;
-  filter: none !important;
+.chatbot .message::before,
+.chatbot .message::after,
+.chatbot .message *::before,
+.chatbot .message *::after {
+  display: none !important;
+  content: none !important;
 }
 
 .message.user {
   background: var(--user);
   color: white;
   margin-left: 0 !important;
-  border-bottom-right-radius: 4px;
 }
 
 .message.bot {
   background: var(--assistant);
   color: var(--text);
-  margin-right: 0 !important;
-  border-bottom-left-radius: 4px;
+  margin-right: auto;
 }
 
 /* ---------- Input ---------- */
@@ -195,7 +173,7 @@ button:hover {
   opacity: 0.9;
 }
 
-/* ---------- GRADIO 6 FIXES ---------- */
+/* Hide gradio default tools */
 .chatbot-toolbar,
 .chatbot-actions,
 button[aria-label="Copy"],
@@ -203,11 +181,6 @@ button[aria-label="Share"],
 button[aria-label="Clear"] {
   display: none !important;
 }
-
-.chatbot .scroll-to-bottom {
-  right: 16px !important;
-  bottom: 80px !important;
-}
 """
 
 # =====================================================
@@ -215,19 +188,13 @@ button[aria-label="Clear"] {
 # =====================================================
 with gr.Blocks(title="GROQ CHATBOT") as demo:
     gr.Markdown("# 🤖 GROQ CHATBOT")
-    gr.Markdown(
-        "<div class='subtitle'>Fast, reliable AI powered by Groq & LLaMA-3.3</div>"
-    )
+    gr.Markdown("<div class='subtitle'>Fast, reliable AI powered by Groq & LLaMA-3.3</div>")
 
     chatbot = gr.Chatbot(elem_classes="chatbot")
     state = gr.State([])
 
     with gr.Row():
-        txt = gr.Textbox(
-            placeholder="Type your message…",
-            show_label=False,
-            scale=5,
-        )
+        txt = gr.Textbox(placeholder="Type your message…", show_label=False, scale=5)
         send = gr.Button("Send", scale=1)
         clear = gr.Button("Clear", scale=1)
 
@@ -236,7 +203,7 @@ with gr.Blocks(title="GROQ CHATBOT") as demo:
     clear.click(clear_chat, outputs=[chatbot, txt], show_progress=False)
 
 # =====================================================
-# Launch (Gradio 6)
+# Launch
 # =====================================================
 if __name__ == "__main__":
     demo.launch(css=custom_css)