# QA: Chat Customization (CSS) — PydanticAI

## Prerequisites

- Demo is deployed and accessible
- Agent backend is healthy (check /api/health)

## Test Steps

### 1. Basic Functionality

- [ ] Navigate to the chat-customization-css demo page
- [ ] Verify the chat is wrapped in `.chat-css-demo-scope`
- [ ] Verify the background is warm cream (#fff8f0)
- [ ] Verify the chat input uses a dashed pink border

### 2. Chat Interaction

- [ ] Send a message
- [ ] Verify the user message bubble is hot pink with bold white serif text
- [ ] Verify the assistant message bubble is amber with dark monospace text
- [ ] Verify markdown content inherits the themed fonts and colors

### 3. Error Handling

- [ ] Verify no CSS leaks outside `.chat-css-demo-scope`
- [ ] Verify no console errors during normal usage

## Expected Results

- All visual overrides scoped to the demo
- Agent responds within 10 seconds
- No layout breakage from custom CSS