fix: 修复 AI 许愿建议卡宽度及距离过远时直接拒绝

- 修复许愿卡 flex-direction row 导致宽度无法撑满
- 距离超范围时 AI 直接回复拒绝，不显示确认卡
- 优化许愿卡左右边距样式

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

wishing-tree-h5/src/components/ChatWidget.vue

@@ -26,7 +26,7 @@
         <div
           v-for="(msg, i) in messages"
           :key="i"
-          :class="['chat-msg', msg.role]"
+          :class="['chat-msg', msg.role, { 'has-wish': msg.wish }]"
         >
           <div class="chat-bubble">{{ msg.content }}</div>
           <!-- AI 许愿建议卡 -->
@@ -321,8 +321,14 @@ watch(showChat, (val) => {
 .chat-msg.ai {
   align-self: flex-start;
 }
-.chat-msg.ai:has(.wish-card) {
-  max-width: 92%;
+.chat-msg.has-wish {
+  width: 100%;
+  max-width: 100%;
+  align-self: stretch;
+  flex-direction: column;
+}
+.chat-msg.has-wish .chat-bubble {
+  width: 100%;
 }
 
 .chat-bubble {
@@ -366,14 +372,12 @@ watch(showChat, (val) => {
 
 /* 许愿建议卡 */
 .wish-card {
-  margin-top: 8px;
+  margin: 8px 0 0 0;
   background: #fff;
   border-radius: 12px;
   padding: 16px;
   border: 1px solid #07c160;
   box-shadow: 0 2px 8px rgba(7, 193, 96, 0.15);
-  width: 280px;
-  max-width: 82vw;
 }
 .wish-card-header {
   font-size: 13px;