<?php
require_once __DIR__ . '/config.php';
// 强制未登录拦截：进入单聊必须先登录
require_login('/chat.php' . (!empty($_SERVER['QUERY_STRING']) ? '?' . $_SERVER['QUERY_STRING'] : ''));
// 从 URL 读取并校验参数
$sid     = isset($_GET['session_id']) ? (int) $_GET['session_id'] : 0;
// kefu_id 支持字符串（后台创建的客服ID可能是 K260807F1B5FE 这种格式）
$kefu_id = isset($_GET['kefu_id']) ? trim((string)$_GET['kefu_id']) : '1';
if ($kefu_id === '' || $kefu_id === '0') $kefu_id = '1';

// 智能客服配对与会话检查
$kefu_name = '盼之咨询顾问-时莱';
$kefu_avatar = 'https://img.cdn1.vip/i/6a4b4cd8c08ae_1783319768.webp';
$kefu_badge = '/static/picture/6a3ecafa7e65c_1782500090.webp';
try {
    $pdo = db();
    // 若提供了 session_id，先从会话读取对应的真实 kefu_id
    if ($sid > 0) {
        $sessStmt = $pdo->prepare('SELECT kefu_id FROM chat_sessions WHERE id = ? LIMIT 1');
        $sessStmt->execute([$sid]);
        $sRow = $sessStmt->fetch();
        if ($sRow && !empty($sRow['kefu_id'])) {
            $kefu_id = $sRow['kefu_id'];
        }
    }

    $kstmt = $pdo->prepare('SELECT kefu_id, name, avatar, display_name, description FROM kefu WHERE kefu_id = ? AND status = 1 LIMIT 1');
    $kstmt->execute([$kefu_id]);
    $kefuInfo = $kstmt->fetch();

    if (!$kefuInfo) {
        // 自动配对第一条可用客服
        $firstStmt = $pdo->query('SELECT kefu_id, name, avatar, display_name, description FROM kefu WHERE status = 1 ORDER BY sort_order ASC, id ASC LIMIT 1');
        $kefuInfo = $firstStmt ? $firstStmt->fetch() : null;
        if ($kefuInfo) {
            $kefu_id = $kefuInfo['kefu_id'];
        }
    }

    if ($kefuInfo) {
        $kefu_name = $kefuInfo['display_name'] ?: $kefuInfo['name'];
        if (!empty($kefuInfo['avatar'])) {
            $kefu_avatar = $kefuInfo['avatar'];
        }
    }
} catch (Throwable $e) {}

// 当前登录用户（用于自己消息上方显示昵称与编号）
$__u = current_user();
$myDisplayName = trim((string)($__u['user_name'] ?? ''));
if ($myDisplayName === '') { $myDisplayName = '用户' . (int)($__u['id'] ?? 0); }
$myUserNo   = 'PZ' . str_pad((string)(int)($__u['id'] ?? 0), 6, '0', STR_PAD_LEFT);
$myAvatar   = !empty($__u['avatar']) ? $__u['avatar'] : '/static/uploads/avatars/panda_1.jpg';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script src="/static/js/tk.js?v=4"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<link rel="stylesheet" href="static/css/front-fixed.css?v=20261005">
<link rel="stylesheet" href="static/css/card-styles.css">
<title>在线咨询 - 盼之账号</title>
<link rel="icon" type="image/webp" href="/static/picture/6a61a47f2fd8e_1784783999.webp">
<style>
  /* ====== 原版HDChat 1:1 复制样式 ====== */
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  body {
    font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f5f5; color: #1f2937; overflow: hidden;
  }

  /* imDetail-page 主容器 */
  .imDetail-page {
    bottom: 0; display: flex; flex-direction: column; left: 0;
    position: fixed; right: 0; top: 0; overflow: hidden;
    background: #f5f5f5; max-width: 24rem; margin: 0 auto;
    font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .imDetail-page:before {
    content: ""; height: 40.8vw; left: 0; pointer-events: none;
    position: absolute; right: 0; top: 0; z-index: 0;
    background: linear-gradient(0deg, #fff4f100, #fff4f1);
  }

  /* chat-view */
  .chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative; z-index: 1; }

  /* header 顶部栏 */
  .header {
    position: fixed; top: 0; left: 0; right: 0; max-width: 24rem;
    width: 100%; margin: 0 auto; backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); z-index: 100; padding: 0;
    background: #f7f7f7; padding-top: env(safe-area-inset-top);
  }
  .header-inner { display: flex; align-items: center; width: 100%; padding: 12px 16px; }
  .header-inner svg { width: 24px; height: 24px; cursor: pointer; flex-shrink: 0; color: #1f2937; }
  .title-container { flex: 1; margin-left: .6rem; text-align: left; }
  .title {
    align-items: center; display: flex; gap: 4px; font-weight: 600;
    font-size: 17px; line-height: 1.4; color: #1a1a1a;
  }
  .status-container {
    font-size: 12px; line-height: 1rem; color: #999;
    display: flex; align-items: center; gap: 6px; margin-top: 2px;
  }
  .status-online { color: #52c41a; font-weight: 500; }
  .status-time { color: #999; margin-left: 0; }
  .action-wrapper { display: flex; align-items: center; margin-left: 8px; }
  .action-wrapper .more { width: 22px; height: 22px; cursor: pointer; }

  /* chat-area 消息区域 */
  .chat-area {
    flex: 1; background-color: #f5f5f5; overflow-y: auto; width: 100%;
    padding: 5.5rem 0 1rem; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .chat-area::-webkit-scrollbar { display: none; }
  .chat-messages { display: flex; flex-direction: column; gap: 0; padding: 0 14px; }

  /* message-tip 系统提示 */
  .message.message-tip { margin-bottom: 20px; color: #999; font-size: 3.2vw; line-height: 4.8vw; text-align: center; width: 100%; word-break: break-all; }

  /* agent-message-container 客服消息 */
  .agent-message-container { display: block; margin-bottom: 18px; }
  .agent-message-inner {
    display: flex; justify-content: flex-start; align-items: flex-start;
    gap: .6rem; max-width: 100%;
  }
  .agent-avatar {
    width: 2.4rem; height: 2.4rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0;
  }
  .agent-message-content {
    display: flex; flex-direction: column;
    align-items: flex-start; max-width: 78%;
  }
  .agent-name-row {
    display: flex; align-items: center; gap: 5px; margin-bottom: .3rem;
    font-size: .75rem; line-height: 1rem;
  }
  .agent-name {
    color: #999; font-size: .75rem; line-height: 1rem;
  }
  .agent-time {
    color: #bbb; font-size: .72rem; line-height: 1rem; margin-left: 2px;
  }
  .buyer-badge {
    display: inline-block; background: #e8f3ff; border-radius: 4px; color: #3b82f6;
    font-size: 10px; font-weight: 500; height: 16px; line-height: 16px;
    margin-left: 5px; text-align: center; width: auto; padding: 0 4px;
  }
  /* 官方徽章：橙色盾形对勾 + 文字 */
  .conversation-tag {
    display: inline-flex; align-items: center; gap: 2px;
    background: #fff3ee; border-radius: 4px;
    padding: 1px 5px 1px 3px; margin-left: 2px;
    font-size: 11px; line-height: 16px; color: #f0643a; font-weight: 500;
    height: 18px;
  }
  .conversation-tag svg {
    width: 12px; height: 12px; flex-shrink: 0;
  }
  .agent-message-bubble {
    background-color: #fff; border-radius: 12px; padding: .65rem .8rem;
    word-wrap: break-word; overflow-wrap: break-word; max-width: 320px;
  }
  .agent-message-bubble.custom-html-card-bubble {
    padding: 0 !important; background: transparent !important;
    box-shadow: none !important; border-radius: 0 !important; overflow: visible !important;
  }
  .agent-message-text {
    font-size: 14px; line-height: 1.45; color: #1f2937; white-space: pre-line;
  }

  /* simple-user-message-container 用户消息 */
  .simple-user-message-container {
    margin-bottom: 16px; display: flex; flex-direction: column; align-items: flex-end;
  }
  .simple-user-time {
    font-size: .72rem; color: #bbb; line-height: 1rem; margin-bottom: 4px; padding-right: 2px;
  }
  .simple-user-name-row {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    margin-bottom: 5px; padding-right: 2px; flex-wrap: wrap;
  }
  .simple-user-name { font-size: 12px; color: #666; font-weight: 600; }
  .simple-user-no {
    font-size: 10px; color: #999; background: #f2f2f2;
    padding: 1px 6px; border-radius: 4px; line-height: 15px;
  }
  .simple-user-time-inline { font-size: 11px; color: #ccc; }
  .simple-user-message-inner {
    display: flex; justify-content: flex-end; align-items: flex-start;
    gap: .5rem; max-width: 85%;
  }
  .simple-user-message-content {
    display: flex; flex-direction: column; align-items: flex-end;
  }
  .simple-user-message-bubble {
    background-color: #fff0f0; border-radius: 12px; padding: .625rem .8rem;
    word-wrap: break-word; overflow-wrap: break-word; max-width: 280px;
  }
  .simple-user-message-text {
    font-size: 15px; line-height: 1.45; color: #1f2937;
  }
  .user-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0;
  }
  .message-read-status {
    margin-top: 4px; padding-right: 2px; text-align: right;
    font-size: 11px; line-height: 15px; color: #ccc;
  }

  /* input-box 底部输入栏 */
  .input-box {
    background: #f5f5f5; flex-shrink: 0; position: sticky; bottom: 0; z-index: 10;
  }
  .quickBar-comp {
    overflow-x: auto; overflow-y: hidden; padding: 10px 12px 8px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .quickBar-comp::-webkit-scrollbar { display: none; }
  .quickBar-list { display: flex; gap: 10px; }
  .quickBar-item { flex-shrink: 0; pointer-events: all; }
  .quickBar-item-content {
    align-items: center; background: #fff; border-radius: 10px;
    display: flex; height: 40px; justify-content: center;
    padding: 0 14px; cursor: pointer; gap: 5px;
  }
  .quickBar-item-content svg { width: 16px; height: 16px; flex-shrink: 0; color: #333; }
  .quickBar-item-content span { font-size: 13px; color: #333; white-space: nowrap; }

  .input-box-main {
    align-items: center; display: flex; gap: 10px;
    padding: 8px 12px calc(env(safe-area-inset-bottom)/2 + 10px);
  }
  .input-box-textarea-wrapper {
    align-items: center; background: #fff; border-radius: 22px;
    display: flex; flex: 1; flex-direction: row;
    padding: 10px 16px; position: relative;
  }
  .input-box-field { flex: 1; padding: 0; }
  .van-field__body { align-items: center; display: flex; }
  .van-field__control {
    background: transparent; border: 0; color: #333; font-size: 15px;
    height: 24px; line-height: 24px; min-height: 24px;
    display: block; margin: 0; min-width: 0; padding: 0; resize: none;
    width: 100%; outline: none;
  }
  .van-field__control::placeholder { color: #bbb; }
  .input-box-icons {
    display: flex; flex-shrink: 0; margin-left: 8px; align-items: center;
  }
  .emoji-btn { border: none; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; }
  .emoji-btn svg { width: 24px; height: 24px; color: #333; }
  .outside-plus-btn {
    border: none; background: #fff; padding: 0; cursor: pointer;
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .outside-plus-btn svg { width: 22px; height: 22px; color: #333; }

  /* 发送按钮（原版动态注入） */
  .chat-send-btn {
    display: none; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 0; background: #fff;
    border-radius: 50%; padding: 0; cursor: pointer; flex-shrink: 0;
    margin-left: 10px;
  }
  .chat-send-btn svg { width: 22px; height: 22px; color: #333; }
  .chat-send-btn:disabled, .chat-send-btn.muted-disabled { cursor: not-allowed !important; }
  .chat-send-btn:disabled img, .chat-send-btn.muted-disabled img { opacity: .38 !important; filter: grayscale(1); }

  .loading-tip { text-align: center; color: #bbb; font-size: 13px; padding: 30px 0; }

  /* 图片消息 */
  .chat-message-image { max-width: 200px; max-height: 200px; border-radius: 8px; object-fit: cover; }
  .image-message-bubble { padding: 4px !important; background: transparent !important; box-shadow: none !important; }

  /* 带图片的系统消息 —— 原版HDChat */
  .welcome-image { margin-top: 8px; }
  .welcome-image img { max-width: 100%; border-radius: 6px; display: block; }
  .agent-message-text .mention-tag { color: #3b82f6; }

  /* 满意度评价卡片 */
  .satisfaction-card {
    background: #fff; border-radius: 12px; padding: 16px 18px;
    display: flex; align-items: center; justify-content: space-between;
    max-width: 320px; min-width: 280px;
  }
  .satisfaction-question {
    font-size: 15px; color: #1a1a1a; font-weight: 500; flex-shrink: 0;
  }
  .satisfaction-options {
    display: flex; gap: 20px; flex-shrink: 0;
  }
  .satisfaction-option {
    display: flex; flex-direction: column; align-items: center; cursor: pointer;
  }
  .satisfaction-emoji {
    width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 4px;
  }
  .satisfaction-label {
    font-size: 12px; color: #999;
  }
  
  /* 更多功能面板（加号展开面板） */
  .chat-more-panel {
    background: #f7f7f8;
    border-top: 1px solid #e5e5e5;
    padding: 14px 20px 18px;
    display: flex;
    align-items: center;
    gap: 24px;
    animation: slideUpPanel 0.2s ease-out;
  }
  @keyframes slideUpPanel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .chat-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .chat-more-icon {
    width: 52px;
    height: 52px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 6px;
    transition: background 0.15s, transform 0.1s;
  }
  .chat-more-item:active .chat-more-icon {
    background: #ebebeb;
    transform: scale(0.95);
  }
  .chat-more-text {
    font-size: 12px;
    color: #666;
    line-height: 1.2;
  }
  /* 图片消息样式 */
  .chat-message-image {
    max-width: 180px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .chat-message-image:active {
    opacity: 0.85;
  }
  .image-message-bubble {
    padding: 3px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  }
  .simple-user-message-container .image-message-bubble {
    background: #fff !important;
  }
  /* 图片放大预览遮罩弹窗 */
  .image-preview-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
  .image-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 96vw;
    max-height: 92vh;
  }
  .image-preview-modal img {
    max-width: 96vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  }
  .image-preview-actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  .image-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
  }
  .image-preview-btn.save-btn {
    background: #ff5000;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255,80,0,0.35);
  }
  .image-preview-btn.save-btn:active {
    opacity: 0.85;
    transform: scale(0.97);
  }
  .image-preview-btn.close-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
  }
  .image-preview-close {
    position: absolute;
    top: 16px;
    right: 18px;
    color: #fff;
    font-size: 28px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000000;
  }

</style>
<style id="noscript-hide">html[data-js-rendered="1"] body{opacity:1}body{opacity:1!important;transition:opacity .3s}</style>
<noscript><style>body{opacity:1!important}</style></noscript>
</head>
<body>
<div class="imDetail-page">
  <div class="chat-view">
    <!-- 顶部栏 -->
    <header class="header">
      <div class="header-inner">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style="cursor:pointer" onclick="history.back()">
          <path d="M15.9078 19.0673C16.2299 19.3895 16.23 19.9112 15.9078 20.2333C15.5857 20.5553 15.064 20.5553 14.7418 20.2333L7.47766 12.9692C6.94248 12.4336 6.94221 11.5652 7.47766 11.0297L14.7418 3.76703C15.064 3.44484 15.5856 3.44484 15.9078 3.76703C16.23 4.08921 16.23 4.61086 15.9078 4.93304L8.84289 11.9994L15.9078 19.0673Z" fill="currentColor"/>
        </svg>
        <div class="title-container">
          <h1 class="title">
            <?php echo e($kefu_name); ?>
            <span class="conversation-tag conversation-tag_official" style="margin-left:6px;">
              <svg viewBox="0 0 24 24" fill="#f0643a"><path d="M12 2L4 5v6c0 5.25 3.75 10.15 8 11 4.25-.85 8-5.75 8-11V5l-8-3zm-2 14.59l-4-4L7.41 11.17 10 13.76l6.59-6.59L18 8.56l-8 8.03z"/></svg>
              官方
            </span>
          </h1>
          <div class="status-container">
            <span class="status-online">在线</span>
            <span class="status-time">服务时间09:30-00:30</span>
          </div>
        </div>
        <div class="action-wrapper">
          <img class="more" src="https://oss.pzds.com/mobileV3/202605191533794.png" alt="更多" onclick="openSettings()">
        </div>
      </div>
    </header>

    <!-- 消息区域 -->
    <main class="chat-area">
      <div class="chat-messages" id="chatMessages">
        <div class="message message-tip"><span>创建会话成功</span></div>
        <div class="loading-tip" id="loadingTip">加载中…</div>
      </div>
    </main>

    <!-- 底部输入栏 -->
    <div class="input-box">
      <!-- 快捷功能栏 -->
      <div class="quickBar-comp">
        <div class="quickBar-list">
          <div class="quickBar-item">
            <div class="quickBar-item-content" onclick="openEvaluate()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
              <span>评价客服</span>
            </div>
          </div>
          <div class="quickBar-item">
            <div class="quickBar-item-content" onclick="openProductConsult()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M9 12l2 2 4-4"/></svg>
              <span>咨询商品</span>
            </div>
          </div>
          <div class="quickBar-item">
            <div class="quickBar-item-content" onclick="openOrderConsult()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
              <span>咨询订单</span>
            </div>
          </div>
          <div class="quickBar-item">
            <div class="quickBar-item-content" onclick="openHotQA()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
              <span>热门问题</span>
            </div>
          </div>
        </div>
      </div>
      <div class="input-box-main">
        <div class="input-box-textarea-wrapper">
          <div class="input-box-field">
            <div class="van-field__body">
              <textarea class="van-field__control van-field__control--min-height"
                id="msgInput" placeholder="请输入您的问题~" rows="1"></textarea>
            </div>
          </div>
          <div class="input-box-icons">
            <button type="button" class="emoji-btn" aria-label="表情">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
            </button>
          </div>
        </div>
        <button type="button" class="outside-plus-btn" aria-label="更多">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
        </button>
      </div>
      <!-- 底部更多功能面板（相册/拍照） -->
      <div class="chat-more-panel" id="chatMorePanel" style="display:none;">
        <div class="chat-more-item" id="btnPickPhoto">
          <div class="chat-more-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:28px;height:28px;color:#333;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
          </div>
          <span class="chat-more-text">相册</span>
        </div>
        <div class="chat-more-item" id="btnTakePhoto">
          <div class="chat-more-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:28px;height:28px;color:#333;"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
          </div>
          <span class="chat-more-text">拍照</span>
        </div>
      </div>
      <input type="file" id="chatImageInput" accept="image/*" style="display:none;">
      <input type="file" id="chatCameraInput" accept="image/*" capture="camera" style="display:none;">
    </div>
  </div>
</div>

<script src="static/js/no-zoom.js"></script>
<script src="static/js/front-interactive.js"></script>
<script src="static/js/card-templates.js"></script>
<script>
(function () {
  'use strict';

  // 由 PHP 注入的初始参数（已强制转整）
  var SESSION_ID = <?php echo json_encode($sid); ?> || 0;
  var KEFU_ID    = <?php echo json_encode($kefu_id); ?> || 1;
  var KEFU_AVATAR = <?php echo json_encode($kefu_avatar); ?>;
  var KEFU_NAME   = <?php echo json_encode($kefu_name); ?>;
  var MAX_LEN = 2000;

  var lastRenderedId = 0;
  var pollTimer = null;
  var sending = false;

  var messagesEl = document.getElementById('chatMessages');
  var input = document.getElementById('msgInput');
  var loadingTip = document.getElementById('loadingTip');

  // HTML 转义，防 XSS
  function escapeHtml(t) {
    if (t === null || t === undefined) return '';
    var d = document.createElement('div');
    d.textContent = String(t);
    return d.innerHTML;
  }

  // 1:1 复刻原版：检测 [拉群卡片] 前缀，解析 JSON
  function parseGroupInvite(content) {
    try {
      return String(content || '').startsWith('[拉群卡片]')
        ? JSON.parse(String(content).slice(6))
        : null;
    } catch (e) { return null; }
  }

  // 1:1 复刻原版：渲染拉群卡片
  function renderGroupInviteCard(data) {
    return '<div class="custom-html-card" style="background:#fff;border-radius:12px;overflow:hidden;max-width:300px;border:1px solid rgba(15,23,42,.06);">' +
      '<div class="official-card-head" style="padding:16px 16px 10px;border-bottom:1px solid #f5f5f5;text-align:center;">' +
        '<h2 class="bind-card-title" style="margin:0;font-size:17px;font-weight:700;color:#222;line-height:1.35;">交易群聊已创建 ' +
          '<span class="official-card-badge" style="display:inline-flex;height:18px;vertical-align:2px;align-items:center;padding:0 6px;border-radius:9px;background:#fff1f0;color:#d93025;font-size:11px;font-weight:700;margin-left:5px;">官方</span>' +
        '</h2>' +
      '</div>' +
      '<div class="bind-steps" style="padding:12px 16px 4px;color:#555;font-size:14px;line-height:1.65;margin:0;">' +
        '<p style="margin:0;">当前交易已付款，请点击下方按钮加入本次交易群聊。</p>' +
      '</div>' +
      '<div class="bind-tips" style="background:#f7f7f7;border-radius:8px;padding:10px 12px;margin:8px 16px 14px;">' +
        '<p style="margin:0;color:#888;font-size:12px;line-height:1.5;"><span>温馨提示：</span>请认准官方客服创建的交易群聊，进群后按照客服指引继续处理，切勿私下交易。</p>' +
      '</div>' +
      '<div class="custom-bind-btn-group" style="display:flex;border-top:1px solid #f0f0f0;">' +
        '<button class="custom-card-action custom-bind-success" type="button" ' +
          'style="flex:1;height:46px;border:0!important;border-radius:0;background:#fff;color:#d93025;font-size:15px;font-weight:700;cursor:pointer;text-align:center;" ' +
          'onclick="joinGroupChat(' + (data ? (window.parseInt(data.id) || 0) : 0) + ')">加入群聊</button>' +
      '</div>' +
    '</div>';
  }

  // 点击"加入群聊"跳转
  window.joinGroupChat = function (roomId) {
    if (!roomId) return;
    window.location.href = 'group_chat.php?room_id=' + roomId;
  };

  // 秒级时间戳 → HH:MM
  function formatTime(ts) {
    if (!ts) return '';
    var t = new Date(Number(ts) * 1000);
    var h = t.getHours();
    var m = t.getMinutes();
    return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m);
  }

    window.fixImgSrc = function(img) {
    if (!img || img._fixed) return;
    img._fixed = true;
    var src = img.getAttribute('src') || '';
    if (src.indexOf('/uploads/') === 0) {
      img.src = src.substring(1);
    } else if (src.indexOf('uploads/') === 0) {
      img.src = '/' + src;
    }
  };
  // 全局大图预览与保存
  window.previewChatImage = function (src) {
    if (!src) return;
    var modal = document.getElementById('imagePreviewModal');
    var img = document.getElementById('imagePreviewImg');
    if (modal && img) {
      img.src = src;
      modal.style.display = 'flex';
    }
  };
  window.closeChatImagePreview = function () {
    var modal = document.getElementById('imagePreviewModal');
    if (modal) modal.style.display = 'none';
  };
  window.saveChatImage = function (src) {
    if (!src) return;
    try {
      var a = document.createElement('a');
      a.href = src;
      var ext = 'jpg';
      var match = src.match(/\.(jpg|jpeg|png|webp|gif|bmp)(?:\?.*)?$/i);
      if (match) ext = match[1].toLowerCase();
      a.download = 'chat_' + Date.now() + '.' + ext;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      if (typeof showToast === 'function') {
        showToast('正在下载保存图片...');
      }
    } catch (e) {
      window.open(src, '_blank');
    }
  };

  // 识别是否为图片消息（支持全路径与相对路径）
  function isImageMessage(msg) {
    var t = msg.msg_type || 'text';
    if (t === 'image') return true;
    var c = String(msg.content || '').trim();
    return /^(?:\/?uploads\/|https?:\/\/|data:image\/).+\.(jpg|jpeg|png|webp|gif|bmp)(?:\?.*)?$/i.test(c);
  }

  // 渲染单条消息 —— 1:1 复制原版HDChat结构
  var MY_NAME = <?php echo json_encode($myDisplayName, JSON_UNESCAPED_UNICODE); ?>;
  var MY_NO = <?php echo json_encode($myUserNo); ?>;
  var MY_AVATAR_URL = <?php echo json_encode(!empty($u['avatar']) ? $u['avatar'] : '/static/uploads/avatars/panda_1.jpg'); ?>;

  function renderMessage(msg) {
    var content = escapeHtml(msg.content);
    var msgType = msg.msg_type || 'text';
    var isImg = isImageMessage(msg);

    // 将 @xxx 转为 mention-tag
    function formatMentions(text) {
      return text.replace(/(@[\S]+)/g, '<span class="mention-tag">$1</span>');
    }

    if (msg.sender_type === 'system') {
      return '<div class="message message-tip"><span>' + content + '</span></div>';
    }

    if (msg.sender_type === 'user') {
      // simple-user-message-container 用户消息（右侧）
      var userTime = formatTime(msg.created_at || msg.created_time || msg.time || msg.ts);
      var userBody = '';
      if (isImg) {
        userBody = '<div class="simple-user-message-bubble image-message-bubble">' +
          '<img class="chat-message-image" src="' + escapeHtml(msg.content) + '" alt="图片" onerror="fixImgSrc(this)" onclick="previewChatImage(this.src)">' +
        '</div>';
      } else {
        userBody = '<div class="simple-user-message-bubble">' +
          '<p class="simple-user-message-text">' + content + '</p>' +
        '</div>';
      }
      return '<div class="simple-user-message-container">' +
        '<div class="simple-user-name-row">' +
          '<span class="simple-user-name">' + escapeHtml(MY_NAME) + '</span>' +
          '<span class="simple-user-no">' + escapeHtml(MY_NO) + '</span>' +
          (userTime ? '<span class="simple-user-time-inline">' + userTime + '</span>' : '') +
        '</div>' +
        '<div class="simple-user-message-inner">' +
          '<div class="simple-user-message-content">' +
            userBody +
            '<div class="message-read-status mine-read-status">已读</div>' +
          '</div>' +
          '<img class="user-avatar" src="' + escapeHtml(MY_AVATAR_URL) + '" alt="用户头像" onerror="this.src=\'/static/uploads/avatars/panda_1.jpg\'">' +
        '</div>' +
      '</div>';
    }

    // 官方徽章HTML（橙色盾形对勾）
    var officialBadge = '<span class="conversation-tag conversation-tag_official">' +
      '<svg viewBox="0 0 24 24" fill="#f0643a"><path d="M12 2L4 5v6c0 5.25 3.75 10.15 8 11 4.25-.85 8-5.75 8-11V5l-8-3zm-2 14.59l-4-4L7.41 11.17 10 13.76l6.59-6.59L18 8.56l-8 8.03z"/></svg>' +
      '官方</span>';
    var agentTime = formatTime(msg.created_at || msg.created_time || msg.time || msg.ts);

    // 生成客服消息头部行（名称 + 官方徽章 + 时间）
    var agentHeaderRow = '<div class="agent-name-row">' +
      '<span class="agent-name">' + escapeHtml(KEFU_NAME) + '</span>' +
      officialBadge +
      (agentTime ? '<span class="agent-time">' + agentTime + '</span>' : '') +
    '</div>';

    // ===== 1:1 复刻原版：检测 [拉群卡片] =====
    var inviteData = parseGroupInvite(msg.content);
    if (inviteData) {
      var cardHtml = renderGroupInviteCard(inviteData);
      return '<div class="agent-message-container">' +
        '<div class="agent-message-inner">' +
          '<img class="agent-avatar" src="' + KEFU_AVATAR + '" alt="客服头像">' +
          '<div class="agent-message-content">' +
            agentHeaderRow +
            '<div class="agent-message-bubble custom-html-card-bubble">' + cardHtml + '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
    }

    // 卡片类型消息
    var cardTypes = ['bind-confirm','trade-info','order-paid','order-consult','account-password','text-image'];
    if (cardTypes.indexOf(msgType) >= 0 && window.CardTemplates) {
      var cardHtml = window.CardTemplates.render(msgType, msg.extra_data || '');
      if (cardHtml) {
        return '<div class="agent-message-container">' +
          '<div class="agent-message-inner">' +
            '<img class="agent-avatar" src="' + KEFU_AVATAR + '" alt="客服头像">' +
            '<div class="agent-message-content">' +
              agentHeaderRow +
              '<div class="agent-message-bubble custom-html-card-bubble">' + cardHtml + '</div>' +
            '</div>' +
          '</div>' +
        '</div>';
      }
    }

    // 满意度评价卡片
    if (msgType === 'satisfaction' || msgType === 'evaluation') {
      var satHtml = '<div class="satisfaction-card">' +
        '<div class="satisfaction-question">您对本次服务满意吗？</div>' +
        '<div class="satisfaction-options">' +
          '<div class="satisfaction-option" onclick="submitSatisfaction(\'不满意\')">' +
            '<div class="satisfaction-emoji">😠</div>' +
            '<div class="satisfaction-label">不满意</div>' +
          '</div>' +
          '<div class="satisfaction-option" onclick="submitSatisfaction(\'一般\')">' +
            '<div class="satisfaction-emoji">😐</div>' +
            '<div class="satisfaction-label">一般</div>' +
          '</div>' +
          '<div class="satisfaction-option" onclick="submitSatisfaction(\'满意\')">' +
            '<div class="satisfaction-emoji">😍</div>' +
            '<div class="satisfaction-label">满意</div>' +
          '</div>' +
        '</div>' +
      '</div>';
      return '<div class="agent-message-container">' +
        '<div class="agent-message-inner">' +
          '<img class="agent-avatar" src="' + KEFU_AVATAR + '" alt="客服头像">' +
          '<div class="agent-message-content">' +
            agentHeaderRow +
            '<div class="agent-message-bubble custom-html-card-bubble">' + satHtml + '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
    }

    // agent-message-container 客服消息（左侧）
    var avatar = KEFU_AVATAR || 'https://yxlove.zfur.me/assets/img/pznew-kefu.webp';
    var kefuBody = '';
    if (isImg) {
      kefuBody = '<div class="agent-message-bubble image-message-bubble">' +
        '<img class="chat-message-image" src="' + escapeHtml(msg.content) + '" alt="图片" onerror="fixImgSrc(this)" onclick="previewChatImage(this.src)">' +
      '</div>';
    } else {
      kefuBody = '<div class="agent-message-bubble">' +
        '<p class="agent-message-text">' + formatMentions(content) + '</p>' +
      '</div>';
    }
    return '<div class="agent-message-container">' +
      '<div class="agent-message-inner">' +
        '<img class="agent-avatar" src="' + avatar + '" alt="客服头像">' +
        '<div class="agent-message-content">' +
          agentHeaderRow +
          kefuBody +
        '</div>' +
      '</div>' +
    '</div>';
  }

  function scrollToBottom() {
    var area = document.querySelector('.chat-area');
    if (area) area.scrollTop = area.scrollHeight;
  }

  function renderAll(msgs) {
    if (loadingTip) { loadingTip.style.display = 'none'; loadingTip = null; }
    var html = '';
    for (var i = 0; i < msgs.length; i++) {
      html += renderMessage(msgs[i]);
    }
    messagesEl.innerHTML = html;
    scrollToBottom();
  }

  function loadMessages() {
    if (!SESSION_ID) return;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'api.php?action=get_messages&session_id=' + encodeURIComponent(SESSION_ID) + '&_t=' + Date.now(), true);
    xhr.onload = function () {
      if (xhr.status !== 200) return;
      var d;
      try { d = JSON.parse(xhr.responseText); } catch (e) { return; }
      if (!d.success || !d.messages) return;
      var msgs = d.messages;
      var newestId = msgs.length ? Number(msgs[msgs.length - 1].id) : 0;
      if (newestId === lastRenderedId && messagesEl.children.length > 1) return;
      lastRenderedId = newestId;
      renderAll(msgs);
    };
    xhr.send();
  }

  function startPolling() {
    if (pollTimer) return;
    pollTimer = setInterval(loadMessages, 2000);
  }

  function updateKefuDisplay(kefu) {
    if (!kefu) return;
    if (kefu.kefu_id) KEFU_ID = kefu.kefu_id;
    if (kefu.name) {
      KEFU_NAME = kefu.name;
      var nameEl = document.querySelector('.hdchat-header-title-text, .header-title, .agent-title');
      if (nameEl) nameEl.textContent = kefu.name;
      document.title = kefu.name + ' - 专属在线咨询';
    }
    if (kefu.avatar) {
      KEFU_AVATAR = kefu.avatar;
      var avatarEls = document.querySelectorAll('.header-avatar img, .agent-avatar-hd img');
      avatarEls.forEach(function(img) { img.src = kefu.avatar; });
    }
  }

  function initSession() {
    var xhr = new XMLHttpRequest();
    // 无论初始是否有 SESSION_ID，都向后端确认/智能配对，确保会话与客服100%绑定
    var url = 'api.php?action=get_or_create_session&kefu_id=' + encodeURIComponent(KEFU_ID || '') + '&_t=' + Date.now();
    xhr.open('GET', url, true);
    xhr.onload = function () {
      if (xhr.status === 200) {
        try {
          var d = JSON.parse(xhr.responseText);
          if (d.success && d.session_id) {
            SESSION_ID = Number(d.session_id);
            if (d.kefu) {
              updateKefuDisplay(d.kefu);
            }
          }
        } catch (e) {}
      }
      loadMessages();
      startPolling();
    };
    xhr.onerror = function() {
      // 容错兜底
      loadMessages();
      startPolling();
    };
    xhr.send();
  }

  function showToast(msg) {
    if (typeof window.showToast === 'function') { window.showToast(msg); return; }
    var t = document.getElementById('toast');
    if (!t) {
      t = document.createElement('div');
      t.id = 'toast';
      t.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.75);color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;z-index:99999;opacity:0;transition:opacity 0.15s;pointer-events:none';
      document.body.appendChild(t);
    }
    t.textContent = msg;
    t.style.opacity = '1';
    clearTimeout(window._toastTimer);
    window._toastTimer = setTimeout(function () { t.style.opacity = '0'; }, 1500);
  }

  // 原版HDChat发送按钮逻辑：输入框有内容时显示发送按钮
  function setupSendButton() {
    var mainEl = document.querySelector('.input-box-main');
    if (!mainEl || document.querySelector('.chat-send-btn')) return;
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'chat-send-btn';
    btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>';
    mainEl.appendChild(btn);

    var updateBtn = function () {
      btn.style.display = input.value.trim() ? 'inline-flex' : 'none';
    };

    btn.addEventListener('click', function () {
      sendMessage();
    });

    input.addEventListener('input', updateBtn);
    updateBtn();
  }

  function sendMessage() {
    if (sending) return;
    var content = input.value.trim();
    if (!content) return;
    if (content.length > MAX_LEN) { showToast('消息过长'); return; }
    if (!SESSION_ID) { showToast('会话未就绪'); return; }

    sending = true;
    // 乐观更新：立即显示用户消息
    var now = new Date();
    var nowH = now.getHours(), nowM = now.getMinutes();
    var nowTime = (nowH < 10 ? '0' + nowH : nowH) + ':' + (nowM < 10 ? '0' + nowM : nowM);
    var optimisticHtml = '<div class="simple-user-message-container">' +
      '<div class="simple-user-name-row">' +
        '<span class="simple-user-name">' + escapeHtml(MY_NAME) + '</span>' +
        '<span class="simple-user-no">' + escapeHtml(MY_NO) + '</span>' +
      '</div>' +
      '<div class="simple-user-time">' + nowTime + '</div>' +
      '<div class="simple-user-message-inner">' +
        '<div class="simple-user-message-content">' +
          '<div class="simple-user-message-bubble">' +
            '<p class="simple-user-message-text">' + escapeHtml(content) + '</p>' +
          '</div>' +
          '<div class="message-read-status mine-read-status">未读</div>' +
        '</div>' +
        '<img class="user-avatar" src="https://yxlove.zfur.me/assets/img/pznew-user.webp" alt="用户头像">' +
      '</div>' +
    '</div>';
    messagesEl.insertAdjacentHTML('beforeend', optimisticHtml);
    scrollToBottom();
    input.value = '';
    var sendBtn = document.querySelector('.chat-send-btn');
    if (sendBtn) sendBtn.style.display = 'none';

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'api.php?action=send_message', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function () {
      sending = false;
      if (xhr.status !== 200) { showToast('发送失败'); return; }
      var d;
      try { d = JSON.parse(xhr.responseText); } catch (e) { showToast('发送失败'); return; }
      if (d.success) {
        loadMessages();
      } else {
        showToast(d.msg || '发送失败');
      }
    };
    xhr.onerror = function () {
      sending = false;
      showToast('网络错误');
    };
    xhr.send('session_id=' + encodeURIComponent(SESSION_ID) + '&content=' + encodeURIComponent(content));
  }

  // 事件绑定
  input.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  });

  // 自动调整输入框高度
  input.addEventListener('input', function () {
    this.style.height = 'auto';
    this.style.height = Math.min(this.scrollHeight, 100) + 'px';
  });

  // 启动
  setupSendButton();
  setupPlusPanel();
  // ===== 单聊发送图片与加号功能面板 =====
  function sendChatImage(file) {
    if (!file) return;
    if (!SESSION_ID) { showToast('会话未就绪'); return; }
    if (file.size > 10 * 1024 * 1024) { showToast('图片不能超过10MB'); return; }
    if (file.type && file.type.indexOf('image/') !== 0 && !/\.(jpg|jpeg|png|webp|gif)$/i.test(file.name)) {
      showToast('仅支持图片文件');
      return;
    }

    var morePanel = document.getElementById('chatMorePanel');
    if (morePanel) morePanel.style.display = 'none';

    // 本地临时预览乐观更新
    var localUrl = window.URL ? window.URL.createObjectURL(file) : '';
    var optId = 'opt_img_' + Date.now();
    var optHtml = '<div class="simple-user-message-container" id="' + optId + '">' +
      '<div class="simple-user-message-inner">' +
        '<div class="simple-user-message-content">' +
          '<div class="simple-user-message-bubble image-message-bubble" style="position:relative;">' +
            '<img class="chat-message-image" src="' + (localUrl || '') + '" alt="图片" style="opacity:0.65;">' +
            '<div class="img-upload-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);border-radius:8px;color:#fff;font-size:12px;">发送中...</div>' +
          '</div>' +
          '<div class="message-read-status mine-read-status">发送中</div>' +
        '</div>' +
        '<img class="user-avatar" src="https://yxlove.zfur.me/assets/img/pznew-user.webp" alt="用户头像">' +
      '</div>' +
    '</div>';
    messagesEl.insertAdjacentHTML('beforeend', optHtml);
    scrollToBottom();

    var formData = new FormData();
    formData.append('file', file);

    var uploadXhr = new XMLHttpRequest();
    uploadXhr.open('POST', 'api.php?action=upload_chat_image', true);
    uploadXhr.onload = function () {
      if (uploadXhr.status !== 200) {
        removeOrMarkFail(optId, '上传失败');
        return;
      }
      var res;
      try { res = JSON.parse(uploadXhr.responseText); } catch (e) {
        removeOrMarkFail(optId, '解析响应失败');
        return;
      }
      if (!res.success || !res.url) {
        removeOrMarkFail(optId, res.msg || '上传图片失败');
        return;
      }

      var remoteUrl = res.url;
      // 调用发送消息接口
      var sendXhr = new XMLHttpRequest();
      sendXhr.open('POST', 'api.php?action=send_message', true);
      sendXhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      sendXhr.onload = function () {
        if (sendXhr.status === 200) {
          try {
            var d = JSON.parse(sendXhr.responseText);
            if (d.success) {
              var optNode = document.getElementById(optId);
              if (optNode) optNode.remove();
              loadMessages();
              return;
            }
          } catch (e) {}
        }
        removeOrMarkFail(optId, '消息发送失败');
      };
      sendXhr.onerror = function () {
        removeOrMarkFail(optId, '网络异常');
      };
      sendXhr.send('session_id=' + encodeURIComponent(SESSION_ID) + '&content=' + encodeURIComponent(remoteUrl) + '&msg_type=image');
    };
    uploadXhr.onerror = function () {
      removeOrMarkFail(optId, '网络异常');
    };
    uploadXhr.send(formData);
  }

  function removeOrMarkFail(id, tip) {
    showToast(tip || '发送失败');
    var el = document.getElementById(id);
    if (el) {
      var loading = el.querySelector('.img-upload-loading');
      if (loading) {
        loading.textContent = '发送失败';
        loading.style.background = 'rgba(239, 68, 68, 0.7)';
      }
    }
  }

  function setupPlusPanel() {
    var plusBtn = document.querySelector('.outside-plus-btn');
    var morePanel = document.getElementById('chatMorePanel');
    var pickPhoto = document.getElementById('btnPickPhoto');
    var takePhoto = document.getElementById('btnTakePhoto');
    var imgInput = document.getElementById('chatImageInput');
    var camInput = document.getElementById('chatCameraInput');

    if (plusBtn && morePanel) {
      plusBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var isShown = morePanel.style.display !== 'none';
        morePanel.style.display = isShown ? 'none' : 'flex';
        if (!isShown) {
          scrollToBottom();
          if (input) input.blur();
        }
      });
    }

    if (pickPhoto && imgInput) {
      pickPhoto.addEventListener('click', function () {
        imgInput.click();
      });
      imgInput.addEventListener('change', function () {
        if (this.files && this.files[0]) {
          sendChatImage(this.files[0]);
          this.value = '';
        }
      });
    }

    if (takePhoto && camInput) {
      takePhoto.addEventListener('click', function () {
        camInput.click();
      });
      camInput.addEventListener('change', function () {
        if (this.files && this.files[0]) {
          sendChatImage(this.files[0]);
          this.value = '';
        }
      });
    }

    // 输入框聚焦时自动隐藏加号面板
    if (input && morePanel) {
      input.addEventListener('focus', function () {
        morePanel.style.display = 'none';
      });
    }
  }

  // 满意度评价提交
  window.submitSatisfaction = function(level) {
    if (!SESSION_ID) { showToast('会话未就绪'); return; }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'api.php?action=send_message', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function () {
      if (xhr.status === 200) {
        try {
          var d = JSON.parse(xhr.responseText);
          if (d.success) {
            showToast('感谢您的评价：' + level);
            loadMessages();
            return;
          }
        } catch (e) {}
      }
      showToast('评价提交失败');
    };
    xhr.onerror = function () { showToast('网络错误'); };
    xhr.send('session_id=' + encodeURIComponent(SESSION_ID) + '&content=' + encodeURIComponent('满意度评价：' + level));
  };

  initSession();

  // 页面可见性：隐藏时暂停轮询，回到前台立即刷新
  document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
      if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
    } else {
      loadMessages();
      startPolling();
    }
  });
})();
</script>
<!-- 快捷按钮+设置弹窗 - 仿原版盼之 -->
<style>
.popup-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); z-index:9999; }
.popup-overlay.active { display:flex; align-items:flex-end; justify-content:center; }
.popup-card { background:#fff; border-radius:3.2vw 3.2vw 0 0; width:100%; max-width:24rem; max-height:85vh; overflow-y:auto; position:relative; pointer-events:auto; }
.popup-header { display:flex; align-items:center; justify-content:center; position:relative; padding:4.26667vw; border-bottom:0.5px solid #f6f6f6; }
.popup-title { font-size:4.26667vw; font-weight:500; color:#0a0a0a; }
.popup-close { position:absolute !important; right:3.2vw; top:3.2vw; width:10vw; height:10vw; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; }
.popup-close img { width:4.26667vw; height:4.26667vw; pointer-events:none; }
.popup-body { padding:4.26667vw; }
.eval-row { margin-bottom:4.26667vw; }
.eval-label { font-size:3.73333vw; font-weight:500; color:#0a0a0a; margin-bottom:2.13333vw; }
.eval-stars { display:flex; gap:1.06667vw; }
.eval-star { width:8vw; height:8vw; cursor:pointer; }
.eval-feedback-box { border-radius:2.13333vw; padding:2.13333vw; display:flex; align-items:center; gap:2.13333vw; margin-bottom:4.26667vw; background:#f7f7f7; transition:all 0.3s; }
.eval-feedback-emoji { width:8.53333vw; height:8.53333vw; flex-shrink:0; }
.eval-feedback-text { font-size:3.73333vw; color:#999; transition:all 0.3s; }
.eval-tags { display:flex; flex-wrap:wrap; gap:2.13333vw; margin-bottom:4.26667vw; }
.eval-tag { padding:0 2.66667vw; border-radius:4.53333vw; background:#f4f4f4; color:#999; font-size:3.2vw; line-height:9.06667vw; cursor:pointer; transition:all 0.2s; }
.eval-tag.active { background:#ffefee; color:#e60f0f; font-weight:500; }
.popup-textarea { width:100%; background:#f4f4f4; border:none; border-radius:2.66667vw; padding:2.66667vw; font-size:3.73333vw; color:#0a0a0a; resize:none; outline:none; line-height:5.86667vw; }
.popup-textarea::placeholder { color:#999; }
.popup-wordcount { text-align:right; font-size:3.2vw; color:#999; margin-top:1.06667vw; }
.popup-footer { display:flex; align-items:center; justify-content:space-between; margin-top:5.33333vw; padding-bottom:2.13333vw; }
.popup-fullmark { display:flex; align-items:center; gap:2.13333vw; color:#666; font-size:3.73333vw; cursor:pointer; }
.popup-fullmark-check { width:5.33333vw; height:5.33333vw; border:1.5px solid #ddd; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.popup-fullmark-check.active { background:#07c160; border-color:#07c160; }
.popup-fullmark-check.active::after { content:''; width:2.66667vw; height:1.33333vw; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(0.53333vw,-0.53333vw); }
.popup-submit-btn { flex:1; height:11.2vw; border:none; border-radius:266.4vw; background:#e60f0f; color:#fff; font-size:3.73333vw; font-weight:500; cursor:pointer; margin-left:8.53333vw; }
.popup-submit-btn:active { filter:brightness(0.9); }
.form-item { margin-bottom:4vw; }
.form-label { font-size:3.73333vw; color:#0a0a0a; margin-bottom:2.13333vw; }
.form-label .req { color:#ee0a24; }
.form-tags { display:flex; flex-wrap:wrap; gap:2.13333vw; }
.form-tag { padding:0 2.66667vw; border-radius:2.13333vw; background:#f7f7f7; color:#333; font-size:3.73333vw; line-height:10.66667vw; cursor:pointer; transition:all 0.2s; }
.form-tag.active { background:#ffefee; color:#e60f0f; font-weight:500; }
.complaint-tip { background:#f9e9da; border-radius:2.66667vw; padding:2.66667vw; font-size:3.2vw; color:#a46027; line-height:4.8vw; margin-bottom:2.66667vw; }
.settings-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); z-index:9999; }
.settings-overlay.active { display:flex; align-items:flex-end; justify-content:center; }
.settings-card { background:#fff; border-radius:3.2vw 3.2vw 0 0; width:100%; max-width:24rem; padding:0 4.26667vw env(safe-area-inset-bottom); pointer-events:auto; }
.settings-header { display:flex; align-items:center; justify-content:space-between; padding:4.26667vw 0; border-bottom:0.5px solid #f6f6f6; }
.settings-title { font-size:4.26667vw; font-weight:500; color:#0a0a0a; }
.settings-close { width:10vw; height:10vw; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.settings-close img { width:4.26667vw; height:4.26667vw; pointer-events:none; }
.settings-item { display:flex; align-items:center; justify-content:space-between; padding:4.26667vw 0; border-bottom:0.5px solid #f6f6f6; cursor:pointer; }
.settings-item:last-child { border-bottom:none; }
.settings-item-text { font-size:3.73333vw; color:#0a0a0a; }
.settings-item-arrow { width:4vw; height:4vw; opacity:0.3; }
.settings-toggle { width:12vw; height:7.2vw; border-radius:266.4vw; background:#ddd; position:relative; cursor:pointer; transition:background 0.3s; }
.settings-toggle.active { background:#07c160; }
.settings-toggle::after { content:""; position:absolute; top:0.53333vw; left:0.53333vw; width:6.13333vw; height:6.13333vw; border-radius:50%; background:#fff; transition:transform 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.settings-toggle.active::after { transform:translateX(4.8vw); }
.qa-item { background:#f4f4f4; border-radius:2.66667vw; padding:3.2vw; margin-bottom:2.66667vw; }
.qa-q { font-size:3.73333vw; color:#0a0a0a; font-weight:500; margin-bottom:1.6vw; }
.qa-a { font-size:3.2vw; color:#666; line-height:4.8vw; }
</style>

<!-- 消息设置面板 -->
<div class="settings-overlay" id="settingsPopup">
  <div class="settings-card">
    <div class="settings-header">
      <span class="settings-title">消息设置</span>
      <span class="settings-close" onclick="closePopup('settingsPopup')"><img src="https://oss.pzds.com/mobileV3/line-close.png" alt=""></span>
    </div>
    <div class="settings-item">
      <span class="settings-item-text">置顶消息</span>
      <div class="settings-toggle" id="pinToggle" onclick="togglePin()"></div>
    </div>
    <div class="settings-item" onclick="closePopup('settingsPopup');openComplaint()">
      <span class="settings-item-text">投诉服务</span>
      <img class="settings-item-arrow" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E" alt="">
    </div>
    <div class="settings-item" onclick="closePopup('settingsPopup');openFeedback()">
      <span class="settings-item-text">问题反馈</span>
      <img class="settings-item-arrow" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E" alt="">
    </div>
  </div>
</div>

<!-- 评价客服弹窗 -->
<div class="popup-overlay" id="evalPopup">
  <div class="popup-card">
    <div class="popup-header">
      <span class="popup-title">请对本次服务评分</span>
      <span class="popup-close" onclick="closePopup('evalPopup')"><img src="https://oss.pzds.com/mobileV3/line-close.png" alt=""></span>
    </div>
    <div class="popup-body">
      <div class="eval-row">
        <div class="eval-label">服务态度</div>
        <div class="eval-stars" id="starRow1">
          <img class="eval-star" data-row="1" data-val="1" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="1" data-val="2" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="1" data-val="3" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="1" data-val="4" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="1" data-val="5" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
        </div>
      </div>
      <div class="eval-row">
        <div class="eval-label">专业能力</div>
        <div class="eval-stars" id="starRow2">
          <img class="eval-star" data-row="2" data-val="1" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="2" data-val="2" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="2" data-val="3" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="2" data-val="4" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
          <img class="eval-star" data-row="2" data-val="5" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png" alt="">
        </div>
      </div>
      <div class="eval-feedback-box" id="evalFeedbackBox">
        <img class="eval-feedback-emoji" id="evalEmoji" src="https://oss.pzds.com/mobileV3/general-evaluate-stars-full-1.png" alt="">
        <span class="eval-feedback-text" id="evalFeedbackText">点亮星星，给出您的真实反馈吧～</span>
      </div>
      <div class="eval-tags">
        <span class="eval-tag" onclick="toggleTag(this)">态度友好</span>
        <span class="eval-tag" onclick="toggleTag(this)">处理快速</span>
        <span class="eval-tag" onclick="toggleTag(this)">专业能力强</span>
        <span class="eval-tag" onclick="toggleTag(this)">有责任心</span>
        <span class="eval-tag" onclick="toggleTag(this)">耐心细致</span>
        <span class="eval-tag" onclick="toggleTag(this)">回复及时</span>
      </div>
      <textarea class="popup-textarea" id="evalText" placeholder="说说您的感受..." rows="3"></textarea>
      <div class="popup-footer">
        <div class="popup-fullmark" onclick="toggleFullMark(this)">
          <div class="popup-fullmark-check"></div>
          <span>一键满分</span>
        </div>
        <button class="popup-submit-btn" onclick="submitEval()">提交</button>
      </div>
    </div>
  </div>
</div>

<!-- 问题反馈弹窗 -->
<div class="popup-overlay" id="feedbackPopup">
  <div class="popup-card">
    <div class="popup-header">
      <span class="popup-title">问题反馈</span>
      <span class="popup-close" onclick="closePopup('feedbackPopup')"><img src="https://oss.pzds.com/mobileV3/line-close.png" alt=""></span>
    </div>
    <div class="popup-body">
      <div style="font-size:3.2vw;color:#0a0a0a;margin-bottom:4vw;line-height:3.73333vw;">感谢您的反馈与建议，我们会积极改进，优化不足！</div>
      <div class="form-item">
        <div class="form-label"><span class="req">*</span> 问题类型</div>
        <div class="form-tags">
          <span class="form-tag" onclick="selectSingle(this)">功能异常</span>
          <span class="form-tag" onclick="selectSingle(this)">体验问题</span>
          <span class="form-tag" onclick="selectSingle(this)">产品建议</span>
          <span class="form-tag" onclick="selectSingle(this)">其他问题</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-label"><span class="req">*</span> 反馈内容</div>
        <textarea class="popup-textarea" id="feedbackText" placeholder="请输入不低于15字的详细说明" rows="4" maxlength="300" oninput="document.getElementById('feedbackCount').textContent=this.value.length+'/300'"></textarea>
        <div class="popup-wordcount" id="feedbackCount">0/300</div>
      </div>
      <button class="popup-submit-btn" style="width:100%;margin-left:0;margin-top:4vw;" onclick="submitFeedback()">提交</button>
    </div>
  </div>
</div>

<!-- 投诉服务弹窗 -->
<div class="popup-overlay" id="complaintPopup">
  <div class="popup-card">
    <div class="popup-header">
      <span class="popup-title">投诉服务</span>
      <span class="popup-close" onclick="closePopup('complaintPopup')"><img src="https://oss.pzds.com/mobileV3/line-close.png" alt=""></span>
    </div>
    <div class="popup-body">
      <div class="complaint-tip">非常抱歉！给您带来了不好的体验, 如实填写相关投诉内容后, 我们会尽快处理！</div>
      <div class="form-item">
        <div class="form-label"><span class="req">*</span> 投诉原因</div>
        <div class="form-tags">
          <span class="form-tag" onclick="selectSingle(this)">客服态度差</span>
          <span class="form-tag" onclick="selectSingle(this)">处理不及时</span>
          <span class="form-tag" onclick="selectSingle(this)">违规操作</span>
          <span class="form-tag" onclick="selectSingle(this)">其他原因</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-label"><span class="req">*</span> 投诉描述</div>
        <textarea class="popup-textarea" id="complaintText" placeholder="请尽可能的描述投诉的前因后果" rows="4" maxlength="300" oninput="document.getElementById('complaintCount').textContent=this.value.length+'/300'"></textarea>
        <div class="popup-wordcount" id="complaintCount">0/300</div>
      </div>
      <button class="popup-submit-btn" style="width:100%;margin-left:0;margin-top:4vw;" onclick="submitComplaint()">提交</button>
    </div>
  </div>
</div>

<!-- 咨询商品弹窗 -->
<div class="popup-overlay" id="productPopup">
  <div class="popup-card">
    <div class="popup-header">
      <span class="popup-title">咨询商品</span>
      <span class="popup-close" onclick="closePopup('productPopup')"><img src="https://oss.pzds.com/mobileV3/line-close.png" alt=""></span>
    </div>
    <div class="popup-body">
      <div style="font-size:3.2vw;color:#0a0a0a;margin-bottom:4vw;line-height:3.73333vw;">请将您要咨询的商品链接或商品编号发送给客服，客服会为您解答。</div>
      <div class="form-item">
        <div class="form-label">商品链接/编号</div>
        <textarea class="popup-textarea" id="productText" placeholder="请输入商品链接或商品编号" rows="3"></textarea>
      </div>
      <button class="popup-submit-btn" style="width:100%;margin-left:0;margin-top:4vw;" onclick="submitProduct()">发送给客服</button>
    </div>
  </div>
</div>

<!-- 咨询订单弹窗 -->
<div class="popup-overlay" id="orderPopup">
  <div class="popup-card">
    <div class="popup-header">
      <span class="popup-title">咨询订单</span>
      <span class="popup-close" onclick="closePopup('orderPopup')"><img src="https://oss.pzds.com/mobileV3/line-close.png" alt=""></span>
    </div>
    <div class="popup-body">
      <div style="font-size:3.2vw;color:#0a0a0a;margin-bottom:4vw;line-height:3.73333vw;">请输入您要咨询的订单编号，客服会为您查询订单状态。</div>
      <div class="form-item">
        <div class="form-label">订单编号</div>
        <textarea class="popup-textarea" id="orderText" placeholder="请输入订单编号" rows="2"></textarea>
      </div>
      <button class="popup-submit-btn" style="width:100%;margin-left:0;margin-top:4vw;" onclick="submitOrder()">发送给客服</button>
    </div>
  </div>
</div>

<!-- 热门问题弹窗 -->
<div class="popup-overlay" id="hotQAPopup">
  <div class="popup-card">
    <div class="popup-header">
      <span class="popup-title">热门问题</span>
      <span class="popup-close" onclick="closePopup('hotQAPopup')"><img src="https://oss.pzds.com/mobileV3/line-close.png" alt=""></span>
    </div>
    <div class="popup-body">
      <div class="qa-item"><div class="qa-q">Q：如何进行账号交易？</div><div class="qa-a">A：浏览商品列表，选择心仪账号后点击咨询客服，客服会引导您完成交易流程。</div></div>
      <div class="qa-item"><div class="qa-q">Q：交易安全如何保障？</div><div class="qa-a">A：平台提供中介担保服务，资金由平台托管，验号换绑完成后再放款给卖家。</div></div>
      <div class="qa-item"><div class="qa-q">Q：购买后账号出现问题怎么办？</div><div class="qa-a">A：请联系客服并提供订单编号，平台会根据售后政策为您处理。</div></div>
      <div class="qa-item"><div class="qa-q">Q：如何出售账号？</div><div class="qa-a">A：点击底部"卖号"按钮，按照提示填写账号信息，审核通过后即可上架。</div></div>
      <div class="qa-item"><div class="qa-q">Q：支持哪些支付方式？</div><div class="qa-a">A：支持支付宝、微信支付等多种支付方式，具体以支付页面为准。</div></div>
    </div>
  </div>
</div>

<script>
var evalScores = {1:0, 2:0};
var evalEmojiMap = {
  0: {text:'点亮星星，给出您的真实反馈吧～', emoji:'general-evaluate-stars-full-1.png', color:'#999', bg:'#f7f7f7'},
  1: {text:'大失所望，翻车啦', emoji:'general-appeal-icon-verydissatisfied.png', color:'#666', bg:'#f7f7f7'},
  2: {text:'差点意思，有点坑~', emoji:'general-appeal-icon-dissatisfied.png', color:'#666', bg:'#f7f7f7'},
  3: {text:'中规中矩，还阔以~', emoji:'general-appeal-icon-general.png', color:'#666', bg:'#f7f7f7'},
  4: {text:'挺满意的，推荐哦！', emoji:'general-appeal-icon-satisfied-over.png', color:'#ff943d', bg:'#fff9f5'},
  5: {text:'满分惊艳，爱了爱了！', emoji:'general-appeal-icon-verysatisfied.png', color:'#ff943d', bg:'#fff9f5'}
};
function openPopup(id) {
  var allPopups = document.querySelectorAll('.popup-overlay.active, .settings-overlay.active');
  allPopups.forEach(function(p) { p.classList.remove('active'); });
  var el = document.getElementById(id);
  if (el) el.classList.add('active');
}
function closePopup(id) {
  var el = document.getElementById(id);
  if (el) el.classList.remove('active');
}
function chatToast(msg) {
  var t = document.getElementById('chatToast');
  if (!t) { t = document.createElement('div'); t.id = 'chatToast'; t.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.75);color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;z-index:99999;opacity:0;transition:opacity 0.15s;pointer-events:none'; document.body.appendChild(t); }
  t.textContent = msg; t.style.opacity = '1'; clearTimeout(window._chatToastTimer); window._chatToastTimer = setTimeout(function() { t.style.opacity = '0'; }, 1500);
}
function openSettings() { openPopup('settingsPopup'); }
function togglePin() { document.getElementById('pinToggle').classList.toggle('active'); }
function openEvaluate() {
  evalScores = {1:0, 2:0};
  document.querySelectorAll('.eval-star').forEach(function(s) {
    s.src = 'https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png';
    s.onclick = function() {
      var row = parseInt(this.dataset.row); var val = parseInt(this.dataset.val);
      evalScores[row] = val;
      document.querySelectorAll('.eval-star[data-row="'+row+'"]').forEach(function(st, i) {
        st.src = i < val ? 'https://oss.pzds.com/mobileV3/general-evaluate-stars-full-1.png' : 'https://oss.pzds.com/mobileV3/general-evaluate-stars-empty-1.png';
      });
      updateEvalFeedback();
    };
  });
  document.querySelectorAll('.eval-tag').forEach(function(t) { t.classList.remove('active'); });
  document.getElementById('evalText').value = '';
  var chk = document.querySelector('.popup-fullmark-check'); if (chk) chk.classList.remove('active');
  updateEvalFeedback();
  openPopup('evalPopup');
}
function updateEvalFeedback() {
  var avg = 0, count = 0;
  if (evalScores[1] > 0) { avg += evalScores[1]; count++; }
  if (evalScores[2] > 0) { avg += evalScores[2]; count++; }
  if (count > 0) avg = Math.round(avg / count); else avg = 0;
  var info = evalEmojiMap[avg];
  document.getElementById('evalFeedbackText').textContent = info.text;
  document.getElementById('evalFeedbackText').style.color = info.color;
  document.getElementById('evalFeedbackBox').style.background = info.bg;
  document.getElementById('evalEmoji').src = 'https://oss.pzds.com/mobileV3/' + info.emoji;
}
function toggleFullMark(el) {
  var check = el.querySelector('.popup-fullmark-check');
  if (check.classList.toggle('active')) {
    [1, 2].forEach(function(row) {
      evalScores[row] = 5;
      document.querySelectorAll('.eval-star[data-row="'+row+'"]').forEach(function(st) { st.src = 'https://oss.pzds.com/mobileV3/general-evaluate-stars-full-1.png'; });
    });
    updateEvalFeedback();
  }
}
function submitEval() {
  if (!evalScores[1] || !evalScores[2]) { chatToast('请先完成评分'); return; }
  closePopup('evalPopup'); chatToast('评价提交成功，感谢您的反馈！');
}
function openFeedback() {
  document.getElementById('feedbackText').value = '';
  document.getElementById('feedbackCount').textContent = '0/300';
  document.querySelectorAll('#feedbackPopup .form-tag').forEach(function(t) { t.classList.remove('active'); });
  openPopup('feedbackPopup');
}
function submitFeedback() {
  var hasType = document.querySelector('#feedbackPopup .form-item .form-tag.active');
  if (!hasType) { chatToast('请选择问题类型'); return; }
  var text = document.getElementById('feedbackText').value.trim();
  if (text.length < 15) { chatToast('反馈内容不少于15字'); return; }
  closePopup('feedbackPopup'); chatToast('反馈提交成功，我们会尽快处理！');
}
function openComplaint() {
  document.getElementById('complaintText').value = '';
  document.getElementById('complaintCount').textContent = '0/300';
  document.querySelectorAll('#complaintPopup .form-tag').forEach(function(t) { t.classList.remove('active'); });
  openPopup('complaintPopup');
}
function submitComplaint() {
  var hasReason = document.querySelector('#complaintPopup .form-item .form-tag.active');
  if (!hasReason) { chatToast('请选择投诉原因'); return; }
  var text = document.getElementById('complaintText').value.trim();
  if (!text) { chatToast('请填写投诉描述'); return; }
  closePopup('complaintPopup'); chatToast('投诉已提交，我们会尽快核实处理！');
}
function openProductConsult() {
  document.getElementById('productText').value = '';
  openPopup('productPopup');
}
function submitProduct() {
  var text = document.getElementById('productText').value.trim();
  if (!text) { chatToast('请输入商品链接或编号'); return; }
  closePopup('productPopup');
  var input = document.getElementById('msgInput');
  if (input) { input.value = '咨询商品：' + text; input.dispatchEvent(new Event('input')); }
  chatToast('已为您填入咨询内容，点击发送即可');
}
function openOrderConsult() {
  document.getElementById('orderText').value = '';
  openPopup('orderPopup');
}
function submitOrder() {
  var text = document.getElementById('orderText').value.trim();
  if (!text) { chatToast('请输入订单编号'); return; }
  closePopup('orderPopup');
  var input = document.getElementById('msgInput');
  if (input) { input.value = '咨询订单：' + text; input.dispatchEvent(new Event('input')); }
  chatToast('已为您填入咨询内容，点击发送即可');
}
function openHotQA() { openPopup('hotQAPopup'); }
function selectSingle(el) {
  el.parentNode.querySelectorAll('.form-tag').forEach(function(s) { s.classList.remove('active'); });
  el.classList.add('active');
}
function toggleTag(el) { el.classList.toggle('active'); }
document.querySelectorAll('.popup-overlay, .settings-overlay').forEach(function(o) {
  o.addEventListener('click', function(e) { if (e.target === this) this.classList.remove('active'); });
});
document.querySelectorAll('.popup-card, .settings-card').forEach(function(c) {
  c.addEventListener('click', function(e) { e.stopPropagation(); });
  c.addEventListener('touchstart', function(e) { e.stopPropagation(); }, { passive: true });
});
</script>



<!-- 图片大图预览弹窗 -->
<div id="imagePreviewModal" class="image-preview-modal" style="display:none;" onclick="closeChatImagePreview()">
  <div class="image-preview-close" onclick="closeChatImagePreview()">&times;</div>
  <div class="image-preview-container" onclick="event.stopPropagation()">
    <img id="imagePreviewImg" src="" alt="预览大图">
    <div class="image-preview-actions">
      <button type="button" class="image-preview-btn save-btn" onclick="saveChatImage(document.getElementById('imagePreviewImg').src)">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:4px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        保存图片
      </button>
      <button type="button" class="image-preview-btn close-btn" onclick="closeChatImagePreview()">关闭</button>
    </div>
  </div>
</div>
</body>
</html>