Major UI overhaul to follow mockup design

Critical layout fixes:
- Fix processing indicator with proper gradient background and container
- Move footer to absolute bottom of page below all content
- Dramatically reduce excessive spacing throughout interface
- Improve visual hierarchy with tighter margins and padding

Mockup alignment:
- Better processing message styling matching design
- Fixed footer positioning (no longer above chat input)
- Reduced header separator margins
- Enhanced CSS for better space utilization

Space optimization:
- Reduced main container padding to 0.5rem top
- Added element spacing controls
- Better sidebar spacing management
- More professional and compact appearance

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

app.py

@@ -40,11 +40,21 @@ st.markdown("""
 
 /* Reduce main container padding */
 .main .block-container {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 3rem;
     max-width: 100%;
 }
 
+/* Remove excessive spacing */
+.element-container {
+    margin-bottom: 0.5rem !important;
+}
+
+/* Fix sidebar spacing */
+[data-testid="stSidebar"] .element-container {
+    margin-bottom: 0.25rem !important;
+}
+
 /* Sidebar */
 [data-testid="stSidebar"] {
     background-color: #f8f9fa;
@@ -143,13 +153,12 @@ st.markdown("""
 .processing-indicator {
     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
     color: #333;
-    padding: 15px 20px;
-    border-radius: 20px 20px 20px 5px;
-    margin: 10px 0;
+    padding: 1rem 1.5rem;
+    border-radius: 12px;
+    margin: 1rem 0;
     margin-left: 0;
     margin-right: auto;
-    max-width: 80%;
-    position: relative;
+    max-width: 70%;
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     animation: pulse 2s infinite;
 }
@@ -515,7 +524,7 @@ with header_col2:
         label_visibility="collapsed"
     )
 
-st.markdown("<hr style='margin: 0.5rem 0; border: none; border-top: 1px solid #e2e8f0;'>", unsafe_allow_html=True)
+st.markdown("<hr style='margin: 0.25rem 0; border: none; border-top: 1px solid #e2e8f0;'>", unsafe_allow_html=True)
 
 
 # Load data with error handling
@@ -672,12 +681,14 @@ def show_custom_response(response):
         return {"is_image": False}
 
 def show_processing_indicator(model_name, question):
-    """Show processing indicator"""
+    """Show processing indicator with gradient like mockup"""
     st.markdown(f"""
-    <div class='processing-indicator'>
-        <div class='assistant-info'>VayuChat • Processing with {model_name}</div>
-        <strong>Question:</strong> {question}<br>
-        <em>Generating response...</em>
+    <div style='display: flex; justify-content: flex-start; margin: 1rem 0;'>
+        <div class='processing-indicator'>
+            <div style='font-size: 0.875rem; color: #6b7280; margin-bottom: 5px;'>VayuChat • Processing with {model_name}</div>
+            <strong>Question:</strong> {question}<br>
+            <em>Generating response...</em>
+        </div>
     </div>
     """, unsafe_allow_html=True)
 
@@ -843,10 +854,10 @@ if st.session_state.get("processing"):
         feedbacks_given = len([r for r in st.session_state.get("responses", []) if r.get("role") == "assistant" and "feedback" in r])
         st.metric("Feedbacks Given", feedbacks_given)
 
-# Minimal footer
-st.markdown("---")
+# Footer at absolute bottom
 st.markdown("""
-<div style='text-align: center; padding: 0.5rem; font-size: 0.75rem; color: #6b7280;'>
+<div style='position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid #e2e8f0; text-align: center; padding: 0.5rem; font-size: 0.7rem; color: #6b7280; z-index: 1000;'>
     © 2024 IIT Gandhinagar Sustainability Lab
 </div>
-""", unsafe_allow_html=True)
+""", unsafe_allow_html=True)
+