/* =====================================================================
 * 兼容层说明（IE）：
 *  1) IE 不支持 CSS 变量 var()，凡是用了变量的地方都「先写死值、再写 var()」，
 *     IE 取前一条（合法），现代浏览器覆盖为后一条。
 *  2) IE10/11 不支持 CSS Grid，全部改用 flex（IE11 原生支持 flex）。
 *  3) IE 不支持 flex 的 gap，改用子元素 margin 制造间距。
 *  4) IE 不支持 inset 简写，补 top/right/bottom/left。
 *  目标：IE11（IE10 通过 -ms- 前缀尽量兼顾）
 * ===================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f5f7fa; --panel: #fff; --primary: #2f6fed; --primary-d: #2456c8;
  --robot: #eef3ff; --agent: #fff4e6; --customer: #f1f1f1; --text: #1f2733;
  --muted: #8a94a6; --line: #e6eaf0; --ok: #18a058; --warn: #f0a020; --danger: #d03050;
}
body { font-family: "Microsoft YaHei", "Segoe UI", -apple-system, sans-serif; background: #f5f7fa; background: var(--bg); color: #1f2733; color: var(--text); }
button { font-family: inherit; cursor: pointer; border: none; border-radius: 6px; padding: 8px 14px; background: #2f6fed; background: var(--primary); color: #fff; font-size: 14px; }
button:hover { background: #2456c8; background: var(--primary-d); }
button.ghost { background: #fff; color: #2f6fed; color: var(--primary); border: 1px solid #2f6fed; border: 1px solid var(--primary); }
button.danger { background: #d03050; background: var(--danger); }
button:disabled, button:disabled:hover { opacity: .5; cursor: not-allowed; }
input, select, textarea { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #e6eaf0; border: 1px solid var(--line); border-radius: 6px; width: 100%; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #2f6fed; border-color: var(--primary); }
/* 勾选框/单选框不参与上面的 width:100% 铺满：否则会被拉伸成整格宽，把表头「全选」挤出单元格 */
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; border: 0; border-radius: 0; margin: 0 4px 0 0; vertical-align: middle; }
a { color: #2f6fed; color: var(--primary); }
/* 顶栏允许换行：IE 窗口缩窄时标题/用户名自动折行，不再横向溢出"内容不见了" */
.topbar { background: #2f6fed; background: var(--primary); color: #fff; padding: 12px 20px;
  display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; }
.topbar h1 { font-size: 16px; font-weight: 600; }
.topbar .who { font-size: 13px; opacity: .9; }
/* 卡片内横向溢出改为卡片内滚动：窄窗口下宽表格不再把整页撑丢 */
.card { background: #fff; background: var(--panel); border: 1px solid #e6eaf0; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
.wrap { max-width: 1200px; margin: 18px auto; padding: 0 16px; }
.card h3 { font-size: 15px; margin-bottom: 12px; }

/* 两列 / 三列 / KPI：原用 Grid，IE 改 flex。
   IE11 对「flex 简写 + 带单位 basis」解析不可靠，一律补长手写属性（grow/shrink/basis）。 */
.grid2 { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -8px; }
.grid2 > * { -ms-flex: 1 1 300px; flex-grow: 1; flex-shrink: 1; flex-basis: 300px; margin: 0 8px 16px; min-width: 260px; }
.grid3 { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -6px; }
.grid3 > * { -ms-flex: 1 1 200px; flex-grow: 1; flex-shrink: 1; flex-basis: 200px; margin: 0 6px 12px; min-width: 180px; }
.kpi-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -6px 16px; }
.kpi-row > * { -ms-flex: 1 1 160px; flex-grow: 1; flex-shrink: 1; flex-basis: 160px; margin: 0 6px 12px; min-width: 140px; }

.label { font-size: 12px; color: #8a94a6; color: var(--muted); margin: 8px 0 4px; }
/* 后台配置表单里需要一眼看到的字段标签（如「报价尾注话术」）；必须定义在 .label 之后才能覆盖其颜色 */
.label-hl { color: #cf1322; font-weight: 700; }
/* 原用 flex gap:8px，IE 不支持 flex gap，改用子元素 margin */
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; }
.row > * { margin: 0 8px 8px 0; }

/* ---------------- 通用小件（此前页面里用了但没定义，导致提示看不清、区块没有分隔线） ----------------
   全部用字面值 + var() 回退，不用 Grid / 不用 flex gap，保证 IE11 也能渲染 */
/* 分区之间的横向分隔线 */
.sep { height: 1px; background: #e6eaf0; background: var(--line); margin: 18px 0 10px; overflow: hidden; }
/* 说明文字：次要信息，字号小、颜色淡 */
.hint { font-size: 12px; color: #8a94a6; color: var(--muted); line-height: 1.7; margin: 6px 0 8px; }
/* 操作结果反馈：必须一眼能分辨成功/失败（后台很多操作只用文字反馈） */
.oktext { color: #0a7d3c !important; }
.badtext { color: #d03050 !important; }
.warn { color: #c47f17 !important; }
/* 统计用的小圆角标签 */
.info-row { margin: 10px 0 2px; }
.pill { display: inline-block; padding: 3px 10px; margin: 0 6px 6px 0; border-radius: 12px;
        background: #eef3ff; border: 1px solid #dbe4f5; color: #2c4a7c; font-size: 12px; line-height: 1.6; }
.pill.warn { background: #fff6e6; border-color: #f3d9a8; color: #c47f17; }
/* 别名标签（AI 索引页）：带删除 ×、手工标记「手」 */
.chip { display: inline-block; padding: 2px 8px; margin: 0 6px 6px 0; border-radius: 10px;
        background: #f2f5fa; border: 1px solid #dde4ee; color: #33415c; font-size: 12px; line-height: 1.7; }
.chip i { font-style: normal; color: #c47f17; font-weight: 700; margin-left: 4px; }
.chip a { color: #9aa5b6; text-decoration: none; margin-left: 6px; font-weight: 700; cursor: pointer; }
.chip a:hover { color: #d03050; }
.chip.muted { background: #f4f4f4; border-color: #e6e6e6; color: #9aa5b6; }
/* 刚手工加入的那一条：高亮，让用户一眼看到"加上了" */
.chip-new { background: #fff6d6; border-color: #f0c36d; box-shadow: 0 0 0 2px #ffeeb8; }
/* 试跑结果框 */
.drybox { margin-top: 10px; padding: 10px 12px; background: #f7f9fc; border: 1px solid #e6eaf0;
          border-radius: 8px; color: #33415c; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
/* 表格里的勾选框（产品批量删除用） */
.ckRow { width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
/* 垂直堆叠列表（会话列表等）：IE11 对 flex column + wrap 支持极差会整块塌陷，直接用块级最稳 */
.stack { display: block; }
.tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #eef; color: #2f6fed; color: var(--primary); margin: 2px; }
.tag.ok { background: #e7f7ee; color: #18a058; color: var(--ok); }
.tag.warn { background: #fdf3e2; color: #f0a020; color: var(--warn); }
.tag.danger { background: #fdeaee; color: #d03050; color: var(--danger); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border: 1px solid #e6eaf0; border: 1px solid var(--line); padding: 8px; text-align: left; }
th { background: #fafbfc; font-weight: 600; }
.empty { color: #8a94a6; color: var(--muted); padding: 20px; text-align: center; }

/* 聊天 */
.chat { display: -ms-flexbox; display: flex; height: calc(100vh - 130px); }
.chat .side { width: 280px; border-right: 1px solid #e6eaf0; border-right: 1px solid var(--line); overflow: auto; background: #fff; }
.chat .main { -ms-flex: 1; flex: 1; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; }
.conv-item { padding: 10px 12px; border-bottom: 1px solid #e6eaf0; border-bottom: 1px solid var(--line); cursor: pointer;
  display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; }
.conv-item .conv-item-body { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.conv-item .ckConv { margin: 2px 8px 0 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }
/* 会话列表标题栏（含「清空」）+ 勾选控件行（全选 / 删除选中） */
.chat .side-head { padding: 10px 12px; font-weight: 700; border-bottom: 1px solid #e6eaf0; border-bottom: 1px solid var(--line);
  display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
.conv-ctrl { padding: 8px 12px; border-bottom: 1px solid #e6eaf0; border-bottom: 1px solid var(--line); font-size: 12px; color: #8a94a6; color: var(--muted);
  display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
.conv-ctrl label { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin-right: auto; cursor: pointer; }
/* 会话详情顶部的「客户信息条」：访问/咨询次数、首末来访、留资状态 */
.cust-info { padding: 8px 14px; font-size: 12px; line-height: 1.7; color: #8a94a6; color: var(--muted); background: #f7f9fc; border-bottom: 1px solid #e6eaf0; border-bottom: 1px solid var(--line); }
.conv-ctrl button { padding: 2px 10px; font-size: 12px; }
.conv-item:hover, .conv-item.active { background: #f0f5ff; }
.conv-item .t { font-size: 13px; font-weight: 600;
  display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: baseline; align-items: baseline; }
.conv-item .t .tname { -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .t .when { -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 8px; font-size: 11px; font-weight: 400; color: #8a94a6; color: var(--muted); }
.conv-item .s { font-size: 12px; color: #8a94a6; color: var(--muted); }
.msgs { -ms-flex: 1; flex: 1; overflow: auto; padding: 16px; background: #f7f9fc; }
.bubble { max-width: 70%; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; white-space: pre-wrap; line-height: 1.5; }
.bubble.customer { background: #f1f1f1; background: var(--customer); margin-left: auto; }
.bubble.robot { background: #eef3ff; background: var(--robot); }
.bubble.welcome { background: #eafaf1; border: 1px solid #b6e3c9; max-width: 90%; }
.bubble.agent { background: #fff4e6; background: var(--agent); border: 1px solid #f3d9a8; }
.bubble.system { background: transparent; color: #8a94a6; color: var(--muted); font-size: 12px; text-align: center; }
.bubble .who { font-size: 11px; color: #8a94a6; color: var(--muted); margin-bottom: 2px; }
/* 气泡内正文 + 时间戳（双方聊天信息里放时间） */
.bubble-text { line-height: 1.5; }
/* 报价尾注话术：聊天里醒目显示（不依赖 CSS 变量，IE 安全） */
.bubble .note { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #f0c9a0; color: #cf1322; font-weight: 700; }
.bubble .ts { font-size: 11px; color: #8a94a6; color: var(--muted); margin-top: 4px; opacity: .85; }
.bubble.customer .ts { text-align: right; }
.bubble.robot .ts, .bubble.agent .ts { text-align: left; }
/* 公司资料图（机器人被问地址/要图片/加微信时直接发）。
   IE11 不支持 object-fit，所以只锁宽度、高度自适应，避免图片被压扁。 */
.bubble-img { margin-top: 6px; }
.bubble-img img { display: block; width: 200px; max-width: 100%; height: auto; border: 1px solid #e6eaf0; border-radius: 8px; background: #fff; cursor: pointer; }
/* 「正在查询」占位气泡：AI 辅助检索时最长要等几秒，给客户一个动静，避免以为没反应。
   刻意不依赖 CSS 变量，动画在 IE10/11 可跑（无前缀 @keyframes / animation） */
.bubble.typing { background: #eef3ff; background: var(--robot); max-width: 60%; color: #4a5568; }
.bubble.typing .dot { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #7b8aa8; vertical-align: middle; animation: typingDot 1.2s infinite ease-in-out; }
.bubble.typing .dot.d2 { animation-delay: .18s; }
.bubble.typing .dot.d3 { animation-delay: .36s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); -ms-transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); -ms-transform: translateY(-5px); opacity: 1; }
}
.composer { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: start; align-items: flex-start; padding: 12px; border-top: 1px solid #e6eaf0; border-top: 1px solid var(--line); background: #fff; }
.composer textarea { resize: none; height: 44px; width: auto; min-width: 160px; -ms-flex: 1 1 auto; flex-grow: 1; flex-shrink: 1; flex-basis: auto; margin: 0 8px 0 0; }
.composer button { -ms-flex: 0 0 auto; flex: 0 0 auto; }

/* 登录 */
.login { max-width: 360px; margin: 10vh auto; }
.hidden { display: none !important; }
.modal-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(0,0,0,.4);
  display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 10px; padding: 22px; width: 360px; }
.modal h3 { margin-bottom: 12px; }
.stat { background: #fff; border: 1px solid #e6eaf0; border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-align: center; }
.stat .n { font-size: 26px; font-weight: 700; color: #2f6fed; color: var(--primary); }
.stat .l { font-size: 12px; color: #8a94a6; color: var(--muted); margin-top: 4px; }

/* ===================== 客户访问页 · 手机端 H5（全屏聊天） =====================
   设计：body 纵向 flex 占满视口；cust-app 为聊天容器（顶栏/提示/消息/输入 四段纵向堆叠）。
   - 移动端：cust-app 顶到屏幕边、消息区满屏、输入栏贴底（flex:0 0 auto 贴底 + 100dvh 自动避让地址栏/键盘）。
   - 桌面端：cust-app 居中 max-width 780，看起来也是个聊天窗，IE11 同样兼容（纯 flex + vh，无 Grid / 无 CSS 变量 / 无 gap）。
   - 全部用「先写死值、再写 var()」双写法，保证 IE11 取前一条（var 那行无效时退回字面值）。 */
html, body { height: 100%; }
body.cust { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body.cust .topbar { -ms-flex: 0 0 auto; flex: 0 0 auto; padding-top: calc(12px + env(safe-area-inset-top)); padding-right: calc(20px + env(safe-area-inset-right)); padding-bottom: 12px; padding-left: calc(20px + env(safe-area-inset-left)); }
.cust-app { -ms-flex: 1 1 auto; flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-height: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 780px; margin: 0 auto; background: #fff; background: var(--panel); }
.cust-head { -ms-flex: 0 0 auto; flex: 0 0 auto; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; padding: 10px 14px; border-bottom: 1px solid #e6eaf0; border-bottom: 1px solid var(--line); }
.cust-head .label { margin: 0; }
.cust-tip { -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 6px 14px; font-size: 12px; color: #8a94a6; color: var(--muted); background: #f7f9fc; border-bottom: 1px solid #e6eaf0; border-bottom: 1px solid var(--line); line-height: 1.5; }
#msgs.cust-msgs { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; height: auto; border: 0; border-radius: 0; background: #f7f9fc; overflow-y: auto; -ms-overflow-y: auto; }
.composer.cust-composer { -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
/* 留资入口小条（非弹窗、不挡聊天）：常驻输入框上方，点击才打开表单 */
.lead-strip { padding: 7px 12px; font-size: 12px; text-align: center; background: #f7f9fc; border-top: 1px dashed #e6eaf0; color: #8a94a6; color: var(--muted); -ms-flex: 0 0 auto; flex: 0 0 auto; }
.lead-strip a { color: #2f6fed; font-weight: 600; text-decoration: none; }
.composer.cust-composer textarea { -ms-flex: 1 1 auto; flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0; margin: 0 8px 0 0; }
.composer.cust-composer button { -ms-flex: 0 0 auto; flex: 0 0 auto; }

/* 移动端微调（窄屏手机优先）：满屏聊天、大点按区、输入框字号>=16px 防 iOS 聚焦缩放 */
@media (max-width: 600px) {
  body.cust .topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
  body.cust .topbar h1 { font-size: 15px; }
  .cust-app { max-width: none; }
  .cust-head { padding: 8px 12px; }
  .cust-tip { padding: 6px 12px; }
  .bubble { max-width: 82%; }
  .composer.cust-composer { -ms-flex-align: center; align-items: center; padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .composer.cust-composer textarea { font-size: 16px; height: 44px; line-height: 1.4; }
  .composer.cust-composer button { min-height: 44px; padding: 0 16px; font-size: 15px; }
  /* 输入框字号>=16px 避免 iOS 聚焦时整页缩放；仅作用于客户页，不影响后台 */
  body.cust input, body.cust textarea { font-size: 16px; }
  .modal { width: auto; max-width: 90vw; }
}