/* 私域客服模块样式（客服工作台 + 渠道客服配置）
   主题色：平台主青绿 #30C0B4（局部变量，不污染全局 --primary） */
#page-cs, #page-cs-channel {
  --cs:#30C0B4;
  --cs-dark:#157f76;
  --cs-light:#e6f7f4;
  --cs-bg:#f5f7fa;
  --cs-border:#e5e7eb;
  --cs-ink:#111827;
  --cs-sub:#6b7280;
  --cs-danger:#E54C5E;
  --cs-warn:#F59E0B;
  --gzh:#07C160;
  --xcx:#006AFF;
  --youzan:#E64432;
}
#page-cs { display:block; }

/* ===== 工作台整体 ===== */
.cs-wrap { display:flex; flex-direction:column; height:calc(100vh - 84px); background:var(--cs-bg); border:1px solid var(--cs-border); border-radius:12px; overflow:hidden; }

/* 顶部栏 */
.cs-topbar { background:#fff; border-bottom:1px solid var(--cs-border); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cs-topbar .cs-title { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.cs-topbar .cs-title .ico { width:34px; height:34px; border-radius:9px; background:linear-gradient(145deg,var(--cs),var(--cs-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; }
.cs-stats { display:flex; gap:10px; }
.cs-stat { background:var(--cs-light); color:var(--cs-dark); padding:5px 12px; border-radius:8px; font-size:12px; display:flex; align-items:center; gap:5px; }
.cs-stat b { font-size:14px; }
.cs-topbar-right { display:flex; align-items:center; gap:10px; }
.cs-agent-status { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--cs-border); border-radius:8px; background:#fff; }
.cs-agent-status .dot { width:8px; height:8px; border-radius:50%; background:var(--cs); }
.cs-agent-status select { border:none; background:transparent; font-size:13px; outline:none; color:var(--cs-ink); }
.cs-btn { padding:6px 12px; border:1px solid var(--cs-border); background:#fff; border-radius:8px; cursor:pointer; font-size:13px; color:var(--cs-ink); }
.cs-btn:hover { border-color:var(--cs); color:var(--cs); }
.cs-btn.primary { background:var(--cs); color:#fff; border-color:var(--cs); }
.cs-btn.primary:hover { background:var(--cs-dark); color:#fff; }

/* 渠道接入条 */
.cs-channels { background:#fff; border-bottom:1px solid var(--cs-border); padding:8px 16px; display:flex; align-items:center; gap:10px; font-size:12px; flex-wrap:wrap; }
.cs-channels .label { color:var(--cs-sub); }
.cs-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--cs-border); border-radius:20px; cursor:default; }
.cs-chip .ico { width:15px; height:15px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:700; }
.cs-chip .ico.gzh { background:var(--gzh); }
.cs-chip .ico.xcx { background:var(--xcx); }
.cs-chip .ico.youzan { background:var(--youzan); }
.cs-chip.on { border-color:var(--cs); color:var(--cs-dark); }
.cs-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--cs); }
.cs-chip-add { border-style:dashed; color:var(--cs-sub); cursor:pointer; }
.cs-chip.cs-search { margin-left:auto; border-color:var(--cs); color:var(--cs-dark); cursor:pointer; }
.cs-chip.cs-search:hover { background:var(--cs-light); }

/* 三栏工作区 */
.cs-workspace { flex:1; display:grid; grid-template-columns:250px 1fr 300px; min-height:0; }

/* 会话列表 */
.cs-session-list { background:#fff; border-right:1px solid var(--cs-border); display:flex; flex-direction:column; min-height:0; }
.cs-filters { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--cs-border); font-size:12px; }
.cs-filter { padding:4px 10px; border-radius:14px; cursor:pointer; color:var(--cs-sub); }
.cs-filter.active { background:var(--cs-light); color:var(--cs-dark); font-weight:600; }
.cs-session-items { flex:1; overflow-y:auto; }
.cs-session-item { padding:12px; border-bottom:1px solid var(--cs-border); cursor:pointer; display:flex; gap:8px; position:relative; }
.cs-session-item:hover { background:#f9fafb; }
.cs-session-item.active { background:var(--cs-light); }
.cs-session-item .avatar { width:36px; height:36px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--cs-sub); flex-shrink:0; }
.cs-session-item .info { flex:1; min-width:0; }
.cs-session-item .name-row { display:flex; justify-content:space-between; align-items:center; }
.cs-session-item .name { font-weight:600; font-size:13px; }
.cs-session-item .time { font-size:11px; color:var(--cs-sub); }
.cs-session-item .preview-row { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.cs-session-item .preview { font-size:12px; color:var(--cs-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.cs-badges { display:flex; gap:4px; align-items:center; }
.cs-badge-unread { background:var(--cs-danger); color:#fff; font-size:10px; padding:1px 6px; border-radius:9px; }
.cs-badge-source { font-size:10px; padding:1px 6px; border-radius:4px; color:#fff; }
.cs-badge-source.gzh { background:var(--gzh); }
.cs-badge-source.xcx { background:var(--xcx); }
.cs-badge-source.youzan { background:var(--youzan); }
.cs-badge-status { font-size:10px; padding:1px 6px; border-radius:4px; }
.cs-badge-status.waiting { background:#FEF3C7; color:#B45309; }
.cs-badge-status.active { background:var(--cs-light); color:var(--cs-dark); }
.cs-badge-status.ended { background:#F3F4F6; color:var(--cs-sub); }
.cs-session-item .meta-row { margin-top:4px; font-size:11px; color:var(--cs-sub); display:flex; justify-content:space-between; }
.cs-session-item .wait { color:var(--cs-warn); }

/* 对话窗口 */
.cs-chat { display:flex; flex-direction:column; background:#f9fafb; min-height:0; }
.cs-chat-header { background:#fff; padding:10px 16px; border-bottom:1px solid var(--cs-border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cs-chat-customer { display:flex; align-items:center; gap:8px; min-width:0; }
.cs-chat-customer .avatar { width:32px; height:32px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.cs-chat-customer .name { font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.cs-chat-customer .src-tag { font-size:10px; padding:1px 6px; border-radius:4px; color:#fff; }
.cs-chat-customer .src-tag.gzh { background:var(--gzh); }
.cs-chat-customer .src-tag.xcx { background:var(--xcx); }
.cs-chat-customer .src-tag.youzan { background:var(--youzan); }
.cs-chat-customer .sub { font-size:11px; color:var(--cs-sub); }
.cs-chat-actions { display:flex; gap:6px; flex-shrink:0; }
.cs-chat-actions .cs-btn { font-size:12px; padding:4px 10px; }
.cs-chat-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.cs-msg { display:flex; gap:8px; max-width:72%; }
.cs-msg.cust { align-self:flex-start; }
.cs-msg.agent { align-self:flex-end; flex-direction:row-reverse; }
.cs-msg .avatar { width:30px; height:30px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--cs-sub); flex-shrink:0; }
.cs-msg .bubble { padding:8px 12px; border-radius:10px; font-size:13px; line-height:1.5; word-break:break-word; }
.cs-msg.cust .bubble { background:#f3f4f6; color:var(--cs-ink); }
.cs-msg.agent .bubble { background:var(--cs); color:#fff; }
.cs-msg .t { font-size:10px; color:var(--cs-sub); margin-top:2px; }
.cs-msg-system { align-self:center; font-size:11px; color:var(--cs-sub); background:#fff; padding:2px 10px; border-radius:10px; border:1px solid var(--cs-border); }
.cs-msg-mention { background:var(--cs-danger) !important; color:#fff; font-weight:600; }
.cs-kb-msg { padding:10px; border:1px solid var(--cs-border); border-radius:10px; background:#fff; max-width:72%; align-self:flex-end; }
.cs-kb-msg .kt { font-weight:600; font-size:13px; margin-bottom:4px; }
.cs-kb-msg .kd { font-size:12px; color:var(--cs-sub); }
.cs-accept-bar { align-self:center; text-align:center; padding:8px 0; }
.cs-accept-bar .cs-btn { padding:8px 22px; font-size:13px; }

/* 输入区 */
.cs-chat-input { background:#fff; border-top:1px solid var(--cs-border); padding:10px 12px; }
.cs-quick { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.cs-quick .q { padding:4px 10px; background:#f3f4f6; border-radius:14px; font-size:12px; cursor:pointer; color:var(--cs-sub); }
.cs-quick .q:hover { background:var(--cs-light); color:var(--cs-dark); }
.cs-input-row { display:flex; align-items:flex-end; gap:8px; }
.cs-input-row textarea { flex:1; border:1px solid var(--cs-border); border-radius:8px; padding:8px 10px; resize:none; height:56px; font-size:13px; outline:none; font-family:inherit; }
.cs-input-row textarea:focus { border-color:var(--cs); }
.cs-input-row textarea:disabled { background:#f9fafb; color:var(--cs-sub); }
.cs-input-tools { display:flex; flex-direction:column; gap:6px; }
.cs-input-tools .t { font-size:18px; cursor:pointer; color:var(--cs-sub); }
.cs-send-btn { background:var(--cs); color:#fff; border:none; padding:0 18px; height:56px; border-radius:8px; cursor:pointer; font-size:13px; flex-shrink:0; }
.cs-send-btn:hover { background:var(--cs-dark); }
.cs-send-btn:disabled { background:#d1d5db; cursor:not-allowed; }

/* 客户信息面板 */
.cs-panel { background:#fff; border-left:1px solid var(--cs-border); display:flex; flex-direction:column; min-height:0; }
.cs-panel-tabs { display:flex; border-bottom:1px solid var(--cs-border); font-size:13px; }
.cs-panel-tabs .t { flex:1; padding:10px; text-align:center; cursor:pointer; color:var(--cs-sub); }
.cs-panel-tabs .t.active { color:var(--cs-dark); border-bottom:2px solid var(--cs); font-weight:600; }
.cs-panel-body { flex:1; overflow-y:auto; padding:14px; }
.cs-panel-section { margin-bottom:16px; }
.cs-panel-section .stitle { font-size:12px; color:var(--cs-sub); margin-bottom:8px; }
.cs-panel-section .row { display:flex; justify-content:space-between; font-size:12px; padding:4px 0; }
.cs-panel-section .row .k { color:var(--cs-sub); }
.cs-tag { display:inline-block; padding:2px 8px; background:var(--cs-light); color:var(--cs-dark); border-radius:10px; font-size:11px; margin:2px; }
.cs-note-input { width:100%; min-height:64px; max-height:160px; padding:8px 10px; border:1px solid var(--cs-border); border-radius:8px; font-size:12px; line-height:1.5; outline:none; resize:vertical; font-family:inherit; box-sizing:border-box; background:#fff; }
.cs-note-input:focus { border-color:var(--cs); }
.cs-kb-card { border:1px solid var(--cs-border); border-radius:8px; padding:10px; margin-bottom:8px; }
.cs-kb-card .kt { font-weight:600; font-size:13px; margin-bottom:4px; }
.cs-kb-card .kd { font-size:11px; color:var(--cs-sub); }
.cs-kb-card .ks { margin-top:6px; font-size:11px; color:var(--cs); cursor:pointer; }

/* 底部统计条 */
.cs-footer { background:#fff; border-top:1px solid var(--cs-border); padding:9px 16px; display:flex; gap:20px; font-size:12px; color:var(--cs-sub); flex-wrap:wrap; }
.cs-footer .item { display:flex; align-items:center; gap:6px; }
.cs-footer b { font-weight:600; color:var(--cs-ink); font-size:13px; }

/* toast / 语音提示 / 弹窗 */
.cs-toast { position:fixed; top:70px; right:20px; background:#fff; border-left:4px solid var(--cs-danger); box-shadow:0 4px 12px rgba(0,0,0,.12); padding:10px 14px; border-radius:8px; font-size:13px; z-index:9999; display:none; }
.cs-toast.show { display:block; animation:csslide .3s; }
@keyframes csslide { from { transform:translateX(100%); } to { transform:translateX(0); } }
.cs-voice-tip { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1f2937; color:#fff; padding:8px 18px; border-radius:20px; font-size:13px; z-index:10000; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.cs-mask { position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:11000; }
.cs-mask.show { display:flex; }
.cs-modal { background:#fff; border-radius:12px; width:380px; padding:20px; box-shadow:0 8px 24px rgba(0,0,0,.15); max-height:86vh; overflow-y:auto; }
.cs-modal.wide { width:520px; }
.cs-modal h3 { font-size:15px; margin-bottom:14px; }
.cs-m-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:13px; }
.cs-m-row .k { color:var(--cs-sub); }
.cs-switch { position:relative; width:40px; height:22px; background:#d1d5db; border-radius:11px; cursor:pointer; transition:.2s; }
.cs-switch.on { background:var(--cs); }
.cs-switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.2s; }
.cs-switch.on::after { left:20px; }
.cs-m-actions { margin-top:14px; display:flex; justify-content:flex-end; gap:8px; }
.cs-field { margin-bottom:12px; }
.cs-field label { display:block; font-size:12px; color:var(--cs-sub); margin-bottom:5px; }
.cs-field input, .cs-field textarea, .cs-field select { width:100%; padding:8px 10px; border:1px solid var(--cs-border); border-radius:8px; font-size:13px; font-family:inherit; outline:none; }
.cs-field input:focus, .cs-field textarea:focus { border-color:var(--cs); }
.cs-field textarea { resize:vertical; min-height:52px; }

/* ===== 渠道客服配置页 ===== */
.cs-channel-wrap { background:var(--cs-bg); border-radius:12px; padding:16px 20px; min-height:calc(100vh - 150px); }
.cs-tip { background:var(--cs-light); border-left:3px solid var(--cs); padding:12px 16px; border-radius:6px; font-size:13px; color:#065f46; margin-bottom:16px; }
.cs-cl-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cs-cl-head .t { font-size:15px; font-weight:600; }
.cs-cl-list { display:flex; flex-direction:column; gap:10px; }
.cs-cl-row { display:grid; grid-template-columns:260px 1fr auto; gap:14px; padding:12px 14px; border:1px solid var(--cs-border); border-radius:8px; align-items:center; background:#fff; }
.cs-cl-left { display:flex; align-items:center; gap:10px; min-width:0; }
.cs-cl-left .ico { width:26px; height:26px; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; flex-shrink:0; }
.cs-cl-left .ico.gzh { background:var(--gzh); }
.cs-cl-left .ico.xcx { background:var(--xcx); }
.cs-cl-left .ico.youzan { background:var(--youzan); }
.cs-cl-name { font-size:14px; font-weight:600; }
.cs-cl-url { font-size:11px; color:var(--cs-sub); font-family:monospace; margin-top:2px; word-break:break-all; }
.cs-cl-scene { display:flex; gap:6px; flex-wrap:wrap; }
.cs-sc { font-size:11px; padding:3px 10px; background:#f3f4f6; border-radius:10px; color:var(--cs-sub); }
.cs-cl-ops { display:flex; align-items:center; gap:6px; }
.cs-status { font-size:11px; padding:3px 10px; border-radius:10px; }
.cs-status.on { background:var(--cs-light); color:var(--cs-dark); }
.cs-status.off { background:#FEE2E2; color:var(--cs-danger); }
.cs-btn-sm { padding:4px 10px; font-size:12px; border:1px solid var(--cs-border); background:#fff; border-radius:6px; cursor:pointer; color:var(--cs-ink); }
.cs-btn-sm:hover { border-color:var(--cs); color:var(--cs); }
.cs-empty { text-align:center; padding:60px 20px; color:var(--cs-sub); font-size:14px; }
.cs-empty .icon { font-size:48px; margin-bottom:12px; opacity:.4; }

/* 客服设置里的常用语设置 */
.cs-quick-settings { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; max-height:260px; overflow-y:auto; }
.cs-quick-item { display:flex; gap:6px; align-items:center; }
.cs-quick-input { flex:1; padding:7px 10px; border:1px solid var(--cs-border); border-radius:6px; font-size:13px; outline:none; font-family:inherit; }
.cs-quick-input:focus { border-color:var(--cs); }
.cs-quick-del { flex-shrink:0; color:var(--cs-danger); border-color:#fecaca; }
.cs-quick-del:hover { border-color:var(--cs-danger); background:#fef2f2; color:var(--cs-danger); }
.cs-quick-add-row { display:flex; gap:6px; align-items:center; }
.cs-quick-add-row input { flex:1; padding:7px 10px; border:1px solid var(--cs-border); border-radius:6px; font-size:13px; outline:none; font-family:inherit; }
.cs-quick-add-row input:focus { border-color:var(--cs); }

/* ===== 客户查询 ===== */
.cs-search-results { display:flex; flex-direction:column; gap:8px; }
.cs-search-row { padding:10px 12px; border:1px solid var(--cs-border); border-radius:8px; cursor:pointer; background:#fff; }
.cs-search-row:hover { border-color:var(--cs); background:var(--cs-light); }
.cs-search-row-top { font-size:13px; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.cs-search-row-sub { font-size:12px; color:var(--cs-ink); margin-bottom:4px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.cs-search-row-prev { font-size:12px; color:var(--cs-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }