Fix snackbar visibility and add color-aware message types

## Problem

1. **Snackbar visibility issue**: The default Material snackbar is difficult to read in dark mode due to poor contrast (white text on
light background in some cases).
2. **No visual distinction**: All snackbar messages (errors, success, warnings) look the same, making it hard for users to quickly
identify message severity.

## Steps to Reproduce

1. Create a free account in Google AI Studio
2. Keep messaging the agent until you reach the daily limit (~21 messages)
3. Observe the rate limit error snackbar
(or any flow that trigger showing the snackbar , ex eval saving or importing a session from a file)

**Screenshot:**

## Proposed Solution

Add custom snackbar styling and color-aware message types:

### Improvements

1. **Fix visibility issues**
- Use theme-aware CSS variables for proper contrast
- Ensure button text is visible in both light and dark modes

2. **Add color-coded message types**
- Error messages: red background
- Success messages: green background
- Warning messages: orange background
- Info messages: default theme background

3. **Make it reusable**
- Create shared constants (`SnackbarType.ERROR`, `SUCCESS`, `WARNING`, `INFO`)
- Allow other components to use the same pattern

I'm working on a PR for this and would appreciate feedback on the approach!