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

{{--
    文件功能：全局右下角 Toast 小卡片通知组件

    提供全局 JS API：
      window.chatToast.show({ title, message, icon?, color?, duration? })
        - title:    卡片标题
        - message:  卡片内容（支持 HTML）
        - icon:     左侧 Emoji 图标（可选，默认 💬）
        - color:    强调色 HEX（可选，默认 #336699）
        - duration: 自动消失毫秒数（可选，默认 3000；0 = 不自动消失）
        - action:   { label, onClick } 可选操作按钮

    使用示例：
      window.chatToast.show({ title: '奖励金币', message: '你收到 100 枚金币！', icon: '💰', color: '#f59e0b' });

    多条 Toast 从右下角向上堆叠，各自独立计时。

    @author  ChatRoom Laravel
    @version 1.0.0
--}}

{{-- Toast 容器（固定右下角，由 JS 动态填充） --}}
<div id="chat-toast-container"
    style="position:fixed; bottom:24px; right:24px; z-index:999998;
           display:flex; flex-direction:column-reverse; gap:10px; pointer-events:none;">
</div>

<style>
    @keyframes toastSlideIn {
        from {
            opacity: 0;
            transform: translateX(32px) scale(.96);
        }

        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    @media (max-width: 640px) {
        #chat-toast-container {
            right: 12px !important;
            bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
            left: 12px !important;
            align-items: flex-end;
        }

        #chat-toast-container .chat-toast-card {
            width: fit-content !important;
            min-width: 0 !important;
            max-width: min(320px, calc(100vw - 24px)) !important;
            overflow-wrap: anywhere;
        }
    }
</style>