Remove tag-level styling from ChatPage.css except body tag

[Copilot]

This PR refactors the CSS in ChatPage.css to eliminate tag-level styling (except for the body tag) and replace it with class selectors to prevent style leakage and improve maintainability.

Changes Made

• ChatPage.css: Converted h1 tag selector to .page-title class selector
• ChatPage.tsx: Added className="page-title" to the h1 element
• index.test.tsx: Updated test to expect the new class attribute in the h1 element

Before vs After

Before:

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

After:

.page-title {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

Benefits

• No style leakage: Other h1 elements in the application won't be affected by this styling
• Better maintainability: Class-based selectors are more explicit and easier to manage
• Preserved functionality: The visual appearance remains exactly the same
• Follows best practices: Avoids global tag styling that can cause conflicts

Verification

• ✅ All tests pass (13/13)
• ✅ Build check passes with no TypeScript errors
• ✅ UI styling preserved - screenshot shows proper centered, styled heading
• ✅ No regressions introduced

The refactoring successfully removes problematic tag-level styling while maintaining the exact same visual appearance.

Fixes #38.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.