:root{
  --bg:#0f1115;--panel:#171a21;--panel2:#1e222b;--border:#2a2f3a;
  --text:#e6e8ee;--muted:#8b93a7;--brand:#25d366;--brand2:#128c7e;
  --danger:#ff5c5c;--warn:#ffb020;--r:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:14px}
button{font:inherit;cursor:pointer;border:none;border-radius:8px;padding:8px 14px;font-weight:600;background:var(--brand2);color:#fff}
button:hover{background:var(--brand)}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
button.ghost:hover{color:var(--text)}
button.danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}
button.danger:hover{background:var(--danger);color:#fff}
button.sm{padding:5px 10px;font-size:12px}
input,select,textarea{font:inherit;background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;width:100%}
label{display:block;color:var(--muted);font-size:12px;margin:10px 0 4px}
.hidden{display:none!important}

/* ===== login (two-panel) ===== */
#loginView{min-height:100vh;background:#22c65f}
.loginCard{display:flex;width:100vw;height:100vh;background:#fff;overflow:hidden}
.loginLeft{position:relative;flex:1.15;background:#24cf67;display:flex;align-items:center;justify-content:center;overflow:hidden}
.loginLeft .brand{display:flex;align-items:center;gap:16px;z-index:2}
.loginLeft .logo{width:74px;height:74px}
.loginLeft .word{color:#fff;font-size:48px;font-weight:700;letter-spacing:-.5px}
.doodle{position:absolute;stroke:#fff;fill:none;stroke-width:1.6;opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.loginRight{flex:1;background:#fbfbfd;display:flex;align-items:center;justify-content:center;padding:20px}
.loginForm{width:min(400px,86%)}
.loginRight h1{font-size:40px;margin:0 0 34px;color:#0b0d10;font-weight:800}
.field{position:relative;margin-bottom:16px}
.field .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#9aa1ac;display:flex}
.field input{width:100%;background:#e9ebef;border:1px solid transparent;border-radius:12px;padding:15px 44px;color:#0b0d10;font-size:15px}
.field input::placeholder{color:#9aa1ac}
.field input:focus{outline:none;border-color:#25d366;background:#fff}
.field .eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#9aa1ac;cursor:pointer;display:flex}
.loginRow{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 26px;font-size:14px;color:#6b7280}
.loginRow label{display:flex;align-items:center;gap:8px;margin:0;color:#6b7280;cursor:pointer}
.loginRow input[type=checkbox]{width:auto;accent-color:#25d366}
.loginRow a{color:#6b7280;text-decoration:none;cursor:pointer}
.loginRow a:hover{color:#111}
.loginBtnBig{width:100%;background:#111418;color:#fff;border:none;border-radius:14px;padding:16px;font-size:16px;font-weight:700;cursor:pointer}
.loginBtnBig:hover{background:#000}
.loginErr2{color:#e11d48;font-size:13px;min-height:18px;margin-top:12px;text-align:center}
@media(max-width:820px){.loginLeft{display:none}.loginForm{width:min(400px,90%)}}

/* topbar */
#topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap}
#topbar .title{font-weight:700}
#topbar .title-logo{height:34px;width:auto;display:block;flex:none}
#topbar .grow{flex:1}
.chip{font-size:12px;color:var(--muted);background:var(--panel2);border:1px solid var(--border);padding:4px 10px;border-radius:20px}
.soundrow{display:flex;align-items:center;gap:8px}
.soundrow select{flex:1}

/* 未受理提醒：铃铛 + 徽章 + 横幅 + 会话列表红色计时 */
.bellbtn{position:relative;background:transparent;border:1px solid var(--border);color:var(--muted);padding:7px 10px;border-radius:8px}
.bellbtn:hover{background:var(--panel2);color:var(--text)}
.bellbtn.muted{color:#5a6072}
.bellbtn.ringing{color:var(--warn);border-color:var(--warn);animation:bellShake .8s ease-in-out infinite}
@keyframes bellShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.bell-badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.alertbar{background:linear-gradient(90deg,#3a1414,#4a1d1d);color:#ffd7d7;border-bottom:1px solid var(--danger);padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px}
.alertbar:hover{filter:brightness(1.15)}
.alertbar b{color:#fff}
.wait-timer{background:var(--danger);color:#fff;font-weight:700;font-size:10px;padding:1px 6px;border-radius:9px;white-space:nowrap;flex:none}
.wait-timer.soft{background:var(--warn);color:#3a2600}

/* 多选下拉（分配权限号 / 编辑号码负责人）*/
.msdrop{position:relative}
.msdrop-sum{font-size:12px;color:var(--muted);margin-bottom:6px;line-height:1.4}
.msdrop-panel{background:var(--panel2);border:1px solid var(--border);border-radius:8px;max-height:220px;overflow:auto;padding:4px}
.msdrop-panel label{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;border-radius:6px;color:var(--text);font-size:13px;cursor:pointer}
.msdrop-panel label:hover{background:var(--panel)}
.msdrop-panel input{width:auto}

/* 3 columns */
#cols{display:grid;grid-template-columns:230px 300px 1fr;height:calc(100vh - 53px)}
@media(max-width:820px){#cols{grid-template-columns:1fr}}
.col{border-right:1px solid var(--border);overflow-y:auto}
.col h3{margin:0;padding:12px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}
.row{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;gap:8px;align-items:center}
.row:hover,.row.active{background:var(--panel2)}
.row .nm{font-weight:600}
.row .sm{color:var(--muted);font-size:12px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.online{background:var(--brand)}.dot.offline,.dot.stopped{background:var(--danger)}
.dot.qr,.dot.connecting{background:var(--warn)}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;white-space:nowrap}
.badge.on{background:rgba(37,211,102,.15);color:var(--brand)}
.badge.off{background:rgba(255,92,92,.15);color:var(--danger)}

/* chat */
#chatCol{display:flex;flex-direction:column}
#chatHead{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:75%;padding:8px 12px;border-radius:12px;line-height:1.4;word-break:break-word}
.msg.inbound{align-self:flex-start;background:var(--panel2);border-bottom-left-radius:3px}
.msg.outbound{align-self:flex-end;background:var(--brand2);border-bottom-right-radius:3px}
.msg .meta{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.msg.outbound .meta{color:rgba(255,255,255,.75)}
.tag{font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.15);margin-right:4px}
.tag.ai{background:rgba(37,211,102,.25)}.tag.agent{background:rgba(255,176,32,.25)}
#composer{border-top:1px solid var(--border);padding:10px 12px;display:flex;gap:8px}
#composer textarea{flex:1;resize:none;height:42px}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.modal .box{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:min(760px,94vw);max-height:88vh;overflow-y:auto;padding:20px}
.modal h2{margin:0 0 12px;font-size:16px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{padding:6px 12px;border-radius:8px;background:var(--panel2);color:var(--muted);cursor:pointer;font-size:13px}
.tab.active{color:var(--text);background:var(--brand2)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600}
/* ===== 管理区：不管有多少行/多少人，页面高度都固定 =====
   起因：员工从 5 个涨到 14 个、审计记录只增不减，整页越拖越长。
   做法是把「会长的东西」关进一个定高的框里，让它自己内部滚动。 */
.atable{max-height:44vh;overflow:auto;border:1px solid var(--border);border-radius:10px}
.atable table{margin:0}
/* 表头吸顶：滚到第 30 行时还看得到这一列是「角色」还是「负责范围」 */
.atable th{position:sticky;top:0;background:var(--panel2);z-index:1}
.atable td,.atable th{white-space:nowrap}
/* 行数提示 + 右侧的「+ 新建」按钮 */
.abar{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.abar .cnt{color:var(--muted);font-size:12px}
.abar .grow{flex:1}
/* 新建表单：默认折叠；展开后字段【横向】排，不再是 4 个全宽输入框堆一屏 */
.newbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:10px 12px;border:1px dashed var(--border);border-radius:10px;margin-top:8px}
.newbar .f{display:flex;flex-direction:column;gap:3px}
.newbar .f>label{margin:0;font-size:11px}
.newbar input,.newbar select{width:auto;min-width:150px;padding:7px 10px;font-size:13px}
.newbar .hint{flex-basis:100%;color:var(--muted);font-size:12px;margin-top:2px}
/* 审计筛选条 */
.afilter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.afilter input,.afilter select{width:auto;min-width:140px;padding:6px 10px;font-size:13px}
.qrimg{background:#fff;padding:12px;border-radius:10px;display:inline-block}
.qrimg img{display:block;width:260px;height:260px}
.assignGrid{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:8px}
.assignGrid label{display:flex;align-items:center;gap:8px;margin:0;color:var(--text)}
.assignGrid input{width:auto}
/* 营业时间 tab：勾选框别被全局 input{width:100%} 撑大；表格给点行距 */
#atab-hours input[type="checkbox"]{width:auto}
#atab-hours .bh-table td,#atab-hours .bh-table th{padding:6px 12px 6px 0;text-align:left;vertical-align:middle}
.mut{color:var(--muted);font-size:12px}

/* nav */
.navbtns{display:flex;gap:4px;margin-left:6px}
.navbtn{background:transparent;color:var(--muted);padding:6px 14px;font-size:13px;border-radius:8px}
.navbtn:hover{color:var(--text);background:var(--panel2)}
.navbtn.active{color:#fff;background:var(--brand2)}
.navbtn.active:hover{background:var(--brand)}
/* 整页固定为一屏高，页面本身不滚动；只有内部区域（对话/列表/表格）内部滚动 */
html,body{height:100%;overflow:hidden}
#mainView{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#topbar{flex:none}
#alertBar{flex:none}
.view{flex:1;min-height:0;overflow-y:auto}
/* 隐藏滚动条（滚轮/触控仍可滚动）。textarea 也要加 —— 输入框以前漏在名单外，
   打两行字就露出浏览器默认的亮色滚动条，在深色界面上特别扎眼。*/
.view,.wa-msgs,.wa-chats,.wa-accts-list,.tableWrap,.msgs,textarea{scrollbar-width:none;-ms-overflow-style:none}
.view::-webkit-scrollbar,.wa-msgs::-webkit-scrollbar,.wa-chats::-webkit-scrollbar,.wa-accts-list::-webkit-scrollbar,.tableWrap::-webkit-scrollbar,.msgs::-webkit-scrollbar,textarea::-webkit-scrollbar{width:0;height:0}
.pagehead{display:flex;align-items:baseline;gap:12px;padding:18px 22px 6px;flex-wrap:wrap}
.pagehead h1{margin:0;font-size:20px}
/* 总览标题在「今日总览」(80px) 和「2026-07-22 总览」(154px) 之间跳，
   宽度差 74px —— 每翻一天日期控件就整体左右横移，很难连点。
   给一个下限让两种状态一样宽，日期框位置就钉住了。
   用 em 而不是 px：跟着字号缩放，改字号不会失效。8em ≈ 160px，比最宽的 154px 多一点余量。
   nowrap 防止窄屏时标题自己折行（折了就白撑这个宽度了）。 */
#ovTitle{min-width:8em;white-space:nowrap}
/* 手机等窄屏：撑宽反而会把日期控件挤出屏幕，这时让它自然收缩、整体换行 */
@media(max-width:560px){#ovTitle{min-width:0}}
.ovDate{display:flex;align-items:center;gap:6px}
.ovDate input[type=date]{width:auto;padding:5px 8px;font-size:13px;color-scheme:dark}
.ovDate button{padding:5px 9px}
/* 项目筛选下拉：跟日期控件同一排、同一高度。
   width:auto 是必须的 —— 全局 select 规则写死 width:100%，不覆盖会撑满整行 */
.ovDate select{width:auto;min-width:120px;padding:5px 8px;font-size:13px;margin-left:6px}

/* overview cards */
.ovCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px 22px}
.ovCard{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.ovCard .k{color:var(--muted);font-size:12px;margin-bottom:6px}
.ovCard .k.title{color:var(--text);font-size:15px;font-weight:700}
.settings-cards{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;padding:0 22px}
.settings-cards>.ovCard{flex:1 1 340px;min-width:300px;max-width:440px}
.ovCard .v{font-size:26px;font-weight:700}
.ovCard .v.brand{color:var(--brand)}
.ovCard .v.warn{color:var(--warn)}
.ovCard .sub{color:var(--muted);font-size:11px;margin-top:2px}

/* tables (overview + contacts) */
.tableWrap{margin:10px 22px;border:1px solid var(--border);border-radius:12px;overflow-x:auto}
.tableWrap table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.tableWrap th,.tableWrap td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.tableWrap th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel)}
.tableWrap tbody tr{cursor:default}
.tableWrap tbody tr.clickable{cursor:pointer}
.tableWrap tbody tr.clickable:hover{background:var(--panel2)}
.tableWrap td b{font-weight:600}

/* filters */
.filters{display:flex;gap:8px;padding:10px 22px 0;flex-wrap:wrap;align-items:center}
.filters input{max-width:240px}
.filters select{width:auto;min-width:130px}
.filters button{white-space:nowrap}
.fdate{display:flex;align-items:center;gap:6px;font-size:12px}
.fdate input[type=date]{width:auto;max-width:150px;padding:7px 8px;font-size:12px;color-scheme:dark}
.selbar{display:flex;align-items:center;gap:10px;margin:8px 22px 0;padding:8px 14px;background:#12291f;border:1px solid var(--brand2);border-radius:10px;font-size:13px}
.selbar b{color:var(--brand)}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;padding:14px}
.pager button{background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:6px 12px}
.pager button:disabled{opacity:.4;cursor:default}

/* ===== WhatsApp 风格 对话视图 ===== */
.wa{display:grid;grid-template-columns:210px 300px 1fr;height:100%;min-height:0}
.wa>*{min-height:0}
/* ===== 手机/平板（≤820px）：单栏 + 点客户进全屏对话、返回键回列表 =====
   ⚠️ 选择器都带 `.wa ` 提高一级优先级：本段在文件里位置靠前，而基础 .wa-conv/.wa-accts 等
      规则在后面（同为单类、后者会赢）。加 `.wa ` 变两级，确保手机覆盖无视顺序都生效。 */
@media(max-width:820px){
  .wa{display:flex;flex-direction:column;grid-template-columns:none}
  /* 号码栏 → 顶部横向条 */
  .wa .wa-accts{flex:none;border-right:none;border-bottom:1px solid #222d34}
  .wa .wa-accts-head{display:none}
  .wa .wa-accts-list{flex:none;display:flex;flex-direction:row;overflow-x:auto}
  .wa .wa-acct{flex:none;min-width:140px;border-bottom:none;border-right:1px solid #1a242b}
  .wa .wa-acct .wa-scan.sm{display:none}
  /* 客户列表 → 占满剩余高度 */
  .wa .wa-list{flex:1;border-right:none;min-height:0}
  /* 对话默认藏；点了客户(.show-conv)才全屏，并藏掉号码栏+列表 */
  .wa .wa-conv{display:none}
  .wa.show-conv .wa-accts,.wa.show-conv .wa-list{display:none}
  .wa.show-conv .wa-conv{display:flex;flex:1;min-height:0}
  .wa-conv-head .wa-back{display:flex}
  /* 对话头部在手机上收窄：缩头像、缩间距与按钮内距，避免按钮挤出屏幕被切 */
  .wa .wa-conv-head{gap:6px;padding:8px 10px}
  .wa .wa-conv-head .wa-avatar{width:36px;height:36px;font-size:14px}
  .wa .wa-conv-actions{gap:5px}
  .wa .wa-conv-head .wa-takeover{padding:7px 9px;font-size:12px}
  .wa .wa-conv-head .ghost.sm{padding:6px 8px;font-size:12px}
}

/* 号码栏 */
.wa-accts{background:#0d151b;border-right:1px solid #222d34;display:flex;flex-direction:column;overflow:hidden}
.wa-accts-head{padding:13px 14px;font-size:12px;color:#8696a0;border-bottom:1px solid #222d34}
.wa-accts-list{flex:1;overflow-y:auto}
.wa-acct{padding:11px 13px;border-bottom:1px solid #1a242b;cursor:pointer}
.wa-acct:hover{background:#1b262d}
.wa-acct.active{background:#2a3942}
.wa-acct-top{display:flex;align-items:center;gap:7px}
.wa-acct-top .lbl{color:#e9edef;font-weight:600;font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-acct-sub{color:#8696a0;font-size:11px;margin-top:3px}
.wa-unread{background:#25d366;color:#0b141a;font-weight:700;font-size:11px;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;flex:none}
.wa-scan.sm{margin-top:8px;padding:5px 10px;font-size:12px;border-radius:6px}
.wa-list{background:#111b21;border-right:1px solid #222d34;display:flex;flex-direction:column;overflow:hidden}
.wa-list-head{padding:10px 12px;border-bottom:1px solid #222d34;display:flex;flex-direction:column;gap:8px}
.wa-acctrow{display:flex;gap:8px}
.wa-acctrow select{flex:1;background:#202c33;border:none;color:#e9edef;border-radius:8px;padding:9px 10px;font-size:13px}
.wa-scan{background:#00a884;border:none;color:#fff;border-radius:8px;padding:0 12px;font-weight:600;font-size:12px;cursor:pointer}
.wa-search input{width:100%;background:#202c33;border:none;color:#e9edef;border-radius:18px;padding:9px 16px;font-size:13px}
.wa-search input::placeholder{color:#8696a0}
.wa-chats{flex:1;overflow-y:auto}
.wa-chat-row{display:flex;gap:11px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #1a242b;align-items:center}
.wa-chat-row:hover{background:#1b262d}
.wa-chat-row.active{background:#2a3942}
.wa-avatar{width:44px;height:44px;border-radius:50%;background:#6a7175;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:none;font-size:17px}
.wa-chat-row .body{flex:1;min-width:0}
.wa-chat-row .top{display:flex;justify-content:space-between;gap:8px}
.wa-chat-row .nm{color:#e9edef;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-row .tm{color:#8696a0;font-size:11px;flex:none}
.wa-chat-row .msg{color:#8696a0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.wa-empty{padding:40px 16px;text-align:center;color:#8696a0}

.wa-conv{position:relative;display:flex;flex-direction:column;min-width:0;background:#0b141a}
.wa-conv-empty{margin:auto;color:#8696a0}
/* position:relative 是给拖图提示层 .wa-drop 当定位基准的，删了它提示层会盖满整个页面 */
.wa-conv-main{display:flex;flex-direction:column;height:100%;position:relative}
.wa-conv-head{display:flex;align-items:center;gap:12px;padding:9px 16px;background:#202c33;border-bottom:1px solid #222d34;z-index:3}
.wa-conv-title{flex:1;min-width:0}
.wa-conv-title .nm{color:#e9edef;font-weight:500}
.wa-conv-title .sm{color:#8696a0;font-size:12px}
.wa-conv-actions{display:flex;align-items:center;gap:8px}
/* 返回键：只在手机/平板显示（桌面 display:none，靠上面的媒体查询打开） */
.wa-back{display:none;align-items:center;justify-content:center;background:transparent;border:none;color:#aebac1;cursor:pointer;padding:6px;border-radius:50%;flex:none;margin-left:-4px}
.wa-back:hover{background:#374045}
.wa-takeover{border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;color:#fff;white-space:nowrap}
.wa-takeover.stop{background:#d9455f}
.wa-takeover.stop:hover{background:#c53350}
.wa-takeover.resume{background:#00a884}
.wa-takeover.resume:hover{background:#02c19a}
.wa-iconbtn{background:transparent;border:none;color:#aebac1;cursor:pointer;padding:7px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.wa-iconbtn:hover{background:#374045}
.wa-search-bar{display:flex;gap:8px;padding:8px 16px;background:#202c33;border-bottom:1px solid #222d34;align-items:center;z-index:2}
.wa-search-bar input{flex:1;background:#111b21;border:none;color:#e9edef;border-radius:8px;padding:9px 12px;font-size:13px}

.wa-msgs{flex:1;overflow-y:auto;padding:18px 7%;display:flex;flex-direction:column;gap:3px;
  background-color:#0b141a;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.035%22%3E%3Cpath%20d%3D%22M20%2022c-3-4-10-2-10%203%200%205%2010%2011%2010%2011s10-6%2010-11c0-5-7-7-10-3z%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%2226%22%20r%3D%2211%22%2F%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%2223%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22116%22%20cy%3D%2223%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M107%2030a6%206%200%200010%200%22%2F%3E%3Cpath%20d%3D%22M18%20100h26a4%204%200%20014%204v12a4%204%200%2001-4%204H30l-9%207v-7a4%204%200%2001-2-3v-13a4%204%200%20011-4z%22%2F%3E%3Cpath%20d%3D%22M120%2095l16-6-6%2016-3-7-7-3z%22%2F%3E%3Cpath%20d%3D%22M70%2060l8%208%2014-16%22%2F%3E%3Ccircle%20cx%3D%2275%22%20cy%3D%22120%22%20r%3D%2212%22%2F%3E%3Cpath%20d%3D%22M75%20113v7l4%203%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.wa-msgs .msg{max-width:66%;padding:6px 9px 4px;border-radius:8px;font-size:14px;line-height:1.35;color:#e9edef;box-shadow:0 1px .5px rgba(0,0,0,.25);word-break:break-word}
.wa-msgs .msg.inbound{align-self:flex-start;background:#202c33;border-top-left-radius:2px}
.wa-msgs .msg.outbound{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.wa-msgs .msg .meta{display:block;text-align:right;font-size:10px;color:#8696a0;margin-top:2px}
.wa-msgs .msg.outbound .meta{color:#a6c9bd}
.wa-msgs .msg .tag{font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.15);margin-right:4px}
.wa-msgs .msg .tag.ai{background:rgba(37,211,102,.3)}
.wa-msgs .msg .tag.agent{background:rgba(255,176,32,.3)}
/* 文件气泡：图标 + 文件名 + 大小，整块可点下载 */
.wa-msgs .msg .doc-msg{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:5px 2px;min-width:180px;max-width:100%}
.wa-msgs .msg .doc-msg:hover .doc-name{text-decoration:underline}
.wa-msgs .msg .doc-ico{font-size:22px;line-height:1;flex:none}
.wa-msgs .msg .doc-meta{display:flex;flex-direction:column;min-width:0}
.wa-msgs .msg .doc-name{font-weight:600;overflow-wrap:anywhere}
.wa-msgs .msg .doc-size{font-size:10.5px;color:#8696a0;margin-top:1px}
.wa-msgs .msg.outbound .doc-size{color:#a6c9bd}
/* 输入框上方的待发送预览条：文件没有缩略图，给一行「图标 文件名 大小」 */
.mb-doc{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  background:rgba(255,255,255,.06);border:1px solid #2a3942;border-radius:8px;
  font-size:12px;color:#e9edef;max-width:320px}
.mb-doc b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-doc i{font-style:normal;color:#8696a0;flex:none}
/* 消息里的网址：可点击。收到(深灰)和发出(深绿)两种气泡底色不同，各给一个够亮的颜色。
   overflow-wrap:anywhere —— 长网址不换行会把气泡撑破，横向滚动整个界面 */
.wa-msgs .msg a.msg-link{color:#7fc4ff;text-decoration:underline;overflow-wrap:anywhere}
.wa-msgs .msg a.msg-link:hover{color:#a9d9ff}
.wa-msgs .msg.outbound a.msg-link{color:#9fe6c4}
.wa-msgs .msg.outbound a.msg-link:hover{color:#c4f0da}
/* 📱 手机：这条是客服直接用那台 WhatsApp 手机发出去的，不是从网页发的 */
.wa-msgs .msg .tag.phone{background:rgba(120,180,255,.32)}
.wa-msgs .msg.hidefind{display:none}
/* 「↑ 加载更早的消息」：贴在消息列表最顶上。列表是 flex 纵向，要 align-self 才不会被拉宽 */
.load-older{align-self:center;margin:2px 0 10px}
.load-older button{background:rgba(255,255,255,.08);color:#8696a0;border:1px solid #2a3942;
  border-radius:14px;padding:5px 14px;font-size:12px;cursor:pointer}
.load-older button:hover:not(:disabled){background:rgba(255,255,255,.14);color:#e9edef}
.load-older button:disabled{opacity:.5;cursor:default}
/* 「↓ 有新消息」浮标：客服在上面翻记录时用，点一下跳回最新 */
.newmsg-pill{position:absolute;right:22px;bottom:104px;z-index:4;
  background:#25d366;color:#0b141a;font-size:12px;font-weight:600;
  border:0;border-radius:16px;padding:7px 14px;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.45)}
.newmsg-pill:hover{background:#1fbe5a}
.wa-msgs .msg.pending{opacity:.65}
.wa-msgs mark{background:#f6c445;color:#000;border-radius:2px;padding:0 1px}
.edited-tag{font-size:9px;color:#8696a0;font-style:italic;margin-right:5px}
.edit-msg{cursor:pointer;color:#7fd0f0;font-size:10px;margin-left:6px}
.edit-msg:hover{text-decoration:underline}

.wa-composer{display:flex;gap:10px;align-items:flex-end;padding:10px 16px;background:#202c33;position:relative}
/* ⚡ 语气优化菜单（点 ⚡ 弹出，选一种语气再优化）*/
.tone-popup{position:absolute;bottom:60px;right:56px;background:#233138;border:1px solid #2a3942;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:50;min-width:140px}
.tone-title{font-size:11px;color:#8696a0;padding:2px 8px 4px}
.tone-opt{background:#2a3942;border:none;color:#e9edef;text-align:left;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.tone-opt:hover{background:#374551}
/* 「还原成我打的原句」：跟五种语气区分开（它不是一种语气，是撤销）*/
.tone-restore{background:transparent;border-top:1px solid #2a3942;border-radius:0;color:#8696a0;
  font-size:12px;margin-top:2px;padding-top:9px}
.tone-restore:hover{background:transparent;color:#e9edef}
/* height 由 JS 随内容调（growReply），min-height 保证空框不会缩得比一行还矮；
   超过 max-height 就在框内滚动（滚动条已隐藏）*/
.wa-composer textarea{flex:1;background:#2a3942;border:none;color:#e9edef;border-radius:20px;padding:11px 16px;resize:none;height:44px;min-height:44px;max-height:120px;font-size:14px;overflow-y:auto}
.wa-composer textarea::placeholder{color:#8696a0}
.wa-send{background:#00a884;border:none;color:#fff;border-radius:50%;width:44px;height:44px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.wa-send:hover{background:#02c19a}
.wa-send.mic{background:#2a3942}
.wa-send.mic:hover{background:#374551}
.wa-send.ai-opt{background:#2a3942;color:#ffd75e}
.wa-send.ai-opt:hover{background:#374551}
.wa-send.ai-opt.busy{opacity:.6;pointer-events:none;animation:recPulse 1s ease-in-out infinite}
.wa-send.mic.recording{background:#d9455f;animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.55}}
.rec-timer{color:#ff8a9b;font-size:13px;font-weight:600;align-self:center;min-width:34px;text-align:right}
.voice-msg{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;user-select:none}
.voice-msg:hover{text-decoration:underline}

/* 表情/附件图标按钮（composer 左侧）——做大更明显，圆形填充跟发送键一致 */
.wa-icon-btn{background:#2a3942;border:none;color:#aebac1;cursor:pointer;flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.wa-icon-btn:hover{color:#fff;background:#3b4a54}
.wa-icon-btn svg{width:25px;height:25px;flex:none}
#attachBtn{background:#00a884;color:#fff}
#attachBtn:hover{background:#02c19a}
/* 表情按钮：背景与语音(mic)按钮一致的深色，图标浅灰 */
#emojiBtn{background:#2a3942;color:#aebac1}
#emojiBtn:hover{background:#374551;color:#fff}

/* 表情面板（分类 + 搜索）—— 固定高度，切任何分类都统一显示约 4 行，超出在内部滚动 */
.emoji-panel{display:flex;flex-direction:column;background:#0b141a;border-top:1px solid #202c33}
.emoji-head{padding:8px 10px 0;background:#0b141a;border-bottom:1px solid #202c33}
.emoji-tabs{display:flex;gap:2px;margin-bottom:6px}
.emoji-tab{flex:1;text-align:center;font-size:20px;padding:6px 0;cursor:pointer;border-radius:6px 6px 0 0;opacity:.55;line-height:1}
.emoji-tab:hover{background:#2a3942;opacity:1}
.emoji-tab.active{background:#2a3942;opacity:1;box-shadow:inset 0 -3px 0 #00a884}
.emoji-search{width:100%;box-sizing:border-box;background:#2a3942;border:none;color:#e9edef;border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:8px}
.emoji-search::placeholder{color:#8696a0}
.emoji-grid{overflow-y:auto;padding:0 8px 8px;height:170px;scrollbar-width:none;-ms-overflow-style:none}
.emoji-grid::-webkit-scrollbar{display:none;width:0;height:0}
.emoji-cat-title{font-size:11px;color:#8696a0;margin:6px 2px 4px;font-weight:600;position:sticky;top:0;background:#0b141a;padding:2px 0;z-index:1}
.emoji-row{display:flex;flex-wrap:wrap;gap:1px}
.emoji-item{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border-radius:6px;line-height:1}
.emoji-item:hover{background:#2a3942}

/* 对话里的图片/影片气泡 */
.chat-media{max-width:240px;max-height:280px;border-radius:8px;display:block;cursor:pointer;background:#0b141a;min-width:80px;min-height:44px}
video.chat-media{cursor:default}
.media-cap{margin-top:5px;font-size:14px;white-space:pre-wrap;word-break:break-word}

/* 点图放大浮层 */
.media-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}
.media-lightbox img{max-width:94vw;max-height:94vh;border-radius:6px}

/* ===== 从文件夹拖图片进来时的提示层 ===== */
/* ⚠️ pointer-events:none 是关键：这层盖在对话区上面，若能接收鼠标事件，
   它会在 dragenter 的瞬间挡住底下的元素 → dragleave 立刻触发 → 提示疯狂闪烁，
   而且 drop 会落在这层上而不是对话区。它纯粹是「看的」，不参与交互。*/
.wa-drop{position:absolute;inset:0;z-index:20;pointer-events:none;
  background:rgba(11,20,26,.82);display:flex;align-items:center;justify-content:center}
.wa-drop.hidden{display:none}
.wa-drop-box{border:2px dashed #00a884;border-radius:14px;padding:26px 40px;text-align:center;
  color:#e9edef;font-size:17px;font-weight:600;background:rgba(32,44,51,.96)}
.wa-drop-box small{display:block;margin-top:7px;font-size:12px;font-weight:400;color:#8696a0}

/* ===== 待发送的图片/影片：贴在输入框上方（说明文字写在原本的输入框里）===== */
.wa-mediabar{display:flex;align-items:center;gap:12px;padding:10px 16px 0;background:#202c33}
.wa-mediabar.hidden{display:none}
.mb-item{position:relative;flex:0 0 auto;line-height:0}
.mb-item img,.mb-item video{width:104px;height:104px;object-fit:cover;border-radius:10px;border:1px solid #3b4a54;background:#0b141a}
/* ✕ 压在缩略图右上角；深色描边保证压在亮色图片上也看得清 */
.mb-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:#0b141a;border:1px solid #3b4a54;color:#e9edef;font-size:12px;line-height:20px;
  text-align:center;cursor:pointer;user-select:none}
.mb-x:hover{background:#f15c6d;border-color:#f15c6d;color:#fff}
.mb-hint{font-size:12px;color:#8696a0;line-height:1.5}

/* 客户资料面板（标签/备注/统计/会员） */
.wa-profile{background:var(--panel);border-bottom:1px solid var(--border);padding:12px 16px;max-height:44vh;overflow-y:auto}
.wa-profile .pf-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;margin-bottom:8px}
.wa-profile .pf-k{color:var(--muted)}
.wa-profile .pf-v a{color:var(--brand);text-decoration:none}
.wa-profile .pf-v a:hover{text-decoration:underline}
.wa-profile label{display:block;color:var(--muted);font-size:12px;margin:8px 0 3px}
.wa-profile textarea{height:54px;resize:vertical}
.wa-profile .pf-ok{color:var(--brand);font-size:12px;margin-left:8px}
.merge-box{margin-top:12px;padding:10px;border:1px dashed var(--border);border-radius:8px;background:var(--panel2)}
.merge-title{font-weight:600;font-size:13px;margin-bottom:4px}
.merge-box input{width:100%;box-sizing:border-box}

/* 快捷回复模板条 */
#tplBar{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:wrap;overflow-x:auto;background:#0b141a}
.chipbtn{font-size:12px;padding:4px 10px;border-radius:14px;background:var(--panel2);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;font-weight:500}
.chipbtn:hover{background:var(--brand2);border-color:var(--brand2);color:#fff}

/* 会员资料盒（Google 表） */
.member-box{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.member-box .member-head{font-weight:600;font-size:13px;margin-bottom:6px}
.member-box .member-badge{display:inline-block;background:linear-gradient(90deg,#b8860b,#ffd700);color:#1a1a1a;font-weight:700;font-size:12px;padding:3px 12px;border-radius:20px;margin-bottom:8px}
.member-box label{margin:6px 0 3px}
.member-box input{padding:6px 10px}

/* ===== 转人工摘要 + 客户标签（新增功能）===== */
/* 客户标签小圆片（对话列表 + 客户库）。警示类（投诉过）标红 */
.tagchip{display:inline-block;font-size:10px;line-height:1.5;padding:0 6px;border-radius:8px;margin-left:5px;
  background:var(--panel2);border:1px solid var(--border);color:var(--muted);vertical-align:middle;white-space:nowrap}
.tagchip.warn{background:rgba(240,80,80,.15);border-color:rgba(240,80,80,.5);color:#ff8a8a;font-weight:600}

/* AI 转人工交接横幅（对话上方，客服接手前先看） */
.wa-handoff{background:rgba(255,176,32,.10);border-bottom:1px solid var(--border);border-left:3px solid #ffb020;padding:10px 16px}
.wa-handoff .ho-head{font-size:12px;font-weight:600;color:#ffb020;margin-bottom:5px}
.wa-handoff .ho-why{color:var(--text);font-weight:500}
.wa-handoff .ho-at{float:right;color:var(--muted);font-weight:400}
.wa-handoff .ho-sum{font-size:13px;line-height:1.6;color:var(--text);white-space:normal}
.wa-handoff .ho-sum.mut{color:var(--muted);font-size:12px}

/* ===== 总览：⚡ 按客服统计 ===== */
.ovByUser{margin:14px 22px 22px;border:1px solid var(--border);border-radius:10px;padding:10px 14px;background:var(--panel)}
.ovUserHead{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
.ovUserRow{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--border)}
.ovUserRow:last-child{border-bottom:none}
.ovUserRow .nm{font-weight:600;min-width:130px}
.ovUserRow .ct{color:var(--brand);font-weight:600;min-width:70px}
.ovUserRow .cost{color:var(--muted);font-size:12px}