<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const route = useRoute()
const router = useRouter()

const interview = ref<any>(null)
const logs = ref<any[]>([])
const loading = ref(false)
const activeTab = ref('overview')

const sessionId = computed(() => route.params.id as string)

onMounted(async () => {
  await loadData()
})

async function loadData() {
  loading.value = true
  try {
    const [detailRes, logsRes] = await Promise.all([
      axios.get(`/api/admin/interviews/${sessionId.value}`),
      axios.get(`/api/admin/interviews/${sessionId.value}/logs`)
    ])
    
    if (detailRes.data.code === 0) {
      interview.value = detailRes.data.data
    }
    if (logsRes.data.code === 0) {
      logs.value = logsRes.data.data || []
    }
  } catch (error) {
    console.error('Load data error:', error)
    ElMessage.error('加载失败')
  } finally {
    loading.value = false
  }
}

// 提取分数
function extractScore(scoreField: any, reportField: string): number {
  if (scoreField && !isNaN(Number(scoreField))) return Number(scoreField)
  if (!reportField) return 0
  
  const patterns = [/(\d+)\s*分/, /得分[：:]\s*(\d+)/, /评分[：:]\s*(\d+)/, /(\d+)\/100/]
  for (const p of patterns) {
    const m = reportField.match(p)
    if (m) return Number(m[1])
  }
  return 0
}

// 计算总体匹配度
const matchScore = computed(() => {
  if (!interview.value) return 0
  const scores = [
    extractScore(interview.value.sales_skill_score, interview.value.sales_skill_report),
    extractScore(interview.value.sales_concept_score, interview.value.sales_concept_report),
    extractScore(interview.value.competency_score, interview.value.competency_report)
  ].filter(s => s > 0)
  
  if (scores.length === 0) return 0
  return Math.round(scores.reduce((a, b) => a + b, 0) / scores.length)
})

// 匹配度等级
const matchLevel = computed(() => {
  const score = matchScore.value
  if (score >= 85) return { text: '强烈推荐', color: '#10b981', desc: '该候选人各维度表现优秀，强烈建议录用' }
  if (score >= 70) return { text: '推荐录用', color: '#3b82f6', desc: '候选人综合表现良好，建议进入下一轮面试' }
  if (score >= 55) return { text: '待定观察', color: '#f59e0b', desc: '部分维度需要进一步评估，建议安排追加面试' }
  return { text: '不建议录用', color: '#ef4444', desc: '候选人与岗位要求存在较大差距' }
})

// 维度数据
const dimensions = computed(() => {
  if (!interview.value) return []
  
  return [
    {
      key: 'sales_skill',
      name: '销售技能',
      score: extractScore(interview.value.sales_skill_score, interview.value.sales_skill_report),
      report: interview.value.sales_skill_report,
      icon: 'TrendCharts',
      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      desc: '考察候选人的销售技巧、谈判能力和客户沟通能力'
    },
    {
      key: 'sales_concept',
      name: '销售观念',
      score: extractScore(interview.value.sales_concept_score, interview.value.sales_concept_report),
      report: interview.value.sales_concept_report,
      icon: 'Aim',
      gradient: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
      desc: '评估候选人对销售工作的认知和价值观'
    },
    {
      key: 'competency',
      name: '综合素质',
      score: extractScore(interview.value.competency_score, interview.value.competency_report),
      report: interview.value.competency_report,
      icon: 'Medal',
      gradient: 'linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%)',
      desc: '综合评估候选人的学习能力、抗压能力和职业素养'
    }
  ]
})

// 风险分析
const riskAnalysis = computed(() => {
  if (!interview.value) return []
  
  const risks = []
  
  // 检查风险提示
  if (interview.value.risk_warning) {
    risks.push({
      level: 'high',
      title: '面试官风险提示',
      content: interview.value.risk_warning,
      icon: 'Warning'
    })
  }
  
  // 检查低分维度
  dimensions.value.forEach(dim => {
    if (dim.score > 0 && dim.score < 60) {
      risks.push({
        level: 'medium',
        title: `${dim.name}得分偏低`,
        content: `该维度得分 ${dim.score} 分，低于及格线，需要关注`,
        icon: 'InfoFilled'
      })
    }
  })
  
  // 如果没有风险
  if (risks.length === 0 && matchScore.value >= 70) {
    risks.push({
      level: 'low',
      title: '未发现明显风险',
      content: '候选人各项评估指标正常，暂未发现明显风险点',
      icon: 'SuccessFilled'
    })
  }
  
  return risks
})

// 报告模块
const reportModules = computed(() => {
  if (!interview.value) return []
  
  const modules = []
  
  if (interview.value.motivation_summary) {
    modules.push({
      title: '求职动机分析',
      icon: 'Aim',
      color: '#8b5cf6',
      content: interview.value.motivation_summary
    })
  }
  
  if (interview.value.growth_plan) {
    modules.push({
      title: '成长潜力评估',
      icon: 'TrendCharts',
      color: '#10b981',
      content: interview.value.growth_plan
    })
  }
  
  if (interview.value.ref_check_list) {
    modules.push({
      title: '背景调查建议',
      icon: 'List',
      color: '#3b82f6',
      content: interview.value.ref_check_list
    })
  }
  
  return modules
})

function formatTime(timeStr: string) {
  if (!timeStr) return '-'
  return timeStr.split(' +')[0]?.replace('T', ' ') || timeStr
}

// 根据 stage 数值获取面试阶段信息
function getStageInfo(stage: string | number) {
  const stageNum = typeof stage === 'string' ? parseInt(stage) || 0 : stage
  
  if (stageNum >= 50) {
    return { text: '面试完成', color: '#10b981', isCompleted: true }
  } else if (stageNum >= 40) {
    return { text: '素质项评估中', color: '#8b5cf6', isCompleted: false }
  } else if (stageNum >= 30) {
    return { text: '销售观评估中', color: '#3b82f6', isCompleted: false }
  } else if (stageNum >= 20) {
    return { text: '销售技能评估中', color: '#f59e0b', isCompleted: false }
  } else if (stageNum >= 10) {
    return { text: '简历已上传', color: '#94a3b8', isCompleted: false }
  }
  return { text: '未开始', color: '#cbd5e1', isCompleted: false }
}

function getScoreColor(score: number) {
  if (score >= 80) return '#10b981'
  if (score >= 60) return '#3b82f6'
  if (score >= 40) return '#f59e0b'
  return '#ef4444'
}

const expandedDims = ref<Set<string>>(new Set())

function toggleDimReport(key: string) {
  if (expandedDims.value.has(key)) {
    expandedDims.value.delete(key)
  } else {
    expandedDims.value.add(key)
  }
}
</script>

<template>
  <div class="detail-page">
    <!-- 返回按钮 -->
    <div class="back-section">
      <el-button text @click="router.push('/admin/interviews')">
        <el-icon><ArrowLeft /></el-icon>
        返回列表
      </el-button>
    </div>

    <!-- 加载骨架屏 -->
    <template v-if="loading">
      <div class="loading-skeleton">
        <div class="skeleton-header">
          <div class="skeleton-avatar"></div>
          <div class="skeleton-info">
            <div class="skeleton-line w-40"></div>
            <div class="skeleton-line w-60"></div>
          </div>
          <div class="skeleton-ring"></div>
        </div>
        <div class="skeleton-tabs">
          <div class="skeleton-tab"></div>
          <div class="skeleton-tab"></div>
          <div class="skeleton-tab"></div>
        </div>
        <div class="skeleton-cards">
          <div class="skeleton-card"></div>
          <div class="skeleton-card"></div>
          <div class="skeleton-card"></div>
        </div>
      </div>
    </template>

    <template v-else-if="interview">
      <!-- 顶部信息卡片 -->
      <div class="header-card">
        <div class="header-left">
          <div class="avatar" :style="{ background: `hsl(${(interview.candidate_name || '').charCodeAt(0) * 10}, 70%, 60%)` }">
            {{ (interview.candidate_name || '?').charAt(0) }}
          </div>
          <div class="candidate-info">
            <h1>{{ interview.candidate_name || '未知候选人' }}</h1>
            <div class="meta-row">
              <span class="meta-item">
                <el-icon><Clock /></el-icon>
                {{ formatTime(interview.bstudio_create_time) }}
              </span>
              <el-tag 
                :type="getStageInfo(interview.current_stage).isCompleted ? 'success' : 'info'"
                effect="light"
                :style="{ borderColor: getStageInfo(interview.current_stage).color, color: getStageInfo(interview.current_stage).color }"
              >
                {{ getStageInfo(interview.current_stage).text }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <!-- 匹配度圆环 -->
        <div class="match-ring-section">
          <div class="match-ring" :style="{ '--progress': matchScore, '--color': matchLevel.color }">
            <div class="ring-inner">
              <span class="match-value">{{ matchScore }}</span>
              <span class="match-unit">%</span>
            </div>
          </div>
          <div class="match-info">
            <div class="match-label" :style="{ color: matchLevel.color }">{{ matchLevel.text }}</div>
            <div class="match-desc">{{ matchLevel.desc }}</div>
          </div>
        </div>
      </div>

      <!-- 标签页 -->
      <div class="tabs-container">
        <div class="tab-buttons">
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'overview' }"
            @click="activeTab = 'overview'"
          >
            <el-icon><DataAnalysis /></el-icon>
            评估总览
          </button>
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'report' }"
            @click="activeTab = 'report'"
          >
            <el-icon><Document /></el-icon>
            详细报告
          </button>
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'chat' }"
            @click="activeTab = 'chat'"
          >
            <el-icon><ChatDotRound /></el-icon>
            对话记录
            <span class="tab-badge" v-if="logs.length">{{ logs.length }}</span>
          </button>
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'resume' }"
            @click="activeTab = 'resume'"
          >
            <el-icon><Tickets /></el-icon>
            简历信息
          </button>
        </div>

        <!-- 评估总览 -->
        <div class="tab-content" v-show="activeTab === 'overview'">
          <!-- 维度评分卡片 -->
          <div class="dimensions-grid">
            <div 
              v-for="dim in dimensions" 
              :key="dim.key"
              class="dimension-card"
            >
              <div class="dim-header">
                <div class="dim-icon" :style="{ background: dim.gradient }">
                  <el-icon :size="24"><component :is="dim.icon" /></el-icon>
                </div>
                <div class="dim-meta">
                  <div class="dim-name">{{ dim.name }}</div>
                  <div class="dim-desc">{{ dim.desc }}</div>
                </div>
              </div>
              
              <div class="dim-body">
                <div class="score-display">
                  <span class="score-num" :style="{ color: getScoreColor(dim.score) }">
                    {{ dim.score || '-' }}
                  </span>
                  <span class="score-max">/100</span>
                </div>
                <div class="score-bar">
                  <div 
                    class="score-fill" 
                    :style="{ 
                      width: `${dim.score}%`,
                      background: dim.gradient
                    }"
                  ></div>
                </div>
              </div>
              
              <div class="dim-action" v-if="dim.report">
                <el-button 
                  type="primary" 
                  text
                  @click="toggleDimReport(dim.key)"
                >
                  {{ expandedDims.has(dim.key) ? '收起详情' : '查看详情' }}
                  <el-icon class="ml-1">
                    <ArrowUp v-if="expandedDims.has(dim.key)" />
                    <ArrowDown v-else />
                  </el-icon>
                </el-button>
              </div>
              
              <transition name="slide">
                <div class="dim-report" v-if="dim.report && expandedDims.has(dim.key)">
                  {{ dim.report }}
                </div>
              </transition>
            </div>
          </div>

          <!-- 风险分析 -->
          <div class="risk-section">
            <h3 class="section-title">
              <el-icon><Warning /></el-icon>
              风险分析
            </h3>
            <div class="risk-list">
              <div 
                v-for="(risk, idx) in riskAnalysis" 
                :key="idx"
                class="risk-item"
                :class="risk.level"
              >
                <div class="risk-icon">
                  <el-icon :size="20"><component :is="risk.icon" /></el-icon>
                </div>
                <div class="risk-content">
                  <div class="risk-title">{{ risk.title }}</div>
                  <div class="risk-text">{{ risk.content }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 详细报告 -->
        <div class="tab-content" v-show="activeTab === 'report'">
          <div class="reports-grid">
            <div 
              v-for="(mod, idx) in reportModules" 
              :key="idx"
              class="report-module"
            >
              <div class="module-header">
                <div class="module-icon" :style="{ background: mod.color }">
                  <el-icon :size="20"><component :is="mod.icon" /></el-icon>
                </div>
                <h4>{{ mod.title }}</h4>
              </div>
              <div class="module-content">{{ mod.content }}</div>
            </div>
            
            <el-empty v-if="reportModules.length === 0" description="暂无详细报告" />
          </div>
        </div>

        <!-- 对话记录 -->
        <div class="tab-content" v-show="activeTab === 'chat'">
          <div class="chat-timeline" v-if="logs.length > 0">
            <div 
              v-for="(log, idx) in logs" 
              :key="log.log_id || idx"
              class="chat-round"
            >
              <div class="round-number">第 {{ log.round || idx + 1 }} 轮</div>
              
              <!-- AI 问题 -->
              <div class="message ai">
                <div class="msg-avatar ai">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="msg-bubble">
                  <div class="msg-meta">
                    <span class="msg-role">AI 面试官</span>
                    <el-tag size="small" v-if="log.stage">{{ log.stage }}</el-tag>
                  </div>
                  <div class="msg-text">{{ log.ai_question }}</div>
                </div>
              </div>

              <!-- 用户回答 -->
              <div class="message user" v-if="log.user_answer">
                <div class="msg-bubble">
                  <div class="msg-meta">
                    <span class="msg-role">{{ interview?.candidate_name || '候选人' }}</span>
                  </div>
                  <div class="msg-text">{{ log.user_answer }}</div>
                </div>
                <div class="msg-avatar user">
                  <el-icon><User /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无对话记录" />
        </div>

        <!-- 简历信息 -->
        <div class="tab-content" v-show="activeTab === 'resume'">
          <div class="resume-card" v-if="interview.resume_text">
            <pre class="resume-text">{{ interview.resume_text }}</pre>
          </div>
          <el-empty v-else description="暂无简历信息" />
        </div>
      </div>
    </template>

    <div v-else class="empty-state">
      <el-empty description="未找到面试记录">
        <el-button type="primary" @click="router.push('/admin/interviews')">返回列表</el-button>
      </el-empty>
    </div>
  </div>
</template>

<style scoped>
.detail-page {
  animation: fadeIn 0.5s ease-out;
  max-width: 1400px;
  margin: 0 auto;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 加载骨架屏 */
.loading-skeleton {
  animation: fadeIn 0.3s ease-out;
}

.skeleton-header {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.skeleton-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-line {
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-line.w-40 { width: 40%; height: 28px; }
.skeleton-line.w-60 { width: 60%; height: 16px; }

.skeleton-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-left: auto;
}

.skeleton-tabs {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}

.skeleton-tab {
  width: 100px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.skeleton-card {
  background: #fff;
  border-radius: 16px;
  height: 200px;
  background: linear-gradient(90deg, #f8fafc 25%, #f1f5f9 50%, #f8fafc 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 空状态 */
.empty-state {
  background: #fff;
  border-radius: 20px;
  padding: 60px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.back-section {
  margin-bottom: 20px;
}

/* 顶部卡片 */
.header-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.candidate-info h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 8px;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 14px;
}

/* 匹配度圆环 */
.match-ring-section {
  display: flex;
  align-items: center;
  gap: 24px;
}

.match-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color) calc(var(--progress) * 1%),
    #f1f5f9 calc(var(--progress) * 1%)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ring-inner {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.match-value {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a2e;
}

.match-unit {
  font-size: 16px;
  color: #94a3b8;
  margin-left: 2px;
}

.match-info {
  max-width: 200px;
}

.match-label {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.match-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* 标签页 */
.tabs-container {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.tab-buttons {
  display: flex;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 24px;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: #f8fafc;
  color: #334155;
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.tab-badge {
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.tab-btn:not(.active) .tab-badge {
  background: #e2e8f0;
  color: #64748b;
}

/* 维度卡片 */
.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.dimension-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.2s;
}

.dimension-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dim-header {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.dim-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.dim-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.dim-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.dim-body {
  margin-bottom: 16px;
}

.score-display {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}

.score-num {
  font-size: 42px;
  font-weight: 700;
}

.score-max {
  font-size: 16px;
  color: #94a3b8;
  margin-left: 4px;
}

.score-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.dim-action {
  text-align: center;
}

.dim-report {
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  white-space: pre-wrap;
}

/* 风险分析 */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 16px;
}

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

.risk-item {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid;
}

.risk-item.high {
  background: rgba(239, 68, 68, 0.08);
  border-color: #ef4444;
}

.risk-item.high .risk-icon { color: #ef4444; }

.risk-item.medium {
  background: rgba(245, 158, 11, 0.08);
  border-color: #f59e0b;
}

.risk-item.medium .risk-icon { color: #f59e0b; }

.risk-item.low {
  background: rgba(16, 185, 129, 0.08);
  border-color: #10b981;
}

.risk-item.low .risk-icon { color: #10b981; }

.risk-title {
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.risk-text {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

/* 报告模块 */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.report-module {
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
}

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

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

.module-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.module-content {
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  white-space: pre-wrap;
}

/* 对话记录 */
.chat-timeline {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
}

.chat-round {
  margin-bottom: 32px;
}

.round-number {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 16px;
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.message.user {
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.msg-avatar.ai {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.msg-avatar.user {
  background: #f1f5f9;
  color: #64748b;
}

.msg-bubble {
  max-width: 70%;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.msg-role {
  font-weight: 500;
  color: #334155;
}

.message.user .msg-meta {
  flex-direction: row-reverse;
}

.msg-text {
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.message.ai .msg-text {
  background: #f1f5f9;
  color: #334155;
  border-top-left-radius: 4px;
}

.message.user .msg-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-top-right-radius: 4px;
}

/* 简历 */
.resume-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
}

.resume-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.8;
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

/* 动画 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding: 0 16px;
}

/* 响应式 */
@media (max-width: 1200px) {
  .header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  
  .dimensions-grid {
    grid-template-columns: 1fr;
  }
  
  .reports-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .tab-buttons {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 1;
    justify-content: center;
    min-width: 120px;
  }
}
</style>
