/* ============================================================
   客服系统 · 设计令牌（Modern Native）
   规范要点：品牌纯蓝、4/8px 网格、圆角 8/12/16、
   禁止渐变 / 发光 / 厚重毛玻璃；层级靠字重与留白而非色块。
   ============================================================ */
:root{
  /* 品牌：参考产品 8 张截图逐像素统计，主按钮是纯色 #1687ed
     （#1284ea 在参考图中出现 0 次，此前取色取错了） */
  --brand:#1687ed;
  --brand-hover:#0d74d8;
  --brand-soft:#eaf5ff;
  --brand-line:#c6e1fa;

  /* 面：参考产品是「页面底 — 面板底 — 卡片」三层蓝调递进。
     关键：内容面板底不是白色，而是 #f5faff（浅蓝），白卡片浮在它上面；
     实测四张参考图的占比：#f5faff 18%~48%，#ffffff 33%±，#fafdff 消息区。 */
  --bg:#e8f4fd;          /* 面板之外的页面底（实测 #e8f4fd） */
  --surface:#ffffff;     /* 卡片 / 表格 / 输入框（实测纯白） */
  --surface-2:#f5faff;   /* 侧边栏面板 + **内容面板底**（实测 #f5faff） */
  --surface-3:#eaf5ff;   /* 内嵌块、段控件激活底、表头（实测 #eaf5ff） */
  --surface-4:#dceaf7;   /* 浅底上的 hover（实测参考图段控件激活更深一档） */
  --chat-bg:#fafdff;     /* 消息区（实测 #fafdff，比面板底白一档） */

  /* 文本：深navy标题 + 蓝灰正文（实测 #183d5d / #52718c / #8197aa） */
  --text:#1c4160;
  --text-2:#52718c;
  --text-3:#8197aa;

  /* 描边：外框是可见的浅蓝（实测 #d8e9f7）；表格行线更淡且偏中性，
     单独用 --line 表示，避免把整页画成网格。 */
  --border:#d9e9f7;
  --border-strong:#c2dcf2;
  --line:#e9eef2;

  /* 语义色 */
  --ok:#22a07c;
  --ok-soft:#e8f8f0;
  --warn:#a9741a;
  --warn-soft:#fff8e9;   /* 参考产品的琥珀提示条（实测 #fff8e9） */
  --danger:#e5484d;
  --danger-soft:#fdeeee;

  /* 几何 */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* 阴影：极轻，两层叠加，避免大面积模糊 */
  --shadow-sm:0 1px 2px rgba(36,78,109,.04);
  --shadow:0 1px 2px rgba(36,78,109,.04),0 8px 24px rgba(36,78,109,.05);
  --shadow-lg:0 2px 4px rgba(36,78,109,.04),0 16px 40px rgba(36,78,109,.10);

  /* 动效 */
  --t:.15s ease-in-out;
  --t-pop:.2s cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.55;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:inherit;}
a{color:var(--brand);text-decoration:none;}
::selection{background:var(--brand-line);}

/* 滚动条：细、圆、低对比 */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(36,78,109,.14);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(36,78,109,.24);background-clip:content-box;}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-weight:500;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t);
  white-space:nowrap;
}
.btn:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft);}
.btn:active{transform:translateY(.5px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(22,135,237,.16);}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff;}
.btn-danger{color:var(--danger);border-color:#f5d2d3;}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);}
/* 破坏性操作「确认执行」时用实心红：确认框里这一下是真正生效的动作，
   与列表里那个中性的「删除」入口必须区分开，避免误点。 */
.btn-danger-solid{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:var(--shadow-sm);}
.btn-danger-solid:hover{background:#c93a3f;border-color:#c93a3f;color:#fff;}
.btn-sm{height:30px;padding:0 10px;font-size:13px;}
/* 卡片内的次要动作（如「查看套餐与额度」）：品牌浅底 + 品牌字，比实心蓝低一档，
   不会和同屏的主按钮抢注意力 */
.btn-soft{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand);}
.btn-soft:hover{background:#dbecfb;border-color:var(--brand);color:var(--brand);}
.btn-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.btn-ico svg{width:15px;height:15px;display:block;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* 图标按钮：方形、低对比，hover 才明显 */
.icon-btn{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;
  color:var(--text-2);transition:background var(--t),color var(--t),border-color var(--t);
}
.icon-btn:hover{background:var(--surface-3);color:var(--text);}
.icon-btn.on{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line);}
.icon-btn svg{width:16px;height:16px;display:block;}

/* ===== 表单 ===== */
.input,.select,.textarea{
  width:100%;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);outline:none;color:var(--text);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.input::placeholder,.textarea::placeholder{color:var(--text-3);}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,135,237,.12);}
.textarea{height:auto;padding:10px 12px;resize:vertical;min-height:80px;line-height:1.6;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px;font-weight:500;}

/* ===== 卡片 ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.card-pad{padding:20px;}
.card-title{
  font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

/* ===== 栅格与工具类 ===== */
.grid{display:grid;gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:720px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.tag{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;
  font-size:12px;background:var(--surface-3);color:var(--text-2);white-space:nowrap;
}
.tag-ok{background:var(--ok-soft);color:var(--ok);}
.tag-warn{background:var(--warn-soft);color:var(--warn);}
.tag-danger{background:var(--danger-soft);color:var(--danger);}
.tag-brand{background:var(--brand-soft);color:var(--brand);}

/* 状态胶囊：小圆点用 currentColor，切换状态只需换 class 与文案，
   不必重建内部结构（工作台的「客服在线 / 已暂停接待」两处状态共用一份逻辑）。 */
.status-pill{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--radius-pill);font-size:12px;font-weight:500;white-space:nowrap;
}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.status-pill.on{background:var(--ok-soft);color:var(--ok);}
.status-pill.off{background:var(--warn-soft);color:var(--warn);}

.muted{color:var(--text-2);}
.small{font-size:12px;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;}
.nowrap{white-space:nowrap;}
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}
.flex{display:flex;}.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;}
.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}
.hidden{display:none !important;}

/* ===== 表格（无纵向网格线、表头不用色块） ===== */
.table-wrap{overflow:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;}
/* 参考产品的表头是浅蓝色块（实测 #e1f0fa），两端跟卡片圆角对齐 */
th{background:var(--surface-3);color:var(--text-2);font-weight:600;font-size:12px;letter-spacing:.02em;}
thead tr th:first-child{border-top-left-radius:var(--radius-sm);}
thead tr th:last-child{border-top-right-radius:var(--radius-sm);}
tbody tr{transition:background var(--t);}
tbody tr:hover{background:var(--surface-2);}
tbody tr:last-child td{border-bottom:0;}

/* 分页条：左条数说明、右翻页按钮。窄屏自动换行（按钮不会挤成一团） */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;}
.pager-btns{display:flex;gap:6px;flex-wrap:wrap;}
/* 禁用态只降透明度、不改指针样式：still 是真实按钮，只是点不动 */
.pager-btns .btn[disabled]{opacity:.45;}

/* ===== 登录页 ===== */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg);}
.auth-card{width:100%;max-width:400px;padding:32px;}
.auth-logo{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;}
.auth-sub{color:var(--text-2);font-size:13px;margin-bottom:24px;}
.auth-switch{margin-top:16px;text-align:center;font-size:13px;color:var(--text-2);}
/* 回官网的出口：比「立即注册」更弱一档，避免和主流程抢注意力 */
.auth-back{margin-top:18px;text-align:center;font-size:12.5px;}
.auth-back a{color:var(--text-3);transition:color var(--t);}
.auth-back a:hover{color:var(--brand);}

/* ===== 布局骨架 ===== */
/* 参考产品的骨架是「页面底 + 两块独立圆角面板（侧边栏 / 内容区）」，
   四周留缝露出页面底色 —— 这就是它明显的「外框」观感来源。 */
.layout{display:flex;height:100vh;overflow:hidden;background:var(--bg);padding:10px;gap:10px;}
.sidebar{
  width:228px;flex-shrink:0;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;padding:14px 10px 10px;overflow:hidden;
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:4px 8px 16px;
}
.brand-txt{min-width:0;}
.brand-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-sub{font-size:11.5px;color:var(--text-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-mark{
  width:28px;height:28px;flex:0 0 auto;border-radius:8px;background:var(--brand);
  color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;
  box-shadow:0 2px 6px rgba(22,135,237,.28);
}
.nav-label{
  font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text-3);
  padding:14px 10px 6px;text-transform:uppercase;
}
.nav-item{
  position:relative;display:flex;align-items:center;gap:10px;height:38px;padding:0 10px 0 12px;
  border-radius:10px;color:var(--text-2);
  transition:background var(--t),color var(--t);cursor:pointer;user-select:none;
}
.nav-item:hover{background:var(--surface-3);color:var(--text);}
/* 参考产品的激活项 = 浅蓝底 + 左侧竖条，比整块深色更轻 */
.nav-item.active{background:var(--surface-3);color:var(--brand);font-weight:600;}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--brand);
}
.nav-icon{width:18px;display:grid;place-items:center;flex:0 0 auto;opacity:.9;}
.nav-icon svg{width:16px;height:16px;display:block;}
.sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);}
/* 内容面板底 = 浅蓝 #f5faff（**不是白色**）：
   参考产品的内容栏、页头、卡片之间的缝隙全是这个底色，
   白卡片浮在它上面才有层次；整块刷白会显得又扁又空。 */
.main{
  flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);
}
/* 页头跟随面板底色，不单独刷白、不加分隔线 */
.topbar{
  height:60px;flex-shrink:0;background:transparent;border-bottom:0;
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;
}
.page{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;}

/* ===== 统计卡片 ===== */
.stat{padding:18px 20px;}
.stat-label{font-size:13px;color:var(--text-2);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.stat-value{font-size:28px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}

/* ===== 工作台 ===== */
/* 工作台本身**不是**一张大卡片，而是「面板底 + 两块卡片」：
   会话列表是白卡，聊天区是消息区近白卡，中间留缝露出面板底色。
   参考产品的层次感就来自这里 —— 整块刷白会把三栏糊成一片。 */
.workbench{
  display:flex;flex:1;min-height:0;gap:10px;
}
.sess-list{
  width:316px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;min-width:0;background:var(--surface);overflow:hidden;
}
.sess-head{
  padding:12px;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;
}
.sess-head-row{display:flex;align-items:center;gap:8px;}
.sess-search{flex:1;min-width:0;background:var(--surface);}
.sess-scroll{flex:1;overflow:auto;padding:8px 8px 12px;display:flex;flex-direction:column;gap:4px;}

/* 段控件：三选一的筛选，比三个独立按钮更能表达「互斥」 */
.seg{
  display:inline-flex;align-self:flex-start;gap:2px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:2px;
}
.seg-item{
  height:26px;padding:0 14px;border:0;border-radius:var(--radius-pill);background:transparent;
  color:var(--text-3);font-size:12.5px;font-weight:500;
  transition:background var(--t),color var(--t);
}
.seg-item:hover{color:var(--text);}
/* 参考产品：激活项是深一档的浅蓝胶囊 + 主文字色（不是白底也不是品牌蓝文字） */
.seg-item.active{background:var(--surface-4);color:var(--text);font-weight:600;}

.sess-item{
  position:relative;display:flex;gap:10px;padding:10px;border-radius:12px;cursor:pointer;
  transition:background var(--t),box-shadow var(--t);
}
/* 列表卡本身是白面，hover/选中必须换到浅蓝，否则与底色重合看不出反馈 */
.sess-item:hover{background:var(--surface-2);}
.sess-item.active{background:var(--brand-soft);box-shadow:var(--shadow-sm);}
.sess-item.active::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand);
}
.sess-item.active .sess-name{color:var(--brand);}
/* 头像块：长列表里纯文字很难扫读，给每行一个着色锚点 */
.sess-avatar-wrap{position:relative;flex:0 0 auto;}
.sess-avatar{
  width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:600;font-size:12.5px;letter-spacing:-.02em;
}
.sess-item.active .sess-avatar{background:var(--brand);color:#fff;}
.sess-dot{
  position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--surface);
}
.sess-dot.on{background:var(--ok);}
.sess-dot.off{background:#c6d8ea;}
.sess-body{min-width:0;flex:1;}
.sess-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.sess-name{
  font-weight:600;font-size:13px;letter-spacing:-.01em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sess-preview{
  font-size:12.5px;color:var(--text-2);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sess-meta{
  display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;
}
.sess-meta > span{overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* 归属客服标签：转接之后这里会跟着换人，是「现在谁在处理」的标识。
   它不参与压缩（压掉就认不出是谁了），被折叠的应该是访客编号那段。 */
.sess-agent{
  flex:0 0 auto;display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;
  font-size:11px;background:var(--surface-3);color:var(--text-2);max-width:110px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 自己名下：品牌色高亮 —— 主客服一屏几十个会话时，「哪些是我的」最常被需要 */
.sess-agent.mine{background:var(--brand-soft);color:var(--brand);font-weight:600;}
/* 待接入：转接给我、但我还没打开。WS 通知只推一次，列表必须能持续体现 */
.sess-transfer{
  flex:0 0 auto;display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;
  font-size:11px;font-weight:600;background:var(--warn-soft);color:var(--warn);
}

/* ============================================================
   全屏（放大）：收起全局侧边导航，让**工作台整体**占满窗口
   —— 会话列表、聊天区、访客资料面板都保留，
   这样放大的是「工作台」而不是「某一个会话」，仍可切换会话；
   同时页头收成一条极简工具条，把「退出全屏」按钮固定留在右上角。
   ============================================================ */
.layout.chat-full{padding:0;gap:0;}
.layout.chat-full .sidebar{display:none;}
.layout.chat-full .main{border:0;border-radius:0;}
.layout.chat-full .page{padding:10px 12px;}
.layout.chat-full .workbench{gap:10px;}
.layout.chat-full .page-head{
  margin:0;padding:4px 12px 10px;align-items:center;
  background:transparent;border-bottom:0;
}
/* 只藏标题文字，保留右侧操作区（状态 + 会话数 + 退出全屏） */
.layout.chat-full .page-head > div:first-child{display:none;}

.badge{
  background:var(--danger);color:#fff;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;min-width:18px;height:18px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
/* 不是自己负责的会话有未读：只作状态展示，不做「待办」强调。
   主客服能看全部会话，若别人的会话也用红点，一屏全是红点就分不出该先处理哪个。 */
.badge.badge-dim{background:var(--surface-3);color:var(--text-2);font-weight:500;}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.dot-on{background:var(--ok);box-shadow:0 0 0 3px rgba(14,164,114,.12);}
.dot-off{background:#c6d8ea;}
.conn-dot{width:8px;height:8px;border-radius:50%;display:inline-block;transition:background var(--t);}
.conn-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(14,164,114,.12);}
.conn-dot.off{background:var(--danger);box-shadow:0 0 0 3px rgba(229,72,77,.12);}

/* 聊天区：消息区近白卡（#fafdff，比面板底白一档），整体一张卡 */
.chat{
  flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--chat-bg);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.chat-head{
  padding:12px 16px;border-bottom:1px solid var(--border);background:transparent;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.chat-avatar{
  width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:600;font-size:13px;flex:0 0 auto;
}
.chat-title{font-weight:600;font-size:14px;letter-spacing:-.01em;}
.chat-body{flex:1;overflow:auto;padding:20px 18px;display:flex;flex-direction:column;gap:10px;background:var(--chat-bg);}
.bubble{
  max-width:min(68%,560px);padding:9px 13px;border-radius:var(--radius-md);
  font-size:13.5px;line-height:1.6;word-break:break-word;white-space:pre-wrap;
}
.bubble-in{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm);}
.bubble-out{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 8px rgba(22,135,237,.18);}
.bubble-sys{
  align-self:center;background:rgba(36,78,109,.05);color:var(--text-2);
  font-size:12px;padding:4px 10px;border-radius:var(--radius-pill);
}
.bubble img{max-width:220px;border-radius:var(--radius-sm);display:block;}
.bubble-meta{font-size:11px;opacity:.7;margin-top:4px;text-align:right;}

/* ---- 消息行：气泡 + 引用块 + hover 操作条 ---- */
/* 一层 wrap 承载「对齐 + 最大宽度」：操作条要挂在气泡外侧，
   而 .bubble 单独作 flex item 时没有可容纳同级元素的位置。 */
.bubble-row{display:flex;flex-direction:column;max-width:min(68%,560px);position:relative;}
.bubble-row.bw-in{align-self:flex-start;}
.bubble-row.bw-out{align-self:flex-end;}
.bubble-row .bubble{max-width:100%;}
/* 操作条绝对定位在气泡外侧的空白区：**不占位**。
   若改成占位元素，一屏几十条消息每条都多出按钮高度，滚动长度凭空涨几百像素。 */
.msg-acts{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity var(--t);
}
.bubble-row.bw-out .msg-acts{right:calc(100% + 6px);}
.bubble-row.bw-in .msg-acts{left:calc(100% + 6px);}
.bubble-row:hover .msg-acts{opacity:1;pointer-events:auto;}
.msg-act{
  padding:3px 8px;font-size:11px;white-space:nowrap;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-2);transition:all var(--t);
}
.msg-act:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft);}

/* 撤回态：虚线空框。刻意不用"灰色正文"——那看起来仍像一条正常消息 */
.bubble-revoked{background:transparent !important;border:1px dashed var(--border) !important;box-shadow:none !important;}
.bubble-revoked .revoked-text{font-size:12px;font-style:italic;color:var(--text-3);}

/* 引用块 */
.quote-box{
  max-width:100%;overflow:hidden;cursor:pointer;
  padding:4px 8px;margin-bottom:6px;border-radius:var(--radius-sm);
  border-left:2px solid var(--brand-line);background:rgba(22,135,237,.06);
}
.quote-box:hover{background:rgba(22,135,237,.13);}
.quote-who{font-size:11px;opacity:.75;}
.quote-text{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 出站气泡是蓝底，引用块换成半透明白才看得清 */
.bubble-out .quote-box{background:rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.6);}

/* 输入区的引用条 */
.quote-bar{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 10px;
  background:var(--brand-soft);border-left:2px solid var(--brand);border-radius:var(--radius-sm);
}
.quote-bar-main{flex:1;min-width:0;}
.quote-bar-who{font-size:11px;font-weight:500;color:var(--brand-hover);}
.quote-bar-text{
  display:block;font-size:12px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quote-bar-x{
  padding:0 4px;border:none;background:transparent;font-size:16px;line-height:1;
  color:var(--text-2);cursor:pointer;border-radius:var(--radius-sm);
}
.quote-bar-x:hover{color:var(--danger);background:var(--surface-4);}

/* 点击引用块跳转时的定位高亮 */
.flash{animation:flashHi 1.2s ease-out;}
@keyframes flashHi{from{background:rgba(22,135,237,.2);}to{background:transparent;}}

/* 话术分组标题与「还有 N 条」：截断必须可见，
   静默截断会让客服以为话术丢了，转去设置页重建一条重复的。 */
.quick-group-title{font-size:11px;font-weight:500;color:var(--text-2);margin:2px 0 4px;}
.quick-more{
  padding:4px 9px;font-size:11px;color:var(--brand);cursor:pointer;
  border:1px dashed var(--brand-line);border-radius:var(--radius-pill);background:var(--surface);
}
.quick-more:hover{background:var(--brand-soft);}

/* 知识库选择器（工作台「知识库」按钮弹出的搜索列表）。 */
.faq-pick-list{
  max-height:320px;overflow:auto;margin-top:10px;
  border:1px solid var(--border);border-radius:var(--radius-md);
}
.faq-pick-item{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;transition:background var(--t);}
.faq-pick-item:last-child{border-bottom:none;}
.faq-pick-item:hover{background:var(--brand-soft);}
.faq-pick-q{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);margin-bottom:3px;}
/* 答案只露两行：列表是给人挑的，不是用来读全文的（点一下就会填进输入框）。 */
.faq-pick-a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;line-height:1.55;color:var(--text-2);white-space:pre-wrap;
}

.chat-input{border-top:1px solid var(--border);padding:12px 14px;background:var(--surface);}
.quick-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.quick-chip{
  padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);
  font-size:12px;color:var(--text-2);cursor:pointer;transition:all var(--t);background:var(--surface);
}
.quick-chip:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft);}
.chat-input-row{display:flex;gap:8px;align-items:flex-end;}
.chat-input-row .textarea{min-height:44px;max-height:120px;}

/* 空状态 */
.chat-empty{flex:1;display:grid;place-items:center;padding:24px;}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--text-2);}
.empty-ico{
  width:56px;height:56px;border-radius:var(--radius-lg);background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand);margin-bottom:2px;
}
.empty-ico svg{width:26px;height:26px;}
.empty-title{font-size:14px;font-weight:600;color:var(--text);}
.empty-desc{font-size:12.5px;color:var(--text-3);max-width:280px;line-height:1.6;}

/* ===== 访客资料面板（右侧） ===== */
.visitor-panel{
  width:320px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);display:flex;flex-direction:column;min-width:0;overflow:hidden;
}
.vp-head{
  /* 头部不得被压缩（同 .vp-group 的理由），否则窄高面板下会被挤掉一行 */
  flex:0 0 auto;
  padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;
}
.vp-avatar{
  width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:600;flex:0 0 auto;
}
.vp-name{font-weight:600;font-size:14px;letter-spacing:-.01em;}
.vp-sub{font-size:12px;color:var(--text-3);margin-top:3px;display:flex;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vp-sub .vp-sep{color:var(--border-strong);}
.vp-sub .dot{flex:0 0 auto;}
/* 面板主体是唯一滚动区：分组按内容高度定死，多出来的高度由这里滚。
   min-height:0 不能省——列向 flex 子项默认 min-height:auto，会被内容顶穿。 */
.vp-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 16px;display:flex;flex-direction:column;gap:8px;}
/* flex:0 0 auto 是这里的命门：分组带 overflow:hidden，按 flex 规范它的
   min-height:auto 会解析为 0，于是内容一超出面板高度，所有分组就被等比压扁，
   多出来的行被 overflow 裁掉，而且永远不出现滚动条（转接记录把面板撑高后
   访客资料就「显示不完整」了）。禁止收缩后，溢出全部交给 .vp-body 滚动。 */
.vp-group{flex:0 0 auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;}
.vp-group-title{
  padding:9px 12px;font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.02em;
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
.vp-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 12px;font-size:12.5px;}
.vp-row + .vp-row{border-top:1px solid var(--border);}
/* 转接记录：每组三条（方向 / 状态 / 时间），组与组之间用分隔线，
   让「同一个会话被转了几手」在视觉上能一眼数出来 */
.vp-transfer{padding:2px 0;}
.vp-transfer + .vp-transfer{border-top:1px dashed var(--border-strong);}
.vp-label{color:var(--text-3);flex:0 0 auto;}
.vp-value{color:var(--text);text-align:right;word-break:break-all;font-variant-numeric:tabular-nums;}
.vp-value.mono{font-size:12px;}
.vp-remark{display:flex;flex-direction:column;gap:8px;padding:10px 12px;}
.vp-remark .textarea{min-height:64px;font-size:13px;}
.vp-actions{display:flex;justify-content:flex-end;gap:8px;}

/* ===== 分享链接 / 二维码 ===== */
.link-row{
  padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;transition:border-color var(--t),box-shadow var(--t);
}
.link-row:hover{border-color:var(--brand-line);box-shadow:var(--shadow-sm);}
.link-url{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;}
.qr-box{display:grid;place-items:center;padding:16px;background:var(--surface-2);border-radius:var(--radius-md);border:1px solid var(--border);}
.qr-box img{width:180px;height:180px;image-rendering:pixelated;}

/* ===== 提示 ===== */
.toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{
  padding:10px 16px;border-radius:var(--radius-sm);background:#1d4260;color:#fff;font-size:13px;
  box-shadow:var(--shadow-lg);animation:fade .2s;
}
.toast-ok{background:var(--ok);}
.toast-err{background:var(--danger);}
@keyframes fade{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.modal-mask{position:fixed;inset:0;background:rgba(36,78,109,.42);display:grid;place-items:center;z-index:9998;padding:24px;animation:fade .15s;}
.modal{width:100%;max-width:520px;background:var(--surface);border-radius:var(--radius-lg);padding:24px;max-height:86vh;overflow:auto;box-shadow:var(--shadow-lg);}

/* 确认框：比普通弹窗更窄，信息层级是「图标 + 标题 + 说明」 */
.confirm-modal{max-width:400px;padding:20px;}
.cm-head{display:flex;gap:12px;align-items:flex-start;}
.cm-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
}
.cm-ico.danger{background:var(--danger-soft);color:var(--danger);}
.cm-ico svg{width:18px;height:18px;display:block;}
.cm-title{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4;}
.cm-desc{font-size:12.5px;color:var(--text-2);margin-top:6px;line-height:1.65;}
.cm-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}

.empty{text-align:center;padding:40px 0;color:var(--text-3);font-size:13px;}

/* ===== 运营提醒（行式：圆图标 + 标题/说明 + 右侧动作，行间细分隔线） ===== */
/* 通栏提示条：单条强调（如「系统设置里的欢迎语会盖掉接入类自动回复」）。
   与下面的 .alert-row（列表式并列展示）用途不同，不要合并。
   之前只有 .alert-row 的样式，导致页面里用到的 .alert.alert-warn 是裸文字。 */
.alert{
  display:flex;flex-direction:column;gap:2px;padding:11px 14px;font-size:13px;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);
}
.alert-warn{background:var(--warn-soft);border-color:#f0e0bd;color:var(--warn);}
.alert .alert-detail{color:inherit;opacity:.88;}

.alert-box{display:flex;flex-direction:column;}
.alert-row{display:flex;align-items:center;gap:12px;padding:13px 0;}
.alert-row + .alert-row{border-top:1px solid var(--line);}
.alert-row:first-child{padding-top:2px;}
.alert-row:last-child{padding-bottom:0;}
.alert-ico{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-2);
}
.alert-ico svg{width:16px;height:16px;display:block;}
.alert-ico.ok{background:var(--ok-soft);color:var(--ok);}
.alert-ico.warn{background:var(--warn-soft);color:var(--warn);}
.alert-ico.danger{background:var(--danger-soft);color:var(--danger);}
.alert-body{min-width:0;flex:1;}
.alert-title{font-size:13px;font-weight:600;}
.alert-detail{font-size:12.5px;color:var(--text-3);margin-top:3px;}
.alert-acts{flex:0 0 auto;}
.alert-ok-txt{font-size:12.5px;font-weight:600;color:var(--ok);}

/* ===== 设置开关行 ===== */
.switch-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.switch-row:last-child{border-bottom:0;}
.switch-row input[type=checkbox]{
  width:38px;height:21px;flex:0 0 auto;appearance:none;background:#c6d8ea;border-radius:11px;
  position:relative;cursor:pointer;transition:background var(--t);outline:none;
}
.switch-row input[type=checkbox]:checked{background:var(--brand);}
.switch-row input[type=checkbox]::after{
  content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:transform var(--t);box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.switch-row input[type=checkbox]:checked::after{transform:translateX(17px);}
.switch-row > div:first-of-type{flex:1;min-width:0;}

/* ===== 图表（通用 SVG，零依赖） ===== */
.chart{width:100%;height:auto;display:block;}
.chart-box{display:flex;flex-direction:column;gap:8px;}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2);}
.chart-legend-item{display:inline-flex;align-items:center;gap:6px;}
.chart-dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:0 0 auto;}

/* ===== 弹窗内的小工具 ===== */
.ico{display:inline-grid;place-items:center;}
.meta{font-size:12px;color:var(--text-3);}
.msg{word-break:break-word;}

/* 窄屏兜底：面板与列表不再并排，避免挤压聊天区 */
@media(max-width:1180px){
  .visitor-panel{width:290px;}
  .sess-list{width:280px;}
}

/* ============================================================
   页面骨架：内嵌页头（大标题 + 描述 + 右侧操作）
   参考约定的信息层级：面包屑 → 主标题 → 说明 → 操作区
   ============================================================ */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:20px;flex-wrap:wrap;
}
.crumb{font-size:12px;color:var(--text-3);letter-spacing:.02em;margin-bottom:6px;}
.page-title{
  font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.25;
  display:flex;align-items:center;gap:8px;
}
.page-desc{font-size:13px;color:var(--text-2);margin-top:6px;max-width:640px;}
.page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.page-head.compact .page-title{font-size:19px;}

/* ============================================================
   统计卡（图标 + 数值 + 说明 + 状态徽标）
   ============================================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:1100px){.stats-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.stats-row{grid-template-columns:1fr;}}
/* 版式对齐参考产品：小标签在左上、徽标在右上、图标与数值同行、说明在底。
   （原来是「图标在上、数值在中、说明在下」的三段式，卡片偏高且信息不聚拢。） */
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);transition:box-shadow var(--t),transform var(--t);
}
.stat-card:hover{box-shadow:var(--shadow);}
.stat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.stat-name{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-main{display:flex;align-items:center;gap:10px;margin:10px 0 8px;}
.stat-ico{
  width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:0 0 auto;
}
.stat-ico svg{width:17px;height:17px;}
.stat-ico.gray{background:var(--surface-3);color:var(--text-2);}
.stat-badge{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;
  font-size:12px;font-weight:500;background:var(--surface-3);color:var(--text-2);white-space:nowrap;
}
.stat-badge.ok{background:var(--ok-soft);color:var(--ok);}
.stat-badge.warn{background:var(--warn-soft);color:var(--warn);}
.stat-badge.danger{background:var(--danger-soft);color:var(--danger);}
.stat-num{font-size:28px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;}
.stat-num .unit{font-size:12.5px;font-weight:500;color:var(--text-3);margin-left:3px;letter-spacing:0;}
.stat-cap{font-size:12.5px;color:var(--text-3);}
.stat-cap.link{color:var(--brand);}

/* 卡片内的数字块（三格并排：数字在上、说明在下） */
.num-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.num-block .n{font-size:24px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;}
.num-block .c{font-size:12.5px;color:var(--text-3);margin-top:5px;}

/* 趋势卡底部指标条：四格 + 竖分隔线（参考产品用「标签 + 大数字」承数，比图例更直观） */
.metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);}
@media(max-width:820px){.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
.metric-cell{padding:14px 18px;min-width:0;}
.metric-cell + .metric-cell{border-left:1px solid var(--border);}
.metric-label{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:6px;}
.metric-num{font-size:22px;font-weight:650;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.1;}
.chart-pad{padding:4px 18px 16px;}

/* 面板标题左侧的圆形图标（参考产品的卡片头都是「图标 + 标题 + 说明」） */
.panel-ico{
  width:28px;height:28px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:0 0 auto;
}
.panel-ico svg{width:15px;height:15px;display:block;}
.panel-ico.gray{background:var(--surface-3);color:var(--text-2);}
.panel-head-main{display:flex;align-items:center;gap:10px;min-width:0;}

/* ============================================================
   面板（标题行 + 说明 + 右上操作）
   ============================================================ */
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;
}
.panel-head{
  padding:16px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.panel-head.plain{border-bottom:0;padding-bottom:0;}
.panel-title{font-size:15px;font-weight:600;letter-spacing:-.01em;}
.panel-sub{font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.5;}
.panel-body{padding:16px 18px;flex:1;min-width:0;}
.panel-body.tight{padding:10px 12px;}
.panel-body.flush{padding:0;}
.panel-link{
  font-size:12.5px;color:var(--brand);display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:6px;transition:background var(--t);white-space:nowrap;
}
.panel-link:hover{background:var(--brand-soft);}
.row-2-1{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;}
.row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media(max-width:1100px){.row-2-1{grid-template-columns:1fr;}.row-3{grid-template-columns:1fr;}}

/* 环形进度（额度占比）
   排版要点（对齐参考产品）：**只有数值在环内居中，说明放到环下面**。
   原来「数值 + 说明」两行一起塞进环里居中，数值被顶到环心上方、
   说明压在环的下缘笔画上，看着就是「没对齐」。 */
/* 环组整体在卡片里居中（对齐参考产品）；靠左会让右半边空一大块，看着像没排完。
   item 固定等宽：说明文案长短不一（「会话额度」vs「存储上限 1.0 GB」）时，
   若按内容宽度撑开，两个环的中心就不再对称——居中要的是「环居中」，不是「文字块居中」。 */
.donut-row{display:flex;align-items:flex-start;justify-content:center;gap:64px;flex-wrap:wrap;}
.donut-item{width:132px;display:flex;flex-direction:column;align-items:center;}
.donut{position:relative;width:92px;height:92px;flex:0 0 auto;}
.donut svg{transform:rotate(-90deg);display:block;}
.donut-val{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;line-height:1.15;
}
.donut-val b{font-size:21px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.donut-val span{font-size:11.5px;color:var(--text-3);font-weight:500;margin-top:2px;}
.donut-cap{font-size:12.5px;color:var(--text-3);margin-top:9px;text-align:center;width:132px;}

/* 来源条形 */
.bar-item + .bar-item{margin-top:14px;}
.bar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;margin-bottom:6px;}
.bar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);}
.bar-track{height:6px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden;}
.bar-fill{height:100%;border-radius:var(--radius-pill);background:var(--brand);}

/* 空状态（居中：图标 + 标题 + 说明） */
.empty-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 20px;text-align:center;color:var(--text-2);}
.empty-center .empty-ico{margin-bottom:2px;}

/* ============================================================
   侧边栏底部：用户卡 + 连接状态
   ============================================================ */
.uc-avatar{
  width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:14px;flex:0 0 auto;
}
.uc-main{min-width:0;flex:1;}
.uc-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uc-sub{
  font-size:11.5px;color:var(--text-3);margin-top:2px;
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.uc-sub > span{overflow:hidden;text-overflow:ellipsis;}
.uc-sub .conn-dot{flex:0 0 auto;}
.uc-logout{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--text-3);
  border:1px solid var(--border);background:var(--surface);
  transition:background var(--t),color var(--t),border-color var(--t);flex:0 0 auto;
}
.uc-logout:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong);}
.uc-logout svg{width:15px;height:15px;display:block;}

/* ============================================================
   表单细节：只读态、字段提示、两列表单、操作区、头像
   ============================================================ */
/* 只读字段必须与可编辑输入框明确区分：此前用户名也能编辑的样子，
   实际后端并不接收该字段，属于误导性 UI */
.input[readonly],.input:disabled{
  background:var(--surface-3);color:var(--text-2);border-color:var(--border);
  cursor:not-allowed;
}
.input[readonly]:hover,.input:disabled:hover{border-color:var(--border);}
.input[readonly]:focus,.input:disabled:focus{border-color:var(--border);box-shadow:none;background:var(--surface-3);}
.field-hint{font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.5;}

/* 两列表单：宽屏并排，窄屏回落单列 */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;}
@media(max-width:820px){.form-grid{grid-template-columns:1fr;}}

/* 表单底部操作区：与字段区分隔，按钮靠右 */
.form-actions{
  display:flex;justify-content:flex-end;gap:8px;
  margin-top:4px;padding-top:16px;border-top:1px solid var(--border);
}

/* 头像行：预览 + 说明 */
.avatar-row{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.avatar-preview{
  width:64px;height:64px;border-radius:16px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:24px;font-weight:600;flex:0 0 auto;overflow:hidden;
  border:1px solid var(--border);
}
.avatar-preview img{width:100%;height:100%;object-fit:cover;display:block;}

/* ============================================================
   开关：侧边栏「在线接待」
   用状态色区分（开=绿），不是品牌蓝 —— 它表达的是「是否可接待」的
   可用性语义，与「主操作」语义不同，混用会让开关和按钮难以区分。
   ============================================================ */
.switch{
  position:relative;width:38px;height:22px;flex:0 0 auto;padding:0;border:0;
  border-radius:var(--radius-pill);background:#cfe2f5;cursor:pointer;
  transition:background var(--t);
}
.switch::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(36,78,109,.18);
  transition:transform var(--t-pop);
}
.switch.on{background:var(--ok);}
.switch.on::after{transform:translateX(16px);}
.switch:disabled{opacity:.55;cursor:not-allowed;}
.switch:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(14,164,114,.2);}

/* ============================================================
   侧边栏底部卡片：在线接待 + 用户卡
   ============================================================ */
.side-stack{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);}
.side-card{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
  transition:border-color var(--t),background var(--t);
}
.side-card + .side-card{margin-top:8px;}
.side-card:hover{border-color:var(--border-strong);}
/* 「在线接待」卡用浅绿底把「可接待」这件事本身说清楚（实测 #f0fcf5 + 绿描边）；
   与用户卡（白底）区分开，侧栏底部才不会糊成一块。 */
.rec-card{background:#f0fcf5;border-color:#d6f2e3;}
.rec-card:hover{border-color:#bfe9d3;}
/* 用户卡保持白底（继承 .side-card），显式写出来是为了和上面的绿底卡形成对照，
   也让「白底 = 我自己 / 绿底 = 接待状态」这条视觉规则在样式表里可见。 */
.uc-card{background:var(--surface);}
/* 图标做成小圆点环，比圆角色块更轻（实测参考图是同款小圆） */
.sc-ico{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:#d9f3e5;color:var(--ok);transition:background var(--t),color var(--t);
}
.sc-ico svg{width:12px;height:12px;display:block;}
.sc-ico.off{background:var(--surface-3);color:var(--text-3);}
.sc-main{min-width:0;flex:1;}
.sc-title{font-size:12.5px;font-weight:600;letter-spacing:-.01em;}
.sc-sub{font-size:11px;color:var(--text-3);margin-top:1px;}

/* ============================================================
   提示条：授权到期 / 未获授权等需要客服立刻知道的状态
   ============================================================ */
.notice{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1px solid #f3e2bd;background:var(--warn-soft);color:#8a5a12;
  border-radius:var(--radius-md);font-size:12.5px;line-height:1.6;
}
.notice-ok{border-color:#cdeee2;background:var(--ok-soft);color:#0b7358;}
.notice-info{border-color:var(--brand-line);background:var(--brand-soft);color:#0f5aa8;}
.notice-danger{border-color:#f7cfd0;background:var(--danger-soft);color:#b0343a;}
.notice .n-ico{width:16px;height:16px;flex:0 0 auto;display:grid;place-items:center;margin-top:2px;}
.notice .n-ico svg{width:16px;height:16px;display:block;}
.notice .n-body{min-width:0;}

/* ============================================================
   定价卡（权益套餐）：价格 + ✓ 特性列表 + 主按钮
   ============================================================ */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media(max-width:1100px){.plan-grid{grid-template-columns:1fr;}}
.plan-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-sm);
  transition:border-color var(--t),box-shadow var(--t);
}
.plan-card:hover{border-color:var(--brand-line);box-shadow:var(--shadow);}
/* 推荐档：靠描边强调，不用渐变/发光 */
.plan-card.recommended{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow);}
.plan-badge{
  position:absolute;top:-10px;left:20px;height:22px;padding:0 10px;
  border-radius:var(--radius-pill);background:#244e6d;color:#fff;
  font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;
}
.plan-kicker{font-size:12.5px;color:var(--text-3);}
.plan-name{font-size:15px;font-weight:600;margin-top:4px;letter-spacing:-.01em;}
.plan-price{
  font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:1.1;
  margin:14px 0 0;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px;
}
.plan-price .cur{font-size:14px;font-weight:600;}
.plan-price .unit{font-size:12.5px;font-weight:400;color:var(--text-3);margin-left:4px;}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:8px;margin:18px 0 20px;font-size:12.5px;color:var(--text-2);}
.plan-feats li{display:flex;align-items:flex-start;gap:8px;}
.plan-feats svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--ok);}
.plan-card .btn{width:100%;justify-content:center;margin-top:auto;}

/* ============================================================
   分享链接：左侧链接列表 + 右侧二维码面板
   ============================================================ */
.share-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;}
@media(max-width:1080px){.share-grid{grid-template-columns:1fr;}}
.link-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);
  transition:border-color var(--t),background var(--t);
}
.link-item + .link-item{margin-top:8px;}
.link-item:hover{border-color:var(--brand-line);}
.link-item.on{border-color:var(--brand);background:var(--brand-soft);}
.link-qr{
  width:32px;height:32px;border-radius:9px;background:var(--surface);color:var(--text-2);
  border:1px solid var(--border);
  display:grid;place-items:center;flex:0 0 auto;
}
.link-item.on .link-qr{color:var(--brand);border-color:var(--brand-line);}
.link-qr svg{width:16px;height:16px;display:block;}
.link-main{min-width:0;flex:1;}
.link-kind{font-size:11.5px;color:var(--text-3);margin-bottom:3px;}
.link-item.on .link-kind{color:var(--brand);}
.link-url-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.link-acts{display:flex;gap:6px;flex:0 0 auto;}
/* 行内文字按钮：比图标按钮更明确（复制/预览/生成二维码不容易从图标猜出来） */
.lk-btn{
  height:28px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  color:var(--text-2);font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:5px;
  transition:border-color var(--t),color var(--t),background var(--t);white-space:nowrap;
}
.lk-btn:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft);}
.lk-btn svg{width:13px;height:13px;display:block;}
/* 新建链接区：与列表用分隔线隔开，避免和已有链接混成一堆 */
.link-create{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}

/* 二维码面板：空态是「取景框」（四角标记），选中后换成图片 */
.qr-panel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 16px;}
.qr-slot{
  position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text-3);font-size:12.5px;text-align:center;padding:20px;
  overflow:hidden;
}
.qr-slot img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;}
/* 只用一条 background 画四个角，避免为占位态额外加 DOM */
.qr-slot.corner::before{
  content:'';position:absolute;inset:12px;pointer-events:none;
  background:
    linear-gradient(var(--brand-line),var(--brand-line)) 0 0/16px 2px no-repeat,
    linear-gradient(var(--brand-line),var(--brand-line)) 0 0/2px 16px no-repeat,
    linear-gradient(var(--brand-line),var(--brand-line)) 100% 0/16px 2px no-repeat,
    linear-gradient(var(--brand-line),var(--brand-line)) 100% 0/2px 16px no-repeat,
    linear-gradient(var(--brand-line),var(--brand-line)) 0 100%/16px 2px no-repeat,
    linear-gradient(var(--brand-line),var(--brand-line)) 0 100%/2px 16px no-repeat,
    linear-gradient(var(--brand-line),var(--brand-line)) 100% 100%/16px 2px no-repeat,
    linear-gradient(var(--brand-line),var(--brand-line)) 100% 100%/2px 16px no-repeat;
}
.qr-cap{
  font-size:11.5px;color:var(--text-3);text-align:center;line-height:1.6;
  /* 链接是不含空格的长 token，必须 break-all，否则会溢出面板右边界 */
  word-break:break-all;max-width:100%;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* 区块标题（如「专属域名」「权益套餐」），比页头低一级；右侧可挂信息胶囊 */
.sec-head{margin-bottom:14px;}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.sec-title{font-size:16px;font-weight:600;letter-spacing:-.01em;}
.sec-desc{font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.6;}
.pill-strip{display:flex;gap:8px;flex-wrap:wrap;}
.pill{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border);font-size:12.5px;color:var(--text-2);white-space:nowrap;
}
.pill b{color:var(--text);font-weight:600;}
.pill.brand{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand);}
.pill.brand b{color:var(--brand);}
/* 双 CTA：主操作宽、次要操作窄（参考产品的「立即购买 / 委托购买」节奏） */
.cta-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;margin-top:16px;}
@media(max-width:720px){.cta-row{grid-template-columns:1fr;}}
.cta-row .btn{height:44px;justify-content:center;font-size:14px;}
.cta-row .btn-primary{box-shadow:var(--shadow-sm);}

/* 三格卖点小卡（专属域名说明） */
.feat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media(max-width:900px){.feat-row{grid-template-columns:1fr;}}
.feat-cell{border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;background:var(--surface);}
.feat-cell .ft-t{font-size:13px;font-weight:600;margin-bottom:6px;}
.feat-cell .ft-d{font-size:12px;color:var(--text-3);line-height:1.6;}

/* ============================================================
   聊天头部操作区：图标按钮组 + 分隔线
   ============================================================ */
.chat-head-acts{display:flex;align-items:center;gap:2px;flex:0 0 auto;}
.chat-div{width:1px;height:18px;background:var(--border);margin:0 6px;flex:0 0 auto;}
.icon-btn.danger{color:var(--text-2);}
.icon-btn.danger:hover{background:var(--danger-soft);color:var(--danger);}
.icon-btn:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--text-3);}

/* ============================================================
   访客资料面板（紧凑版）
   行距收紧、分组标题去掉灰底块（连续灰块会显得很重），
   空值统一渲染为浅色「—」而不是满屏「未知」。
   ============================================================ */
.vp-body{gap:6px;padding:10px 12px 14px;}
.vp-group{border:1px solid var(--border);border-radius:var(--radius-md);}
.vp-group-title{
  padding:9px 12px;font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.02em;
  background:transparent;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.vp-group-title .vpt-act{
  font-size:11.5px;font-weight:500;color:var(--brand);cursor:pointer;user-select:none;
}
.vp-row{padding:7px 12px;font-size:12.5px;}
.vp-value{color:var(--text);}
.vp-value.dim{color:var(--text-3);}
.vp-remark{padding:10px 12px;gap:6px;}
.vp-remark .textarea{min-height:56px;max-height:140px;font-size:12.5px;resize:vertical;}
.vp-remark-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.vp-count{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.vp-head-act{margin-left:auto;}


/* 表单内的分区小标题（同一面板里区分「公开资料 / 账号信息」） */
.section-label{
  font-size:12px;font-weight:600;color:var(--text-3);letter-spacing:.02em;
  margin:4px 0 12px;padding-top:16px;border-top:1px solid var(--border);
}

/* ============================================================
   移动端适配（≤860px）
   ------------------------------------------------------------
   客服端原本是给 PC 设计的多列布局（导航 228px + 会话列表 316px + 聊天区
   + 访客资料 320px），在手机上会被挤成几条竖条、什么都看不清。

   改造策略是「**不新增一套界面，只改变栏目的排布方式**」：
     1. 侧边导航 → 抽屉（点汉堡滑出，点遮罩收回）
     2. 工作台 → 二级页面（默认只看会话列表；点进会话后只看聊天，靠返回键回来）
     3. 访客资料 → 全屏覆盖层（PC 上是并排的第三栏，手机上必须是独立一层）
     4. 其余页面本来就是单列，只需要把表格改成横向可滚、按钮放大到可点

   断点选 860px 而不是 768px：竖屏平板（768~834）同样是「放不下三栏」的宽，
   按 768 划分会让 iPad 竖屏落进 PC 布局里，体验反而更差。
   ============================================================ */

/* ---- 这些元素只在窄屏出现，宽屏下必须在布局里不占位 ---- */
.mtop{display:none;}
.nav-mask{display:none;}
.mback{display:none;}
.vp-x{display:none;}

@media(max-width:860px){
  /* ===== 1. 骨架：单列铺满，去掉外框与留缝 =====
     手机上屏幕边缘就是边框，「页面底 + 两块圆角面板」的观感只会白白吃掉两侧空间。 */
  .layout{flex-direction:column;height:100vh;padding:0;gap:0;}
  @supports (height:100dvh){
    /* dvh 随地址栏收放实时变化；用 100vh 时地址栏一出现，底部输入框会被顶出屏幕 */
    .layout{height:100dvh;}
  }
  .main{border:0;border-radius:0;}
  .page{padding:12px;}

  /* ===== 2. 移动端顶栏 ===== */
  .mtop{
    display:flex;height:54px;flex:0 0 auto;align-items:center;gap:6px;padding:0 10px;
    background:var(--surface-2);border-bottom:1px solid var(--border);
    /* 刘海屏横屏时左右要避开圆角 */
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
  .mtop-btn{
    width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
    border:0;border-radius:10px;background:transparent;color:var(--text);
    -webkit-tap-highlight-color:transparent;
  }
  .mtop-btn:active{background:var(--surface-4);}
  .mtop-btn svg{width:20px;height:20px;display:block;}
  .mtop-title{
    flex:1;min-width:0;font-size:15.5px;font-weight:600;color:var(--text);
    text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* ===== 3. 侧边栏 → 抽屉 ===== */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:80;
    width:min(78vw,300px);border-radius:0;border:0;border-right:1px solid var(--border);
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 10px 40px rgba(15,40,66,.22);
    padding-top:max(14px,env(safe-area-inset-top));
  }
  .layout.nav-open .sidebar{transform:none;}
  /* 遮罩：点空白收回抽屉。必须真的"不可点"时才 pointer-events:none，
     否则抽屉关着时它仍然会吃掉整个屏幕的点击。 */
  .nav-mask{
    display:block;position:fixed;inset:0;z-index:75;background:rgba(15,40,66,.42);
    opacity:0;pointer-events:none;transition:opacity .22s;
  }
  .layout.nav-open .nav-mask{opacity:1;pointer-events:auto;}
  /* 抽屉里的导航项加高：手指点击需要更大的热区 */
  .nav-item{height:46px;}
  .nav-item.active::before{height:20px;}

  /* ===== 4. 工作台 → 列表 / 聊天 二选一 =====
     手机宽度放不下两栏，硬挤的结果是两栏都不可用。
     默认只显示会话列表（进来先选人），点进会话后只显示聊天（专心对话）。 */
  .workbench{margin:0;}
  .workbench .sess-list{width:auto;flex:1;border-radius:var(--radius-md);}
  .workbench .chat{display:none;}
  .workbench.m-chat .sess-list{display:none;}
  .workbench.m-chat .chat{display:flex;flex:1;border-radius:var(--radius-md);}
  /* 手机上返回键在聊天头部（见 .mback），宽屏不需要 */
  .mback{
    display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;cursor:pointer;
    border:0;border-radius:10px;background:transparent;color:var(--text);
    -webkit-tap-highlight-color:transparent;
  }
  .mback:active{background:var(--surface-3);}
  .mback svg{width:20px;height:20px;display:block;}
  /* 「全屏」按钮在手机上无意义（已经是全屏），留着只会占掉本就不够的头部空间 */
  #btn-full{display:none;}
  .chat-head{padding:10px 12px;gap:8px;}
  .chat-head-acts .chat-div{display:none;}

  /* ===== 5. 访客资料 → 全屏覆盖层 ===== */
  .visitor-panel{
    position:fixed;inset:0;z-index:70;width:auto;border:0;border-radius:0;
    padding-top:env(safe-area-inset-top);
  }
  .vp-x{
    display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;cursor:pointer;
    border:0;border-radius:10px;background:transparent;color:var(--text-2);
    -webkit-tap-highlight-color:transparent;
  }
  .vp-x:active{background:var(--surface-3);}
  .vp-x svg{width:18px;height:18px;display:block;}
  .vp-body{padding-bottom:calc(16px + env(safe-area-inset-bottom));}

  /* ===== 6. 内容页：表格横向滚动 =====
     表格是最容易在手机上撑破布局的元素。让**容器**滚动而不是压缩表格 ——
     压缩后的表格每列只剩几个字的宽度，比滚动更难读。 */
  .panel-body,.card,.tab-body{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .panel-body table{min-width:560px;}
  /* 卡片内的两栏/三栏网格统一压成单列 */
  .row-2-1,.row-3{grid-template-columns:1fr;}

  /* ===== 7. 弹窗：铺满宽度、内部可滚 =====
     固定 max-width:400px 在窄屏上会左右各留一条缝，且长表单（知识库、公告）
     会顶出屏幕、底部按钮点不到。 */
  .modal{width:100%;max-width:none;max-height:86dvh;overflow:auto;}
  .modal-mask{padding:12px;}
  .confirm-modal{max-width:none;}

  /* ===== 8. 触摸目标 =====
     手指的点击精度远低于鼠标，30px 以下的小控件会频繁点空/点错。 */
  .btn{min-height:40px;}
  .btn-sm{min-height:34px;}
  .icon-btn{width:38px;height:38px;}
  .seg{padding:3px;}
  .seg-item{min-height:32px;padding:0 14px;}
  .input,.select,.textarea{font-size:16px;}  /* 16px 是 iOS 不触发"聚焦自动放大"的下限 */

  /* ===== 9. 底部安全区 =====
     iPhone 底部横条会盖住输入框的发送按钮。 */
  .chat-input{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .chat-body{padding:14px 12px;}

  /* 页头在窄屏收一行：描述文字占掉的高度在手机上很奢侈 */
  .page-head{margin-bottom:12px;justify-content:flex-start;align-items:center;}
  .page-desc{display:none;}
  .page-title{font-size:19px;}
  /* 顶栏已经显示了当前页名，页头再写一遍标题就是白占两行 ——
     手机上竖向空间最紧张，重复的标题代价最大。
     保留右侧操作区：「客服在线」状态与会话数是这里唯一有价值的信息。 */
  .page-head > div:first-child{display:none;}

  /* ===== 10. 输入区：手机上按钮会把输入框挤成两行 =====
     「📎 + 知识库 + 发送」三个按钮在 390px 下占掉近一半宽度，
     留给输入框的空间连一行提示文字都放不下（实测会被折成两行）。
     改成输入框独占一行、按钮排到下一行。 */
  .chat-input-row{flex-wrap:wrap;}
  .chat-input-row .textarea{order:-1;flex:1 1 100%;}
  .chat-input-row .btn-primary{margin-left:auto;}
}