<!-- =============================================================================
// 企微IT智能服务台 — H5用户端输入栏组件
// =============================================================================
// 说明：底部输入栏，固定在消息列表下方，包含：
//    [工具栏：表情/图片/文件/拍照] [文本输入框] [发送按钮]
//    - 输入框默认3行可见，高度随内容动态适应
//    - 输入框顶部拖拽手柄可手动调节高度
//    - Enter 发送，Shift+Enter 换行
//    - 支持粘贴图片上传（Ctrl+V 粘贴截图）
//    - 支持图片/文件选择上传
//    - 底部引导条提示摇铃功能
// ============================================================================= -->

<template>
  <div class="input-bar">
    <!-- 拖拽手柄：可手动调节输入栏高度 -->
    <div
      class="input-bar__resize-handle"
      @mousedown="handleInputResizeStart"
    >
      <div class="input-bar__resize-track"></div>
    </div>

    <!-- 输入区域：工具栏 + 输入框 + 发送按钮 -->
    <div class="input-bar__row">
      <!-- 工具栏：表情/图片/文件/拍照/截图 -->
      <div class="input-bar__toolbar">
        <button class="input-bar__tool-btn" title="表情" @click="handleEmoji">
          <span>😊</span>
        </button>
        <button class="input-bar__tool-btn" title="图片" @click="handleImage">
          <span>🖼️</span>
        </button>
        <button class="input-bar__tool-btn" title="文件" @click="handleFile">
          <span>📎</span>
        </button>
        <button class="input-bar__tool-btn" title="拍照" @click="handleCamera">
          <span>📷</span>
        </button>
        <button class="input-bar__tool-btn" title="截图" @click="handleScreenshot">
          <span>✂️</span>
        </button>
      </div>

      <!-- 表情选择面板（简易版：常用 Emoji 网格） -->
      <div v-if="showEmojiPanel" class="emoji-panel">
        <div class="emoji-panel__grid">
          <button
            v-for="emoji in commonEmojis"
            :key="emoji"
            class="emoji-panel__item"
            @click="onEmojiClick(emoji)"
          >{{ emoji }}</button>
        </div>
      </div>

      <!-- 输入行：输入框 + 发送按钮 -->
      <div class="input-bar__input-row">
        <!-- 文本输入框 — 默认3行，自适应内容高度 -->
        <van-field
          ref="inputFieldRef"
          v-model="inputText"
          class="input-bar__field"
          placeholder="请输入消息..."
          type="textarea"
          :autosize="{ minHeight: 54, maxHeight: 200 }"
          rows="3"
          :disabled="!store.isLoggedIn"
          @keydown.enter="handleEnterKey"
          @paste="handlePaste"
        />

        <!-- 发送按钮 -->
        <van-button
          class="input-bar__send-btn"
          type="primary"
          size="small"
          :disabled="!canSend"
          :loading="store.loading"
          @click="handleSend"
        >
          发送
        </van-button>
      </div>
    </div>

    <!-- 底部引导条：根据是否可呼叫坐席切换文案 -->
    <div v-if="store.canCallAgent" class="input-bar__guide input-bar__guide--active">
      🔔 摇传菜铃通道已开启，点击标题栏传菜铃呼叫 IT 坐席
    </div>

    <!-- 表情面板打开时的半透明遮罩（点击关闭表情面板） -->
    <div v-if="showEmojiPanel" class="emoji-panel__overlay" @click="showEmojiPanel = false"></div>
    <div v-else class="input-bar__guide">
      请描述你遇到的问题，AI 助手会帮你分析 💡
    </div>

    <!-- 隐藏的文件输入框（图片/文件上传用，由工具栏按钮触发） -->
    <input
      ref="fileInputRef"
      type="file"
      style="display: none"
      @change="handleFileSelect"
    />

    <!-- 隐藏的拍照输入框（移动端直接调用摄像头） -->
    <input
      ref="cameraInputRef"
      type="file"
      accept="image/*"
      capture="environment"
      style="display: none"
      @change="handleCameraCapture"
    />

    <!-- 截图区域选择编辑器（对标微信/企微截图体验） -->
    <ScreenshotEditor
      v-if="showScreenshotEditor"
      :screenshot-canvas="screenshotCanvas"
      @confirm="onScreenshotConfirm"
      @cancel="onScreenshotCancel"
    />
  </div>
</template>

<script setup lang="ts">
/**
 * InputBar 输入栏组件
 * 布局：[工具栏] [输入框] [发送按钮]
 * 输入框固定底部，默认3行可见，高度动态适应
 * 顶部拖拽手柄可手动调节输入栏整体高度
 * 工具栏：表情/图片/文件/拍照
 * 支持粘贴图片上传（Ctrl+V）和文件选择上传
 */
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
import { showToast } from 'vant'
import html2canvas from 'html2canvas-pro'
import { useConversationStore } from '@/stores/conversation'
import { uploadFile } from '@/api/upload'
import ScreenshotEditor from './ScreenshotEditor.vue'

// ============================================================================
// 工具函数：安全提取错误详情（防止 [object Object]）
// ============================================================================
/**
 * 将 error.response.data.detail 安全转换为字符串
 * FastAPI 422 时 detail 是数组，直接拼接会变成 "[object Object]"
 */
function formatErrorDetail(detail: any): string {
  if (!detail) return ''
  if (typeof detail === 'string') return detail
  if (Array.isArray(detail)) {
    // FastAPI 验证错误：取每个元素的 msg 和 loc
    return detail.map((d: any) => {
      if (d.loc && d.msg) return `${d.loc.slice(1).join('.')}: ${d.msg}`
      if (d.msg) return d.msg
      return JSON.stringify(d)
    }).join('; ')
  }
  if (typeof detail === 'object') return JSON.stringify(detail)
  return String(detail)
}

const store = useConversationStore()
// 保留 emit 声明供阶段二使用（呼叫坐席事件将改为由标题栏传菜铃触发）
defineEmits<{
  (e: 'call-agent'): void
}>()

/** 输入框文本 */
const inputText = ref<string>('')

/** 输入框组件引用（用于获取 DOM 元素） */
const inputFieldRef = ref<any>(null)

/** 隐藏文件输入框 DOM 引用（用于触发系统文件选择器） */
const fileInputRef = ref<HTMLInputElement | null>(null)

/** 隐藏拍照输入框 DOM 引用（用于调用移动端摄像头） */
const cameraInputRef = ref<HTMLInputElement | null>(null)

/** 是否可以发送消息（输入框有内容且未在加载中） */
const canSend = computed(() => {
  return inputText.value.trim().length > 0 && !store.loading && store.isLoggedIn
})

/** 是否正在拖拽调节输入栏高度 */
const isInputResizing = ref<boolean>(false)

/** 表情面板是否可见 */
const showEmojiPanel = ref<boolean>(false)

/** 截图编辑器是否可见 */
const showScreenshotEditor = ref<boolean>(false)

/** html2canvas 生成的完整页面截图 Canvas 对象（传给 ScreenshotEditor） */
let screenshotCanvas: HTMLCanvasElement | null = null

// ============================================================================
// 生命周期：Document 级别粘贴监听（修复 van-field @paste 不触发文件粘贴的问题）
// ============================================================================
onMounted(() => {
  document.addEventListener('paste', handleDocPaste)
})

onUnmounted(() => {
  document.removeEventListener('paste', handleDocPaste)
})

/**
 * Document 级别粘贴处理（备用方案）
 * 做什么：捕获 van-field @paste 未处理的文件粘贴
 */
async function handleDocPaste(event: ClipboardEvent): Promise<void> {
  // 如果事件目标是输入框，说明 @paste 已经处理，跳过
  const target = event.target as HTMLElement
  if (target.tagName === 'TEXTAREA' || target.isContentEditable) return

  const items = event.clipboardData?.items
  if (!items) return

  for (const item of Array.from(items)) {
    if (item.kind === 'file') {
      event.preventDefault()
      const file = item.getAsFile()
      if (!file) continue

      if (file.type.startsWith('image/')) {
        await handleImageUpload(file)
      } else {
        await handleFileUpload(file)
      }
      return
    }
  }
}

/**
 * 常用表情列表（8行x8列 = 64 个常用表情）
 * 按使用频率排序，覆盖日常沟通场景
 */
const commonEmojis = [
  '😀','😃','😄','😁','😆','😅','🤣','😂',
  '🙂','😊','😇','🥰','😍','🤩','😘','😗',
  '😚','😙','😋','😛','😜','🤪','😝','🤑',
  '🤗','🤭','🤫','🤔','🤐','🤨','😐','😑',
  '😶','😏','😒','🙄','😬','😮','🤯','😲',
  '😳','🥺','😢','😭','😤','😠','😡','🤬',
  '👍','👎','👏','🙌','🤝','💪','✌️','🤞',
  '❤️','🧡','💛','💚','💙','💜','💯','✅',
]

/**
 * 选择表情后插入到输入框
 *
 * 做什么：将表情字符追加到输入框末尾
 *
 * 为什么简单追加而非操作 DOM 光标位置：
 *   Vant van-field 的内部 textarea 有自己的状态管理，
 *   直接操作 DOM（selectionStart/selectionEnd）可能与 Vant 内部状态冲突。
 *   简单追加到 inputText.value 是最可靠的方式——v-model 会自动同步到 textarea。
 */
function onEmojiClick(emoji: string): void {
  inputText.value += emoji
  showEmojiPanel.value = false
  nextTick(() => {
    // 让输入框获得焦点，用户可以继续输入
    const el = inputFieldRef.value?.$el?.querySelector('textarea') as HTMLTextAreaElement | null
    el?.focus()
  })
}

// ============================================================================
// 消息发送
// ============================================================================

/**
 * 处理 Enter 键
 * 桌面端 Enter 发送，Shift+Enter 换行
 * 移动端不拦截 Enter（让系统默认行为处理）
 */
function handleEnterKey(event: KeyboardEvent): void {
  const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
  if (isMobile) return

  // 桌面端：Shift+Enter 换行，Enter 发送
  if (!event.shiftKey) {
    event.preventDefault()
    handleSend()
  }
}

/**
 * 发送消息
 * 调用 store 发送消息方法，发送后清空输入框
 */
async function handleSend(): Promise<void> {
  const content = inputText.value.trim()
  if (!content || store.loading) return

  inputText.value = ''

  await store.sendNewMessage(content)
}

// ============================================================================
// 文件/图片上传
// ============================================================================

/**
 * 处理粘贴事件
 * 做什么：检测剪贴板中的图片或文件，自动上传并发送
 * 为什么：用户需要从剪贴板直接粘贴图片/文件
 *
 * 支持：
 *   1. 粘贴图片（截图工具 Ctrl+V / 复制图片）
 *   2. 粘贴文件（从文件管理器复制的文件）
 *   3. 纯文本粘贴（默认行为，不拦截）
 */
async function handlePaste(event: ClipboardEvent): Promise<void> {
  const items = event.clipboardData?.items
  if (!items) return

  for (const item of Array.from(items)) {
    // 处理所有文件类型（图片 + 普通文件）
    if (item.kind === 'file') {
      event.preventDefault()           // 阻止默认粘贴（文件不插入文本）
      const file = item.getAsFile()
      if (!file) continue

      // 根据文件类型选择上传方式
      if (file.type.startsWith('image/')) {
        await handleImageUpload(file)
      } else {
        await handleFileUpload(file)
      }
      return                       // 每次粘贴只处理第一个文件
    }
  }
  // 纯文本：不拦截，浏览器默认行为（插入文本到输入框）
}

/**
 * 上传图片并发送图片消息
 * 做什么：粘贴或选择图片后，上传到服务器并发送消息
 * 为什么：用户粘贴图片时期望直接发送，而不是只上传不发送
 *
 * 注意：H5 端当前后端 sendMessage API 只支持文本消息，
 * 所以图片上传后以文本形式发送截图链接，后续后端支持图片消息后可升级
 *
 * @param file - 图片文件对象（File 或 Blob）
 */
async function handleImageUpload(file: File | Blob): Promise<void> {
  try {
    showToast('图片上传中...')

    // 1. 上传图片到服务器
    const result = await uploadFile(file)

    // 2. 以图片消息类型发送（携带 media_url，MessageBubble 会渲染缩略图）
    const fileName = file instanceof File ? file.name : '截图'
    await store.sendNewMessage(`[图片] ${fileName}`, {
      msg_type: 'image',
      media_url: result.url,
      file_name: result.filename,
      file_size: result.file_size,
    })

    showToast('图片发送成功')
  } catch (error: any) {
    console.error('图片上传失败:', error)
    showToast(
      formatErrorDetail(error?.response?.data?.detail) ||
      error?.message ||
      '图片上传失败，请重试'
    )
  }
}

/**
 * 上传文件并发送文件消息
 * 做什么：粘贴或选择文件后，上传到服务器并发送消息
 * 为什么：用户粘贴文件时期望直接发送
 *
 * 注意：H5 端当前后端 sendMessage API 只支持文本消息，
 * 所以文件上传后以文本形式发送文件链接
 *
 * @param file - 文件对象（File 或 Blob）
 */
async function handleFileUpload(file: File | Blob): Promise<void> {
  try {
    const fileName = file instanceof File ? file.name : '文件'
    showToast(`文件上传中: ${fileName}`)

    // 1. 上传文件到服务器
    const result = await uploadFile(file)

    // 2. 以文件消息类型发送（携带 media_url，MessageBubble 会渲染文件卡片）
    await store.sendNewMessage(`[文件] ${result.filename}`, {
      msg_type: 'file',
      media_url: result.url,
      file_name: result.filename,
      file_size: result.file_size,
    })

    showToast('文件发送成功')
  } catch (error: any) {
    console.error('文件上传失败:', error)
    showToast(
      formatErrorDetail(error?.response?.data?.detail) ||
      error?.message ||
      '文件上传失败，请重试'
    )
  }
}

/**
 * 处理文件选择上传
 * 通过隐藏的 <input type="file"> 触发
 */
async function handleFileSelect(event: Event): Promise<void> {
  const input = event.target as HTMLInputElement
  const files = input.files
  if (!files || files.length === 0) return

  for (const file of Array.from(files)) {
    try {
      showToast(`正在上传: ${file.name}`)

      // 1. 上传文件到服务器
      const result = await uploadFile(file)

      showToast(`${file.name} 上传成功`)
      console.log('[InputBar] 文件上传成功:', result.url)
    } catch (error: any) {
      console.error('文件上传失败:', error)
      showToast(`${file.name} 上传失败`)
    }
  }

  // 重置 input，允许重复选择同一文件
  input.value = ''
}

/**
 * 处理表情按钮点击
 * 弹出简易表情选择器（常用 Emoji 面板）
 */
function handleEmoji(): void {
  showEmojiPanel.value = !showEmojiPanel.value
}

/**
 * 处理图片按钮点击
 * 触发文件选择器（限定图片类型）
 */
function handleImage(): void {
  if (fileInputRef.value) {
    fileInputRef.value.accept = 'image/*'
    fileInputRef.value.multiple = true
    fileInputRef.value.click()
  }
}

/**
 * 处理文件按钮点击
 * 触发文件选择器（不限类型）
 */
function handleFile(): void {
  if (fileInputRef.value) {
    fileInputRef.value.accept = ''
    fileInputRef.value.multiple = true
    fileInputRef.value.click()
  }
}

/**
 * 处理拍照按钮点击
 * 触发移动端摄像头拍照（capture="environment" 调用后置摄像头）
 * 桌面端降级为普通图片选择器
 */
function handleCamera(): void {
  if (cameraInputRef.value) {
    // 重置 input，允许重复拍照
    cameraInputRef.value.value = ''
    cameraInputRef.value.click()
  }
}

/**
 * 处理拍照/选择图片后的回调
 * 将拍摄的图片上传并发送图片消息
 */
async function handleCameraCapture(event: Event): Promise<void> {
  const input = event.target as HTMLInputElement
  const files = input.files
  if (!files || files.length === 0) return

  const file = files[0]
  if (file.type.startsWith('image/')) {
    await handleImageUpload(file)
  }

  // 重置 input，允许重复拍照
  input.value = ''
}

/**
 * 处理截图按钮点击（对标微信/企微）
 *
 * 做什么：截取当前页面，然后进入区域选择模式
 * 为什么：用户反馈截图不好用，需要对标微信/企微的截图体验
 *
 * 交互流程：
 *   1. 用 html2canvas 截取整个页面
 *   2. 显示 ScreenshotEditor 组件（全屏遮罩+区域选择）
 *   3. 用户在编辑器中选择区域并确认
 *   4. 接收裁剪后的图片 Blob，上传并发送
 *   5. 如果 html2canvas 失败（企微内置浏览器兼容问题），fallback 到手动选择图片
 */
async function handleScreenshot(): Promise<void> {
  try {
    showToast('正在截取页面...')

    // 1. 截取整个页面（增加兼容性配置：useCORS + allowTaint 提升企微浏览器兼容性）
    const canvas = await html2canvas(document.body, {
      useCORS: true,
      allowTaint: true,
      scale: window.devicePixelRatio || 1,
      logging: false,
      backgroundColor: '#ffffff',
      // 企微内置浏览器兼容性优化
      foreignObjectRendering: false,
      removeContainer: true,
    })

    // 2. 保存 canvas 并显示截图编辑器
    screenshotCanvas = canvas
    showScreenshotEditor.value = true
  } catch (error) {
    console.error('截图失败，尝试 fallback 方案:', error)
    // Fallback：html2canvas 在企微内置浏览器中可能失败
    // 降级为手动选择图片（从相册选取或重新拍照）
    try {
      if (cameraInputRef.value) {
        showToast('截图功能不可用，请选择图片替代')
        cameraInputRef.value.value = ''
        // 不使用 capture 属性，允许从相册选择
        cameraInputRef.value.removeAttribute('capture')
        cameraInputRef.value.click()
        // 恢复 capture 属性
        nextTick(() => {
          if (cameraInputRef.value) {
            cameraInputRef.value.setAttribute('capture', 'environment')
          }
        })
      } else {
        showToast('截图失败，请重试')
      }
    } catch (fallbackError) {
      console.error('截图 fallback 也失败:', fallbackError)
      showToast('截图失败，请重试')
    }
  }
}

/**
 * 截图编辑器确认回调（对标微信/企微）
 * 接收裁剪后的图片 Blob，上传并发送
 *
 * 注意：H5 端当前后端 sendMessage API 只支持文本消息，
 * 所以截图上传后以文本形式发送截图链接，后续后端支持图片消息后可升级
 */
async function onScreenshotConfirm(blob: Blob): Promise<void> {
  try {
    console.log('[InputBar] 截图确认，开始上传，blob size:', blob.size)
    showToast('截图上传中...')

    const result = await uploadFile(blob, 'screenshot')
    console.log('[InputBar] 上传成功，result:', result)

    // 以图片消息类型发送截图（携带 media_url，MessageBubble 会渲染缩略图）
    console.log('[InputBar] 开始调用 store.sendNewMessage，media_url:', result.url)
    await store.sendNewMessage('[截图]', {
      msg_type: 'image',
      media_url: result.url,
      file_name: result.filename,
      file_size: result.file_size,
    })
    console.log('[InputBar] store.sendNewMessage 完成，当前消息数:', store.messages.length)

    showToast('截图发送成功')
    console.log('[InputBar] 截图发送成功 toast 已显示')
  } catch (error: any) {
    console.error('[InputBar] 截图发送失败:', error)
    showToast(
      `截图发送失败：${
        formatErrorDetail(error?.response?.data?.detail) ||
        error?.message ||
        '未知错误'
      }`
    )
  } finally {
    showScreenshotEditor.value = false
    screenshotCanvas = null
    console.log('[InputBar] 截图流程 finally 块执行完成')
  }
}

/**
 * 截图编辑器取消回调
 */
function onScreenshotCancel(): void {
  showScreenshotEditor.value = false
  screenshotCanvas = null
}

// ============================================================================
// 拖拽调节输入栏高度
// ============================================================================

/**
 * 拖拽开始：记录初始 Y 坐标
 * 向上拖拽增大输入栏高度，向下拖拽减小
 */
function handleInputResizeStart(event: MouseEvent): void {
  isInputResizing.value = true

  const startY = event.clientY
  const inputBar = (event.target as HTMLElement).closest('.input-bar') as HTMLElement
  const startHeight = inputBar ? inputBar.offsetHeight : 100

  /**
   * 拖拽中：根据鼠标移动距离更新输入栏高度
   */
  function handleMouseMove(e: MouseEvent): void {
    if (!isInputResizing.value) return

    const deltaY = startY - e.clientY  // 向上拖拽正值，向下负值
    let newHeight = startHeight + deltaY

    // 限制最小/最大高度：100px ~ 400px
    newHeight = Math.max(100, Math.min(400, newHeight))

    if (inputBar) {
      inputBar.style.height = `${newHeight}px`
      inputBar.style.flexShrink = '0'
    }
  }

  /**
   * 拖拽结束：移除事件监听
   */
  function handleMouseUp(): void {
    isInputResizing.value = false
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
    document.body.style.cursor = ''
    document.body.style.userSelect = ''
  }

  document.body.style.cursor = 'row-resize'
  document.body.style.userSelect = 'none'
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}
</script>

<style scoped>
/* ==========================================================================
   输入栏容器 — 固定在消息列表底部
   ========================================================================== */
.input-bar {
  background-color: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  padding: 0 12px 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  flex-shrink: 0;
  position: relative;
}

/* ── 拖拽手柄：顶部横条，可拖拽调节输入栏高度 ── */
.input-bar__resize-handle {
  height: 8px;
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -12px;
  padding: 2px 0;
}

.input-bar__resize-track {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--border-color);
  transition: background-color 0.2s, width 0.2s;
}

.input-bar__resize-handle:hover .input-bar__resize-track {
  background-color: var(--accent);
  width: 60px;
}

/* 输入行：工具栏 + 输入框 + 发送按钮 */
.input-bar__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 工具栏：表情/图片/文件/截图 */
.input-bar__toolbar {
  display: flex;
  gap: 4px;
  padding: 0 0 4px 0;
}

/* ── 表情选择面板 ── */
.emoji-panel {
  position: relative;
  z-index: 200;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.emoji-panel__grid {
  display: grid;
  grid-template-columns: repeat(8, 36px);
  gap: 2px;
  justify-content: center;
}

.emoji-panel__item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.emoji-panel__item:hover {
  background: var(--bg-tertiary);
}

.emoji-panel__item:active {
  background: var(--accent-soft, rgba(59,130,246,0.15));
  transform: scale(1.2);
}

/* 表情面板遮罩（点击关闭） */
.emoji-panel__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

.input-bar__tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.input-bar__tool-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
}

.input-bar__tool-btn:active {
  transform: scale(0.92);
}

/* 输入行：输入框 + 发送按钮 */
.input-bar__input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* ==========================================================================
   文本输入框
   ========================================================================== */
.input-bar__field {
  flex: 1;
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  transition: border-color 0.2s;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
}

.input-bar__field:focus-within {
  border-color: var(--accent);
}

/* 覆盖 Vant Field 默认样式 */
.input-bar__field :deep(.van-field__control) {
  font-size: 14px;
  line-height: 1.5;
}

.input-bar__field :deep(.van-field__body) {
  padding: 0;
}

/* ==========================================================================
   发送按钮
   ========================================================================== */
.input-bar__send-btn {
  flex-shrink: 0;
  height: 36px;
  border-radius: 8px;
  min-width: 56px;
}

/* ==========================================================================
   底部引导条
   ========================================================================== */
.input-bar__guide {
  text-align: center;
  font-size: 11px;
  color: var(--text-placeholder);
  margin-top: 6px;
  padding-top: 2px;
}

/* 呼叫坐席通道已开启（更醒目） */
.input-bar__guide--active {
  color: var(--color-warning);
  font-weight: 500;
  animation: guide-pulse 1.5s ease-in-out infinite;
}

@keyframes guide-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

</style>
