/**
 * 中华蒸汽 聊天挂件 — 样式（本站风格：深色底 + 霓虹绿 / 青 + 熊猫）
 *
 * ── 颜色从主题变量来，不抄色值 ────────────────────────────────────────────────
 *
 * ⚠ 每个 var() 都带兜底值，而且兜底值就是 style.css:121 起 `:root` 里那几条的
 *   当前值（--neon-green #39ff14、--neon-cyan #00f0ff、--bg-main #0a0a0f、
 *   --bg-secondary #12121a、--bg-card #1a1a26、--text-primary #f0f0f5、
 *   --border-color #2a2a3a）。为什么必须有兜底：这份 CSS 和挂件一起被
 *   cnv_chat_enqueue_assets() 注入，而挂件会出现在任何一个前台页面上 ——
 *   包括将来某个不加载 style.css 的落地页模板。没有兜底的 var() 在那种页面上
 *   解析成空值，于是挂件会变成一块黑底黑字的方块：技术上「用了变量」，视觉上
 *   不可读。
 *
 * ⚠ 对比度：正文 #f2fff5 / #e8f6ec 在 #12121a–#1a1a26 上都 ≥ 10:1；次要文字
 *   #b7c9bb 在 #12121a 上 ≈ 10.7:1；客人气泡是霓虹绿底 + #06130a 深字，≈ 13.9:1。
 *   没有一处靠纯 --neon-green 当正文色（亮绿在深底上虽然对比够，但长句子刺眼）。
 *
 * ⚠ 动效一律放在 @media (prefers-reduced-motion: no-preference) 里，默认静态。
 *   反过来写（默认有动画、reduce 时关掉）在不报告偏好的环境里会照样动。
 *
 * ⚠ 375px：面板宽 calc(100vw - 16px)、右偏 -6px，左右各留 8px，不出横向滚动；
 *   表单行用 grid + minmax(0, 1fr)，所以长 placeholder 不会把行撑开。
 */

/* ---------- Container ---------- */
#cnvChat,
#cnvChat * {
    box-sizing: border-box;
}

#cnvChat {
    position: fixed;
    z-index: 9990;
    bottom: 24px;
    right: 24px;
    font-family: var(--font-body, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif);
    color: var(--text-primary, #f0f0f5);
}

/* Mobile: avoid overlap with bottom nav bar (60px) */
@media (max-width: 767px) {
    #cnvChat {
        bottom: calc(var(--bottom-bar-height, 60px) + 14px);
        right: 14px;
    }
}

/* ---------- 熊猫气泡按钮（关闭状态） ---------- */
.cnv-chat-bubble {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(57, 255, 20, 0.22), transparent 60%),
        var(--bg-card, #1a1a26);
    border: 2px solid var(--neon-green, #39ff14);
    cursor: pointer;
    padding: 0;
    box-shadow:
        0 0 18px rgba(57, 255, 20, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cnv-chat-bubble:hover,
.cnv-chat-bubble:focus-visible {
    transform: translateY(-2px) scale(1.04);
    border-color: var(--neon-cyan, #00f0ff);
    box-shadow:
        0 0 28px rgba(57, 255, 20, 0.55),
        0 0 46px rgba(0, 240, 255, 0.28),
        0 10px 26px rgba(0, 0, 0, 0.6);
}

.cnv-chat-bubble:active { transform: translateY(0) scale(1); }

/* 原创熊猫 SVG — images/cnv-chat/panda-bubble.svg */
.cnv-chat-bubble-icon {
    width: 40px;
    height: 40px;
    display: block;
    pointer-events: none;
}

/* 霓虹绿脉冲环（只在允许动效时跑） */
.cnv-chat-bubble-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--neon-green, #39ff14);
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-bubble-pulse {
        animation: cnv-chat-pulse 2.6s ease-out infinite;
    }
}
@keyframes cnv-chat-pulse {
    0%   { transform: scale(0.96); opacity: 0.6; }
    70%  { transform: scale(1.32); opacity: 0; }
    100% { transform: scale(1.32); opacity: 0; }
}

/* When open, hide the bubble (panel covers the area) */
#cnvChat[data-open="true"] .cnv-chat-bubble { display: none; }

/* ---------- Bubble dismiss button (X in bubble's top-right corner) ----------
   Sibling of .cnv-chat-bubble inside #cnvChat (nested <button> illegal).
   Click → hides the entire widget for 24h via localStorage (JS owns the timer). */
.cnv-chat-bubble-dismiss {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-secondary, #12121a);
    color: #cfe0d4;
    border: 1.5px solid var(--border-color, #2a2a3a);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 2;
}
.cnv-chat-bubble-dismiss:hover,
.cnv-chat-bubble-dismiss:focus-visible {
    opacity: 1;
    transform: scale(1.12);
    color: var(--neon-green, #39ff14);
    border-color: var(--neon-green, #39ff14);
}
.cnv-chat-bubble-dismiss svg {
    width: 12px;
    height: 12px;
}
#cnvChat[data-open="true"] .cnv-chat-bubble-dismiss { display: none; }

/* ---------- Fully dismissed (24h hide) ---------- */
#cnvChat.is-dismissed { display: none !important; }

/* ---------- Teaser bubble (sits to the LEFT of the panda icon) ---------- */
.cnv-chat-teaser {
    position: absolute;
    bottom: 8px;
    right: 76px;
    background: var(--bg-card, #1a1a26);
    color: #f2fff5;
    border: 1px solid var(--neon-green, #39ff14);
    padding: 12px 36px 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow:
        0 0 16px rgba(57, 255, 20, 0.22),
        0 8px 24px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    max-width: 260px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cnv-chat-teaser:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 26px rgba(57, 255, 20, 0.38),
        0 10px 28px rgba(0, 0, 0, 0.55);
}

/* Tail / arrow pointing right toward the panda icon */
.cnv-chat-teaser::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 22px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--neon-green, #39ff14);
}

.cnv-chat-teaser-text {
    display: block;
    pointer-events: none;
}

.cnv-chat-teaser-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #b7c9bb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cnv-chat-teaser-close:hover,
.cnv-chat-teaser-close:focus-visible {
    background: rgba(57, 255, 20, 0.14);
    color: var(--neon-green, #39ff14);
}
.cnv-chat-teaser-close svg {
    width: 12px;
    height: 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-teaser {
        animation: cnv-chat-teaser-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cnv-chat-teaser[data-dismissed="true"] {
        animation: cnv-chat-teaser-out 0.25s ease both;
    }
}
@keyframes cnv-chat-teaser-in {
    0%   { opacity: 0; transform: translateX(20px) scale(0.8); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cnv-chat-teaser-out {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(8px) scale(0.9); }
}
.cnv-chat-teaser[data-dismissed="true"] {
    pointer-events: none;
    opacity: 0;
}

/* Mobile: smaller, tighter */
@media (max-width: 480px) {
    .cnv-chat-teaser {
        font-size: 13px;
        padding: 10px 30px 10px 14px;
        right: 64px;
        max-width: calc(100vw - 90px);
        white-space: normal;
    }
}

#cnvChat[data-open="true"] .cnv-chat-teaser {
    display: none;
}

/* ---------- Chat panel (open state) ---------- */
.cnv-chat-panel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 380px;
    max-width: calc(100vw - 28px);
    height: 580px;
    max-height: calc(100vh - 48px);
    background: var(--bg-secondary, #12121a);
    border: 1px solid var(--neon-green, #39ff14);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(57, 255, 20, 0.18),
        0 0 36px rgba(57, 255, 20, 0.16),
        0 24px 60px rgba(0, 0, 0, 0.65);
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
}

#cnvChat[data-open="true"] .cnv-chat-panel {
    display: flex;
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-panel {
        transform: translateY(20px) scale(0.96);
        transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
    }
    #cnvChat[data-open="true"] .cnv-chat-panel {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .cnv-chat-panel {
        width: calc(100vw - 16px);
        height: calc(100vh - var(--bottom-bar-height, 60px) - 28px);
        right: -6px;
    }
}

/* ---------- Header ---------- */
.cnv-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background:
        linear-gradient(135deg, rgba(57, 255, 20, 0.14) 0%, rgba(0, 240, 255, 0.10) 100%),
        var(--bg-main, #0a0a0f);
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    flex-shrink: 0;
}

.cnv-chat-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 原创熊猫头像 — images/cnv-chat/panda-avatar.svg */
.cnv-chat-head-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
    background: var(--bg-card, #1a1a26);
    border: 1px solid var(--neon-green, #39ff14);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.3);
}

.cnv-chat-head-text { min-width: 0; }

.cnv-chat-head-title {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-weight: 700;
    font-size: 14.5px;
    color: #f2fff5;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.cnv-chat-head-status {
    font-size: 11.5px;
    color: #b7c9bb;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cnv-chat-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--neon-green, #39ff14);
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.9);
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-status-dot {
        animation: cnv-chat-status-pulse 2s ease-out infinite;
    }
}
@keyframes cnv-chat-status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(57, 255, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); }
}

.cnv-chat-close {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    color: #cfe0d4;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.cnv-chat-close:hover,
.cnv-chat-close:focus-visible {
    background: rgba(57, 255, 20, 0.14);
    color: var(--neon-green, #39ff14);
}
.cnv-chat-close svg { width: 18px; height: 18px; }

/* ---------- Body (messages) ---------- */
.cnv-chat-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 240, 255, 0.06), transparent 55%),
        var(--bg-secondary, #12121a);
    scrollbar-width: thin;
    scrollbar-color: rgba(57, 255, 20, 0.35) transparent;
}
.cnv-chat-body::-webkit-scrollbar { width: 6px; }
.cnv-chat-body::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 20, 0.35);
    border-radius: 3px;
}

.cnv-chat-msg {
    max-width: 86%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-msg { animation: cnv-chat-msg-in 0.22s ease both; }
}
@keyframes cnv-chat-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cnv-chat-msg-assistant {
    align-self: flex-start;
    background: var(--bg-card, #1a1a26);
    color: #e8f6ec;
    border: 1px solid var(--border-color, #2a2a3a);
    border-bottom-left-radius: 4px;
}
.cnv-chat-msg-assistant a {
    color: var(--neon-cyan, #00f0ff);
    text-decoration: underline;
}

.cnv-chat-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--neon-green, #39ff14) 0%, #16c40a 100%);
    color: #06130a;
    font-weight: 500;
    border-bottom-right-radius: 4px;
}

/* Support role — 真人客服从 Telegram 回过来的消息。
   和 AI 区分开：霓虹青描边 + 「中华蒸汽 真人客服」标签。 */
.cnv-chat-support-wrap {
    align-self: flex-start;
    max-width: 86%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-support-wrap { animation: cnv-chat-msg-in 0.22s ease both; }
}
.cnv-chat-support-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--neon-cyan, #00f0ff);
    letter-spacing: 0.06em;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cnv-chat-support-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.8);
}
.cnv-chat-msg-support {
    background: var(--bg-card, #1a1a26);
    color: #e6fbff;
    border: 1px solid var(--neon-cyan, #00f0ff);
    border-bottom-left-radius: 4px;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.14);
}

/* ---------- 自助导航按钮 ---------- */
.cnv-chat-suggestions {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-suggestions { animation: cnv-chat-msg-in 0.3s ease 0.1s both; }
}
.cnv-chat-suggestion {
    background: var(--bg-card, #1a1a26);
    color: #e8f6ec;
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cnv-chat-suggestion:hover,
.cnv-chat-suggestion:focus-visible {
    border-color: var(--neon-green, #39ff14);
    color: #f2fff5;
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-suggestion:hover { transform: translateY(-1px); }
}
.cnv-chat-suggestion:active { transform: translateY(0); }

/* 👍 / 👎 */
.cnv-chat-suggestion-feedback {
    border-style: dashed;
    color: #cfe0d4;
}
.cnv-chat-suggestion-feedback:hover,
.cnv-chat-suggestion-feedback:focus-visible {
    border-style: solid;
    border-color: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
}

/* 「还没解决，转人工」—— 最后一步，所以亮一点 */
.cnv-chat-suggestion-escalate {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.18) 0%, rgba(0, 240, 255, 0.14) 100%);
    color: #f2fff5;
    border-color: var(--neon-green, #39ff14);
    font-weight: 700;
}
.cnv-chat-suggestion-escalate:hover,
.cnv-chat-suggestion-escalate:focus-visible {
    border-color: var(--neon-cyan, #00f0ff);
    box-shadow:
        0 0 16px rgba(57, 255, 20, 0.45),
        0 0 28px rgba(0, 240, 255, 0.22);
}

.cnv-chat-msg-error {
    align-self: center;
    background: rgba(255, 45, 120, 0.12);
    color: #ffc2d6;
    border: 1px solid var(--neon-pink, #ff2d78);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 94%;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Typing indicator */
.cnv-chat-typing {
    align-self: flex-start;
    background: var(--bg-card, #1a1a26);
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 12px 15px;
    display: inline-flex;
    gap: 4px;
}
.cnv-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-green, #39ff14);
    opacity: 0.45;
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-typing span { animation: cnv-chat-typing 1.2s ease-in-out infinite; }
    .cnv-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
    .cnv-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes cnv-chat-typing {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-3px); }
}

/* ---------- 转人工前表单（第三层） ---------- */
.cnv-chat-handover {
    padding: 12px 13px;
    background: var(--bg-main, #0a0a0f);
    border-top: 1px solid var(--neon-green, #39ff14);
    flex-shrink: 0;
    max-height: 56%;
    overflow-y: auto;
}

.cnv-chat-handover-title {
    font-size: 13px;
    font-weight: 700;
    color: #f2fff5;
    margin-bottom: 10px;
}

.cnv-chat-handover-row {
    display: grid;
    /* minmax(0, 1fr) — 不加这个，长 placeholder 会把网格列撑过面板宽度，
       375px 下就出横向滚动条了。 */
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.cnv-chat-handover-row > span {
    font-size: 12.5px;
    color: #b7c9bb;
}
.cnv-chat-handover-row > span em {
    font-style: normal;
    color: #8fa394;
    font-size: 11px;
}

.cnv-chat-handover-row input,
.cnv-chat-handover-row select {
    width: 100%;
    min-width: 0;
    background: var(--bg-card, #1a1a26);
    color: #f2fff5;
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cnv-chat-handover-row input::placeholder { color: #7d8f82; }
.cnv-chat-handover-row input:focus,
.cnv-chat-handover-row select:focus {
    border-color: var(--neon-green, #39ff14);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.cnv-chat-handover-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cnv-chat-handover-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--neon-green, #39ff14) 0%, #16c40a 100%);
    color: #06130a;
    border: none;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.cnv-chat-handover-btn:hover,
.cnv-chat-handover-btn:focus-visible {
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.5);
    filter: brightness(1.06);
}

.cnv-chat-handover-cancel {
    background: transparent;
    color: #b7c9bb;
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cnv-chat-handover-cancel:hover,
.cnv-chat-handover-cancel:focus-visible {
    color: #f2fff5;
    border-color: var(--neon-cyan, #00f0ff);
}

.cnv-chat-handover-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #b7c9bb;
}

/* P2-3 —— 提交没发出去时表单自己说的那一句。
 *
 * ⚠ #ffc9c9 on #0a0a0f, not the usual #ff4d6d: the brand red reads 3.9:1 on this
 *   panel, i.e. under 4.5:1 for body text, and this is the one line a customer
 *   HAS to be able to read — it is the difference between "retry" and "sitting
 *   there waiting for nobody". Measured by the rendered-colour cell in
 *   tools/regress/cnv-chat/selfservice/source.php. */
.cnv-chat-handover-error {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #ffc9c9;
}

/* ---------- 留邮箱的小表单（移植过来的旧形状，strict_mode 还在用） ---------- */
.cnv-chat-escalate {
    padding: 12px 13px;
    background: var(--bg-main, #0a0a0f);
    border-top: 1px solid var(--neon-cyan, #00f0ff);
    flex-shrink: 0;
}

.cnv-chat-escalate-text {
    font-size: 13px;
    color: #e6fbff;
    margin-bottom: 8px;
    line-height: 1.5;
}

.cnv-chat-escalate-form {
    display: flex;
    gap: 8px;
}

.cnv-chat-escalate-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color, #2a2a3a);
    background: var(--bg-card, #1a1a26);
    color: #f2fff5;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cnv-chat-escalate-input::placeholder { color: #7d8f82; }
.cnv-chat-escalate-input:focus {
    border-color: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.cnv-chat-escalate-btn {
    background: linear-gradient(135deg, var(--neon-cyan, #00f0ff) 0%, #00a8c4 100%);
    color: #04161a;
    border: none;
    border-radius: 9px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.cnv-chat-escalate-btn:hover,
.cnv-chat-escalate-btn:focus-visible {
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.5);
    filter: brightness(1.06);
}

/* ---------- Input area ---------- */
.cnv-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 11px 13px;
    border-top: 1px solid var(--border-color, #2a2a3a);
    background: var(--bg-main, #0a0a0f);
    flex-shrink: 0;
}

.cnv-chat-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 13px;
    padding: 10px 13px;
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.45;
    resize: none;
    max-height: 120px;
    outline: none;
    color: #f2fff5;
    background: var(--bg-card, #1a1a26);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cnv-chat-input::placeholder { color: #7d8f82; }
.cnv-chat-input:focus {
    border-color: var(--neon-green, #39ff14);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.28);
}

.cnv-chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-green, #39ff14) 0%, #16c40a 100%);
    color: #06130a;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.cnv-chat-send:hover,
.cnv-chat-send:focus-visible {
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
    .cnv-chat-send:hover { transform: scale(1.06); }
}
.cnv-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: scale(1);
    box-shadow: none;
}
.cnv-chat-send svg { width: 16px; height: 16px; }

/* ---------- Footer ---------- */
.cnv-chat-foot {
    padding: 8px 13px;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    color: #b7c9bb;
    background: var(--bg-main, #0a0a0f);
    border-top: 1px solid var(--border-color, #2a2a3a);
    flex-shrink: 0;
}
.cnv-chat-foot a {
    color: var(--neon-green, #39ff14);
    text-decoration: none;
    font-weight: 600;
}
.cnv-chat-foot a:hover { text-decoration: underline; }

/* ---------- 熊猫换成站点 logo 同款（主人 2026-10-11）----------
 * 与 header 的 .logo-icon 一致：霓虹绿圆角方块 + 🐼 表情，替换原来的几何 SVG。 */
.cnv-chat-bubble {
    border-radius: 16px;
    background: var(--neon-green, #39ff14);
    border-color: var(--neon-green, #39ff14);
}
.cnv-chat-bubble-pulse { border-radius: 20px; }
.cnv-chat-panda {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    pointer-events: none;
    user-select: none;
}
.cnv-chat-bubble-icon.cnv-chat-panda { width: auto; height: auto; font-size: 32px; }
.cnv-chat-head-avatar.cnv-chat-panda {
    border-radius: 10px;
    background: var(--neon-green, #39ff14);
    border-color: var(--neon-green, #39ff14);
    font-size: 22px;
}

/* ---------- 主人 2026-10-11：站内「在线客服」入口（由 cnv-chat.js 插入） ---------- */
.cnv-open-chat {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--neon-green, #39ff14);
    border-radius: 12px;
    background: rgba(57, 255, 20, 0.08);
    color: #f2fff5;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.15);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cnv-open-chat:hover,
.cnv-open-chat:focus-visible {
    background: rgba(57, 255, 20, 0.16);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
    transform: translateY(-1px);
    outline: none;
}
.cnv-open-chat-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--neon-green, #39ff14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.cnv-open-chat-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cnv-open-chat-text strong { font-size: 15px; font-weight: 700; color: var(--neon-green, #39ff14); }
.cnv-open-chat-text small { font-size: 12px; color: #b7c9bb; }
/* 订单详情页那一排小标签里的紧凑版 */
.cnv-open-chat--chip {
    display: inline-flex;
    width: auto;
    margin: 0 8px 0 0;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    gap: 8px;
}
.cnv-open-chat--chip .cnv-open-chat-icon { width: 24px; height: 24px; border-radius: 50%; font-size: 15px; }
.cnv-open-chat--chip .cnv-open-chat-text { flex-direction: row; gap: 6px; align-items: baseline; }
.cnv-open-chat--chip .cnv-open-chat-text strong { font-size: 13px; }
.cnv-open-chat-link { color: var(--neon-green, #39ff14); font-weight: 600; text-decoration: none; }
.cnv-open-chat-link:hover { text-decoration: underline; }