Update app.py

app.py

@@ -100,19 +100,14 @@ def gradio_fn(message, history):
 with gr.Blocks(css="""
     :root { --chat-w: 520px; }
 
-    html, body {
-        height: 100%;
-        overflow-y: hidden;               /* no page scroll */
-        margin: 0;
-    }
-    /* Full-screen background image with a soft dark overlay */
+    html, body { height: 100%; margin: 0; }
+    /* Desktop / tablet (default) */
     body {
         background:
           linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.28)),
-          url("https://huggingface.co/spaces/JDhruv14/gita/resolve/main/bg.jpg") center / cover no-repeat fixed;  /* <- change filename if needed */
+          url("https://huggingface.co/spaces/JDhruv14/gita/resolve/main/bg.jpg")
+          center / cover no-repeat fixed;
     }
-
-    /* Left-aligned, narrower chat panel */
     .gradio-container {
         max-width: var(--chat-w);
         width: var(--chat-w);
@@ -121,32 +116,52 @@ with gr.Blocks(css="""
         padding: 20px;
         font-family: sans-serif;
         position: relative;
-
-        /* optional glass effect for readability */
         background: rgba(0,0,0,.30);
         border-radius: 16px;
         backdrop-filter: blur(6px);
     }
-
-    .chatbot {
-        height: 480px !important;
-        overflow-y: auto;
-    }
-
-    @media (max-width: 720px){
-        :root { --chat-w: 92vw; }
-        .gradio-container { margin-left: 4vw; }
+    .chatbot { height: 480px !important; overflow-y: auto; }
+
+    /* ======== MOBILE PORTRAIT: chat only ======== */
+    @media (max-width: 720px) and (orientation: portrait) {
+      /* remove page scroll and any background art */
+      html, body { overflow: hidden; }
+      body { background: #0e0e10; }  /* solid bg; no image */
+
+      /* make the app full-screen and edge-to-edge */
+      .gradio-container {
+          max-width: 100vw;
+          width: 100vw;
+          height: 100vh;
+          margin: 0;
+          padding: 8px 10px;
+          border-radius: 0;
+          background: transparent;      /* no glass */
+          backdrop-filter: none;
+      }
+
+      /* hide header + examples so only chat is visible */
+      #header { display: none !important; }
+      .examples, [class*="examples"], [data-testid="examples"] { display: none !important; }
+
+      /* stretch the chat area to fill the screen */
+      .chatbot {
+          height: calc(100vh - 110px) !important;  /* room for input bar */
+          overflow-y: auto;
+      }
+
+      /* hide any component labels/titles that take space */
+      .gradio-container .label { display: none !important; }
     }
 """) as demo:
 
     gr.Markdown(
         """
-        <div style='text-align: left; padding: 10px;'>
+        <div id="header" style='text-align: left; padding: 10px;'>
             <h1 style='font-size: 2.0em; margin-bottom: 0.2em;'><span style='color: #4F46E5;'>kRISHNA.ai</span></h1>
             <p style='font-size: 1.0em; color: #bbb;'>5000-Years of Ancient WISDOM with Modern AI ✨</p>
         </div>
-        """,
-        elem_id="header"
+        """
     )
 
     gr.ChatInterface(
@@ -157,9 +172,13 @@ with gr.Blocks(css="""
             "How do I forgive someone who hurt me deeply?",
             "What can I do to stop overthinking?"
         ],
-        chatbot=gr.Chatbot(type="messages", elem_classes="chatbot"),
+        chatbot=gr.Chatbot(
+            type="messages",
+            elem_classes="chatbot",
+            show_label=False            # no "Chatbot" title bar
+        ),
         type="messages",
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()