Update app.py

app.py

@@ -96,42 +96,50 @@ def gradio_fn(message, history):
         max_new=512,
         min_new=0,
     )
-
 with gr.Blocks(css="""
+    :root { --chat-w: 520px; }          /* ↓ change this to shrink/grow the chat */
+
     .gradio-container { 
-        max-width: 600px; 
-        margin: auto; 
+        max-width: var(--chat-w);       /* narrower chat */
+        width: var(--chat-w);
+        margin-left: 16px;              /* align left */
+        margin-right: auto;             /* push away from right */
         padding: 20px; 
         font-family: sans-serif; 
         position: relative; 
     } 
+
     .chatbot { 
-        height: 500px !important; 
+        height: 480px !important;       /* a bit smaller; tweak as you like */
         overflow-y: auto; 
     } 
+
+    /* corner images (optional) */
     .corner { 
         position: fixed; 
-        bottom: 2px; 
-        z-index: 9999; 
+        bottom: 8px; 
+        z-index: 5; 
         pointer-events: none; 
     } 
-    #left { 
-        left: 2px; 
-    } 
-    #right { 
-        right: 2px; 
-    } 
+    #left  { left: 8px; }
+    #right { right: 8px; bottom: 96px; }    /* lift Krishna a bit */
     .corner img { 
-        height: 500px; /* fixed height */ 
-        width: auto; /* auto to keep aspect ratio */ 
-    } 
+        height: min(62vh, 760px);
+        width: auto; 
+    }
+
+    /* mobile safety */
+    @media (max-width: 720px){
+        :root { --chat-w: 92vw; }
+        .gradio-container { margin-left: 4vw; }
+    }
 """) as demo:
     
     gr.Markdown(
         """
-        <div style='text-align: center; padding: 10px;'>
-            <h1 style='font-size: 2.2em; margin-bottom: 0.2em;'><span style='color: #4F46E5;'>kRISHNA.ai</span></h1>
-            <p style='font-size: 1.1em; color: #555;'>5000-Years of Ancient WISDOM with Modern AI ✨</p>
+        <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"
@@ -151,10 +159,10 @@ with gr.Blocks(css="""
 
     gr.HTML("""
         <div id="left" class="corner">
-            <img src="" alt="Arjun">
+            <img src="/file=arjuna.png" alt="Arjun">
         </div>
         <div id="right" class="corner">
-            <img src="" alt="Krishna">
+            <img src="/file=krishna.png" alt="Krishna">
         </div>
     """)