/* =========================================================================
 * 客服聊天室（/chat/ 客户页 + /chat/admin/ 工作台）
 * 视觉沿用购买页：浅灰底 #f7f8fa、墨色 #131212、蓝色渐变 #095ddc→#8ebafc
 * ========================================================================= */

:root{
  --bg:#f7f8fa;
  --white:#fff;
  --ink:#131212;
  --body:#5e5e66;
  --muted:#8d8e99;
  --line:#eceef2;
  --line-2:#e2e5ea;
  --blue:#0958d9;
  --blue-from:#095ddc;
  --blue-to:#8ebafc;
  --red:#f1343a;
  --green:#22c55e;
  --radius:18px;
  --shadow:0 18px 50px rgba(17,17,17,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:MiSans,Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%}
::selection{background:#cfe2ff}

.brand-logo{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:inline-block;position:relative;
  background:linear-gradient(141.6deg,var(--blue-from) 1.6%,var(--blue-to) 98.3%);
}
.brand-logo::after{content:"";position:absolute;inset:8px;background:#fff;border-radius:3px}
.brand-logo--lg{width:46px;height:46px;border-radius:14px}
.brand-logo--lg::after{inset:14px;border-radius:4px}

.icon-btn{
  width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;
  color:#5e5e66;border:1px solid transparent;flex:0 0 auto;
}
.icon-btn:hover{background:#f1f3f6;color:var(--ink)}
.icon-btn svg{width:19px;height:19px;display:block}
.icon-btn.is-off{color:#c3c7ce}
.icon-btn .sound-off{display:none}
.icon-btn.is-off .sound-wave{display:none}
.icon-btn.is-off .sound-off{display:block}

.mini-btn{
  height:34px;padding:0 14px;border-radius:9px;border:1px solid #d7dbe2;background:#fff;
  font-size:13px;color:#5e5e66;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.mini-btn:hover{border-color:#b9c0ca;color:var(--ink)}

/* ============================ 客户页布局 ============================ */
.chat-page{height:100vh;height:100dvh;overflow:hidden;background:
  radial-gradient(900px 520px at 50% -10%, #eaf2ff 0%, rgba(234,242,255,0) 62%), var(--bg);}
.chat-shell{height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;padding:22px}
.chat-app{
  position:relative;width:min(900px,100%);height:min(880px,100%);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:var(--white);border:1px solid #e9ebef;border-radius:24px;box-shadow:var(--shadow);
}
.chat-app:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;box-shadow:none}
.chat-app.is-immersive{
  position:fixed;inset:0;z-index:9998;width:100vw;height:100vh;height:100dvh;
  border:0;border-radius:0;box-shadow:none;
}

.chat-top{
  flex:0 0 auto;height:64px;padding:0 16px 0 18px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;background:#fff;border-bottom:1px solid var(--line);
  position:relative;z-index:2;
}
.chat-brand{display:flex;align-items:center;gap:11px;min-width:0}
.chat-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.chat-brand-text b{font-size:15px;letter-spacing:.2px}
.chat-status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:2px}
.chat-status .dot{width:7px;height:7px;border-radius:50%;background:#c3c7ce;flex:0 0 auto}
.chat-status.is-online .dot{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.chat-status.is-online{color:#178a45}
.chat-tools{display:flex;align-items:center;gap:2px}

.chat-main{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#f8fafc 0%,#f5f6f8 100%);
  scrollbar-width:thin;scrollbar-color:#d4d8df transparent;
}
.chat-main::-webkit-scrollbar{width:8px}
.chat-main::-webkit-scrollbar-thumb{background:#d9dde3;border-radius:4px}

/* 首次进入 */
.intro{min-height:100%;display:flex;align-items:center;justify-content:center;padding:30px 18px}
.intro-card{
  width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:30px 30px 24px;text-align:center;box-shadow:0 16px 44px rgba(17,17,17,.06);
}
.intro-logo{display:inline-flex}
.intro-card h1{font-size:23px;line-height:1.3;margin:16px 0 8px;letter-spacing:.3px}
.intro-sub{font-size:13.5px;color:var(--body);line-height:1.8}
.btn-primary{
  width:100%;height:46px;margin-top:22px;border-radius:12px;color:#fff;font-size:15px;font-weight:600;
  background:linear-gradient(160deg,#095ddc 0%,#2f79ee 100%);
  box-shadow:0 8px 20px rgba(9,93,220,.22);transition:filter .15s,transform .1s;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6;cursor:default;box-shadow:none}
.intro-note{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.7}
.intro-note--small{color:#a8acb4;margin-top:4px}

/* ============================ 消息列表 ============================ */
.msgs{padding:20px 20px 10px;display:flex;flex-direction:column;gap:6px;min-height:100%}
.msgs--admin{padding:20px 22px 12px;min-height:0}
.msg-date{text-align:center;font-size:11.5px;color:#9aa0a9;padding:10px 0 6px;user-select:none}
.msg-system{text-align:center;padding:10px 0}
.msg-system span{
  display:inline-block;max-width:min(92%,560px);text-align:left;white-space:pre-wrap;
  background:#eef3fa;color:#546070;border:1px solid #e0e8f3;border-radius:14px;
  padding:12px 15px;font-size:12.5px;line-height:1.8;
}

.msg{display:flex;gap:9px;align-items:flex-end;padding:3px 0;max-width:100%}
.msg-avatar{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:13px;font-weight:600;color:#0958d9;background:linear-gradient(160deg,#e9f1ff,#d7e6ff);
  border:1px solid #dbe7fb;overflow:hidden;user-select:none;
}
.msg-avatar--admin{background:#fff;border-color:#e6e9ee}
.msg-avatar--admin .brand-logo{width:20px;height:20px;border-radius:6px}
.msg-avatar--admin .brand-logo::after{inset:6px;border-radius:2px}
.msg-main{display:flex;flex-direction:column;gap:3px;max-width:min(74%,600px);min-width:0}
.msg-name{font-size:11px;color:#9aa0a9;padding:0 4px}
.msg-bubble{
  padding:10px 14px;border-radius:15px;font-size:14.5px;line-height:1.7;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
  box-shadow:0 2px 6px rgba(17,17,17,.03);
}
.msg-time{font-size:10.5px;color:#a8acb4;padding:0 4px;line-height:1.2}
.msg--peer .msg-bubble{border-bottom-left-radius:5px}
.msg--me{flex-direction:row-reverse}
.msg--me .msg-main{align-items:flex-end}
.msg--me .msg-bubble{
  background:linear-gradient(160deg,#095ddc 0%,#2f79ee 100%);border-color:transparent;color:#fff;
  border-bottom-left-radius:15px;border-bottom-right-radius:5px;box-shadow:0 6px 16px rgba(9,93,220,.16);
}
.msg--me .msg-time{text-align:right}
.msg-bubble--image{padding:4px;background:#fff;line-height:0}
.msg--me .msg-bubble--image{background:rgba(255,255,255,.16)}
.msg-bubble--image img{
  display:block;max-width:260px;max-height:320px;width:auto;height:auto;border-radius:11px;
  cursor:zoom-in;object-fit:contain;background:#f2f4f7;
}
.msg-receipt{font-size:10.5px;color:#a8acb4;text-align:right;padding:2px 5px 0}
.msg-pending{opacity:.62}
.msg-failed .msg-bubble{border-color:#f0b4b6;background:#fff5f5;color:#b42318}

/* 加载更早 */
.load-older{
  align-self:center;margin:6px auto 12px;height:28px;padding:0 15px;border-radius:999px;
  border:1px solid #e3e7ec;background:#fff;font-size:12px;color:#5e5e66;
}
.load-older:hover{border-color:#9fc1f7;color:#0958d9}

/* 有新消息 */
.jump-new{
  position:absolute;left:50%;bottom:112px;transform:translateX(-50%);z-index:6;
  height:30px;padding:0 14px;border-radius:999px;background:#131212;color:#fff;
  font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.18);white-space:nowrap;
}

/* ============================ 输入区 ============================ */
.composer{
  position:relative;flex:0 0 auto;background:#fff;border-top:1px solid var(--line);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
}
.composer--admin{padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px))}
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{
  flex:0 0 auto;height:28px;padding:0 12px;border-radius:999px;border:1px solid #e3e7ec;
  background:#fafbfc;font-size:12px;color:#5e5e66;white-space:nowrap;
}
.chips button:hover{border-color:#9fc1f7;color:#0958d9;background:#f5f9ff}
.chips button.chips-quick{
  border-color:#cfe2ff;background:#f2f7ff;color:#0958d9;font-weight:600;
}
.chips button.chips-quick:hover{background:#e9f2ff;border-color:#9fc1f7}
.chips-sep{flex:0 0 auto;width:1px;height:16px;margin:6px 2px;background:#e3e7ec}
.chips button.chips-qr,.chips button.chips-card{font-weight:600;padding-left:10px;padding-right:10px}
.chips button.chips-qr::before,.chips button.chips-card::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:2px;
  margin-right:5px;vertical-align:1px;background:currentColor;
}
.chips button.chips-qr--alipay{border-color:#c9ddff;background:#f6faff;color:#0b57d0}
.chips button.chips-qr--alipay:hover{border-color:#9fc1f7;background:#eaf3ff;color:#0958d9}
.chips button.chips-qr--wechat{border-color:#c4ecd6;background:#f4fdf8;color:#07904b}
.chips button.chips-qr--wechat:hover{border-color:#8bd6ad;background:#eafaf1;color:#067a40}
.chips button.chips-card--notice{border-color:#ddd0ff;background:#f8f5ff;color:#6941d8}
.chips button.chips-card--notice:hover{border-color:#c4b0ff;background:#f1ebff;color:#5a32c9}
.chips button.chips-card--delivery{border-color:#f3cbe2;background:#fff6fb;color:#b03a7a}
.chips button.chips-card--delivery:hover{border-color:#e8a9cd;background:#ffedf6;color:#9c2d69}

/* 工作台顶栏：当前接待状态（点击打开接待设置） */
.admin-presence{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
  border:1px solid #e3e7ec;border-radius:999px;background:#fff;
  font-size:12px;color:#8d8e99;white-space:nowrap;
}
.admin-presence i{width:7px;height:7px;border-radius:50%;background:#c8ccd4;flex:0 0 auto}
.admin-presence.is-online{border-color:#ccebd9;background:#f4fdf8;color:#127a3d}
.admin-presence.is-online i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.admin-presence.is-offline{border-color:#f0d6d7;background:#fff8f8;color:#b43a3f}
.admin-presence.is-offline i{background:#e06b6f}
.admin-presence:hover{border-color:#c9cfd8}

/* 接待设置（仅客服可见） */
.settings-pop{
  position:fixed;top:68px;right:16px;z-index:60;width:min(440px,calc(100vw - 32px));
  padding:14px 16px;background:#fff;border:1px solid #e3e7ec;border-radius:14px;
  box-shadow:0 22px 60px rgba(17,17,17,.18);
}
.settings-head{display:flex;align-items:baseline;gap:8px}
.settings-head b{font-size:14px}
.settings-head span{font-size:11px;color:#8d8e99}
.settings-x{margin-left:auto;width:26px;height:26px;border-radius:7px;font-size:18px;line-height:1;color:#8d8e99;background:none}
.settings-x:hover{background:#f1f3f6;color:#131212}
.settings-label{display:block;font-size:12px;color:#5e5e66;margin:12px 0 6px}
.settings-label span{color:#a8acb4;font-weight:400;margin-left:4px}
.settings-modes{display:flex;gap:7px}
.settings-modes button{
  flex:1;height:32px;border:1px solid #e2e5ea;border-radius:9px;background:#fff;
  font-size:12.5px;color:#5e5e66;
}
.settings-modes button:hover{border-color:#9fc1f7;color:#0958d9}
.settings-modes button.is-active{background:#131212;border-color:#131212;color:#fff}
.settings-hint{font-size:11px;color:#8d8e99;line-height:1.6;margin-top:6px}
.settings-pop textarea{
  width:100%;min-height:92px;max-height:220px;resize:vertical;
  border:1px solid #e2e5ea;border-radius:10px;padding:8px 10px;
  font-family:inherit;font-size:13px;line-height:1.6;outline:none;color:var(--ink);
}
.settings-pop textarea:focus{border-color:#9fc1f7;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
#settingsWelcome{min-height:122px}
.settings-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.settings-reset{font-size:12px;color:#8d8e99;padding:0 2px}
.settings-reset:hover{color:#131212}
.settings-save{
  height:34px;padding:0 18px;border-radius:9px;color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(160deg,#095ddc 0%,#2f79ee 100%);
}
.settings-save:hover{filter:brightness(1.05)}
.settings-save:disabled{opacity:.55;cursor:default}
@media (max-width:700px){
  .settings-pop{top:64px;left:8px;right:8px;width:auto;max-height:calc(100vh - 80px);overflow:auto}
}

/* 客户备注弹层（仅客服可见） */
.note-pop{
  position:absolute;top:70px;right:16px;z-index:45;width:min(360px,calc(100% - 32px));
  padding:12px 14px;background:#fff;border:1px solid #e3e7ec;border-radius:14px;
  box-shadow:0 18px 50px rgba(17,17,17,.16);
}
.note-pop-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.note-pop-head b{font-size:13.5px}
.note-pop-head span{font-size:11px;color:#8d8e99}
.note-field{display:block;font-size:11.5px;color:#8d8e99;margin:9px 0 5px}
.note-field span{color:#a8acb4;margin-left:4px}
.note-name{
  width:100%;height:36px;border:1px solid #e2e5ea;border-radius:9px;padding:0 10px;
  font-family:inherit;font-size:13px;outline:none;color:var(--ink);background:#fff;
}
.note-name:focus{border-color:#9fc1f7;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
.note-pop textarea{
  width:100%;min-height:74px;max-height:160px;resize:vertical;
  border:1px solid #e2e5ea;border-radius:10px;padding:8px 10px;
  font-family:inherit;font-size:13px;line-height:1.6;outline:none;color:var(--ink);
}
.note-pop textarea:focus{border-color:#9fc1f7;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
.note-pop-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.note-save{
  height:34px;padding:0 16px;border-radius:9px;color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(160deg,#095ddc 0%,#2f79ee 100%);
}
.note-save:hover{filter:brightness(1.05)}
.note-save:disabled{opacity:.55;cursor:default}

/* 常用语面板（客服工作台） */
.quick-panel{
  position:absolute;left:14px;right:14px;bottom:calc(100% + 8px);z-index:40;
  max-height:min(56vh,520px);display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #e3e7ec;border-radius:16px;
  box-shadow:0 18px 50px rgba(17,17,17,.16);
}
.quick-head{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:11px 12px 11px 15px;
  border-bottom:1px solid var(--line);
}
.quick-head b{font-size:14px;flex:0 0 auto}
.quick-head span{
  flex:1;min-width:0;font-size:11.5px;color:#8d8e99;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.quick-close{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-size:19px;line-height:1;color:#8d8e99;flex:0 0 auto;
}
.quick-close:hover{background:#f1f3f6;color:#131212}
.quick-list{overflow-y:auto;padding:6px;scrollbar-width:thin}
.quick-list::-webkit-scrollbar{width:7px}
.quick-list::-webkit-scrollbar-thumb{background:#dde1e7;border-radius:4px}
.quick-item{
  display:block;width:100%;padding:10px 11px;border-radius:10px;text-align:left;
  border:1px solid transparent;background:transparent;
}
.quick-item:hover{background:#f5f9ff;border-color:#d8e7ff}
.quick-item b{display:block;font-size:13px;color:#131212}
.quick-item span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:2px;font-size:11.5px;color:#8d8e99;line-height:1.6;white-space:pre-line;
}
.quick-item:hover b{color:#0958d9}
.composer-row{display:flex;align-items:flex-end;gap:8px}
.attach-btn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  color:#5e5e66;border:1px solid transparent;
}
.attach-btn:hover{background:#f1f3f6;color:var(--ink)}
.attach-btn svg{width:20px;height:20px}
.composer textarea{
  flex:1;min-width:0;min-height:38px;max-height:132px;resize:none;overflow-y:auto;
  border:1px solid var(--line-2);border-radius:12px;padding:8px 13px;font-size:14px;
  font-family:inherit;line-height:1.55;outline:none;color:var(--ink);background:#fff;
  scrollbar-width:thin;
}
.composer textarea:focus{border-color:#9fc1f7;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
.composer textarea::placeholder{color:#a8acb4}
.send-btn{
  height:38px;padding:0 20px;border-radius:11px;flex:0 0 auto;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(160deg,#095ddc 0%,#2f79ee 100%);
  box-shadow:0 6px 14px rgba(9,93,220,.18);transition:filter .15s,opacity .15s;
}
.send-btn:hover{filter:brightness(1.05)}
.send-btn:disabled{opacity:.42;cursor:default;box-shadow:none;filter:none}
.composer-hint{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:10.5px;color:#a8acb4;padding:5px 3px 0;min-height:15px;
}
.composer-hint span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 断网提示 */
.net-bar{
  position:absolute;left:50%;top:72px;transform:translateX(-50%);z-index:20;
  background:#131212;color:#fff;font-size:12px;padding:6px 14px;border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.2);white-space:nowrap;
}

/* ============================ 图片查看器 ============================ */
.lightbox{
  position:fixed;inset:0;z-index:10000;background:rgba(10,10,12,.88);
  display:grid;place-items:center;padding:24px;cursor:zoom-out;
}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:8px;box-shadow:0 24px 80px rgba(0,0,0,.4)}
.lightbox-x{
  position:fixed;top:16px;right:18px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;
}
.lightbox-x:hover{background:rgba(255,255,255,.24)}

/* 轻提示 */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:10001;
  background:rgba(19,18,18,.92);color:#fff;font-size:13px;padding:9px 18px;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);max-width:86vw;text-align:center;
}

/* ============================ 管理台布局 ============================ */
.admin-page{height:100vh;height:100dvh;overflow:hidden;background:#f2f4f7}
.admin-app{height:100vh;height:100dvh;display:flex;flex-direction:column;background:#f2f4f7}
.admin-app:fullscreen{height:100vh}
.admin-top{
  flex:0 0 auto;height:58px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2;
}
.admin-brand{display:flex;align-items:center;gap:10px;min-width:0}
.admin-brand b{font-size:15px;letter-spacing:.2px}
.admin-brand-note{font-size:12px;color:var(--muted);margin-left:2px}
.admin-tools{display:flex;align-items:center;gap:6px}
.admin-main{
  flex:1;min-height:0;display:flex;gap:14px;padding:14px 18px 18px;
}

.conv-pane{
  width:340px;flex:0 0 340px;min-height:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid #e9ebef;border-radius:16px;overflow:hidden;
}
.conv-search{padding:12px 12px 8px;position:relative}
.conv-search svg{
  position:absolute;left:24px;top:50%;transform:translateY(-42%);
  width:16px;height:16px;color:#a8acb4;pointer-events:none;
}
.conv-search input{
  width:100%;height:38px;border:1px solid var(--line-2);border-radius:10px;
  padding:0 12px 0 36px;font-size:13px;font-family:inherit;outline:none;background:#fafbfc;
}
.conv-search input:focus{border-color:#9fc1f7;background:#fff;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
.conv-filters{display:flex;gap:4px;padding:0 12px 10px;border-bottom:1px solid var(--line)}
.conv-filters button{
  height:28px;padding:0 11px;border-radius:8px;font-size:12.5px;color:#5e5e66;white-space:nowrap;
}
.conv-filters button:hover{background:#f4f6f9}
.conv-filters button.is-active{background:#131212;color:#fff}
.conv-list{flex:1;min-height:0;overflow-y:auto;padding:6px;scrollbar-width:thin}
.conv-list::-webkit-scrollbar{width:7px}
.conv-list::-webkit-scrollbar-thumb{background:#dde1e7;border-radius:4px}
.conv-empty{padding:40px 12px;text-align:center;font-size:12.5px;color:#a8acb4}

.conv-item{
  display:flex;gap:10px;padding:11px 10px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;align-items:flex-start;position:relative;
}
.conv-item:hover{background:#f7f8fa}
.conv-item.is-active{background:#eef5ff;border-color:#d8e7ff}
.conv-item-main{flex:1;min-width:0}
.conv-item-top{display:flex;align-items:center;gap:8px;min-width:0}
.conv-name{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-time{font-size:10.5px;color:#a8acb4;flex:0 0 auto}
.conv-preview{
  font-size:12px;color:#8d8e99;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conv-item-foot{display:flex;align-items:center;justify-content:space-between;margin-top:5px;gap:6px}
.conv-tag{font-size:10.5px;color:#a8acb4}
.conv-note{
  flex:0 0 auto;font-size:10px;line-height:16px;padding:0 4px;border-radius:4px;
  background:#fff7ed;color:#b45309;border:1px solid #fed7aa;cursor:help;
}
.conv-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:600;display:grid;place-items:center;flex:0 0 auto;
}
.conv-avatar{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;position:relative;
  display:grid;place-items:center;font-size:13.5px;font-weight:600;color:#0958d9;
  background:linear-gradient(160deg,#e9f1ff,#d7e6ff);border:1px solid #dbe7fb;
}
.conv-avatar--lg{width:40px;height:40px;font-size:15px}
.presence-dot{
  position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:#c8ccd4;border:2px solid #fff;
}
.presence-dot.is-online{background:var(--green)}

.thread-pane{
  flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;
  background:#fff;border:1px solid #e9ebef;border-radius:16px;overflow:hidden;
}
.thread-pane:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}
.thread-head{
  flex:0 0 auto;height:66px;padding:0 14px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:2;
}
.thread-back{display:none}
.who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.who-line{display:flex;align-items:center;gap:8px;min-width:0}
.who-name{
  font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:text;border-radius:5px;padding:1px 3px;margin-left:-3px;
}
.who-name:hover{background:#f4f6f9}
.name-edit{
  width:min(220px,50vw);height:30px;border:1px solid #9fc1f7;border-radius:7px;padding:0 8px;
  font-size:14px;font-family:inherit;outline:none;
}
.chip-status{
  flex:0 0 auto;font-size:10.5px;padding:2px 8px;border-radius:999px;background:#f1f3f6;color:#7c8492;
}
.chip-status.is-closed{background:#fff1f1;color:#d0393f}
.who-meta{font-size:11px;color:#8d8e99;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-meta b{font-weight:600;color:#6b7280}
.thread-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.thread-body{flex:1;min-height:0;position:relative;display:flex;background:#f7f8fa}
.thread-body .msgs{flex:1;overflow-y:auto;scrollbar-width:thin}
.thread-body .msgs::-webkit-scrollbar{width:8px}
.thread-body .msgs::-webkit-scrollbar-thumb{background:#d9dde3;border-radius:4px}
.thread-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:#8d8e99;font-size:13px;background:#f7f8fa;text-align:center;padding:24px;
}
.thread-empty b{font-size:15px;color:#5e5e66;font-weight:600}
.thread-empty-ico{
  width:58px;height:58px;border-radius:18px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:8px;color:#9aa0a9;
}
.thread-empty-ico svg{width:26px;height:26px}

/* 管理台消息可稍宽 */
.msgs--admin .msg-main{max-width:min(70%,640px)}

/* ============================ 响应式 ============================ */
@media (max-width: 900px){
  .admin-main{padding:0;gap:0}
  .conv-pane{
    width:100%;flex:1 1 auto;border:0;border-radius:0;background:#fff;
  }
  .thread-pane{display:none;border:0;border-radius:0}
  .admin-app.is-thread-open .conv-pane{display:none}
  .admin-app.is-thread-open .thread-pane{display:flex}
  .thread-back{display:inline-grid}
  .admin-brand-note{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin-top{padding:0 10px}
  .admin-tools .mini-btn{padding:0 10px}
  .thread-actions .mini-btn{padding:0 10px}
  .who-meta{max-width:42vw}
}

@media (max-width: 700px){
  .chat-shell{padding:0}
  .chat-app{border:0;border-radius:0;height:100vh;height:100dvh;max-height:none;width:100%}
  .chat-top{height:58px;padding:0 8px 0 14px}
  .chat-brand-text b{font-size:14.5px}
  .msgs{padding:14px 12px 8px}
  .msgs--admin{padding:14px 12px 8px}
  .msg-main{max-width:min(80%,560px)}
  .msg-bubble{font-size:14px;padding:9px 12px}
  .msg-bubble--image img{max-width:min(220px,62vw)}
  .composer{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .composer--admin{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .composer-hint span:last-child{display:none}
  .send-btn{padding:0 16px}
  .quick-panel{left:8px;right:8px;bottom:calc(100% + 6px);max-height:58vh}
  .note-pop{top:66px;left:8px;right:8px;width:auto}
  .intro{padding:18px 14px}
  .intro-card{padding:26px 22px 20px;border-radius:18px}
  .intro-card h1{font-size:21px}
  .jump-new{bottom:104px}
  .net-bar{top:66px}
  .thread-head{height:62px;padding:0 8px;gap:8px}
  .thread-actions .mini-btn#closeBtn{padding:0 10px}
  .who-name{font-size:14px}
}

@media (max-width: 420px){
  .chat-tools .icon-btn{width:33px;height:33px}
  .thread-actions .mini-btn#closeBtn{font-size:12px}
  .who-meta{max-width:38vw}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ============================ 按 Key 查用户 / 续费充值 ============================ */
.key-tool-btn{
  display:flex;align-items:center;gap:7px;width:calc(100% - 24px);height:34px;
  margin:0 12px 10px;padding:0 12px;border-radius:9px;border:1px solid #cfe2ff;
  background:#f5f9ff;color:#0958d9;font-size:12.5px;font-weight:600;
}
.key-tool-btn:hover{background:#eaf3ff;border-color:#9fc1f7}
.key-tool-btn svg{width:16px;height:16px;flex:0 0 auto}

/* 侧栏：待确认人工到账 */
.order-panel{
  margin:0 12px 10px;border:1px solid #e6ebf2;border-radius:11px;
  background:#fbfcfe;overflow:hidden;flex:0 0 auto;
}
.order-panel-head{
  display:flex;align-items:center;gap:7px;padding:8px 9px 7px 11px;
  border-bottom:1px solid #edf0f4;
}
.order-panel-head b{font-size:12.5px;color:var(--ink)}
.order-pending-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#fff1f1;color:#d0393f;
  font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}
.order-pending-count.is-zero{background:#eef7f1;color:#178a45}
.order-refresh{
  margin-left:auto;width:24px;height:24px;border-radius:7px;color:#8d8e99;font-size:15px;
}
.order-refresh:hover{background:#eef2f7;color:var(--ink)}
.order-list{max-height:186px;overflow-y:auto;padding:5px 6px 2px;scrollbar-width:thin}
.order-list::-webkit-scrollbar{width:6px}
.order-list::-webkit-scrollbar-thumb{background:#dde1e7;border-radius:4px}
.order-item{
  display:flex;align-items:flex-start;gap:8px;padding:7px 6px;border-radius:8px;
}
.order-item:hover{background:#f3f7fc}
.order-item-main{min-width:0;flex:1}
.order-item-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11.5px;color:var(--body)}
.order-item-top b{font-size:11.5px;color:var(--ink)}
.order-item-top .order-mode{color:#0958d9}
.order-item-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#a3a9b3}
.order-item-meta{font-size:10.5px;color:#8d8e99;margin-top:2px;line-height:1.5}
.order-item-side{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding-top:2px}
.order-proof{
  display:block;width:40px;height:40px;border-radius:7px;overflow:hidden;background:#eef1f5;
  border:1px solid #e3e8ef;
}
.order-proof img{display:block;width:100%;height:100%;object-fit:cover}
.order-proof:hover{border-color:#9fc1f7}
.order-confirm{
  height:26px;padding:0 8px;border-radius:7px;background:#131212;color:#fff;font-size:10.5px;font-weight:600;
  white-space:nowrap;
}
.order-confirm:hover{background:#000}
.order-panel-empty{padding:12px 11px 13px;font-size:11.5px;color:#a3a9b3;line-height:1.6}
.order-admin-link{
  display:block;margin:0 6px 8px;padding:7px 8px;border-radius:7px;text-align:center;
  font-size:11px;color:#0958d9;background:#f0f6ff;
}
.order-admin-link:hover{background:#e6f0ff}
.order-confirm-body{padding-top:14px}
.order-confirm-target{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:10px}
.order-confirm-impact{
  font-size:12.5px;color:var(--ink);line-height:1.7;background:#f6f8fb;border-radius:9px;
  padding:10px 11px;margin-bottom:10px;
}
.order-confirm-proof{display:inline-block;font-size:12px;color:#0958d9;margin-bottom:12px}
.order-confirm-proof:hover{text-decoration:underline}
.order-confirm-body textarea{
  width:100%;min-height:78px;border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;
  font-family:inherit;font-size:13px;line-height:1.6;outline:none;resize:vertical;background:#fafbfc;
}
.order-confirm-body textarea:focus{border-color:#9fc1f7;background:#fff;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
.order-confirm-body input[type=text]{
  width:100%;height:40px;border:1px solid var(--line-2);border-radius:10px;padding:0 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  outline:none;background:#fafbfc;margin-bottom:10px;
}
.order-confirm-body input[type=text]:focus{border-color:#9fc1f7;background:#fff;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
.order-check{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--body);margin:0 0 10px}
.order-check input{width:auto;margin:0}
.order-confirm-btn{width:100%;margin-top:4px}
.key-modal{position:fixed;inset:0;z-index:10010;display:grid;place-items:center;padding:20px}
.key-mask{position:absolute;inset:0;background:rgba(10,10,12,.52)}
.key-card{
  position:relative;width:min(640px,100%);max-height:92vh;display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 26px 80px rgba(0,0,0,.28);
}
.key-head{
  flex:0 0 auto;height:54px;padding:0 12px 0 18px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line);gap:10px;
}
.key-head b{font-size:15px}
.key-body{padding:16px 18px 18px;overflow-y:auto;scrollbar-width:thin}
.key-label{display:block;font-size:12.5px;color:var(--body);margin-bottom:6px}
.key-input-row{display:flex;gap:8px}
.key-input-row input{
  flex:1;min-width:0;height:40px;border:1px solid var(--line-2);border-radius:10px;
  padding:0 12px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  outline:none;background:#fafbfc;
}
.key-input-row input:focus{border-color:#9fc1f7;background:#fff;box-shadow:0 0 0 3px rgba(9,88,217,.06)}
.key-primary{
  flex:0 0 auto;height:40px;padding:0 18px;border-radius:10px;color:#fff;font-size:13.5px;font-weight:600;
  background:linear-gradient(160deg,#095ddc 0%,#2f79ee 100%);box-shadow:0 5px 14px rgba(9,93,220,.18);
}
.key-primary:hover{filter:brightness(1.05)}
.key-primary:disabled{opacity:.55;cursor:default;box-shadow:none;filter:none}
.key-hint{font-size:11.5px;color:#8d8e99;line-height:1.7;margin-top:7px;min-height:18px}
.key-hint.is-err{color:#d0393f}
.key-hint.is-ok{color:#178a45}
.key-user{
  margin-top:12px;padding:13px 14px;border:1px solid #e6ebf2;border-radius:12px;background:#fafcff;
}
.key-user-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.key-user-head b{font-size:15px}
.key-user-head span{font-size:11.5px;color:#8d8e99}
.chip-ok,.chip-off{font-size:10.5px;padding:2px 8px;border-radius:999px}
.chip-ok{background:#ecfdf3;color:#178a45;border:1px solid #bbf7d0}
.chip-off{background:#fff1f1;color:#d0393f;border:1px solid #fecaca}
.key-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.key-stat{background:#fff;border:1px solid #edf0f4;border-radius:10px;padding:8px 10px}
.key-stat span{display:block;font-size:10.5px;color:#8d8e99}
.key-stat b{display:block;font-size:14px;margin-top:2px;color:#131212;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.key-renew{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.key-renew-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.key-renew-head b{font-size:14px}
.key-renew-sub{font-size:11px;color:#8d8e99;margin-top:4px;line-height:1.7}
.key-mode{display:flex;gap:4px;background:#f2f4f7;border-radius:9px;padding:3px}
.key-mode button{
  height:28px;padding:0 11px;border-radius:7px;font-size:12px;color:#5e5e66;white-space:nowrap;
}
.key-mode button:hover{color:#131212}
.key-mode button.is-active{background:#fff;color:#131212;font-weight:600;box-shadow:0 1px 4px rgba(17,17,17,.1)}
.key-fixed-note{font-size:11px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:9px;
  padding:8px 10px;line-height:1.7;margin-top:10px}
.key-renew-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:10px}
.key-renew-row label{font-size:11.5px;color:#5e5e66;display:flex;flex-direction:column;gap:4px}
.key-renew-row input{
  width:104px;height:36px;border:1px solid var(--line-2);border-radius:9px;padding:0 10px;
  font-size:13px;font-family:inherit;outline:none;background:#fff;
}
.key-renew-row input:focus{border-color:#9fc1f7}
.key-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.key-tiers:empty{display:none}
.key-tier{
  border:1px solid #e6ebf2;border-radius:12px;padding:11px 12px;background:#fff;
  display:flex;flex-direction:column;gap:4px;
}
.key-tier b{font-size:13px;color:#131212}
.key-tier .key-tier-meta{font-size:11px;color:#8d8e99;line-height:1.6}
.key-tier .key-tier-add{font-size:16px;font-weight:700;color:#0958d9;margin:2px 0;font-variant-numeric:tabular-nums}
.key-tier .key-tier-add.is-zero{color:#8d8e99;font-size:12.5px}
.key-tier button{margin-top:8px;height:32px;border-radius:8px;border:1px solid #cfe2ff;
  background:#f5f9ff;color:#0958d9;font-size:12.5px;font-weight:600}
.key-tier button:hover{background:#eaf3ff;border-color:#9fc1f7}
.key-tier-note{grid-column:1/-1;font-size:12px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;
  border-radius:10px;padding:10px 12px;line-height:1.7}
.key-confirm{
  margin-top:12px;padding:12px 14px;border:1px solid #fecaca;border-radius:12px;
  background:#fff7f7;font-size:12.5px;line-height:1.75;color:#7f1d1d;
}
.key-confirm b{color:#b42318}
.key-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.key-confirm-actions button{height:32px;padding:0 14px;border-radius:8px;font-size:12.5px;font-weight:600}
.key-cancel{border:1px solid #d7dbe2;background:#fff;color:#5e5e66}
.key-danger{background:#d92d20;color:#fff}
.key-danger:hover{filter:brightness(1.05)}
.key-danger:disabled{opacity:.55;cursor:default}
.key-result{
  margin-top:12px;padding:12px 14px;border:1px solid #bbf7d0;border-radius:12px;
  background:#f0fdf4;font-size:12.5px;line-height:1.8;color:#14532d;
}
.key-result.is-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.key-result b{font-size:13px}
.key-result span{display:block;color:#166534;font-size:11.5px;margin-top:4px}
.key-result.is-warn span{color:#92400e}
.key-foot{font-size:10.5px;color:#a8acb4;margin-top:14px;line-height:1.7}

@media (max-width:700px){
  .key-modal{padding:10px}
  .key-card{max-height:94vh;border-radius:14px}
  .key-body{padding:14px}
  .key-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .key-tiers{grid-template-columns:1fr}
  .key-renew-row label{flex:1 1 40%}
  .key-renew-row input{width:100%}
  .key-renew-row .key-primary{width:100%}
}

/* ============================ 自动回复 / 嵌入模式 ============================ */
.msg-name{font-size:11px;color:#9aa0a9;padding:0 4px}
.msg--auto .msg-bubble{background:#fffdf5;border-color:#f3e6c8;color:#5e5140}
.msg--auto .msg-time{color:#b8a98d}
.msg-avatar--auto{background:#fff7ed;border-color:#fde68a}

.chat-page.is-embed{background:#fff}
.is-embed .chat-shell{padding:0}
.is-embed .chat-app{
  width:100%;height:100vh;height:100dvh;max-height:none;
  border:0;border-radius:0;box-shadow:none;
}
.is-embed .chat-tools{display:none}
.is-embed .chat-top{padding-right:86px}
@media (max-width:700px){
  .is-embed .chat-top{padding-right:80px}
}


/* 在线客服头像：黑衣角色（2026-10-27） */
.chat-service-avatar{
  width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block;
  border:1px solid #e3e7ec;background:#fff;
}
.intro-avatar{
  width:54px;height:54px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid #fff;box-shadow:0 6px 18px rgba(17,17,17,.12);
}
.msg-avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}