<template>
  <view class="ai-chat-container">
    <!-- 聊天消息列表 -->
    <scroll-view 
      class="chat-messages" 
      scroll-y 
      :scroll-top="scrollTop"
      @scrolltoupper="loadMoreHistory"
      :scroll-with-animation="true">
      
      <!-- 加载更多历史消息 -->
      <view class="load-more" v-if="hasMoreHistory">
        <ns-loading :down-text="loadingText" :is-rotate="true" />
      </view>
      
      <!-- 消息列表 -->
      <view 
        v-for="(message, index) in messages" 
        :key="message.id" 
        class="message-item"
        :class="[message.role, { 'first-message': index === 0 }]">
        
        <!-- 用户消息 -->
        <view v-if="message.role === 'user'" class="user-message">
          <view class="avatar">
            <image :src="userAvatar" mode="aspectFill" />
          </view>
          <view class="message-content">
            <view class="message-bubble">
              <text class="message-text">{{ message.content }}</text>
            </view>
            <view class="message-time">{{ formatTime(message.timestamp) }}</view>
          </view>
        </view>
        
        <!-- AI消息 -->
        <view v-else class="ai-message">
          <view class="avatar">
            <image :src="aiAvatar" mode="aspectFill" />
          </view>
          <view class="message-content">
            <view class="message-bubble">
              <!-- 文本消息 -->
              <view v-if="message.type === 'text'" class="text-content">
                <rich-text :nodes="parseMarkdown(message.content)" />
              </view>
              
              <!-- Markdown文档 -->
              <view v-else-if="message.type === 'markdown'" class="markdown-content">
                <view class="markdown-header">
                  <text class="iconfont icon-markdown"></text>
                  <text class="markdown-title">文档内容</text>
                </view>
                <view class="markdown-body">
                  <rich-text :nodes="parseMarkdown(message.content)" />
                </view>
              </view>
              
              <!-- 文件链接 -->
              <view v-else-if="message.type === 'file'" class="file-content">
                <view class="file-item" @click="previewFile(message)">
                  <view class="file-icon">
                    <text class="iconfont icon-file"></text>
                  </view>
                  <view class="file-info">
                    <text class="file-name">{{ message.fileName }}</text>
                    <text class="file-size">{{ formatFileSize(message.fileSize) }}</text>
                  </view>
                  <view class="file-action">
                    <text class="iconfont icon-download"></text>
                  </view>
                </view>
              </view>
              
              <!-- 音频消息 -->
              <view v-else-if="message.type === 'audio'" class="audio-content">
                <view class="audio-player">
                  <view class="audio-info">
                    <text class="audio-title">{{ message.title || '语音消息' }}</text>
                    <text class="audio-duration">{{ formatDuration(message.duration) }}</text>
                  </view>
                  <view class="audio-controls">
                    <button 
                      class="play-btn" 
                      :class="{ playing: message.playing }"
                      @click="toggleAudio(message)">
                      <text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text>
                    </button>
                    <slider 
                      class="audio-slider" 
                      :value="message.currentTime || 0" 
                      :max="message.duration || 0"
                      @changing="onAudioSliderChange"
                      @change="onAudioSliderChangeEnd"
                      activeColor="#ff4544"
                      backgroundColor="#eeeeee"
                      block-size="12" />
                  </view>
                </view>
              </view>
              
              <!-- 视频消息 -->
              <view v-else-if="message.type === 'video'" class="video-content">
                <view class="video-player">
                  <video 
                    :src="message.url" 
                    :poster="message.cover"
                    :controls="true"
                    :autoplay="false"
                    class="video-element"
                    @play="onVideoPlay(message)"
                    @pause="onVideoPause(message)">
                  </video>
                  <view class="video-info">
                    <text class="video-title">{{ message.title || '视频消息' }}</text>
                    <text class="video-duration">{{ formatDuration(message.duration) }}</text>
                  </view>
                </view>
              </view>
              
              <!-- 跳转链接 -->
              <view v-else-if="message.type === 'link'" class="link-content">
                <view class="link-card" @click="openLink(message)">
                  <view class="link-image" v-if="message.image">
                    <image :src="message.image" mode="aspectFill" />
                  </view>
                  <view class="link-info">
                    <text class="link-title">{{ message.title }}</text>
                    <text class="link-desc">{{ message.description }}</text>
                    <text class="link-url">{{ message.url }}</text>
                  </view>
                </view>
              </view>
              
              <!-- 商品卡片 -->
              <view v-else-if="message.type === 'product'" class="product-content">
                <view class="product-card" @click="viewProduct(message)">
                  <view class="product-image">
                    <image :src="message.image" mode="aspectFill" />
                  </view>
                  <view class="product-info">
                    <text class="product-title">{{ message.title }}</text>
                    <text class="product-price color-base-text">¥{{ message.price }}</text>
                    <text class="product-desc">{{ message.description }}</text>
                  </view>
                </view>
              </view>
              
              <!-- 加载中状态 -->
              <view v-else-if="message.type === 'loading'" class="loading-content">
                <view class="loading-dots">
                  <text class="dot"></text>
                  <text class="dot"></text>
                  <text class="dot"></text>
                </view>
                <text class="loading-text">AI正在思考中...</text>
              </view>
              
              <!-- 操作按钮 -->
              <view class="message-actions" v-if="message.actions && message.actions.length > 0">
                <button 
                  v-for="action in message.actions" 
                  :key="action.id"
                  class="action-btn"
                  :class="action.type"
                  @click="handleAction(action, message)">
                  {{ action.text }}
                </button>
              </view>
            </view>
            <view class="message-time">{{ formatTime(message.timestamp) }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 输入区域 -->
    <view class="input-area">
      <view class="input-tools">
        <button class="tool-btn" @click="showMoreTools">
          <text class="iconfont icon-plus"></text>
        </button>
        <button class="tool-btn" @click="toggleVoiceInput">
          <text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
        </button>
      </view>
      
      <view class="input-container">
        <textarea 
          v-model="inputText" 
          class="message-input"
          placeholder="请输入您的问题..."
          :maxlength="500"
          :auto-height="true"
          :show-confirm-bar="false"
          @confirm="sendMessage"
          @input="onInput" />
        
        <button 
          class="send-btn" 
          :class="{ disabled: !inputText.trim() }"
          @click="sendMessage"
          :disabled="!inputText.trim()">
          <text class="iconfont icon-send"></text>
        </button>
      </view>
    </view>
    
    <!-- 更多工具面板 -->
    <view v-if="showToolsPanel" class="tools-popup">
      <view class="tools-mask" @click="hideToolsPanel"></view>
      <view class="tools-panel">
        <view class="tools-header">
          <text>更多功能</text>
          <button class="close-btn" @click="hideToolsPanel">
            <text class="iconfont icon-close"></text>
          </button>
        </view>
        <view class="tools-grid">
          <view class="tool-item" @click="selectImage">
            <view class="tool-icon">
              <text class="iconfont icon-image"></text>
            </view>
            <text class="tool-text">图片</text>
          </view>
          <view class="tool-item" @click="selectFile">
            <view class="tool-icon">
              <text class="iconfont icon-file"></text>
            </view>
            <text class="tool-text">文件</text>
          </view>
          <view class="tool-item" @click="startRecord">
            <view class="tool-icon">
              <text class="iconfont icon-voice"></text>
            </view>
            <text class="tool-text">语音</text>
          </view>
          <view class="tool-item" @click="selectLocation">
            <view class="tool-icon">
              <text class="iconfont icon-location"></text>
            </view>
            <text class="tool-text">位置</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 语音输入面板 -->
    <view v-if="showVoicePanel" class="voice-popup">
      <view class="voice-mask" @click="hideVoicePanel"></view>
      <view class="voice-input-panel">
        <view class="voice-header">
          <text>语音输入</text>
          <button class="close-btn" @click="hideVoicePanel">
            <text class="iconfont icon-close"></text>
          </button>
        </view>
        <view class="voice-content">
          <view class="voice-wave" :class="{ recording: voiceInputing }">
            <view 
              v-for="i in 8" 
              :key="i" 
              class="wave-bar"
              :style="{ animationDelay: (i * 0.1) + 's' }"></view>
          </view>
          <text class="voice-tip">{{ voiceInputing ? '正在录音，松开结束' : '点击开始录音' }}</text>
        </view>
        <view class="voice-actions">
          <button class="voice-btn" @click="toggleVoiceInput">
            <text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import nsLoading from '@/components/ns-loading/ns-loading.vue'

export default {
  name: 'ai-chat-message',
  components: {
    nsLoading
  },
  props: {
    // 初始消息列表
    initialMessages: {
      type: Array,
      default: () => []
    },
    // 用户头像
    userAvatar: {
      type: String,
      default: '/static/images/default-avatar.png'
    },
    // AI头像
    aiAvatar: {
      type: String,
      default: '/static/images/ai-avatar.png'
    },
    // 是否显示加载更多
    showLoadMore: {
      type: Boolean,
      default: true
    },
    // 最大消息数量
    maxMessages: {
      type: Number,
      default: 100
    },
    // 是否启用流式响应
    enableStreaming: {
      type: Boolean,
      default: true
    },
    // 流式响应速度（字符/秒）
    streamSpeed: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      messages: [],
      inputText: '',
      scrollTop: 0,
      hasMoreHistory: false,
      loadingText: '加载更多历史消息',
      voiceInputing: false,
      audioContext: null,
      currentAudio: null,
      messageId: 0,
      showToolsPanel: false,
      showVoicePanel: false,
      streamingMessage: null, // 流式消息对象
      streamInterval: null, // 流式更新定时器
      streamContent: '', // 流式内容缓存
      isStreaming: false // 是否正在流式输出
    }
  },
  created() {
    this.messages = [...this.initialMessages]
    this.messageId = this.messages.length
    
    // 初始化音频上下文
    this.initAudioContext()
  },
  mounted() {
    this.scrollToBottom()
  },
  watch: {
    messages: {
      handler() {
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      },
      deep: true
    }
  },
  methods: {
    // 初始化音频上下文
    initAudioContext() {
      // #ifdef H5
      if (window.AudioContext) {
        this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
      }
      // #endif
    },
    
    // 发送消息
    sendMessage() {
      if (!this.inputText.trim()) return
      
      const userMessage = {
        id: ++this.messageId,
        role: 'user',
        type: 'text',
        content: this.inputText.trim(),
        timestamp: Date.now()
      }
      
      this.messages.push(userMessage)
      this.inputText = ''
      
      // 显示AI正在输入
      const loadingMessage = {
        id: ++this.messageId,
        role: 'ai',
        type: 'loading',
        content: '',
        timestamp: Date.now()
      }
      this.messages.push(loadingMessage)
      
      // 模拟AI回复
      setTimeout(() => {
        this.messages = this.messages.filter(msg => msg.type !== 'loading')
        
        const aiMessage = {
          id: ++this.messageId,
          role: 'ai',
          type: 'text',
          content: this.generateAIResponse(userMessage.content),
          timestamp: Date.now(),
          actions: [
            { id: 1, text: '有帮助', type: 'like' },
            { id: 2, text: '没帮助', type: 'dislike' }
          ]
        }
        
        this.messages.push(aiMessage)
        
        // 触发消息发送事件
        this.$emit('message-sent', userMessage)
        this.$emit('ai-response', aiMessage)
      }, 1000)
    },
    
    // 生成AI回复（模拟）
    generateAIResponse(userMessage) {
      // 这里可以集成真实的AI服务
      const responses = {
        '你好': '您好！我是AI智能客服，很高兴为您服务！有什么可以帮助您的吗？',
        '价格': '我们的产品价格根据型号和配置有所不同，具体价格请查看商品详情页面。',
        '发货': '一般情况下，订单会在24小时内发货，具体时效请查看物流信息。',
        '退货': '支持7天无理由退货，请确保商品完好无损。',
        '客服': '我们的客服工作时间是9:00-18:00，有问题可以随时联系我们。'
      }
      
      for (let key in responses) {
        if (userMessage.includes(key)) {
          return responses[key]
        }
      }
      
      return `感谢您的咨询！关于"${userMessage}"的问题，我们的专业客服会尽快为您解答。您也可以查看我们的帮助文档获取更多信息。`
    },
    
    // 解析Markdown
    parseMarkdown(content) {
      if (!content) return ''
      
      // 简单的Markdown解析
      let html = content
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 粗体
        .replace(/\*(.*?)\*/g, '<em>$1</em>') // 斜体
        .replace(/`(.*?)`/g, '<code>$1</code>') // 代码
        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>') // 链接
        .replace(/\n/g, '<br>') // 换行
      
      return html
    },
    
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return Math.floor(diff / 60000) + '分钟前'
      } else if (diff < 86400000) { // 1天内
        return Math.floor(diff / 3600000) + '小时前'
      } else {
        return date.getMonth() + 1 + '月' + date.getDate() + '日 ' + 
               date.getHours().toString().padStart(2, '0') + ':' + 
               date.getMinutes().toString().padStart(2, '0')
      }
    },
    
    // 格式化文件大小
    formatFileSize(bytes) {
      if (!bytes) return '0B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + sizes[i]
    },
    
    // 格式化时长
    formatDuration(seconds) {
      if (!seconds) return '00:00'
      const mins = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return mins.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0')
    },
    
    // 滚动到底部
    scrollToBottom() {
      setTimeout(() => {
        this.scrollTop = 999999
      }, 100)
    },
    
    // 加载更多历史消息
    loadMoreHistory() {
      if (!this.showLoadMore) return
      
      this.hasMoreHistory = true
      this.loadingText = '加载历史消息中...'
      
      // 模拟加载历史消息
      setTimeout(() => {
        const historyMessages = [
          {
            id: --this.messageId,
            role: 'ai',
            type: 'text',
            content: '这是历史消息1',
            timestamp: Date.now() - 86400000
          },
          {
            id: --this.messageId,
            role: 'user',
            type: 'text',
            content: '这是历史消息2',
            timestamp: Date.now() - 86400000
          }
        ]
        
        this.messages = [...historyMessages, ...this.messages]
        this.hasMoreHistory = false
        this.$emit('history-loaded', historyMessages)
      }, 1000)
    },
    
    // 显示更多工具
    showMoreTools() {
      this.showToolsPanel = true
    },
    
    // 隐藏工具面板
    hideToolsPanel() {
      this.showToolsPanel = false
    },
    
    // 显示语音面板
    showVoicePanel() {
      this.showVoicePanel = true
    },
    
    // 隐藏语音面板
    hideVoicePanel() {
      this.showVoicePanel = false
      this.voiceInputing = false
    },
    
    // 切换语音输入
    toggleVoiceInput() {
      this.voiceInputing = !this.voiceInputing
      
      if (this.voiceInputing) {
        this.showVoicePanel()
        this.startVoiceInput()
      } else {
        this.stopVoiceInput()
        this.hideVoicePanel()
      }
    },
    
    // 开始语音输入
    startVoiceInput() {
      // #ifdef H5
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(stream => {
            // 语音输入处理
            console.log('语音输入开始')
          })
          .catch(error => {
            console.error('语音输入错误:', error)
            uni.showToast({
              title: '语音输入失败',
              icon: 'none'
            })
          })
      }
      // #endif
    },
    
    // 停止语音输入
    stopVoiceInput() {
      this.voiceInputing = false
      // 停止语音输入逻辑
    },
    
    // 预览文件
    previewFile(message) {
      uni.showLoading({ title: '打开文件中...' })
      
      // #ifdef H5
      window.open(message.url, '_blank')
      // #endif
      
      // #ifdef APP-PLUS
      plus.runtime.openFile(message.url, {
        error: (e) => {
          uni.showToast({
            title: '文件打开失败',
            icon: 'none'
          })
        }
      })
      // #endif
      
      uni.hideLoading()
      this.$emit('file-preview', message)
    },
    
    // 切换音频播放
    toggleAudio(message) {
      if (message.playing) {
        this.pauseAudio(message)
      } else {
        this.playAudio(message)
      }
    },
    
    // 播放音频
    playAudio(message) {
      if (this.currentAudio && this.currentAudio !== message) {
        this.pauseAudio(this.currentAudio)
      }
      
      // 模拟音频播放
      message.playing = true
      message.currentTime = message.currentTime || 0
      
      this.currentAudio = message
      this.$emit('audio-play', message)
    },
    
    // 暂停音频
    pauseAudio(message) {
      message.playing = false
      this.$emit('audio-pause', message)
    },
    
    // 音频滑块变化
    onAudioSliderChange(e) {
      if (this.currentAudio) {
        this.currentAudio.currentTime = e.detail.value
      }
    },
    
    onAudioSliderChangeEnd(e) {
      if (this.currentAudio) {
        this.currentAudio.currentTime = e.detail.value
        this.$emit('audio-seek', this.currentAudio)
      }
    },
    
    // 视频播放
    onVideoPlay(message) {
      this.$emit('video-play', message)
    },
    
    // 视频暂停
    onVideoPause(message) {
      this.$emit('video-pause', message)
    },
    
    // 打开链接
    openLink(message) {
      // #ifdef H5
      window.open(message.url, '_blank')
      // #endif
      
      // #ifdef APP-PLUS
      plus.runtime.openURL(message.url)
      // #endif
      
      this.$emit('link-open', message)
    },
    
    // 查看商品
    viewProduct(message) {
      this.$emit('product-view', message)
    },
    
    // 处理操作
    handleAction(action, message) {
      this.$emit('action-click', { action, message })
    },
    
    // 输入事件
    onInput(e) {
      this.$emit('input-change', e.detail.value)
    },
    
    // 选择图片
    selectImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          const imageMessage = {
            id: ++this.messageId,
            role: 'user',
            type: 'image',
            content: '',
            imageUrl: tempFilePaths[0],
            timestamp: Date.now()
          }
          this.messages.push(imageMessage)
          this.hideToolsPanel()
          this.$emit('image-selected', imageMessage)
        }
      })
    },
    
    // 选择文件
    selectFile() {
      // #ifdef H5
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = '*/*'
      input.onchange = (e) => {
        const file = e.target.files[0]
        if (file) {
          const fileMessage = {
            id: ++this.messageId,
            role: 'user',
            type: 'file',
            content: '',
            fileName: file.name,
            fileSize: file.size,
            fileType: file.type,
            timestamp: Date.now()
          }
          this.messages.push(fileMessage)
          this.hideToolsPanel()
          this.$emit('file-selected', fileMessage)
        }
      }
      input.click()
      // #endif
    },
    
    // 开始录音
    startRecord() {
      this.toggleVoiceInput()
    },
    
    // 选择位置
    selectLocation() {
      uni.chooseLocation({
        success: (res) => {
          const locationMessage = {
            id: ++this.messageId,
            role: 'user',
            type: 'location',
            content: '',
            latitude: res.latitude,
            longitude: res.longitude,
            address: res.address,
            name: res.name,
            timestamp: Date.now()
          }
          this.messages.push(locationMessage)
          this.hideToolsPanel()
          this.$emit('location-selected', locationMessage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.ai-chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  box-sizing: border-box;
  height: calc(100% - 200rpx); /* 减去输入区域高度 */
}

.load-more {
  text-align: center;
  padding: 20rpx 0;
}

.message-item {
  margin-bottom: 30rpx;
  
  &.first-message {
    margin-top: 20rpx;
  }
}

.user-message, .ai-message {
  display: flex;
  align-items: flex-start;
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .message-content {
    flex: 1;
    margin-left: 20rpx;
    max-width: calc(100% - 100rpx);
    min-width: 0;
    width: 0; /* 添加这个属性防止flex元素溢出 */
  }
}

.user-message {
  flex-direction: row-reverse;
  
  .message-content {
    margin-left: 0;
    margin-right: 20rpx;
    text-align: right;
  }
  
  .message-bubble {
    background-color: #ff4544;
    color: white;
    border-radius: 20rpx 20rpx 0 20rpx;
    padding: 20rpx;
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
  }
}

.ai-message {
  .message-bubble {
    background-color: white;
    border-radius: 20rpx 20rpx 20rpx 0;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    max-width: 100%;
    word-break: break-word;
  }
}

.message-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 各种消息类型样式 */
.markdown-content {
  .markdown-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
    
    .icon-markdown {
      color: #ff4544;
      margin-right: 10rpx;
    }
    
    .markdown-title {
      font-weight: bold;
      color: #333;
    }
  }
  
  .markdown-body {
    line-height: 1.6;
    
    strong {
      font-weight: bold;
    }
    
    em {
      font-style: italic;
    }
    
    code {
      background-color: #f5f5f5;
      padding: 4rpx 8rpx;
      border-radius: 4rpx;
      font-family: monospace;
    }
    
    a {
      color: #ff4544;
      text-decoration: underline;
    }
  }
}

.file-content {
  .file-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #f8f9fa;
    border-radius: 10rpx;
    border: 2rpx solid #e9ecef;
    
    .file-icon {
      margin-right: 20rpx;
      
      .icon-file {
        font-size: 48rpx;
        color: #ff4544;
      }
    }
    
    .file-info {
      flex: 1;
      
      .file-name {
        display: block;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .file-size {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .file-action {
      .icon-download {
        font-size: 36rpx;
        color: #ff4544;
      }
    }
  }
}

.audio-content {
  .audio-player {
    .audio-info {
      margin-bottom: 15rpx;
      
      .audio-title {
        display: block;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .audio-duration {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .audio-controls {
      display: flex;
      align-items: center;
      
      .play-btn {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background-color: #ff4544;
        color: white;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.playing {
          background-color: #999;
        }
      }
      
      .audio-slider {
        flex: 1;
      }
    }
  }
}

.video-content {
  .video-player {
    .video-element {
      width: 100%;
      height: 400rpx;
      border-radius: 10rpx;
    }
    
    .video-info {
      margin-top: 15rpx;
      
      .video-title {
        display: block;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .video-duration {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.link-content {
  .link-card {
    display: flex;
    background-color: #f8f9fa;
    border-radius: 10rpx;
    overflow: hidden;
    border: 2rpx solid #e9ecef;
    
    .link-image {
      width: 120rpx;
      height: 120rpx;
      flex-shrink: 0;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .link-info {
      flex: 1;
      padding: 20rpx;
      
      .link-title {
        display: block;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .link-desc {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 5rpx;
      }
      
      .link-url {
        display: block;
        font-size: 22rpx;
        color: #ff4544;
      }
    }
  }
}

.product-content {
  .product-card {
    display: flex;
    background-color: white;
    border-radius: 10rpx;
    overflow: hidden;
    border: 2rpx solid #e9ecef;
    
    .product-image {
      width: 120rpx;
      height: 120rpx;
      flex-shrink: 0;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .product-info {
      flex: 1;
      padding: 20rpx;
      
      .product-title {
        display: block;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .product-price {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .product-desc {
        display: block;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.loading-content {
  display: flex;
  align-items: center;
  
  .loading-dots {
    display: flex;
    margin-right: 15rpx;
    
    .dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: #999;
      margin: 0 4rpx;
      animation: dotPulse 1.5s infinite ease-in-out;
      
      &:nth-child(2) {
        animation-delay: 0.2s;
      }
      
      &:nth-child(3) {
        animation-delay: 0.4s;
      }
    }
  }
  
  .loading-text {
    color: #999;
  }
}

@keyframes dotPulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.message-actions {
  margin-top: 15rpx;
  display: flex;
  gap: 10rpx;
  
  .action-btn {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    border: 2rpx solid #e9ecef;
    background-color: white;
    
    &.like {
      color: #ff4544;
      border-color: #ff4544;
    }
    
    &.dislike {
      color: #999;
      border-color: #999;
    }
  }
}

/* 输入区域样式 */
.input-area {
  background-color: white;
  border-top: 2rpx solid #eeeeee;
  padding: 20rpx;
}

.input-tools {
  display: flex;
  margin-bottom: 15rpx;
  
  .tool-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: #f8f8f8;
    margin-right: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 32rpx;
      color: #666;
    }
  }
}

.input-container {
  display: flex;
  align-items: flex-end;
  
  .message-input {
    flex: 1;
    min-height: 80rpx;
    max-height: 200rpx;
    background-color: #f8f8f8;
    border-radius: 40rpx;
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    line-height: 1.4;
  }
  
  .send-btn {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #ff4544;
    margin-left: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.disabled {
      background-color: #cccccc;
    }
    
    .iconfont {
      font-size: 36rpx;
      color: white;
    }
  }
}

/* 弹窗样式 */
.tools-popup, .voice-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.tools-mask, .voice-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 工具面板样式 */
.tools-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  
  .tools-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 2rpx solid #eeeeee;
    
    .close-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
  }
  
  .tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30rpx;
    gap: 30rpx;
    
    .tool-item {
      text-align: center;
      
      .tool-icon {
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background-color: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15rpx;
        
        .iconfont {
          font-size: 48rpx;
          color: #666;
        }
      }
      
      .tool-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

/* 语音输入面板样式 */
.voice-input-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 500rpx;
  
  .voice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .close-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
  }
  
  .voice-content {
    text-align: center;
    margin-bottom: 30rpx;
    
    .voice-wave {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;
      margin-bottom: 20rpx;
      
      .wave-bar {
        width: 6rpx;
        height: 30rpx;
        background-color: #ff4544;
        margin: 0 3rpx;
        border-radius: 3rpx;
        animation: wavePulse 1.5s infinite ease-in-out;
      }
      
      &.recording .wave-bar {
        animation: wavePulseRecording 0.5s infinite ease-in-out;
      }
    }
    
    .voice-tip {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .voice-actions {
    text-align: center;
    
    .voice-btn {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: #ff4544;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      
      .iconfont {
        font-size: 48rpx;
        color: white;
      }
    }
  }
}

@keyframes wavePulse {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes wavePulseRecording {
  0%, 100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(2);
  }
}
</style>