/* =====================================================================
 *  在线客服系统 · 控制台样式（客服工作台 /admin + 总后台 /super）
 *  视觉语言：深藏青侧栏 + 白色顶栏 + 浅灰底 + 白色圆角卡片
 *  基础组件（按钮/输入/徽标/弹窗/表格）在 app.css，本文件只写布局与业务组件
 * ===================================================================== */

/* ---------------------------------------------------------------------
 *  0. 控制台专用令牌
 * ------------------------------------------------------------------- */
 :root {
    --nav-w: 196px;
    /* 侧栏 */
    --side-bg: #1b2942;
    --side-bg-2: #16223a;
    --side-ink: rgba(255, 255, 255, .66);
    --side-ink-on: #ffffff;
    --side-active: #2b6cff;
    /* 卡片 */
    --card-bd: #e9edf5;
    --card-sh: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
    --card-sh-hover: 0 4px 10px rgba(16, 24, 40, .07), 0 14px 30px rgba(16, 24, 40, .08);
    --page-bg: #eef1f7;
}

.cs-console-body { background: var(--page-bg); }

/* ---------------------------------------------------------------------
 *  1. 总后台外壳：左侧深色导航 + 右侧主区
 * ------------------------------------------------------------------- */
.adm-shell {
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2));
    overflow: hidden;
}

.adm-side {
    flex: none;
    width: var(--nav-w);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2));
    color: var(--side-ink);
    z-index: 40;
}

.adm-side-brand {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 16px;
    color: #fff;
}
.adm-side-brand .lg {
    width: 34px; height: 34px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; border-radius: 10px;
    background: linear-gradient(140deg, #3d7bff, #7c5cff);
    box-shadow: 0 6px 16px rgba(43, 108, 255, .4);
}
.adm-side-brand .tx b { display: block; font-size: 14px; font-weight: 700; letter-spacing: .2px; line-height: 1.3; }
/* Modified point: 侧栏站点名白色并加大 */
.adm-side-brand .tx small { display: block; font-size: 14px; color: #fff; opacity: 1; font-weight: 600; }

.rt-stars { color: #f5b301; letter-spacing: 1px; }

.adm-tabs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
}
.adm-tabs::-webkit-scrollbar { width: 5px; }
.adm-tabs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

.adm-tabs button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--side-ink);
    border-radius: 11px;
    text-align: left;
    transition: background .15s, color .15s;
}
.adm-tabs button i,
.adm-tabs button .mi {
    flex: none;
    width: 20px;
    margin-right: 11px;
    font-size: 15px;
    font-style: normal;
    text-align: center;
    line-height: 1;
}
/* 线性图标（替换 emoji） */
.adm-tabs button i svg { display: block; margin: 0 auto; }
.adm-tabs button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tabs button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.adm-tabs button.active {
    background: var(--side-active);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(43, 108, 255, .34);
}

.adm-side-foot {
    position: relative;
    flex: none;
    padding: 12px 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    z-index: 50;
}
/* Modified point: 底部用户菜单向上展开，避免被外壳 overflow 裁切 */
.adm-side-foot .csl-menu {
    top: auto;
    bottom: calc(100% + 8px);
    left: 12px;
    right: 12px;
    min-width: 0;
}

.adm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: hidden;
}

/* Modified point: 顶栏与侧栏藏青齐平，圆角落在浅色内容区 */
.adm-top {
    flex: none;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    background: transparent;
    border-bottom: 0;
    color: #fff;
}
.adm-top-title { display: flex; align-items: center; min-width: 0; }
.adm-top-title .ic {
    flex: none;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-right: 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.adm-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-top-actions { margin-left: auto; display: flex; align-items: center; flex: none; }
.adm-top-actions > * { margin-left: 10px; }
.adm-updated { font-size: var(--f-xs); color: rgba(255, 255, 255, .55); white-space: nowrap; }
.adm-icon-btn {
    width: 34px; height: 34px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    transition: background .15s, color .15s, transform .35s;
}
.adm-icon-btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.adm-icon-btn.spin { transform: rotate(360deg); }
.adm-btn-ghost {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    cursor: pointer;
}
.adm-btn-ghost svg { margin-right: 6px; }
.adm-btn-ghost:hover { background: rgba(255, 255, 255, .22); }

.adm-mode {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    font-size: var(--f-xs);
    border-radius: var(--r-full);
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    border: 1px solid var(--c-primary-100);
    white-space: nowrap;
}
.adm-mode b { font-weight: 700; }
.adm-mode.grab { background: var(--c-warn-50); color: #a8690a; border-color: #ffe0a8; }

/* 内容区 */
.adm-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px 28px;
    overscroll-behavior: contain;
    background: var(--page-bg);
    border-top-left-radius: 16px;
}
.adm-wrap { max-width: none; width: 100%; margin: 0; }
.csl-page .adm-wrap { max-width: none; width: 100%; margin: 0; }

/* 侧栏底部用户 */
.adm-user {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.adm-user:hover { background: rgba(255, 255, 255, .07); }
.adm-user .cs-avatar { flex: none; }
.adm-user .tx { flex: 1; min-width: 0; }
.adm-user .nm { display: block; font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user .rl { display: block; font-size: 11px; color: rgba(255, 255, 255, .5); }
.adm-user .cv { flex: none; font-size: 11px; color: rgba(255, 255, 255, .5); }

/* 顶栏用户（兼容旧结构） */
.csl-user {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.csl-user:hover { background: #f3f5fa; }
.csl-user .nm { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.csl-user .rl { display: block; font-size: 11px; color: var(--c-muted-2); }

.csl-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    box-shadow: var(--sh-md);
    z-index: 90;
    display: none;
}
.csl-menu.open { display: block; animation: cs-pop .16s ease; }
.csl-menu button {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 11px;
    font-size: 13px;
    color: var(--c-ink-2);
    border-radius: 8px;
    text-align: left;
}
.csl-menu button:hover { background: var(--c-bg-2); color: var(--c-ink); }
.csl-menu button.danger { color: var(--c-danger); }
.csl-menu button.danger:hover { background: var(--c-danger-50); }
.csl-menu .sep { height: 1px; margin: 5px 8px; background: var(--c-line); }

/* 用户菜单挂载点 */
.adm-menu-host { position: relative; }

/* ---------------------------------------------------------------------
 *  2. 统计卡片（图标 + 大号彩色数字 + 右上装饰圆）
 * ------------------------------------------------------------------- */
.adm-stats {
    display: grid;
    /* 固定 4 列：数据总览与系统信息都恰好是 8 张卡片 → 规整 4×2，
       不会出现 auto-fill 那种「最后一行卡片被拉宽」的参差感 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.adm-stat {
    position: relative;
    overflow: hidden;
    padding: 18px 20px 17px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 14px;
    box-shadow: var(--card-sh);
    transition: transform .16s, box-shadow .16s;
}
.adm-stat:hover { transform: translateY(-2px); box-shadow: var(--card-sh-hover); }
.adm-stat::after {
    content: "";
    position: absolute;
    top: -34px; right: -34px;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: currentColor;
    opacity: .06;
}
.adm-stat .lb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
    color: var(--c-muted);
    margin-bottom: 10px;
}
.adm-stat .lb .ic {
    width: 24px; height: 24px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    border-radius: 7px;
    background: currentColor;
    filter: saturate(1.05);
    color: inherit;
}
.adm-stat .lb .ic { opacity: .16; }
.adm-stat .lb .ic > span { opacity: 6.25; }
.adm-stat .vl {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: currentColor;
}
.adm-stat .ex { margin-top: 8px; font-size: 12px; color: var(--c-muted-2); }
.adm-stat.tone-primary { color: var(--c-primary); }
.adm-stat.tone-success { color: #16a34a; }
.adm-stat.tone-warn    { color: #e08a00; }
.adm-stat.tone-danger  { color: var(--c-danger); }
.adm-stat.tone-violet  { color: var(--c-violet); }
.adm-stat.tone-info    { color: #0891b2; }

/* 图标底色用淡色（用伪元素叠加，避免影响数字颜色） */
.adm-stat .lb .ic { position: relative; background: #f1f4fa; }
.adm-stat .lb .ic::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: currentColor;
    opacity: .14;
}
/* 卡片图标改为线性 SVG：需要显式尺寸并压在伪元素之上（iOS 安全） */
.adm-stat .lb .ic > svg {
    position: relative;
    z-index: 1;
    width: 16px; height: 16px;
    display: block;
    stroke: currentColor;
}
.adm-stat .lb .ic > svg * { stroke: currentColor; }

/* 圆形图标按钮（顶栏刷新等） */
.adm-icon-btn > svg { width: 17px; height: 17px; display: block; stroke: currentColor; }

/* 「更多操作」菜单项图标 */
.cs-menu-it { display: flex; align-items: center; gap: 10px; }
.cs-menu-it > .mi { flex: none; display: inline-flex; align-items: center; width: 18px; }
.cs-menu-it > .mi > svg { width: 16px; height: 16px; display: block; stroke: currentColor; }

/* ---------------------------------------------------------------------
 *  3. 面板 / 网格
 * ------------------------------------------------------------------- */
.adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.adm-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
}
.adm-grid > *, .adm-grid-2 > *, .adm-stats > * { min-width: 0; }
/* Modified point: 网格内并排卡片不再叠加 cs-panel 相邻上边距，避免顶边不齐 */
.adm-grid > .cs-panel + .cs-panel,
.adm-grid-2 > .cs-panel + .cs-panel { margin-top: 0; }
.lk-link-split { align-items: start; } /* Modified point: 弹窗模式保持自身高度 */
.lk-link-side > .cs-panel + .cs-panel { margin-top: 16px; }

/* Modified point: 可检索下拉（接待客服等） */
.cs-combo { position: relative; width: 100%; }
.cs-combo-trig.cs-select {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-combo-panel {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 4px);
    z-index: 40;
    background: var(--c-panel, #fff);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    padding: 8px;
}
.cs-combo-panel .cs-input { margin-bottom: 6px; }
.cs-combo-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-combo-opt {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
}
.cs-combo-opt:hover { background: var(--c-primary-50, #eef2ff); color: var(--c-primary); }
.cs-combo-opt.is-on { background: var(--c-primary-50, #eef2ff); color: var(--c-primary); font-weight: 600; }

/* ---------------------------------------------------------------------
 *  4. 控制台内的表格微调
 * ------------------------------------------------------------------- */
.cs-console-body .cs-table-wrap {
    border: 0;
    border-radius: 0;
    overflow-x: auto;
}
.cs-console-body .cs-table th {
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-muted);
    background: #f7f9fc;
    white-space: nowrap;
    border-bottom: 1px solid var(--card-bd);
}
.cs-console-body .cs-table td {
    padding: 13px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--c-line-2);
    vertical-align: middle;
}
.cs-console-body .cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-console-body .cs-table tbody tr:hover td { background: #f9fbff; }
.cs-console-body .cs-panel { border-radius: 14px; box-shadow: var(--card-sh); }

/* 排行条 */
.adm-rank { display: flex; flex-direction: column; gap: 14px; }
.adm-rank-row { display: flex; align-items: center; gap: 11px; }
.adm-rank-row .bar {
    flex: 1; min-width: 0;
    height: 7px;
    background: var(--c-bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.adm-rank-row .bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #5b8cff, #2b6cff);
}
.adm-rank-row .vl { flex: none; font-size: 12px; color: var(--c-muted); }

/* 柱状趋势图（纯 CSS，兼容两种结构）
   A. 总后台/访客趋势：  .cs-bar-col > .bars > i + i.b2  （双柱）
   B. 客服台趋势：        .cs-bar-col > i + span          （单柱） */
.cs-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    padding: 6px 2px 0;
}
.cs-bar-col {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
.cs-bar-col .bars {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}
.cs-bar-col .bars > i {
    display: block;
    width: 11px;
    min-height: 3px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #5b8cff, #2b6cff);
    transition: opacity .15s;
}
.cs-bar-col .bars > i.b2 { background: linear-gradient(180deg, #c5d6ff, #a8c2ff); }
.cs-bar-col > i {
    display: block;
    width: 14px;
    min-height: 3px;
    max-height: calc(100% - 22px);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #5b8cff, #2b6cff);
    transition: opacity .15s;
}
.cs-bar-col:hover .bars > i,
.cs-bar-col:hover > i { opacity: .78; }
.cs-bar-col .cap,
.cs-bar-col > span { flex: none; font-size: 11px; color: var(--c-muted-2); }
.cs-bar-col .num { flex: none; font-size: 11px; color: var(--c-ink-2); font-weight: 600; }
.adm-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--c-muted); }
.adm-legend i {
    display: inline-block;
    width: 9px; height: 9px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: -1px;
}
.adm-legend .l1 { background: #2b6cff; }
.adm-legend .l2 { background: #a8c2ff; }
.adm-chart { padding-top: 4px; }
.adm-chart .adm-legend { justify-content: center; margin-top: 12px; }

/* 代码块 */
.adm-code {
    position: relative;
    padding: 13px 88px 13px 15px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: #1e3a8a;
    background: #f4f7fd;
    border: 1px solid #dfe8f8;
    border-radius: 10px;
    word-break: break-all;
    line-height: 1.7;
}
.adm-code .cp {
    position: absolute;
    top: 8px; right: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-family: var(--font);
    color: var(--c-primary);
    background: #fff;
    border: 1px solid #cfdcf5;
    border-radius: 7px;
}
.adm-code .cp:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* 链接/二维码卡片 */
.adm-link-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
}
.adm-link-card .qr {
    flex: none;
    width: 92px; height: 92px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 10px;
}
.adm-link-card .qr img { width: 100%; height: 100%; object-fit: contain; }
.adm-link-card .bd { flex: 1; min-width: 0; }

/* 快捷回复卡片 */
.adm-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.adm-quick-card {
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.adm-quick-card:hover { border-color: var(--c-primary-100); box-shadow: var(--card-sh); }

/* 客服卡片 */
/* ---------------- 客服账号卡片（身份 / 数据 / 容量 / 操作 四段式） ---------------- */
.adm-grid-agent { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.adm-agent-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 13px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 14px;
    box-shadow: var(--card-sh);
    min-width: 0;
}

/* ① 身份 */
.agc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agc-head .cs-avatar-lg { flex: none; }
.agc-id { flex: 1; min-width: 0; }
.agc-nm {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink);
}
.agc-nm .ellip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agc-pill {
    flex: none;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
}
.agc-pill.on  { background: #e8f8ef; color: #128a4b; }
.agc-pill.off { background: #eef2f8; color: #6b7a90; }
.agc-pill.bad { background: #fdecec; color: #d6336c; }
.agc-un {
    margin-top: 3px;
    font-size: 12px;
    color: var(--c-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ② 数据 */
.agc-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 14px 0 0;
    padding: 11px 0;
    border-top: 1px solid var(--c-line-2);
    border-bottom: 1px solid var(--c-line-2);
}
.agc-stat { text-align: center; min-width: 0; }
.agc-stat .k { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }
.agc-stat .v {
    margin-top: 3px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agc-stat .v b { font-size: 16px; }

/* ③ 容量条 */
.agc-bar { padding: 12px 0 11px; }
.agc-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--c-muted);
}
.agc-bar-top b { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.agc-bar .bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--c-bg-2, #eef2f8);
    overflow: hidden;
}
.agc-bar .bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-primary), #7c5cff);
    transition: width .3s ease;
}

/* ④ 底部操作 */
.agc-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}
.agc-act { font-size: 11.5px; color: var(--c-muted); }
.agc-ops { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* 表单行 */
.adm-field-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px dashed var(--c-line);
}
.adm-field-row:last-child { border-bottom: 0; }

/* 过滤条 */
.adm-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 14px;
    box-shadow: var(--card-sh);
}
.adm-bar .cs-input, .adm-bar .cs-select { min-width: 130px; flex: 1 1 130px; }

/* 会话线程（抽屉里的聊天记录） */
.adm-drawer {
    width: min(560px, 100vw);
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}
.adm-thread { display: flex; flex-direction: column; }
.adm-thread .cs-msg,
.adm-thread .cs-msg-sys { margin-bottom: 12px; }
.adm-drawer-msg { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; background: #f6f8fc; }
.adm-drawer .cs-drawer-head { flex: none; }
.adm-drawer .cs-drawer-foot { flex: none; }
/* 总后台抽屉里的回复框 */
.adm-drawer-send {
    flex: none;
    display: flex;
    align-items: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--c-line-2);
    background: #fff;
}
.adm-drawer-send .cs-textarea {
    flex: 1; min-width: 0;
    max-height: 96px;
    resize: none;
    margin-right: 8px;
}
.adm-drawer-send .cs-btn { flex: none; height: 36px; }

/* 清理工具选项 */
.clean-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    cursor: pointer;
}
.clean-opt:hover { border-color: var(--c-primary-100); }
/* 清理工具：选中态给出明确视觉反馈（之前点了看不出是否选中） */
.clean-opt.checked {
    border-color: var(--c-primary);
    background: var(--c-primary-50);
    box-shadow: inset 0 0 0 1px var(--c-primary);
}
.clean-opt.checked .info .t { color: var(--c-primary-700); font-weight: 600; }
.clean-opt .n { margin-left: auto; color: var(--c-muted); font-size: 13px; }
.clean-opt.checked .n { color: var(--c-primary); font-weight: 600; }
.clean-result { margin-top: 14px; }

/* ---------------------------------------------------------------------
 *  5. 客服工作台（深色窄栏 + 会话列表 + 聊天区 + 访客资料）
 * ------------------------------------------------------------------- */
.cs-console {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--side-bg);
    /* 左侧图标栏宽度：整页视图据此让出空间，保证侧栏常驻可见 */
    --csl-rail-w: 92px;
}
.cs-console * { min-width: 0; }

/* 5.1 深色窄导航栏（图标在上、文字在下） */
.csl-rail {
    flex: none;
    width: var(--csl-rail-w, 88px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 12px;
    background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2));
    color: var(--side-ink);
    z-index: 40;
    overflow-y: auto;
}
.csl-rail-logo {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #2a3348;
    border: 2px solid rgba(255, 255, 255, .28);
    margin-bottom: 8px;
    flex: none;
    padding: 0;
}
.csl-rail-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.csl-rail-btn {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 2px 7px;
    border-radius: 11px;
    color: var(--side-ink);
    transition: background .15s, color .15s;
}
.csl-rail-btn > span:first-child { font-size: 17px; line-height: 1; }
/* 线性图标（替换 emoji）：跟随文字色、不参与基线偏移 */
.csl-rail-btn .mi { display: flex; align-items: center; justify-content: center; height: 19px; }
.csl-rail-btn .mi svg { display: block; }
.csl-rail-tip { font-size: 11px; line-height: 1.25; white-space: nowrap; letter-spacing: 0; }
.csl-rail-btn:hover { background: var(--side-hover, rgba(255, 255, 255, .08)); color: var(--side-ink-on, #fff); }
.csl-rail-btn.active { /* Modified point: 选中色与悬停色一致 */
    background: var(--side-hover, rgba(255, 255, 255, .08));
    color: var(--side-ink-on, #fff);
    box-shadow: none;
}
.csl-rail-sep { width: 42px; height: 1px; margin: 8px 0; background: var(--side-line, rgba(255, 255, 255, .12)); flex: none; }
/* 在线客服头像分组：display:contents 让内部两段分隔线 / 列表继续作为 rail 的 flex 子项，
   整块没有在线客服时加 .cs-hidden 一次性隐藏，避免留下空白框 */
.csl-rail-mid { display: contents; }
.csl-rail-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    overflow-y: auto;
}
.csl-rail-av {
    margin-top: auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .28);
    flex: none;
}
.csl-rail-av img { width: 100%; height: 100%; object-fit: cover; }

/* 5.2 会话列表 */
.csl-list {
    flex: none;
    width: 296px;
    display: flex;
    flex-direction: column;
    background: var(--side-bg);
    border-right: 1px solid var(--side-line, rgba(255, 255, 255, .08));
    overflow: hidden;
}
.csl-list-head {
    flex: none;
    padding: 14px 14px 10px;
    background: transparent;
    border-bottom: 0;
}
.csl-list-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 11px;
}
.csl-list-title h2 { font-size: 16px; font-weight: 700; color: var(--side-ink-on, #fff); }
.csl-list-title .adm-top-title { min-width: 0; }
/* Modified point: 列表顶栏图标改为浅色，与藏青顶栏统一 */
.csl-list-head .cs-btn-ghost {
    color: var(--side-ink, rgba(255, 255, 255, .82));
}
.csl-list-head .cs-btn-ghost:hover {
    background: var(--side-hover, rgba(255, 255, 255, .12));
    color: var(--side-ink-on, #fff);
}
.csl-list-head .cs-btn-ghost svg { stroke: currentColor; }

.csl-search { position: relative; margin-bottom: 10px; }
.csl-search .ic {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    pointer-events: none;
    color: var(--side-ink, rgba(255, 255, 255, .55));
    opacity: 1;
}
.csl-search .ic svg { stroke: currentColor; }
.csl-search .cs-input {
    padding-left: 34px;
    background: var(--side-hover, rgba(255, 255, 255, .12));
    border-color: transparent;
    color: var(--side-ink-on, #fff);
}
.csl-search .cs-input::placeholder { color: var(--side-ink, rgba(255, 255, 255, .42)); }
.csl-search .cs-input:focus {
    background: #fff;
    border-color: var(--c-primary);
    color: var(--c-ink);
}

.csl-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.csl-cats::-webkit-scrollbar { display: none; }
.csl-cat { /* Modified point: 列表筛选在深色顶栏上用浅底，选中反色以免与顶栏同色 */
    flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px;
    font-size: 12.5px;
    color: var(--side-ink, rgba(255, 255, 255, .72));
    background: var(--side-hover, rgba(255, 255, 255, .14));
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.csl-cat:hover { color: var(--side-ink-on, #fff); background: var(--side-hover, rgba(255, 255, 255, .22)); }
.csl-cat.active {
    background: var(--side-ink-on, #fff);
    color: var(--side-bg, #1b2942);
    font-weight: 600;
}
.csl-cat .cs-count {
    min-width: 17px; padding: 0 5px;
    font-size: 11px;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
}
.csl-cat.active .cs-count { background: rgba(0, 0, 0, .12); color: inherit; }
/* 待接待（waiting）有积压时红色高亮，提醒客服尽快接入（需求：原配色太浅看不出） */
.csl-cat.has-alert {
    color: #e0392f;
    background: #fff1f0;
    border: 1px solid #ffc9c4;
    font-weight: 600;
}
.csl-cat.has-alert .cs-count { background: #e0392f; color: #fff; }
.csl-cat.active.has-alert { background: #e0392f; color: #fff; border-color: #e0392f; }
.csl-cat.active.has-alert .cs-count { background: rgba(255, 255, 255, .26); }

.csl-convs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    background: #eef1f7;
    border-top-left-radius: 16px;
}
.csl-convs.is-loading { opacity: .5; pointer-events: none; transition: opacity .12s ease; }

.csl-conv {
    position: relative;
    padding: 12px 12px 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e8edf4;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: background .15s, box-shadow .15s, border-color .15s;
}
.csl-conv + .csl-conv { margin-top: 8px; }
.csl-conv:hover { background: #f8faff; border-color: #d7e3ff; }
.csl-conv.active { /* Modified point: 选中会话跟按钮色 */
    background: var(--c-primary-50);
    border-color: var(--c-primary);
    box-shadow: inset 3px 0 0 var(--c-primary);
}
.csl-conv.has-unread {
    background: #fff8f6;
    border-color: #ffd4cc;
}
.csl-conv.has-unread .csl-conv-name { font-weight: 700; }
.csl-conv.has-unread .csl-conv-prev { color: #334155; font-weight: 600; }
.csl-conv-top { display: flex; align-items: center; }
.csl-conv-name {
    flex: 1;
    min-width: 0;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csl-conv-time { flex: none; font-size: 11px; color: var(--c-muted-2); }
.csl-conv-main {
    display: flex;
    align-items: center;
    margin-top: 6px;
}
.csl-conv-prev {
    flex: 1;
    min-width: 0;
    margin-right: 8px;
    font-size: 12.5px;
    color: var(--c-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csl-conv-tags { display: flex; flex-wrap: wrap; margin-top: 8px; }
.csl-conv-tag {
    padding: 2px 8px;
    margin-right: 6px;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    background: #eef1f7;
    color: var(--c-muted);
}
.csl-conv-tag.warn { background: #fff1f0; color: #e0392f; }
.csl-conv-tag.primary { background: var(--c-primary-50); color: var(--c-primary); }
.csl-conv-tag.danger { background: #fde8e8; color: #c92a2a; }
.csl-conv-badge {
    flex: none;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--c-danger);
    border-radius: 999px;
}
.csl-conv-grab {
    position: absolute;
    right: 8px; bottom: 8px;
    padding: 3px 9px;
    font-size: 11.5px;
    color: var(--c-primary-tx, #fff);
    background: var(--c-primary);
    border-radius: 999px;
}
.csl-conv-grab:hover { background: var(--c-primary-600); }

/* 待接待「立即接入」按钮：红色高亮，醒目提醒客服尽快认领 */
.csl-conv-claim {
    position: absolute;
    right: 8px; bottom: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #e0392f;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(224, 57, 47, .35);
}
.csl-conv-claim:hover { background: #c22a21; }
.csl-conv-claim:disabled { opacity: .6; cursor: default; }

/* 待接待会话顶部「立即接入」横幅 */
.csl-claim-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    background: #fff1f0;
    border-bottom: 1px solid #ffc9c4;
    color: #c22a21;
    font-size: 13px;
}
.csl-claim-bar .csl-claim-tx { flex: 1; min-width: 0; }
.csl-claim-bar .csl-claim-tx b { color: #e0392f; }

/* Modified point: H5 聊天顶栏下方提示未接待人数，不用 gap */
.csl-queue-tip {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    border: 0;
    padding: 8px 12px;
    background: #fff4e8;
    color: #c45a12;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.csl-queue-tip:active {
    background: #ffe8d2;
}

/* 5.3 聊天主区 */
.csl-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--side-bg);
}
.csl-blank {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--c-muted);
    background: var(--page-bg);
    border-top-left-radius: 16px;
}
.csl-blank .ico { font-size: 46px; opacity: .5; margin-bottom: 8px; }
.csl-blank h3 { font-size: 17px; font-weight: 700; color: var(--c-ink-2); margin-bottom: 8px; }
.csl-blank p { font-size: 13px; max-width: 380px; }

.csl-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.csl-head {
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 64px; /* Modified point: 与商城管理端顶栏对齐 */
    background: var(--side-bg);
    color: var(--side-ink-on, #fff);
}
.csl-head > * { margin-right: 11px; }
.csl-head > *:last-child { margin-right: 0; }
/* Modified point: 顶栏徽标在藏青底上改为浅色 */
.csl-head .cs-badge {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
.csl-head .cs-badge-success {
    background: rgba(52, 211, 153, .22);
    color: #86efac;
}
.csl-head-info { flex: 1; min-width: 0; }
.csl-head-name {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700;
    min-width: 0; overflow: hidden;
}
.csl-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csl-head-sub {
    display: flex; align-items: center; gap: 8px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--side-ink, rgba(255, 255, 255, .6));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.csl-head-sub .sep { opacity: .4; }
.csl-head-sub b { color: var(--side-ink-on, rgba(255, 255, 255, .88)); font-weight: 500; }
.csl-head-actions { display: flex; align-items: center; flex: none; }
.csl-head-actions > * { margin-left: 6px; }
.csl-head-actions > *:first-child { margin-left: 0; }

.csl-online {
    display: flex; align-items: center; gap: 7px;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: var(--side-hover, rgba(255, 255, 255, .1));
    color: var(--side-ink-on, #fff);
    transition: background .15s;
}
.csl-online i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6bd; flex: none; }
.csl-online.on i { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.csl-online.off i { background: #94a3b8; }
.csl-online:hover { background: var(--side-hover, rgba(255, 255, 255, .18)); }

.csl-tool {
    width: 32px; height: 32px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    color: var(--side-ink, rgba(255, 255, 255, .82));
    background: var(--side-hover, rgba(255, 255, 255, .1));
    border-radius: 9px;
    transition: background .15s, color .15s;
}
/* ⚠️ iOS 修复：内联 SVG 必须显式指定尺寸，只靠 viewBox 在 Safari 上会失控 */
.csl-tool > svg { width: 18px; height: 18px; display: block; stroke: currentColor; }
.csl-tool > svg * { stroke: currentColor; }
.csl-tool:hover { background: var(--side-hover, rgba(255, 255, 255, .2)); color: var(--side-ink-on, #fff); }
.csl-back {
    flex: none;
    width: 32px; height: 32px;
    display: none;
    align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--side-ink-on, #fff);
    background: rgba(255, 255, 255, .1);
    border-radius: 9px;
}
.csl-back > svg { width: 18px; height: 18px; display: block; stroke: currentColor; }

/* Modified point: 回复链接专注模式，隐藏侧栏与会话列表，对话框铺满 */
.cs-console.is-focus { --csl-rail-w: 0px; }
.cs-console.is-focus .csl-rail,
.cs-console.is-focus .csl-list { display: none; }
.cs-console.is-focus .csl-main { flex: 1; width: 100%; min-width: 0; }
.cs-console.is-focus .csl-back { display: flex; }
.cs-console.is-focus .csl-queue-tip:not(.cs-hidden) { display: flex; }
.cs-console.is-focus .cs-msg-col { max-width: min(920px, calc(100% - 72px)); }
.cs-console.is-focus .csl-msgs { padding: 18px 28px 12px; }
.cs-console.is-focus .csl-page { inset: 0; }

/* Modified point: 结束会话胶囊按钮，图标与文字并排且不被 32px 裁切 */
.csl-end {
    height: 30px;
    width: auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #ef4444;
    border: 0;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}
.csl-end > svg {
    width: 14px;
    height: 14px;
    display: block;
    margin-right: 5px;
    stroke: currentColor;
    flex: none;
}
.csl-end > svg * { stroke: currentColor; }
.csl-end:hover { background: #dc2626; color: #fff; }

.csl-msgs-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
}
.csl-msgs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 12px;
    overscroll-behavior: contain;
}
.cs-console .cs-msg { margin-bottom: 16px; }
.cs-console .cs-msg-col { max-width: min(620px, calc(100% - 130px)); }

/* 客服端底部输入区 */
.csl-foot {
    flex: none;
    position: relative;
    background: #fff;
    border-top: 1px solid var(--card-bd);
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: visible;
}
.csl-foot-tools { display: flex; align-items: center; gap: 6px; padding: 8px 14px 0; }
.csl-foot .csl-tool { color: var(--c-ink-2); background: #f3f5fa; }
.csl-foot .csl-tool > svg { width: 18px; height: 18px; }
.csl-foot .csl-tool:hover { background: var(--c-primary-50); color: var(--c-primary); }
.csl-foot-input { padding: 8px 14px 0; }
.csl-foot-input .cs-textarea {
    min-height: 76px;
    max-height: 190px;
    resize: none;
    border-color: transparent;
    background: #f5f7fb;
}
.csl-foot-input .cs-textarea:focus { background: #fff; border-color: var(--c-primary); }
.csl-send {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px;
    padding: 0 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-primary-tx, #fff);
    background: var(--c-primary);
    border-radius: 999px;
    transition: background .15s, transform .1s;
}
.csl-send:hover { background: var(--c-primary-600); }
.csl-send:active { transform: scale(.97); }
.csl-send kbd {
    padding: 1px 5px;
    font-size: 10.5px;
    font-family: var(--font);
    background: rgba(255, 255, 255, .22);
    border-radius: 4px;
}
.csl-foot-sendrow {
    justify-content: flex-end;
    padding: 7px 12px;
    border-top: 1px solid var(--c-line-2);
}
/* Modified point: 附件栏右侧手机号同步 */
.csl-phone-sync {
    flex: none;
    height: 28px;
    padding: 0 10px;
    margin-left: 8px;
    font-size: 12px;
    line-height: 28px;
    color: #4f6bed;
    background: #eef2ff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.csl-phone-sync:hover { background: #dfe6ff; }
/* Modified point: 聊天区右侧中部客户资料按钮与卡片 */
.csl-profile-dock {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 8;
    width: 30px;
    padding: 14px 0;
    margin: 0;
    border: 1px solid var(--card-bd);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #fff;
    color: var(--c-primary);
    box-shadow: -2px 2px 10px rgba(16, 24, 40, .08);
    cursor: pointer;
    transform: translateY(-50%);
}
.csl-profile-dock span {
    display: block;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 30px;
}
.csl-profile-dock:hover { background: #eef2ff; }
.csl-pd-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 120;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, .46);
}
.csl-pd-mask.open { display: flex; }
.csl-pd-sheet {
    width: 100%;
    max-width: 520px;
    max-height: min(86vh, 740px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .12);
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: csl-pd-up .22s ease;
}
@keyframes csl-pd-up {
    from { transform: translateY(28px); opacity: .4; }
    to { transform: none; opacity: 1; }
}
@keyframes csl-pd-right {
    from { transform: translateX(28px); opacity: .4; }
    to { transform: none; opacity: 1; }
}
/* Modified point: PC 右侧抽屉，小屏仍用底部抽屉 */
@media (min-width: 861px) {
    .csl-pd-mask {
        align-items: stretch;
        justify-content: flex-end;
    }
    .csl-pd-sheet {
        width: 380px;
        max-width: 380px;
        max-height: none;
        height: 100%;
        border-radius: 16px 0 0 16px;
        box-shadow: -8px 0 28px rgba(15, 23, 42, .12);
        padding-bottom: 0;
        animation: csl-pd-right .22s ease;
    }
    .csl-pd-handle { display: none; }
}
.csl-pd-handle {
    flex: none;
    width: 40px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #d8dee9;
}
.csl-pcard-hd {
    display: flex;
    align-items: center;
    flex: none;
    padding: 10px 16px 8px;
}
.csl-pcard-hd b {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-ink);
}
.csl-pcard-x {
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f3f5fa;
    color: var(--c-muted);
    font-size: 18px;
    line-height: 28px;
    cursor: pointer;
}
.csl-pcard-x:hover { background: #e8ebf2; color: var(--c-ink); }
.csl-pcard-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 16px 10px;
    -webkit-overflow-scrolling: touch;
}
.csl-pcard-who {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-line-2);
}
.csl-pcard-who .cs-avatar { flex: none; margin-right: 10px; }
.csl-pcard-nm { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.csl-pcard-sub { margin-top: 4px; font-size: 12px; color: var(--c-muted); }
.csl-pd-field { margin-bottom: 12px; }
.csl-pd-field .cs-label { display: block; margin-bottom: 6px; }
.csl-pd-field .cs-help { margin-top: 6px; }
/* Modified point: 事件备注列表 */
.csl-ev-list { margin: 8px 0 0; padding: 0; list-style: none; }
.csl-ev-empty { font-size: 12px; color: var(--c-muted); padding: 6px 0 8px; }
.csl-ev-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--c-line-2);
}
.csl-ev-meta {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--c-muted);
}
.csl-ev-time { margin-left: 8px; flex: 1; }
.csl-ev-del {
    flex: none;
    height: 22px;
    padding: 0 8px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #9aa6bd;
    font-size: 11px;
    cursor: pointer;
}
.csl-ev-del:hover { color: #e0392f; background: #fff1f0; }
.csl-ev-tx { font-size: 13px; color: var(--c-ink-2); word-break: break-all; line-height: 1.5; }
.csl-ev-st { margin-top: 8px; }
.csl-ev-st-btn {
    display: inline-block;
    height: 24px;
    padding: 0 8px;
    margin: 0 6px 0 0;
    border: 1px solid #e5eaf3;
    border-radius: 999px;
    background: #f5f7fb;
    color: var(--c-muted);
    font-size: 11px;
    line-height: 22px;
    cursor: pointer;
}
.csl-ev-st-btn.is-on.is-todo { border-color: #c5cad6; background: #eef1f6; color: #4b5563; }
.csl-ev-st-btn.is-on.is-doing { border-color: var(--c-primary-100); background: var(--c-primary-50); color: var(--c-primary); }
.csl-ev-st-btn.is-on.is-done { border-color: #86d9a8; background: #e8f8ef; color: #128a4b; }
.csl-ev-add { margin-top: 8px; }
/* Modified point: 客户档案 / 客户事件列表 */
.csl-board-bar { margin-bottom: 14px; }
.csl-board-bar .cs-input { width: 100%; max-width: 420px; }
.csl-board-card {
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}
.csl-board-hd {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.csl-board-hd .cs-avatar { flex: none; margin-right: 10px; }
.csl-board-meta { flex: 1; min-width: 0; }
.csl-board-meta b { display: block; font-size: 14px; color: var(--c-ink); }
.csl-board-kv {
    margin-top: 4px;
    font-size: 12px;
    color: var(--c-muted);
    word-break: break-all;
}
.csl-board-chips { margin-bottom: 8px; }
.csl-ev-chip {
    display: inline-block;
    height: 22px;
    padding: 0 8px;
    margin: 0 6px 6px 0;
    border-radius: 999px;
    font-size: 11px;
    line-height: 22px;
    background: #eef1f6;
    color: #4b5563;
}
.csl-ev-chip.is-doing { background: var(--c-primary-50); color: var(--c-primary); }
.csl-ev-chip.is-done { background: #e8f8ef; color: #128a4b; }
.csl-board-evs { margin: 0; padding: 0; list-style: none; }
.csl-board-evs li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--c-ink-2);
}
.csl-board-evtx { flex: 1; min-width: 0; word-break: break-all; }
#arcMoreWrap, #evMoreWrap { text-align: center; padding: 8px 0 16px; }
#cpEventInput { margin-top: 8px; }
.csl-pcard-kv { margin: 4px 0 0; padding: 0; list-style: none; }
.csl-pcard-kv li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 12.5px;
}
.csl-pcard-kv li:last-child { margin-bottom: 0; }
.csl-pcard-kv .k {
    flex: none;
    width: 64px;
    margin-right: 8px;
    color: var(--c-muted-2);
}
.csl-pcard-kv .v { flex: 1; min-width: 0; color: var(--c-ink-2); word-break: break-all; }
.csl-pd-foot {
    flex: none;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--c-line-2);
}
.csl-pd-foot .cs-btn {
    width: 100%;
    height: 44px;
}
.csl-foot-sendrow #charCount { margin-right: 10px; }
.csl-foot-sendrow .csl-quick-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    margin-right: 8px;
}

/* 5.4 访客资料侧栏 */
.csl-side {
    flex: none;
    width: 292px;
    /* 默认收起：只有点「访客资料」按钮 + ✕ 才切换。
       以前这里默认 display:flex，导致宽屏下资料栏永远挂在右侧、
       ✕（只 remove('open')）根本关不掉。 */
    display: none;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid var(--card-bd);
}
.csl-side.open { display: flex; }
.csl-side-tabs {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-line-2);
}
.csl-side-tabs .csl-tool {
    width: auto; height: 28px;
    padding: 0 12px;
    font-size: 12.5px;
    color: var(--c-muted);
    background: transparent;
}
.csl-side-tabs .csl-tool:hover { background: var(--c-bg-2); color: var(--c-ink-2); }
.csl-side-tabs .csl-tool.active { background: var(--c-primary-50); color: var(--c-primary); font-weight: 600; }
.csl-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.csl-side-sec { margin-bottom: 18px; }
.csl-side-h {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-muted);
    letter-spacing: .3px;
}
.csl-side-kv { display: flex; flex-direction: column; gap: 9px; }
.csl-side-kv li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.csl-side-kv .k { flex: none; width: 74px; color: var(--c-muted-2); }
.csl-side-kv .v { flex: 1; min-width: 0; color: var(--c-ink-2); word-break: break-all; }
.csl-side-foot { flex: none; padding: 12px; border-top: 1px solid var(--c-line-2); }

.csl-visitor { display: flex; align-items: center; gap: 12px; }
.csl-visitor-meta { flex: 1; min-width: 0; }
.csl-visitor-name { font-size: 14px; font-weight: 700; color: var(--c-ink); }

.csl-track { display: flex; flex-direction: column; }
.csl-track li { position: relative; padding: 0 0 16px 20px; font-size: 12.5px; }
.csl-track li::before {
    content: "";
    position: absolute;
    left: 4px; top: 6px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-primary);
}
.csl-track li::after {
    content: "";
    position: absolute;
    left: 7px; top: 15px; bottom: 0;
    width: 1px;
    background: var(--c-line);
}
.csl-track li:last-child { padding-bottom: 0; }
.csl-track li:last-child::after { display: none; }

/* 快捷回复：输入框上方浮层（/ 序号） */
.csl-slash {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 100%;
    margin-bottom: 8px;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    box-shadow: var(--sh-lg);
    z-index: 80;
    overflow: hidden;
}
.csl-slash.cs-hidden { display: none; }
.csl-slash-hd {
    flex: none;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--c-muted);
    border-bottom: 1px solid var(--c-line-2);
}
.csl-slash-hd b { color: var(--c-ink-2); font-weight: 600; }
.csl-slash-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.csl-slash-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--c-ink-2);
}
.csl-slash-item:last-child { margin-bottom: 0; }
.csl-slash-item:hover,
.csl-slash-item.is-on { background: var(--c-primary-50); color: var(--c-primary); }
.csl-slash-no {
    flex: none;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 6px;
    background: #eef2ff;
    color: var(--c-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.csl-slash-item.is-on .csl-slash-no { background: var(--c-primary); color: #fff; }
.csl-slash-tx { flex: 1; min-width: 0; }
.csl-slash-tx b { display: block; font-size: 13px; }
.csl-slash-tx small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--c-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csl-slash-empty { padding: 18px 12px; text-align: center; color: var(--c-muted); font-size: 13px; }
.csl-quick-btn { position: relative; }

/* 整页视图（统计 / 快捷回复 / 设置）
   显隐由 agent.js 给 .cs-console 添加 .page-mode 控制 */
.csl-page {
    position: absolute;
    /* 左侧让出图标栏：点菜单只切换右侧内容区，侧栏常驻，无需「返回」 */
    inset: 0 0 0 var(--csl-rail-w, 92px);
    z-index: 70;
    display: none;
    flex-direction: column;
    background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2));
}
.cs-console.page-mode .csl-page,
.csl-page.open { display: flex; }
.csl-page .adm-top {
    background: transparent;
    border-bottom: 0;
    color: var(--side-ink-on, #fff);
}
.csl-page .adm-title { color: var(--side-ink-on, #fff); }
.csl-page .adm-top-title { min-width: 0; }
/* 侧栏常驻，切回会话直接点左侧图标即可，不再需要页面内「返回」键 */
.csl-page .csl-back { display: none; }
/* Modified point: 顶栏与侧栏同色齐平；圆角做在浅色内容区，与会话列表一致 */
.csl-page .adm-body {
    background: var(--page-bg);
    border-top-left-radius: 16px;
}

/* 系统设置：表单占满内容区，宽屏双列 */
.csl-pf-body {
    width: 100%;
    max-width: none;
}
.csl-pf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}
.csl-pf-grid .csl-pf-span,
.csl-pf-span {
    grid-column: 1 / -1;
}
@media (max-width: 860px) {
    .csl-pf-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------------------------------------------------------------------
 *  6. 对话气泡（控制台内的聊天记录）
 * ------------------------------------------------------------------- */
.cs-msg { display: flex; gap: 10px; align-items: flex-start; }
.cs-msg-col { flex: 1; min-width: 0; }
.cs-msg-meta {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 5px;
    font-size: 11.5px;
    color: var(--c-muted-2);
}
.cs-msg-name { font-weight: 600; color: var(--c-muted); }
.cs-msg-tag {
    padding: 0 6px;
    font-size: 10.5px;
    line-height: 16px;
    border-radius: 4px;
    background: var(--c-bg-2);
    color: var(--c-muted);
}
.cs-msg-self .cs-msg-meta { justify-content: flex-end; }
.cs-msg-body { display: flex; }
.cs-msg-self .cs-msg-body { justify-content: flex-end; }

.cs-bubble {
    position: relative;
    max-width: 100%;
    padding: 10px 13px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--c-ink);
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.cs-msg-self .cs-bubble { /* Modified point: 工作台聊天气泡跟 kf1 访客端 */
    background: #eef1f6;
    border-color: #e4e8f0;
    color: var(--c-ink);
}
.cs-bubble-text { white-space: pre-wrap; }
/* 图片/视频气泡：与访客端保持同一套尺寸限制，避免大图撑破会话区 */
.cs-bubble-img { padding: 5px; }
.cs-bubble-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(230px, 58vw);
    max-height: 270px;
    object-fit: cover;
    border-radius: 9px;
    cursor: zoom-in;
}
.cs-bubble-video video { max-width: 260px; max-height: 300px; border-radius: 9px; }
.cs-bubble-voice { display: flex; align-items: center; gap: 9px; min-width: 108px; cursor: pointer; }
.cs-bubble-file { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cs-bubble-sticker img { width: 110px; }
.cs-bubble-progress {
    height: 3px;
    margin-top: 7px;
    background: rgba(0, 0, 0, .12);
    border-radius: 999px;
    overflow: hidden;
}
.cs-bubble-progress > i { display: block; height: 100%; background: var(--c-primary); transition: width .2s; }
.cs-msg-self .cs-bubble-progress { background: rgba(0, 0, 0, .12); }
.cs-msg-self .cs-bubble-progress > i { background: var(--c-primary); }
.cs-msg-state { margin-top: 4px; font-size: 11px; color: var(--c-muted-2); text-align: right; }
.cs-msg.is-revoked .cs-bubble {
    background: #f3f5fa;
    border-style: dashed;
    color: var(--c-muted-2);
    font-style: italic;
}
.cs-msg-sys {
    display: flex;
    justify-content: center;
    margin: 14px 0;
}
.cs-msg-sys > span,
.cs-msg-sys .cs-bubble {
    display: inline-block;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: none;
    max-width: 86%;
    text-align: center;
    word-break: break-word;
}
.cs-avatar-bot { /* Modified point: 机器人头像纯色按钮色 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary);
    color: #fff;
    flex: none;
}
.cs-avatar-bot svg { width: 16px; height: 16px; display: block; stroke: currentColor; }
.cs-msg-bot .cs-msg-tag { /* Modified point: 智能回复与昵称同色 */
    background: var(--ch-pill-bg, #eef1f7);
    color: var(--c-muted);
}
.cs-msg-bot .cs-bubble { background: #f4f6fb; border-color: #e8ecf4; box-shadow: none; }
.cs-msg { margin-bottom: 16px; }
.cs-msg-day { display: flex; justify-content: center; margin: 14px 0; }
.cs-msg-day span {
    padding: 3px 12px;
    font-size: 11.5px;
    color: var(--c-muted-2);
    background: #e9edf5;
    border-radius: 999px;
}
.cs-msg-revoke {
    margin-left: auto;
    padding: 0 6px;
    height: 17px;
    font-size: 10px;
    color: var(--c-muted-2);
    background: transparent;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    opacity: 0;
    transition: opacity .16s, color .16s, border-color .16s;
}
.cs-msg:hover .cs-msg-revoke { opacity: 1; }
.cs-msg-revoke:hover { color: var(--c-danger); border-color: var(--c-danger); }

/* 头像兜底字母 */
.av-fb {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 12px; font-weight: 600;
    color: var(--c-muted);
    background: var(--c-bg-2);
}

/* ---------------------------------------------------------------------
 *  7. 弹层类小组件
 * ------------------------------------------------------------------- */
.cs-menu-list { display: flex; flex-direction: column; gap: 3px; }
.cs-menu-it {
    display: flex; align-items: center;
    padding: 10px 12px;
    font-size: 13.5px;
    color: var(--c-ink-2);
    border-radius: 9px;
    text-align: left;
}
.cs-menu-it:hover { background: var(--c-primary-50); color: var(--c-primary); }

.cs-select-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.cs-select-it {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--card-bd);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cs-select-it:hover { border-color: var(--c-primary-100); background: var(--c-primary-50); }

.cs-row-it {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}
.cs-row-it:hover { background: var(--c-bg-2); }

.cs-emoji-pop {
    /* 必须脱离文档流：JS 会 append 到 body 并写 left/top，
       若保持 static 定位，left/top 无效 → 面板被挤到页面最底部而点不到 */
    position: fixed;
    z-index: 9999;
    width: 348px;
    max-height: 292px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    box-shadow: var(--sh-md);
}
.cs-emoji-it {
    padding: 5px; font-size: 19px; border-radius: 7px;
    min-width: 0; line-height: 1.2; text-align: center;
    /* 跨端 emoji 字体栈：保证彩色字形优先，避免「黑白方块」 */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Segoe UI Symbol", "Android Emoji", "EmojiOne Color",
                 var(--font);
}
.cs-emoji-it > svg { width: 19px; height: 19px; display: block; margin: 0 auto; }
.cs-emoji-it:hover { background: var(--c-bg-2); }

.cs-switch-text { font-size: 12.5px; color: var(--c-ink-2); }
.cs-switch-track { flex: none; }

/* 指南条目 */
.guide-item-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--card-bd);
    border-radius: 11px;
    background: #fff;
}
.guide-preview {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--c-ink-2);
    background: #f5f7fb;
    border-radius: 10px;
}

/* ---------------------------------------------------------------------
 *  8. 动画
 * ------------------------------------------------------------------- */
@keyframes cs-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cs-slide-l { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------------
 *  9. 自适应（电脑端优先，向下兼容平板 / 手机）
 * ------------------------------------------------------------------- */
/* 大屏：更宽松的留白与更宽的会话列表 */
@media (min-width: 1600px) {
    .csl-list { width: 330px; }
    .csl-side { width: 320px; }
    .adm-body { padding: 24px 28px 32px; }
    .adm-stats { gap: 18px; }
}

/* 中等屏：资料侧栏改为浮层（仍由 .open 控制显隐） */
@media (max-width: 1320px) {
    .csl-side.open {
        display: flex;
        position: absolute;
        top: 0; right: 0; bottom: 0;
        z-index: 60;
        width: min(320px, 86vw);
        box-shadow: var(--sh-lg);
        animation: cs-slide-l .2s ease;
    }
}

/* 侧栏收窄（总后台） */
@media (max-width: 1180px) {
    :root { --nav-w: 74px; }
    .adm-side-brand { justify-content: center; padding: 16px 8px 14px; }
    .adm-side-brand .tx { display: none; }
    .adm-tabs { padding: 6px 8px 12px; }
    .adm-tabs button { flex-direction: column; padding: 9px 2px; font-size: 11px; text-align: center; }
    .adm-tabs button i, .adm-tabs button .mi { font-size: 17px; margin-right: 0; margin-bottom: 3px; }
    .adm-tabs button span { width: 100%; text-align: center; }
    .adm-user .tx, .adm-user .cv { display: none; }
    .adm-user { justify-content: center; }
}

/* 平板 */
@media (max-width: 1024px) {
    .cs-console { --csl-rail-w: 80px; }
    .csl-list { width: 250px; }
    .adm-top { padding: 0 16px; }
    .adm-body { padding: 16px; }
}

/* 手机 / 小屏：列表与聊天互斥显示 */
@media (max-width: 860px) {
    .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .adm-stat { padding: 15px 16px 14px; }
    .adm-stat .vl { font-size: 25px; }
    .adm-grid, .adm-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .adm-field-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

    .cs-console:not(.page-mode).show-chat .csl-list { display: none; }
    .cs-console:not(.page-mode):not(.show-chat) .csl-main { display: none; }
    .cs-console:not(.page-mode):not(.show-chat) .csl-side.open { display: none; }
    .cs-console:not(.page-mode) .csl-list { width: 100%; flex: 1; border-right: 0; }
    .cs-console { --csl-rail-w: 68px; }
    .csl-rail { padding: 12px 6px 10px; }
    .csl-rail-tip { font-size: 10px; }
    .csl-back { display: flex; }
    .csl-head { padding: 0 12px; height: 64px; } /* Modified point: 窄屏顶栏与商城对齐 */
    .csl-queue-tip:not(.cs-hidden) { display: flex; }
    .csl-msgs { padding: 14px 13px 8px; }
    .cs-console .cs-msg-col { max-width: calc(100% - 56px); }
    .adm-body { padding: 12px; }
    .adm-top { height: 58px; padding: 0 12px; gap: 8px; }
    .adm-updated { display: none; }
    .adm-mode { display: none; }

    /* 窄屏：转接收入「更多」；结束按钮保留胶囊样式 */
    .csl-head-actions #btnTransfer { display: none; }
    .csl-head-actions .csl-online { padding: 0 9px; height: 30px; }
    .csl-head-actions .csl-online span { display: none; }
    .csl-head-actions .csl-tool { width: 30px; height: 30px; font-size: 14px; }
    .csl-end { height: 28px; padding: 0 10px; font-size: 11.5px; }
}

@media (max-width: 560px) {
    .adm-stats { gap: 10px; }
    .adm-stat .lb { font-size: 12px; }
    .adm-stat .vl { font-size: 22px; }
    .adm-stat .ex { font-size: 11px; }
    .cs-bar-col .bars > i { width: 8px; }
}

/* Modified point: 开放接口文档 — 左目录右内容 */
.adm-body:has(.oa-layout) {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.adm-body:has(.oa-layout) > .adm-wrap {
    flex: 1;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.oa-page {
    height: 100%;
    min-height: 0;
}
.oa-layout {
    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    background: var(--page-bg);
}
.oa-side {
    width: 220px;
    flex: none;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid var(--card-bd);
    padding: 12px 0 24px;
    box-sizing: border-box;
}
.oa-side-g {
    margin-bottom: 10px;
    padding-bottom: 6px;
}
.oa-side-gt {
    padding: 10px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-ink);
}
.oa-side-a {
    display: block;
    padding: 8px 16px 8px 20px;
    margin: 0 8px 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-ink-2);
    text-decoration: none;
    border-radius: 8px;
    box-sizing: border-box;
}
.oa-side-a:hover {
    background: var(--c-primary-50);
    color: var(--c-primary);
}
.oa-side-a.is-active {
    background: var(--c-primary-50);
    color: var(--c-primary);
    font-weight: 600;
}
.oa-main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 22px 28px;
    box-sizing: border-box;
}
.oa-main .cs-panel,
.oa-main .oa-h2 {
    scroll-margin-top: 80px;
}
.oa-method {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--c-ink);
    word-break: break-all;
}
.oa-desc { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--c-ink-2); }
.oa-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
}
.oa-table { margin-bottom: 12px; }
.oa-h2 {
    margin: 22px 0 8px;
    padding: 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
}
/* Modified point: 开放接口最佳实践排版 */
.oa-bp { margin-bottom: 16px; }
.oa-bp-map {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 16px -8px;
}
.oa-bp-map-item {
    flex: 1 1 160px;
    min-width: 140px;
    margin: 0 0 8px 8px;
    padding: 12px 14px;
    background: #f7f8fa;
    border: 1px solid var(--card-bd);
    border-radius: 10px;
    box-sizing: border-box;
}
.oa-bp-map-item b {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--c-ink);
}
.oa-bp-map-item span {
    display: block;
    font-size: 12px;
    line-height: 1.55;
    color: var(--c-ink-2);
    word-break: break-all;
}
.oa-bp-step {
    display: flex;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 14px 14px 12px;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
}
.oa-bp-n {
    flex: none;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #e2c09f;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}
.oa-bp-body {
    flex: 1;
    min-width: 0;
}
.oa-bp-body h4 {
    margin: 2px 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-ink);
}
.oa-bp-p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--c-ink-2);
}
.oa-bp-ol,
.oa-bp-ul {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--c-ink-2);
}
.oa-bp-ol li,
.oa-bp-ul li {
    margin-bottom: 4px;
}
.oa-bp-code {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}
.oa-bp-foot {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--c-ink-2);
}
/* Modified point: 关键词回复可视化富文本编辑器 */
.cs-re {
    border: 1px solid var(--card-bd, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.cs-re-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 8px;
    background: #f7f8fa;
    border-bottom: 1px solid var(--card-bd, #e5e7eb);
}
.cs-re-btn {
    margin: 2px 4px 2px 0;
    padding: 5px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}
.cs-re-btn:hover { background: #eef2ff; border-color: #c7d2fe; }
.cs-re-btn.is-on {
    background: #eef2ff;
    border-color: #818cf8;
    color: #3730a3;
}
.cs-re-color-btn .cs-re-color-a {
    font-weight: 700;
    color: #c24f4a;
    border-bottom: 2px solid currentColor;
    line-height: 1;
}
.cs-re-sep {
    width: 1px;
    height: 18px;
    margin: 0 6px 0 2px;
    background: #e5e7eb;
}
.cs-re-body {
    padding: 10px 12px;
    min-height: 180px;
    max-height: 360px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    outline: none;
}
.cs-re-body:empty:before {
    content: '在这里编辑回复内容，也可直接粘贴 HTML…';
    color: #bbb;
}
.cs-re-body img,
.cs-re-body video,
.cs-re-body iframe {
    max-width: 100%;
    border-radius: 6px;
}
.cs-re-body iframe {
    display: block;
    width: 100%;
    min-height: 200px;
    border: 0;
    background: #0f172a;
}
.cs-re-body a[href="#"],
.cs-re-body a[href^="#"] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
}
.cs-re-source {
    display: none;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    min-height: 180px;
    max-height: 420px;
    border: 0;
    outline: none;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: #1f2937;
    background: #f8fafc;
}
.cs-re-tip {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #888;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
}
.cs-re-tip code {
    padding: 0 4px;
    border-radius: 4px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
}
.oa-bp .cs-help { margin-top: 4px; }
@media (max-width: 960px) {
    .oa-layout {
        display: block;
        height: auto;
        min-height: 0;
        margin: 0;
    }
    .oa-side {
        width: auto;
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid var(--card-bd);
        margin-bottom: 12px;
        border-radius: 12px;
    }
    .oa-main {
        padding: 0;
    }
}