Update app.py

app.py

@@ -99,15 +99,18 @@ def gradio_fn(message, history):
 
 with gr.Blocks(css="""
     :root { --chat-w: 520px; }
-
-    /* ---------- Desktop / Tablet (default) ---------- */
-    html, body { height: 100%; margin: 0; }
+    html, body {
+        height: 100%;
+        overflow-y: hidden;               /* no page scroll */
+        margin: 0;
+    }
+    /* Full-screen background image with a soft dark overlay */
     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;
+          url("https://huggingface.co/spaces/JDhruv14/gita/resolve/main/bg.jpg") center / cover no-repeat fixed;  /* <- change filename if needed */
     }
+    /* Left-aligned, narrower chat panel */
     .gradio-container {
         max-width: var(--chat-w);
         width: var(--chat-w);
@@ -116,70 +119,42 @@ 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; }
-
-    /* ---------- MOBILE PORTRAIT: CHAT ONLY ---------- */
-    @media (max-width: 750px) and (orientation: portrait) {
-      html, body { height: 100svh; overflow: hidden; }    /* use small viewport height on mobile */
-      body { background: #0e0e10 !important; }            /* no image on mobile */
-
-      /* make the app full screen and remove padding/borders */
-      .gradio-container {
-          max-width: 100vw !important;
-          width: 100vw !important;
-          height: 100svh !important;
-          margin: 0 !important;
-          padding: 0 !important;
-          border-radius: 0 !important;
-          background: #0e0e10 !important;
-          backdrop-filter: none !important;
-      }
-
-      /* hide header + any example chips/buttons */
-      #header { display: none !important; }
-      [data-testid*="examples"],
-      .examples,
-      [class*="examples"] { display: none !important; }
-
-      /* stretch the Chatbot to fill the viewport (leaving room for the input bar) */
-      .gradio-container .gr-chatbot,
-      .gradio-container .chatbot {
-          height: calc(100svh - 110px) !important; /* tweak 110px if your input bar is taller/shorter */
-          max-height: calc(100svh - 110px) !important;
-          overflow-y: auto !important;
-      }
-
-      /* kill any stray labels/titles */
-      .gradio-container .label, 
-      .gradio-container [data-testid="block-label"] { display: none !important; }
+    .chatbot {
+        height: 480px !important;
+        overflow-y: auto;
+    }
+    @media (max-width: 720px){
+        :root { --chat-w: 92vw; }
+        .gradio-container { margin-left: 4vw; }
     }
 """) as demo:
 
     gr.Markdown(
         """
-        <div id="header" style='text-align: left; padding: 10px;'>
+        <div 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(
         fn=gradio_fn,
-        # remove examples entirely to avoid chips on mobile
-        examples=None,
-        chatbot=gr.Chatbot(
-            type="messages",
-            elem_classes="chatbot",
-            show_label=False
-        ),
+        examples=[
+            "Hello!",
+            "How can I overcome fear of failure?",
+            "How do I forgive someone who hurt me deeply?",
+            "What can I do to stop overthinking?"
+        ],
+        chatbot=gr.Chatbot(type="messages", elem_classes="chatbot"),
         type="messages",
     )
 
 if __name__ == "__main__":
-    demo.launch()
-
+    demo.launch()