Separate styling from app.py

[aamarin]

Need to extract and organize CSS styles from app.py into a dedicated stylesheet to improve code maintainability and separation of concerns.

Current State:

• CSS styles are currently embedded in app.py using st.markdown()
• Styles include VWC brand colors, sidebar styling, code block formatting, and chat input styling
• Styles are mixed with application logic

Required Changes:

1. Create new directory structure:

2. Extract existing styles:

• Move all CSS from st.markdown() into main.css
• Organize styles into logical sections (layout, components, utilities)
• Create variables.css for brand colors and theming
• Document styling conventions and usage

3. Create style loading utility:

• Implement function to read CSS files
• Add error handling for file operations
• Cache CSS content to avoid repeated file reads

4. Update app.py:

• Remove inline styles
• Import and use new style loading utility
• Update style application method

Technical Notes:

• Ensure CSS specificity matches current implementation
• Maintain existing Streamlit element targeting
• Keep current functionality of dynamic styling
• Consider adding CSS minification

Acceptance Criteria:

• All styles successfully moved to dedicated CSS files
• No visual regressions in the application
• Styles properly applied through new loading mechanism
• Documentation added for style organization
• No duplicate style definitions
• All Streamlit-specific selectors preserved

Testing:

• Verify styles load correctly
• Check all components retain current styling
• Test style loading performance
• Validate error handling

Related Files:

• app.py
• (new) ui/styles/main.css
• (new) ui/styles/variables.css
• (new) ui/utils/style_loader.py