fix(chat): remove 75% cap on text bubble and add outer margin

TextBubble now fills the available half-row width instead of being
capped at 75%. Add 16px margin on the avatar-side edge (margin-left
for AI, margin-right for user) so short messages still feel airy
and long messages are no longer artificially clipped.

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

src/app/chat/components/text-bubble.module.css

@@ -1,11 +1,11 @@
 /* TextBubble 文字气泡样式 */
 
 .bubble {
-  /* 撑满父（cap by max-width: 75%）—— 让文字装满宽度再换行 */
+  /* 撑满父（MessageContent column 宽）—— 让气泡占满所在半区 */
   width: 100%;
+  align-self: stretch;
   padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
   border-radius: var(--radius-xxl, 24px);
-  max-width: 75%;
   font-size: var(--font-size-body-lg, 16px);
   line-height: 1.45;
   white-space: pre-wrap;
@@ -17,8 +17,8 @@
   background: #fff;
   color: var(--color-text-foreground, #000);
   border-top-left-radius: 0;
-  /* 撑满父 cross-axis（= MessageContent 宽） */
-  align-self: stretch;
+  /* 气泡在头像侧的外侧留白 */
+  margin-left: var(--spacing-4, 16px);
 }
 
 .bubbleUser {
@@ -29,6 +29,6 @@
   );
   color: #fff;
   border-top-right-radius: 0;
-  /* 撑满父 cross-axis（= MessageContent 宽） */
-  align-self: stretch;
+  /* 气泡在头像侧的外侧留白 */
+  margin-right: var(--spacing-4, 16px);
 }