/* claw.yfmk68.com · 微信人工客服 · 蓝白轻玻璃 */
:root{
  --bg:#f5f7fb; --bg2:#eaeff7; --ink:#0f172a; --ink2:#475569; --ink3:#8296b0;
  --line:rgba(15,23,42,.08); --line2:rgba(15,23,42,.14);
  --card:rgba(255,255,255,.72); --card2:rgba(255,255,255,.9);
  --brand:#1e63ff; --brand2:#3b82f6; --brand-ink:#1348c7;
  --ok:#0f9d58; --warn:#d97706; --bad:#dc2626;
  --we:#07c160;                 /* 微信绿，仅用于通道标识 */
  --r:16px; --r2:12px;
  --sh:0 1px 2px rgba(15,23,42,.04), 0 12px 28px -18px rgba(15,23,42,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
/* 关键：整页不滚动 —— 页面高度固定，聊天记录在面板内部滚动，
   否则消息一多，页面被撑长，输入框就被顶到屏幕外面（老板踩到的"下沉"）。 */
body{
  margin:0; color:var(--ink);
  background:linear-gradient(180deg,#f7f9fd 0%, #e9eef7 100%);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden; height:100vh; height:100dvh;
}
a{color:var(--brand); text-decoration:none}
button,input,textarea{font:inherit; color:inherit}

/* ---------- 通用 ---------- */
.wrap{position:relative; z-index:1; max-width:1280px; width:100%; margin:0 auto;
  padding:18px 18px 18px; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.glass{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); backdrop-filter:blur(14px) saturate(1.4)}
.eyebrow{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.h1{font-size:26px; font-weight:650; letter-spacing:-.02em; margin:6px 0 4px}
.sub{color:var(--ink2); font-size:13.5px; margin:0}
.btn{border:1px solid var(--line2); background:var(--card2); color:var(--ink);
  padding:9px 14px; border-radius:10px; cursor:pointer; transition:.16s; white-space:nowrap}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(15,23,42,.4)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,var(--brand2),var(--brand)); color:#fff;
  border-color:transparent; box-shadow:0 10px 22px -14px rgba(30,99,255,.9)}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 9px;
  border-radius:999px; border:1px solid var(--line2); background:rgba(255,255,255,.7); color:var(--ink2)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ink3)}
.dot.ok{background:var(--ok); box-shadow:0 0 0 3px rgba(15,157,88,.14)}
.dot.warn{background:var(--warn); box-shadow:0 0 0 3px rgba(217,119,6,.14)}
.dot.bad{background:var(--bad); box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}

/* ---------- 顶栏 ---------- */
.top{display:flex; align-items:center; gap:14px; padding:13px 18px; margin-bottom:14px;
  border-radius:var(--r); flex:0 0 auto}
.top .logo{width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(145deg,#2f7bff,#1552e0); position:relative; box-shadow:0 8px 18px -10px rgba(30,99,255,.85)}
.top .logo::after{content:""; position:absolute; inset:0; border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 55%)}
.top .t1{font-weight:620; letter-spacing:-.01em}
.top .t2{font-size:12px; color:var(--ink3)}
.top .sp{flex:1}
.top .live{font-size:12px; color:var(--ink3); display:flex; align-items:center; gap:6px}

/* ---------- 指标 ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; flex:0 0 auto}
.kpi{padding:16px 18px; border-radius:var(--r2); background:var(--card); border:1px solid var(--line)}
.kpi .v{font-size:34px; font-weight:640; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums}
.kpi .k{font-size:12px; color:var(--ink3); margin-top:6px}
.spark{margin-top:10px; width:100%; height:26px; display:block}
.spark path.line{fill:none; stroke:var(--brand); stroke-width:1.5; stroke-linejoin:round; opacity:.85}
.spark path.area{fill:rgba(59,130,246,.12); stroke:none}

/* ---------- 工作区 ---------- */
.work{display:grid; grid-template-columns:322px 1fr; gap:14px; align-items:stretch;
  flex:1 1 auto; min-height:0}
.pane{border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh);
  height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden}
.pane-h{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); flex:0 0 auto}
.pane-h .ttl{font-weight:600}
.pane-h .sp{flex:1}
.search{width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--line2);
  background:rgba(255,255,255,.75); outline:none}
.search:focus{border-color:var(--brand2); box-shadow:0 0 0 3px rgba(59,130,246,.14)}

.convs{overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch}
.conv{display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .14s}
.conv:hover{background:rgba(255,255,255,.6)}
.conv.on{background:linear-gradient(180deg,rgba(59,130,246,.12),rgba(59,130,246,.06))}
.conv.on::before{content:""; position:absolute; left:0; width:3px; height:34px; margin-top:2px;
  border-radius:0 3px 3px 0; background:var(--brand)}
.conv{position:relative}
.av{width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  color:#fff; font-weight:600; font-size:14px; background:linear-gradient(145deg,#38bdf8,#2563eb)}
.conv .mid{flex:1; min-width:0}
.conv .nm{font-weight:560; font-size:14px; display:flex; gap:6px; align-items:center}
.conv .pv{color:var(--ink3); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv .rt{text-align:right; flex:0 0 auto}
.conv .tm{font-size:11.5px; color:var(--ink3)}
.badge{display:inline-block; min-width:18px; text-align:center; font-size:11px; padding:1px 6px;
  border-radius:999px; background:var(--brand); color:#fff; margin-top:5px}
.empty{padding:34px 18px; text-align:center; color:var(--ink3); font-size:13px}

/* 聊天 */
.chat-h{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex:0 0 auto}
.chat-h .nm{font-weight:600}
/* min-height:0 是 flex 里能滚动的关键：默认 auto 会被内容撑开、把输入框顶下去 */
.stream{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px 16px;
  background:radial-gradient(600px 300px at 90% 0%, rgba(59,130,246,.05), transparent 60%);
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.day{text-align:center; font-size:11.5px; color:var(--ink3); margin:14px 0}
.b{display:flex; margin:9px 0}
.b.out{justify-content:flex-end}
.bub{max-width:min(560px,74%); padding:10px 13px; border-radius:14px; white-space:pre-wrap;
  word-break:break-word; font-size:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.92); box-shadow:0 6px 16px -14px rgba(15,23,42,.6)}
.b.out .bub{background:linear-gradient(180deg,#3b82f6,#2563eb); color:#fff; border-color:transparent}
.b .meta{font-size:11px; color:var(--ink3); align-self:flex-end; margin:0 8px 3px}
.composer{border-top:1px solid var(--line); padding:11px 12px; display:flex; gap:10px; align-items:flex-end;
  background:rgba(255,255,255,.9); flex:0 0 auto; position:relative; z-index:2}
.composer textarea{flex:1; resize:none; min-height:44px; max-height:150px; padding:11px 12px;
  border-radius:12px; border:1px solid var(--line2); background:rgba(255,255,255,.9); outline:none; line-height:1.5}
.composer textarea:focus{border-color:var(--brand2); box-shadow:0 0 0 3px rgba(59,130,246,.14)}
.hint{font-size:11.5px; color:var(--ink3); padding:0 16px 10px; flex:0 0 auto}

/* ---------- 抽屉：接入 ---------- */
.mask{position:fixed; inset:0; background:rgba(15,23,42,.32); backdrop-filter:blur(2px); z-index:40;
  opacity:0; pointer-events:none; transition:.2s}
.mask.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(460px,92vw); z-index:50;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,253,.94));
  border-left:1px solid var(--line); box-shadow:-24px 0 48px -30px rgba(15,23,42,.5);
  transform:translateX(102%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column}
.drawer.on{transform:none}
.drawer .hd{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line)}
.drawer .bd{overflow:auto; padding:18px}
.qrbox{background:#fff; border:1px solid var(--line2); border-radius:14px; padding:14px;
  display:grid; place-items:center; min-height:230px}
.qrbox img{width:212px; height:212px; image-rendering:pixelated}
.steps{counter-reset:s; margin:16px 0 0; padding:0; list-style:none}
.steps li{counter-increment:s; position:relative; padding:0 0 12px 30px; font-size:13.5px; color:var(--ink2)}
.steps li::before{content:counter(s); position:absolute; left:0; top:1px; width:20px; height:20px;
  border-radius:50%; background:rgba(59,130,246,.14); color:var(--brand-ink); font-size:11.5px;
  display:grid; place-items:center; font-weight:600}
.list{margin-top:8px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.row{display:flex; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line);
  font-size:13px; background:rgba(255,255,255,.6)}
.row:last-child{border-bottom:none}
.row .sp{flex:1}
.row .sm{font-size:11.5px; color:var(--ink3)}
.notice{margin-top:12px; font-size:12.5px; color:var(--ink2); background:rgba(59,130,246,.07);
  border:1px solid rgba(59,130,246,.18); border-radius:12px; padding:11px 12px}
/* 图片消息 */
.msg-img{max-width:230px;max-height:230px;border-radius:11px;display:block;cursor:zoom-in;background:#eef2f7}
.b.out .msg-img{margin-left:auto}
.b .bub.has-img{padding:5px;background:rgba(255,255,255,.95);border:1px solid var(--line)}
.b.out .bub.has-img{background:rgba(255,255,255,.95)}
.bub .cap{margin-top:6px;padding:0 6px 2px;font-size:13px;color:var(--ink2)}
.b.revoked .bub{opacity:.55;font-style:italic}

/* 小号按钮 / 图标按钮 */
.btn.tiny{padding:5px 9px;font-size:12px;border-radius:9px}
.btn.ghost.on{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);color:var(--brand-ink)}
.btn.icon{padding:9px 10px;display:grid;place-items:center}

/* 会话项：置顶图钉 / 更多菜单 / 未读高亮 */
.conv .pin{color:var(--brand);font-size:11px;margin-right:4px}
.conv.unread{background:linear-gradient(180deg,rgba(59,130,246,.09),rgba(59,130,246,.03))}
.conv.unread .nm{font-weight:660}
.conv .more{position:absolute;right:8px;top:10px;opacity:0;transition:opacity .15s;padding:3px 7px;
  border-radius:8px;background:rgba(255,255,255,.95);border:1px solid var(--line2);cursor:pointer;font-size:13px;line-height:1}
.conv:hover .more{opacity:1}
.conv .more.on{opacity:1}
.cmenu{position:fixed;z-index:70;background:rgba(255,255,255,.98);border:1px solid var(--line2);
  border-radius:12px;box-shadow:0 18px 40px -22px rgba(15,23,42,.6);padding:5px;min-width:150px}
.cmenu div{padding:9px 11px;border-radius:8px;font-size:13.5px;cursor:pointer;white-space:nowrap}
.cmenu div:hover{background:rgba(59,130,246,.1)}
.cmenu div.danger{color:#b91c1c}
/* 消息撤回按钮（桌面 hover 才出现） */
.b{position:relative}
.b .revoke{position:absolute;top:50%;transform:translateY(-50%);right:-52px;opacity:0;transition:.15s;
  font-size:11.5px;color:var(--ink3);cursor:pointer;padding:3px 6px;border-radius:7px;background:rgba(255,255,255,.9);border:1px solid var(--line2)}
.b.out:hover .revoke{opacity:1}

/* 图片放大器：页内浮层，不开新窗口 */
.imgview{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  background:rgba(9,14,25,.86); opacity:0; transition:opacity .16s ease; overscroll-behavior:contain}
.imgview.on{opacity:1}
.iv-bar{display:flex; align-items:center; gap:6px; padding:10px 12px;
  background:linear-gradient(180deg,rgba(9,14,25,.92),rgba(9,14,25,.55));
  color:#e6edf7; font-size:13px; flex:0 0 auto}
.iv-bar .sp{flex:1}
.iv-bar .btn{border-color:rgba(255,255,255,.22); color:#e6edf7; background:rgba(255,255,255,.08)}
.iv-bar .btn:hover{background:rgba(255,255,255,.18)}
.iv-name{max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cbd6e6}
.iv-stage{flex:1; min-height:0; display:grid; place-items:center; overflow:hidden;
  touch-action:none; cursor:zoom-out}
.iv-img{max-width:96vw; max-height:100%; object-fit:contain; border-radius:10px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8); transform-origin:center center;
  will-change:transform; user-select:none; -webkit-user-drag:none}
.imgview .iv-img{cursor:zoom-in}
@media (max-width:860px){
  .iv-bar{padding:8px 10px; gap:5px}
  .iv-name{max-width:30vw}
  .iv-img{max-width:100vw; border-radius:0}
}

@media (max-width:860px){
  .conv .more{opacity:1}              /* 手机上没有 hover，直接显示 */
  .b .revoke{position:static;transform:none;opacity:1;margin-left:6px;align-self:flex-end}
  .msg-img{max-width:170px;max-height:170px}
}

.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:60;
  background:rgba(15,23,42,.9); color:#fff; padding:10px 16px; border-radius:11px; font-size:13px;
  opacity:0; transition:.2s; pointer-events:none}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* 独立接入页 */
.solo{max-width:560px; margin:0 auto; padding:40px 20px 60px; position:relative; z-index:1}
.card{padding:22px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh)}
.kv{display:flex; gap:10px; font-size:13px; padding:8px 0; border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink3); width:92px; flex:0 0 auto}

.back{display:none}

@media (max-width:860px){
  /* 手机上把 4 张指标卡压成一行内联小字：省下的高度全给聊天区 */
  .kpis{display:flex; gap:12px; margin-bottom:10px; overflow-x:auto; padding-bottom:2px}
  .kpi{padding:0; border:none; background:none; box-shadow:none; flex:0 0 auto; display:flex;
    align-items:baseline; gap:5px; white-space:nowrap}
  .kpi .v{font-size:17px; font-weight:640}
  .kpi .k{font-size:11px; margin-top:0}
  .kpi .spark{display:none}
  .work{gap:10px}
  .hint{display:none}                       /* 手机上省掉输入框下面那行说明 */
  #kChannelsCap{display:none}               /* 手机上一行放不下就省掉这个注释 */
  .hide-sm{display:none}                    /* 手机上隐藏次要状态 chip */
  .btn,.conv,.bub,.kpi{transition:none}     /* 关掉过渡：手机上滑动更跟手 */
  .bub{box-shadow:none}
  .work{grid-template-columns:1fr}
  .pane{min-height:auto}
  .pane.list-pane.hide{display:none}
  .pane.chat-pane.hide{display:none}
  .pane-chatwrap{display:flex; flex-direction:column}
  .back{display:inline-flex}

  /* 手机 GPU 弱：backdrop-filter（毛玻璃）是 iOS 上的头号卡顿源，移动端一律关掉，
     用同色半透明实底替代，视觉几乎无差但滚动丝滑。 */
  .glass,.top,.mask,.drawer,.card,.kpi,.pane{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .glass,.top{background:rgba(255,255,255,.94)}
  .kpi,.pane,.card{background:rgba(255,255,255,.9)}
  .mask{background:rgba(15,23,42,.42)}
  .drawer{background:#f8fafd}
  /* 长列表：每项独立渲染，滚动时不让浏览器重排整列 */
  .conv{contain:content}
  .bub{contain:content}
  body::before{background:linear-gradient(180deg,#f7f9fd,#eef2f8)}  /* 去掉两处 radial 光斑的合成开销 */
}