缩短弹窗通知显示时间

resources/js/chat-room/chat-events.js

@@ -472,7 +472,7 @@ export function bindChatEvents() {
                 message: t.message || "",
                 icon: t.icon || "💬",
                 color: t.color || "#336699",
-                duration: t.duration ?? 8000,
+                duration: t.duration ?? 3000,
             });
         }
     });

resources/js/chat-room/red-packet-panel.js

@@ -525,7 +525,7 @@ function handleClaimResponse(response, data, button) {
             message: `恭喜您抢到了礼包 ${data.amount} ${typeLabel}！`,
             icon: "🧧",
             color: redPacketType === "exp" ? "#7c3aed" : "#dc2626",
-            duration: 8000,
+            duration: 3000,
         });
 
         closeRedPacketModal();

resources/js/chat-room/riddle-quiz.js

@@ -461,7 +461,7 @@ function handleRiddleGameAnswered(e) {
         message: `<b>${winnerUsername}</b> 答对了「${answer}」，获得 ${rewardGold}💰 + ${rewardExp}⭐！`,
         icon: "🎉",
         color: "#16a34a",
-        duration: 6000,
+        duration: 3000,
     });
 }
 

resources/js/chat-room/toast.js

@@ -80,7 +80,7 @@ function createChatToast(container) {
             message,
             icon = "💬",
             color = "#336699",
-            duration = 6000,
+            duration = 3000,
             action = null,
         }) {
             const card = document.createElement("div");

resources/views/chat/partials/toast-notification.blade.php

@@ -7,7 +7,7 @@
         - message:  卡片内容（支持 HTML）
         - icon:     左侧 Emoji 图标（可选，默认 💬）
         - color:    强调色 HEX（可选，默认 #336699）
-        - duration: 自动消失毫秒数（可选，默认 6000；0 = 不自动消失）
+        - duration: 自动消失毫秒数（可选，默认 3000；0 = 不自动消失）
         - action:   { label, onClick } 可选操作按钮
 
     使用示例：
@@ -43,13 +43,14 @@
             right: 12px !important;
             bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
             left: 12px !important;
-            align-items: stretch;
+            align-items: flex-end;
         }
 
         #chat-toast-container .chat-toast-card {
-            width: 100% !important;
+            width: fit-content !important;
             min-width: 0 !important;
-            max-width: none !important;
+            max-width: min(320px, calc(100vw - 24px)) !important;
+            overflow-wrap: anywhere;
         }
     }
 </style>