Updated CSS

app.py

@@ -364,8 +364,10 @@ with gr.Blocks(title="🌍 Climate Q&A", css="style.css", theme=theme) as demo:
             with gr.Column(scale=2):
                 # state = gr.State([system_template])
                 bot = gr.Chatbot(show_copy_button=True,show_label = False,elem_id="chatbot",layout = "panel",avatar_images = (None,"assets/logo4.png"))
-                textbox=gr.Textbox(placeholder="Ask me a question about climate change or biodiversity in any language!",show_label=False)
-                submit_button = gr.Button("Submit")
+                
+                with gr.Row(elem_id = "input-message"):
+                    textbox=gr.Textbox(placeholder="Ask me anything here!",show_label=False,scale=7)
+                    submit_button = gr.Button(">",scale = 1,elem_id = "submit-button")
 
 
             with gr.Column(scale=1, variant="panel",elem_id = "right-panel"):

style.css

@@ -22,12 +22,22 @@
     margin-top:20px;
     padding: 15px 20px;
     font-size: 14px;
-    color: #006064;
     display: inline-block;
     margin-bottom: 15px;
     width: auto;
+    color:black !important;
 }
 
+body.dark .warning-box * {
+    color:black !important;
+}
+
+
+body.dark .tip-box * {
+    color:black !important;
+}
+
+
 .tip-box-title {
     font-weight: bold;
     font-size: 14px;
@@ -167,27 +177,70 @@ label.selected{
   background:none !important;
 }
 
+#submit-button{
+    padding:0px !important;
+}
+
+
+@media screen and (min-width: 1024px) {
+    div#tab-examples{
+        height:calc(100vh - 190px) !important;
+        overflow-y: auto;
+    }
+
+    div#sources-textbox{
+        height:calc(100vh - 190px) !important;
+        overflow-y: auto;
+    }
+
+    div#chatbot-row{
+        height:calc(100vh - 120px) !important;
+    }
+
+    div#chatbot{
+        height:calc(100vh - 220px) !important;
+    }
+
+    .max-height{
+        height:calc(100vh - 120px) !important;
+        overflow-y: auto;
+    }
+}
+
+footer {
+    visibility: hidden;
+    display:none;
+}
+
 
-div#tab-examples{
-    height:calc(100vh - 190px) !important;
-    overflow-y: auto;
+@media screen and (max-width: 767px) {
+    /* Your mobile-specific styles go here */
+
+    div#chatbot{
+        height:500px !important;
+    }
+
+    #submit-button{
+        padding:0px !important;
+        min-width: 80px;
+    }
+
+    /* ... add other mobile-specific styles ... */
 }
 
-div#sources-textbox{
-    height:calc(100vh - 190px) !important;
-    overflow-y: auto;
-  }
 
-div#chatbot-row{
-    height:calc(100vh - 120px);
+body.dark .card{
+    background-color: #374151;
 }
 
-div#chatbot{
-    height:calc(100vh - 270px);
+body.dark .card-content h2{
+    color:#f4dbd3 !important;
 }
 
+body.dark .card-footer {
+    background-color: #404652;
+}
 
-.max-height{
-    height:calc(100vh - 120px);
-    overflow-y: auto;
-}
+body.dark .card-footer span {
+    color:white !important;
+}