fix(chat): align message bubble and avatar in the same row

Change flex-direction from column to row on .bubbleRowAi and
.bubbleRowUser so the avatar and message content render side-by-side
as the JSX and JSDoc already intend.

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

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

src/app/chat/components/chat-area.module.css

@@ -37,14 +37,14 @@
 
 .bubbleRowAi {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
   gap: var(--spacing-1, 4px);
 }
 
 .bubbleRowUser {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-end;
   gap: var(--spacing-1, 4px);
 }