feat(ui): enhance chat UI with new components and styling

refactor(chat): improve message display and actions
feat(chat): add high contrast mode toggle
style(chat): update spacing and sizing for better readability
feat(chat): add new Section and Stack layout components
docs: add UI style guide documentation
fix(chat): improve browser connection handling in scraper
feat(settings): expand default sources and improve UI
refactor: consolidate chat page layout and components

components/chat/chat-message.tsx

@@ -1,29 +1,35 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { useState } from 'react';
 import { cn } from "@/lib/utils";
 import { Message } from "@/hooks/use-chat";
 import { Bot, User } from "lucide-react";
 import { markdownRenderers } from "./markdown-renderers";
 import { MessageActions } from "./message-actions";
+import { MessageBackground } from "./message-background";
 
 export function ChatMessage({ message }: { message: Message }) {
   const isUser = message.role === 'user';
+  const [selected, setSelected] = useState(false);
 
   return (
-    <div className={cn(
-      "group flex w-full gap-4 p-6 relative",
-      isUser ? "bg-background" : "bg-muted/30"
-    )}>
+    <MessageBackground
+      role={isUser ? 'user' : 'assistant'}
+      state={selected ? 'selected' : 'normal'}
+      className={cn("cursor-pointer")}
+      onClick={() => setSelected((v) => !v)}
+      tabIndex={0}
+    >
       <div className="flex-shrink-0 mt-1">
         <div className={cn(
-          "w-8 h-8 rounded-sm flex items-center justify-center",
+          "w-8 h-8 rounded-md flex items-center justify-center",
           isUser ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"
         )}>
           {isUser ? <User className="w-5 h-5" /> : <Bot className="w-5 h-5" />}
         </div>
       </div>
       <div className="flex-1 overflow-hidden min-w-0">
-        <div className="prose dark:prose-invert max-w-none break-words">
+        <div className="prose dark:prose-invert max-w-none break-words leading-relaxed">
           <ReactMarkdown 
             remarkPlugins={[remarkGfm]}
             components={markdownRenderers}
@@ -55,13 +61,11 @@ export function ChatMessage({ message }: { message: Message }) {
           </ReactMarkdown>
         </div>
       </div>
-      
-      {/* Actions Toolbar - Absolute positioned or flex end */}
       {!isUser && (
         <div className="absolute top-4 right-4">
           <MessageActions content={message.content} role={message.role} />
         </div>
       )}
-    </div>
+    </MessageBackground>
   );
 }