Extract CSS from ChatPage.tsx into a separate file

[Copilot]

This PR extracts the embedded CSS styles from ChatPage.tsx into a separate ChatPage.css file to improve code organization, maintainability, and separation of concerns.

Changes Made

1. Created ChatPage.css - Extracted all static CSS rules (body, h1, #messages, #messageInput, #sendButton styles) from the inline <style> block
2. Updated ChatPage.tsx - Replaced the large inline style block with a clean <link> tag reference to the external CSS file
3. Added static file serving - Enhanced the Hono app configuration to serve CSS files from the components directory using @hono/node-server/serve-static
4. Preserved CSS-in-JS functionality - Maintained the existing hono/css dynamic class generation for component-specific styling

Benefits

• Better separation of concerns - Static styles are now in CSS files, dynamic styles remain in CSS-in-JS
• Improved maintainability - CSS is easier to edit and manage in a dedicated file
• Cleaner component code - The TSX file is more focused on component logic rather than styling
• No functional changes - All existing functionality, tests, and UI appearance remain identical

Before/After

Before: 76 lines of inline CSS mixed with component logic
After: Clean component file + dedicated CSS file with proper static file serving

All tests pass and the application renders identically to before the changes.

Fixes #32.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.