/* ============================================================
 * Chat.css — Chat.html 独立样式
 * ============================================================ */

/* 返回箭头（Chat 页面 tab-bar padding-top 较小，需覆盖 top） */
.tab-back {
    position: absolute; left: 0.30rem; top: 0.21rem;
    margin-left: 0;
    border: 0; background: transparent; color: #fff;
    padding: 0.08rem 0 0.06rem 0; cursor: pointer; line-height: 1;
    display: flex; align-items: center; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}
.tab-back svg { width: 26px; height: 26px; }

/* 品牌标题块：返回箭头 + 两行文字（左），兔子（右） */
        .chat-brand {
            display: flex;
            align-items: center;
            gap: 0.18rem;
            z-index: 1;
            min-width: 0;
        }
        .chat-brand .tab-back {
            position: absolute;
            left: 0.30rem;
            top: 0.21rem;
            width: 0.6rem;
            height: 0.6rem;
            padding: 0;
            line-height: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .chat-brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.22;
            margin-left: 0.64rem;
        }
        .chat-brand-name {
            font-size: 0.44rem;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
        }
        .chat-brand-domain {
            font-size: 0.26rem;
            color: rgba(255, 255, 255, 0.82);
            letter-spacing: 0.01rem;
            white-space: nowrap;
        }

:root {
            --bg-top: #f7fbff;
            --bg-bottom: #f7fbff;
            --brand: #2e8cff;
            --brand-deep: #2196f3;
            --user-bubble: #4da3ff;
            --ai-bubble: #ffffff;
            --ai-border: #e6f0ff;
            --text-main: #222;
            --text-sub: #666;
            /* 新增：用于给消息区预留底部空间（不影响气泡框样式） */
            --chat-input-bar-offset: 3.70rem;
        }
html, body {
            height: 100%;
        }
body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
            color: var(--text-main);
            background: var(--bg-top);
        }
/* 去掉所有按钮的焦点蓝框 (含 iOS Safari 点击残留) */
        button:focus,
        button:focus-visible,
        button:active:focus,
        *:focus {
            outline: none !important;
        }
button, .quick-pill {
            -webkit-tap-highlight-color: transparent;
        }
/* App Shell */
        .chat-app {
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
        }
.chat-header { }
/* Chat 页面 tab-bar 父级框：固定置顶 +底色 */
        .tab-bar-wrap {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99;
            overflow: hidden;
            transition: height 0.28s ease;
            background: linear-gradient(135deg, rgb(66, 165, 245) 0%, rgb(100, 181, 246) 100%);
        }
/* Chat 页面 tab-bar：relative 供 TTS 按钮定位，减上间距 */
        .tab-bar {
            position: relative;
            padding: 0.21rem 0.30rem;
            height: 3.0rem;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            transition: height 0.28s ease;
        }
/* 上滑收起顶栏：高度缩小到只显示箭头和喇叭，裁切掉兔子与文字 */
        .tab-bar-wrap.collapsed .tab-bar {
            height: 1.0rem;
        }
        .chat-brand-text,
        .tab-bar .tab-btn {
            transition: opacity 0.22s ease;
        }
        .tab-bar-wrap.collapsed .chat-brand-text,
        .tab-bar-wrap.collapsed .tab-btn {
            opacity: 0;
            pointer-events: none;
        }
/* 收起时顶栏居中显示域名 */
        .tab-bar-collapsed-title {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            font-size: 0.32rem;
            font-weight: 600;
            color: #fff;
            letter-spacing: 0.01rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease;
            z-index: 1;
        }
        .tab-bar-wrap.collapsed .tab-bar-collapsed-title {
            opacity: 1;
        }
/* Chat 顶栏脚印底纹（与活动横幅位置一致） */
        .banner-paw {
            position: absolute; pointer-events: none; z-index: 0;
        }
        .banner-paw svg { display: block; }
        .banner-paw.paw1 { right: 0.37rem; top: 0.26rem; width: 1.25rem; height: 1.25rem; opacity: 0.28; transform: rotate(25deg); animation: pawFloat1 3.4s ease-in-out infinite; }
        .banner-paw.paw2 { left: 0.21rem; bottom: 0.16rem; width: 0.84rem; height: 0.84rem; opacity: 0.2; transform: rotate(-15deg); animation: pawFloat2 2.9s ease-in-out infinite 0.4s; }
        .banner-paw.paw3 { left: 46%; top: 0; width: 0.73rem; height: 0.73rem; opacity: 0.16; transform: rotate(40deg); animation: pawFloat3 3.7s ease-in-out infinite 0.8s; }
        #ttsToggleBtn { z-index: 1; }
/* 取消 tab-bar 的兄弟间距，让标题真正居中 */
        .tab-bar .tab-btn {
            margin-left: 0;
            margin-right: 0.72rem;
            padding: 0;
            overflow: visible;
            line-height: 0;
            display: inline-flex;
            align-items: flex-start;
            position: relative;
            z-index: 1;
            align-self: flex-end;
            margin-bottom: -0.94rem;
        }
/* 与 MyInfo 统一：tab 按钮字号/字重/间距 */
        .tab-btn {
            font-size: 0.34rem;
            font-weight: 380;
            margin-bottom: 0.1rem;
        }
.tab-btn.active {
            font-weight: 400;
        }
.tab-btn.active::after {
            display: none;
        }
/* 标题位置换成兔子图标：放大并顶部对齐，下部分身体超出底边被裁切 */
        .tab-bar .tab-btn svg {
            display: block;
            width: 3.0rem;
            height: auto;
            flex-shrink: 0;
        }
        .tab-bar .tab-btn.active {
            transform: none;
        }
/* 兔子点击反应：按部位独立触发 */
        .tab-bar .tab-btn.bunny-ear-l .cpc-ear-l { animation: earWagOnceL 0.5s ease-in-out; }
        .tab-bar .tab-btn.bunny-ear-r .cpc-ear-r { animation: earWagOnceR 0.5s ease-in-out; }
        .tab-bar .tab-btn.bunny-eye-l .cpc-eye-l { animation: cpcBlinkOnce 0.45s ease-in-out; }
        .tab-bar .tab-btn.bunny-eye-r .cpc-eye-r { animation: cpcBlinkOnce 0.45s ease-in-out; }
        .tab-bar .tab-btn.bunny-paw-l .cpc-paw-l,
        .tab-bar .tab-btn.bunny-paw-r .cpc-paw-l { animation: pawWaveL 0.6s ease-in-out; }
        .tab-bar .tab-btn.bunny-paw-l .cpc-paw-r,
        .tab-bar .tab-btn.bunny-paw-r .cpc-paw-r { animation: pawWaveR 0.6s ease-in-out; }
        /* 点击空白处：双眼眨眼 + 双手同时动 */
        .tab-bar .tab-btn.bunny-whole .cpc-eye { animation: cpcBlinkOnce 0.45s ease-in-out; }
        .tab-bar .tab-btn.bunny-whole .cpc-paw-l { animation: pawWaveL 0.6s ease-in-out; }
        .tab-bar .tab-btn.bunny-whole .cpc-paw-r { animation: pawWaveR 0.6s ease-in-out; }
/* 兔子耳朵摆动 + 眨眼（与领券弹窗一致） */
        .cpc-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: cpcEarWagL 2.4s ease-in-out infinite; }
        .cpc-ear.cpc-ear-r { animation-name: cpcEarWagR; animation-delay: 0.3s; }
        .cpc-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: cpcBlink 4s ease-in-out infinite; }
        .cpc-paw { transform-box: fill-box; transform-origin: 50% 15%; }
        @keyframes cpcEarWagL { 0%,60%,100% { transform: rotate(0deg); } 30% { transform: rotate(-10deg); } }
        @keyframes cpcEarWagR { 0%,60%,100% { transform: rotate(0deg); } 30% { transform: rotate(10deg); } }
        @keyframes cpcBlink { 0%,92%,100% { transform: scaleY(1); } 94%,98% { transform: scaleY(0.1); } }
/* 爪印漂浮 */
@keyframes pawFloat1 {
    0%, 100% { transform: rotate(25deg) translateY(0); }
    50% { transform: rotate(25deg) translateY(-0.10rem); }
}
@keyframes pawFloat2 {
    0%, 100% { transform: rotate(-15deg) translateY(0); }
    50% { transform: rotate(-15deg) translateY(-0.08rem); }
}
@keyframes pawFloat3 {
    0%, 100% { transform: rotate(40deg) translateY(0); }
    50% { transform: rotate(40deg) translateY(-0.07rem); }
}
/* 兔子点击：眨眼 + 招手 + 耳朵单独动 */
@keyframes cpcBlinkOnce {
    0% { transform: scaleY(1); }
    40%, 60% { transform: scaleY(0.1); }
    100% { transform: scaleY(1); }
}
@keyframes earWagOnceL {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(-18deg); }
    70% { transform: rotate(6deg); }
}
@keyframes earWagOnceR {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(18deg); }
    70% { transform: rotate(-6deg); }
}
@keyframes pawWaveL {
    0%, 100% { transform: translateX(0); }
    40% { transform: translateX(6px); }
}
@keyframes pawWaveR {
    0%, 100% { transform: translateX(0); }
    40% { transform: translateX(-6px); }
}
/* Messages */
        .chat-messages {
            flex: 1 1 auto;
            overflow-y: auto;
            /* 修改：仅增加底部留白，避免被固定底栏遮挡 */
            padding: 0.22rem 0.22rem calc(var(--chat-input-bar-offset) + env(safe-area-inset-bottom)) 0.22rem;
        }
.msg {
            display: flex;
            align-items: flex-end;
            
            margin: 0.30rem 0;
            max-width: 100%;
        }
.msg > * + * { margin-left: 0.30rem; }
.msg.ai {
                flex-direction: row;
            }
.msg.user {
                flex-direction: row;
            }
.avatar {
            width: 1.11rem;
            height: 1.11rem;
            border-radius: 50%;
            background: #e8f2ff;
            color: var(--brand-deep);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.56rem;
            user-select: none;
            overflow: hidden;
        }
.avatar img {
            border-radius: 50%;
        }
.side {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            flex: none;
        }
.side > * + * { margin-top: 0.07rem; }
.side .name {
                font-size: 0.34rem;
                color: var(--text-sub);
                opacity: .9;
                line-height: 1.2;
            }
.col {
            display: flex;
            flex-direction: column;
            
            flex: 1 1 auto;
            min-width: 0;
        }
.col > * + * { margin-top: 0.07rem; }
.msg.user .col {
            align-items: flex-end;
        }
.msg.ai .col {
            align-items: flex-start;
        }
.bubble {
            display: inline-block;
            width: fit-content;
            max-width: 90%;
            padding: 0.19rem 0.22rem;
            border-radius: 0.30rem;
            font-size: 0.37rem;
            line-height: 1.5;
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }
.ai .bubble {
            background: var(--ai-bubble);
            border-top-left-radius: 0.11rem;
        }
.user .bubble {
            background: var(--user-bubble);
            color: #1976d2;
            border-top-right-radius: 0.11rem;
        }
.welcome-hours {
            margin-top: 0.12rem;
            padding-top: 0.12rem;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            font-size: 0.30rem;
            color: #999;
            line-height: 1.4;
            white-space: nowrap;
        }
.bubble img {
            max-width: min(60vw, 7.78rem);
            height: auto;
            border-radius: 0.22rem;
            display: block;
        }
.time {
            font-size: 0.29rem;
            color: var(--text-sub);
            text-align: center;
            margin: 0.26rem 0;
        }
/* Input Bar */
        .chat-input-bar {
            /* 修改：固定在屏幕底部（不改其它视觉样式） */
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 6;
            background: #F5F5F5;
            backdrop-filter: saturate(180%) blur(10px);
            padding: 0.22rem 0.19rem calc(0.22rem + env(safe-area-inset-bottom));
        }
.toolbar {
            display: flex;
            align-items: center;
            
            padding: 0.07rem 0.07rem 0.19rem;
        }
.toolbar > * + * { margin-left: 0.22rem; }
.tool-btn {
            width: 0.96rem;
            height: 0.96rem;
            border: none;
            border-radius: 0.24rem;
            background: #eef5ff;
            color: #356fd2;
            font-size: 0.44rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
.input-wrap {
            display: flex;
            align-items: center;
            
        }
.input-wrap > * + * { margin-left: 0.22rem; }
/* 输入框容器：用于在右侧内嵌表情按钮 */
        .input-field {
            flex: 1;
            position: relative;
            display: flex;
            align-items: flex-end;
            min-width: 0;
        }
.chat-input {
            flex: 1;
            min-height: 1.0rem;
            max-height: 25vh;
            resize: none;
            padding: 0.26rem 1.30rem 0.26rem 0.37rem; /* 右侧留出表情按钮空间 */
            border-radius: 999px;
            border: none;
            background: #ffffff;
            font-size: 0.37rem;
            line-height: 1.5;
            outline: none;
            overflow-y: auto;
            box-sizing: border-box;
        }
/* 占位文字颜色 */
            .chat-input::placeholder {
                color: #bbb;
            }
/* 输入框内右侧表情按钮（更大，颜色与占位文字一致） */
        .input-emoji-btn {
            position: absolute;
            right: 0.19rem;
            bottom: 0.07rem;
            width: 1.04rem;
            height: 1.04rem;
            border: none;
            border-radius: 50%;
            background: transparent;
            color: #333; /* 与占位文字「和我聊点什么吧...」同色 */
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
/* 购物车+发送按钮父级框，统一上下居中 */
        .input-actions {
            display: flex;
            align-items: center;
            
            flex: none;
        }
.input-actions > * + * { margin-left: 0.22rem; }
/* 输入框外右侧购物车图标（与表情按钮风格一致） */
        .input-cart-btn {
            flex: 0 0 1.0rem;
            width: 1.0rem;
            height: 1.0rem;
            border: none;
            border-radius: 50%;
            background: transparent;
            color: #333;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
/* 发送/添加按钮：全圆形 */
        .chat-send-btn {
            width: 0.78rem;
            height: 0.78rem;
            flex: 0 0 0.78rem;
            padding: 0;
            border: none;
            border-radius: 50%;
            background: var(--brand);
            color: #ffffff;
            font-size: 0.38rem;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .2s, opacity .2s;
        }
.chat-send-btn:active {
                background: var(--brand-deep);
            }
/* 快捷抽屉 */
        .quick-drawer {
            padding: 0.19rem 0.07rem 0.07rem;
        }
/* 编辑框上方快捷菜单一栏：横向可滑动，隐藏滚动条 */
        .quick-top-row {
            display: flex;
            align-items: center;
            
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            margin: 0 0.07rem 0.19rem;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
        }
.quick-top-row > * + * { margin-left: 0.19rem; }
.quick-top-row::-webkit-scrollbar {
                display: none;
            }
/* 转接人工：文字全圆角胶囊底框，无描边 */
        .quick-pill {
            flex: 0 0 auto;
            height: 0.83rem;
            padding: 0 0.41rem;
            border: none;
            border-radius: 999px;
            background: #ffffff;
            color: #333;
            font-size: 0.32rem;
            cursor: pointer;
            white-space: nowrap;
        }
.quick-pill:active {
                background: #f0f0f0;
            }
/* 其余快捷按钮：全圆形 */
        .quick-grid {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            
            padding: 0.19rem 0.11rem 0.07rem;
        }
.quick-grid > * { margin-right: 0.26rem; margin-bottom: 0.26rem; }
.quick-circle {
            width: 1.1rem;
            height: 1.1rem;
            border: none;
            border-radius: 50%;
            background: #ffffff;
            color: #333;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
.quick-circle:active {
                background: #f0f0f0;
            }
/* Emoji Panel ...（保持不变） */
        .emoji-panel {
            position: absolute;
            left: 0.19rem;
            right: 0.19rem;
            bottom: calc(1.37rem + env(safe-area-inset-bottom));
            background: #fff;
            border: 1px solid #eef2ff;
            border-radius: 0.22rem;
            padding: 0;
            display: none;
            max-height: 4.44rem;
            overflow: auto;
            z-index: 7;
            scrollbar-width: none;
        }
.emoji-panel::-webkit-scrollbar {
                display: none;
            }
#emojiPanel::-webkit-scrollbar {
                display: none;
            }
.emoji-grid {
            display: grid;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            grid-column-gap: 0.15rem; grid-row-gap: 0.15rem;
            padding: 0px;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }
.emoji-item {
            font-size: 0.56rem;
            line-height: 0.88rem;
            width: 0.88rem;
            height: 0.88rem;
            text-align: center;
            cursor: pointer;
            border-radius: 0.15rem;
        }
.emoji-item:hover {
                background: #f0f6ff;
            }
@media (min-width: 768px) {
            .bubble {
                max-width: 68%;
            }
.emoji-grid {
                grid-template-columns: repeat(10, minmax(0, 1fr));
                grid-column-gap: 0.22rem; grid-row-gap: 0.22rem;
                padding: 0.22rem;
            }
.bubble img {
                max-width: 8.89rem;
            }
        }
.media-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: 0.19rem; grid-row-gap: 0.19rem;
            padding: 0.19rem;
            box-sizing: border-box;
            width: 100%;
        }
.media-item {
            background: #f7faff;
            border: 1px solid #cfdcff;
            border-radius: 0.22rem;
            padding: 0.19rem;
            cursor: pointer;
            transition: background .2s, transform .2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
.media-item:hover {
                background: #eef5ff;
                transform: translateY(-0.04rem);
            }
.media-icon {
                font-size: 0.44rem;
                margin-bottom: 0.07rem;
            }
.media-text {
                font-size: 0.26rem;
                color: var(--text-main);
            }

/* 转接成功淡入动画 */
@keyframes csFadeIn{from{opacity:0;transform:translateY(0.11rem);}
to{opacity:1;transform:translateY(0);}}
.cs-fade-in{animation:csFadeIn .45s ease both;}

/* 聊天消息、气泡、输入中动画 */

        .chat-time-marker {
            display: block;
            text-align: center;
            color: #b5b5b5;
            font-size: 0.29rem;
            line-height: 1.4;
            margin: 0.26rem 0 0.11rem 0;
            user-select: none;
        }
.msg.user .bubble { color: #ffffff !important; }
.msg.user .bubble a { color: #ffffff; }
.typing-dots { display: inline-block; vertical-align: middle; }
.typing-dots span {
            display: inline-block;
            width: 0.11rem; height: 0.11rem;
            margin: 0 0.04rem;
            background: #bcdcff;
            border-radius: 50%;
            opacity: 0.6;
            animation: typing-dot 1s infinite;
        }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
            0%, 80%, 100% { opacity: 0.6; transform: scale(1); }
            40% { opacity: 1; transform: scale(1.3); }
        }
.chat-bubble-menu button {
            width: 100%;
            padding: 0.15rem 0.22rem;
            border: none;
            background: transparent;
            text-align: left;
            cursor: pointer;
            color: inherit;
            font-size: 0.29rem;
        }
.chat-bubble-menu button:hover { background: rgba(0,0,0,0.04); }
.msg {
            display: flex;
            align-items: flex-start;
            
            padding: 0.15rem 0.22rem;
            overflow: visible;
            margin: 0;
        }
.msg > * + * { margin-left: 0.30rem; }
.msg { margin-bottom: 0.30rem; }
.msg:last-child { margin-bottom: 0; }
.msg .side {
            position: relative;
            flex: 0 0 1.0rem;
            min-width: 1.0rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            padding-top: 0;
            overflow: visible;
        }
.msg .side .name {
            position: absolute;
            top: -0.07rem;
            left: 50%;
            transform: translate(-50%, -100%);
            font-size: 0.34rem;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            max-width: 1.85rem;
            z-index: 4;
            pointer-events: none;
        }
.msg .side .avatar {
            margin-top: 0;
            width: 1.11rem;
            height: 1.11rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.56rem;
            border-radius: 50%;
            overflow: hidden;
            background: #fff;
        }
.msg .col {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
.msg.ai .col {
            align-items: flex-start;
        }
.msg.user .col {
            align-items: flex-end;
        }
.msg .bubble {
            display: inline-block;
            width: fit-content;
            max-width: 90%;
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
            line-height: 1.5;
            font-size: 0.37rem;
        }
.msg.user { flex-direction: row; }
.msg.user .side { align-items: center; justify-content: flex-start; padding-top: 0; }
.msg .side, .msg .col { vertical-align: top; overflow: visible; }
.msg .bubble img {
            max-width: 100%;
            max-height: 4.44rem;
            display: block;
            border-radius: 0.15rem;
            margin: 0.07rem 0;
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(img) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
.msg .bubble video {
            border-radius: 0.30rem !important;
            max-width: 100%;
            max-height: 4.44rem;
            display: block;         
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(video) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
                }

/* 转接成功淡入动画 */
@keyframes csFadeIn{from{opacity:0;transform:translateY(0.11rem);}
to{opacity:1;transform:translateY(0);}}
.cs-fade-in{animation:csFadeIn .45s ease both;}

/* 聊天消息/气泡/输入中 */

        .chat-time-marker {
            display: block;
            text-align: center;
            color: #b5b5b5;
            font-size: 0.29rem;
            line-height: 1.4;
            margin: 0.26rem 0 0.11rem 0;
            user-select: none;
        }
.msg.user .bubble { color: #ffffff !important; }
.msg.user .bubble a { color: #ffffff; }
.typing-dots { display: inline-block; vertical-align: middle; }
.typing-dots span {
            display: inline-block;
            width: 0.11rem; height: 0.11rem;
            margin: 0 0.04rem;
            background: #bcdcff;
            border-radius: 50%;
            opacity: 0.6;
            animation: typing-dot 1s infinite;
        }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
            0%, 80%, 100% { opacity: 0.6; transform: scale(1); }
            40% { opacity: 1; transform: scale(1.3); }
        }
.chat-bubble-menu button {
            width: 100%;
            padding: 0.15rem 0.22rem;
            border: none;
            background: transparent;
            text-align: left;
            cursor: pointer;
            color: inherit;
            font-size: 0.29rem;
        }
.chat-bubble-menu button:hover { background: rgba(0,0,0,0.04); }
.msg {
            display: flex;
            align-items: flex-start;
            
            padding: 0.15rem 0.22rem;
            overflow: visible;
            margin: 0;
        }
.msg > * + * { margin-left: 0.30rem; }
.msg { margin-bottom: 0.30rem; }
.msg:last-child { margin-bottom: 0; }
.msg .side {
            position: relative;
            flex: 0 0 1.0rem;
            min-width: 1.0rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            padding-top: 0;
            overflow: visible;
        }
.msg .side .name {
            position: absolute;
            top: -0.07rem;
            left: 50%;
            transform: translate(-50%, -100%);
            font-size: 0.34rem;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            max-width: 1.85rem;
            z-index: 4;
            pointer-events: none;
        }
.msg .side .avatar {
            margin-top: 0;
            width: 1.11rem;
            height: 1.11rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.56rem;
            border-radius: 50%;
            overflow: hidden;
            background: #fff;
        }
.msg .col {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
.msg.ai .col {
            align-items: flex-start;
        }
.msg.user .col {
            align-items: flex-end;
        }
.msg .bubble {
            display: inline-block;
            width: fit-content;
            max-width: 90%;
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
            line-height: 1.5;
            font-size: 0.37rem;
        }
.msg.user { flex-direction: row; }
.msg.user .side { align-items: center; justify-content: flex-start; padding-top: 0; }
.msg .side, .msg .col { vertical-align: top; overflow: visible; }
.msg .bubble img {
            max-width: 100%;
            max-height: 4.44rem;
            display: block;
            border-radius: 0.15rem;
            margin: 0.07rem 0;
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(img) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
.msg .bubble video {
            border-radius: 0.30rem !important;
            max-width: 100%;
            max-height: 4.44rem;
            display: block;         
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(video) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
                }

/* 转接淡入动画 */
@keyframes csFadeIn{from{opacity:0;transform:translateY(0.11rem);}
to{opacity:1;transform:translateY(0);}}
.cs-fade-in{animation:csFadeIn .45s ease both;}

/* 消息/气泡/输入中 */

        .chat-time-marker {
            display: block;
            text-align: center;
            color: #b5b5b5;
            font-size: 0.29rem;
            line-height: 1.4;
            margin: 0.26rem 0 0.11rem 0;
            user-select: none;
        }
.msg.user .bubble { color: #ffffff !important; }
.msg.user .bubble a { color: #ffffff; }
.typing-dots { display: inline-block; vertical-align: middle; }
.typing-dots span {
            display: inline-block;
            width: 0.11rem; height: 0.11rem;
            margin: 0 0.04rem;
            background: #bcdcff;
            border-radius: 50%;
            opacity: 0.6;
            animation: typing-dot 1s infinite;
        }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
            0%, 80%, 100% { opacity: 0.6; transform: scale(1); }
            40% { opacity: 1; transform: scale(1.3); }
        }
.chat-bubble-menu button {
            width: 100%;
            padding: 0.15rem 0.22rem;
            border: none;
            background: transparent;
            text-align: left;
            cursor: pointer;
            color: inherit;
            font-size: 0.29rem;
        }
.chat-bubble-menu button:hover { background: rgba(0,0,0,0.04); }
.msg {
            display: flex;
            align-items: flex-start;
            
            padding: 0.15rem 0.22rem;
            overflow: visible;
            margin: 0;
        }
.msg > * + * { margin-left: 0.30rem; }
.msg { margin-bottom: 0.30rem; }
.msg:last-child { margin-bottom: 0; }
.msg .side {
            position: relative;
            flex: 0 0 1.0rem;
            min-width: 1.0rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            padding-top: 0;
            overflow: visible;
        }
.msg .side .name {
            position: absolute;
            top: -0.07rem;
            left: 50%;
            transform: translate(-50%, -100%);
            font-size: 0.34rem;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            max-width: 1.85rem;
            z-index: 4;
            pointer-events: none;
        }
.msg .side .avatar {
            margin-top: 0;
            width: 1.11rem;
            height: 1.11rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.56rem;
            border-radius: 50%;
            overflow: hidden;
            background: #fff;
        }
.msg .col {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
.msg.ai .col {
            align-items: flex-start;
        }
.msg.user .col {
            align-items: flex-end;
        }
.msg .bubble {
            display: inline-block;
            width: fit-content;
            max-width: 90%;
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
            line-height: 1.5;
            font-size: 0.37rem;
        }
.msg.user { flex-direction: row; }
.msg.user .side { align-items: center; justify-content: flex-start; padding-top: 0; }
.msg .side, .msg .col { vertical-align: top; overflow: visible; }
.msg .bubble img {
            max-width: 100%;
            max-height: 4.44rem;
            display: block;
            border-radius: 0.15rem;
            margin: 0.07rem 0;
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(img) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
.msg .bubble video {
            border-radius: 0.30rem !important;
            max-width: 100%;
            max-height: 4.44rem;
            display: block;         
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(video) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
                }

/* 转接淡入动画 */
@keyframes csFadeIn{from{opacity:0;transform:translateY(0.11rem);}
to{opacity:1;transform:translateY(0);}}
.cs-fade-in{animation:csFadeIn .45s ease both;}

/* 消息/气泡/输入中 */

        .chat-time-marker {
            display: block;
            text-align: center;
            color: #b5b5b5;
            font-size: 0.29rem;
            line-height: 1.4;
            margin: 0.26rem 0 0.11rem 0;
            user-select: none;
        }
.msg.user .bubble { color: #ffffff !important; }
.msg.user .bubble a { color: #ffffff; }
.typing-dots { display: inline-block; vertical-align: middle; }
.typing-dots span {
            display: inline-block;
            width: 0.11rem; height: 0.11rem;
            margin: 0 0.04rem;
            background: #bcdcff;
            border-radius: 50%;
            opacity: 0.6;
            animation: typing-dot 1s infinite;
        }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
            0%, 80%, 100% { opacity: 0.6; transform: scale(1); }
            40% { opacity: 1; transform: scale(1.3); }
        }
.chat-bubble-menu button {
            width: 100%;
            padding: 0.15rem 0.22rem;
            border: none;
            background: transparent;
            text-align: left;
            cursor: pointer;
            color: inherit;
            font-size: 0.29rem;
        }
.chat-bubble-menu button:hover { background: rgba(0,0,0,0.04); }
.msg {
            display: flex;
            align-items: flex-start;
            
            padding: 0.15rem 0.22rem;
            overflow: visible;
            margin: 0;
        }
.msg > * + * { margin-left: 0.30rem; }
.msg { margin-bottom: 0.30rem; }
.msg:last-child { margin-bottom: 0; }
.msg .side {
            position: relative;
            flex: 0 0 1.0rem;
            min-width: 1.0rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            padding-top: 0;
            overflow: visible;
        }
.msg .side .name {
            position: absolute;
            top: -0.07rem;
            left: 50%;
            transform: translate(-50%, -100%);
            font-size: 0.34rem;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            max-width: 1.85rem;
            z-index: 4;
            pointer-events: none;
        }
.msg .side .avatar {
            margin-top: 0;
            width: 1.11rem;
            height: 1.11rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.56rem;
            border-radius: 50%;
            overflow: hidden;
            background: #fff;
        }
.msg .col {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
.msg.ai .col {
            align-items: flex-start;
        }
.msg.user .col {
            align-items: flex-end;
        }
.msg .bubble {
            display: inline-block;
            width: fit-content;
            max-width: 90%;
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
            line-height: 1.5;
            font-size: 0.37rem;
        }
.msg.user { flex-direction: row; }
.msg.user .side { align-items: center; justify-content: flex-start; padding-top: 0; }
.msg .side, .msg .col { vertical-align: top; overflow: visible; }
.msg .bubble img {
            max-width: 100%;
            max-height: 4.44rem;
            display: block;
            border-radius: 0.15rem;
            margin: 0.07rem 0;
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(img) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
.msg .bubble video {
            border-radius: 0.30rem !important;
            max-width: 100%;
            max-height: 4.44rem;
            display: block;         
            object-fit: contain;
            border: none;
            outline: none;
        }
.msg .bubble:has(video) {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
                }