Transform UI to closely match mockup design

Major mockup alignment:
- Add workflow steps section with numbered progress indicators
- Implement proper container structure with white background
- Enhanced sidebar with detailed dataset information matching mockup
- Better chat input styling with focus states and proper borders

Visual improvements:
- Workflow steps: Natural Language Query → Code Generation → Visualization
- Professional dataset info section with time range and record counts
- Improved typography and spacing throughout interface
- Better visual hierarchy with proper container management

Layout structure:
- Main chat container with padding and background styling
- Cleaner sidebar organization and information display
- More academic and professional appearance matching design vision

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

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

app.py

@@ -195,11 +195,18 @@ st.markdown("""
     border: 1px solid #f5c2c7;
 }
 
-/* Chat input */
+/* Chat input styling like mockup */
 .stChatInput {
-    border-radius: 6px;
-    border: 1px solid #ced4da;
+    border-radius: 8px;
+    border: 1px solid #d1d5db;
     background: #ffffff;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+}
+
+.stChatInput:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
 /* Button */
@@ -574,13 +581,14 @@ with st.sidebar:
     
     st.markdown("---")
     
-    # Dataset Info Section
+    # Dataset Info Section (matching mockup)
     st.markdown("### Dataset Info")
     st.markdown("""
-    <div style='background-color: #f1f5f9; padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem;'>
-        <h4 style='margin: 0 0 0.25rem 0; color: #1e293b; font-size: 0.9rem;'>PM2.5 Air Quality Data</h4>
-        <p style='margin: 0.125rem 0; font-size: 0.75rem;'><strong>Locations:</strong> Gujarat cities</p>
-        <p style='margin: 0.125rem 0; font-size: 0.75rem;'><strong>Parameters:</strong> PM2.5, PM10</p>
+    <div style='background-color: #f1f5f9; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem;'>
+        <h4 style='margin: 0 0 0.5rem 0; color: #1e293b; font-weight: 600;'>PM2.5 Air Quality Data</h4>
+        <p style='margin: 0.25rem 0; font-size: 0.875rem;'><strong>Time Range:</strong> Jan 2023 - Dec 2023</p>
+        <p style='margin: 0.25rem 0; font-size: 0.875rem;'><strong>Locations:</strong> 15 cities in Gujarat</p>
+        <p style='margin: 0.25rem 0; font-size: 0.875rem;'><strong>Records:</strong> 13,140 measurements</p>
     </div>
     """, unsafe_allow_html=True)
     
@@ -616,7 +624,25 @@ with st.sidebar:
         except AttributeError:
             st.experimental_rerun()
 
-# Main content area - removed quick prompts section from here as it's now in sidebar
+# Workflow steps section (like in mockup)
+st.markdown("""
+<div style='background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 1rem 2rem; display: flex; gap: 1rem; margin-bottom: 1rem;'>
+    <div style='display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; background: #dcfce7; color: #166534;'>
+        <div style='width: 20px; height: 20px; border-radius: 50%; background: #22c55e; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600;'>1</div>
+        <span>Natural Language Query</span>
+    </div>
+    <div style='margin: 0 1rem; color: #9ca3af;'>→</div>
+    <div style='display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; background: #dcfce7; color: #166534;'>
+        <div style='width: 20px; height: 20px; border-radius: 50%; background: #22c55e; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600;'>2</div>
+        <span>Code Generation</span>
+    </div>
+    <div style='margin: 0 1rem; color: #9ca3af;'>→</div>
+    <div style='display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; background: #dbeafe; color: #1d4ed8;'>
+        <div style='width: 20px; height: 20px; border-radius: 50%; background: #3b82f6; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600;'>3</div>
+        <span>Visualization</span>
+    </div>
+</div>
+""", unsafe_allow_html=True)
 
 # Initialize chat history and processing state
 if "responses" not in st.session_state:
@@ -692,7 +718,11 @@ def show_processing_indicator(model_name, question):
     </div>
     """, unsafe_allow_html=True)
 
-# Main chat container
+# Main chat container with mockup styling
+st.markdown("""
+<div style='background: white; min-height: 60vh; padding: 1.5rem;'>
+""", unsafe_allow_html=True)
+
 chat_container = st.container()
 
 with chat_container:
@@ -831,6 +861,9 @@ if st.session_state.get("processing"):
     
     st.rerun()
 
+# Close chat container
+st.markdown("</div>", unsafe_allow_html=True)
+
 # Minimal auto-scroll - only scroll when processing
 if st.session_state.get("processing"):
     st.markdown("<script>scrollToBottom();</script>", unsafe_allow_html=True)