<template>
  <div class="ai-page">
    <nav class="navbar">
      <div class="nav-logo">
        <div class="nav-logo-icon"><img src="/logo.png" alt="有维商学" /></div>
        有维商学
      </div>
      <div class="nav-menu">
        <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">首页</router-link>
        <router-link to="/ai" class="nav-item" :class="{ active: $route.path === '/ai' }">AI智能体</router-link>
        <div class="nav-item">学习中心</div>
        <div class="nav-item">校友社群</div>
      </div>
      <div class="nav-user">
        <button class="nav-notification">🔔</button>
        <div class="user-dropdown">
          <div class="user-avatar" @click="toggleUserMenu">{{ userStore.userInitial }}</div>
          <div class="user-menu" :class="{ active: isUserMenuOpen }">
            <div class="user-menu-header">
              <h4>{{ userStore.currentUser }}</h4>
              <p>专业版会员</p>
            </div>
            <div class="user-menu-item" @click="goToMembership">
              <span>👑</span> 会员中心
            </div>
            <div class="user-menu-item">
              <span>⚙️</span> 账户设置
            </div>
            <div class="user-menu-item danger" @click="handleLogout">
              <span>🚪</span> 退出登录
            </div>
          </div>
        </div>
      </div>
    </nav>

    <div class="ai-content">
      <div class="ai-header">
        <div>
          <h1>🤖 AI智能体门户</h1>
          <p>选择您需要的AI助手，开启智能化工作体验</p>
        </div>
        <div class="search-box">
          <input v-model="searchQuery" type="text" class="search-input" placeholder="搜索智能体...">
          <button
            v-for="filter in filters"
            :key="filter"
            class="filter-btn"
            :class="{ active: currentFilter === filter }"
            @click="currentFilter = filter"
          >{{ filter }}</button>
        </div>
      </div>

      <!-- 行业场景筛选栏 -->
      <div class="industry-filter">
        <button
          v-for="industry in industries"
          :key="industry.id"
          class="industry-btn"
          :class="{ active: currentIndustry === industry.id }"
          @click="currentIndustry = industry.id"
        >{{ industry.name }}</button>
        <div class="industry-filter-wrapper">
          <button class="industry-btn more-btn" @click="showMoreIndustries = !showMoreIndustries">更多</button>
          <div v-if="showMoreIndustries" class="industry-more-dropdown">
            <button
              v-for="industry in moreIndustries"
              :key="industry.id"
              class="industry-btn"
              :class="{ active: currentIndustry === industry.id }"
              @click="currentIndustry = industry.id"
            >{{ industry.name }}</button>
          </div>
        </div>
      </div>

      <div class="ai-grid">
        <div
          v-for="ai in filteredAiTools"
          :key="ai.name"
          class="ai-card"
          @click="openChat(ai)"
        >
          <div class="ai-card-header">
            <div class="ai-card-avatar" :style="{ background: ai.bg }">{{ ai.icon }}</div>
            <div class="ai-card-info">
              <h3>{{ ai.name }}</h3>
              <span class="ai-card-tag">{{ ai.tag }}</span>
            </div>
          </div>
          <p>{{ ai.desc }}</p>
          <div class="ai-card-features">
            <span v-for="feature in ai.features" :key="feature" class="ai-card-feature">{{ feature }}</span>
          </div>
          <button class="ai-card-btn">开始对话</button>
        </div>
      </div>
    </div>

    <!-- 聊天模态框 -->
    <div v-if="chatModal.isOpen" class="chat-modal" @click.self="closeChat">
      <div class="chat-window" :class="{ 'iframe-mode': chatModal.isIframe }">
        <div class="chat-header">
          <div class="chat-title">
            <div class="chat-avatar" :style="{ background: chatModal.bg }">{{ chatModal.icon }}</div>
            <span>{{ chatModal.name }}</span>
          </div>
          <button class="chat-close" @click="closeChat">✕</button>
        </div>
        
        <!-- iframe 模式 -->
        <div v-if="chatModal.isIframe" class="chat-iframe-container">
          <iframe
            :src="chatModal.iframeUrl"
            class="chat-iframe"
            frameborder="0"
            allow="microphone"
          ></iframe>
        </div>
        
        <!-- 普通聊天模式 -->
        <template v-else>
          <div class="chat-messages" ref="chatMessages">
            <div
              v-for="(msg, index) in chatModal.messages"
              :key="index"
              class="chat-message"
              :class="msg.type"
            >
              <div class="message-avatar" :style="msg.type === 'user' ? { background: 'linear-gradient(135deg, #10B981 0%, #059669 100%)' } : { background: chatModal.bg }">
                {{ msg.type === 'user' ? userStore.userInitial : chatModal.icon }}
              </div>
              <div class="message-content">{{ msg.text }}</div>
            </div>
          </div>
          <div class="chat-input-area">
            <div class="quick-buttons">
              <button
                v-for="btn in quickButtons"
                :key="btn"
                class="quick-btn"
                @click="sendQuickMessage(btn)"
              >{{ btn }}</button>
            </div>
            <div class="chat-input-wrapper">
              <textarea
                v-model="chatInput"
                class="chat-input"
                placeholder="输入您的问题..."
                rows="1"
                @keydown.enter.prevent="sendMessage"
              ></textarea>
              <button class="chat-send" @click="sendMessage">➤</button>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 用户菜单
const isUserMenuOpen = ref(false)
const toggleUserMenu = () => {
  isUserMenuOpen.value = !isUserMenuOpen.value
}

const handleClickOutside = (e: MouseEvent) => {
  const target = e.target as HTMLElement
  if (!target.closest('.user-dropdown')) {
    isUserMenuOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

// 退出登录
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}

// 跳转到会员中心
const goToMembership = () => {
  router.push('/?tab=membership')
}

// 搜索和筛选
const searchQuery = ref('')
const currentFilter = ref('全部')
const filters = ['全部', '客服', '效率', '分析']

const currentIndustry = ref('all')
const showMoreIndustries = ref(false)
const industries = [
  { id: 'all', name: '全部' },
  { id: 'hr', name: '人资场景' },
  { id: 'legal', name: '法务合规' },
  { id: 'marketing', name: '营销市场' },
  { id: 'admin', name: '行政管理' },
  { id: 'education', name: '教育场景' },
  { id: 'healthcare', name: '康养场景' },
  { id: 'industry', name: '工业领域' }
]
const moreIndustries = [
  { id: 'finance', name: '金融场景' },
  { id: 'retail', name: '零售场景' },
  { id: 'logistics', name: '物流场景' },
  { id: 'realestate', name: '房产场景' },
  { id: 'agriculture', name: '农业场景' }
]

// AI 工具数据
const aiTools = [
  { name: 'AISM平台智能客服', icon: '🎯', tag: '客户服务', desc: '7×24小时在线服务，解答平台使用问题，提供智能化客户支持，快速响应您的需求', features: ['即时响应', '多轮对话', '问题分流'], bg: '#EDE9FE', filter: '客服' },
  { name: '会议纪要助手', icon: '📝', tag: '效率工具', desc: '自动记录会议内容，智能生成结构化纪要，提取关键决议和行动项，提升会议效率', features: ['语音转文字', '重点提取', '任务分配'], bg: '#D1FAE5', filter: '效率' },
  { name: 'Deepseek问答助手', icon: '🧠', tag: '知识问答', desc: '基于深度学习的智能问答系统，为您解答各类商业、技术、管理等专业问题', features: ['深度理解', '精准回答', '知识丰富'], bg: '#DBEAFE', filter: '分析' },
  { name: '行政助手', icon: '📋', tag: '日常办公', desc: '处理日常行政事务，日程安排、文档整理、提醒通知等，让办公更高效', features: ['日程管理', '文档处理', '智能提醒'], bg: '#FEF3C7', filter: '效率' },
  { name: '战略目标分析师', icon: '📈', tag: '战略咨询', desc: '帮助制定和分解战略目标，SWOT分析，竞品研究，市场洞察', features: ['目标分解', 'SWOT分析', '竞品研究'], bg: '#FCE7F3', filter: '分析' },
  { name: '商业计划书生成器', icon: '📄', tag: '创业工具', desc: '快速生成专业商业计划书，包含市场分析、财务预测等完整内容', features: ['模板丰富', '数据分析', '一键导出'], bg: '#E0E7FF', filter: '效率' },
  { name: '产品专利分析助手', icon: '💰', tag: '财务工具', desc: '智能分析财务数据，生成报表，提供财务建议和预警', features: ['数据分析', '报表生成', '风险预警'], bg: '#D1FAE5', filter: '分析' }
]

const filteredAiTools = computed(() => {
  let result = aiTools
  
  // 搜索筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(ai => 
      ai.name.toLowerCase().includes(query) || 
      ai.desc.toLowerCase().includes(query)
    )
  }
  
  // 分类筛选
  if (currentFilter.value !== '全部') {
    result = result.filter(ai => ai.filter === currentFilter.value)
  }
  
  return result
})

// 聊天模态框
const chatModal = ref({
  isOpen: false,
  name: '',
  icon: '',
  bg: '',
  messages: [] as { type: 'user' | 'bot'; text: string }[],
  isIframe: false,
  iframeUrl: ''
})

const chatInput = ref('')
const quickButtons = ['帮我写商业计划书', '分析一下市场趋势', '校友权益有哪些？', '联系客服']

const openChat = (ai: typeof aiTools[0]) => {
  // AISM 平台智能客服使用 iframe 嵌入
  if (ai.name === 'AISM平台智能客服') {
    chatModal.value = {
      isOpen: true,
      name: ai.name,
      icon: ai.icon,
      bg: ai.bg,
      messages: [],
      isIframe: true,
      iframeUrl: 'http://nw.sgcode.cn:18081/chatbot/grHow5qCsnZd7PYq'
    }
    return
  }
  
  // 会议纪要助手使用 iframe 嵌入
  if (ai.name === '会议纪要助手') {
    chatModal.value = {
      isOpen: true,
      name: ai.name,
      icon: ai.icon,
      bg: ai.bg,
      messages: [],
      isIframe: true,
      iframeUrl: 'http://nw.sgcode.cn:18081/chatbot/CjmrnoUyQKBa9wEP'
    }
    return
  }
  
  // Deepseek问答助手使用 iframe 嵌入
  if (ai.name === 'Deepseek问答助手') {
    chatModal.value = {
      isOpen: true,
      name: ai.name,
      icon: ai.icon,
      bg: ai.bg,
      messages: [],
      isIframe: true,
      iframeUrl: 'http://nw.sgcode.cn:18081/chatbot/pOcS3NYaXCkOP9K6'
    }
    return
  }
  
  // 行政助手使用 iframe 嵌入
  if (ai.name === '行政助手') {
    chatModal.value = {
      isOpen: true,
      name: ai.name,
      icon: ai.icon,
      bg: ai.bg,
      messages: [],
      isIframe: true,
      iframeUrl: 'http://nw.sgcode.cn:18081/chatbot/FIIxbn1rsEtmw2Yt'
    }
    return
  }
  
  // 战略目标分析师使用 iframe 嵌入
  if (ai.name === '战略目标分析师') {
    chatModal.value = {
      isOpen: true,
      name: ai.name,
      icon: ai.icon,
      bg: ai.bg,
      messages: [],
      isIframe: true,
      iframeUrl: 'http://nw.sgcode.cn:18081/chatbot/bKP9rLpTdWQgWSLA'
    }
    return
  }
  
  // 商业计划书生成器使用 iframe 嵌入
  if (ai.name === '商业计划书生成器') {
    chatModal.value = {
      isOpen: true,
      name: ai.name,
      icon: ai.icon,
      bg: ai.bg,
      messages: [],
      isIframe: true,
      iframeUrl: 'http://nw.sgcode.cn:18081/chatbot/7Myc08aVEoDKyHSK'
    }
    return
  }
  
  // 产品专利分析助手使用 iframe 嵌入
  if (ai.name === '产品专利分析助手') {
    chatModal.value = {
      isOpen: true,
      name: ai.name,
      icon: ai.icon,
      bg: ai.bg,
      messages: [],
      isIframe: true,
      iframeUrl: 'http://nw.sgcode.cn:18081/chatbot/fEAqUkRlnYkeF2SJ'
    }
    return
  }
  
  chatModal.value = {
    isOpen: true,
    name: ai.name,
    icon: ai.icon,
    bg: ai.bg,
    messages: [
      { type: 'bot', text: `您好！我是${ai.name}，很高兴为您服务。请问有什么可以帮助您的吗？` }
    ],
    isIframe: false,
    iframeUrl: ''
  }
}

const closeChat = () => {
  chatModal.value.isOpen = false
}

const sendMessage = () => {
  const text = chatInput.value.trim()
  if (!text) return

  chatModal.value.messages.push({ type: 'user', text })
  chatInput.value = ''

  // 模拟 AI 回复
  setTimeout(() => {
    const responses = [
      '感谢您的提问！让我为您详细解答这个问题...',
      '这是一个很好的问题。根据我们的服务体系...',
      '我理解您的需求。有维商学为您提供了多种解决方案...',
      '让我为您查询相关信息。稍等片刻...'
    ]
    const response = responses[Math.floor(Math.random() * responses.length)] || '感谢您的提问！'
    chatModal.value.messages.push({ type: 'bot', text: response })
    scrollToBottom()
  }, 1000)
}

const sendQuickMessage = (text: string) => {
  chatInput.value = text
  sendMessage()
}

const scrollToBottom = () => {
  nextTick(() => {
    const container = document.querySelector('.chat-messages')
    if (container) {
      container.scrollTop = container.scrollHeight
    }
  })
}
</script>

<style scoped>
.ai-page {
  background: #f8fafc;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.navbar {
  background: white;
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
}

.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-item {
  padding: 10px 20px;
  border-radius: 10px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  text-decoration: none;
}

.nav-item:hover {
  background: #f8fafc;
  color: #1e293b;
}

.nav-item.active {
  background: #4f46e5;
  color: white;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-notification {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: #f8fafc;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s;
}

.nav-notification:hover {
  background: #e2e8f0;
}

.user-dropdown {
  position: relative;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  overflow: hidden;
  z-index: 100;
  animation: scaleIn 0.2s ease;
}

.user-menu.active {
  display: block;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.user-menu-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.user-menu-header h4 {
  font-size: 14px;
  margin-bottom: 4px;
}

.user-menu-header p {
  font-size: 12px;
  color: #64748b;
}

.user-menu-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s;
  color: #1e293b;
}

.user-menu-item:hover {
  background: #f8fafc;
}

.user-menu-item.danger {
  color: #ef4444;
}

.user-menu-item.danger:hover {
  background: #fef2f2;
}

.ai-content {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px;
  width: 100%;
}

.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 20px;
}

.ai-header h1 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #1e293b;
}

.ai-header p {
  color: #64748b;
}

.search-box {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  padding: 12px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 15px;
  width: 280px;
  outline: none;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: #4f46e5;
}

.filter-btn {
  padding: 10px 20px;
  border: 2px solid #e2e8f0;
  background: white;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #64748b;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: #4f46e5;
  color: #4f46e5;
}

.filter-btn.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: white;
}

.industry-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.industry-btn {
  padding: 10px 20px;
  border: none;
  background: white;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #64748b;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.industry-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.industry-btn.active {
  background: #4f46e5;
  color: white;
}

.industry-filter-wrapper {
  position: relative;
}

.industry-more-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  min-width: 150px;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ai-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

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

.ai-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.ai-card-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #1e293b;
}

.ai-card-tag {
  font-size: 13px;
  color: #4f46e5;
  background: #ede9fe;
  padding: 4px 10px;
  border-radius: 20px;
}

.ai-card > p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.6;
}

.ai-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ai-card-feature {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
}

.ai-card-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ai-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* 聊天模态框 */
.chat-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

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

.chat-window {
  width: 90%;
  max-width: 600px;
  height: 80vh;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.chat-window.iframe-mode {
  max-width: 900px;
  height: 85vh;
}

.chat-iframe-container {
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.chat-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #1e293b;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.chat-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  cursor: pointer;
  font-size: 18px;
  color: #64748b;
  transition: all 0.2s;
}

.chat-close:hover {
  background: #cbd5e1;
  color: #1e293b;
}

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

.chat-message {
  display: flex;
  gap: 12px;
  max-width: 80%;
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

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

.message-content {
  background: #f1f5f9;
  padding: 12px 16px;
  border-radius: 16px;
  color: #1e293b;
  line-height: 1.5;
}

.chat-message.user .message-content {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
}

.chat-input-area {
  padding: 20px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.quick-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.quick-btn {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-btn:hover {
  border-color: #4f46e5;
  color: #4f46e5;
}

.chat-input-wrapper {
  display: flex;
  gap: 12px;
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.chat-input:focus {
  border-color: #4f46e5;
}

.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  cursor: pointer;
  font-size: 18px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.chat-send:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .ai-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 12px 20px;
  }
  .nav-menu {
    display: none;
  }
  .ai-content {
    padding: 20px;
  }
  .ai-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .search-input {
    width: 100%;
  }
  .ai-grid {
    grid-template-columns: 1fr;
  }
  .industry-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
  .industry-btn {
    white-space: nowrap;
  }
}
</style>
