/* ===== 鑫诺法律特需 智能客服 - 全局样式（奇点AI对话App风格 + 豆包语音交互） ===== */

:root {
  /* 鑫诺官网配色：青铜金 #918c76 + 酒红 #A7212F + 暖中性 */
  --primary: #7a7565;          /* 青铜金（主品牌色，加深保证对比） */
  --primary-light: #918c76;    /* 官网签名青铜金 */
  --primary-dark: #5c574a;     /* 深青铜 */
  --accent: #A7212F;           /* 官网酒红（强调/用户气泡/发送） */
  --accent-light: #c4364a;
  --bg: #f4f1ea;              /* 暖米白背景（匹配官网古典调） */
  --bg-card: #ffffff;
  --bg-chat: #ebe5d8;          /* 暖色聊天区，衬托白色气泡 */
  --text: #2b2620;            /* 深褐黑文字 */
  --text-secondary: #6b6356;
  --text-muted: #a99f8c;
  --border: #e6e0d4;
  --success: #5a7d52;
  --warning: #b07d2a;
  --error: #A7212F;
  --shadow-sm: 0 1px 2px rgba(92,87,74,0.06);
  --shadow: 0 4px 12px rgba(92,87,74,0.09);
  --shadow-lg: 0 12px 32px rgba(92,87,74,0.15);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ===== 聊天页面（奇点App式：居中窄栏 + 全高卡片） ===== */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* 桌面端：暖色留白背景 + 更宽阅读栏 */
@media (min-width: 560px) {
  body {
    background: linear-gradient(160deg, #efe9dc 0%, #e4dccc 100%);
  }
  .chat-page {
    max-width: 680px;
    border-radius: 24px;
    margin: 18px auto;
    height: calc(100vh - 36px);
    height: calc(100dvh - 36px);
    box-shadow: 0 20px 60px rgba(92,87,74,0.18);
  }

  /* 桌面端顶栏更舒展 */
  .chat-header { padding: 14px 22px; }
  /* 与消息气泡头像统一：50px 圆形 */
  .chat-header .logo { width: 50px; height: 50px; border-radius: 50%; }
  .chat-header .header-info h1 { font-size: 25px; letter-spacing: 6px; }
  .chat-messages { padding: 22px 22px 12px; }
  .msg .bubble { font-size: 17px; line-height: 1.7; }
  .msg .avatar { width: 50px; height: 50px; font-size: 20px; }
}

/* 手机端：精简紧凑 */
@media (max-width: 559px) {
  .chat-page { max-width: 100%; border-radius: 0; margin: 0; height: 100vh; height: 100dvh; }
  .chat-header { padding: 9px 12px; gap: 9px; }
  /* 与消息气泡头像统一：42px 圆形 */
  .chat-header .logo { width: 42px; height: 42px; border-radius: 50%; }
  .chat-header .header-info h1 { font-size: 19px; letter-spacing: 4px; }
  .header-badge { font-size: 10px; padding: 4px 9px; }
  .header-icon-btn { width: 32px; height: 32px; font-size: 14px; }
  .chat-messages { padding: 12px 12px 8px; }
  .msg { margin-bottom: 11px; }
  .msg .avatar { width: 42px; height: 42px; font-size: 17px; }
  .msg .bubble { padding: 11px 15px; font-size: 17px; line-height: 1.75; }
  .msg .bubble-wrap { max-width: 82%; }

  /* 语音输入区：单行紧凑（微信式） */
  .voice-mode-area { gap: 8px; }
  .press-to-talk-btn { min-height: 44px; padding: 10px 12px; }
  .press-to-talk-btn .ptt-mic-svg { width: 18px; height: 18px; }
  .press-to-talk-btn .ptt-text { font-size: 14px; letter-spacing: 1.5px; }
  .ptt-small-btn { width: 42px; height: 42px; }
  .ptt-svg { width: 20px; height: 20px; }
  .attach-btn, .send-btn { width: 42px; height: 42px; font-size: 16px; }

  .input-hint { justify-content: center; }
  /* 三按钮单行布局（紧急电话/留言/连续语音），紧凑间距避免溢出 */
  .input-hint .input-hint-links { gap: 6px; width: 100%; flex-wrap: nowrap; justify-content: center; }
  /* 手机端确保紧急电话入口可见 */
  .input-hint .input-hint-links a.hint-call { display: inline-flex !important; }
  .input-hint .input-hint-links a { padding: 7px 12px; font-size: 13.5px; letter-spacing: 0; }
  /* 手机端显示"拨打"按钮（电脑端默认隐藏） */
  .call-number-item .cn-action { display: inline-block; }
  .voice-guide-tip { font-size: 14px; padding: 8px 10px; }

  /* 模块导航手机端2列，更易点 */
  .module-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .module-nav-card { margin: 8px 10px; padding: 10px; }
  .module-nav-item { padding: 10px 4px 8px; }
  .module-nav-icon { width: 34px; height: 34px; font-size: 17px; }
  .module-nav-name { font-size: 12px; }
  .module-nav-desc { display: none; }
  .quick-reply-btn { padding: 6px 12px; font-size: 12px; }
  .chat-input { padding: 10px 14px; font-size: 16px; min-height: 84px; }
}

/* ===== 顶部栏（简洁现代） ===== */
.chat-header {
  background: var(--bg-card);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.chat-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  /* 与消息气泡头像形状统一：圆形 */
  border-radius: 50%;
  overflow: hidden;
  /* 修复黑边：去深色渐变背景与阴影，与气泡/标题栏背景协调 */
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid #ece6d8;
  padding: 4px;
  box-sizing: border-box;
}

.chat-header .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* 不裁切 */
  display: block;
  /* 跟随外层圆形，避免直角外溢 */
  border-radius: 50%;
}

.chat-header .logo .logo-fallback {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.chat-header .header-info { flex: 1; min-width: 0; }
.chat-header .header-info h1 { font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--text); letter-spacing: 5px; }

/* 头部右侧操作区 */
.chat-header .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 头部图标按钮（TTS开关） */
.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-chat);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.header-icon-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.header-icon-btn.off { opacity: 0.5; }

/* ============ 会话结束机制（2026-09-16）============ */

/* 顶部「结束会话」按钮 */
.header-end-btn {
  height: 30px;
  padding: 0 13px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--bg-chat);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.header-end-btn:hover { background: #fff1f0; color: #d4380d; border-color: #ffa39e; }

/* 已结束状态条 */
.session-closed-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.session-closed-bar .scb-icon { font-size: 14px; }
.session-closed-bar .scb-text { flex: 1; }
.session-closed-bar .scb-btn {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.session-closed-bar .scb-btn:hover { opacity: 0.86; }

/* 结束确认弹层 */
.confirm-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.confirm-box {
  width: 300px;
  max-width: 82vw;
  background: #fff;
  border-radius: 14px;
  padding: 22px 20px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
}
.confirm-box .confirm-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.confirm-box .confirm-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; }
.confirm-box .confirm-actions { display: flex; gap: 10px; }
.confirm-box .confirm-btn {
  flex: 1;
  height: 38px;
  border-radius: 19px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
}
.confirm-box .confirm-btn.danger {
  background: #d4380d;
  border-color: #d4380d;
  color: #fff;
}
.confirm-box .confirm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* 结束提示卡片（消息流内） */
.msg-session-end .bubble {
  background: #fafafa !important;
  color: var(--text-secondary) !important;
  border: 1px dashed var(--border);
  font-size: 13px;
}

/* 在线状态徽章 */
.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #e6f7ee 0%, #d1f0e0 100%);
  color: #1a7a43;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.header-badge .badge-dot {
  width: 7px;
  height: 7px;
  background: #38a169;
  border-radius: 50%;
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,161,105,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(56,161,105,0); }
}

/* ===== 消息区 ===== */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 14px;     /* 底部 10→14px：消息与 chat-input-area 之间留出视觉呼吸空间 */
  background: var(--bg-chat);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #d3d9e2; border-radius: 3px; }

.msg {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  animation: msgIn 0.3s ease;
}

/* 不同角色之间留出明显分隔，避免头像紧贴视觉混乱 */
.msg + .msg.user,
.msg + .msg.human_agent,
.msg.human_agent + .msg.user,
.msg.user + .msg.human_agent { margin-top: 4px; }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 视觉优化：头像放大，对话流中更清晰醒目 */
.msg .avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: #fff;
  /* 修复黑边：去深色渐变背景（图片缩放后透明区会透出深色形成"边框"），改纯白底 + 更弱阴影 */
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
  border: 1px solid #ece6d8;
  padding: 4px;       /* 内边距让图片不顶到圆形边缘 */
  box-sizing: border-box;
}

.msg .avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* 不裁切，避免图片边缘被切形成锐利"黑边" */
  display: block;
  border-radius: 50%;
}

/* 助手头像（用 xinnuo_avatar.jpg）显示图片，emoji 兜底统一为白底+品牌蓝，与logo风格一致 */
.msg.assistant .avatar.avatar-fallback {
  background: #ffffff;
  color: #1a4d8f;
  font-size: 20px;
  font-weight: 600;
}

/* 视觉优化：用户/人工客服头像与客服logo统一为白底+品牌蓝文字（与助手头像容器一致） */
.msg.user .avatar { background: #ffffff; color: #1a4d8f; font-weight: 600; order: 2; }
/* 修复黑边：助手头像容器改为白底，避免图片缩放后透明区露出深色形成"边框" */
.msg.assistant .avatar { background: #ffffff; }
.msg.system .avatar { background: var(--text-muted); }
.msg.human_agent .avatar { background: #ffffff; color: #1a4d8f; font-weight: 600; }

.msg .bubble-wrap {
  max-width: 76%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.msg.user .bubble-wrap { align-items: flex-end; }

/* 消息时间戳 */
.msg .msg-time {
  font-size: 11.5px;
  color: #6b7280; /* 深灰，比 var(--text-muted) 略深，更易读 */
  padding: 0 4px;
  line-height: 1.4;
  user-select: none;
}
.msg.user .msg-time { text-align: right; }
.msg.assistant .msg-time { text-align: left; }
.msg.system .msg-time { text-align: center; }

.msg .bubble {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 17px;
  line-height: 1.6;
  color: #1d5fbf; /* 恢复蓝色文字（2026-09-02 用户要求还原为之前版本的浅蓝） */
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid #e6dfd2; /* 统一所有气泡边框样式 */
}

.msg.assistant .bubble {
  background: #ffffff;
  border-color: #e6dfd2;
  border-left: 3px solid #918c76;
  border-top-left-radius: 6px;
  color: #1d5fbf; /* 恢复蓝色文字（2026-09-02 用户要求还原为之前版本的浅蓝 #1d5fbf） */
  box-shadow: 0 2px 8px rgba(92,87,74,0.08);
}

.msg.user .bubble {
  background: linear-gradient(135deg, #4a5568 0%, #5a6478 100%); /* 深色气泡，提升对比 */
  color: #ffffff; /* 白字，深底上清晰可读 */
  border-color: #4a5568;
  border-top-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(74,85,104,0.25);
}

.msg.system .bubble {
  background: #fef6e7;
  border: 1px solid #f7d9a0;
  color: #7c5c10;
  font-size: 13px;
  text-align: center;
  max-width: 85%;
  margin: 0 auto;
  line-height: 1.55;
}

.msg.system .system-bubble-with-action {
  text-align: left;
  margin-bottom: 4px;
}

.msg.system .system-action-btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}

.msg.system .system-action-btn:hover { background: var(--primary-light); }
.msg.system .system-action-btn:active { background: var(--primary-dark); }

.msg .intent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 500;
  width: fit-content;
  border: 1px solid currentColor; /* 统一边框风格 */
  opacity: 0.92;
}

.msg .meta { font-size: 11px; color: var(--text-muted); }

/* ===== 快捷建议气泡（输入栏上方，豆包风格推荐问题） ===== */
.quick-replies {
  display: flex;
  gap: 8px;
  padding: 4px 16px 10px;
  background: var(--bg-chat);
  overflow-x: auto;
  flex-shrink: 0;
  z-index: 5;
  position: relative;
  scrollbar-width: none;
}

.quick-replies::-webkit-scrollbar { display: none; }

.quick-reply-btn {
  background: var(--bg-card);
  border: 1.5px solid #d9cfbd;  /* 统一边框颜色和宽度：1.5px */
  color: var(--primary);
  padding: 7px 14px;
  border-radius: 14px;            /* 统一圆角：14px（与输入框/按住说话一致） */
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.quick-reply-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* 转人工提示 */
.transfer-banner {
  background: linear-gradient(135deg, #fef5e7 0%, #fefcbf 100%);
  border: 1px solid #fbd38d;
  border-radius: var(--radius);
  padding: 14px 20px;
  margin: 0 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #744210;
  animation: msgIn 0.3s ease;
}

.transfer-banner .icon { font-size: 20px; }

/* ===== 输入区（豆包式）=====
   继承 chat-page 的圆角，避免在桌面 24px / embed 16px 圆角下硬边切掉内部按钮圆角 */
.chat-input-area {
  padding-top: 8px;
  padding-right: 12px;
  padding-left: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  /* 默认（embed 模式）：与外层 .xn-widget 16px 圆角的下半部分一致 */
  border-radius: 0 0 16px 16px;
}

/* 桌面端 chat-page 圆角 24px，输入区下沿同步 24px 圆角，避免内部按钮圆角与容器圆角错位 */
@media (min-width: 560px) {
  .chat-input-area {
    border-radius: 0 0 24px 24px;
  }
}

/* 手机端 chat-page 圆角 0，输入区下沿无圆角 */
@media (max-width: 559px) {
  .chat-input-area {
    border-radius: 0 0 0 0;
  }
}

/* 语音模式区域（微信/豆包风格单行） */
.voice-mode-area {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 按住说话按钮（单行紧凑，微信式） */
.press-to-talk-btn {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 14px;                /* 统一圆角：14px */
  background: var(--bg-card);
  border: 1.5px solid #d9cfbd;        /* 统一边框颜色 */
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;   /* iOS 长按禁止弹出系统菜单（复制/选择） */
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  min-height: 46px;
}

.press-to-talk-btn .ptt-mic-svg {
  width: 19px;
  height: 19px;
  color: var(--primary);
  flex-shrink: 0;
}

.press-to-talk-btn .ptt-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 2px;
  line-height: 1;
}

.press-to-talk-btn.recording {
  background: #fff5f5;
  border-color: var(--accent);
  transform: scale(0.98);
  box-shadow: 0 4px 16px rgba(167,33,47,0.2);
}

.press-to-talk-btn.recording .ptt-text { color: var(--accent); }
.press-to-talk-btn.recording .ptt-mic-svg { color: var(--accent); animation: micPulse 1.5s infinite; }

/* 小按钮内联 SVG 图标（文件/键盘，比 emoji 更清晰） */
.ptt-svg {
  width: 21px;
  height: 21px;
  display: block;
}

@keyframes micPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* 文字模式区域 */
.text-mode-area {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* 视觉隐藏的 file input——绝不能用 display:none（企微/iOS WebView 会拒绝弹出文件框） */
.file-input-vh {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
}

/* 圆形模式切换/功能按钮 */
.mode-switch-btn, .attach-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-chat);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
  transition: all 0.2s;
  flex-shrink: 0;
}

/* 语音模式小按钮（文件/键盘/留言） */
.ptt-small-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
  transition: all 0.2s;
  flex-shrink: 0;
}

.ptt-small-btn:hover, .attach-btn:hover, .mode-switch-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* AI 语音对话入口（麦克风图标 + 文字标签，成对展示） */
.vc-entry-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.vc-entry-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 62px;
  padding: 6px 10px;
  border: 1.5px solid var(--primary);
  border-radius: 18px;
  background: linear-gradient(135deg, #7a7565 0%, #918c76 100%);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.vc-entry-btn:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(122,117,101,0.35); }

.vc-entry-btn .vc-entry-icon {
  font-size: 21px;
  line-height: 1;
}

.vc-entry-btn .vc-entry-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* 悬浮/长按提示气泡 */
.vc-entry-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(51, 47, 40, 0.94);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all 0.25s;
  z-index: 60;
  pointer-events: none;
}

.vc-entry-tip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 首次访客语音引导条（视觉优化：字号加大提升可读性） */
.voice-guide-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(145, 140, 118, 0.12);
  border: 1px dashed rgba(145, 140, 118, 0.55);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.voice-guide-tip .vg-text { flex: 1; }

.voice-guide-tip .vg-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}

.voice-guide-tip .vg-close:hover { background: rgba(0,0,0,0.08); color: var(--accent); }

/* 全局轻提示 toast（3秒自动消失） */
.xn-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(51, 47, 40, 0.92);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  max-width: 86vw;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 999;
  pointer-events: none;
}

.xn-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 文字输入框 */
.chat-input {
  flex: 1;
  border: 1.5px solid #d9cfbd; /* 统一边框颜色：与气泡边框色系一致 */
  border-radius: 14px;          /* 统一圆角：14px（中等圆角，全局一致） */
  padding: 12px 16px;
  font-size: 17px;
  resize: none;
  min-height: 90px;
  max-height: 200px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.55;
  background: var(--bg-chat);
}

.chat-input:focus { border-color: var(--primary-light); background: #fff; }

/* 发送按钮 */
.send-btn {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #7a7565 0%, #918c76 100%);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(122,117,101,0.3);
}

.send-btn:hover { background: var(--primary-dark); transform: scale(1.06); }
.send-btn:disabled { background: var(--text-muted); cursor: not-allowed; transform: none; box-shadow: none; }

/* 输入提示 */
.input-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;          /* 与 voice-mode-area "按住说话" 按钮的间距，避免视觉挤在一起 */
  padding-top: 8px;         /* 让三个胶囊按钮上方预留呼吸空间，不贴紧 chat-input-area 上边界 */
  padding-bottom: 6px;      /* 按钮放大后加高，底部留足与 chat-page 圆角的视觉安全距离 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.input-hint .input-hint-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.input-hint .input-hint-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;                /* 紧凑间距（24→14），桌面端三个按钮不会过宽，配合 padding-x 留出 chat-page 圆角安全距离 */
  padding: 0 12px;          /* 左右各 12px 安全距离，避免两侧按钮（人工电话/语音连线）触碰 chat-page 圆角切线 */
  flex-shrink: 0;
  margin-top: 2px;
}

/* 紧急电话 / 企业微信 胶囊按钮（大图标、大文字、醒目） */
.input-hint .input-hint-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.input-hint .input-hint-links .hint-ico {
  font-size: 21px;
  line-height: 1;
}

.input-hint .input-hint-links a.hint-call {
  color: var(--accent);
  background: rgba(167, 33, 47, 0.08);
  border: 1.5px solid rgba(167, 33, 47, 0.35);
}

.input-hint .input-hint-links a.hint-leave {
  color: var(--primary-dark);
  background: rgba(122, 117, 101, 0.08);
  border: 1.5px solid rgba(122, 117, 101, 0.35);
}

.input-hint .input-hint-links a.hint-voice {
  color: var(--primary);
  background: rgba(122, 117, 101, 0.08);
  border: 1.5px solid rgba(122, 117, 101, 0.35);
}

.input-hint .input-hint-links a.hint-call:hover {
  background: var(--accent);
  color: #fff;
}

.input-hint .input-hint-links a.hint-leave:hover {
  background: var(--primary);
  color: #fff;
}

.input-hint .input-hint-links a.hint-voice:hover {
  background: var(--primary);
  color: #fff;
}

/* 文件上传预览 */
.file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* 文件卡片（选择后预览 + 确认发送） */
.fp-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-chat);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  max-width: 300px;
  transition: border-color 0.15s;
}
.fp-card:hover { border-color: var(--primary-light); }

.fp-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.fp-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f0ede5;
  border-radius: 6px;
}

.fp-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.fp-name {
  font-size: 13px;
  color: var(--text-primary, #333);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.fp-size {
  font-size: 11px;
  color: var(--text-muted);
}

.fp-preview-btn,
.fp-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.fp-preview-btn { color: var(--primary); }
.fp-preview-btn:hover { background: var(--primary-light); }
.fp-remove { color: var(--text-muted); font-weight: 700; }
.fp-remove:hover { color: var(--accent); background: rgba(167,33,47,0.1); }

.fp-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 2px;
  transition: background 0.15s;
}
.fp-send-btn:hover { background: var(--primary-dark); }
.fp-send-btn:active { transform: scale(0.97); }

/* ===== 录音遮罩新元素（豆包式圆麦克风） ===== */
.recording-mic-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recording-mic-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,33,47,0.25) 0%, rgba(167,33,47,0.05) 70%);
  animation: micRing 1.6s ease-out infinite;
}

@keyframes micRing {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

.recording-mic-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4364a 0%, #A7212F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 24px rgba(167,33,47,0.4);
  z-index: 1;
}

.recording-slide-tip {
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  align-self: center;
}
/* ===== 管理后台 ===== */
.admin-page {
  min-height: 100vh;
  background: var(--bg);
}

.admin-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 50;
}

.admin-header .logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-header .logo-icon {
  width: 48px;
  height: 48px;
  background: #7a7565;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  overflow: hidden;
  padding: 4px;
}

.admin-header .logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: contrast(1.15) saturate(1.3);
}

.admin-header .admin-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  border-radius: 4px;
  display: block;
}

.admin-header h1 { font-size: 18px; font-weight: 600; }
.admin-header .subtitle { font-size: 12px; opacity: 0.8; }

.admin-header .nav {
  display: flex;
  gap: 6px;
}

.admin-header .nav a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: all 0.2s;
}

.admin-header .nav a:hover,
.admin-header .nav a.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.admin-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.stat-card .stat-trend {
  font-size: 12px;
  margin-top: 6px;
}

/* 图表区域 */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.chart-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}

.chart-container {
  position: relative;
  height: 220px;
}

/* 对话列表 */
.conv-list-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}

.conv-list-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.conv-list-header h3 { font-size: 15px; font-weight: 600; }

.conv-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.conv-filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.2s;
}

.conv-filter-btn.active,
.conv-filter-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.conv-search {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  width: 200px;
  outline: none;
}

.conv-search:focus { border-color: var(--primary-light); }

.conv-table {
  width: 100%;
  border-collapse: collapse;
}

.conv-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-chat);
  border-bottom: 1px solid var(--border);
}

.conv-table td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.conv-table tr { cursor: pointer; transition: background 0.15s; }
.conv-table tr:hover { background: var(--bg-chat); }

.conv-table .conv-id { font-family: monospace; font-size: 12px; color: var(--text-muted); }

/* ===== 通用徽章（不依赖 .msg 父容器，用于表格/卡片等场景） ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  width: fit-content;
  white-space: nowrap;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.status-active { background: #c6f6d5; color: #22543d; }
.status-transferred { background: #fefcbf; color: #744210; }
.status-closed { background: #e2e8f0; color: #4a5568; }

.rating-display { color: #f6ad55; font-size: 14px; }
.rating-display .num { color: var(--text-secondary); font-size: 12px; margin-left: 4px; }

/* 对话详情 */
.detail-overlay {
  position: fixed;
  top: 0; right: 0;
  width: 520px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.detail-overlay.open { transform: translateX(0); }

.detail-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.detail-header h3 { font-size: 16px; font-weight: 600; }

.detail-close {
  width: 32px; height: 32px;
  border: none;
  background: var(--bg);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.detail-close:hover { background: var(--error); color: #fff; }

.detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.detail-info-item {
  background: var(--bg-chat);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}

.detail-info-item .label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.detail-info-item .value { font-size: 13px; font-weight: 500; }

.detail-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.detail-msg {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.detail-msg.user {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  max-width: 85%;
  border-top-right-radius: var(--radius-xs);
}

.detail-msg.assistant {
  background: var(--bg-chat);
  border: 1px solid var(--border);
  max-width: 85%;
  border-top-left-radius: var(--radius-xs);
}

.detail-msg .msg-intent {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-bottom: 4px;
  display: inline-block;
}

.detail-msg .msg-content { white-space: pre-wrap; word-break: break-word; }

.detail-msg .msg-time {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  text-align: right;
}

.detail-msg.assistant .msg-time {
  color: var(--text-muted);
}

.detail-files {
  margin-top: 16px;
}

.detail-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f3efe6;
  border: 1px solid #e0d6c4;
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: #918c76;
  margin-bottom: 6px;
}

/* ===== 语音功能样式 ===== */

/* 录音转写文字显示 */
.recording-transcript {
  margin-top: 12px;
  padding: 10px 16px;
  background: #f3efe6;
  border: 1px solid #e0d6c4;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  max-width: 400px;
  text-align: left;
  animation: msgIn 0.3s ease;
}

@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167,33,47,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(167,33,47,0); }
}

/* 消息中的语音播放按钮 */
.voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
}

.voice-play-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.msg.user .voice-play-btn { background: rgba(255,255,255,0.25); }
.voice-play-btn:hover { transform: scale(1.1); }
.voice-play-btn.playing { background: var(--accent); }

.voice-waveform {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
}

.voice-waveform span {
  flex: 1;
  min-width: 2px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
}

.msg.assistant .voice-waveform span { background: var(--primary-light); opacity: 0.4; }
.msg.assistant .voice-waveform span.active { opacity: 1; background: var(--accent); }
.msg.user .voice-waveform span.active { opacity: 1; background: #fff; }

.voice-duration {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  flex-shrink: 0;
}

.msg.assistant .voice-duration { color: var(--text-muted); }

/* 语音录制遮罩 */
.voice-recording-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  pointer-events: none;  /* 遮罩不拦截触摸事件，让全局 pointerup 正常触发 */
}

/* 取消按钮需要可点击 */
.recording-cancel {
  pointer-events: auto;
}

/* 录音期间禁止页面滚动，防止触发 pointercancel */
body.recording-active {
  overflow: hidden;
  touch-action: none;
}

.recording-visualizer {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 36px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: msgIn 0.3s ease;
}

.recording-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 60px;
  margin-bottom: 16px;
}

.recording-wave span {
  width: 4px;
  background: var(--accent);
  border-radius: 4px;
  animation: wave 1.2s ease-in-out infinite;
}

.recording-wave span:nth-child(1) { animation-delay: 0s; height: 20px; }
.recording-wave span:nth-child(2) { animation-delay: 0.1s; height: 35px; }
.recording-wave span:nth-child(3) { animation-delay: 0.2s; height: 50px; }
.recording-wave span:nth-child(4) { animation-delay: 0.3s; height: 40px; }
.recording-wave span:nth-child(5) { animation-delay: 0.4s; height: 55px; }
.recording-wave span:nth-child(6) { animation-delay: 0.5s; height: 30px; }
.recording-wave span:nth-child(7) { animation-delay: 0.4s; height: 45px; }
.recording-wave span:nth-child(8) { animation-delay: 0.3s; height: 55px; }
.recording-wave span:nth-child(9) { animation-delay: 0.2s; height: 35px; }
.recording-wave span:nth-child(10) { animation-delay: 0.1s; height: 50px; }
.recording-wave span:nth-child(11) { animation-delay: 0s; height: 25px; }
.recording-wave span:nth-child(12) { animation-delay: 0.1s; height: 40px; }
.recording-wave span:nth-child(13) { animation-delay: 0.2s; height: 55px; }
.recording-wave span:nth-child(14) { animation-delay: 0.3s; height: 30px; }
.recording-wave span:nth-child(15) { animation-delay: 0.4s; height: 45px; }

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

.recording-timer {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.recording-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.recording-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.recording-cancel, .recording-send {
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.recording-cancel {
  background: var(--bg);
  color: var(--text-secondary);
}

.recording-cancel:hover { background: var(--border); }

.recording-send {
  background: var(--primary);
  color: #fff;
}

.recording-send:hover { background: var(--primary-dark); }

/* 语音聆听指示器 */
.voice-listening-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f3efe6;
  border: 1px solid #e0d6c4;
  border-radius: 20px;
  margin: 0 24px 8px;
  font-size: 13px;
  color: #918c76;
  animation: msgIn 0.3s ease;
}

.listening-pulse {
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  animation: micPulse 1.5s infinite;
  flex-shrink: 0;
}

.listening-text {
  color: var(--text);
  font-weight: 500;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 消息中的TTS播放按钮 */
.msg-tts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(122,117,101, 0.08);
  color: var(--primary);
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  margin-top: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.msg-tts-btn:hover { background: var(--primary); color: #fff; transform: scale(1.08); }
.msg-tts-btn.playing { background: var(--accent); color: #fff; animation: pulse-soft 1.4s infinite; }

.msg.user .msg-tts-btn {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.msg.user .msg-tts-btn:hover { background: rgba(255,255,255,0.38); color: #fff; transform: scale(1.08); }

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.35); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
}

/* ===== 人工客服接入指示器 ===== */

.human-joined-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #f0fff4 0%, #f3efe6 100%);
  border-top: 1px solid #9ae6b4;
  border-bottom: 1px solid #9ae6b4;
  flex-shrink: 0;
  animation: msgIn 0.3s ease;
}

.human-joined-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #c6f6d5;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  position: relative;
}

.human-joined-avatar::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 8px; height: 8px;
  background: #48bb78;
  border-radius: 50%;
  border: 2px solid #fff;
}

.human-joined-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.human-joined-name {
  font-size: 13px;
  font-weight: 600;
  color: #22543d;
}

.human-joined-status {
  font-size: 11px;
  color: #38a169;
}

.human-joined-badge {
  background: #38a169;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* ===== 沟通工具栏 ===== */

.comm-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}

.toolbar-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.2s;
  min-width: 0;
  white-space: nowrap;
}

.toolbar-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.toolbar-btn.wechat:hover {
  background: #38a169;
  border-color: #38a169;
}

.toolbar-btn.voice-call {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}

.toolbar-btn.voice-call:hover {
  background: linear-gradient(135deg, var(--accent) 0%, #A7212F 100%);
  color: #fff;
  border-color: transparent;
}

.toolbar-btn .tb-icon { font-size: 18px; }
.toolbar-btn .tb-label { font-weight: 500; }

/* LOGO 下方快捷回复栏 */
.quick-replies-top {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.quick-replies-top::-webkit-scrollbar { display: none; }

.quick-reply-top-btn {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--primary);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.quick-reply-top-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ===== 语音通话弹窗（豆包风格） ===== */
.voice-call-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.voice-call-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #7a7565 0%, #5c574a 50%, #7a7565 100%);
  background-size: 200% 200%;
  animation: vcBgShift 8s ease-in-out infinite;
}

@keyframes vcBgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.voice-call-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 20px 14px;
  color: #fff;
  overflow: hidden;
}

/* 红色挂断按钮（大圆形，底部居中，豆包同款 SVG 电话图标） */
.vc-hangup-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 6px 24px rgba(207, 19, 34, 0.5);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.vc-hangup-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 32px rgba(207, 19, 34, 0.7);
}

.vc-hangup-btn:active {
  transform: scale(0.92);
}

/* SVG图标本身即为挂断状态，无需旋转 */
.vc-hangup-icon {
  display: block;
}

.vc-header {
  text-align: center;
  margin-top: 0;
}

.vc-avatar-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
}

.vc-avatar {
  position: absolute;
  top: 26px; left: 26px;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 3;
  overflow: hidden;
}
.vc-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

/* 说话状态光圈：AI说话=绿色，用户说话=蓝色 */
.vc-avatar-wrap.ai-speaking .vc-avatar {
  box-shadow: 0 0 0 4px rgba(72, 187, 120, 0.6), 0 0 28px rgba(72, 187, 120, 0.6);
}

.vc-avatar-wrap.user-speaking .vc-avatar {
  box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.6), 0 0 28px rgba(66, 153, 225, 0.6);
}

.vc-avatar-pulse {
  position: absolute;
  top: 0; left: 0;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  opacity: 0;
  z-index: 1;
}

.vc-active .vc-avatar-pulse {
  animation: vcPulse 2s infinite;
}

.vc-active .vc-avatar-pulse.pulse-2 { animation-delay: 0.6s; }
.vc-active .vc-avatar-pulse.pulse-3 { animation-delay: 1.2s; }

@keyframes vcPulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.vc-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.vc-subtitle {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
}

.vc-status {
  text-align: center;
  margin: 14px 0 8px;
}

.vc-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 60px;
  margin-bottom: 16px;
}

.vc-wave span {
  display: inline-block;
  width: 4px;
  height: 20px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  transition: height 0.15s;
}

.vc-active .vc-wave span {
  animation: vcWaveAnim 1.2s ease-in-out infinite;
}

.vc-active .vc-wave span:nth-child(odd) { animation-delay: 0.2s; }
.vc-active .vc-wave span:nth-child(3n) { animation-delay: 0.4s; }
.vc-active .vc-wave span:nth-child(5n) { animation-delay: 0.6s; }

@keyframes vcWaveAnim {
  0%, 100% { height: 12px; }
  50% { height: 50px; }
}

/* 实时音频波形可视化（Web Audio API 驱动） */
.vc-audio-visualizer {
  width: 100%;
  max-width: 320px;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 4px 0;
}

.vc-visualizer-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
}

.vc-visualizer-bars span {
  flex: 1;
  min-width: 3px;
  max-width: 8px;
  height: 12%;
  min-height: 6px;
  background: linear-gradient(180deg, rgba(129, 200, 255, 0.9) 0%, rgba(66, 153, 225, 0.5) 100%);
  border-radius: 3px;
  transition: height 0.08s ease-out;
}

/* 空闲时的波形动画（保持波形动画效果，JS驱动后自动禁用） */
.vc-active .vc-visualizer-bars span {
  animation: vcVisualizerIdle 1.4s ease-in-out infinite;
}

.vc-active .vc-visualizer-bars span:nth-child(odd) { animation-delay: 0.15s; }
.vc-active .vc-visualizer-bars span:nth-child(3n) { animation-delay: 0.3s; }
.vc-active .vc-visualizer-bars span:nth-child(5n) { animation-delay: 0.45s; }

@keyframes vcVisualizerIdle {
  0%, 100% { height: 15%; }
  50% { height: 50%; }
}

.vc-audio-visualizer.speaking .vc-visualizer-bars span {
  background: linear-gradient(180deg, rgba(104, 211, 145, 0.9) 0%, rgba(72, 187, 120, 0.5) 100%);
}

.vc-audio-visualizer.thinking .vc-visualizer-bars span {
  background: linear-gradient(180deg, rgba(246, 224, 137, 0.9) 0%, rgba(236, 201, 75, 0.5) 100%);
}

.vc-audio-visualizer.muted .vc-visualizer-bars span {
  background: rgba(255,255,255,0.2);
  height: 8% !important;
}

.vc-timer {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
  letter-spacing: 1px;
}

.vc-hint {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  min-height: 18px;
  margin-top: 4px;
}

.vc-transcript {
  flex: 1 1 auto;
  width: 100%;
  max-width: 500px;
  max-height: 30vh;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.vc-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: vcMsgIn 0.3s ease-out;
}

@keyframes vcMsgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.vc-msg-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  overflow: hidden;
}

/* 通话对话记录中的 AI 头像（与客服头像一致，圆形裁切） */
.vc-msg-avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.vc-msg-bubble {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 16px;
  border-radius: 14px;
  max-width: 78%;
  font-size: 17px;
  line-height: 1.6;
  word-break: break-word;
}

.vc-msg.user .vc-msg-bubble {
  background: rgba(66, 153, 225, 0.3);
  border-color: rgba(66, 153, 225, 0.5);
}

.vc-msg.assistant.speaking .vc-msg-bubble {
  background: rgba(72, 187, 120, 0.2);
  border-color: rgba(72, 187, 120, 0.4);
  animation: vcSpeakPulse 1.5s ease-in-out infinite;
}

@keyframes vcSpeakPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(72, 187, 120, 0); }
}

.vc-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 100%;
  max-width: 400px;
  padding-bottom: 8px;
  flex-shrink: 0;
}

.vc-mute-btn, .vc-keyboard-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.vc-mute-btn:hover, .vc-keyboard-btn:hover {
  background: rgba(255,255,255,0.2);
}

.vc-mute-btn.muted {
  background: rgba(245, 101, 101, 0.4);
  border-color: rgba(245, 101, 101, 0.6);
}

/* 通话状态指示器（不再是按钮，纯状态显示） */
.vc-talk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  margin: 6px 0;
  transition: all 0.2s;
}

.vc-talk-btn.speaking {
  background: rgba(72, 187, 120, 0.25);
  border-color: rgba(72, 187, 120, 0.5);
}

.vc-talk-btn.thinking {
  background: rgba(236, 201, 75, 0.25);
  border-color: rgba(236, 201, 75, 0.5);
}

.vc-talk-btn.muted {
  background: rgba(245, 101, 101, 0.25);
  border-color: rgba(245, 101, 101, 0.5);
}

.vc-talk-icon { font-size: 18px; }
.vc-talk-label { font-size: 16px; font-weight: 600; }

/* ===== 企业微信弹窗 ===== */

.wechat-header {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important;
}

.wechat-qrcode-area {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
}

.wechat-qr-placeholder {
  width: 140px; height: 140px;
  background: #f7fafc;
  border: 2px dashed #cbd5e0;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.qr-pattern {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  width: 80px;
}

.qr-pattern span {
  width: 14px; height: 14px;
  background: #2d3748;
  border-radius: 2px;
}

.qr-pattern span:nth-child(odd) { background: #2d3748; }
.qr-pattern span:nth-child(even) { background: #a0aec0; }
.qr-pattern span:nth-child(3n) { background: #1a202c; }
.qr-pattern span:nth-child(5n) { background: #cbd5e0; }
.qr-pattern span:nth-child(7n) { background: #4a5568; }

.wechat-qr-placeholder p {
  font-size: 11px;
  color: var(--text-muted);
}

.wechat-info {
  flex: 1;
}

.wechat-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.wechat-id {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.wechat-tip {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

.wechat-groups {
  margin-bottom: 16px;
}

.wechat-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.wechat-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f0fff4;
  border: 1px solid #9ae6b4;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: all 0.2s;
}

.wechat-group-item:hover {
  background: #c6f6d5;
  transform: translateX(4px);
}

.wg-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.wg-info { flex: 1; }

.wg-name {
  font-size: 13px;
  font-weight: 600;
  color: #22543d;
}

.wg-desc {
  font-size: 11px;
  color: #38a169;
  margin-top: 1px;
}

/* ===== 人工客服消息样式 ===== */

.msg.human_agent .avatar {
  background: #38a169;
  color: #ffffff;
}

.msg.human_agent .bubble {
  background: #f0fff4;
  border: 1px solid #9ae6b4;
  border-top-left-radius: var(--radius-xs);
  color: #1d5fbf; /* 恢复蓝色文字（2026-09-02 用户要求：与 assistant 统一回原版蓝色 #1d5fbf） */
}

/* 移除重复 ::before 标签（标签改由 chat.js 中 nameTag 渲染），消除"人工客服"+客服姓名"双标签视觉混乱 */
.msg.human_agent .bubble::before { content: none; }

/* 电话拨打引导弹窗 */
.call-guide-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.call-guide-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: msgIn 0.3s ease;
  overflow: hidden;
  max-height: 90vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 弹窗内容可滚动：多个二维码 + 提示文案超高时不再裁切底部内容 */
.call-guide-header { flex-shrink: 0; }
.call-guide-body {
  padding: 20px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}

.call-guide-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
}

.call-guide-icon { font-size: 24px; }
.call-guide-header h3 { font-size: 16px; font-weight: 600; flex: 1; }

.call-guide-close {
  width: 36px; height: 36px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.call-guide-close:hover { background: rgba(255,255,255,0.35); transform: scale(1.08); }

/* 大尺寸的"返回继续对话"按钮（弹窗底部，用户一眼能看到） */
.call-guide-back-btn {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  padding: 14px;
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 10px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.call-guide-back-btn:hover {
  background: var(--primary);
  color: #fff;
}

.call-guide-tip {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.call-numbers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.call-number-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all 0.2s;
  background: var(--bg-card);
}

.call-number-item:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow);
  transform: translateX(4px);
}

.call-number-item.primary {
  background: #f3efe6;
  border-color: #e0d6c4;
}

.call-number-item.emergency {
  background: #fff5f5;
  border-color: #fed7d7;
}

.call-number-item .cn-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-chat);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.call-number-item.primary .cn-icon { background: #e0d6c4; }
.call-number-item.emergency .cn-icon { background: #fed7d7; }

.call-number-item .cn-info { flex: 1; }

.call-number-item .cn-label {
  font-size: 12px;
  color: var(--text-muted);
}

.call-number-item .cn-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}

.call-number-item .cn-action {
  display: none; /* 默认隐藏：电脑端不支持拨号，无需"拨打"按钮 */
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  padding: 6px 16px;
  border: 1px solid var(--success);
  border-radius: 20px;
  transition: all 0.2s;
}

.call-number-item:hover .cn-action {
  background: var(--success);
  color: #fff;
}

.call-guide-notice {
  background: #fef5e7;
  border: 1px solid #fbd38d;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: #744210;
  line-height: 1.5;
}

/* 提示文案自适应换行：任何屏宽不截断、不横向溢出 */
.call-guide-notice span {
  display: block;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* 移动端二维码弹窗适配（置于区块末尾，确保覆盖基础规则） */
@media (max-width: 480px) {
  .call-guide-card { max-width: 94vw; max-height: 94vh; }
  .call-guide-body { padding: 14px 10px; }
  .call-guide-header { padding: 12px 14px; }
  .call-guide-header h3 { font-size: 15px; }
  .call-guide-notice { padding: 10px 12px; font-size: 12px; }
  .call-guide-overlay { padding: 8px; }
  .call-guide-back-btn { padding: 12px; font-size: 15px; margin: 12px 0 6px; }
  .call-numbers { gap: 8px; }
  /* 留言弹窗窄屏：缩小内边距与按钮尺寸，避免与录音卡重叠 */
  .leave-msg-textarea { min-height: 88px; padding: 10px 12px; font-size: 14px; }
  .leave-msg-contact { padding: 10px 12px; font-size: 14px; margin-top: 4px; margin-bottom: 12px; }
  .leave-msg-submit { padding: 11px; font-size: 14px; }
  .leave-voice-recorder { padding: 20px 10px; margin-bottom: 18px; }
  .leave-voice-btn { width: 78px; height: 78px; }
  .leave-voice-btn .lv-icon { font-size: 26px; }
  .leave-voice-status { font-size: 13px; }
  .leave-voice-tip { font-size: 11px; }
}

/* ==================== 知识库管理 ==================== */
.kb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.kb-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.kb-add-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.kb-add-btn:hover {
  background: var(--primary-dark, #0d2944);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,58,92,0.3);
}

.kb-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.kb-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}

.kb-search:focus {
  border-color: var(--primary);
}

.kb-category-filter {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  outline: none;
}

.kb-count {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.kb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.kb-table thead th {
  background: var(--bg-chat);
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.kb-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.kb-table tbody tr:hover {
  background: var(--bg-chat);
}

.faq-id {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.faq-category-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #f3efe6;
  color: #3182ce;
  white-space: nowrap;
}

.faq-question-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faq-keywords-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}

.faq-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.faq-edit-btn, .faq-delete-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.faq-edit-btn {
  background: #f3efe6;
  color: #3182ce;
}

.faq-edit-btn:hover {
  background: #3182ce;
  color: #fff;
}

.faq-delete-btn {
  background: #fff5f5;
  color: #c4364a;
}

.faq-delete-btn:hover {
  background: #c4364a;
  color: #fff;
}

/* FAQ编辑弹窗 */
.faq-editor-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.faq-editor-modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.faq-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.faq-editor-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.faq-editor-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.faq-editor-close:hover {
  background: var(--bg-chat);
  color: var(--text);
}

.faq-editor-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.faq-form-group {
  margin-bottom: 18px;
}

.faq-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.faq-form-group .req {
  color: #c4364a;
}

.faq-form-group input,
.faq-form-group textarea,
.faq-form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}

.faq-form-group input:focus,
.faq-form-group textarea:focus,
.faq-form-group select:focus {
  border-color: var(--primary);
}

.faq-form-group textarea {
  resize: vertical;
  line-height: 1.6;
}

.faq-form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.faq-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.faq-btn-cancel, .faq-btn-save {
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.faq-btn-cancel {
  background: var(--bg-chat);
  color: var(--text-secondary);
}

.faq-btn-cancel:hover {
  background: var(--border);
}

.faq-btn-save {
  background: var(--primary);
  color: #fff;
}

.faq-btn-save:hover {
  background: var(--primary-dark, #0d2944);
}

/* 导航链接active状态 */
.nav-link.active {
  color: var(--primary);
  font-weight: 600;
}

/* 响应式 */
@media (max-width: 768px) {
  .charts-grid { grid-template-columns: 1fr; }
  .admin-container { padding: 16px; }
  .admin-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .admin-header .nav { width: 100%; overflow-x: auto; }
  .detail-overlay { width: 100vw; }
  .conv-table { font-size: 12px; }
  .conv-table th, .conv-table td { padding: 8px; }
  .kb-table { font-size: 12px; }
  .kb-table th, .kb-table td { padding: 8px; }
}

/* API Key 管理页面样式 */
.faq-form-group select {
  cursor: pointer;
  appearance: auto;
}

/* ==================== 4大服务模块导航卡片 ==================== */
.module-nav-card {
  margin: 12px 16px;
  padding: 14px;
  background: linear-gradient(135deg, #faf8f3 0%, #f0ebe0 100%);
  border: 1px solid #ddd5c6;
  border-radius: 16px;
  animation: msgFadeIn 0.3s ease;
}

.module-nav-title {
  font-size: 12px;
  color: #7a7062;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.module-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.module-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px 10px;
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}

.module-nav-item:active {
  transform: scale(0.95);
}

.module-nav-item:hover {
  box-shadow: 0 4px 12px rgba(122,117,101, 0.12);
}

.module-nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 6px;
}

.module-nav-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.module-nav-desc {
  font-size: 10px;
  color: #9a8f7a;
  line-height: 1.3;
}

@media (max-width: 380px) {
  .module-nav-grid { grid-template-columns: repeat(2, 1fr); }
  /* 极窄屏留言弹窗：进一步压缩录音卡内边距与按钮尺寸 */
  .leave-voice-recorder { padding: 16px 8px; margin-bottom: 16px; }
  .leave-voice-btn { width: 70px; height: 70px; }
  .leave-voice-btn .lv-icon { font-size: 24px; }
  .leave-voice-btn .lv-label { font-size: 10px; }
  .leave-voice-status { font-size: 12px; margin-top: 10px; }
  .leave-voice-tip { font-size: 11px; }
  .leave-msg-textarea { min-height: 80px; }
  .leave-msg-contact { margin-bottom: 10px; }
}

/* ===== 管理后台登录遮罩 ===== */
.login-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #1a365d 0%, #2a4a7f 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.login-overlay[style*="none"] { display: none !important; }
.login-box {
  background: #fff; border-radius: 16px; padding: 40px 36px;
  width: 360px; max-width: 90vw; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-logo { margin-bottom: 12px; }
.login-logo-img { width: 64px; height: 64px; border-radius: 14px; }
.login-box h2 { font-size: 20px; color: #1a365d; margin: 8px 0 4px; }
.login-subtitle { font-size: 13px; color: #888; margin: 0 0 24px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { text-align: left; }
.login-field label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500; }
.login-field input {
  width: 100%; box-sizing: border-box; padding: 11px 14px;
  border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 15px;
  transition: border-color .2s;
}
.login-field input:focus { outline: none; border-color: #3182ce; }
.login-error {
  background: #fff5f5; color: #e53e3e; padding: 8px 12px;
  border-radius: 6px; font-size: 13px; border: 1px solid #fed7d7;
}
.login-btn {
  margin-top: 6px; padding: 12px; background: #3182ce; color: #fff;
  border: none; border-radius: 8px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.login-btn:hover { background: #2c5aa0; }
.login-btn:disabled { background: #a0c4e8; cursor: not-allowed; }
.login-hint { font-size: 12px; color: #aaa; margin: 16px 0 0; }
.nav-user {
  display: inline-block; padding: 4px 12px; font-size: 13px;
  color: #4a5568; background: #edf2f7; border-radius: 16px; margin: 0 8px;
}

/* ===== 官网嵌入模式（?embed=1，在 iframe 内运行）=====
   适老化设计：字号整体加大、触控目标 ≥36px，确保老年用户清晰可读、易于点击 */
html.embed-mode, html.embed-mode body { height: 100%; margin: 0; }
html.embed-mode body { background: #ffffff; }   /* 嵌入模式：去掉桌面端暖色 gradient，避免 chat-page 上下 18px 留白处透出米黄色 */
html.embed-mode .chat-page {
  max-width: 100%;
  border-radius: 16px;       /* embed 模式：与外层 .xn-widget iframe 16px 圆角对齐，避免双层圆角错位 */
  margin: 0;                 /* 覆盖桌面端的 18px 上下留白，让 chat-page 撑满 iframe */
  height: 100%;              /* 覆盖桌面端的 calc(100vh - 36px)，消除顶部/底部灰色横条 */
  box-shadow: none;          /* 外层 .xn-widget 已有阴影，不再叠加 */
}
html.embed-mode .chat-input-area {
  border-radius: 0 0 16px 16px;  /* embed 模式：与 chat-page 的 16px 圆角下沿一致，确保三个胶囊按钮不触碰 .xn-widget 外层圆角切线 */
}
html.embed-mode .chat-header { padding: 12px 92px 12px 14px; gap: 10px; } /* 右侧 padding 加大，给外层 xn-widget-max/close 留出空间（38+8+38+8=92px） */
html.embed-mode .chat-header h1 { font-size: 19px; letter-spacing: 3px; }
html.embed-mode .chat-header p { font-size: 13px; }
  /* 嵌入模式：与消息气泡头像统一：40px 圆形 */
html.embed-mode .chat-header .logo { width: 40px; height: 40px; border-radius: 50%; }
html.embed-mode .header-badge { font-size: 12px; padding: 4px 10px; }
html.embed-mode .header-icon-btn { width: 36px; height: 36px; font-size: 17px; }
html.embed-mode .chat-messages { padding: 12px 14px 8px; }
html.embed-mode .msg .bubble { font-size: 17px; line-height: 1.6; }
html.embed-mode .msg .meta { font-size: 12px; }
  /* 嵌入模式：消息气泡头像=40px 与头部 logo 保持一致 */
html.embed-mode .msg .avatar { width: 40px; height: 40px; font-size: 15px; padding: 3px; }
html.embed-mode .voice-mode-area { padding: 8px 12px; }
html.embed-mode .press-to-talk-btn { padding: 13px 14px; }
html.embed-mode .press-to-talk-btn .ptt-text { font-size: 16px; }
html.embed-mode .vc-entry-btn { min-width: 88px; padding: 8px 12px; font-size: 15px; }
html.embed-mode .input-hint-text { font-size: 12px; }
html.embed-mode .input-hint-links {
  gap: 10px;               /* embed 模式：三按钮间距——放大按钮后适度收紧，保持总宽不溢出 */
  padding: 0 6px;          /* 左右各 6px 安全距离，避免两侧按钮触碰 chat-page 圆角切线 */
}
html.embed-mode .input-hint-links a {
  font-size: 15px;         /* 放大文字（13.5→15），提升嵌入窗口内可读性 */
  padding: 8px 15px;       /* 放大点击区域（6→8 上下、16→15 左右），整按钮高度≈40px 达适老化触控标准 */
  gap: 6px;
  letter-spacing: 0.3px;
  margin: 0;               /* 由 input-hint-links 的 gap 控制按钮间距，不再额外设置外边距 */
}
html.embed-mode .input-hint-links .hint-ico { font-size: 18px; }  /* 图标放大（15→18），与 15px 文字比例协调 */
/* 极窄嵌入窗口（<380px，widget 最小 340px）回退：等比缩小防溢出换行 */
@media (max-width: 379px) {
  html.embed-mode .input-hint-links { gap: 6px; padding: 0 2px; }
  html.embed-mode .input-hint-links a { font-size: 13.5px; padding: 7px 11px; gap: 5px; letter-spacing: 0; }
  html.embed-mode .input-hint-links .hint-ico { font-size: 16px; }
}
/* 快捷回复按钮：加大字号与点击区域 */
html.embed-mode .quick-reply-btn { font-size: 15px; padding: 9px 16px; }
html.embed-mode .voice-call-overlay { background: rgba(0,0,0,.85); }

/* ===== embed 模式弹窗适配：iframe 内高度受限，确保弹窗不超出可视区域 ===== */
html.embed-mode .call-guide-overlay { padding: 8px; }
html.embed-mode .call-guide-card { max-width: 100%; max-height: 96vh; }
html.embed-mode .call-guide-body { padding: 14px 16px; }
html.embed-mode .call-guide-header { padding: 12px 16px; }
html.embed-mode .call-guide-header h3 { font-size: 15px; }
html.embed-mode .call-guide-back-btn { padding: 12px; font-size: 15px; margin: 12px 0 6px; }

/* ===== 附件卡片（在线预览 + 下载）===== */
.attachment-group { display: flex; flex-direction: column; gap: 8px; }
.file-card {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px;
  min-width: 200px;
  max-width: 280px;
}
.file-card-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  display: block;
}
.file-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.file-card-ico { font-size: 18px; }
.file-card-name { font-size: 13px; font-weight: 600; word-break: break-all; flex: 1; min-width: 100px; }
.file-card-size { font-size: 11px; opacity: 0.65; white-space: nowrap; }
.file-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; opacity: 0.8; }
.file-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.file-card-btn {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #2563eb;
  color: #fff !important;
  font-size: 12px;
  text-decoration: none !important;
  cursor: pointer;
}
.file-card-btn:hover { background: #1d4ed8; }

/* ===== 留言弹窗 ===== */
.leave-msg-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: var(--bg-chat);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  margin-bottom: 10px;
  outline: none;
  transition: box-shadow 0.2s, background 0.2s;
}
.leave-msg-textarea:focus {
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--primary-light);
}

.leave-msg-contact {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: none;
  border-radius: 12px;
  background: var(--bg-chat);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
  outline: none;
  transition: box-shadow 0.2s, background 0.2s;
}
.leave-msg-contact:focus {
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--primary-light);
}

/* 留言面板（文字/语音）显式块级，避免相邻区域在小屏下挤压 */
.leave-msg-panel {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
/* 录音器卡片与下方联系方式之间留出清晰的视觉间距 */
.leave-voice-recorder {
  margin-bottom: 18px;
  overflow: hidden;
}
/* 录音后的预览音频与下方联系方式之间也保留间距 */
.leave-voice-preview {
  margin-top: 14px;
  margin-bottom: 14px;
}
/* 联系方式与上方内容之间补一点呼吸空间 */
.leave-msg-contact {
  margin-top: 4px;
}

.leave-msg-submit {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #7a7565 0%, #918c76 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.leave-msg-submit:hover { background: var(--primary-dark); }
.leave-msg-submit:disabled { background: var(--text-muted); cursor: not-allowed; }

/* ===== 留言标签页 ===== */
.leave-msg-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.leave-msg-tab {
  flex: 1;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.leave-msg-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.leave-msg-tab:hover:not(.active) {
  background: var(--primary-bg);
  border-color: var(--primary-light);
}

/* ===== 语音留言录音器 ===== */
.leave-voice-recorder {
  text-align: center;
  padding: 24px 12px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: #fafaf7;
}
.leave-voice-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.leave-voice-btn:active, .leave-voice-btn.recording {
  transform: scale(0.95);
  background: linear-gradient(135deg, #d63031 0%, #e53e3e 100%);
  border-color: #d63031;
  box-shadow: 0 0 0 8px rgba(229,62,62,0.15);
  animation: leaveRecPulse 1.2s ease-in-out infinite;
}
@keyframes leaveRecPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(229,62,62,0.15); }
  50% { box-shadow: 0 0 0 16px rgba(229,62,62,0); }
}
.leave-voice-btn .lv-icon { font-size: 30px; }
.leave-voice-btn .lv-label { font-size: 11px; font-weight: 600; }
.leave-voice-status {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-secondary);
}
.leave-voice-tip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.leave-voice-preview {
  width: 100%;
  margin-top: 14px;
  border-radius: 8px;
}

/* ===== AI 回复逐字流式输出（2026-09-20）=====
   只作用于流式期间那个临时占位气泡：AI 一边生成一边往里写字时，尾部跟一个闪烁光标，
   表示「还在输出」。生成结束后占位气泡会被正式消息节点替换掉，
   因此最终留在页面上的 DOM 与样式跟改动前完全一致。 */
.msg-streaming .bubble::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--primary-light, #918c76);
  animation: streamCaret 1s steps(2, start) infinite;
}
@keyframes streamCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-streaming .bubble::after { animation: none; }
}