<template>
  <div class="brain-container">
    <!-- 左侧聊天区域 -->
    <div class="chat-main">
      <!-- Chat Header -->
      <div class="chat-header">
        <div class="brain-status">
          <div class="brain-avatar">🧠</div>
          <div class="brain-info">
            <h2>企业大脑</h2>
            <p>
              <span class="status-indicator" :class="aiStatus"></span> 
              AI模型 {{ aiVersion }} · 学习了 {{ formatNumber(knowledgeCount) }} 个知识点
              <span class="header-badge" v-if="todayQueries > 0">今日 {{ todayQueries }} 次问答</span>
            </p>
          </div>
        </div>
        <div class="header-actions">
          <button class="btn btn-secondary" @click="showSkillsModal = true">
            <i class="fas fa-plug"></i> AI技能
          </button>
          <button class="btn btn-secondary" @click="showHistoryModal = true">
            <i class="fas fa-history"></i> 历史记录
          </button>
          <button class="btn btn-secondary" @click="clearChat">
            <i class="fas fa-trash-alt"></i> 清空
          </button>
        </div>
      </div>

      <!-- Chat Messages -->
      <div class="chat-messages" ref="messagesContainer">
        <!-- Welcome Message -->
        <div class="message">
          <div class="message-avatar ai">🤖</div>
          <div class="message-content">
            <div class="message-header">
              <span class="message-author">企业大脑</span>
              <span class="message-time">{{ welcomeTime }}</span>
            </div>
            <div class="message-bubble">
              <p>👋 您好，我是您的企业大脑助手！深耕跨境贸易领域多年，我可以帮您：</p>
              <div class="capability-grid">
                <div class="capability-item" @click="quickAction('寻找中东固态硬盘进口商')">
                  <div class="capability-icon">🎯</div>
                  <div class="capability-text">
                    <strong>智能寻客</strong>
                    <span>全网挖掘高匹配潜客</span>
                  </div>
                  <i class="fas fa-chevron-right capability-arrow"></i>
                </div>
                <div class="capability-item" @click="quickAction('启动邮件营销')">
                  <div class="capability-icon">📧</div>
                  <div class="capability-text">
                    <strong>邮件营销</strong>
                    <span>自动生成个性化邮件</span>
                  </div>
                  <i class="fas fa-chevron-right capability-arrow"></i>
                </div>
                <div class="capability-item" @click="quickAction('本周业绩汇总')">
                  <div class="capability-icon">📊</div>
                  <div class="capability-text">
                    <strong>数据分析</strong>
                    <span>业绩趋势智能分析</span>
                  </div>
                  <i class="fas fa-chevron-right capability-arrow"></i>
                </div>
                <div class="capability-item" @click="quickAction('查看风险预警')">
                  <div class="capability-icon">⚠️</div>
                  <div class="capability-text">
                    <strong>风险预警</strong>
                    <span>客户信用市场监控</span>
                  </div>
                  <i class="fas fa-chevron-right capability-arrow"></i>
                </div>
                <div class="capability-item" @click="quickAction('翻译英文开发信')">
                  <div class="capability-icon">🌐</div>
                  <div class="capability-text">
                    <strong>多语言翻译</strong>
                    <span>即时商务翻译</span>
                  </div>
                  <i class="fas fa-chevron-right capability-arrow"></i>
                </div>
                <div class="capability-item" @click="quickAction('给我销售策略建议')">
                  <div class="capability-icon">💡</div>
                  <div class="capability-text">
                    <strong>策略建议</strong>
                    <span>AI驱动销售策略</span>
                  </div>
                  <i class="fas fa-chevron-right capability-arrow"></i>
                </div>
              </div>
              <div class="try-tips">
                <span class="try-tip-label">💡 试试说：</span>
                <span class="try-tip-text" @click="quickAction('帮我找中东地区的SSD进口商')">"帮我找中东地区的SSD进口商"</span>
              </div>
            </div>
            <div class="quick-actions">
              <span class="quick-action" @click="quickAction('寻找中东固态硬盘进口商')">🔍 寻找潜客</span>
              <span class="quick-action" @click="quickAction('本周业绩汇总')">📊 业绩分析</span>
              <span class="quick-action" @click="quickAction('启动邮件营销')">📧 邮件营销</span>
              <span class="quick-action" @click="quickAction('查看风险预警')">⚠️ 风险预警</span>
            </div>
          </div>
        </div>

        <!-- User Messages -->
        <div v-for="(msg, index) in messages" :key="index" class="message" :class="msg.role">
          <div class="message-avatar" :class="msg.role === 'user' ? 'user' : 'ai'">
            {{ msg.role === 'user' ? '张' : '🤖' }}
          </div>
          <div class="message-content">
            <div class="message-header">
              <span class="message-author">{{ msg.role === 'user' ? '张经理' : '企业大脑' }}</span>
              <span class="message-time">{{ msg.time }}</span>
            </div>
            <div class="message-bubble" v-html="msg.content"></div>
            <div v-if="msg.role === 'ai'" class="message-actions">
              <button class="action-btn" @click="copyMessage(msg.content)" title="复制内容">
                <i class="fas fa-copy"></i>
              </button>
              <button class="action-btn" @click="favoriteMessage(msg)" title="收藏">
                <i class="fas fa-star"></i>
              </button>
              <button class="action-btn" @click="regenerateResponse(msg)" title="重新生成">
                <i class="fas fa-redo"></i>
              </button>
              <button class="action-btn" @click="speakMessage(msg.content)" title="语音播报">
                <i class="fas fa-volume-up"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Typing Indicator -->
        <div v-if="isTyping" class="message">
          <div class="message-avatar ai">🤖</div>
          <div class="message-content">
            <div class="message-bubble">
              <div class="typing-indicator">
                <span></span><span></span><span></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Input Area -->
      <div class="chat-input-area">
        <div class="input-container">
          <div class="input-wrapper">
            <button class="input-action" @click="showUploadModal = true" title="上传文件">
              <i class="fas fa-paperclip"></i>
            </button>
            <input
              type="text"
              class="chat-input"
              v-model="inputMessage"
              @keypress.enter="sendMessage"
              @input="handleInputChange"
              @keydown.up.prevent="navigateHistory(-1)"
              @keydown.down.prevent="navigateHistory(1)"
              placeholder="输入指令或问题，例如：帮我找中东地区的SSD进口商"
            />
            <button class="input-action" title="语音输入">
              <i class="fas fa-microphone"></i>
            </button>
          </div>
          <button class="send-btn" @click="sendMessage" :disabled="!inputMessage.trim()">
            <i class="fas fa-paper-plane"></i>
          </button>
        </div>
        
        <!-- 快捷指令提示 -->
        <div v-if="showCommandHints" class="command-hints">
          <div class="command-hint-header">
            <i class="fas fa-terminal"></i> 快捷指令
          </div>
          <div class="command-hint-list">
            <div class="command-hint-item" @click="selectCommand('/find')">
              <span class="cmd-name">/find</span>
              <span class="cmd-desc">智能寻客</span>
            </div>
            <div class="command-hint-item" @click="selectCommand('/analyze')">
              <span class="cmd-name">/analyze</span>
              <span class="cmd-desc">数据分析</span>
            </div>
            <div class="command-hint-item" @click="selectCommand('/email')">
              <span class="cmd-name">/email</span>
              <span class="cmd-desc">邮件营销</span>
            </div>
            <div class="command-hint-item" @click="selectCommand('/translate')">
              <span class="cmd-name">/translate</span>
              <span class="cmd-desc">多语言翻译</span>
            </div>
            <div class="command-hint-item" @click="selectCommand('/risk')">
              <span class="cmd-name">/risk</span>
              <span class="cmd-desc">风险预警</span>
            </div>
            <div class="command-hint-item" @click="selectCommand('/strategy')">
              <span class="cmd-name">/strategy</span>
              <span class="cmd-desc">策略建议</span>
            </div>
          </div>
        </div>
        
        <div class="input-hints">
          <span class="hint-item"><kbd>Enter</kbd> 发送</span>
          <span class="hint-item"><kbd>↑</kbd><kbd>↓</kbd> 历史记录</span>
          <span class="hint-item"><kbd>/</kbd> 快捷指令</span>
        </div>
      </div>
    </div>

    <!-- 右侧数据面板 -->
    <div class="data-panel">
      <!-- AI Status Card -->
      <div class="panel-section">
        <div class="ai-status-card">
          <div class="ai-status-header">
            <div class="ai-avatar">🧠</div>
            <div class="ai-status-info">
              <div class="ai-status-name">企业大脑</div>
              <div class="ai-status-badge" :class="aiStatus">
                <span class="status-dot"></span>
                {{ getAiStatusLabel(aiStatus) }}
              </div>
            </div>
          </div>
          <div class="ai-status-stats">
            <div class="ai-stat">
              <span class="ai-stat-value">{{ formatNumber(knowledgeCount) }}</span>
              <span class="ai-stat-label">知识点</span>
            </div>
            <div class="ai-stat">
              <span class="ai-stat-value">{{ todayQueries }}</span>
              <span class="ai-stat-label">今日问答</span>
            </div>
            <div class="ai-stat">
              <span class="ai-stat-value">{{ aiAccuracy }}%</span>
              <span class="ai-stat-label">准确率</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Stats -->
      <div class="panel-section">
        <div class="panel-header">
          <span class="panel-title">📊 今日数据</span>
          <span class="panel-action" @click="quickAction('详细数据分析')">查看详情</span>
        </div>
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-user-plus"></i></div>
            <div class="stat-info">
              <div class="stat-value">47</div>
              <div class="stat-label">新增潜客</div>
            </div>
            <div class="stat-trend up"><i class="fas fa-arrow-up"></i> 12%</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-paper-plane"></i></div>
            <div class="stat-info">
              <div class="stat-value">156</div>
              <div class="stat-label">邮件发送</div>
            </div>
            <div class="stat-trend up"><i class="fas fa-arrow-up"></i> 8%</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon purple"><i class="fas fa-reply"></i></div>
            <div class="stat-info">
              <div class="stat-value">32%</div>
              <div class="stat-label">回复率</div>
            </div>
            <div class="stat-trend up"><i class="fas fa-arrow-up"></i> 5%</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon orange"><i class="fas fa-handshake"></i></div>
            <div class="stat-info">
              <div class="stat-value">8</div>
              <div class="stat-label">新商机</div>
            </div>
            <div class="stat-trend up"><i class="fas fa-arrow-up"></i> 3</div>
          </div>
        </div>
      </div>

      <!-- Active Tasks -->
      <div class="panel-section">
        <div class="panel-header">
          <span class="panel-title">🔄 进行中的任务</span>
          <span class="panel-action" @click="showTasksModal = true">查看全部</span>
        </div>
        <div class="progress-list">
          <div class="progress-item" @click="showTaskDetail(0)">
            <div class="progress-header">
              <span class="progress-name"><i class="fas fa-crosshairs" style="color:var(--primary)"></i> 中东寻客任务</span>
              <span class="progress-percent" style="color:var(--primary)">65%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill blue" style="width: 65%;"></div>
            </div>
            <div class="progress-detail">
              <span>已发现 156 位潜客</span>
              <span>今日完成</span>
            </div>
          </div>
          <div class="progress-item" @click="showTaskDetail(1)">
            <div class="progress-header">
              <span class="progress-name"><i class="fas fa-envelope" style="color:var(--secondary)"></i> 邮件营销SOP</span>
              <span class="progress-percent" style="color:var(--secondary)">45%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill purple" style="width: 45%;"></div>
            </div>
            <div class="progress-detail">
              <span>已发送 89 封</span>
              <span>明天完成</span>
            </div>
          </div>
          <div class="progress-item" @click="showTaskDetail(2)">
            <div class="progress-header">
              <span class="progress-name"><i class="fas fa-bell" style="color:var(--info)"></i> 客户唤醒计划</span>
              <span class="progress-percent" style="color:var(--info)">28%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill cyan" style="width: 28%;"></div>
            </div>
            <div class="progress-detail">
              <span>已唤醒 34 位</span>
              <span>3天后</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Recent Activity -->
      <div class="panel-section">
        <div class="panel-header">
          <span class="panel-title">📝 最近动态</span>
          <span class="panel-action" @click="showActivityModal = true">查看全部</span>
        </div>
        <div class="activity-list">
          <div class="activity-item" @click="showActivityDetail(0)">
            <div class="activity-icon email"><i class="fas fa-envelope"></i></div>
            <div class="activity-content">
              <div class="activity-text">Riyadh Tech 回复了邮件</div>
              <div class="activity-time">10分钟前</div>
            </div>
          </div>
          <div class="activity-item" @click="showActivityDetail(1)">
            <div class="activity-icon whatsapp"><i class="fab fa-whatsapp"></i></div>
            <div class="activity-content">
              <div class="activity-text">Dubai Storage WhatsApp 已读</div>
              <div class="activity-time">25分钟前</div>
            </div>
          </div>
          <div class="activity-item" @click="showActivityDetail(2)">
            <div class="activity-icon linkedin"><i class="fab fa-linkedin"></i></div>
            <div class="activity-content">
              <div class="activity-text">新增 3 位 LinkedIn 好友</div>
              <div class="activity-time">1小时前</div>
            </div>
          </div>
          <div class="activity-item" @click="showActivityDetail(3)">
            <div class="activity-icon deal"><i class="fas fa-handshake"></i></div>
            <div class="activity-content">
              <div class="activity-text">Berlin Tech 确认订单 ¥128K</div>
              <div class="activity-time">2小时前</div>
            </div>
          </div>
        </div>
      </div>

      <!-- AI Insights -->
      <div class="panel-section">
        <div class="panel-header">
          <span class="panel-title">💡 AI洞察</span>
          <span class="panel-action" @click="showInsightsModal = true">更多</span>
        </div>
        <div class="insights-list">
          <div class="insight-card high" @click="showInsightDetail(0)">
            <div class="insight-header">
              <i class="fas fa-clock"></i>
              <span class="insight-title">最佳发送时间</span>
              <span class="insight-priority high">建议</span>
            </div>
            <div class="insight-text">
              发现周二上午10点发送邮件打开率最高，建议调整发送时间。
            </div>
          </div>
          <div class="insight-card medium" @click="showInsightDetail(1)">
            <div class="insight-header">
              <i class="fas fa-chart-line"></i>
              <span class="insight-title">转化率提升</span>
              <span class="insight-priority medium">洞察</span>
            </div>
            <div class="insight-text">
              中东市场转化率环比提升15%，主要得益于新话术策略。
            </div>
          </div>
          <div class="insight-card low" @click="showInsightDetail(2)">
            <div class="insight-header">
              <i class="fas fa-users"></i>
              <span class="insight-title">客户偏好</span>
              <span class="insight-priority low">发现</span>
            </div>
            <div class="insight-text">
              中东客户对NVMe产品需求增长迅速，建议重点推荐。
            </div>
          </div>
        </div>
      </div>

      <!-- Risk Alerts -->
      <div class="panel-section">
        <div class="panel-header">
          <span class="panel-title">⚠️ 风险预警</span>
          <span class="panel-action warning" @click="showRiskModal = true">3条</span>
        </div>
        <div class="risk-alert-list">
          <div class="risk-alert-item high" @click="showRiskDetail(0)">
            <div class="risk-alert-icon"><i class="fas fa-exclamation-triangle"></i></div>
            <div class="risk-alert-content">
              <div class="risk-alert-title">客户信用下调</div>
              <div class="risk-alert-desc">ABC Corp 信用评级 A→B</div>
            </div>
          </div>
          <div class="risk-alert-item medium" @click="showRiskDetail(1)">
            <div class="risk-alert-icon"><i class="fas fa-gavel"></i></div>
            <div class="risk-alert-content">
              <div class="risk-alert-title">欧盟能效新规</div>
              <div class="risk-alert-desc">2026年7月生效，需提前准备</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Evolution Card -->
      <div class="panel-section">
        <div class="evolution-card" @click="showEvolutionModal = true">
          <div class="evolution-badge">
            <i class="fas fa-rocket"></i> AI 进化
          </div>
          <div class="evolution-title">本周学习成果</div>
          <div class="evolution-stats">
            <div class="evolution-stat">
              <span class="evolution-stat-value">+127</span>
              <span class="evolution-stat-label">新知识点</span>
            </div>
            <div class="evolution-stat">
              <span class="evolution-stat-value">+45</span>
              <span class="evolution-stat-label">优化项</span>
            </div>
          </div>
          <div class="evolution-content">
            通过分析 2,341 封邮件，AI 优化了最佳发送时间策略，建议周二上午发送。
          </div>
          <button class="btn btn-primary btn-sm evolution-btn" @click.stop="showEvolutionModal = true">
            查看详情 <i class="fas fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 历史记录弹窗 -->
    <div v-if="showHistoryModal" class="modal-overlay" @click.self="showHistoryModal = false">
      <div class="history-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-history"></i> 对话历史记录
            <span class="history-count">{{ filteredHistory.length }} 条记录</span>
          </div>
          <button class="modal-close" @click="showHistoryModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <!-- 搜索和筛选 -->
        <div class="history-toolbar">
          <div class="history-search">
            <i class="fas fa-search"></i>
            <input 
              type="text" 
              v-model="historySearch" 
              placeholder="搜索对话内容..."
              class="search-input"
            >
          </div>
          <div class="history-filters">
            <select v-model="historyType" class="filter-select">
              <option value="all">全部类型</option>
              <option value="prospect">寻客任务</option>
              <option value="marketing">营销活动</option>
              <option value="analysis">数据分析</option>
              <option value="risk">风险预警</option>
              <option value="other">其他</option>
            </select>
            <select v-model="historyDate" class="filter-select">
              <option value="all">全部时间</option>
              <option value="today">今天</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
            </select>
          </div>
        </div>

        <!-- 历史记录列表 -->
        <div class="history-list">
          <div 
            v-for="session in filteredHistory" 
            :key="session.id" 
            class="history-item"
            @click="loadSession(session)"
          >
            <div class="history-item-header">
              <div class="history-item-type" :class="session.type">
                <i :class="getTypeIcon(session.type)"></i>
                {{ getTypeLabel(session.type) }}
              </div>
              <div class="history-item-date">{{ session.date }}</div>
            </div>
            <div class="history-item-title">{{ session.title }}</div>
            <div class="history-item-preview">{{ session.preview }}</div>
            <div class="history-item-footer">
              <span class="history-item-count">
                <i class="fas fa-comments"></i> {{ session.messageCount }} 条消息
              </span>
              <span class="history-item-actions">
                <button class="action-link" @click.stop="deleteSession(session.id)">
                  <i class="fas fa-trash"></i> 删除
                </button>
              </span>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="filteredHistory.length === 0" class="history-empty">
            <i class="fas fa-comments"></i>
            <p>暂无对话记录</p>
            <span>开始与企业大脑对话，记录将自动保存</span>
          </div>
        </div>

        <!-- 底部统计 -->
        <div class="history-footer">
          <div class="history-stats">
            <div class="history-stat">
              <span class="stat-num">{{ historyStats.total }}</span>
              <span class="stat-label">总对话</span>
            </div>
            <div class="history-stat">
              <span class="stat-num">{{ historyStats.thisWeek }}</span>
              <span class="stat-label">本周</span>
            </div>
            <div class="history-stat">
              <span class="stat-num">{{ historyStats.saved }}</span>
              <span class="stat-label">收藏</span>
            </div>
          </div>
          <button class="btn btn-secondary btn-sm" @click="clearAllHistory">
            <i class="fas fa-trash-alt"></i> 清空全部
          </button>
        </div>
      </div>
    </div>

    <!-- AI 技能弹窗 -->
    <div v-if="showSkillsModal" class="modal-overlay" @click.self="showSkillsModal = false">
      <div class="skills-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-plug"></i> AI 技能中心
          </div>
          <button class="modal-close" @click="showSkillsModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="skills-grid">
            <div 
              v-for="skill in aiSkills" 
              :key="skill.id" 
              class="skill-card"
              :class="{ active: skill.enabled }"
            >
              <div class="skill-icon">{{ skill.icon }}</div>
              <div class="skill-info">
                <div class="skill-name">{{ skill.name }}</div>
                <div class="skill-desc">{{ skill.description }}</div>
              </div>
              <div 
                class="skill-toggle" 
                :class="{ active: skill.enabled }"
                @click="toggleSkill(skill)"
              >
                <div class="toggle-slider"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文件上传弹窗 -->
    <div v-if="showUploadModal" class="modal-overlay" @click.self="showUploadModal = false">
      <div class="upload-modal">
        <div class="modal-header" style="padding: 0 0 20px 0; border: none;">
          <div class="modal-title">
            <i class="fas fa-cloud-upload-alt"></i> 上传文件
          </div>
          <button class="modal-close" @click="showUploadModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="upload-zone">
          <div class="upload-icon"><i class="fas fa-file-upload"></i></div>
          <div class="upload-text">拖拽文件到此处，或点击选择</div>
          <div class="upload-hint">支持 PDF、Word、Excel、图片等格式</div>
        </div>
        <div style="margin-top: 16px;">
          <button class="btn btn-primary" style="width: 100%;" @click="showUploadModal = false">
            <i class="fas fa-upload"></i> 开始上传
          </button>
        </div>
      </div>
    </div>

    <!-- Toast 提示 -->
    <transition name="toast">
      <div v-if="showToast" class="toast" :class="toastType">
        <i :class="toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'"></i>
        {{ toastMessage }}
      </div>
    </transition>

    <!-- 进行中任务详情弹窗 -->
    <div v-if="showTasksModal" class="modal-overlay" @click.self="showTasksModal = false">
      <div class="detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-tasks"></i> 进行中的任务
          </div>
          <button class="modal-close" @click="showTasksModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 任务列表 -->
          <div class="tasks-list">
            <div v-for="task in activeTasks" :key="task.id" class="task-detail-card" @click="currentTask = task">
              <div class="task-header">
                <div class="task-icon" :style="{ background: task.color }">
                  <i :class="task.icon"></i>
                </div>
                <div class="task-info">
                  <div class="task-name">{{ task.name }}</div>
                  <div class="task-status" :class="task.status">{{ task.status === 'running' ? '运行中' : '已完成' }}</div>
                </div>
                <div class="task-progress-circle">
                  <svg viewBox="0 0 36 36">
                    <path class="progress-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                    <path class="progress-fill" :stroke="task.color" :stroke-dasharray="task.progress + ', 100'" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                  </svg>
                  <span class="progress-text">{{ task.progress }}%</span>
                </div>
              </div>
              <div class="task-stats">
                <div class="task-stat">
                  <span class="stat-value">{{ task.found }}</span>
                  <span class="stat-label">已发现</span>
                </div>
                <div class="task-stat">
                  <span class="stat-value">{{ task.target }}</span>
                  <span class="stat-label">目标</span>
                </div>
                <div class="task-stat">
                  <span class="stat-value">{{ task.estimated }}</span>
                  <span class="stat-label">预计完成</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 任务详情 -->
          <div v-if="currentTask" class="task-detail-section">
            <div class="detail-header">
              <span class="detail-title">{{ currentTask.name }} - 详细信息</span>
            </div>
            <div class="detail-content">
              <div v-if="currentTask.details.found" class="found-list">
                <div class="found-header">
                  <span>发现结果</span>
                  <span class="found-count">{{ currentTask.details.stats.total }} 个</span>
                </div>
                <div v-for="(item, idx) in currentTask.details.found" :key="idx" class="found-item">
                  <div class="found-main">
                    <span class="found-name">{{ item.name || item.sent + ' 封' }}</span>
                    <span v-if="item.score" class="found-score" :class="item.score >= 80 ? 'high' : 'medium'">{{ item.score }}分</span>
                  </div>
                  <div v-if="item.country" class="found-meta">
                    {{ item.country }} · {{ item.status === 'contacted' ? '已联系' : '待联系' }}
                  </div>
                  <div v-else-if="item.opened" class="found-meta">
                    打开 {{ item.opened }} · 回复 {{ item.replied || 0 }}
                  </div>
                </div>
              </div>
            </div>
            <div class="detail-actions">
              <button class="btn btn-secondary btn-sm"><i class="fas fa-pause"></i> 暂停任务</button>
              <button class="btn btn-primary btn-sm"><i class="fas fa-download"></i> 导出结果</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近动态详情弹窗 -->
    <div v-if="showActivityModal" class="modal-overlay" @click.self="showActivityModal = false">
      <div class="detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-stream"></i> 最近动态
          </div>
          <button class="modal-close" @click="showActivityModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="activity-timeline">
            <div v-for="activity in recentActivities" :key="activity.id" class="timeline-item">
              <div class="timeline-marker" :class="activity.type">
                <i :class="activity.icon"></i>
              </div>
              <div class="timeline-content">
                <div class="timeline-header">
                  <span class="timeline-title">{{ activity.text }}</span>
                  <span class="timeline-time">{{ activity.time }}</span>
                </div>
                <div class="timeline-detail">{{ activity.detail }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI洞察详情弹窗 -->
    <div v-if="showInsightsModal" class="modal-overlay" @click.self="showInsightsModal = false">
      <div class="detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-lightbulb"></i> AI 洞察
          </div>
          <button class="modal-close" @click="showInsightsModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="insights-detail-list">
            <div v-for="insight in aiInsights" :key="insight.id" class="insight-detail-card" :class="insight.priority">
              <div class="insight-detail-header">
                <div class="insight-icon-wrapper">
                  <i :class="insight.icon"></i>
                </div>
                <div class="insight-info">
                  <div class="insight-title">{{ insight.title }}</div>
                  <div class="insight-badge" :class="insight.priority">{{ insight.priorityLabel }}</div>
                </div>
              </div>
              <div class="insight-summary">{{ insight.content }}</div>
              <div class="insight-detail-content">
                <pre>{{ insight.detail }}</pre>
              </div>
              <div v-if="insight.metrics" class="insight-metrics">
                <div v-for="(value, key) in insight.metrics" :key="key" class="metric-item">
                  <span class="metric-label">{{ key }}</span>
                  <span class="metric-value">{{ value }}</span>
                </div>
              </div>
              <div class="insight-actions">
                <button class="btn btn-secondary btn-sm"><i class="fas fa-thumbs-up"></i> 有用</button>
                <button class="btn btn-secondary btn-sm"><i class="fas fa-share"></i> 分享</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 风险预警详情弹窗 -->
    <div v-if="showRiskModal" class="modal-overlay" @click.self="showRiskModal = false">
      <div class="detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-exclamation-triangle"></i> 风险预警
          </div>
          <button class="modal-close" @click="showRiskModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="risk-detail-list">
            <div v-for="risk in riskAlerts" :key="risk.id" class="risk-detail-card" :class="risk.level">
              <div class="risk-detail-header">
                <div class="risk-level-indicator" :class="risk.level">
                  <i :class="risk.icon"></i>
                </div>
                <div class="risk-info">
                  <div class="risk-title">{{ risk.title }}</div>
                  <div class="risk-desc">{{ risk.description }}</div>
                </div>
                <div class="risk-status" :class="risk.status">{{ risk.status === 'pending' ? '待处理' : '已处理' }}</div>
              </div>
              
              <div class="risk-detail-body">
                <div v-if="risk.detail.company" class="risk-section">
                  <div class="risk-section-title">公司信息</div>
                  <div class="risk-section-content">
                    <div class="info-row"><span>公司名称</span><strong>{{ risk.detail.company }}</strong></div>
                    <div class="info-row"><span>信用评级</span><strong>{{ risk.detail.oldRating }} → <span :class="risk.level">{{ risk.detail.newRating }}</span></strong></div>
                    <div class="info-row"><span>下调原因</span><span>{{ risk.detail.reason }}</span></div>
                  </div>
                </div>
                
                <div v-if="risk.detail.regulation" class="risk-section">
                  <div class="risk-section-title">法规信息</div>
                  <div class="risk-section-content">
                    <div class="info-row"><span>法规名称</span><strong>{{ risk.detail.regulation }}</strong></div>
                    <div class="info-row"><span>生效日期</span><strong>{{ risk.detail.effectiveDate }}</strong></div>
                    <div class="info-row"><span>影响产品</span><span>{{ risk.detail.affectedProducts }}</span></div>
                    <div class="info-row"><span>影响客户</span><span>{{ risk.detail.affectedCustomers }}</span></div>
                  </div>
                </div>
                
                <div v-if="risk.detail.affectedDeals" class="risk-section">
                  <div class="risk-section-title">影响商机</div>
                  <div class="affected-deals">
                    <div v-for="(deal, idx) in risk.detail.affectedDeals" :key="idx" class="affected-deal">
                      <span class="deal-name">{{ deal.name }}</span>
                      <span class="deal-amount">{{ deal.amount }}</span>
                      <span class="deal-stage">{{ deal.stage }}</span>
                    </div>
                  </div>
                </div>
                
                <div v-if="risk.detail.requirements" class="risk-section">
                  <div class="risk-section-title">合规要求</div>
                  <ul class="requirements-list">
                    <li v-for="(req, idx) in risk.detail.requirements" :key="idx">{{ req }}</li>
                  </ul>
                </div>
                
                <div class="risk-suggestion">
                  <i class="fas fa-lightbulb"></i>
                  <span>{{ risk.detail.suggestion }}</span>
                </div>
              </div>
              
              <div class="risk-actions">
                <button class="btn btn-secondary btn-sm"><i class="fas fa-clock"></i> 稍后处理</button>
                <button class="btn btn-primary btn-sm"><i class="fas fa-check"></i> 立即处理</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI进化详情弹窗 -->
    <div v-if="showEvolutionModal" class="modal-overlay" @click.self="showEvolutionModal = false">
      <div class="detail-modal evolution-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-rocket"></i> AI 进化详情
          </div>
          <button class="modal-close" @click="showEvolutionModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 本周学习成果 -->
          <div class="evolution-section">
            <div class="section-title">📊 本周学习成果</div>
            <div class="evolution-stats-grid">
              <div class="evo-stat-card">
                <div class="evo-stat-icon blue"><i class="fas fa-brain"></i></div>
                <div class="evo-stat-value">+{{ evolutionData.weekLearning.newKnowledge }}</div>
                <div class="evo-stat-label">新增知识点</div>
              </div>
              <div class="evo-stat-card">
                <div class="evo-stat-icon green"><i class="fas fa-magic"></i></div>
                <div class="evo-stat-value">+{{ evolutionData.weekLearning.optimizations }}</div>
                <div class="evo-stat-label">优化项</div>
              </div>
              <div class="evo-stat-card">
                <div class="evo-stat-icon purple"><i class="fas fa-bullseye"></i></div>
                <div class="evo-stat-value">{{ evolutionData.weekLearning.accuracy }}</div>
                <div class="evo-stat-label">准确率</div>
              </div>
              <div class="evo-stat-card">
                <div class="evo-stat-icon orange"><i class="fas fa-bolt"></i></div>
                <div class="evo-stat-value">{{ evolutionData.weekLearning.responseTime }}</div>
                <div class="evo-stat-label">响应时间</div>
              </div>
            </div>
          </div>
          
          <!-- 本月趋势 -->
          <div class="evolution-section">
            <div class="section-title">📈 本月学习趋势</div>
            <div class="trend-chart">
              <div v-for="(item, idx) in evolutionData.monthlyTrend" :key="idx" class="trend-bar">
                <div class="trend-label">{{ item.week }}</div>
                <div class="trend-value">
                  <div class="trend-fill" :style="{ width: (item.knowledge / 150 * 100) + '%' }"></div>
                  <span v-if="item.knowledge > 0">{{ item.knowledge }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 重点优化 -->
          <div class="evolution-section">
            <div class="section-title">✨ 重点优化</div>
            <div class="highlight-list">
              <div v-for="(item, idx) in evolutionData.highlights" :key="idx" class="highlight-item">
                <div class="highlight-icon"><i :class="item.icon"></i></div>
                <div class="highlight-content">
                  <div class="highlight-title">{{ item.title }}</div>
                  <div class="highlight-desc">{{ item.desc }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 知识分布 -->
          <div class="evolution-section">
            <div class="section-title">📚 知识分布</div>
            <div class="knowledge-dist">
              <div v-for="(item, idx) in evolutionData.knowledgeBreakdown" :key="idx" class="knowledge-item">
                <div class="knowledge-header">
                  <span class="knowledge-category">{{ item.category }}</span>
                  <span class="knowledge-count">{{ item.count }} 个</span>
                </div>
                <div class="knowledge-bar">
                  <div class="knowledge-fill" :style="{ width: item.percentage + '%' }"></div>
                </div>
                <span class="knowledge-percent">{{ item.percentage }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, watch, onMounted } from 'vue'

const messages = ref([])
const inputMessage = ref('')
const isTyping = ref(false)
const messagesContainer = ref(null)
const showHistoryModal = ref(false)
const showSkillsModal = ref(false)
const showUploadModal = ref(false)
const showCommandHints = ref(false)
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

// 右侧面板弹窗
const showTasksModal = ref(false)
const showActivityModal = ref(false)
const showInsightsModal = ref(false)
const showRiskModal = ref(false)
const showEvolutionModal = ref(false)

// 当前选中项
const currentTask = ref(null)
const currentActivity = ref(null)
const currentInsight = ref(null)
const currentRisk = ref(null)

// AI 状态
const aiVersion = ref('v2.3')
const aiStatus = ref('online')
const knowledgeCount = ref(1247)
const todayQueries = ref(89)
const aiAccuracy = ref(94)

// 输入历史导航
const inputHistory = ref([])
const historyIndex = ref(-1)

// 历史记录相关
const historySearch = ref('')
const historyType = ref('all')
const historyDate = ref('all')

// 当前会话ID
const currentSessionId = ref(null)

const welcomeTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })

// 进行中任务数据
const activeTasks = ref([
  {
    id: 1,
    name: '中东寻客任务',
    icon: 'fas fa-crosshairs',
    color: 'var(--primary)',
    progress: 65,
    found: 156,
    target: 240,
    status: 'running',
    estimated: '今日完成',
    startTime: '2026-03-20 08:00',
    details: {
      region: '中东地区（沙特、阿联酋、卡塔尔）',
      product: 'NVMe SSD / SATA SSD',
      minPurchase: '$100K/年',
      found: [
        { name: 'Riyadh Tech Distribution', score: 92, country: '🇸🇦', status: 'pending' },
        { name: 'Dubai Storage Solutions', score: 88, country: '🇦🇪', status: 'contacted' },
        { name: 'Saudi Digital Hub', score: 76, country: '🇸🇦', status: 'pending' },
        { name: 'Qatar Electronics', score: 74, country: '🇶🇦', status: 'pending' }
      ],
      stats: { total: 156, high: 45, medium: 68, low: 43 }
    }
  },
  {
    id: 2,
    name: '邮件营销SOP',
    icon: 'fas fa-envelope',
    color: 'var(--secondary)',
    progress: 45,
    found: 89,
    target: 200,
    status: 'running',
    estimated: '明天完成',
    startTime: '2026-03-19 10:00',
    details: {
      sequence: '新客户开发序列',
      targetGroup: '本月新增潜客',
      found: [
        { name: 'Day 1 - LinkedIn连接', sent: 45, opened: 32, replied: 8 },
        { name: 'Day 3 - 开发邮件', sent: 28, opened: 21, replied: 5 },
        { name: 'Day 7 - 跟进邮件', sent: 16, opened: 12, replied: 3 }
      ],
      stats: { sent: 89, opened: 65, replied: 16, openRate: '73%', replyRate: '18%' }
    }
  },
  {
    id: 3,
    name: '客户唤醒计划',
    icon: 'fas fa-bell',
    color: 'var(--info)',
    progress: 28,
    found: 34,
    target: 120,
    status: 'running',
    estimated: '3天后',
    startTime: '2026-03-18 09:00',
    details: {
      strategy: '沉睡客户唤醒序列',
      targetGroup: '90天未互动客户',
      found: [
        { name: '第一周唤醒邮件', sent: 34, opened: 28, replied: 6 },
        { name: '第二周优惠邮件', sent: 0, opened: 0, replied: 0 },
        { name: '第三周电话跟进', sent: 0, opened: 0, replied: 0 }
      ],
      stats: { reactivated: 6, pending: 86, failed: 28 }
    }
  }
])

// 最近动态数据
const recentActivities = ref([
  { id: 1, type: 'email', icon: 'fas fa-envelope', text: 'Riyadh Tech 回复了邮件', time: '10分钟前', detail: '客户询问了NVMe 2TB的批发价格和交期，表示有采购意向。' },
  { id: 2, type: 'whatsapp', icon: 'fab fa-whatsapp', text: 'Dubai Storage WhatsApp 已读', time: '25分钟前', detail: '客户查看了产品介绍，但暂未回复。' },
  { id: 3, type: 'linkedin', icon: 'fab fa-linkedin', text: '新增 3 位 LinkedIn 好友', time: '1小时前', detail: '来自中东地区的IT采购经理。' },
  { id: 4, type: 'deal', icon: 'fas fa-handshake', text: 'Berlin Tech 确认订单 ¥128K', time: '2小时前', detail: 'NVMe SSD 500GB x 200pcs，预计下周发货。' },
  { id: 5, type: 'email', icon: 'fas fa-envelope', text: '发送了 15 封开发邮件', time: '3小时前', detail: '面向欧洲市场的新客户开发。' },
  { id: 6, type: 'alert', icon: 'fas fa-exclamation-triangle', text: '风险预警：ABC Corp 信用下调', time: '4小时前', detail: '信用评级从A降至B，建议提高预付款比例。' }
])

// AI洞察数据
const aiInsights = ref([
  {
    id: 1,
    icon: 'fas fa-clock',
    title: '最佳发送时间',
    priority: 'high',
    priorityLabel: '建议',
    content: '发现周二上午10点发送邮件打开率最高，建议调整发送时间。',
    detail: '基于过去30天2,341封邮件的分析：\n- 周二上午10点打开率最高（42%）\n- 周四下午3点回复率最高（18%）\n- 周末发送效果最差（打开率仅12%）',
    metrics: { analyzed: 2341, bestTime: '周二 10:00', bestOpenRate: '42%' }
  },
  {
    id: 2,
    icon: 'fas fa-chart-line',
    title: '转化率提升',
    priority: 'medium',
    priorityLabel: '洞察',
    content: '中东市场转化率环比提升15%，主要得益于新话术策略。',
    detail: '转化率提升原因分析：\n- 新话术增加本地化问候：+8%\n- 产品案例增加中东客户：+5%\n- 发送时间优化：+2%',
    metrics: { increase: '15%', reason: '话术优化', confidence: '92%' }
  },
  {
    id: 3,
    icon: 'fas fa-users',
    title: '客户偏好',
    priority: 'low',
    priorityLabel: '发现',
    content: '中东客户对NVMe产品需求增长迅速，建议重点推荐。',
    detail: '需求趋势分析：\n- NVMe询盘占比从35%升至52%\n- 2TB容量最受欢迎\n- 价格敏感度中等，品质优先',
    metrics: { growth: '17%', product: 'NVMe SSD', region: '中东' }
  }
])

// 风险预警数据
const riskAlerts = ref([
  {
    id: 1,
    icon: 'fas fa-exclamation-triangle',
    title: '客户信用下调',
    description: 'ABC Corp 信用评级 A→B',
    level: 'high',
    status: 'pending',
    detail: {
      company: 'ABC Corporation Ltd.',
      oldRating: 'A',
      newRating: 'B',
      reason: '近期财务报告显示流动比率下降',
      impact: '涉及2个在谈商机，总金额¥256K',
      suggestion: '建议将预付款比例从30%提高至50%',
      affectedDeals: [
        { name: 'NVMe SSD订单', amount: '¥128K', stage: '谈判中' },
        { name: 'SATA SSD订单', amount: '¥128K', stage: '报价中' }
      ]
    }
  },
  {
    id: 2,
    icon: 'fas fa-gavel',
    title: '欧盟能效新规',
    description: '2026年7月生效，需提前准备',
    level: 'medium',
    status: 'pending',
    detail: {
      regulation: 'EU Energy Label Regulation 2021/340',
      effectiveDate: '2026年7月1日',
      affectedProducts: '15款SSD产品',
      affectedCustomers: '23家欧洲客户',
      requirements: ['产品需通过欧盟能效认证', '包装需印制能效标签', '需提供能效测试报告'],
      estimatedCost: '认证费用约€15,000'
    }
  },
  {
    id: 3,
    icon: 'fas fa-chart-line',
    title: '欧洲转化率下降',
    description: '本周下降8%，需关注',
    level: 'low',
    status: 'pending',
    detail: {
      trend: '连续2周下降',
      dropRate: '8%',
      possibleReasons: ['交期延长至45天', '竞品降价促销', '欧元汇率波动'],
      suggestion: '建议缩短交期或提供价格补偿方案'
    }
  }
])

// AI进化数据
const evolutionData = ref({
  weekLearning: {
    newKnowledge: 127,
    optimizations: 45,
    accuracy: '94.2%',
    responseTime: '1.2s'
  },
  monthlyTrend: [
    { week: '第1周', knowledge: 89, optimizations: 32 },
    { week: '第2周', knowledge: 105, optimizations: 38 },
    { week: '第3周', knowledge: 127, optimizations: 45 },
    { week: '第4周', knowledge: 0, optimizations: 0 }
  ],
  highlights: [
    { icon: 'fas fa-clock', title: '发送时间优化', desc: '发现最佳发送时间，打开率提升18%' },
    { icon: 'fas fa-language', title: '话术优化', desc: '中东话术本地化，回复率提升23%' },
    { icon: 'fas fa-search', title: '寻客算法升级', desc: 'Lookalike准确率提升至92%' },
    { icon: 'fas fa-robot', title: '自动回复', desc: '新增12个自动回复场景' }
  ],
  knowledgeBreakdown: [
    { category: '产品知识', count: 456, percentage: 37 },
    { category: '客户画像', count: 312, percentage: 25 },
    { category: '行业动态', count: 234, percentage: 19 },
    { category: '销售技巧', count: 156, percentage: 12 },
    { category: '其他', count: 89, percentage: 7 }
  ]
})

// 显示详情方法
const showTaskDetail = (index) => {
  currentTask.value = activeTasks.value[index]
  showTasksModal.value = true
}

const showActivityDetail = (index) => {
  currentActivity.value = recentActivities.value[index]
  showActivityModal.value = true
}

const showInsightDetail = (index) => {
  currentInsight.value = aiInsights.value[index]
  showInsightsModal.value = true
}

const showRiskDetail = (index) => {
  currentRisk.value = riskAlerts.value[index]
  showRiskModal.value = true
}

// 模拟历史记录数据
const chatHistory = ref([
  {
    id: 1,
    type: 'prospect',
    title: '寻找中东地区SSD进口商',
    preview: '已为您找到 12 个高匹配度潜客，基于Lookalike算法推荐...',
    date: '2026-03-19 15:30',
    messageCount: 8,
    messages: [
      { role: 'user', content: '帮我找中东地区的SSD进口商', time: '15:30' },
      { role: 'ai', content: '🎯 已为您找到 12 个高匹配度潜客...', time: '15:31' }
    ]
  },
  {
    id: 2,
    type: 'analysis',
    title: '本周销售业绩汇总',
    preview: '本周营收 ¥3.2M，同比增长23%，成交客户89家...',
    date: '2026-03-19 10:15',
    messageCount: 6,
    messages: [
      { role: 'user', content: '本周业绩汇总', time: '10:15' },
      { role: 'ai', content: '📊 本周销售业绩汇总...', time: '10:16' }
    ]
  },
  {
    id: 3,
    type: 'marketing',
    title: '启动邮件营销活动',
    preview: '已创建智能SOP序列，将自动跟进156位潜客...',
    date: '2026-03-18 16:42',
    messageCount: 12,
    messages: []
  },
  {
    id: 4,
    type: 'risk',
    title: '风险预警汇总',
    preview: '检测到3条风险事件：客户信用下调、欧盟新规...',
    date: '2026-03-18 09:20',
    messageCount: 4,
    messages: []
  },
  {
    id: 5,
    type: 'prospect',
    title: '寻找欧洲企业级存储客户',
    preview: '已找到8家欧洲企业级存储方案集成商...',
    date: '2026-03-17 14:30',
    messageCount: 10,
    messages: []
  },
  {
    id: 6,
    type: 'analysis',
    title: '分析德国市场转化率下降原因',
    preview: '经分析，欧洲转化率下降15%，主要原因是交期延长...',
    date: '2026-03-16 11:25',
    messageCount: 8,
    messages: []
  },
  {
    id: 7,
    type: 'other',
    title: '产品参数查询',
    preview: 'NVMe SSD 2TB的读写速度参数...',
    date: '2026-03-15 09:10',
    messageCount: 3,
    messages: []
  },
  {
    id: 8,
    type: 'marketing',
    title: 'WhatsApp营销策略咨询',
    preview: '建议中东客户晚上8-10点发送WhatsApp消息...',
    date: '2026-03-14 16:50',
    messageCount: 6,
    messages: []
  }
])

// 历史统计数据
const historyStats = computed(() => ({
  total: chatHistory.value.length,
  thisWeek: chatHistory.value.filter(h => {
    const date = new Date(h.date)
    const now = new Date()
    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
    return date >= weekAgo
  }).length,
  saved: chatHistory.value.filter(h => h.saved).length
}))

const aiSkills = ref([
  { id: 1, icon: '🎯', name: '智能寻客', description: '全网挖掘高匹配潜客', enabled: true },
  { id: 2, icon: '📧', name: '邮件营销', description: '自动生成个性化邮件', enabled: true },
  { id: 3, icon: '📊', name: '数据分析', description: '业绩趋势智能分析', enabled: true },
  { id: 4, icon: '🌐', name: '多语言翻译', description: '即时商务翻译', enabled: true },
  { id: 5, icon: '⚠️', name: '风险预警', description: '智能风险监控', enabled: true },
  { id: 6, icon: '💡', name: '策略建议', description: 'AI驱动销售策略', enabled: true }
])

const formatNumber = (num) => num >= 1000 ? (num / 1000).toFixed(1) + 'K' : num.toLocaleString()

const getAiStatusLabel = (status) => {
  const labels = {
    online: '在线',
    busy: '处理中',
    offline: '离线'
  }
  return labels[status] || '在线'
}

// 筛选后的历史记录
const filteredHistory = computed(() => {
  let result = chatHistory.value

  // 按类型筛选
  if (historyType.value !== 'all') {
    result = result.filter(h => h.type === historyType.value)
  }

  // 按时间筛选
  if (historyDate.value !== 'all') {
    const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    
    result = result.filter(h => {
      const date = new Date(h.date)
      if (historyDate.value === 'today') {
        return date >= today
      } else if (historyDate.value === 'week') {
        const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
        return date >= weekAgo
      } else if (historyDate.value === 'month') {
        const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
        return date >= monthAgo
      }
      return true
    })
  }

  // 按关键词搜索
  if (historySearch.value.trim()) {
    const keyword = historySearch.value.toLowerCase()
    result = result.filter(h => 
      h.title.toLowerCase().includes(keyword) || 
      h.preview.toLowerCase().includes(keyword)
    )
  }

  return result
})

const getTypeIcon = (type) => {
  const icons = {
    prospect: 'fas fa-crosshairs',
    marketing: 'fas fa-paper-plane',
    analysis: 'fas fa-chart-line',
    risk: 'fas fa-shield-alt',
    other: 'fas fa-comments'
  }
  return icons[type] || 'fas fa-comments'
}

const getTypeLabel = (type) => {
  const labels = {
    prospect: '寻客任务',
    marketing: '营销活动',
    analysis: '数据分析',
    risk: '风险预警',
    other: '其他'
  }
  return labels[type] || '其他'
}

const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

const getCurrentTime = () => {
  return new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}

const getCurrentDate = () => {
  return new Date().toLocaleString('zh-CN', { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 判断消息类型
const getMessageType = (msg) => {
  if (msg.includes('潜客') || msg.includes('寻找') || msg.includes('客户') || msg.includes('进口商')) {
    return 'prospect'
  } else if (msg.includes('业绩') || msg.includes('销售') || msg.includes('分析') || msg.includes('趋势')) {
    return 'analysis'
  } else if (msg.includes('邮件') || msg.includes('营销') || msg.includes('WhatsApp') || msg.includes('发送')) {
    return 'marketing'
  } else if (msg.includes('风险') || msg.includes('预警') || msg.includes('信用')) {
    return 'risk'
  }
  return 'other'
}

// 保存会话到历史记录
const saveToHistory = (userMsg, aiResponse) => {
  const type = getMessageType(userMsg)
  const now = getCurrentDate()
  
  // 如果是当前会话的延续，更新现有记录
  if (currentSessionId.value) {
    const existing = chatHistory.value.find(h => h.id === currentSessionId.value)
    if (existing) {
      existing.messageCount += 2
      existing.date = now
      return
    }
  }
  
  // 创建新的历史记录
  const newHistory = {
    id: Date.now(),
    type,
    title: userMsg.length > 30 ? userMsg.substring(0, 30) + '...' : userMsg,
    preview: aiResponse.replace(/<[^>]*>/g, '').substring(0, 50) + '...',
    date: now,
    messageCount: 2,
    messages: [
      { role: 'user', content: userMsg, time: getCurrentTime() },
      { role: 'ai', content: aiResponse, time: getCurrentTime() }
    ]
  }
  
  chatHistory.value.unshift(newHistory)
  currentSessionId.value = newHistory.id
}

const sendMessage = () => {
  if (!inputMessage.value.trim()) return
  
  const userMessage = inputMessage.value
  
  // 保存到输入历史
  inputHistory.value.push(userMessage)
  historyIndex.value = -1
  
  messages.value.push({
    role: 'user',
    content: userMessage,
    time: getCurrentTime()
  })
  
  inputMessage.value = ''
  showCommandHints.value = false
  scrollToBottom()
  
  isTyping.value = true
  scrollToBottom()
  
  setTimeout(() => {
    isTyping.value = false
    const response = handleAIResponse(userMessage)
    // 保存到历史记录
    saveToHistory(userMessage, response)
    scrollToBottom()
  }, 1500)
}

const quickAction = (action) => {
  inputMessage.value = action
  sendMessage()
}

const clearChat = () => {
  messages.value = []
  currentSessionId.value = null
}

// 输入处理
const handleInputChange = () => {
  showCommandHints.value = inputMessage.value.startsWith('/')
}

// 快捷指令选择
const selectCommand = (cmd) => {
  inputMessage.value = cmd + ' '
  showCommandHints.value = false
}

// 历史导航
const navigateHistory = (direction) => {
  if (inputHistory.value.length === 0) return
  
  const newIndex = historyIndex.value + direction
  if (newIndex < -1) return
  if (newIndex >= inputHistory.value.length) return
  
  historyIndex.value = newIndex
  if (newIndex === -1) {
    inputMessage.value = ''
  } else {
    inputMessage.value = inputHistory.value[inputHistory.value.length - 1 - newIndex]
  }
}

// 语音播报
const speakMessage = (content) => {
  const text = content.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim()
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = 'zh-CN'
    utterance.rate = 1.0
    speechSynthesis.speak(utterance)
    showToastMessage('正在播报...', 'success')
  } else {
    showToastMessage('浏览器不支持语音播报', 'error')
  }
}

// 加载历史会话
const loadSession = (session) => {
  messages.value = session.messages || []
  currentSessionId.value = session.id
  showHistoryModal.value = false
  scrollToBottom()
}

// 删除历史记录
const deleteSession = (id) => {
  chatHistory.value = chatHistory.value.filter(h => h.id !== id)
}

// 清空全部历史
const clearAllHistory = () => {
  if (confirm('确定要清空全部对话历史吗？此操作不可恢复。')) {
    chatHistory.value = []
    showToastMessage('历史记录已清空', 'success')
  }
}

const toggleSkill = (skill) => {
  skill.enabled = !skill.enabled
  showToastMessage(`技能 "${skill.name}" 已${skill.enabled ? '启用' : '禁用'}`, 'success')
}

const copyMessage = (content) => {
  const text = content.replace(/<[^>]*>/g, '')
  navigator.clipboard.writeText(text)
  showToastMessage('已复制到剪贴板', 'success')
}

const favoriteMessage = (msg) => {
  showToastMessage('已收藏该回答', 'success')
}

const regenerateResponse = (msg) => {
  showToastMessage('正在重新生成回答...', 'success')
}

const showToastMessage = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => showToast.value = false, 3000)
}

const handleAIResponse = (msg) => {
  let response = ''
  
  if (msg.includes('潜客') || msg.includes('寻找') || msg.includes('客户')) {
    response = `<p>🎯 已为您找到 <strong>12</strong> 个高匹配度潜客！基于您的历史成交客户画像，使用 <strong>Lookalike算法</strong> 推荐：</p>
    <div class="smart-card">
      <div class="smart-card-header"><i class="fas fa-user-plus"></i>推荐潜客 TOP 5</div>
      <div class="customer-list">
        <div class="customer-item"><span class="customer-flag">🇸🇦</span><div class="customer-info"><div class="customer-name">Riyadh Tech Distribution</div><div class="customer-detail">利雅得 · 固态硬盘进口商 · 年采购$2M+</div></div><span class="customer-score score-high">92分</span></div>
        <div class="customer-item"><span class="customer-flag">🇦🇪</span><div class="customer-info"><div class="customer-name">Dubai Storage Solutions</div><div class="customer-detail">迪拜 · 电子分销商 · 专注企业级存储</div></div><span class="customer-score score-high">88分</span></div>
        <div class="customer-item"><span class="customer-flag">🇩🇪</span><div class="customer-info"><div class="customer-name">Berlin Tech GmbH</div><div class="customer-detail">柏林 · 企业级存储 · 欧洲市场领先</div></div><span class="customer-score score-high">85分</span></div>
        <div class="customer-item"><span class="customer-flag">🇸🇦</span><div class="customer-info"><div class="customer-name">Saudi Digital Hub</div><div class="customer-detail">利雅得 · IT集成商 · 政府供应商</div></div><span class="customer-score score-medium">76分</span></div>
        <div class="customer-item"><span class="customer-flag">🇬🇧</span><div class="customer-info"><div class="customer-name">UK Storage Partners</div><div class="customer-detail">伦敦 · 数据中心方案商 · NHS供应商</div></div><span class="customer-score score-medium">72分</span></div>
      </div>
    </div>
    <div class="smart-card" style="margin-top:12px;background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.3);">
      <div class="smart-card-header" style="color:var(--success);"><i class="fas fa-magic"></i>AI 推荐理由</div>
      <p style="font-size:12px;color:var(--text-secondary);">这5家公司与您的成交客户"Tech World Dubai"高度相似，均具备：年采购额$500K+、有固定供应商但不满、最近3个月有采购需求。</p>
    </div>
    <div class="quick-actions" style="margin-top:12px;">
      <span class="quick-action" style="cursor:default;opacity:0.6;">📧 一键发送产品介绍</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📊 查看匹配分析</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📋 导出潜客列表</span>
    </div>`
  } else if (msg.includes('业绩') || msg.includes('销售') || msg.includes('分析')) {
    response = `<p>📊 <strong>本周销售业绩汇总</strong> (3月第3周)</p>
    <div class="smart-card">
      <div class="smart-card-header"><i class="fas fa-chart-bar"></i>核心指标</div>
      <div class="stats-grid" style="margin-top: 12px;">
        <div class="stat-card"><div class="stat-label">新增订单</div><div class="stat-value" style="color:var(--success)">¥328K</div><div class="stat-change up"><i class="fas fa-arrow-up"></i> 12%</div></div>
        <div class="stat-card"><div class="stat-label">跟进商机</div><div class="stat-value" style="color:var(--primary)">¥856K</div><div class="stat-change up"><i class="fas fa-arrow-up"></i> 8%</div></div>
        <div class="stat-card"><div class="stat-label">成交客户</div><div class="stat-value">89家</div><div class="stat-change up"><i class="fas fa-arrow-up"></i> 15家</div></div>
        <div class="stat-card"><div class="stat-label">转化率</div><div class="stat-value">23%</div><div class="stat-change up"><i class="fas fa-arrow-up"></i> 3%</div></div>
      </div>
    </div>
    <div class="smart-card" style="margin-top:12px;">
      <div class="smart-card-header"><i class="fas fa-chart-line"></i>区域业绩分布</div>
      <div style="margin-top:12px;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
          <span style="font-size:12px;">🇸🇦 中东地区</span>
          <span style="font-size:12px;font-weight:600;color:var(--success)">¥156K <span style="color:var(--success);font-size:10px;">↑18%</span></span>
        </div>
        <div style="height:6px;background:var(--bg-dark);border-radius:3px;overflow:hidden;margin-bottom:12px;">
          <div style="height:100%;width:48%;background:var(--gradient-1);border-radius:3px;"></div>
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
          <span style="font-size:12px;">🇪🇺 欧洲地区</span>
          <span style="font-size:12px;font-weight:600;">¥98K <span style="color:var(--warning);font-size:10px;">↓5%</span></span>
        </div>
        <div style="height:6px;background:var(--bg-dark);border-radius:3px;overflow:hidden;margin-bottom:12px;">
          <div style="height:100%;width:30%;background:var(--gradient-2);border-radius:3px;"></div>
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
          <span style="font-size:12px;">🇺🇸 北美地区</span>
          <span style="font-size:12px;font-weight:600;">¥74K <span style="color:var(--success);font-size:10px;">↑8%</span></span>
        </div>
        <div style="height:6px;background:var(--bg-dark);border-radius:3px;overflow:hidden;">
          <div style="height:100%;width:22%;background:var(--gradient-3);border-radius:3px;"></div>
        </div>
      </div>
    </div>
    <div class="smart-card" style="margin-top:12px;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.3);">
      <div class="smart-card-header" style="color:var(--warning);"><i class="fas fa-lightbulb"></i>AI 洞察</div>
      <p style="font-size:12px;color:var(--text-secondary);">欧洲地区转化率下降5%，经分析主要原因是交期延长。建议：1) 与供应链协调缩短交期；2) 对欧洲客户主动沟通预计到货时间。</p>
    </div>
    <div class="quick-actions" style="margin-top:12px;">
      <span class="quick-action" style="cursor:default;opacity:0.6;">📈 详细趋势图</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📄 生成周报</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📤 分享给团队</span>
    </div>`
  } else if (msg.includes('风险') || msg.includes('预警')) {
    response = `<p>⚠️ <strong>风险预警汇总</strong></p>
    <div class="smart-card">
      <div class="smart-card-header"><i class="fas fa-exclamation-triangle"></i>当前风险事件 (3)</div>
      <div style="margin-top:12px;">
        <div style="padding:12px;background:rgba(239,68,68,0.1);border-radius:8px;margin-bottom:8px;border-left:3px solid var(--danger);">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span style="font-weight:600;">🔴 高风险：ABC Corp 信用下调</span>
            <span style="font-size:10px;color:var(--danger);background:rgba(239,68,68,0.2);padding:2px 8px;border-radius:10px;">需处理</span>
          </div>
          <div style="font-size:12px;color:var(--text-secondary);">信用评级 A→B，建议提高预付款比例至50%</div>
          <div style="font-size:11px;color:var(--text-muted);margin-top:6px;">影响商机：¥128K · 预计损失风险：¥64K</div>
        </div>
        <div style="padding:12px;background:rgba(245,158,11,0.1);border-radius:8px;margin-bottom:8px;border-left:3px solid var(--warning);">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span style="font-weight:600;">🟡 中风险：欧盟新规即将生效</span>
            <span style="font-size:10px;color:var(--warning);background:rgba(245,158,11,0.2);padding:2px 8px;border-radius:10px;">30天后</span>
          </div>
          <div style="font-size:12px;color:var(--text-secondary);">欧盟能效标签新规将于2026年7月生效，需提前准备认证</div>
          <div style="font-size:11px;color:var(--text-muted);margin-top:6px;">影响产品：15款 · 涉及客户：23家</div>
        </div>
        <div style="padding:12px;background:rgba(99,102,241,0.1);border-radius:8px;border-left:3px solid var(--primary);">
          <div style="font-weight:600;margin-bottom:4px;">🔵 提示：客户唤醒计划进度落后</div>
          <div style="font-size:12px;color:var(--text-secondary);">已完成28%，建议增加投入或延长周期</div>
        </div>
      </div>
    </div>
    <div class="quick-actions" style="margin-top:12px;">
      <span class="quick-action" style="cursor:default;opacity:0.6;">📋 查看详情</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">✅ 处理风险</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📊 风险报表</span>
    </div>`
  } else if (msg.includes('邮件') || msg.includes('营销')) {
    response = `<p>📧 已为您启动营销自动化任务！</p>
    <div class="smart-card">
      <div class="smart-card-header"><i class="fas fa-paper-plane"></i>智能SOP序列已创建</div>
      <ul style="font-size:12px;color:var(--text-secondary);padding-left:20px;line-height:1.8;margin-top:8px;">
        <li><strong>Day 1:</strong> LinkedIn 加好友 + 简短问候</li>
        <li><strong>Day 3:</strong> 发送定制开发邮件（AI生成内容）</li>
        <li><strong>Day 5:</strong> WhatsApp 跟进消息</li>
        <li><strong>Day 7:</strong> 若未回复，换角度重发邮件</li>
        <li><strong>Day 14:</strong> 分享行业报告 + 产品更新</li>
      </ul>
    </div>
    <div class="smart-card" style="margin-top:12px;">
      <div class="smart-card-header"><i class="fas fa-users"></i>目标客户群</div>
      <div style="display:flex;gap:16px;margin-top:12px;">
        <div style="text-align:center;padding:12px;background:var(--bg-dark);border-radius:8px;flex:1;">
          <div style="font-size:20px;font-weight:700;color:var(--primary);">156</div>
          <div style="font-size:10px;color:var(--text-muted);">目标潜客</div>
        </div>
        <div style="text-align:center;padding:12px;background:var(--bg-dark);border-radius:8px;flex:1;">
          <div style="font-size:20px;font-weight:700;color:var(--success);">+45%</div>
          <div style="font-size:10px;color:var(--text-muted);">预计打开率提升</div>
        </div>
        <div style="text-align:center;padding:12px;background:var(--bg-dark);border-radius:8px;flex:1;">
          <div style="font-size:20px;font-weight:700;color:var(--warning);">+32%</div>
          <div style="font-size:10px;color:var(--text-muted);">预计回复率提升</div>
        </div>
      </div>
    </div>
    <div class="quick-actions" style="margin-top:12px;">
      <span class="quick-action" style="cursor:default;opacity:0.6;">📝 编辑SOP</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📊 查看进度</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">⏸️ 暂停任务</span>
    </div>`
  } else if (msg.includes('翻译') || msg.includes('英文')) {
    response = `<p>🌐 <strong>英文开发信翻译结果：</strong></p>
    <div class="smart-card">
      <div class="smart-card-header"><i class="fas fa-language"></i>翻译内容</div>
      <div style="padding:12px;background:var(--bg-dark);border-radius:8px;margin-top:12px;font-size:13px;line-height:1.8;">
        <p style="margin-bottom:8px;"><strong>Subject: Partnership Opportunity - Enterprise Storage Solutions</strong></p>
        <p style="margin-bottom:8px;">Dear [Name],</p>
        <p style="margin-bottom:8px;">I hope this email finds you well. I'm reaching out from [Company], a leading manufacturer of enterprise-grade storage solutions with over 10 years of experience serving global distributors.</p>
        <p style="margin-bottom:8px;">We've noticed your strong presence in the storage market and believe our NVMe SSD product line could complement your portfolio...</p>
      </div>
    </div>
    <div class="smart-card" style="margin-top:12px;background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.3);">
      <div class="smart-card-header" style="color:var(--success);"><i class="fas fa-check-circle"></i>翻译质量</div>
      <div style="font-size:12px;color:var(--text-secondary);">
        <span style="display:inline-block;padding:4px 10px;background:rgba(16,185,129,0.2);border-radius:10px;margin-right:8px;margin-bottom:8px;">✓ 商务用语规范</span>
        <span style="display:inline-block;padding:4px 10px;background:rgba(16,185,129,0.2);border-radius:10px;margin-right:8px;margin-bottom:8px;">✓ 语气友好专业</span>
        <span style="display:inline-block;padding:4px 10px;background:rgba(16,185,129,0.2);border-radius:10px;margin-bottom:8px;">✓ 文化适配度高</span>
      </div>
    </div>
    <div class="quick-actions" style="margin-top:12px;">
      <span class="quick-action" style="cursor:default;opacity:0.6;">✨ AI优化</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📋 复制全文</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📤 立即发送</span>
    </div>`
  } else if (msg.includes('策略') || msg.includes('建议')) {
    response = `<p>💡 <strong>AI 销售策略建议</strong></p>
    <div class="smart-card">
      <div class="smart-card-header"><i class="fas fa-brain"></i>智能分析</div>
      <div style="margin-top:12px;">
        <div style="padding:14px;background:rgba(16,185,129,0.1);border-radius:10px;margin-bottom:10px;border-left:3px solid var(--success);">
          <div style="font-weight:600;margin-bottom:6px;">🎯 推荐策略：重点突破中东市场</div>
          <div style="font-size:12px;color:var(--text-secondary);line-height:1.6;">基于数据分析，中东地区转化率最高(32%)、客单价最高($28K)、竞争压力较小。建议：1) 增加LinkedIn中东客户连接；2) 调整发货时间至周二上午；3) 针对中东客户准备阿拉伯语资料。</div>
        </div>
        <div style="padding:14px;background:rgba(99,102,241,0.1);border-radius:10px;border-left:3px solid var(--primary);">
          <div style="font-weight:600;margin-bottom:6px;">📊 优化机会：邮件打开率提升</div>
          <div style="font-size:12px;color:var(--text-secondary);line-height:1.6;">当前打开率28%，低于行业平均35%。建议优化：1) 标题添加收件人公司名；2) 发送时间调整至周二上午10点(当地时间)；3) A/B测试不同标题风格。</div>
        </div>
      </div>
    </div>
    <div class="quick-actions" style="margin-top:12px;">
      <span class="quick-action" style="cursor:default;opacity:0.6;">✅ 采纳建议</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📈 查看数据</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">🔄 换个建议</span>
    </div>`
  } else if (msg.includes('帮助') || msg.includes('功能') || msg.includes('能做什么')) {
    response = `<p>👋 <strong>我是您的企业大脑助手，可以帮助您：</strong></p>
    <div class="smart-card">
      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px;">
        <div style="padding:12px;background:var(--bg-dark);border-radius:10px;">
          <div style="font-size:20px;margin-bottom:6px;">🎯</div>
          <div style="font-size:12px;font-weight:600;margin-bottom:4px;">智能寻客</div>
          <div style="font-size:10px;color:var(--text-muted);">全网挖掘高匹配潜客</div>
        </div>
        <div style="padding:12px;background:var(--bg-dark);border-radius:10px;">
          <div style="font-size:20px;margin-bottom:6px;">📧</div>
          <div style="font-size:12px;font-weight:600;margin-bottom:4px;">邮件营销</div>
          <div style="font-size:10px;color:var(--text-muted);">自动生成个性化邮件</div>
        </div>
        <div style="padding:12px;background:var(--bg-dark);border-radius:10px;">
          <div style="font-size:20px;margin-bottom:6px;">📊</div>
          <div style="font-size:12px;font-weight:600;margin-bottom:4px;">数据分析</div>
          <div style="font-size:10px;color:var(--text-muted);">业绩趋势智能分析</div>
        </div>
        <div style="padding:12px;background:var(--bg-dark);border-radius:10px;">
          <div style="font-size:20px;margin-bottom:6px;">⚠️</div>
          <div style="font-size:12px;font-weight:600;margin-bottom:4px;">风险预警</div>
          <div style="font-size:10px;color:var(--text-muted);">智能风险监控</div>
        </div>
        <div style="padding:12px;background:var(--bg-dark);border-radius:10px;">
          <div style="font-size:20px;margin-bottom:6px;">🌐</div>
          <div style="font-size:12px;font-weight:600;margin-bottom:4px;">多语言翻译</div>
          <div style="font-size:10px;color:var(--text-muted);">即时商务翻译</div>
        </div>
        <div style="padding:12px;background:var(--bg-dark);border-radius:10px;">
          <div style="font-size:20px;margin-bottom:6px;">💡</div>
          <div style="font-size:12px;font-weight:600;margin-bottom:4px;">策略建议</div>
          <div style="font-size:10px;color:var(--text-muted);">AI驱动销售策略</div>
        </div>
      </div>
    </div>
    <p style="margin-top:12px;font-size:12px;color:var(--text-secondary);">您可以直接输入指令，或点击上方快捷按钮开始使用！</p>`
  } else {
    response = `<p>收到您的指令：<strong>${msg}</strong></p>
    <p style="margin-top:8px;">我正在分析处理中，您也可以尝试以下指令：</p>
    <div class="quick-actions" style="margin-top:8px;">
      <span class="quick-action" style="cursor:default;opacity:0.6;">🔍 寻找潜客</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📊 业绩分析</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">📧 邮件营销</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">🌐 翻译</span>
      <span class="quick-action" style="cursor:default;opacity:0.6;">❓ 帮助</span>
    </div>`
  }
  
  messages.value.push({
    role: 'ai',
    content: response,
    time: getCurrentTime()
  })
  
  return response
}
</script>

<style scoped>
/* 企业大脑容器 - 左右布局 */
.brain-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--bg-dark);
}

/* 左侧聊天区域 */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-dark);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.brain-status {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brain-avatar {
  width: 48px;
  height: 48px;
  background: var(--gradient-1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.brain-info h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.brain-info p {
  font-size: 12px;
  color: var(--text-secondary);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  display: flex;
  gap: 12px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.message-avatar.ai {
  background: var(--gradient-1);
}

.message-avatar.user {
  background: var(--gradient-2);
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.message-author {
  font-size: 13px;
  font-weight: 600;
}

.message-time {
  font-size: 11px;
  color: var(--text-muted);
}

.message-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
}

.message.user .message-bubble {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
}

.message-bubble p {
  margin-bottom: 8px;
}

.message-bubble ul {
  margin: 8px 0;
  padding-left: 20px;
}

.message-bubble li {
  margin-bottom: 6px;
}

/* 快捷操作 */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quick-action {
  padding: 6px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-action:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* 输入区域 */
.chat-input-area {
  padding: 16px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

.input-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}

.input-action {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.input-action:hover {
  background: var(--border);
  color: var(--text-primary);
}

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  padding: 8px;
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.chat-input:focus {
  outline: none;
}

.send-btn {
  width: 40px;
  height: 40px;
  background: var(--gradient-1);
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn:hover {
  opacity: 0.9;
}

/* 右侧数据面板 */
.data-panel {
  width: 320px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px;
  flex-shrink: 0;
}

.panel-section {
  margin-bottom: 24px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
}

.panel-action {
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-card {
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 12px;
}

.stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
}

.stat-change {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.stat-change.up {
  color: var(--success);
}

/* 进度列表 */
.progress-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.progress-bar {
  height: 6px;
  background: var(--bg-dark);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s;
}

.progress-fill.blue {
  background: var(--primary);
}

.progress-fill.purple {
  background: var(--secondary);
}

.progress-fill.cyan {
  background: var(--info);
}

.progress-detail {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  gap: 10px;
}

.activity-content {
  flex: 1;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.activity-icon.email {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
}

.activity-icon.whatsapp {
  background: rgba(37, 211, 102, 0.2);
  color: #25D366;
}

.activity-icon.linkedin {
  background: rgba(10, 102, 194, 0.2);
  color: #0A66C2;
}

.activity-icon.deal {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.activity-text {
  font-size: 12px;
}

.activity-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* AI 状态卡片 */
.ai-status-card {
  background: var(--bg-hover);
  border-radius: 12px;
  padding: 14px;
}

.ai-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-avatar {
  font-size: 28px;
}

.ai-status-info {
  flex: 1;
}

.ai-status-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.ai-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.ai-status-badge.busy {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.ai-status-badge.offline {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.ai-status-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ai-stat {
  text-align: center;
}

.ai-stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.ai-stat-label {
  font-size: 10px;
  color: var(--text-muted);
}

/* 洞察列表 */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insight-card {
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 12px;
  border-left: 3px solid var(--primary);
}

.insight-card.high { border-left-color: var(--success); }
.insight-card.medium { border-left-color: var(--warning); }
.insight-card.low { border-left-color: var(--text-muted); }

.insight-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.insight-title {
  flex: 1;
}

.insight-priority {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 500;
}

.insight-priority.high { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.insight-priority.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.insight-priority.low { background: rgba(148, 163, 184, 0.2); color: var(--text-secondary); }

.insight-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 风险预警 */
.risk-alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.risk-alert-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
}

.risk-alert-item.high {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid var(--danger);
}

.risk-alert-item.medium {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid var(--warning);
}

.risk-alert-content {
  flex: 1;
}

.risk-alert-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.risk-alert-item.high .risk-alert-icon {
  color: var(--danger);
}

.risk-alert-item.medium .risk-alert-icon {
  color: var(--warning);
}

.risk-alert-title {
  font-size: 12px;
  font-weight: 600;
}

.risk-alert-desc {
  font-size: 10px;
  color: var(--text-secondary);
}

/* 进化卡片 */
.evolution-card {
  background: var(--bg-hover);
  border-radius: 12px;
  padding: 14px;
}

.evolution-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 10px;
}

.evolution-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.evolution-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}

.evolution-stat {
  text-align: center;
}

.evolution-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--success);
}

.evolution-stat-label {
  font-size: 10px;
  color: var(--text-muted);
}

.evolution-content {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.evolution-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

/* 智能卡片 */
.smart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}

.smart-card-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* 客户列表 */
.customer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.customer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--bg-hover);
  border-radius: 8px;
  cursor: pointer;
}

.customer-flag {
  font-size: 20px;
}

.customer-info {
  flex: 1;
}

.customer-name {
  font-size: 13px;
  font-weight: 500;
}

.customer-detail {
  font-size: 11px;
  color: var(--text-secondary);
}

.customer-score {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.customer-score.score-high {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.customer-score.score-medium {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

/* 打字指示器 */
.typing-indicator {
  display: flex;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ========== 历史记录弹窗样式 ========== */
.history-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  background: var(--bg-hover);
  padding: 4px 10px;
  border-radius: 10px;
}

.modal-close {
  width: 32px;
  height: 32px;
  background: var(--bg-hover);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

/* 历史记录工具栏 */
.history-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.history-search {
  position: relative;
  flex: 1;
}

.history-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.history-search .search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
}

.history-search .search-input::placeholder {
  color: var(--text-muted);
}

.history-search .search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.history-filters {
  display: flex;
  gap: 8px;
}

.filter-select {
  padding: 10px 14px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* 历史记录列表 */
.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.history-item {
  padding: 16px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.history-item:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-item-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.history-item-type.prospect {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
}

.history-item-type.marketing {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.history-item-type.analysis {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.history-item-type.risk {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.history-item-type.other {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
}

.history-item-date {
  font-size: 11px;
  color: var(--text-muted);
}

.history-item-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.history-item-preview {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.history-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-item-count {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.history-item-actions {
  display: flex;
  gap: 12px;
}

.action-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.action-link:hover {
  background: var(--border);
  color: var(--danger);
}

/* 空状态 */
.history-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.history-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.history-empty p {
  font-size: 16px;
  margin-bottom: 8px;
}

.history-empty span {
  font-size: 13px;
}

/* 历史记录底部 */
.history-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
}

.history-stats {
  display: flex;
  gap: 24px;
}

.history-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.history-stat .stat-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.history-stat .stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* 能力网格 */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.capability-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-hover);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.capability-item:hover {
  background: var(--border);
  transform: translateY(-2px);
}

.capability-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.capability-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capability-text strong {
  font-size: 12px;
}

.capability-text span {
  font-size: 10px;
  color: var(--text-muted);
}

/* 状态指示器 */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.status-indicator.online {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.status-indicator.busy {
  background: var(--warning);
  box-shadow: 0 0 8px var(--warning);
  animation: pulse 1.5s infinite;
}

.status-indicator.offline {
  background: var(--text-muted);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 头部徽章 */
.header-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  font-size: 10px;
  color: var(--primary);
  margin-left: 8px;
}

/* 统计图标 */
.stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.stat-icon.blue { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.stat-icon.green { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.stat-icon.purple { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.stat-icon.orange { background: rgba(245, 158, 11, 0.2); color: var(--warning); }

.stat-info {
  flex: 1;
}

.stat-trend {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* 响应式 */
@media (max-width: 1200px) {
  .data-panel {
    display: none;
  }
}

@media (max-width: 768px) {
  .history-modal {
    max-width: 100%;
    max-height: 90vh;
  }
  
  .history-toolbar {
    flex-direction: column;
  }
  
  .history-filters {
    width: 100%;
  }
  
  .filter-select {
    flex: 1;
  }
  
  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========== 能力网格增强 ========== */
.capability-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.capability-item:hover {
  background: var(--bg-dark);
  transform: translateY(-2px);
}

.capability-arrow {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10px;
}

/* ========== 尝试提示 ========== */
.try-tips {
  margin-top: 16px;
  padding: 12px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.try-tip-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.try-tip-text {
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}

.try-tip-text:hover {
  background: var(--primary);
  color: white;
}

/* ========== 消息操作按钮 ========== */
.message-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.2s;
}

.message:hover .message-actions {
  opacity: 1;
}

.action-btn {
  padding: 5px 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.action-btn:hover {
  background: var(--bg-dark);
  color: var(--primary);
  border-color: var(--primary);
}

/* ========== 输入区域增强 ========== */
.input-hints {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  justify-content: center;
}

.hint-item {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.hint-item kbd {
  padding: 2px 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
}

/* ========== 快捷指令面板 ========== */
.command-hints {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.command-hint-header {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.command-hint-list {
  max-height: 240px;
  overflow-y: auto;
}

.command-hint-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.command-hint-item:hover {
  background: var(--bg-hover);
}

.cmd-name {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 12px;
  min-width: 80px;
}

.cmd-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ========== 发送按钮状态 ========== */
.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== 状态指示器 ========== */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.status-indicator.online {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.status-indicator.busy {
  background: var(--warning);
  animation: pulse 1.5s infinite;
}

.status-indicator.offline {
  background: var(--text-muted);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========== 头部徽章 ========== */
.header-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
  border-radius: 10px;
  font-size: 10px;
  margin-left: 8px;
}

/* ========== Toast 提示 ========== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 2000;
}

.toast.success {
  border-color: var(--success);
}

.toast.success i {
  color: var(--success);
}

.toast.error {
  border-color: var(--danger);
}

.toast.error i {
  color: var(--danger);
}

.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* ========== 统计变化指示 ========== */
.stat-change {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.stat-change.up {
  color: var(--success);
}

.stat-change.down {
  color: var(--danger);
}

/* ========== AI 技能弹窗 ========== */
.skills-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 70vh;
  overflow: hidden;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.skill-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s;
}

.skill-card.active {
  border-color: var(--primary);
}

.skill-card:hover {
  background: var(--bg-hover);
}

.skill-icon {
  font-size: 24px;
}

.skill-info {
  flex: 1;
}

.skill-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.skill-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.skill-toggle {
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.skill-toggle.active {
  background: var(--success);
}

.toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
}

.skill-toggle.active .toggle-slider {
  left: 23px;
}

/* ========== 上传弹窗 ========== */
.upload-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  padding: 24px;
}

.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-zone:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

.upload-icon {
  font-size: 48px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.upload-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* ========== 详情弹窗通用样式 ========== */
.detail-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.evolution-modal {
  max-width: 600px;
}

/* ========== 任务详情弹窗 ========== */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.task-detail-card {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.task-detail-card:hover {
  border-color: var(--primary);
}

.task-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.task-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.task-info {
  flex: 1;
}

.task-name {
  font-size: 14px;
  font-weight: 600;
}

.task-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  margin-top: 4px;
}

.task-status.running {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.task-progress-circle {
  position: relative;
  width: 50px;
  height: 50px;
}

.task-progress-circle svg {
  transform: rotate(-90deg);
}

.progress-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}

.progress-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 600;
}

.task-stats {
  display: flex;
  gap: 16px;
}

.task-stat {
  text-align: center;
  flex: 1;
}

.task-stat .stat-value {
  font-size: 16px;
  font-weight: 600;
  display: block;
}

.task-stat .stat-label {
  font-size: 10px;
  color: var(--text-muted);
}

.task-detail-section {
  background: var(--bg-dark);
  border-radius: 12px;
  padding: 16px;
}

.detail-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.detail-title {
  font-size: 14px;
  font-weight: 600;
}

.found-list {
  margin-bottom: 16px;
}

.found-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.found-count {
  color: var(--primary);
  font-weight: 600;
}

.found-item {
  padding: 10px;
  background: var(--bg-card);
  border-radius: 8px;
  margin-bottom: 6px;
}

.found-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.found-name {
  font-size: 13px;
  font-weight: 500;
}

.found-score {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.found-score.high {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.found-score.medium {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.found-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.detail-actions {
  display: flex;
  gap: 10px;
}

/* ========== 动态时间线 ========== */
.activity-timeline {
  position: relative;
  padding-left: 30px;
}

.timeline-item {
  position: relative;
  padding-bottom: 20px;
  padding-left: 20px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-marker {
  position: absolute;
  left: -30px;
  top: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transform: translateX(-50%);
}

.timeline-marker.email { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.timeline-marker.whatsapp { background: rgba(37, 211, 102, 0.2); color: #25D366; }
.timeline-marker.linkedin { background: rgba(10, 102, 194, 0.2); color: #0A66C2; }
.timeline-marker.deal { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.timeline-marker.alert { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

.timeline-content {
  background: var(--bg-dark);
  border-radius: 10px;
  padding: 12px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.timeline-title {
  font-size: 13px;
  font-weight: 500;
}

.timeline-time {
  font-size: 11px;
  color: var(--text-muted);
}

.timeline-detail {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ========== AI洞察详情 ========== */
.insights-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-detail-card {
  background: var(--bg-dark);
  border-radius: 12px;
  padding: 16px;
  border-left: 3px solid var(--primary);
}

.insight-detail-card.high { border-left-color: var(--success); }
.insight-detail-card.medium { border-left-color: var(--warning); }
.insight-detail-card.low { border-left-color: var(--text-muted); }

.insight-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.insight-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.insight-info {
  flex: 1;
}

.insight-info .insight-title {
  font-size: 14px;
  font-weight: 600;
}

.insight-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  margin-top: 2px;
}

.insight-badge.high { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.insight-badge.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.insight-badge.low { background: rgba(148, 163, 184, 0.2); color: var(--text-secondary); }

.insight-summary {
  font-size: 13px;
  margin-bottom: 12px;
}

.insight-detail-content {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.insight-detail-content pre {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.6;
  margin: 0;
}

.insight-metrics {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.metric-item {
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: 8px;
  flex: 1;
}

.metric-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.metric-value {
  font-size: 14px;
  font-weight: 600;
}

.insight-actions {
  display: flex;
  gap: 8px;
}

/* ========== 风险详情 ========== */
.risk-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.risk-detail-card {
  background: var(--bg-dark);
  border-radius: 12px;
  padding: 16px;
  border-left: 3px solid var(--danger);
}

.risk-detail-card.high { border-left-color: var(--danger); }
.risk-detail-card.medium { border-left-color: var(--warning); }
.risk-detail-card.low { border-left-color: var(--info); }

.risk-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.risk-level-indicator {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.risk-level-indicator.high { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.risk-level-indicator.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.risk-level-indicator.low { background: rgba(99, 102, 241, 0.2); color: var(--info); }

.risk-info {
  flex: 1;
}

.risk-info .risk-title {
  font-size: 14px;
  font-weight: 600;
}

.risk-info .risk-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.risk-status {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
}

.risk-status.pending {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.risk-status.resolved {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.risk-detail-body {
  margin-bottom: 16px;
}

.risk-section {
  margin-bottom: 12px;
}

.risk-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.risk-section-content {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row span {
  color: var(--text-secondary);
}

.info-row strong {
  font-weight: 500;
}

.affected-deals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.affected-deal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: var(--bg-card);
  border-radius: 8px;
  font-size: 12px;
}

.deal-name {
  flex: 1;
}

.deal-amount {
  font-weight: 600;
  color: var(--success);
  margin-right: 12px;
}

.deal-stage {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
  border-radius: 10px;
}

.requirements-list {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.risk-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  font-size: 12px;
  color: var(--success);
}

.risk-suggestion i {
  font-size: 16px;
}

.risk-actions {
  display: flex;
  gap: 10px;
}

/* ========== AI进化详情 ========== */
.evolution-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.evolution-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.evo-stat-card {
  background: var(--bg-dark);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.evo-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.evo-stat-icon.blue { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.evo-stat-icon.green { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.evo-stat-icon.purple { background: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.evo-stat-icon.orange { background: rgba(245, 158, 11, 0.2); color: var(--warning); }

.evo-stat-value {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.evo-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

.trend-chart {
  background: var(--bg-dark);
  border-radius: 12px;
  padding: 16px;
}

.trend-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.trend-bar:last-child {
  margin-bottom: 0;
}

.trend-label {
  width: 50px;
  font-size: 11px;
  color: var(--text-muted);
}

.trend-value {
  flex: 1;
  height: 24px;
  background: var(--bg-card);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.trend-fill {
  height: 100%;
  background: var(--gradient-1);
  border-radius: 6px;
}

.trend-value span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
}

.highlight-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.highlight-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg-dark);
  border-radius: 10px;
}

.highlight-icon {
  width: 36px;
  height: 36px;
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.highlight-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.knowledge-dist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.knowledge-header {
  width: 100px;
  display: flex;
  flex-direction: column;
}

.knowledge-category {
  font-size: 12px;
  font-weight: 500;
}

.knowledge-count {
  font-size: 10px;
  color: var(--text-muted);
}

.knowledge-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-dark);
  border-radius: 4px;
  overflow: hidden;
}

.knowledge-fill {
  height: 100%;
  background: var(--gradient-1);
  border-radius: 4px;
}

.knowledge-percent {
  width: 40px;
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ========== 响应式适配 ========== */
@media (max-width: 768px) {
  .evolution-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
