Deep fix: CSS loading order and exact test_image.py plot settings

- Moved critical CSS to top of file with \!important flags for instant blue styling
- Applied exact test_image.py settings: 9x6 figsize @ 1200 DPI
- Creates 10,800x7,200 pixel images for ultra-sharp display
- Display width set to 1080px for perfect 10:1 pixel density
- Both UI responsiveness and plot quality issues resolved

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

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

app.py

@@ -36,6 +36,35 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
+# CRITICAL: CSS must be loaded FIRST for immediate blue message styling
+st.markdown("""
+<style>
+/* User message styling - MUST be defined early */
+.user-message {
+    background: #3b82f6 !important;
+    color: white !important;
+    padding: 0.75rem 1rem !important;
+    border-radius: 7px !important;
+    max-width: 95% !important;
+}
+
+/* Assistant message styling */
+.assistant-message {
+    background: #f1f5f9 !important;
+    color: #334155 !important;
+    padding: 0.75rem 1rem !important;
+    border-radius: 12px !important;
+    max-width: 85% !important;
+}
+
+.assistant-info {
+    font-size: 0.875rem !important;
+    color: #6b7280 !important;
+    margin-bottom: 5px !important;
+}
+</style>
+""", unsafe_allow_html=True)
+
 # JavaScript for interactions
 # st.markdown("""
 # <script>
@@ -419,7 +448,7 @@ def show_custom_response(response):
     content = response.get("content", "")
     
     if role == "user":
-        # User message with right alignment - reduced margins
+        # User message with right alignment - CSS now loaded at top of file
         st.markdown(f"""
         <div style='display: flex; justify-content: flex-end; margin: 1rem 0;'>
             <div class='user-message'>
@@ -506,7 +535,7 @@ def show_custom_response(response):
                     <div style='margin: 1rem 0; display: flex; justify-content: center;'>
                     </div>
                     """, unsafe_allow_html=True)
-                    st.image(content, width=1200, caption="Generated Visualization")
+                    st.image(content, width=1080, caption="Generated Visualization")
                     return {"is_image": True}
             # Also handle case where content shows filename but we want to show image
             elif isinstance(content, str) and any(ext in content for ext in ['.png', '.jpg']):
@@ -520,7 +549,7 @@ def show_custom_response(response):
                         <div style='margin: 1rem 0; display: flex; justify-content: center;'>
                         </div>
                         """, unsafe_allow_html=True)
-                        st.image(filename, width=1200, caption="Generated Visualization")
+                        st.image(filename, width=1080, caption="Generated Visualization")
                         return {"is_image": True}
         except:
             pass

new_system_prompt.txt

@@ -33,11 +33,11 @@ DATA SAFETY:
 - Use .dropna() to remove missing values before analysis
 
 PLOTTING REQUIREMENTS:
-- Create plots for visualization requests: fig, ax = plt.subplots(figsize=(12, 7))
-- Display plots directly with Streamlit: st.pyplot(fig); plt.close()
-- Store success message: answer = "Plot displayed successfully"
+- Create plots for visualization requests: fig, ax = plt.subplots(figsize=(9, 6))
+- Save plots with ULTRA high resolution: filename = f"plot_{uuid.uuid4().hex[:8]}.png"; plt.savefig(filename, dpi=1200, bbox_inches='tight', facecolor='white', edgecolor='none')
+- Close plots: plt.close()
+- Store filename: answer = filename
 - For non-plots: answer = "text result"
-- NEVER use plt.savefig() - always use st.pyplot(fig) for direct display
 
 BASIC ERROR PREVENTION:
 - Use try/except for complex operations

src.py

@@ -149,7 +149,7 @@ def ask_question(model_name, question):
         # Skip style file and set everything manually to ensure it works
         plt.rcParams['figure.dpi'] = 1200
         plt.rcParams['savefig.dpi'] = 1200 
-        plt.rcParams['figure.figsize'] = [12, 7]
+        plt.rcParams['figure.figsize'] = [9, 6]
         plt.rcParams['figure.facecolor'] = 'white'
         plt.rcParams['savefig.facecolor'] = 'white'
         plt.rcParams['savefig.bbox'] = 'tight'

vayuchat.mplstyle

@@ -16,7 +16,7 @@ legend.fontsize: 9
 figure.dpi: 1200
 figure.facecolor: white
 figure.edgecolor: none
-figure.figsize: 12, 7
+figure.figsize: 9, 6
 figure.autolayout: True
 
 # Modern Color Palette (inspired by Tailwind/GitHub)