Improve mobile responsiveness with Tailwind breakpoints

- Replace fixed-width containers (min-w-xl max-w-xl) with responsive classes
- Mobile: full width with padding, Tablet: 90% max 768px, Desktop: max 1024px
- Make ChatScreen header stack vertically on mobile, horizontal on desktop
- Add touch-friendly button sizes (min 44x44px tap targets)
- Optimize textarea and form inputs for mobile keyboards
- Add text wrapping (break-words) to message bubbles to prevent overflow
- Apply responsive text sizing (text-sm sm:text-base) throughout
- Improve ConversationList with touch-friendly hit areas
- Add responsive padding/spacing across all components

All components now use standard Tailwind breakpoints:
- sm: 640px+ (tablet)
- md: 768px+ (larger tablet)
- lg: 1024px+ (desktop)
- xl: 1280px+ (large desktop)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

raggr-frontend/src/components/AnswerBubble.tsx

@@ -7,7 +7,7 @@ type AnswerBubbleProps = {
 
 export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
   return (
-    <div className="rounded-md bg-orange-100 p-3">
+    <div className="rounded-md bg-orange-100 p-3 sm:p-4">
       {loading ? (
         <div className="flex flex-col w-full animate-pulse gap-2">
           <div className="flex flex-row gap-2 w-full">
@@ -20,8 +20,10 @@ export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
           </div>
         </div>
       ) : (
-        <div className="flex flex-col">
-          <ReactMarkdown>{"🐈: " + text}</ReactMarkdown>
+        <div className="flex flex-col break-words overflow-wrap-anywhere">
+          <ReactMarkdown className="text-sm sm:text-base [&>*]:break-words">
+            {"🐈: " + text}
+          </ReactMarkdown>
         </div>
       )}
     </div>