:root {
  --bg: #0a0a0a; --bg2: #0f0f0f; --card: #161616; --border: #262626;
  --text: #fff; --text2: #aaa; --muted: #777;
  --primary: #0ce09f; --primary-d: #08a578;
  --warn: #ffb547; --danger: #ff5e5d; --info: #4ea6ff;
  --nav-w: 240px; --hd-h: 56px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

/* layout */
.app { display: flex; height: 100%; }
.nav { width: var(--nav-w); background: var(--bg2); border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hd { height: var(--hd-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.body { flex: 1; padding: 24px; overflow-y: auto; }

/* nav */
.nav .brand { padding: 18px 20px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 16px; color: var(--primary); }
.nav .group { padding: 6px 0; }
.nav .group-title { padding: 10px 20px 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.nav .item { display: block; padding: 8px 20px 8px 28px; color: var(--text2); cursor: pointer; user-select: none; font-size: 13px; }
.nav .item:hover { background: rgba(12, 224, 159, 0.05); color: var(--text); }
.nav .item.active { background: rgba(12, 224, 159, 0.08); color: var(--primary); border-left: 3px solid var(--primary); padding-left: 25px; }
.nav .item.disabled { opacity: 0.4; cursor: not-allowed; }
.nav .item .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); margin-right: 8px; vertical-align: middle; }
.nav .item.active .dot { background: var(--primary); }

/* header */
.hd .title { font-weight: 600; font-size: 16px; }
.hd .who { display: flex; align-items: center; gap: 12px; color: var(--text2); font-size: 13px; }
.hd .totp-on { color: var(--primary); font-size: 11px; padding: 2px 8px; background: rgba(12, 224, 159, 0.1); border-radius: 99px; }
.hd .totp-off { color: var(--warn); font-size: 11px; padding: 2px 8px; background: rgba(255, 181, 71, 0.1); border-radius: 99px; }

/* card */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.card h2 { margin: 0 0 16px; font-size: 16px; }
.card h3 { margin: 16px 0 8px; font-size: 14px; color: var(--text2); }

/* form */
.row { margin-bottom: 14px; }
.row label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
input, textarea, select {
  width: 100%; padding: 9px 12px; background: #1f1f1f; border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; font-size: 13px; font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); }
button {
  padding: 8px 16px; background: var(--primary); color: #000; border: 0; border-radius: 6px;
  font-weight: 600; cursor: pointer; font-size: 13px;
}
button:hover { background: var(--primary-d); }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
button.ghost:hover { background: var(--card); }
button.danger { background: var(--danger); color: #fff; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.sm { padding: 6px 10px; font-size: 12px; }

/* status badges */
.badge { display: inline-block; padding: 2px 10px; font-size: 11px; border-radius: 99px; background: var(--border); color: var(--text2); }
.badge.ok { background: rgba(12, 224, 159, 0.15); color: var(--primary); }
.badge.warn { background: rgba(255, 181, 71, 0.15); color: var(--warn); }
.badge.danger { background: rgba(255, 94, 93, 0.15); color: var(--danger); }
.badge.info { background: rgba(78, 166, 255, 0.15); color: var(--info); }

.err { color: var(--danger); font-size: 13px; min-height: 16px; }
.ok { color: var(--primary); font-size: 13px; }
.muted { color: var(--muted); font-size: 12px; }

/* table */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
td.mono { font-family: monospace; font-size: 12px; color: var(--text2); }

/* login */
.login-wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
.login-card { width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
.login-card h1 { margin: 0 0 6px; font-size: 22px; }
.login-card .sub { color: var(--muted); margin-bottom: 24px; font-size: 13px; }
.login-card button { width: 100%; padding: 11px; margin-top: 6px; }

/* todo placeholder */
.todo { padding: 60px 20px; text-align: center; color: var(--muted); }
.todo .tag { font-size: 11px; color: var(--primary); padding: 4px 10px; border: 1px solid var(--primary); border-radius: 99px; display: inline-block; margin-bottom: 12px; }
.todo h3 { color: var(--text); margin: 12px 0; }

/* opt grid in recharge methods */
.opt { display: grid; grid-template-columns: 80px 1fr 80px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.opt:first-of-type { border-top: 0; }
.opt .alias { font-weight: 600; color: var(--primary); font-size: 13px; }
.opt input { font-family: monospace; font-size: 12px; }
.flash { font-size: 11px; padding-left: 8px; }

/* ===== 客服坐席工作台 — 2026-05-09 大厂级重做（Intercom/Linear/Front 风格） ===== */
:root {
  --cs-bg: #f8fafc;          /* slate-50 整体背景 */
  --cs-panel: #ffffff;        /* 面板纯白 */
  --cs-border: #e2e8f0;       /* slate-200 柔和边框 */
  --cs-border-strong: #cbd5e1;/* slate-300 hover 边框 */
  --cs-text: #0f172a;         /* slate-900 主文字（高对比） */
  --cs-text-mid: #475569;     /* slate-600 副文字 */
  --cs-text-mute: #94a3b8;    /* slate-400 占位 */
  --cs-brand: #2563eb;        /* blue-600 主色 */
  --cs-brand-hover: #1d4ed8;  /* blue-700 */
  --cs-brand-soft: #eff6ff;   /* blue-50 hover bg */
  --cs-success: #16a34a;
  --cs-warn: #f59e0b;
  --cs-danger: #dc2626;
  --cs-purple: #7c3aed;
  --cs-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --cs-shadow: 0 4px 12px rgba(15,23,42,.08);
  --cs-radius: 10px;
}

.cs-wb { display: grid; grid-template-columns: 320px 1fr 360px; gap: 16px; height: calc(100vh - 100px); background: var(--cs-bg); padding: 4px; border-radius: 12px; }

/* ─── LEFT: 会话列表 ──────────── */
.cs-wb-left { background: var(--cs-panel); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--cs-shadow-sm); }
.cs-self-bar { padding: 4px 6px 10px; font-size: 12px; color: var(--cs-text-mid); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--cs-border); margin-bottom: 12px; }
.cs-self-on { color: var(--cs-success); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.cs-self-on::before { content: '●'; color: var(--cs-success); font-size: 10px; }
.cs-self-off { color: var(--cs-text-mute); font-weight: 600; }
.cs-search { width: 100%; padding: 9px 12px 9px 32px; border: 1px solid var(--cs-border); border-radius: 8px; font-size: 13px; color: var(--cs-text); background: var(--cs-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'><path d='M11.5 6.5a5 5 0 1 1-10 0 5 5 0 0 1 10 0zm-.7 4.3a6 6 0 1 1 .7-.7l3.6 3.6-.7.7-3.6-3.6z'/></svg>") no-repeat 10px center/14px; margin-bottom: 10px; box-sizing: border-box; transition: border-color .15s, background-color .15s; }
.cs-search:focus { outline: none; border-color: var(--cs-brand); background-color: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.cs-wb-tabs { display: flex; gap: 4px; margin-bottom: 8px; padding: 3px; background: var(--cs-bg); border-radius: 8px; }
.cs-wb-tabs span { padding: 6px 10px; cursor: pointer; border-radius: 6px; font-size: 12px; user-select: none; color: var(--cs-text-mid); font-weight: 500; flex: 1; text-align: center; transition: all .15s; }
.cs-wb-tabs span:hover { color: var(--cs-text); }
.cs-wb-tabs span.active { background: var(--cs-panel); color: var(--cs-text); font-weight: 600; box-shadow: var(--cs-shadow-sm); }
.cs-conv-list { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.cs-conv-item { padding: 12px 12px 12px 16px; border-radius: 8px; cursor: pointer; margin-bottom: 4px; background: transparent; border-left: 3px solid transparent; transition: background .12s, border-color .12s, transform .15s; position: relative; }
.cs-conv-item:hover { background: var(--cs-bg); }
.cs-conv-item.on { background: var(--cs-brand-soft); border-left-color: var(--cs-brand); }
.cs-conv-item.on .cs-conv-h { color: var(--cs-brand); }
.cs-conv-h { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--cs-text); }
.cs-badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; color: #fff; white-space: nowrap; letter-spacing: .2px; }
.cs-badge.open, .cs-badge.wait { background: var(--cs-warn); }
.cs-badge.act { background: var(--cs-success); }
.cs-badge.cls { background: var(--cs-text-mute); color: #fff; }
.cs-conv-snip { font-size: 12px; line-height: 1.4; max-height: 34px; overflow: hidden; color: var(--cs-text-mid); margin-top: 2px; }
.cs-conv-t { font-size: 11px; margin-top: 6px; color: var(--cs-text-mute); }
.cs-unread { background: var(--cs-danger); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; margin-left: auto; min-width: 18px; text-align: center; display: inline-block; font-weight: 700; line-height: 1; }

/* 超时 chip（替代右侧弹窗 banner，融入会话列表）*/
.cs-overdue {
  display: inline-flex; align-items: center; padding: 1px 6px;
  font-size: 10.5px; font-weight: 600; border-radius: 6px;
  margin-left: 4px; line-height: 1.4;
}
.cs-overdue-warn { background: #fef3c7; color: #b45309; }
.cs-overdue-crit { background: #fee2e2; color: #b91c1c; }

/* 超时会话整条边框红/黄 + 左侧渐变高亮 */
.cs-conv-item.cs-conv-overdue-warn { border-left: 3px solid #f59e0b !important; background: linear-gradient(90deg, rgba(254,243,199,.4), transparent 60%); }
.cs-conv-item.cs-conv-overdue-crit { border-left: 3px solid #dc2626 !important; background: linear-gradient(90deg, rgba(254,226,226,.5), transparent 60%); }
.cs-conv-item.cs-conv-overdue-crit:hover { background: linear-gradient(90deg, rgba(254,226,226,.7), rgba(254,243,199,.2)); }
.cs-conv-item.cs-conv-overdue-warn:hover { background: linear-gradient(90deg, rgba(254,243,199,.6), transparent 70%); }

/* 工作台 H1 标题旁的超时 badge */
.cs-overdue-h1-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 12px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  user-select: none; vertical-align: middle;
}
.cs-overdue-h1-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.cs-overdue-h1-badge.warn { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.cs-overdue-h1-badge.crit { background: #fee2e2; color: #991b1b; border: 1px solid #ef4444; animation: cs-pulse 2s infinite; }
@keyframes cs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }

/* 隐藏旧的右上角 alert bar（被 showAlertBanner no-op 后没东西渲染，但可能有残留 DOM） */
#cs-alert-bar, .cs-alert-bar { display: none !important; }

/* ─── MID: 会话主区 ─────────────── */
.cs-wb-mid { background: var(--cs-panel); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--cs-shadow-sm); }
.cs-mid-header { padding: 14px 18px; border-bottom: 1px solid var(--cs-border); font-size: 14px; color: var(--cs-text); font-weight: 500; display: flex; align-items: center; gap: 10px; background: var(--cs-panel); }
.cs-mid-header strong { color: var(--cs-text); font-weight: 700; }
/* TG 风格设计 token — 工作台中间聊天面板 */
:root {
  --tgw-out-bg: #effdde;          /* 出气泡薄荷绿 */
  --tgw-in-bg: #ffffff;            /* 入气泡白 */
  --tgw-text: #000000;
  --tgw-time-out: #5eaa64;         /* 出气泡时间绿 */
  --tgw-time-in: #707579;          /* 入气泡时间灰 */
  --tgw-tick-read: #4fc3f7;        /* 已读蓝勾 */
  --tgw-bg: #e6ebf0;               /* 中间区背景（淡灰，无花哨壁纸）*/
}
.cs-mid-msgs {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  background: var(--tgw-bg);
}
.cs-m {
  margin: 0 0 2px 0; display: flex; gap: 6px; align-items: flex-end;
}
.cs-m + .cs-m { margin-top: 2px; }
.cs-m.cs-m-first { margin-top: 8px; }
.cs-m-l { justify-content: flex-start; }
.cs-m-r { justify-content: flex-end; }
.cs-m-s { justify-content: center; margin: 8px 0; }
.cs-m-time {
  font-size: 11px; text-align: center; color: var(--cs-text-mid); font-weight: 500;
  align-self: center; padding: 3px 10px; background: rgba(255,255,255,.85);
  border-radius: 10px;
}
.cs-m-bubble {
  position: relative; display: inline-block; max-width: 70%; min-width: 60px;
  padding: 6px 60px 18px 10px;
  border-radius: 10px;
  font-size: 14px; line-height: 1.36; word-break: break-word; color: var(--tgw-text);
  box-shadow: 0 1px 1px rgba(11,20,26,.10);
}
.cs-m-l .cs-m-bubble { background: var(--tgw-in-bg); color: var(--tgw-text); }
.cs-m-r .cs-m-bubble { background: var(--tgw-out-bg); color: var(--tgw-text); }
.cs-m-s .cs-m-bubble {
  background: rgba(255,255,255,.92); color: var(--cs-text-mid);
  font-size: 12px; padding: 5px 12px; border-radius: 10px;
  max-width: 80%; min-width: 0; box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.cs-m-recalled .cs-m-bubble { background: rgba(255,255,255,.55) !important; color: var(--cs-text-mute) !important; font-style: italic; }
.cs-m-r.cs-m-recalled .cs-m-bubble { background: rgba(239,253,222,.55) !important; color: var(--cs-text-mute) !important; }
.cs-m-bubble-time {
  position: absolute; right: 8px; bottom: 4px;
  font-size: 11px; line-height: 1; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 400; user-select: none;
  color: var(--tgw-time-in);
}
.cs-m-r .cs-m-bubble-time { color: var(--tgw-time-out); }
.cs-m-bubble-time .ck { font-size: 13px; line-height: 1; letter-spacing: -2px; font-weight: 700; }
.cs-m-bubble-time .ck.read { color: var(--tgw-tick-read); }

/* 图片消息 — TG 真实：图片直接铺满气泡 */
.cs-m-bubble.cs-m-img-bub { padding: 0 !important; overflow: hidden; max-width: 280px; }
.cs-m-bubble.cs-m-img-bub .cs-m-bubble-time {
  background: rgba(0,0,0,.42); color: #fff !important;
  padding: 2px 7px; border-radius: 10px; backdrop-filter: blur(2px);
}
.cs-m-bubble.cs-m-img-bub .cs-m-bubble-time .ck { color: #fff !important; }
.cs-m-bubble.cs-m-img-bub .cs-m-bubble-time .ck.read { color: #98ddff !important; }
.cs-m-bubble.cs-m-img-bub .cs-m-img,
.cs-m-bubble.cs-m-img-bub img.cs-m-img {
  max-width: 280px; max-height: 320px; display: block;
  border-radius: 10px; cursor: zoom-in; margin: 0;
}

/* 语音消息 — TG 横向：圆按钮 + 32 波形条 + 时长（替换原 <audio controls>）*/
.cs-m-bubble.cs-m-voice-bub {
  padding: 6px 60px 18px 8px; min-width: 240px;
}
.cs-voice {
  display: flex; align-items: center; gap: 10px;
  min-width: 200px;
}
.cs-voice-btn {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--cs-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; padding: 0;
  box-shadow: 0 1px 2px rgba(37,99,235,.3);
  transition: background .15s, transform .12s;
}
.cs-m-r .cs-voice-btn { background: #4fae4e; box-shadow: 0 1px 2px rgba(79,174,78,.35); }
.cs-voice-btn:hover { filter: brightness(1.08); }
.cs-voice-btn:active { transform: scale(.92); }
.cs-voice-btn svg { width: 18px; height: 18px; display: block; }
.cs-voice-btn .ic-pause { display: none; }
.cs-voice-btn.playing .ic-play { display: none; }
.cs-voice-btn.playing .ic-pause { display: block; }
.cs-voice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.cs-voice-wave { display: flex; align-items: center; gap: 2px; height: 22px; cursor: pointer; }
.cs-voice-wave .bar {
  flex: 1; min-width: 2px; max-width: 4px; background: rgba(0,0,0,.22);
  border-radius: 1px; display: block; transition: background .15s;
}
.cs-m-l .cs-voice-wave .bar { background: rgba(51,144,236,.35); }
.cs-m-r .cs-voice-wave .bar { background: rgba(94,170,100,.45); }
.cs-voice-wave .bar.played { background: var(--cs-brand); }
.cs-m-r .cs-voice-wave .bar.played { background: #2a8930; }
.cs-voice-time { font-size: 12px; color: var(--cs-text-mid); font-variant-numeric: tabular-nums; line-height: 1; }
.cs-m-av {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #2563eb); color: #fff;
  font-size: 11px; font-weight: 600; box-shadow: 0 1px 1px rgba(0,0,0,.08);
  align-self: flex-end;
}
.cs-m-av.cs-m-av-self { background: linear-gradient(135deg, #14b8a6, #0891b2); }
.cs-m-av-slot { width: 28px; flex: 0 0 28px; }
.cs-m-av-slot.hidden { visibility: hidden; }
.cs-m-acts { opacity: 0; transition: opacity .15s; margin-left: 4px; align-self: flex-end; padding-bottom: 4px; display: inline-flex; gap: 2px; }
.cs-m:hover .cs-m-acts { opacity: 1; }
.cs-m-acts button { padding: 1px 5px; border: 1px solid var(--cs-border); background: var(--cs-panel); border-radius: 4px; cursor: pointer; font-size: 11px; color: var(--cs-text-mid); }
.cs-m-acts button:hover { background: var(--cs-brand-soft); border-color: var(--cs-brand); color: var(--cs-brand); }
.cs-m-quote {
  font-size: 12px; padding: 6px 8px; background: rgba(15,23,42,.06);
  border-left: 3px solid var(--cs-brand); border-radius: 4px; margin-bottom: 4px;
  color: var(--cs-text-mid); display: block; line-height: 1.4;
}
.cs-m-r .cs-m-quote { background: rgba(0,0,0,.05); border-left-color: #4fae4e; color: var(--cs-text-mid); }
.cs-m-day-sep {
  align-self: center; margin: 12px auto 8px;
  padding: 4px 12px; background: rgba(255,255,255,.95); color: var(--cs-text-mid); font-size: 11.5px;
  border-radius: 8px; box-shadow: var(--cs-shadow-sm); font-weight: 500;
  display: block; text-align: center;
}

/* 输入区 */
.cs-mid-input { border-top: 1px solid var(--cs-border); padding: 10px 14px 12px; background: var(--cs-panel); }
.cs-quick-bar { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; flex-wrap: wrap; min-height: 28px; border-bottom: 1px dashed var(--cs-border); margin-bottom: 8px; }
.cs-quick-cat { padding: 4px 10px; border: 1px solid var(--cs-border); border-radius: 6px; font-size: 12px; background: var(--cs-panel); color: var(--cs-text); cursor: pointer; }
.cs-quick-cat:focus { outline: none; border-color: var(--cs-brand); }
.cs-quick-list { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cs-quick-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--cs-panel); border: 1px solid var(--cs-border); border-radius: 999px; font-size: 12px; cursor: pointer; transition: all .12s; color: var(--cs-text-mid); user-select: none; }
.cs-quick-chip:hover { background: var(--cs-brand-soft); border-color: var(--cs-brand); color: var(--cs-brand); }
.cs-quick-chip kbd { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 1px 5px; margin-right: 5px; background: var(--cs-bg); border: 1px solid var(--cs-border); border-radius: 3px; color: var(--cs-text-mid); }
.cs-mid-input textarea { width: 100%; min-height: 70px; padding: 12px 14px; border: 1px solid var(--cs-border); border-radius: 10px; resize: none; font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--cs-text); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; background: var(--cs-panel); }
.cs-mid-input textarea:focus { outline: none; border-color: var(--cs-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.cs-mid-input textarea::placeholder { color: var(--cs-text-mute); }
.cs-mid-input textarea:disabled { background: var(--cs-bg); color: var(--cs-text-mute); }
.cs-mid-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cs-mid-actions button { padding: 7px 12px; border: 1px solid var(--cs-border); background: var(--cs-panel); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cs-text); font-weight: 500; transition: all .12s; white-space: nowrap; flex-shrink: 0; }
.cs-mid-actions button:hover:not(:disabled) { border-color: var(--cs-border-strong); background: var(--cs-bg); }
.cs-mid-actions button.primary { background: var(--cs-brand); color: #fff; border-color: var(--cs-brand); padding-left: 22px; padding-right: 22px; box-shadow: 0 1px 3px rgba(37,99,235,.25); }
.cs-mid-actions button.primary:hover:not(:disabled) { background: var(--cs-brand-hover); border-color: var(--cs-brand-hover); }
.cs-mid-actions button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── RIGHT: 客户档案 ──────────── */
.cs-wb-right { background: var(--cs-panel); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 18px; overflow-y: auto; box-shadow: var(--cs-shadow-sm); }
.cs-wb-right h3 { margin: 0 0 12px; font-size: 15px; color: var(--cs-text); font-weight: 700; }
.cs-wb-right hr { border: none; border-top: 1px solid var(--cs-border); margin: 14px 0; }
.cs-p-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--cs-text); }
.cs-p-row label { color: var(--cs-text-mid); font-weight: 500; }
.cs-p-row strong { color: var(--cs-text); font-weight: 700; }
.cs-p-rec { font-size: 12px; color: var(--cs-text-mid); padding: 6px 0; border-bottom: 1px solid var(--cs-border); }
.pos { color: var(--cs-success); }
.neg { color: var(--cs-danger); }
.cs-p-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cs-p-head h3 { margin: 0; font-size: 15px; }
.cs-bl-badge { background: var(--cs-danger); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.cs-btn-bl { padding: 6px 14px; border: 1px solid var(--cs-danger); color: var(--cs-danger); background: var(--cs-panel); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all .12s; }
.cs-btn-bl:hover { background: #fef2f2; }
.cs-sec-title { font-size: 12px; font-weight: 700; color: var(--cs-text-mid); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.cs-tag-area { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-tag-chip { background: var(--cs-brand-soft); color: var(--cs-brand); padding: 4px 10px; border-radius: 999px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; border: 1px solid rgba(37,99,235,.2); }
.cs-tag-chip button { background: none; border: 0; color: var(--cs-brand); cursor: pointer; padding: 0 2px; opacity: .6; font-size: 14px; line-height: 1; }
.cs-tag-chip button:hover { opacity: 1; }
.cs-tag-input { border: 1px dashed var(--cs-border-strong); background: transparent; padding: 4px 10px; border-radius: 999px; font-size: 11px; outline: none; width: 90px; color: var(--cs-text); }
.cs-tag-input:focus { border-color: var(--cs-brand); border-style: solid; background: var(--cs-brand-soft); }

/* 备注 */
.cs-notes { max-height: 200px; overflow-y: auto; }
.cs-note-item { background: #fffbeb; border-left: 3px solid var(--cs-warn); padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; font-size: 12.5px; color: var(--cs-text); position: relative; line-height: 1.5; }
.cs-note-meta { font-size: 10.5px; color: var(--cs-text-mid); margin-bottom: 4px; font-weight: 500; }
.cs-note-del { position: absolute; right: 6px; top: 6px; background: none; border: 0; cursor: pointer; color: var(--cs-text-mute); font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.cs-note-del:hover { background: rgba(0,0,0,.05); color: var(--cs-danger); }
.cs-note-input { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cs-note-input textarea { border: 1px solid var(--cs-border); border-radius: 6px; padding: 8px; font-size: 12.5px; resize: vertical; color: var(--cs-text); font-family: inherit; }
.cs-note-input textarea:focus { outline: none; border-color: var(--cs-brand); box-shadow: 0 0 0 2px rgba(37,99,235,.08); }
.cs-note-input button { padding: 6px 12px; border: 1px solid var(--cs-brand); background: var(--cs-panel); color: var(--cs-brand); border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; align-self: flex-end; }
.cs-note-input button:hover { background: var(--cs-brand-soft); }

/* 历史 + 旅程 */
.cs-conv-history { max-height: 160px; overflow-y: auto; }
.cs-history-item { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--cs-text); margin-bottom: 2px; }
.cs-history-item:hover { background: var(--cs-bg); }
.cs-history-item.on { background: var(--cs-brand-soft); font-weight: 600; color: var(--cs-brand); }
.cs-journey { max-height: 380px; overflow-y: auto; padding-right: 4px; }
.cs-jr-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cs-border); font-size: 12.5px; color: var(--cs-text); }
.cs-jr-item:last-child { border-bottom: none; }
.cs-jr-item .muted { color: var(--cs-text-mute); font-size: 11px; margin-top: 2px; }

/* 健康度卡 */
.cs-health-card { margin: 8px 0 14px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, var(--cs-bg), #fff); border: 1px solid var(--cs-border); border-left-width: 4px; }
.cs-bd { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px; margin: 2px 4px 2px 0; font-weight: 500; }
.cs-bd-plus { background: #dcfce7; color: #166534; }
.cs-bd-minus { background: #fee2e2; color: #991b1b; }

/* typing 提示 */
.cs-typing-ind { padding: 8px 18px; font-size: 12px; color: var(--cs-text-mid); font-style: italic; background: var(--cs-bg); border-top: 1px dashed var(--cs-border); }
.cs-m-img { max-width: 220px; max-height: 160px; border-radius: 10px; cursor: zoom-in; display: block; margin-top: 4px; }
.cs-m-bubble.read::after { content: ' ✓✓'; color: var(--cs-success); font-size: 11px; opacity: .7; }
.cs-m-bubble:not(.read).cs-m-r::after { content: ' ✓'; color: rgba(255,255,255,.55); font-size: 11px; }

/* alert toast */
.cs-alert-bar { position: fixed; top: 70px; right: 18px; z-index: 9999; max-width: 380px; }
.cs-alert { background: var(--cs-panel); border-left: 4px solid var(--cs-brand); padding: 12px 16px; margin-bottom: 10px; box-shadow: var(--cs-shadow); border-radius: 8px; font-size: 13px; color: var(--cs-text); display: flex; align-items: center; gap: 10px; }
.cs-alert-info { border-color: var(--cs-brand); background: var(--cs-brand-soft); }
.cs-alert-warn { border-color: var(--cs-warn); background: #fffbeb; color: #78350f; }
.cs-alert-danger { border-color: var(--cs-danger); background: #fef2f2; color: #7f1d1d; }
.cs-alert button { padding: 4px 10px; border: 1px solid currentColor; background: transparent; border-radius: 6px; cursor: pointer; font-size: 11px; color: inherit; opacity: .7; }
.cs-alert button:hover { opacity: 1; }

/* lightbox */
.cs-lightbox { position: fixed; inset: 0; background: rgba(15,23,42,.92); z-index: 99999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.cs-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cs-lb-close { position: fixed; top: 24px; right: 28px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 24px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.cs-lb-close:hover { background: rgba(255,255,255,.3); }

/* 内部备注样式 */
.cs-m-internal .cs-m-bubble { background: linear-gradient(135deg, #fef9c3, #fef08a) !important; color: #713f12 !important; border: 1px solid #facc15 !important; }
.cs-m-internal .cs-m-bubble::before { content: '📝 内部备注 · 客户不可见'; display: block; font-size: 10px; font-weight: 700; color: #854d0e; margin-bottom: 4px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }

/* drag drop */
.cs-dnd-over { outline: 3px dashed var(--cs-brand); outline-offset: -3px; background: var(--cs-brand-soft); }
/* H6 大盘 */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi-card { background: #fff; border: 1px solid #e0e6ed; border-radius: 8px; padding: 18px; text-align: center; }
.kpi-card.kpi-act { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-color: #1976d2; }
.kpi-card.kpi-warn { background: linear-gradient(135deg, #fff3e0, #ffe0b2); border-color: #f57c00; }
.kpi-card.kpi-on { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border-color: #388e3c; }
.kpi-num { font-size: 32px; font-weight: 700; color: #1976d2; line-height: 1; }
.kpi-card.kpi-warn .kpi-num { color: #f57c00; }
.kpi-card.kpi-on .kpi-num { color: #388e3c; }
.kpi-lab { font-size: 12px; color: #666; margin-top: 6px; }
/* H6 客服大盘 */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi-card { background: #fff; border: 1px solid #e0e6ed; border-radius: 8px; padding: 18px; text-align: center; }
.kpi-card.kpi-act { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-color: #1976d2; }
.kpi-card.kpi-warn { background: linear-gradient(135deg, #fff3e0, #ffe0b2); border-color: #f57c00; }
.kpi-card.kpi-on { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border-color: #388e3c; }
.kpi-num { font-size: 32px; font-weight: 700; color: #1976d2; line-height: 1; }
.kpi-card.kpi-warn .kpi-num { color: #f57c00; }
.kpi-card.kpi-on .kpi-num { color: #388e3c; }
.kpi-lab { font-size: 12px; color: #666; margin-top: 6px; }

/* Day1 增量样式 */
.cs-p-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cs-p-head h3 { margin: 0; }
.cs-bl-badge { background: #ef4444; color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
.cs-btn-bl { padding: 4px 12px; border: 1px solid #ef4444; color: #ef4444; background: #fff; border-radius: 14px; cursor: pointer; font-size: 12px; }
.cs-btn-bl:hover { background: #fef2f2; }
.cs-sec-title { font-size: 12px; font-weight: 600; color: #555; margin: 8px 0 6px; }
.cs-tag-area { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cs-tag-chip { background: #ddf4ff; color: #0969da; padding: 3px 8px; border-radius: 10px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.cs-tag-chip button { background: none; border: 0; color: #0969da; cursor: pointer; padding: 0 2px; }
.cs-tag-input { border: 1px dashed #d0d7de; background: transparent; padding: 3px 8px; border-radius: 10px; font-size: 11px; outline: none; width: 80px; }
.cs-tag-input:focus { border-color: #0969da; border-style: solid; }
.cs-notes { max-height: 200px; overflow-y: auto; }
.cs-note-item { background: #fff8e1; border-left: 3px solid #f9a825; padding: 6px 8px; margin-bottom: 4px; border-radius: 4px; font-size: 12px; position: relative; }
.cs-note-meta { font-size: 10px; margin-bottom: 2px; }
.cs-note-del { position: absolute; right: 4px; top: 4px; background: none; border: 0; cursor: pointer; color: #999; font-size: 11px; }
.cs-note-input { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cs-note-input textarea { border: 1px solid #d0d7de; border-radius: 4px; padding: 6px; font-size: 12px; resize: vertical; }
.cs-note-input button { padding: 4px 10px; border: 1px solid #0969da; background: #fff; color: #0969da; border-radius: 4px; cursor: pointer; font-size: 12px; }
.cs-conv-history { max-height: 160px; overflow-y: auto; }
.cs-history-item { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.cs-history-item:hover { background: #f0f6fc; }
.cs-history-item.on { background: #ddf4ff; font-weight: 600; }

.cs-typing-ind { padding: 6px 16px; font-size: 12px; color: #888; font-style: italic; background: #f0f4f8; border-top: 1px dashed #e0e6ed; }
.cs-m-img { max-width: 200px; max-height: 150px; border-radius: 8px; cursor: pointer; display: block; }
.cs-m-bubble.read::after { content: ' ✓✓'; color: #4caf50; font-size: 11px; }
.cs-m-bubble:not(.read).cs-m-r::after { content: ' ✓'; color: rgba(255,255,255,.6); font-size: 11px; }

.cs-alert-bar { position: fixed; top: 60px; right: 16px; z-index: 9999; max-width: 360px; }
.cs-alert { background: #fff; border-left: 4px solid; padding: 10px 14px; margin-bottom: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1); border-radius: 4px; font-size: 13px; }
.cs-alert-warn { border-color: #f57c00; background: #fff3e0; }
.cs-alert-danger { border-color: #d32f2f; background: #ffebee; }
.cs-alert button { padding: 2px 8px; border: 1px solid #ccc; background: #fff; border-radius: 3px; cursor: pointer; font-size: 11px; }

.cs-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 99999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.cs-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
.cs-lb-close { position: fixed; top: 20px; right: 24px; background: rgba(255,255,255,.2); border: 0; color: #fff; font-size: 30px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }

/* === Day 2: cs-dashboard charts === */
.cs-dash-tabs{display:flex;align-items:center;gap:8px;margin:6px 0 16px;padding:6px;background:#f7f8fa;border-radius:8px}
.cs-dash-tab{padding:6px 14px;border:1px solid transparent;background:transparent;border-radius:6px;cursor:pointer;font-size:13px;color:#555}
.cs-dash-tab.active{background:#fff;border-color:#dde2ea;color:#1f2937;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cs-dash-h3{margin:24px 0 10px;font-size:15px;color:#1f2937}
.cs-chart-box{padding:14px;background:#fafbfc;border:1px solid #eef0f4;border-radius:10px;min-height:60px}
.cs-svg-chart{width:100%;height:auto;max-height:260px;display:block}
.cs-bars{display:flex;flex-direction:column;gap:8px}
.cs-bar-row{display:flex;align-items:center;gap:12px;font-size:13px}
.cs-bar-label{flex:0 0 110px;color:#374151}
.cs-bar-track{flex:1;height:14px;background:#eef0f4;border-radius:7px;overflow:hidden}
.cs-bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:7px;transition:width .3s}
.cs-bar-val{flex:0 0 140px;color:#6b7280;font-size:12px;text-align:right}
.cs-cmt-list{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto}
.cs-cmt{padding:10px 12px;background:#fff;border:1px solid #eef0f4;border-radius:8px}
.cs-cmt-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cs-cmt-star{color:#f59e0b;letter-spacing:1px;font-size:13px}
.cs-cmt-meta{color:#9ca3af;font-size:11px}
.cs-cmt-body{color:#374151;font-size:13px;line-height:1.5;word-break:break-all}


/* === D2: hotkeys / categories / drag-drop / dark mode === */
.cs-quick-bar { display:flex; align-items:center; gap:8px; padding:6px 8px; flex-wrap:wrap; background:#fafbfc; border-bottom:1px solid #eef0f4 }
.cs-quick-cat { padding:3px 6px; border:1px solid #d0d7de; border-radius:6px; font-size:12px; background:#fff }
.cs-quick-list { display:inline-flex; gap:6px; flex-wrap:wrap }
.cs-quick-chip { padding:3px 8px; background:#fff; border:1px solid #d8dde5; border-radius:14px; font-size:12px; cursor:pointer; transition:all .15s }
.cs-quick-chip:hover { background:#eff6ff; border-color:#3b82f6 }
.cs-quick-chip kbd { font-family:'JetBrains Mono',monospace; font-size:10px; padding:1px 4px; margin-right:4px; background:#f1f3f5; border:1px solid #ced4da; border-radius:3px; color:#495057 }
.cs-dnd-over { outline:3px dashed #3b82f6; outline-offset:-3px; background:rgba(59,130,246,0.04) }

/* dark mode */
body.cs-dark { background:#0f172a; color:#e2e8f0 }
body.cs-dark .cs-wb { background:#0f172a }
body.cs-dark .cs-wb-left, body.cs-dark .cs-wb-mid, body.cs-dark .cs-wb-right { background:#1e293b; border-color:#334155; color:#e2e8f0 }
body.cs-dark .cs-conv-list, body.cs-dark .cs-mid-msgs, body.cs-dark .cs-mid-input { background:#1e293b }
body.cs-dark .cs-conv-item { border-bottom-color:#334155 }
body.cs-dark .cs-conv-item:hover { background:#334155 }
body.cs-dark .cs-conv-item.on { background:#3b82f622; border-left:3px solid #60a5fa }
body.cs-dark .cs-search, body.cs-dark .cs-mid-input textarea, body.cs-dark .cs-quick-cat { background:#0f172a; color:#e2e8f0; border-color:#334155 }
body.cs-dark .cs-mid-input textarea::placeholder { color:#64748b }
body.cs-dark .cs-quick-bar { background:#0f172a; border-bottom-color:#334155 }
body.cs-dark .cs-quick-chip { background:#1e293b; border-color:#475569; color:#e2e8f0 }
body.cs-dark .cs-quick-chip:hover { background:#3b82f622 }
body.cs-dark .cs-quick-chip kbd { background:#0f172a; border-color:#475569; color:#cbd5e1 }
body.cs-dark .cs-msg-mine .cs-bubble { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff }
body.cs-dark .cs-msg-them .cs-bubble { background:#334155; color:#e2e8f0 }
body.cs-dark .muted { color:#94a3b8 }
body.cs-dark h2, body.cs-dark h3, body.cs-dark .cs-mid-header strong { color:#f1f5f9 }
body.cs-dark .card { background:#1e293b; border-color:#334155; color:#e2e8f0 }
body.cs-dark .kpi-card { background:#0f172a; border-color:#334155; color:#e2e8f0 }
body.cs-dark .cs-chart-box { background:#0f172a; border-color:#334155 }
body.cs-dark .cs-cmt { background:#1e293b; border-color:#334155; color:#e2e8f0 }
body.cs-dark .cs-bar-track { background:#334155 }
body.cs-dark .cs-dash-tabs { background:#0f172a }
body.cs-dark .cs-dash-tab { color:#94a3b8 }
body.cs-dark .cs-dash-tab.active { background:#1e293b; border-color:#475569; color:#f1f5f9 }
body.cs-dark .cs-perm-btn { background:#1e293b; border-color:#475569; color:#e2e8f0 }
body.cs-dark .cs-svg-chart text { fill:#94a3b8 !important }
body.cs-dark .cs-svg-chart line { stroke:#334155 !important }


/* === D3 rich messages === */
.cs-m-quote { padding:4px 10px; margin:0 0 4px; background:rgba(0,0,0,.04); border-left:3px solid #94a3b8; font-size:11px; color:#475569; border-radius:3px; max-width:300px }
.cs-m-acts { float:right; opacity:0; transition:opacity .15s }
.cs-m:hover .cs-m-acts { opacity:1 }
.cs-m-acts button { background:none; border:none; cursor:pointer; padding:0 2px; font-size:11px; opacity:.7 }
.cs-m-acts button:hover { opacity:1 }
.cs-m-recalled { background:#f1f3f5 !important; color:#94a3b8 !important; font-style:italic; font-size:12px }
.cs-m-file a { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; text-decoration:none; color:inherit }
.cs-m-file-ic { font-size:24px }
.cs-m-file-name { font-weight:600; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cs-m-file-size { font-size:11px }
.cs-m-audio { padding:6px 8px }
.cs-m-audio audio { height:30px; vertical-align:middle }
.cs-m-dur { margin-left:6px; font-size:11px; color:#888 }
.cs-m-link { display:flex; gap:8px; margin-top:6px; padding:8px; border:1px solid #e3e8ee; border-radius:8px; background:#fff; text-decoration:none; color:inherit; max-width:320px }
.cs-m-link img { width:60px; height:60px; object-fit:cover; border-radius:5px; flex:0 0 60px }
.cs-m-link-title { font-weight:600; font-size:13px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cs-m-link-desc { font-size:11px; line-height:1.3; max-height:30px; overflow:hidden }
.cs-quote-bar { padding:4px 10px; background:#fef3c7; border:1px solid #fcd34d; border-radius:5px; font-size:12px; margin-bottom:6px; display:flex; align-items:center; gap:8px }
.cs-quote-bar button { margin-left:auto; padding:2px 8px; border:1px solid #fcd34d; background:#fff; cursor:pointer; border-radius:3px }

body.cs-dark .cs-m-recalled { background:#0f172a !important; color:#64748b !important }
body.cs-dark .cs-m-link { background:#0f172a; border-color:#334155 }
body.cs-dark .cs-m-quote { background:rgba(255,255,255,.04); border-left-color:#475569; color:#94a3b8 }
body.cs-dark .cs-quote-bar { background:#3f2c0a; border-color:#a3852f; color:#fbbf24 }
body.cs-dark .cs-quote-bar button { background:#1e293b; color:#fbbf24; border-color:#a3852f }


/* === D6-3 tag filter pills === */
.cs-tag-filter{padding:6px 10px;display:flex;flex-wrap:wrap;gap:5px;border-bottom:1px solid #eef0f4;background:#fafbfc}
.cs-tag-pill{padding:3px 9px;background:#fff;border:1px solid #d8dde5;border-radius:11px;font-size:11px;color:#374151;cursor:pointer;transition:all .15s}
.cs-tag-pill:hover{background:#eff6ff;border-color:#3b82f6}
.cs-tag-pill.on{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb}
body.cs-dark .cs-tag-filter{background:#0f172a;border-bottom-color:#334155}
body.cs-dark .cs-tag-pill{background:#1e293b;border-color:#475569;color:#e2e8f0}
body.cs-dark .cs-tag-pill.on{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}


/* === D7 internal note styling === */
.cs-m-internal{background:linear-gradient(95deg,#fef3c7,#fde68a)!important;color:#78350f!important;border:1px solid #fcd34d;font-style:italic;font-size:13px;line-height:1.5}
.cs-m-internal-tag{display:inline-block;padding:1px 6px;background:#f59e0b;color:#fff;border-radius:3px;font-size:10px;font-weight:700;font-style:normal;margin-right:6px;letter-spacing:.3px}
.cs-internal-on{background:#fef3c7!important;color:#78350f!important;border-color:#fcd34d!important}
.cs-internal-on::placeholder{color:#92400e!important}
.cs-internal-active{background:#f59e0b!important;color:#fff!important;border-color:#d97706!important}
body.cs-dark .cs-m-internal{background:linear-gradient(95deg,#3f2c0a,#5c4314)!important;color:#fbbf24!important;border-color:#a3852f}
body.cs-dark .cs-internal-on{background:#3f2c0a!important;color:#fbbf24!important;border-color:#a3852f!important}


/* D7-3 whisper styling */
.cs-whisper-on{background:linear-gradient(95deg,#dbeafe,#bfdbfe)!important;color:#1e3a8a!important;border-color:#60a5fa!important}
.cs-whisper-on::placeholder{color:#1d4ed8!important}
.cs-whisper-active{background:#3b82f6!important;color:#fff!important;border-color:#2563eb!important}
body.cs-dark .cs-whisper-on{background:#0c1e3f!important;color:#93c5fd!important;border-color:#1e40af!important}