/* ============================================================
   统一样式表（微信风格 / 移动端优先）
   包含：基础组件 + 用户端 + 客服端 + 管理端
   ============================================================ */

:root {
  --wx-green: #07C160;          /* 微信绿 */
  --wx-green-dark: #06AD56;
  --bg: #EDEDED;                /* 页面背景 */
  --card: #FFFFFF;
  --text: #191919;
  --text-2: #888888;
  --line: #E5E5E5;
  --bubble-in: #FFFFFF;         /* 对方消息气泡 */
  --bubble-out: #95EC69;        /* 自己消息气泡 */
  --danger: #FA5151;
  --blue: #576B95;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--blue); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; outline: none; border: none; }
img { display: block; }

/* ---------- 通用滚动条 ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ============================================================
   通用组件
   ============================================================ */

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px; border-radius: 6px; font-size: 14px;
  background: var(--wx-green); color: #fff; transition: opacity .2s;
}
.btn:active { opacity: .8; }
.btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 4px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 输入框 */
.input {
  width: 100%; padding: 10px 12px; border-radius: 6px;
  background: #F5F5F5; font-size: 14px;
}
.input:focus { background: #fff; box-shadow: 0 0 0 1px var(--wx-green); }

/* Toast 提示 */
#toast-box {
  position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%);
  z-index: 99999; pointer-events: none;
}
.toast {
  background: rgba(0,0,0,.75); color: #fff; padding: 10px 18px;
  border-radius: 8px; font-size: 14px; max-width: 70vw;
  text-align: center; margin-bottom: 8px;
  animation: toast-in .2s ease;
}
.toast.err { background: rgba(220, 50, 50, .92); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; } }

/* 模态框 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 420px;
  max-height: 80vh; overflow: auto; box-shadow: var(--shadow);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 600;
}
.modal-body { padding: 16px; }
.modal-foot { padding: 12px 16px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--line); }
.modal-close { font-size: 18px; color: var(--text-2); padding: 0 4px; }

/* 表单行 */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.form-row .input { background: #F5F5F5; }

/* 统计卡片 */
.stat-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-card {
  flex: 1; min-width: 120px; background: var(--card); border-radius: 10px;
  padding: 12px 14px; box-shadow: var(--shadow);
}
.stat-card .num { font-size: 22px; font-weight: 700; }
.stat-card .label { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* 空状态 */
.empty { text-align: center; color: var(--text-2); padding: 50px 20px; font-size: 14px; }

/* 弹层（操作菜单） */
.sheet-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: #fff; width: 100%; max-width: 480px; border-radius: 12px 12px 0 0;
  overflow: hidden; animation: sheet-in .2s ease;
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0;} to { transform: none; opacity: 1; } }
.sheet-item {
  padding: 15px; text-align: center; font-size: 15px;
  border-bottom: 1px solid var(--line); background: #fff;
}
.sheet-item:active { background: #f2f2f2; }
.sheet-item.danger { color: var(--danger); }
.sheet-cancel { padding: 15px; text-align: center; color: var(--text-2); font-size: 15px; background: #f7f7f7; }

/* 图片灯箱（点击放大 + 保存） */
.lightbox-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* viewport-fit=cover 下页面延伸到系统栏区域：内容上下避让安全区，
     否则放大图/提示顶部会被系统标题栏（刘海/状态栏）遮挡。
     用 max(env(), fallback) 兜底：iOS/Safari/真刘海 → env 给真实值；
     Android Edge/Chrome 不报告安全区 → fallback 至少 40px 物理下移，
     避免"×""存"按钮紧贴状态栏被吃掉命中区 */
  padding-top: max(env(safe-area-inset-top, 0px), 40px);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 40px);
}
.lightbox-mask img {
  /* 图片限高用 dvh（动态视口=当前实际可见高，地址栏展开/收起都精准）；
     老内核无 dvh 时退化 vh 再减固定余量兜底。
     预留 110px ≈ 顶部按钮条避让 + 底部提示 + Edge 底栏，保证整图完整落屏不被裁 */
  max-width: 92vw;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  border-radius: 4px;
}
.lightbox-loading {
  color: #bbb; font-size: 13px; padding: 20px; display: none;
}
.lightbox-mask.loading img { display: none; }
.lightbox-mask.loading .lightbox-loading { display: block; }
.lightbox-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2001;
  display: flex; justify-content: space-between;
  /* 顶栏按钮同样避让：max(env, 40px) 保证 Android Edge 也能下移到状态栏之下 */
  padding: max(calc(14px + env(safe-area-inset-top, 0px)), 40px) 16px 14px;
  color: #fff; font-size: 15px;
}
.lightbox-bar button { color: #fff; font-size: 15px; padding: 2px 6px; }
.lightbox-tip { color: #bbb; font-size: 12px; margin-top: 14px; }
/* 聊天消息图片：可点击放大（手型指针） */
.msg-row .bubble img {
  max-width: 200px; max-height: 200px; border-radius: 8px;
  display: block; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msg-row .bubble .img-tip {
  display: block; font-size: 10px; color: var(--text-2); opacity: .8;
  margin-top: 3px; text-align: center;
}

/* ============================================================
   用户端
   ============================================================ */
.user-app {
  max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; position: relative;
  background: var(--bg);
}
/* 客服板块顶部栏：左站点名 + 右用户名（同一行两端对齐） */
.user-header {
  background: #fff; color: #000; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-shrink: 0; border-bottom: 1px solid var(--line);
  position: relative;  /* 让 .nick-menu 绝对定位以本栏为基准（否则菜单会弹到屏幕外） */
}
.user-header .header-title { font-size: 16px; font-weight: 600; color: var(--text); }
.user-header .uid {
  font-size: 15px; font-weight: 700; color: var(--text);
  text-align: right; max-width: 60%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 昵称切换下拉（用户端顶部） */
.nick-menu {
  position: absolute; top: calc(100% + 2px); right: 10px; z-index: 80;
  background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.14);
  border: 1px solid var(--line); min-width: 160px; max-height: 260px;
  overflow-y: auto; padding: 4px 0;
}
.nick-title {
  padding: 6px 14px 5px; font-size: 12px; color: var(--text-2);
  border-bottom: 1px solid var(--line); margin-bottom: 2px;
}
.nick-item { padding: 10px 14px; font-size: 14px; color: var(--text); cursor: pointer; }
.nick-item.active { color: var(--wx-green); font-weight: 600; }
.nick-item.disabled { color: var(--text-2); }
.nick-item:active { background: var(--bg); }

/* 群聊标签栏（用户端聊天面板顶部） */
.group-bar {
  display: flex; gap: 6px; padding: 6px 10px; background: #fff;
  border-bottom: 1px solid var(--line); overflow-x: auto; flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.group-tab {
  flex-shrink: 0; padding: 5px 12px; border-radius: 14px; font-size: 13px;
  background: var(--bg); color: var(--text-2); white-space: nowrap; cursor: pointer;
}
.group-tab.active { background: var(--wx-green); color: #fff; }

/* 用户端 Tab（悬浮式压缩导航栏：≤50px、半透明磨砂、适配底部安全区） */
.user-tabs {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 50px; z-index: 100;
  display: flex; box-sizing: border-box;
  padding: 0 4px calc(env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.user-tabs .tab {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font-size: 11px; color: var(--text-2); position: relative;
}
.user-tabs .tab .tab-ico { font-size: 20px; line-height: 1; }
.user-tabs .tab.active { color: var(--wx-green); }
.user-tabs .tab.active::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 20px; height: 3px; background: var(--wx-green); border-radius: 2px;
}
/* Tab 数量 ≥5：纯图标模式，隐藏文字，进一步压缩 */
.user-tabs.tabs-icon-only .tab span:not(.tab-ico) { display: none; }
.user-tabs.tabs-icon-only { height: 44px; }
/* 悬浮栏不占布局空间：内容区底部按栏高留白（JS 动态计算，默认 50px+安全区） */
.user-panel { flex: 1; min-height: 0; display: none; flex-direction: column; }
.user-panel.active { display: flex; }
.user-panel { padding-bottom: var(--tabs-h, 52px); }


/* 聊天区 */
.chat-body {
  flex: 1; overflow-y: auto; padding: 12px;
  background: var(--bg); -webkit-overflow-scrolling: touch;
  position: relative;   /* 顶部"加载更早"悬浮按钮定位基准 */
}
/* 顶部"加载更早消息"按钮：滚到顶才出现，点击手动加载历史（替代下拉/自动加载） */
.load-older-btn {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 8; border: 1px solid var(--line); border-radius: 15px;
  background: var(--bg); color: var(--blue);
  font-size: 13px; padding: 6px 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  white-space: nowrap; line-height: 1.2;
}
.load-older-btn:active { opacity: 0.8; }
.load-older-btn:disabled { color: var(--text-2); opacity: 0.9; }
.msg-loading { text-align: center; color: var(--text-2); font-size: 12px; padding: 6px 0; display: none; }
.msg-time-divider {
  text-align: center; font-size: 11px; color: var(--text-2);
  background: rgba(0,0,0,.05); border-radius: 4px;
  width: fit-content; margin: 10px auto; padding: 2px 8px;
}
/* 头像与气泡顶部对齐（时间戳不参与对齐，任何行长都精准对齐） */
.msg-row { display: flex; margin-bottom: 10px; align-items: flex-start; }
.msg-row.out { flex-direction: row-reverse; }
.msg-avatar {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 600; margin: 0 8px;
  background: linear-gradient(135deg, #5B8DEF, #7C5BEF);
  /* 头像顶部与气泡顶部平齐（不再下沉） */
  margin-top: 0;
}
/* 头像按方向区分：自己（发出）= 绿色，对方（收到）= 蓝色，一眼可辨 */
.msg-row.out .msg-avatar { background: linear-gradient(135deg, #07C160, #0DA968); }
.msg-row.in .msg-avatar { background: linear-gradient(135deg, #5B8DEF, #7C5BEF); }
.msg-main { max-width: 70%; display: flex; flex-direction: column; }
.msg-row.out .msg-main { align-items: flex-end; }
.bubble {
  padding: 9px 12px; border-radius: 8px; font-size: 15px; line-height: 1.45;
  word-break: break-word; white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.msg-row.in .bubble { background: var(--bubble-in); border-top-left-radius: 2px; }
.msg-row.out .bubble { background: var(--bubble-out); border-top-right-radius: 2px; }
.bubble img {
  max-width: 180px; max-height: 220px; border-radius: 6px; cursor: zoom-in;
}
.bubble .bubble-img { position: relative; }
.msg-meta { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.msg-row.out .msg-meta { display: flex; align-items: center; gap: 4px; }
/* 群聊消息发送者名 */
.msg-sender { font-size: 11px; color: #999; margin-bottom: 2px; line-height: 1.4; }
.msg-row.out .msg-sender { align-self: flex-end; }
.msg-status { font-size: 11px; }
.msg-status.sending { color: var(--text-2); }
.msg-status.sent { color: var(--text-2); }
.msg-status.read { color: var(--blue); }
/* 系统消息（欢迎语/指令结果/加减计算）——显眼醒目：较大字号 + 加粗 + 橙色提示底色 */
.msg-system {
  text-align: center; font-size: 15px; font-weight: 600; color: #333;
  background: #FFF7E6; border: 1px solid #FFD591; border-radius: 8px;
  width: fit-content; margin: 10px auto; padding: 8px 16px; max-width: 82%;
  line-height: 1.6; word-break: break-all;
}
/* 返水/流水算式行尾金额：加大加粗变红色（服务端自动计算消息，appendSysText 生成） */
.msg-system .rb-hl {
  color: #e02020; font-weight: 900; font-size: 21px;
  margin: 0 1px; line-height: 1.3; vertical-align: baseline;
}

/* 用户端输入区：一行布局（输入框 flex:1 + 📎 + ⭐ + 发送） */
.user-input-bar {
  display: flex; align-items: center; gap: 5px; padding: 6px 10px 7px;
  background: #f8f9fa; border-top: 1px solid var(--line); flex-shrink: 0;
  position: relative;
}
.user-input-bar textarea {
  flex: 1; min-width: 0; height: 36px; min-height: 36px; max-height: 72px;
  resize: none; border-radius: 18px; padding: 8px 12px;
  font-size: 15px; line-height: 1.4; background: #fff;
  border: 1px solid var(--line); box-sizing: border-box;
}
.user-input-bar .attach {
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  font-size: 17px; line-height: 1; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* 明确的按钮外观：浅灰底 + 描边。
     原先 background:transparent 会让 📷/🖼️ 看起来像纯文字，
     客户反馈"被识别成文字了，而不是按钮"（2026-09-19）。 */
  background: #f2f3f5; border: 1px solid #e5e6e8;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* 防止长按被选中成文字 */
  -webkit-tap-highlight-color: transparent;
}
.user-input-bar .attach:active { background: #e2e4e8; }
/* 视觉隐藏的 file input：此处不能用 display:none ——
   部分国产/华为内核浏览器会偶发拦截被隐藏 input 的 click()，
   导致"偶然点不开上传按钮"。保留元素可见性为零，仍可被 label[for] 正常触发。 */
.user-input-bar .file-hidden {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
.user-input-bar .send-btn {
  flex-shrink: 0; background: var(--wx-green); color: #fff; border-radius: 18px;
  padding: 7px 16px; font-size: 14px; font-weight: 500; height: 32px;
  display: flex; align-items: center;
}

/* Tab2 网站 */
.site-panel { position: relative; }
.site-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line);
}
.site-toolbar .site-name { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-iframe-wrap { flex: 1; position: relative; min-height: 0; }
.site-iframe-wrap iframe { width: 100%; height: 100%; border: none; position: absolute; inset: 0; }
.site-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--text-2); background: var(--bg);
}
.spinner {
  width: 28px; height: 28px; border: 3px solid #ddd; border-top-color: var(--wx-green);
  border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tab2 网站 - 开奖数据面板（加拿大28 / 澳洲幸运8） */
.kj-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px; overflow-y: auto; }
.kj-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  background: #fff; border-radius: 10px; padding: 10px 14px;
  border: 1px solid var(--line);
}
.kj-title { font-size: 15px; font-weight: 700; color: var(--text); }
.kj-updated { flex: 1; font-size: 12px; color: var(--text-2); text-align: right; }
.kj-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-2); padding: 40px 0;
}
.kj-cards { display: flex; flex-direction: column; gap: 8px; }
.kj-card {
  background: #fff; border-radius: 10px; padding: 12px;
  border: 1px solid var(--line);
}
.kj-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kj-name { font-size: 15px; font-weight: 700; color: var(--text); }
.kj-name::before { content: ''; display: inline-block; width: 6px; height: 14px; border-radius: 3px; background: var(--wx-green); margin-right: 8px; vertical-align: -2px; }
.kj-card:nth-child(2) .kj-name::before { background: #5B8DEF; }
.kj-issue { font-size: 12px; color: var(--text-2); background: var(--bg); border-radius: 10px; padding: 3px 8px; }
.kj-balls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.kj-balls .ball {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #5B8DEF, #7C5BEF);
}
.kj-card:nth-child(1) .kj-balls .ball { background: linear-gradient(135deg, #22c55e, #16a34a); }
.kj-foot { display: flex; align-items: center; justify-content: space-between; }
.kj-time { font-size: 12px; color: var(--text-2); }
.kj-sum { font-size: 13px; font-weight: 600; color: var(--wx-green); }

/* Tab3 游玩 */
.game-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center;
}
.game-panel .game-ico { font-size: 64px; margin-bottom: 16px; }
.game-panel h3 { font-size: 17px; margin-bottom: 8px; }
.game-panel p { color: var(--text-2); font-size: 13px; margin-bottom: 24px; }
.game-panel .btn { font-size: 16px; padding: 12px 40px; border-radius: 24px; }

/* 被拉黑提示 */
.black-tip {
  background: #FDE7E9; color: var(--danger); text-align: center;
  padding: 8px; font-size: 13px;
}

/* ============================================================
   客服端（微信风格，手机式窄布局：桌面也居中显示，无右侧空白）
   ============================================================ */
.kefu-app {
  display: flex; height: 100vh; height: 100dvh; max-width: 480px;
  margin: 0 auto; background: var(--card);
  position: relative;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  box-shadow: 0 0 30px rgba(0,0,0,.08);
}
/* iOS Safari 高度回退（兼容旧版无 100dvh 的机型） */
@supports (-webkit-touch-callout: none) {
  .kefu-app { height: -webkit-fill-available; }
}

/* 登录页 */
.login-page {
  position: fixed; inset: 0; z-index: 3000; display: flex;
  align-items: center; justify-content: center; background: #F7F7F7;
}
.login-box {
  width: 100%; max-width: 340px; background: #fff; border-radius: 14px;
  padding: 30px 26px; box-shadow: var(--shadow); margin: 20px;
}
.login-box h2 { text-align: center; margin-bottom: 22px; font-size: 18px; }
.login-box .input { margin-bottom: 14px; background: #F5F5F5; padding: 12px; }

/* 消息列表（独占整屏宽度，不再留右侧空白） */
.kefu-list-panel {
  width: 100%; display: flex; flex-direction: column; background: #fff; flex-shrink: 0;
}
.kefu-list-head {
  padding: 14px 14px 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  /* iPhone 刘海安全区 */
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.kefu-list-head h2 { font-size: 18px; }
.kefu-list-head .logout { font-size: 12px; color: var(--text-2); }
.kefu-list-search { padding: 6px 14px 10px; }
.kefu-list-search input {
  width: 100%; background: #F5F5F5; border-radius: 6px; padding: 8px 12px; font-size: 13px;
}
.kefu-list-stats { padding: 0 14px 8px; }
.kefu-list-stats .stat-cards { gap: 6px; }
.kefu-list-stats .stat-card { min-width: 0; padding: 8px 10px; border-radius: 8px; box-shadow: none; background: #F7F7F7; }
.kefu-list-stats .stat-card .num { font-size: 16px; }
.kefu-list-stats .stat-card .label { font-size: 10px; }
.kefu-user-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.kefu-user-item {
  display: flex; align-items: center; padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid #F4F4F4; position: relative;
}
.kefu-user-item.active { background: #F0F0F0; }
/* 已进群用户：列表正常显示，标记"已在群"（不可单聊，点击提示走群聊） */
.kefu-user-item.in-group .avatar { opacity: .85; }
.kefu-user-item .info .name .grp-tag {
  font-size: 11px; color: #8a5a00; background: #fff3d6; border-radius: 3px;
  padding: 0 5px; white-space: nowrap; flex-shrink: 0;
}
.kefu-user-item .avatar {
  width: 42px; height: 42px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 17px;
  background: linear-gradient(135deg, #5B8DEF, #7C5BEF); position: relative;
}
.kefu-user-item .avatar .dot {
  position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--wx-green); border: 2px solid #fff; display: none;
}
.kefu-user-item .avatar .dot.on { display: block; }
.kefu-user-item.black .avatar { filter: grayscale(1); opacity: .6; }
.kefu-user-item .info { flex: 1; min-width: 0; margin-left: 12px; }
.kefu-user-item .info .name {
  font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 6px;
}
.kefu-user-item .info .name .black-flag { font-size: 10px; color: var(--danger); border: 1px solid var(--danger); border-radius: 3px; padding: 0 3px; }
.kefu-user-item .info .preview {
  font-size: 12px; color: var(--text-2); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kefu-user-item .right { text-align: right; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.kefu-user-item .right .time { font-size: 11px; color: var(--text-2); }
.badge {
  min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger);
  color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
/* 新用户置顶标记 */
.kefu-user-item .new-tag { font-size: 10px; background: var(--wx-green); color: #fff; border-radius: 3px; padding: 1px 4px; margin-left: 6px; }

/* 聊天窗口（右栏） */
.kefu-chat-panel {
  flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg);
}
.kefu-chat-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-2); font-size: 14px;
}
.kefu-chat-head {
  display: flex; align-items: center; padding: 10px 12px; background: #F7F7F7;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
  /* iPhone 刘海安全区 */
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.kefu-chat-head .back {
  font-size: 20px; padding: 0 8px 0 0; color: var(--text);
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: flex-start;
}
.kefu-chat-head .avatar {
  width: 36px; height: 36px; border-radius: 5px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
  background: linear-gradient(135deg, #5B8DEF, #7C5BEF); margin-right: 10px; flex-shrink: 0;
}
.kefu-chat-head .name-line { flex: 1; min-width: 0; }
.kefu-chat-head .name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; overflow: hidden; min-width: 0; }
/* 第二行：在线状态（与用户名左对齐）+ 账号行（与用户号对齐） */
.kefu-chat-head .name-line-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0; }
.kefu-chat-head .online { font-size: 11px; color: var(--text-2); flex-shrink: 0; }
.kefu-chat-head .online i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ccc; margin-right: 4px; }
.kefu-chat-head .online.on i { background: var(--wx-green); }
/* 用户号下方全部绑定账号行（与用户号左边对齐，不撑满整行）
   注意：不能使用全局 .empty 类（有 padding:50px 会撑高头部），无账号时用独立 .chat-empty */
.kefu-chat-head .chat-accounts {
  font-size: 11px; color: var(--text-2); line-height: 1.5; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; margin: 0;
}
.kefu-chat-head .chat-accounts.chat-empty { color: #bbb; }
.kefu-chat-head .more {
  font-size: 16px; padding: 6px 4px; color: var(--text);
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}

.kefu-chat-foot {
  display: flex; align-items: center; gap: 4px; padding: 6px 8px;
  background: #F7F7F7; border-top: 1px solid var(--line); flex-shrink: 0;
  /* iPhone 底部横条安全区（键盘弹出时自动让位） */
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
.kefu-chat-foot .attach {
  font-size: 16px; color: var(--text-2); padding: 0;
  min-width: 26px; min-height: 26px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kefu-chat-foot textarea {
  flex: 1; min-width: 0; resize: none; border-radius: 6px; padding: 6px 10px; font-size: 15px;
  max-height: 76px; background: #fff; line-height: 1.4; height: 32px;
  box-sizing: border-box;
}
.kefu-chat-foot .send-btn {
  background: var(--wx-green); color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 13px;
  min-height: 28px; min-width: 44px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kefu-chat-foot #btnQuick { background: transparent; }
.kefu-chat-foot .send-btn:active { opacity: .8; }

/* 快捷回复面板 */
.quick-panel {
  background: #F7F7F7; border-top: 1px solid var(--line); flex-shrink: 0;
  max-height: 45vh; overflow-y: auto; padding: 8px 10px; display: none;
}
.quick-panel.open { display: block; }
.quick-cat {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.quick-cat .cat {
  font-size: 12px; padding: 4px 10px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); color: var(--text-2);
}
.quick-cat .cat.active { background: var(--wx-green); color: #fff; border-color: var(--wx-green); }
.quick-item {
  background: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.quick-item:active { background: #f0f0f0; }
.quick-item .qi-title { font-weight: 600; flex-shrink: 0; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-item .qi-content { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-img-grid img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; cursor: pointer; }

/* 全局隐藏（列表/聊天窗口互斥显示，桌面端同样适用） */
.kefu-list-panel.hide, .kefu-chat-panel.hide { display: none; }

/* 消息列表用户号小字（昵称为主，用户号为辅） */
.kefu-user-item .info .name .sub-uid { font-size: 11px; color: #999; font-weight: 400; margin-left: 6px; }
.kefu-chat-head .name .sub-uid { font-size: 12px; color: #999; font-weight: 400; margin-left: 6px; }
/* 加减记账"当前值"徽标：客服 +n/-n 单聊累计（列表用户号后 + 聊天头部用户号后） */
.kefu-user-item .info .name .cur-val,
.kefu-chat-head .name .cur-val {
  flex: none; font-size: 11px; line-height: 1.2; font-weight: 400;
  border-radius: 3px; padding: 2px 4px; white-space: nowrap;
  background: rgba(7, 193, 96, .10); color: var(--wx-green-dark, #06AD56);
}
.kefu-user-item .info .name .cur-val.neg,
.kefu-chat-head .name .cur-val.neg {
  background: #FDE7E9; color: var(--danger);
}

/* 触屏优化：禁用双击缩放，提升点击响应 */
.btn, .tab, .sheet-item, .kefu-user-item, .quick-item, .attach, .send-btn, .back, .more, .cat {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* 客服端底部注册按钮栏：安全区适配 */
.kefu-register-bar {
  padding: 10px 14px; border-top: 1px solid var(--line);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* 手机适配：单栏切换 + 触屏尺寸 */
@media (max-width: 768px) {
  .kefu-app { max-width: none; width: 100%; }
  .kefu-list-panel { width: 100%; }
  .kefu-chat-panel { width: 100%; }

  /* 输入区：16px 防止 iOS 聚焦自动放大；按钮 ≥44px 便于点按 */
  .kefu-chat-foot textarea { font-size: 16px; min-height: 44px; padding: 11px 12px; }
  .kefu-chat-foot { gap: 10px; padding-left: 10px; padding-right: 10px; }
  .kefu-chat-foot .send-btn { font-size: 15px; }
  .kefu-chat-foot .attach { font-size: 26px; }
  .kefu-list-search input { font-size: 16px; padding: 11px 12px; }
  .login-box .input { font-size: 16px; }

  /* 底部操作菜单（弹层）加大点按区域 */
  .sheet-item, .sheet-cancel { padding: 17px; font-size: 16px; }

  /* 消息气泡与文字在手机上更大更清晰 */
  .bubble { font-size: 16px; padding: 10px 13px; }
  .bubble img { max-width: 220px; max-height: 260px; }
  .msg-avatar { width: 40px; height: 40px; font-size: 17px; }
  .msg-main { max-width: 76%; }

  /* 快捷面板条目触屏友好 */
  .quick-item { padding: 12px 13px; }
  .quick-img-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-img-grid img { height: 90px; }

  /* 统计卡片等宽排列 */
  .kefu-list-stats .stat-card { padding: 10px; }
}
/* 列表/聊天互斥显示后，返回按钮在所有屏幕都显示 */
.chat-mobile-back { display: inline-flex; }

/* ============================================================
   管理端
   ============================================================ */
.admin-app { display: flex; height: 100vh; height: 100dvh; }
.admin-side {
  width: 210px; background: #2B2F3A; color: #fff; flex-shrink: 0;
  display: flex; flex-direction: column; overflow-y: auto;
}
.admin-side .brand {
  padding: 18px 16px; font-size: 16px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-side .menu { flex: 1; padding: 8px 0; }
.admin-side .menu-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  color: rgba(255,255,255,.75); cursor: pointer; font-size: 14px;
  border-left: 3px solid transparent;
}
.admin-side .menu-item:hover { background: rgba(255,255,255,.06); }
.admin-side .menu-item.active {
  background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--wx-green);
}
.admin-side .side-foot { padding: 14px 16px; font-size: 12px; color: rgba(255,255,255,.4); }

.admin-main { flex: 1; min-width: 0; overflow-y: auto; background: #F5F6F7; }
.admin-main-head {
  background: #fff; padding: 16px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-main-head h2 { font-size: 18px; }
.admin-content { padding: 20px 24px; max-width: 1200px; }

.admin-card {
  background: #fff; border-radius: 10px; padding: 18px; margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.admin-card h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }

/* 表格 */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #F0F0F0; white-space: nowrap; }
.tbl th { color: var(--text-2); font-weight: 500; font-size: 12px; background: #FAFAFA; }
.tbl td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tbl tr:hover td { background: #FAFAFA; }
.tbl .actions { display: flex; gap: 6px; flex-wrap: wrap; }

.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 3px; background: #E8F7EE; color: #07A253; }
.tag.black { background: #FDE7E9; color: var(--danger); }
.tag.off { background: #F0F0F0; color: var(--text-2); }

/* 筛选栏 */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px; background: #fff; border-radius: 10px; margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.filter-bar .input { width: auto; min-width: 130px; background: #F5F5F5; }
.filter-bar select { padding: 9px 10px; border: none; border-radius: 6px; background: #F5F5F5; font-size: 13px; }
.filter-bar .btn { margin-left: 4px; }

.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 14px 0; font-size: 13px; color: var(--text-2); }
.pager button { padding: 5px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 13px; }
.pager button:disabled { opacity: .4; }

/* 工具卡片 */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tool-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.tool-card .img-box { height: 100px; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
.tool-card .img-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tool-card .tool-info { padding: 8px 10px; font-size: 12px; }
.tool-card .tool-info .t-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tool-card .tool-info .t-meta { color: var(--text-2); margin-top: 4px; display: flex; justify-content: space-between; align-items: center; }

/* 设置分组 */
.set-group { margin-bottom: 18px; }
.set-group .set-label { font-size: 13px; color: var(--text-2); margin-bottom: 8px; display: block; }
.set-group .set-desc { font-size: 12px; color: #aaa; margin-top: 4px; }

/* 手机适配：管理端侧栏折叠 */
@media (max-width: 768px) {
  .admin-side { width: 60px; }
  .admin-side .brand { font-size: 12px; padding: 14px 8px; text-align: center; }
  .admin-side .menu-item { justify-content: center; padding: 14px 6px; font-size: 12px; }
  .admin-content { padding: 14px; }
  .admin-main-head { padding: 12px 14px; }
}


/* ==================== 补充功能样式：群聊/昵称/流水/强提醒 ==================== */
/* 客服端群列表 */
.group-list-box { border-bottom: 1px solid var(--line); background: #F7F9FB; max-height: 160px; overflow-y: auto; }
.group-list-title { font-size: 12px; color: var(--text-2); padding: 6px 12px 2px; }
.group-list-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; cursor: pointer; }
.group-list-item.active { background: rgba(7,193,96,.1); }
.group-list-item .gi-name { font-size: 14px; font-weight: 500; }
.group-list-item .gi-no { font-size: 11px; color: var(--text-2); margin-left: 6px; }
.group-list-item .gi-members { font-size: 12px; color: var(--text-2); }

/* 建群/群设置弹窗成员选择 */
.chk-item { display: flex; align-items: center; gap: 8px; padding: 10px 4px; font-size: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.chk-item.add { color: var(--text-2); }
.chk-item input { width: 18px; height: 18px; }
.chk-item.disabled { opacity: 0.55; cursor: not-allowed; }
.chk-item.disabled input { cursor: not-allowed; }
.chk-item .grp-tag { font-size: 11px; color: #8a5a00; background: #fff3d6; border-radius: 3px; padding: 0 4px; white-space: nowrap; }
.modal-foot { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); justify-content: flex-end; }
.btn.danger { background: var(--danger); color: #fff; }

/* 流水/昵称管理 */
.nick-chip { display: inline-block; padding: 4px 10px; margin: 2px 4px 2px 0; border-radius: 12px; background: var(--bg); font-size: 13px; cursor: pointer; }
.flow-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.flow-row button { margin-left: 8px; }

/* 强提醒：列表闪烁高亮 */
.kefu-user-item.alert-flash { animation: alertFlash 1s ease 3; }
@keyframes alertFlash { 0%,100% { background: transparent; } 50% { background: #ffe066; } }

/* 管理端：强提醒关键词 */
.alert-kw-chip {
  display: inline-block; padding: 5px 12px; border-radius: 14px;
  background: #FFF7E6; border: 1px solid #FFD591; color: #D46B08;
  font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}