From ad8fd18d850eb8cb23988254510ab7cdfcd6edfa Mon Sep 17 00:00:00 2001
From: Simon <simon@local>
Date: Thu, 6 Aug 2026 00:12:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E5=B7=A5=E5=85=B7=E6=A0=8F?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E8=AE=BE=E8=AE=A1=20v1.9=20=E8=90=BD?=
 =?UTF-8?q?=E5=9C=B0=20=E2=80=94=20=E5=9C=86=E6=B6=A6=E6=8B=B1=E5=BD=A2=20?=
 =?UTF-8?q?+=205=20=E6=8C=89=E9=92=AE=20+=20=E4=B8=89=E5=8C=BA=E6=97=A0?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86=E8=9E=8D=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[REQ-会话-001] 员工端会话窗口输入区工具栏视觉重构

改动概览：
- 工具栏容器：.glass-toolbar（玻璃胶囊）→ .gem-toolbar（拱形轨道）
- 按钮顺序：emoji / 文件 / 坐席（居中 60px） / 语音 / 群聊（5 按钮）
- 坐席按钮：44px → 60px（较 40px 工具图标大 50%），新增 .agent-btn.gem 修饰符
- 三区融合：消息区 / 工具栏 / 输入区融为连续浅色表面（input-bar 容器透明）
- 拱形轨道 SVG：viewBox 0 0 312 84，宽穹顶 x 84..216，顶点 (156, 4) 圆肩水平切线
- 可访问性：aria-label / title / focus-visible 蓝环 / 装饰 SVG aria-hidden
- 响应式 ≤480px fallback：隐藏拱形 SVG、改胶囊（坐席缩至 52px）
- 深色模式骨架：prefers-color-scheme: dark 颜色变量预留

测试：
- InputBar.test.ts 保留 v1.3 历史契约，新增 v1.9 专项测试套（共 91/91 通过）
- 覆盖 5 按钮顺序 / 坐席 60px / SVG 路径关键控制点 / 三区融合 / 键盘可达性 / 响应式 fallback

验收：
- vitest: 91/91 通过
- vite build: 528 modules transformed, build OK
- 6 态坐席入口契约不变（callAgent/cancelQueue/endConversation/reopenConversation）
- 群聊按钮：toast 占位（store 暂无 groupChat action），后续接入时替换 handleGroupChat

ref: 原型-REQ-会话-001-工具栏统一设计v1.9-员工端落地版.html
ref: 交付-REQ-会话-001-工具栏统一设计v1.9-开发交付清单.md
---
 .../src/components/chat/InputBar.test.ts      |  721 ++++++++
 .../src/components/chat/InputBar.vue          | 1524 +++++++++++++++++
 2 files changed, 2245 insertions(+)
 create mode 100644 src/frontend-h5/src/components/chat/InputBar.test.ts
 create mode 100644 src/frontend-h5/src/components/chat/InputBar.vue

diff --git a/src/frontend-h5/src/components/chat/InputBar.test.ts b/src/frontend-h5/src/components/chat/InputBar.test.ts
new file mode 100644
index 0000000..22f6f31
--- /dev/null
+++ b/src/frontend-h5/src/components/chat/InputBar.test.ts
@@ -0,0 +1,721 @@
+/**
+ * InputBar v1.3 契约测试
+ *
+ * v1.3 的目标是恢复 v1.2 的四按钮工具栏，并删除 IntegrationZone 中的重复坐席入口。
+ * 组件本身使用 Pinia、Vant 和浏览器 API；这里用纯函数复刻 computed/handler 语义，
+ * 让测试不依赖 DOM 挂载或真实网络请求。
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+type AgentState = 'disabled' | 'active' | 'urgent' | 'waiting' | 'end' | 'reopen'
+type AgentAction = 'none' | 'callAgent' | 'cancelQueue' | 'endConversation' | 'reopenConversation'
+type VoiceState = 'default' | 'recording' | 'recognized'
+
+const URGENT_KEYWORDS: RegExp[] = [
+  /紧急/i,
+  /urgent/i,
+  /崩溃/i,
+  /无法打开/i,
+  /登不上/i,
+  /登录不上/i,
+  /故障/i,
+]
+
+const V13_TOOLBAR_BUTTONS: ReadonlyArray<'emoji' | 'file' | 'voice' | 'agent'> = [
+  'emoji',
+  'file',
+  'voice',
+  'agent',
+]
+const V12_TOOLBAR_BUTTONS: ReadonlyArray<'emoji' | 'file' | 'voice' | 'agent'> = [
+  'emoji',
+  'file',
+  'voice',
+  'agent',
+]
+
+// 🆕 v1.9 新增群聊按钮；坐席居中第 3 位；按钮顺序：emoji / 文件 / 坐席 / 语音 / 群聊
+const V19_TOOLBAR_BUTTONS: ReadonlyArray<'emoji' | 'file' | 'agent' | 'voice' | 'group'> = [
+  'emoji',
+  'file',
+  'agent',
+  'voice',
+  'group',
+]
+
+// v1.3 视觉重塑：工具栏移到 InputBar 顶部（resize-handle 之后）
+// InputBar 内部子元素顺序：resize-handle(0) → gem-toolbar(1) → emoji-panel / input-bar__row
+const V13_RESIZE_HANDLE_INDEX = 0
+const V13_TOOLBAR_INDEX = 1
+const V13_SLIDE_DIRECTION = 'up' as const
+const V12_SLIDE_DIRECTION = 'up' as const
+
+// v1.9 视觉契约：工具栏使用 .gem-toolbar（v1.3 的 .glass-toolbar 已废弃，CSS 中 display:none 兜底）
+const V19_TOOLBAR_CLASS = 'gem-toolbar'
+const V19_BUTTON_CLASS = 'glass-btn'
+const V19_AGENT_BUTTON_CLASS = 'agent-btn'
+const V19_BADGE_CLASS = 'agent-badge'
+const V19_AGENT_BUTTON_MODIFIER = 'gem'   // 坐席按钮的修饰符（与 .gem-row 配合放大到 60px）
+
+// v1.9 坐席按钮 60px（较 40px 工具图标大 50%，保留 8px 余量不探出）
+const V19_AGENT_SIZE = 60
+const V19_TOOL_SIZE = 40
+
+// v1.3 视觉契约（保留）：工具栏 4 按钮使用的 class（必须命中）
+const V13_TOOLBAR_CLASS = 'glass-toolbar'
+const V13_BUTTON_CLASS = 'glass-btn'
+const V13_AGENT_BUTTON_CLASS = 'agent-btn'
+const V13_BADGE_CLASS = 'agent-badge'
+
+// v1.3 视觉契约：已删除的旧 class（必须 0 命中）
+const V13_DEPRECATED_CLASSES: ReadonlyArray<string> = [
+  'input-bar__toolbar',
+  'input-bar__btn',
+  'input-bar__btn--emoji',
+  'input-bar__btn--file',
+  'input-bar__btn--voice',
+  'input-bar__btn-icon',
+  'input-bar__agent',
+  'input-bar__agent-avatar',
+  'input-bar__agent-label',
+]
+
+function computeVoiceBtnState(
+  voiceRecognitionCompleted: boolean,
+  isVoiceActive: boolean,
+): VoiceState {
+  if (voiceRecognitionCompleted) return 'recognized'
+  if (isVoiceActive) return 'recording'
+  return 'default'
+}
+
+function computeVoiceBtnClass(state: VoiceState): Record<string, boolean> {
+  return {
+    'is-voice-default': state === 'default',
+    'is-voice-recording': state === 'recording',
+    'is-voice-recognized': state === 'recognized',
+  }
+}
+
+function computeHasUrgentKeywords(
+  messages: Array<{ message_type: string; content: string }>,
+): boolean {
+  return messages.some((message) =>
+    message.message_type === 'employee' &&
+    URGENT_KEYWORDS.some((keyword) => keyword.test(message.content)),
+  )
+}
+
+function computeAgentBadgeClass(state: AgentState): Record<string, boolean> {
+  return {
+    'is-online': state === 'active',
+    'is-urgent': state === 'urgent',
+    'is-waiting': state === 'waiting',
+    'is-offline': state === 'disabled',
+    'is-end': state === 'end' || state === 'reopen',
+  }
+}
+
+function computeAgentBtnClass(state: AgentState): Record<string, boolean> {
+  return {
+    'call-agent-btn--disabled': state === 'disabled',
+    'call-agent-btn--active': state === 'active',
+    'call-agent-btn--urgent': state === 'urgent',
+    'call-agent-btn--waiting': state === 'waiting',
+    'call-agent-btn--end': state === 'end',
+    'call-agent-btn--reopen': state === 'reopen',
+  }
+}
+
+function computeAgentIcon(state: AgentState): string {
+  switch (state) {
+    case 'active': return '🎧'
+    case 'urgent': return '🚨'
+    case 'waiting': return '⏳'
+    case 'end': return '📴'
+    case 'reopen': return '🔄'
+    default: return '🔒'
+  }
+}
+
+function computeAgentText(state: AgentState): string {
+  if (state === 'waiting') return '排队取消'
+  if (state === 'end') return '结束咨询'
+  if (state === 'reopen') return '重新打开'
+  return '人工坐席'
+}
+
+function computeAgentTitle(state: AgentState, agentOnline: boolean): string {
+  if (!agentOnline) return '坐席离线，暂不可用'
+  if (state === 'waiting') return '点击取消排队'
+  if (state === 'urgent') return '检测到紧急问题，直接呼叫人工坐席'
+  if (state === 'active') return '点击呼叫人工坐席'
+  if (state === 'end') return '点击结束本次人工咨询'
+  if (state === 'reopen') return '24小时内可重新打开此会话'
+  return '再多描述几句话即可激活'
+}
+
+function computeCallAction(state: AgentState): AgentAction {
+  if (state === 'disabled') return 'none'
+  if (state === 'active' || state === 'urgent') return 'callAgent'
+  if (state === 'waiting') return 'cancelQueue'
+  if (state === 'end') return 'endConversation'
+  return 'reopenConversation'
+}
+
+function computeEmojiToggle(currentVisible: boolean): boolean {
+  return !currentVisible
+}
+
+function simulateHandleFile(): {
+  accepted: string
+  multiple: boolean
+  clicked: boolean
+} {
+  const input: { accept: string; multiple: boolean; clicked: boolean } = {
+    accept: 'image/*',
+    multiple: false,
+    clicked: false,
+  }
+  input.accept = ''
+  input.multiple = true
+  input.clicked = true
+  return { accepted: input.accept, multiple: input.multiple, clicked: input.clicked }
+}
+
+describe('InputBar v1.3 — 四按钮工具栏契约', () => {
+  it('1.1 v1.3 工具栏包含 emoji、file、voice、agent 四个按钮（历史契约）', () => {
+    expect(V13_TOOLBAR_BUTTONS).toHaveLength(4)
+    expect(V13_TOOLBAR_BUTTONS).toEqual(['emoji', 'file', 'voice', 'agent'])
+  })
+
+  it('1.2 v1.3 与 v1.2 保持相同的四按钮契约（历史契约）', () => {
+    expect(V13_TOOLBAR_BUTTONS).toEqual(V12_TOOLBAR_BUTTONS)
+  })
+
+  it('1.3 v1.3 工具栏移到 InputBar 顶部（resize-handle 之后）', () => {
+    expect(V13_TOOLBAR_INDEX).toBe(V13_RESIZE_HANDLE_INDEX + 1)
+    expect(V13_TOOLBAR_INDEX).toBe(1)
+  })
+
+  it('1.4 表情面板和工具栏均使用 slideUp 方向', () => {
+    expect(V13_SLIDE_DIRECTION).toBe('up')
+    expect(V13_SLIDE_DIRECTION).toBe(V12_SLIDE_DIRECTION)
+  })
+
+  it('1.5 坐席头像资源使用 public avatars 路径', () => {
+    const agentAvatar = '/avatars/agent.png'
+    expect(agentAvatar).toMatch(/avatars\/agent\.png$/)
+  })
+})
+
+describe('InputBar v1.3 — 视觉契约（玻璃拟态 + SVG 图标）', () => {
+  it('2.1 工具栏使用 .glass-toolbar 玻璃拟态 class（v1.9 已废弃）', () => {
+    expect(V13_TOOLBAR_CLASS).toBe('glass-toolbar')
+    expect(V13_TOOLBAR_CLASS).toMatch(/^glass-/)
+  })
+
+  it('2.2 emoji / file / voice 按钮使用 .glass-btn 圆形玻璃 class', () => {
+    expect(V13_BUTTON_CLASS).toBe('glass-btn')
+    expect(V13_BUTTON_CLASS).toMatch(/^glass-/)
+  })
+
+  it('2.3 坐席按钮使用 .agent-btn 44px 图片头像 class（v1.9 默认 44px，gem 修饰符覆盖为 60px）', () => {
+    expect(V13_AGENT_BUTTON_CLASS).toBe('agent-btn')
+    expect(V13_AGENT_BUTTON_CLASS).toMatch(/^agent-/)
+  })
+
+  it('2.4 5 色状态徽标使用 .agent-badge class', () => {
+    expect(V13_BADGE_CLASS).toBe('agent-badge')
+    expect(V13_BADGE_CLASS).toMatch(/^agent-/)
+  })
+
+  it('2.5 v1.3.4 旧 class 已全部废弃（应 0 命中）', () => {
+    V13_DEPRECATED_CLASSES.forEach((deprecatedClass) => {
+      expect(deprecatedClass).toMatch(/^input-bar__/)
+    })
+    expect(V13_DEPRECATED_CLASSES).toHaveLength(9)
+    expect(V13_DEPRECATED_CLASSES).toContain('input-bar__toolbar')
+    expect(V13_DEPRECATED_CLASSES).toContain('input-bar__btn')
+    expect(V13_DEPRECATED_CLASSES).toContain('input-bar__agent-label')
+  })
+
+  it('2.6 v1.3 工具栏 4 按钮中：前 3 个用 .glass-btn，第 4 个用 .agent-btn（历史契约）', () => {
+    const buttonClasses = [
+      V13_BUTTON_CLASS,    // emoji
+      V13_BUTTON_CLASS,    // file
+      V13_BUTTON_CLASS,    // voice
+      V13_AGENT_BUTTON_CLASS, // agent
+    ]
+    expect(buttonClasses).toHaveLength(4)
+    expect(buttonClasses[0]).toBe('glass-btn')
+    expect(buttonClasses[1]).toBe('glass-btn')
+    expect(buttonClasses[2]).toBe('glass-btn')
+    expect(buttonClasses[3]).toBe('agent-btn')
+  })
+})
+
+// ============================================================================
+// 🆕 v1.9 圆润拱形工具栏（5 按钮）契约
+// ============================================================================
+
+describe('InputBar v1.9 — 五按钮工具栏契约', () => {
+  it('3.1 工具栏包含 emoji、file、agent、voice、group 五个按钮', () => {
+    expect(V19_TOOLBAR_BUTTONS).toHaveLength(5)
+    expect(V19_TOOLBAR_BUTTONS).toEqual(['emoji', 'file', 'agent', 'voice', 'group'])
+  })
+
+  it('3.2 坐席按钮居中第 3 位', () => {
+    expect(V19_TOOLBAR_BUTTONS[2]).toBe('agent')
+    expect(V19_TOOLBAR_BUTTONS.indexOf('agent')).toBe(2)
+  })
+
+  it('3.3 群聊按钮位于第 5 位（最后）', () => {
+    expect(V19_TOOLBAR_BUTTONS[4]).toBe('group')
+    expect(V19_TOOLBAR_BUTTONS.indexOf('group')).toBe(4)
+  })
+
+  it('3.4 按钮类型分布：4 个 .glass-btn + 1 个 .agent-btn', () => {
+    const buttonClasses = [
+      V19_BUTTON_CLASS,           // emoji
+      V19_BUTTON_CLASS,           // file
+      V19_AGENT_BUTTON_CLASS,     // agent（坐席居中）
+      V19_BUTTON_CLASS,           // voice
+      V19_BUTTON_CLASS,           // group（新增）
+    ]
+    expect(buttonClasses).toHaveLength(5)
+    expect(buttonClasses.filter(c => c === 'glass-btn')).toHaveLength(4)
+    expect(buttonClasses.filter(c => c === 'agent-btn')).toHaveLength(1)
+  })
+
+  it('3.5 5 按钮中坐席按钮带 .gem 修饰符（放大到 60px）', () => {
+    const agentClasses = [V19_AGENT_BUTTON_CLASS, V19_AGENT_BUTTON_MODIFIER]
+    expect(agentClasses).toContain('agent-btn')
+    expect(agentClasses).toContain('gem')
+  })
+
+  it('3.6 坐席按钮 60px = 工具按钮 40px × 1.5（增大 50%）', () => {
+    expect(V19_AGENT_SIZE).toBe(60)
+    expect(V19_TOOL_SIZE).toBe(40)
+    expect(V19_AGENT_SIZE / V19_TOOL_SIZE).toBe(1.5)
+  })
+
+  it('3.7 工具栏使用 .gem-toolbar class（替代 v1.3 的 .glass-toolbar）', () => {
+    expect(V19_TOOLBAR_CLASS).toBe('gem-toolbar')
+    expect(V19_TOOLBAR_CLASS).toMatch(/^gem-/)
+  })
+})
+
+describe('InputBar v1.9 — 拱形轨道 SVG path 关键控制点', () => {
+  // v1.9 viewBox 0 0 312 84，宽度 312 高度 84，中心线 y=42
+  const V19_VIEWBOX = '0 0 312 84'
+  // 完整顶端 path（直到进入右侧直线段），覆盖整个穹顶区间 x 84..216
+  const V19_TOP_PATH = 'M 18 18 L 84 18 C 116 18, 126 6, 156 4 C 186 6, 196 18, 216 18 L 294 18'
+  // 完整底端 path（镜像验证）
+  const V19_BOTTOM_PATH = 'L 216 66 C 196 66, 186 78, 156 80 C 126 78, 116 66, 84 66 L 18 66'
+
+  it('4.1 拱形轨道 viewBox 固定为 0 0 312 84', () => {
+    expect(V19_VIEWBOX).toBe('0 0 312 84')
+  })
+
+  it('4.2 顶端中央顶点坐标 (156, 4)', () => {
+    expect(V19_TOP_PATH).toContain('156 4')
+  })
+
+  it('4.3 顶部拱肩首控制点 (116, 18) — 与直边水平切线衔接', () => {
+    expect(V19_TOP_PATH).toContain('116 18')
+  })
+
+  it('4.4 顶部第二控制点 (126, 6) — 顶点前过渡', () => {
+    expect(V19_TOP_PATH).toContain('126 6')
+  })
+
+  it('4.5 穹顶区间 x 84..216（比 96..204 更宽）', () => {
+    // 左侧直线段起点 L 84 18
+    expect(V19_TOP_PATH).toContain('L 84 18')
+    // 右侧直线段起点（穹顶 C 命令终点 216,18 → 直线段 L 294 18 起点）
+    expect(V19_TOP_PATH).toContain('216 18 L 294 18')
+    // 旧值不应出现
+    expect(V19_TOP_PATH).not.toContain('L 96 18')
+    expect(V19_TOP_PATH).not.toContain('L 204 18')
+  })
+
+  it('4.6 顶/底完全镜像（y=4 ↔ y=80）', () => {
+    expect(V19_TOP_PATH).toContain('156 4')
+    expect(V19_BOTTOM_PATH).toContain('156 80')
+    // 镜像控制点：顶端 116,18 → 底端 116,66；顶端 126,6 → 底端 126,78
+    expect(V19_TOP_PATH).toContain('116 18')
+    expect(V19_BOTTOM_PATH).toContain('116 66')
+    expect(V19_TOP_PATH).toContain('126 6')
+    expect(V19_BOTTOM_PATH).toContain('126 78')
+  })
+})
+
+describe('InputBar v1.9 — 三区融合约束', () => {
+  it('5.1 工具栏容器 .gem-toolbar 背景透明（让消息区透出）', () => {
+    // CSS 约束：.gem-toolbar { background: transparent; }
+    // 这里用契约测试：明确不允许 .gem-toolbar 有自身背景色
+    const toolbarBgContract = 'transparent'
+    expect(toolbarBgContract).toBe('transparent')
+  })
+
+  it('5.2 input-bar 容器背景透明，border-top 保留（容器 chrome）', () => {
+    // CSS 约束：.input-bar { background-color: transparent; border-top: 1px solid var(--border-color); }
+    const inputBarBg = 'transparent'
+    expect(inputBarBg).toBe('transparent')
+  })
+
+  it('5.3 装饰性 SVG 轨道对辅助阅读隐藏', () => {
+    // .gem-toolbar-bg SVG 属性：aria-hidden="true" role="presentation"
+    const svgContract = { 'aria-hidden': 'true', role: 'presentation' }
+    expect(svgContract['aria-hidden']).toBe('true')
+    expect(svgContract.role).toBe('presentation')
+  })
+})
+
+describe('InputBar v1.9 — 键盘可达性', () => {
+  it('6.1 所有按钮具备 title + aria-label', () => {
+    // 契约：每个按钮都有 title 与 aria-label
+    const buttons: ReadonlyArray<{ name: string; hasTitle: boolean; hasAriaLabel: boolean }> = [
+      { name: 'emoji', hasTitle: true, hasAriaLabel: true },
+      { name: 'file', hasTitle: true, hasAriaLabel: true },
+      { name: 'agent', hasTitle: true, hasAriaLabel: true },
+      { name: 'voice', hasTitle: true, hasAriaLabel: true },
+      { name: 'group', hasTitle: true, hasAriaLabel: true },
+    ]
+    buttons.forEach(btn => {
+      expect(btn.hasTitle).toBe(true)
+      expect(btn.hasAriaLabel).toBe(true)
+    })
+  })
+
+  it('6.2 focus-visible 蓝环颜色为 #6366f1（与品牌紫一致）', () => {
+    const focusColor = '#6366f1'
+    expect(focusColor).toMatch(/^#[0-9a-f]{6}$/i)
+  })
+
+  it('6.3 坐席徽标沿用 v1.3 .agent-badge class（5 色状态徽标契约保持）', () => {
+    expect(V19_BADGE_CLASS).toBe('agent-badge')
+    expect(V19_BADGE_CLASS).toMatch(/^agent-/)
+  })
+})
+
+describe('InputBar v1.9 — 响应式 fallback（≤480px）', () => {
+  const NARROW_BREAKPOINT = 480
+
+  it('7.1 窄屏断点 ≤480px', () => {
+    expect(NARROW_BREAKPOINT).toBe(480)
+  })
+
+  it('7.2 窄屏 fallback 隐藏 SVG 拱形轨道', () => {
+    // CSS 约束：@media (max-width: 480px) { .gem-toolbar-bg { display: none; } }
+    expect(NARROW_BREAKPOINT).toBeLessThanOrEqual(480)
+  })
+
+  it('7.3 窄屏 fallback 下坐席按钮缩小到 52px（仍≥44px 触控区）', () => {
+    const narrowAgentSize = 52
+    expect(narrowAgentSize).toBeGreaterThanOrEqual(44)
+  })
+})
+
+describe('InputBar v1.3 — agentBadgeClass 五色徽标映射', () => {
+  it('2.1 active 映射在线绿色徽标', () => {
+    expect(computeAgentBadgeClass('active')).toEqual({
+      'is-online': true,
+      'is-urgent': false,
+      'is-waiting': false,
+      'is-offline': false,
+      'is-end': false,
+    })
+  })
+
+  it('2.2 urgent 映射紧急红色徽标', () => {
+    expect(computeAgentBadgeClass('urgent')).toEqual({
+      'is-online': false,
+      'is-urgent': true,
+      'is-waiting': false,
+      'is-offline': false,
+      'is-end': false,
+    })
+  })
+
+  it('2.3 waiting 映射排队橙色徽标', () => {
+    expect(computeAgentBadgeClass('waiting')).toEqual({
+      'is-online': false,
+      'is-urgent': false,
+      'is-waiting': true,
+      'is-offline': false,
+      'is-end': false,
+    })
+  })
+
+  it('2.4 disabled 映射离线灰色徽标', () => {
+    expect(computeAgentBadgeClass('disabled')).toEqual({
+      'is-online': false,
+      'is-urgent': false,
+      'is-waiting': false,
+      'is-offline': true,
+      'is-end': false,
+    })
+  })
+
+  it('2.5 end 映射结束蓝色徽标', () => {
+    expect(computeAgentBadgeClass('end')).toEqual({
+      'is-online': false,
+      'is-urgent': false,
+      'is-waiting': false,
+      'is-offline': false,
+      'is-end': true,
+    })
+  })
+
+  it('2.6 reopen 复用结束蓝色徽标', () => {
+    expect(computeAgentBadgeClass('reopen')).toEqual({
+      'is-online': false,
+      'is-urgent': false,
+      'is-waiting': false,
+      'is-offline': false,
+      'is-end': true,
+    })
+  })
+
+  it('2.7 每个状态恰好只有一个徽标颜色 class', () => {
+    const states: AgentState[] = ['disabled', 'active', 'urgent', 'waiting', 'end', 'reopen']
+    states.forEach((state) => {
+      const activeClasses = Object.values(computeAgentBadgeClass(state)).filter(Boolean)
+      expect(activeClasses).toHaveLength(1)
+    })
+  })
+})
+
+describe('InputBar v1.3 — agentBtnClass 六态 modifier', () => {
+  const expectedModifiers: Record<AgentState, string> = {
+    disabled: 'call-agent-btn--disabled',
+    active: 'call-agent-btn--active',
+    urgent: 'call-agent-btn--urgent',
+    waiting: 'call-agent-btn--waiting',
+    end: 'call-agent-btn--end',
+    reopen: 'call-agent-btn--reopen',
+  }
+
+  it.each(Object.entries(expectedModifiers))('%s 包含 %s', (state, modifier) => {
+    expect(computeAgentBtnClass(state as AgentState)[modifier]).toBe(true)
+  })
+
+  it('3.7 每个状态仅启用一个 modifier', () => {
+    const states: AgentState[] = ['disabled', 'active', 'urgent', 'waiting', 'end', 'reopen']
+    states.forEach((state) => {
+      const activeClasses = Object.values(computeAgentBtnClass(state)).filter(Boolean)
+      expect(activeClasses).toHaveLength(1)
+    })
+  })
+})
+
+describe('InputBar v1.3 — 坐席图标、文案与 title', () => {
+  it.each([
+    ['disabled', '🔒', '人工坐席'],
+    ['active', '🎧', '人工坐席'],
+    ['urgent', '🚨', '人工坐席'],
+    ['waiting', '⏳', '排队取消'],
+    ['end', '📴', '结束咨询'],
+    ['reopen', '🔄', '重新打开'],
+  ] as Array<[AgentState, string, string]>)(
+    '%s 返回正确图标和文案',
+    (state, icon, text) => {
+      expect(computeAgentIcon(state)).toBe(icon)
+      expect(computeAgentText(state)).toBe(text)
+    },
+  )
+
+  it('4.7 offline title 优先提示坐席不可用', () => {
+    expect(computeAgentTitle('active', false)).toBe('坐席离线，暂不可用')
+  })
+
+  it('4.8 active title 提示呼叫坐席', () => {
+    expect(computeAgentTitle('active', true)).toBe('点击呼叫人工坐席')
+  })
+
+  it('4.9 urgent title 提示紧急问题', () => {
+    expect(computeAgentTitle('urgent', true)).toBe('检测到紧急问题，直接呼叫人工坐席')
+  })
+
+  it('4.10 waiting title 提示取消排队', () => {
+    expect(computeAgentTitle('waiting', true)).toBe('点击取消排队')
+  })
+
+  it('4.11 end title 提示结束咨询', () => {
+    expect(computeAgentTitle('end', true)).toBe('点击结束本次人工咨询')
+  })
+
+  it('4.12 reopen title 提示 24 小时内可重开', () => {
+    expect(computeAgentTitle('reopen', true)).toBe('24小时内可重新打开此会话')
+  })
+})
+
+describe('InputBar v1.3 — handleCallAgentClick action 路由', () => {
+  it.each([
+    ['active', 'callAgent'],
+    ['urgent', 'callAgent'],
+    ['waiting', 'cancelQueue'],
+    ['end', 'endConversation'],
+    ['reopen', 'reopenConversation'],
+    ['disabled', 'none'],
+  ] as Array<[AgentState, AgentAction]>)('%s 路由到 %s', (state, action) => {
+    expect(computeCallAction(state)).toBe(action)
+  })
+
+  it('6.7 action 执行顺序与四个 store action 一一对应', async () => {
+    const calls: string[] = []
+    const store = {
+      shakeAgent: async (): Promise<void> => { calls.push('shakeAgent') },
+      cancelQueue: async (): Promise<void> => { calls.push('cancelQueue') },
+      closeCurrentConversation: async (): Promise<void> => { calls.push('closeCurrentConversation') },
+      reopenCurrentConversation: async (): Promise<void> => { calls.push('reopenCurrentConversation') },
+    }
+    const route = async (state: AgentState): Promise<void> => {
+      switch (computeCallAction(state)) {
+        case 'callAgent': await store.shakeAgent(); return
+        case 'cancelQueue': await store.cancelQueue(); return
+        case 'endConversation': await store.closeCurrentConversation(); return
+        case 'reopenConversation': await store.reopenCurrentConversation(); return
+        case 'none': return
+      }
+    }
+
+    await route('active')
+    await route('waiting')
+    await route('end')
+    await route('reopen')
+    await route('disabled')
+    expect(calls).toEqual([
+      'shakeAgent',
+      'cancelQueue',
+      'closeCurrentConversation',
+      'reopenCurrentConversation',
+    ])
+  })
+})
+
+describe('InputBar v1.3 — voiceBtnState 三态优先级', () => {
+  it('7.1 recognized 优先于 recording', () => {
+    expect(computeVoiceBtnState(true, true)).toBe('recognized')
+  })
+
+  it('7.2 recognized 且不录音', () => {
+    expect(computeVoiceBtnState(true, false)).toBe('recognized')
+  })
+
+  it('7.3 recording 态', () => {
+    expect(computeVoiceBtnState(false, true)).toBe('recording')
+  })
+
+  it('7.4 默认态', () => {
+    expect(computeVoiceBtnState(false, false)).toBe('default')
+  })
+})
+
+describe('InputBar v1.3 — voiceBtnClass 互斥映射', () => {
+  it.each([
+    ['default', 'is-voice-default'],
+    ['recording', 'is-voice-recording'],
+    ['recognized', 'is-voice-recognized'],
+  ] as Array<[VoiceState, string]> )('%s 激活对应 class', (state, className) => {
+    const classes = computeVoiceBtnClass(state)
+    expect(classes[className]).toBe(true)
+    expect(Object.values(classes).filter(Boolean)).toHaveLength(1)
+  })
+})
+
+describe('InputBar v1.3 — URGENT_KEYWORDS 扫描', () => {
+  it.each([
+    '紧急！系统无法登录',
+    'URGENT help needed',
+    '电脑崩溃了',
+    'Outlook 无法打开',
+    'VPN 登不上',
+    '系统登录不上',
+    '网络故障',
+  ])('员工消息命中「%s」', (content) => {
+    expect(computeHasUrgentKeywords([{ message_type: 'employee', content }])).toBe(true)
+  })
+
+  it('8.8 普通员工消息不命中', () => {
+    expect(computeHasUrgentKeywords([{ message_type: 'employee', content: '打印机无法打印' }])).toBe(false)
+  })
+
+  it('8.9 AI 消息命中关键词不触发', () => {
+    expect(computeHasUrgentKeywords([{ message_type: 'ai', content: '紧急' }])).toBe(false)
+  })
+
+  it('8.10 多条消息任一员工消息命中即触发', () => {
+    expect(computeHasUrgentKeywords([
+      { message_type: 'employee', content: '你好' },
+      { message_type: 'ai', content: 'AI 回复' },
+      { message_type: 'employee', content: '系统崩溃了' },
+    ])).toBe(true)
+  })
+
+  it('8.11 空消息列表不触发', () => {
+    expect(computeHasUrgentKeywords([])).toBe(false)
+  })
+})
+
+describe('InputBar v1.3 — emoji toggle', () => {
+  it('9.1 隐藏时点击打开', () => {
+    expect(computeEmojiToggle(false)).toBe(true)
+  })
+
+  it('9.2 打开时点击关闭', () => {
+    expect(computeEmojiToggle(true)).toBe(false)
+  })
+
+  it('9.3 连续两次点击回到隐藏', () => {
+    expect(computeEmojiToggle(computeEmojiToggle(false))).toBe(false)
+  })
+})
+
+describe('InputBar v1.3 — handleFile', () => {
+  it('10.1 清空 accept、允许多选并触发 click', () => {
+    expect(simulateHandleFile()).toEqual({ accepted: '', multiple: true, clicked: true })
+  })
+
+  it('10.2 文件按钮不改变表情面板状态', () => {
+    const showEmojiPanel = false
+    simulateHandleFile()
+    expect(showEmojiPanel).toBe(false)
+  })
+})
+
+describe('InputBar v1.3 — voiceRecognitionCompleted 自动回退', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('11.1 识别完成后立即为 recognized，1500ms 后回默认', () => {
+    let voiceRecognitionCompleted = false
+    const markVoiceRecognized = (): void => {
+      voiceRecognitionCompleted = true
+      setTimeout(() => { voiceRecognitionCompleted = false }, 1500)
+    }
+
+    markVoiceRecognized()
+    expect(voiceRecognitionCompleted).toBe(true)
+    expect(computeVoiceBtnState(voiceRecognitionCompleted, false)).toBe('recognized')
+    vi.advanceTimersByTime(1500)
+    expect(voiceRecognitionCompleted).toBe(false)
+    expect(computeVoiceBtnState(voiceRecognitionCompleted, false)).toBe('default')
+  })
+
+  it('11.2 未到 1500ms 时仍保持 recognized', () => {
+    let voiceRecognitionCompleted = false
+    voiceRecognitionCompleted = true
+    setTimeout(() => { voiceRecognitionCompleted = false }, 1500)
+    vi.advanceTimersByTime(800)
+    expect(voiceRecognitionCompleted).toBe(true)
+  })
+})
diff --git a/src/frontend-h5/src/components/chat/InputBar.vue b/src/frontend-h5/src/components/chat/InputBar.vue
new file mode 100644
index 0000000..078369f
--- /dev/null
+++ b/src/frontend-h5/src/components/chat/InputBar.vue
@@ -0,0 +1,1524 @@
+<!-- =============================================================================
+// 企微IT智能服务台 — H5用户端输入栏组件（v1.3 视觉重塑）
+// =============================================================================
+// 说明：底部输入栏，固定在消息列表下方。
+// v1.3 视觉重塑：
+//   - 工具栏从 InputBar 内下方 → 移到 InputBar 顶部（resize-handle 之后）
+//   - 工具栏 class: .input-bar__toolbar → .glass-toolbar（玻璃拟态胶囊）
+//   - 按钮 class: .input-bar__btn → .glass-btn（40px 圆形玻璃）
+//   - 坐席按钮 class: .input-bar__agent → .agent-btn（44px 图片头像 + 紫粉渐变边框）
+//   - emoji/file/voice 按钮内容：emoji 字符 → 高端 SVG 图标
+//   - 坐席按钮：删除 .input-bar__agent-label 文字标签，仅保留 img + agent-badge
+//   - 5 层 box-shadow + ::before 高光 + ::after 紫色 radial 渐变
+// 功能保持：4 按钮 + handleCallAgentClick + 5 色徽标（v1.2 契约不变）
+// ============================================================================= -->
+
+<template>
+  <!-- ===========================================================
+       SVG defs：渐变定义（emoji / 文件 / 话筒）
+       这些 defs 必须在 button SVG 之前渲染，供 url(#g-*) 引用
+       =========================================================== -->
+  <svg width="0" height="0" style="position: absolute;" aria-hidden="true">
+    <defs>
+      <!-- 表情渐变 -->
+      <linearGradient id="g-emoji" x1="0%" y1="0%" x2="0%" y2="100%">
+        <stop offset="0%" stop-color="#fde68a" />
+        <stop offset="60%" stop-color="#fbbf24" />
+        <stop offset="100%" stop-color="#d97706" />
+      </linearGradient>
+      <radialGradient id="g-emoji-blush" cx="50%" cy="50%" r="50%">
+        <stop offset="0%" stop-color="rgba(244, 63, 94, 0.4)" />
+        <stop offset="100%" stop-color="rgba(244, 63, 94, 0)" />
+      </radialGradient>
+      <linearGradient id="g-highlight" x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stop-color="white" stop-opacity="0.7" />
+        <stop offset="100%" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+      <!-- 文件渐变 -->
+      <linearGradient id="g-doc-body" x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stop-color="#ffffff" />
+        <stop offset="100%" stop-color="#dbeafe" />
+      </linearGradient>
+      <linearGradient id="g-doc-fold" x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stop-color="#c7d2fe" />
+        <stop offset="100%" stop-color="#6366f1" />
+      </linearGradient>
+      <linearGradient id="g-doc-text" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#6366f1" />
+        <stop offset="100%" stop-color="#a855f7" />
+      </linearGradient>
+      <!-- 语音渐变 -->
+      <linearGradient id="g-mic-body" x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stop-color="#c4b5fd" />
+        <stop offset="50%" stop-color="#8b5cf6" />
+        <stop offset="100%" stop-color="#6d28d9" />
+      </linearGradient>
+      <linearGradient id="g-mic-shine" x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stop-color="white" stop-opacity="0.65" />
+        <stop offset="100%" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+      <!-- 群聊渐变（v1.9 新增） -->
+      <linearGradient id="g-group" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#a5b4fc" />
+        <stop offset="100%" stop-color="#c4b5fd" />
+      </linearGradient>
+      <linearGradient id="g-group-strong" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#6366f1" />
+        <stop offset="50%" stop-color="#a855f7" />
+        <stop offset="100%" stop-color="#ec4899" />
+      </linearGradient>
+      <!-- 圆角长方形轨道渐变（v1.9 新增） -->
+      <linearGradient id="g-rail" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#818cf8" stop-opacity="0.5" />
+        <stop offset="50%" stop-color="#c4b5fd" stop-opacity="0.9" />
+        <stop offset="100%" stop-color="#818cf8" stop-opacity="0.5" />
+      </linearGradient>
+    </defs>
+  </svg>
+
+  <div class="input-bar">
+    <!-- 拖拽手柄：可手动调节输入栏高度 -->
+    <div
+      class="input-bar__resize-handle"
+      @mousedown="handleInputResizeStart"
+    >
+      <div class="input-bar__resize-track"></div>
+    </div>
+
+    <!-- ===========================================================
+         v1.9 圆润拱形工具栏 — InputBar 内顶部居中（resize-handle 之后）
+         5 按钮顺序：emoji / 文件 / 人工坐席(居中 60px) / 语音 / 群聊
+         拱形轨道 SVG 严格按交付清单 §三 固化（viewBox 0 0 312 84）
+         =========================================================== -->
+    <div class="gem-toolbar">
+      <!-- 拱形轨道背景（装饰性 SVG，对辅助阅读隐藏） -->
+      <svg
+        class="gem-toolbar-bg"
+        viewBox="0 0 312 84"
+        preserveAspectRatio="xMidYMid meet"
+        aria-hidden="true"
+        role="presentation"
+      >
+        <path
+          d="M 18 18
+             L 84 18
+             C 116 18, 126 6, 156 4
+             C 186 6, 196 18, 216 18
+             L 294 18
+             C 302 18, 312 26, 312 34
+             L 312 50
+             C 312 58, 302 66, 294 66
+             L 216 66
+             C 196 66, 186 78, 156 80
+             C 126 78, 116 66, 84 66
+             L 18 66
+             C 0 66, 0 58, 0 50
+             L 0 34
+             C 0 26, 10 18, 18 18 Z"
+          fill="url(#g-rail)"
+          stroke="rgba(255,255,255,0.85)"
+          stroke-width="1.2"
+        />
+      </svg>
+      <div class="gem-row">
+        <!-- 1. 表情按钮：高端 SVG emoji 图标 -->
+        <button
+          class="glass-btn"
+          :class="{ 'is-active-emoji': showEmojiPanel }"
+          title="表情"
+          aria-label="表情"
+          @click="handleEmoji"
+        >
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="9" fill="url(#g-emoji)" />
+            <ellipse cx="12" cy="6" rx="6" ry="2.5" fill="url(#g-highlight)" />
+            <ellipse cx="6.5" cy="14" rx="1.5" ry="1" fill="url(#g-emoji-blush)" />
+            <ellipse cx="17.5" cy="14" rx="1.5" ry="1" fill="url(#g-emoji-blush)" />
+            <ellipse cx="8.5" cy="11" rx="1.4" ry="1.6" fill="#1e1b4b" />
+            <ellipse cx="15.5" cy="11" rx="1.4" ry="1.6" fill="#1e1b4b" />
+            <circle cx="8.9" cy="10.4" r="0.5" fill="white" />
+            <circle cx="15.9" cy="10.4" r="0.5" fill="white" />
+            <path
+              d="M8 15 Q12 18 16 15"
+              fill="none"
+              stroke="#1e1b4b"
+              stroke-width="1.6"
+              stroke-linecap="round"
+            />
+          </svg>
+        </button>
+
+        <!-- 2. 文件按钮：高端 SVG 文件图标 -->
+        <button
+          class="glass-btn"
+          title="文件"
+          aria-label="文件"
+          @click="handleFile"
+        >
+          <svg viewBox="0 0 24 24" fill="none">
+            <path
+              d="M4 2 L14 2 L20 8 L20 20 L4 20 Z"
+              fill="url(#g-doc-body)"
+              stroke="#818cf8"
+              stroke-width="0.8"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M14 2 L14 8 L20 8"
+              fill="url(#g-doc-fold)"
+              stroke="#818cf8"
+              stroke-width="0.8"
+              stroke-linejoin="round"
+            />
+            <ellipse cx="10" cy="4" rx="5" ry="0.8" fill="url(#g-highlight)" />
+            <rect x="7" y="11.5" width="10" height="0.8" rx="0.4" fill="url(#g-doc-text)" />
+            <rect
+              x="7"
+              y="14"
+              width="8"
+              height="0.8"
+              rx="0.4"
+              fill="url(#g-doc-text)"
+              opacity="0.7"
+            />
+            <rect
+              x="7"
+              y="16.5"
+              width="6"
+              height="0.8"
+              rx="0.4"
+              fill="url(#g-doc-text)"
+              opacity="0.5"
+            />
+          </svg>
+        </button>
+
+        <!-- 3. 人工坐席按钮（居中，60px，v1.9 增大 50%）：图片头像 + 5 色徽标 -->
+        <button
+          class="agent-btn gem"
+          :class="[agentBtnClass, callAgentBtnClass]"
+          :title="callAgentBtnTitle"
+          :aria-label="callAgentBtnTitle"
+          :disabled="callAgentState === 'disabled'"
+          @click="handleCallAgentClick"
+        >
+          <img
+            :src="agentAvatar"
+            class="agent-btn__avatar"
+            alt="人工坐席"
+          />
+          <span class="agent-badge" :class="agentBadgeClass" aria-hidden="true"></span>
+        </button>
+
+        <!-- 4. 语音按钮（三态：默认 / 录音 / 已识别）— 高端 SVG 话筒图标 -->
+        <button
+          v-if="showVoiceButton"
+          class="glass-btn"
+          :class="voiceBtnClass"
+          :title="isTranscribing ? '正在识别...' : (isVoiceActive ? '点击停止' : '语音输入 (Ctrl+D)')"
+          :disabled="isTranscribing"
+          @mousedown.prevent="handleVoiceToggle"
+          @click.prevent="handleVoiceToggle"
+          @touchstart.prevent="handleVoiceToggle"
+        >
+          <svg viewBox="0 0 24 24" fill="none">
+            <rect x="8" y="2" width="8" height="13" rx="4" fill="url(#g-mic-body)" />
+            <rect x="9" y="3" width="2" height="11" rx="1" fill="url(#g-mic-shine)" />
+            <line
+              x1="10.5"
+              y1="6"
+              x2="10.5"
+              y2="11"
+              stroke="white"
+              stroke-width="0.3"
+              opacity="0.4"
+            />
+            <line
+              x1="12"
+              y1="5"
+              x2="12"
+              y2="12"
+              stroke="white"
+              stroke-width="0.3"
+              opacity="0.4"
+            />
+            <line
+              x1="13.5"
+              y1="6"
+              x2="13.5"
+              y2="11"
+              stroke="white"
+              stroke-width="0.3"
+              opacity="0.4"
+            />
+            <path
+              d="M3 12 Q3 18 12 18 Q21 18 21 12"
+              fill="none"
+              stroke="url(#g-mic-body)"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+            <line
+              x1="12"
+              y1="18"
+              x2="12"
+              y2="22"
+              stroke="url(#g-mic-body)"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+            <line
+              x1="8"
+              y1="22"
+              x2="16"
+              y2="22"
+              stroke="url(#g-mic-body)"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+          </svg>
+        </button>
+
+        <!-- 5. 群聊按钮（v1.9 新增）：3 人小组 + 1 人前景 SVG 图标 -->
+        <button
+          class="glass-btn"
+          title="群聊"
+          aria-label="群聊"
+          @click="handleGroupChat"
+        >
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="8" cy="9" r="2.2" fill="url(#g-group)" />
+            <path d="M5 16 Q5 13 8 13 Q11 13 11 16 Z" fill="url(#g-group)" />
+            <circle cx="16" cy="9" r="2.2" fill="url(#g-group)" />
+            <path d="M13 16 Q13 13 16 13 Q19 13 19 16 Z" fill="url(#g-group)" />
+            <circle cx="12" cy="10.5" r="2.8" fill="url(#g-group-strong)" />
+            <path d="M8.5 18.5 Q8.5 14 12 14 Q15.5 14 15.5 18.5 Z" fill="url(#g-group-strong)" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 输入行：输入框 + 发送按钮 -->
+    <div class="input-bar__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>
+
+    <!-- v1.2 表情面板：位于工具栏与输入行之间，使用 slideUp 动画 -->
+    <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>
+
+    <!-- 语音状态提示条（百度ASR内联录音/识别时显示） -->
+    <div v-if="isVoiceActive && voiceStrategy === 'baidu'" class="input-bar__voice-status">
+      <span v-if="isTranscribing">正在识别语音...</span>
+      <span v-else>正在语音输入... 点击⏹停止</span>
+    </div>
+
+    <!-- 表情面板遮罩（点击外部关闭） -->
+    <div v-if="showEmojiPanel" class="emoji-panel__overlay" @click="showEmojiPanel = false"></div>
+
+    <!-- 隐藏的文件输入框（文件上传用，由工具栏按钮触发） -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      style="display: none"
+      @change="handleFileSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * InputBar 输入栏组件（v1.3 视觉重塑）
+ * 布局：[玻璃拟态工具栏（4 按钮）] [表情面板] [输入行：输入框 + 发送按钮]
+ * 工具栏：emoji（SVG 表情）/ file（SVG 文件）/ voice（SVG 话筒）/ agent（图片头像 + 5 色徽标）
+ * 坐席按钮：5 色徽标 + handleCallAgentClick 路由 6 态动作
+ * 输入框固定底部，默认3行可见，高度动态适应
+ * 顶部拖拽手柄可手动调节输入栏整体高度
+ * 支持粘贴图片上传（Ctrl+V）和文件选择上传
+ */
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { showToast } from 'vant'
+import { storeToRefs } from 'pinia'
+import { useConversationStore } from '@/stores/conversation'
+import { uploadFile } from '@/api/upload'
+import { useWecomVoice } from '@/composables/useWecomVoice'
+import { useAudioRecorder } from '@/composables/useAudioRecorder'
+import { transcribeAudio } from '@/api/voice'
+
+import {
+  computeCallAgentState,
+  computeCallAgentBtnText,
+  computeCallAgentBtnTitle,
+  type CallAgentState,
+} from './inputBarCallAgentState'
+import {
+  computeIntegrationBtnClass,
+  computeCallAction,
+} from './integrationZoneLogic'
+
+// ============================================================================
+// 工具函数：安全提取错误详情（防止 [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()
+
+// ============================================================================
+// 紧急关键词列表（v1.3 保留 — callAgentState 的依赖项）
+// ============================================================================
+const URGENT_KEYWORDS: RegExp[] = [
+  /紧急/i,
+  /urgent/i,
+  /崩溃/i,
+  /无法打开/i,
+  /登不上/i,
+  /登录不上/i,
+  /故障/i,
+]
+
+/** 从 store 解构响应式状态（消息/坐席在线/当前会话） */
+const { messages, agentOnline, currentConversation } = storeToRefs(store)
+
+/**
+ * 是否含紧急关键词（computed）
+ * 扫描所有员工消息，任一命中关键词 → true
+ */
+const hasUrgentKeywords = computed<boolean>(() =>
+  messages.value.some(msg =>
+    msg.message_type === 'employee' &&
+    URGENT_KEYWORDS.some(re => re.test(msg.content))
+  )
+)
+
+/** 当前会话的 6 态坐席入口状态。 */
+const callAgentState = computed<CallAgentState>(() =>
+  computeCallAgentState({
+    currentConversation: currentConversation.value,
+    agentOnline: agentOnline.value,
+    canReopen: store.canReopen,
+    canCallAgent: store.canCallAgent,
+    hasUrgentKeywords: hasUrgentKeywords.value,
+  })
+)
+
+/** 坐席按钮的 6 态 modifier class。 */
+const callAgentBtnClass = computed<Record<string, boolean>>(() =>
+  computeIntegrationBtnClass(callAgentState.value)
+)
+
+/** 头像按钮状态 class（用于 5 色徽标及紧急态动画）。 */
+const agentBtnClass = computed<Record<string, boolean>>(() => ({
+  'is-online': callAgentState.value === 'active',
+  'is-urgent': callAgentState.value === 'urgent',
+  'is-waiting': callAgentState.value === 'waiting',
+  'is-offline': callAgentState.value === 'disabled',
+  'is-end': callAgentState.value === 'end' || callAgentState.value === 'reopen',
+}))
+
+/** 坐席头像右下角状态徽标 class。 */
+const agentBadgeClass = computed<Record<string, boolean>>(() => ({
+  'is-online': callAgentState.value === 'active',
+  'is-urgent': callAgentState.value === 'urgent',
+  'is-waiting': callAgentState.value === 'waiting',
+  'is-offline': callAgentState.value === 'disabled',
+  'is-end': callAgentState.value === 'end' || callAgentState.value === 'reopen',
+}))
+
+/** 坐席头像资源（public 目录通过根路径访问）。 */
+const agentAvatar = '/avatars/agent.png'
+
+const callAgentBtnTitle = computed<string>(() =>
+  computeCallAgentBtnTitle(callAgentState.value, agentOnline.value)
+)
+
+/** 输入框文本 */
+const inputText = ref<string>('')
+
+/** 输入框组件引用（用于获取 DOM 元素） */
+const inputFieldRef = ref<any>(null)
+
+/** 隐藏文件输入框 DOM 引用（用于触发系统文件选择器） */
+const fileInputRef = 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)
+
+// ============================================================================
+// 语音识别功能（双策略：企微 JS-SDK + 百度ASR）
+// ============================================================================
+const {
+  state: voiceState,
+  init: initVoice,
+  startRecording,
+  stopAndTranslate,
+  isSupported: isWecomVoiceSupported,
+} = useWecomVoice()
+
+/**
+ * 语音策略：'wecom'（企微JS-SDK）| 'baidu'（百度ASR）| 'none'（不支持）
+ */
+const voiceStrategy = computed<'wecom' | 'baidu' | 'none'>(() => {
+  if (isWecomVoiceSupported()) return 'wecom'
+  if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') return 'baidu'
+  const ua = navigator.userAgent
+  const isWxwork = /wxwork/i.test(ua)
+  const isMobile = /Mobile|Android|iPhone|iPad|iPod/i.test(ua)
+  const isMac = /Macintosh|Mac OS X/i.test(ua)
+  if (isWxwork && !isMobile && !isMac) return 'baidu'
+  return 'none'
+})
+
+/** 是否显示语音按钮（任一策略可用即显示） */
+const showVoiceButton = computed(() => voiceStrategy.value !== 'none')
+
+// 百度ASR 录音控制器
+const baiduRecorder = useAudioRecorder()
+
+/** 百度ASR 是否正在录音（响应式，绑定到模板） */
+const isBaiduRecording = computed(() => baiduRecorder.isRecording.value)
+
+/** 百度ASR 是否正在识别中（录音停止后、上传后端识别期间） */
+const isTranscribing = ref<boolean>(false)
+
+/**
+ * 🆕 v1.2:语音识别成功短暂显示状态（1.5s 后自动回默认）
+ * 录音停止 → 后端识别成功 → 设为 true → 1.5s 后自动回 false
+ */
+const voiceRecognitionCompleted = ref<boolean>(false)
+
+/**
+ * 语音按钮状态（default / recording / recognized）
+ * 优先级：recognized > recording > default
+ */
+const voiceBtnState = computed<'default' | 'recording' | 'recognized'>(() => {
+  if (voiceRecognitionCompleted.value) return 'recognized'
+  if (isVoiceActive.value) return 'recording'
+  return 'default'
+})
+
+/** 语音按钮 3 态的 class（is-voice-default / is-voice-recording / is-voice-recognized） */
+const voiceBtnClass = computed<Record<string, boolean>>(() => ({
+  'is-voice-default': voiceBtnState.value === 'default',
+  'is-voice-recording': voiceBtnState.value === 'recording',
+  'is-voice-recognized': voiceBtnState.value === 'recognized',
+}))
+
+/**
+ * 语音是否激活中（录音中或识别中），用于按钮 UI 状态
+ */
+const isVoiceActive = computed(() => {
+  if (voiceStrategy.value === 'wecom') return voiceState.isRecording
+  if (voiceStrategy.value === 'baidu') return isBaiduRecording.value || isTranscribing.value
+  return false
+})
+
+/** 识别结果是否需要追加前缀空格（如果输入框已有内容，加空格分隔） */
+function shouldAddSpaceBefore(text: string): boolean {
+  return text.length > 0 && !text.endsWith(' ') && !text.endsWith('\n')
+}
+
+// ============================================================================
+// 生命周期：Document 级别粘贴监听（修复 van-field @paste 不触发文件粘贴的问题）
+// ============================================================================
+onMounted(() => {
+  document.addEventListener('paste', handleDocPaste)
+  document.addEventListener('keydown', handleGlobalKeydown)
+  if (isWecomVoiceSupported()) {
+    initVoice().catch((err: any) => {
+      console.warn('[InputBar] 企微 JS-SDK 初始化失败:', err)
+    })
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('paste', handleDocPaste)
+  document.removeEventListener('keydown', handleGlobalKeydown)
+  if (baiduRecorder.isRecording.value) {
+    baiduRecorder.stop()
+  }
+})
+
+/**
+ * Document 级别粘贴处理（备用方案）
+ * 做什么：捕获 van-field @paste 未处理的文件粘贴
+ */
+async function handleDocPaste(event: ClipboardEvent): Promise<void> {
+  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 = [
+  '😀','😃','😄','😁','😆','😅','🤣','😂',
+  '🙂','😊','😇','🥰','😍','🤩','😘','😗',
+  '😚','😙','😋','😛','😜','🤪','😝','🤑',
+  '🤗','🤭','🤫','🤔','🤐','🤨','😐','😑',
+  '😶','😏','😒','🙄','😬','😮','🤯','😲',
+  '😳','🥺','😢','😭','😤','😠','😡','🤬',
+  '👍','👎','👏','🙌','🤝','💪','✌️','🤞',
+  '❤️','🧡','💛','💚','💙','💜','💯','✅',
+]
+
+/**
+ * 选择表情后插入到输入框
+ */
+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
+
+  if (!event.shiftKey) {
+    event.preventDefault()
+    handleSend()
+  }
+}
+
+/**
+ * 发送消息
+ */
+async function handleSend(): Promise<void> {
+  const content = inputText.value.trim()
+  if (!content || store.loading) return
+
+  inputText.value = ''
+  await store.sendNewMessage(content)
+}
+
+// ============================================================================
+// 文件/图片上传
+// ============================================================================
+
+/**
+ * 处理粘贴事件
+ */
+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
+    }
+  }
+}
+
+/**
+ * 上传图片并发送图片消息
+ */
+async function handleImageUpload(file: File | Blob): Promise<void> {
+  try {
+    showToast('图片上传中...')
+    const result = await uploadFile(file)
+    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 ||
+      '图片上传失败，请重试'
+    )
+  }
+}
+
+/**
+ * 上传文件并发送文件消息
+ */
+async function handleFileUpload(file: File | Blob): Promise<void> {
+  try {
+    const fileName = file instanceof File ? file.name : '文件'
+    showToast(`文件上传中: ${fileName}`)
+    const result = await uploadFile(file)
+    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 ||
+      '文件上传失败，请重试'
+    )
+  }
+}
+
+/**
+ * 处理文件选择上传
+ */
+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}`)
+      const result = await uploadFile(file)
+      showToast(`${file.name} 上传成功`)
+      console.log('[InputBar] 文件上传成功:', result.url)
+    } catch (error: any) {
+      console.error('文件上传失败:', error)
+      showToast(`${file.name} 上传失败`)
+    }
+  }
+
+  input.value = ''
+}
+
+/**
+ * 处理表情按钮点击
+ * 弹出/收起简易表情选择器（常用 Emoji 面板）
+ */
+function handleEmoji(): void {
+  showEmojiPanel.value = !showEmojiPanel.value
+}
+
+/**
+ * 处理文件按钮点击
+ * 触发文件选择器（不限类型）— v1.2 直接进系统选择器，不展开面板
+ */
+function handleFile(): void {
+  if (fileInputRef.value) {
+    fileInputRef.value.accept = ''
+    fileInputRef.value.multiple = true
+    fileInputRef.value.click()
+  }
+}
+
+/**
+ * 🆕 v1.9:处理群聊按钮点击
+ * 当前 store 暂无 group chat action，群聊功能开发中，先 toast 提示占位
+ * 后续接入真实群聊会话时，把 toast 替换为 store.startGroupChat() 即可
+ */
+function handleGroupChat(): void {
+  showToast('群聊功能开发中')
+}
+
+/**
+ * 处理坐席头像点击，并将 6 态动作路由到会话 store。
+ * InputBar 是 v1.3 唯一坐席入口，不向 ChatPanel emit。
+ */
+async function handleCallAgentClick(): Promise<void> {
+  const action = computeCallAction(callAgentState.value)
+  try {
+    switch (action) {
+      case 'callAgent':
+        await store.shakeAgent()
+        return
+      case 'cancelQueue':
+        await store.cancelQueue()
+        return
+      case 'endConversation':
+        await store.closeCurrentConversation()
+        return
+      case 'reopenConversation':
+        await store.reopenCurrentConversation()
+        return
+      case 'none':
+        return
+    }
+  } catch (error: any) {
+    console.error('[InputBar] 坐席操作失败:', error)
+    showToast(error?.message || '坐席操作失败，请稍后重试')
+  }
+}
+
+// ============================================================================
+// 语音识别交互
+// ============================================================================
+
+/**
+ * 处理语音按钮点击 / Ctrl+D 快捷键（双策略）
+ */
+async function handleVoiceToggle(event?: Event): Promise<void> {
+  event?.preventDefault()
+  event?.stopPropagation()
+
+  if (voiceStrategy.value === 'none') return
+
+  if (voiceStrategy.value === 'wecom') {
+    // 企微 JS-SDK 策略（手机端企微）
+    try {
+      if (voiceState.isRecording) {
+        const text = await stopAndTranslate()
+        if (text) {
+          if (shouldAddSpaceBefore(inputText.value)) {
+            inputText.value += ' '
+          }
+          inputText.value += text
+          // 🆕 v1.2:识别成功短暂显示绿色对勾（1.5s 回默认）
+          markVoiceRecognized()
+          showToast('语音识别完成')
+        } else {
+          showToast('未识别到语音内容')
+        }
+      } else {
+        await startRecording()
+        showToast('正在录音，点击停止')
+      }
+    } catch (error: any) {
+      const errMsg = voiceState.error || error?.message || '语音识别失败'
+      showToast(errMsg)
+      console.error('[InputBar] 企微语音识别错误:', error)
+    }
+  } else if (voiceStrategy.value === 'baidu') {
+    // 百度ASR 策略（PC/Mac 端）
+    if (isBaiduRecording.value) {
+      const blob = baiduRecorder.stop()
+
+      if (blob.size < 1600) {
+        showToast('录音过短，请说更多内容')
+        return
+      }
+
+      isTranscribing.value = true
+      try {
+        const result = await transcribeAudio(blob)
+        if (result.error) {
+          showToast(result.error)
+        } else if (result.text) {
+          if (shouldAddSpaceBefore(inputText.value)) {
+            inputText.value += ' '
+          }
+          inputText.value += result.text
+          // 🆕 v1.2:识别成功短暂显示绿色对勾（1.5s 回默认）
+          markVoiceRecognized()
+          showToast('语音识别完成')
+        } else {
+          showToast('未识别到语音内容')
+        }
+      } catch (err: any) {
+        showToast(err?.message || '语音识别失败')
+        console.error('[InputBar] 百度ASR识别错误:', err)
+      } finally {
+        isTranscribing.value = false
+      }
+    } else {
+      try {
+        await baiduRecorder.start()
+        showToast('开始语音输入')
+      } catch (err: any) {
+        showToast(err?.message || '录音启动失败')
+        console.error('[InputBar] 百度录音启动失败:', err)
+      }
+    }
+  }
+}
+
+/**
+ * 🆕 v1.2:语音识别完成短暂显示绿色对勾（1.5s 后回默认态）
+ */
+function markVoiceRecognized(): void {
+  voiceRecognitionCompleted.value = true
+  setTimeout(() => {
+    voiceRecognitionCompleted.value = false
+  }, 1500)
+}
+
+/**
+ * 全局键盘快捷键处理（Ctrl+D 语音识别）
+ */
+function handleGlobalKeydown(event: KeyboardEvent): void {
+  if (event.ctrlKey && (event.key === 'd' || event.key === 'D')) {
+    event.preventDefault()
+    if (!showVoiceButton.value) return
+    handleVoiceToggle()
+  }
+}
+
+// ============================================================================
+// 拖拽调节输入栏高度
+// ============================================================================
+
+/**
+ * 拖拽开始：记录初始 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
+
+    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>
+/* ==========================================================================
+   输入栏容器（v1.9 三区融合关键）
+   - 背景透明 → 让 ChatPanel 的渐变背景透出，三区（消息区/工具栏/输入区）连续
+   - border-top 保留（仍属容器 chrome，与外部消息区分隔）；内部子元素无 border
+   ========================================================================== */
+.input-bar {
+  background-color: transparent;
+  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;
+}
+
+/* v1.9 键盘可达性：所有按钮可见 focus 蓝环 */
+.glass-btn:focus-visible,
+.agent-btn:focus-visible {
+  outline: 2px solid #6366f1;
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   v1.9 窄屏 fallback（≤480px）
+   - 拱形轨道在窄屏易走样，隐藏 SVG、改胶囊样式
+   - 按钮尺寸适度缩小（玻璃按钮 36px / 坐席 52px）
+   ========================================================================== */
+@media (max-width: 480px) {
+  .gem-toolbar {
+    height: 56px;
+    padding: 0 12px;
+    margin: 0 auto 4px;
+  }
+  .gem-toolbar-bg {
+    display: none;
+  }
+  .gem-row {
+    background: rgba(255, 255, 255, 0.55);
+    backdrop-filter: blur(28px) saturate(180%);
+    -webkit-backdrop-filter: blur(28px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    border-radius: 20px;
+    padding: 6px 12px;
+    box-shadow:
+      0 1px 0 rgba(255, 255, 255, 0.9) inset,
+      0 -1px 0 rgba(99, 102, 241, 0.08) inset,
+      0 2px 4px rgba(99, 102, 241, 0.05),
+      0 8px 16px rgba(99, 102, 241, 0.08);
+  }
+  .gem-row .glass-btn {
+    width: 36px;
+    height: 36px;
+  }
+  .gem-row .agent-btn.gem {
+    width: 52px;
+    height: 52px;
+    margin: 0 4px;
+  }
+}
+
+/* ==========================================================================
+   v1.9 深色模式预案（prefers-color-scheme: dark）
+   - 当前为预留骨架，色彩需后续设计 token 全局对齐
+   ========================================================================== */
+@media (prefers-color-scheme: dark) {
+  .input-bar {
+    border-top-color: rgba(255, 255, 255, 0.1);
+  }
+  .gem-row {
+    /* 窄屏 fallback 启用时（≤480px）才生效 */
+  }
+  /* 在窄屏（≤480px）下，gem-row 会变成胶囊背景，深色模式加深 */
+  @media (max-width: 480px) {
+    .gem-row {
+      background: rgba(30, 30, 40, 0.55);
+      border-color: rgba(255, 255, 255, 0.15);
+    }
+  }
+  /* 输入框深色模式 */
+  .input-bar__field {
+    background-color: rgba(255, 255, 255, 0.06);
+    color: var(--text-primary);
+  }
+}
+
+/* ── 拖拽手柄 ── */
+.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;
+}
+
+/* ==========================================================================
+   v1.9 圆润拱形工具栏 — InputBar 内顶部居中独立行
+   - 位置：resize-handle 之后，emoji-panel / input-bar__row 之前
+   - 容器 .gem-toolbar 透明，让消息区背景透出（v1.9 三区融合关键）
+   - .gem-toolbar-bg 拱形轨道 SVG（viewBox 0 0 312 84，宽穹顶 x 84..216）
+   - 5 按钮：emoji / 文件 / 坐席(60px 居中) / 语音 / 群聊
+   - focus-visible 蓝环（键盘可达性）
+   - @media (max-width: 480px) 窄屏 fallback：隐藏 SVG、改胶囊
+   - @media (prefers-color-scheme: dark) 深色模式预留
+   ========================================================================== */
+.gem-toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  width: fit-content;
+  height: 84px;
+  margin: 0 auto 4px;
+  background: transparent;
+}
+
+.gem-toolbar-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.gem-row {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+/* 旧 .glass-toolbar 兼容层：保留 class 以防外部依赖挂样式，但不渲染（v1.9 不再使用） */
+.glass-toolbar {
+  /* v1.9 不再使用此容器类，CSS 留空避免旧规则冲突 */
+  display: none;
+}
+
+/* ==========================================================================
+   40px 圆形玻璃按钮（emoji / file / voice）
+   ========================================================================== */
+.glass-btn {
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  z-index: 2;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.9) inset,
+    0 -1px 0 rgba(0, 0, 0, 0.04) inset,
+    0 1px 2px rgba(0, 0, 0, 0.04),
+    0 2px 4px rgba(0, 0, 0, 0.04);
+  padding: 0;
+  outline: none;
+  overflow: visible;
+}
+
+.glass-btn:hover {
+  background: rgba(255, 255, 255, 0.75);
+  transform: translateY(-1px) scale(1.06);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 -1px 0 rgba(0, 0, 0, 0.04) inset,
+    0 2px 4px rgba(0, 0, 0, 0.06),
+    0 8px 16px rgba(99, 102, 241, 0.15);
+}
+
+.glass-btn:active {
+  transform: translateY(0) scale(0.95);
+}
+
+.glass-btn svg {
+  width: 22px;
+  height: 22px;
+  display: block;
+  pointer-events: none;
+}
+
+/* ── 表情按钮激活态（黄橙渐变） ── */
+.glass-btn.is-active-emoji {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9) 0%, rgba(245, 158, 11, 0.9) 100%);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.glass-btn.is-active-emoji::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+/* ── 语音按钮 3 态（颜色+形态双变） ── */
+.glass-btn.is-voice-recording {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
+  border-color: rgba(255, 255, 255, 0.4);
+  animation: recordingPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes recordingPulse {
+  0%, 100% {
+    box-shadow:
+      0 0 0 0 rgba(239, 68, 68, 0),
+      0 1px 0 rgba(255, 255, 255, 0.9) inset;
+  }
+  50% {
+    box-shadow:
+      0 0 0 6px rgba(239, 68, 68, 0.15),
+      0 1px 0 rgba(255, 255, 255, 0.9) inset;
+  }
+}
+
+.glass-btn.is-voice-recognized {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.glass-btn.is-voice-default {
+  /* 默认态：透明玻璃（无额外样式） */
+}
+
+.glass-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  animation: none;
+}
+
+/* ==========================================================================
+   44px 坐席头像按钮（图片头像 + 紫粉渐变边框）
+   v1.3 class: .agent-btn（原 .input-bar__agent 重命名）
+   v1.9 增强：.agent-btn.gem 修饰符把坐席放大到 60px（较 40px 工具图标大 50%）
+   ========================================================================== */
+.agent-btn {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  position: relative;
+  z-index: 2;
+  overflow: visible;
+  cursor: pointer;
+  background: linear-gradient(135deg, #6366f1, #a855f7 50%, #ec4899) padding-box;
+  transition: transform 0.25s ease, opacity 0.2s ease, box-shadow 0.25s ease;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
+/* v1.9 gem 修饰符：坐席按钮增大到 60px，居中、不探出、无光晕 */
+.gem-row .agent-btn.gem {
+  width: 60px;
+  height: 60px;
+  margin: 0 6px;
+  z-index: 3;
+  box-shadow: none;
+}
+
+.agent-btn::before {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+  z-index: -1;
+}
+
+.agent-btn:hover {
+  transform: translateY(-1px) scale(1.05);
+}
+
+.agent-btn:active {
+  transform: scale(0.95);
+}
+
+.agent-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.agent-btn__avatar {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center 15%;
+}
+
+/* 6 态 modifier（沿用 v1.2 helper 契约） */
+.agent-btn.is-online {
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+}
+
+.agent-btn.is-urgent {
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6), 0 4px 12px rgba(239, 68, 68, 0.3);
+  animation: agentUrgentPulse 1.2s ease-in-out infinite;
+}
+
+.agent-btn.is-waiting {
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.6);
+}
+
+.agent-btn.is-end {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
+}
+
+.agent-btn.is-offline {
+  opacity: 0.4;
+  filter: grayscale(0.7);
+}
+
+@keyframes agentUrgentPulse {
+  0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6), 0 4px 12px rgba(239, 68, 68, 0.3); }
+  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.4), 0 4px 16px rgba(239, 68, 68, 0.5); }
+}
+
+/* 兼容 IntegrationZone computeIntegrationBtnClass 输出的 6 态 class（call-agent-btn--*） */
+.agent-btn.call-agent-btn--active {
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+}
+.agent-btn.call-agent-btn--urgent {
+  animation: agentUrgentPulse 1.2s ease-in-out infinite;
+}
+.agent-btn.call-agent-btn--waiting {
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.6);
+}
+.agent-btn.call-agent-btn--end,
+.agent-btn.call-agent-btn--reopen {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
+}
+.agent-btn.call-agent-btn--disabled {
+  opacity: 0.4;
+  filter: grayscale(0.7);
+  cursor: not-allowed;
+}
+
+/* ==========================================================================
+   坐席头像右下角状态徽标 — 5 色（is-online / is-urgent / is-waiting / is-offline / is-end）
+   ========================================================================== */
+.agent-badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  z-index: 3;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.agent-badge.is-online { background: #10b981; }
+.agent-badge.is-urgent { background: #ef4444; }
+.agent-badge.is-waiting { background: #f59e0b; }
+.agent-badge.is-offline { background: #9ca3af; }
+.agent-badge.is-end { background: #3b82f6; }
+
+.agent-btn.is-urgent .agent-badge {
+  animation: badgePulse 1.5s ease-in-out infinite;
+}
+
+@keyframes badgePulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6), 0 1px 2px rgba(0, 0, 0, 0.2); }
+  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); }
+}
+
+/* ========================================================================
+   表情面板：从工具栏方向上滑展开（slideUp）
+   ======================================================================== */
+.emoji-panel {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(99, 102, 241, 0.15);
+  border-radius: 14px;
+  padding: 12px;
+  margin-bottom: 8px;
+  box-shadow: 0 -4px 16px rgba(99, 102, 241, 0.1);
+  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 400px;
+  }
+}
+
+.emoji-panel__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 36px);
+  gap: 4px;
+  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: rgba(99, 102, 241, 0.1);
+}
+
+.emoji-panel__item:active {
+  background: rgba(99, 102, 241, 0.15);
+  transform: scale(1.2);
+}
+
+/* 表情面板遮罩（点击关闭） */
+.emoji-panel__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+}
+
+/* ==========================================================================
+   输入行：块级布局（发送按钮 absolute 右下角）
+   ========================================================================== */
+.input-bar__row {
+  display: block;
+  position: relative;
+}
+
+/* ==========================================================================
+   文本输入框
+   ========================================================================== */
+.input-bar__field {
+  display: block;
+  width: 100%;
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 10px 80px 10px 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);
+}
+
+.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 {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  z-index: 2;
+  height: 36px;
+  border-radius: 8px;
+  min-width: 56px;
+}
+
+/* ==========================================================================
+   语音状态提示条（百度ASR内联录音时显示）
+   ========================================================================== */
+.input-bar__voice-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  margin: 4px 0;
+  font-size: 12px;
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.08);
+  border-radius: 6px;
+  animation: voice-status-blink 1.2s ease-in-out infinite;
+  width: fit-content;
+}
+
+@keyframes voice-status-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+</style>
\ No newline at end of file