Overriding Gradio Default Formatting

Addressing the extra space above the title line and the chat box container color.

app.py

@@ -349,15 +349,16 @@ custom_css = """
     font-style: normal; 
 }
 
-/* Main container styling */
-.gradio-container {
+/* Main container styling - remove top padding */
+.gradio-container-5-42-0 {
     background-color: rgb(240, 236, 230) !important;
     font-family: "Oswald", sans-serif !important;
     font-optical-sizing: auto !important;
     font-weight: 400 !important;
     font-style: normal !important;
     color: #120f0e !important;
-    padding-top: 5px !important;
+    padding-top: 0 !important;
+    margin-top: 0 !important;
 }
 
 /* Apply Oswald to all text elements */
@@ -367,11 +368,17 @@ custom_css = """
     color: #120f0e !important;
 }
 
+/* Remove any default body margins */
+body {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
 /* Title styling - minimize top spacing */
 .title-header {
     background-color: rgb(240, 236, 230);
-    padding: 10px 20px 15px 20px;
-    margin-top: 0;
+    padding: 5px 20px 10px 20px;
+    margin: 0;
     border-bottom: 1pt solid #59524f;
     text-align: left;
 }
@@ -393,12 +400,15 @@ custom_css = """
     padding: 20px;
 }
 
-/* Chatbot styling - multiple selectors to ensure it applies */
-.gradio-chatbot,
-.chatbot,
-div[data-testid="chatbot"],
-.gradio-chatbot > div,
-.gradio-chatbot .scroll-hide {
+/* Force chatbot background with highest specificity */
+.gradio-container-5-42-0 .gradio-chatbot,
+.gradio-container-5-42-0 .chatbot,
+.gradio-container-5-42-0 div[data-testid="chatbot"],
+.gradio-container-5-42-0 .gradio-chatbot > div,
+.gradio-container-5-42-0 .gradio-chatbot .scroll-hide,
+.gradio-container-5-42-0 .gradio-chatbot .overflow-y-auto,
+.gradio-container-5-42-0 #main-chatbot,
+.gradio-container-5-42-0 [data-testid="chatbot"] {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
@@ -406,33 +416,19 @@ div[data-testid="chatbot"],
     font-family: "Oswald", sans-serif !important;
 }
 
-/* Force chatbot container background */
-.gradio-chatbot .overflow-y-auto {
-    background-color: #d9d1ce !important;
-}
-
-/* Target the actual chat messages container */
-.gradio-chatbot > div > div {
-    background-color: #d9d1ce !important;
-}
-
-/* Target by element ID */
-#main-chatbot {
-    background-color: #d9d1ce !important;
-}
-
-/* Additional fallback selectors */
-[data-testid="chatbot"] {
+/* Target all nested chatbot divs */
+.gradio-container-5-42-0 .gradio-chatbot > div > div,
+.gradio-container-5-42-0 .gradio-chatbot > div > div > div {
     background-color: #d9d1ce !important;
 }
 
-/* Force all chatbot related elements */
-.gradio-chatbot * {
+/* Force inheritance on all chatbot children */
+.gradio-container-5-42-0 .gradio-chatbot * {
     background-color: inherit !important;
 }
 
 /* Message styling - model messages same as send button color */
-.gradio-chatbot .message.bot .markdown {
+.gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown {
     background-color: #f09c7d !important;
     color: #120f0e !important;
     border-radius: 8px !important;
@@ -448,7 +444,7 @@ div[data-testid="chatbot"],
 }
 
 /* User messages same as clear button color */
-.gradio-chatbot .message.user .markdown {
+.gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
     background-color: #ada3a0 !important;
     color: #120f0e !important;
     border-radius: 8px !important;
@@ -464,31 +460,31 @@ div[data-testid="chatbot"],
 }
 
 /* Apply Oswald to all markdown content */
-.gradio-chatbot .markdown p,
-.gradio-chatbot .markdown h1,
-.gradio-chatbot .markdown h2,
-.gradio-chatbot .markdown h3,
-.gradio-chatbot .markdown h4,
-.gradio-chatbot .markdown h5,
-.gradio-chatbot .markdown h6,
-.gradio-chatbot .markdown ul,
-.gradio-chatbot .markdown ol,
-.gradio-chatbot .markdown li,
-.gradio-chatbot .markdown strong,
-.gradio-chatbot .markdown em,
-.gradio-chatbot .markdown code {
+.gradio-container-5-42-0 .gradio-chatbot .markdown p,
+.gradio-container-5-42-0 .gradio-chatbot .markdown h1,
+.gradio-container-5-42-0 .gradio-chatbot .markdown h2,
+.gradio-container-5-42-0 .gradio-chatbot .markdown h3,
+.gradio-container-5-42-0 .gradio-chatbot .markdown h4,
+.gradio-container-5-42-0 .gradio-chatbot .markdown h5,
+.gradio-container-5-42-0 .gradio-chatbot .markdown h6,
+.gradio-container-5-42-0 .gradio-chatbot .markdown ul,
+.gradio-container-5-42-0 .gradio-chatbot .markdown ol,
+.gradio-container-5-42-0 .gradio-chatbot .markdown li,
+.gradio-container-5-42-0 .gradio-chatbot .markdown strong,
+.gradio-container-5-42-0 .gradio-chatbot .markdown em,
+.gradio-container-5-42-0 .gradio-chatbot .markdown code {
     font-family: "Oswald", sans-serif !important;
     color: #120f0e !important;
 }
 
 /* Mode indicators with Oswald */
-.gradio-chatbot .markdown strong {
+.gradio-container-5-42-0 .gradio-chatbot .markdown strong {
     font-weight: 600 !important;
     color: #120f0e !important;
 }
 
 /* Hide avatars */
-.gradio-chatbot .avatar-container {
+.gradio-container-5-42-0 .gradio-chatbot .avatar-container {
     display: none !important;
 }
 
@@ -500,7 +496,7 @@ div[data-testid="chatbot"],
 }
 
 /* Button styling with new colors */
-.clear-button {
+.gradio-container-5-42-0 .clear-button {
     background-color: #ada3a0 !important;
     color: #120f0e !important;
     border: 1pt solid #59524f !important;
@@ -513,11 +509,11 @@ div[data-testid="chatbot"],
     font-optical-sizing: auto !important;
 }
 
-.clear-button:hover {
+.gradio-container-5-42-0 .clear-button:hover {
     background-color: rgba(173, 163, 160, 0.8) !important;
 }
 
-.send-button {
+.gradio-container-5-42-0 .send-button {
     background-color: #f09c7d !important;
     color: #120f0e !important;
     border: 1pt solid #59524f !important;
@@ -530,18 +526,18 @@ div[data-testid="chatbot"],
     font-optical-sizing: auto !important;
 }
 
-.send-button:hover {
+.gradio-container-5-42-0 .send-button:hover {
     background-color: rgba(240, 156, 125, 0.8) !important;
 }
 
 /* Textbox styling with chat history color */
-.input-textbox {
+.gradio-container-5-42-0 .input-textbox {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 8px !important;
 }
 
-.input-textbox textarea {
+.gradio-container-5-42-0 .input-textbox textarea {
     background-color: #d9d1ce !important;
     border: none !important;
     color: #120f0e !important;
@@ -552,14 +548,17 @@ div[data-testid="chatbot"],
     font-optical-sizing: auto !important;
 }
 
-.input-textbox textarea::placeholder {
+.gradio-container-5-42-0 .input-textbox textarea::placeholder {
     font-family: "Oswald", sans-serif !important;
     font-weight: 300 !important;
     color: rgba(18, 15, 14, 0.6) !important;
 }
 
 /* Ensure all input elements use Oswald and new colors */
-input, textarea, button, select {
+.gradio-container-5-42-0 input, 
+.gradio-container-5-42-0 textarea, 
+.gradio-container-5-42-0 button, 
+.gradio-container-5-42-0 select {
     font-family: "Oswald", sans-serif !important;
     font-optical-sizing: auto !important;
     color: #120f0e !important;