Update app.py

app.py

@@ -98,40 +98,40 @@ def gradio_fn(message, history):
     )
 
 with gr.Blocks(css="""
-    :root { --corner-h: min(65vh, 820px); }  /* bigger images, size caps to viewport */
+    /* page */
+    html, body { height: 100%; overflow-y: hidden; }
 
-    html, body { overflow-y: hidden; }       /* no vertical scroll */
+    /* app container should always be visible & above images */
     .gradio-container {
         max-width: 600px;
         margin: auto;
         padding: 20px;
         font-family: sans-serif;
         position: relative;
+        min-height: 100vh;      /* ensures layout space */
+        z-index: 10;            /* sit above corner images */
     }
 
     .chatbot { height: 500px !important; overflow-y: auto; }
 
-    .corner {
-        position: fixed;
-        z-index: 9999;
-        pointer-events: none;
-    }
-    #left  { left: 8px;  bottom: 8px; }      /* Arjuna pinned to bottom-left */
-    #right { right: 8px; bottom: 88px; }     /* Krishna lifted ~80–90px */
+    /* corner images */
+    .corner { position: fixed; pointer-events: none; z-index: 5; }  /* < z-index of container */
+    #left  { left: 8px;  bottom: 8px; }
+    #right { right: 8px; bottom: 100px; }  /* lift Krishna a bit */
 
     .corner img {
-        height: var(--corner-h);
+        height: min(70vh, 900px);   /* bigger but responsive */
         width: auto;
         display: block;
     }
-
-    /* safety on short screens: scale down a bit so nothing gets cramped */
-    @media (max-height: 740px) {
-        :root { --corner-h: 50vh; }
-        #right { bottom: 72px; }
-    }
 """) as demo:
-    ...
+    gr.Markdown(...)
+    chat = gr.ChatInterface(
+        fn=gradio_fn,
+        examples=[...],
+        chatbot=gr.Chatbot(type="messages", elem_classes="chatbot"),
+        type="messages",
+    )
     gr.HTML("""
       <div id="left" class="corner">
         <img src="https://huggingface.co/spaces/JDhruv14/gita/resolve/main/arjuna.png" alt="Arjun">