/* 真评论 · 悬浮客服 / 智能客服 v7
   视觉复刻 xsd.cn 深蓝竖排：虚线圆环头像 → 诚邀合作 → 白色四宫格 → 白色圆形回顶部
   主题严格双色：蓝 #1a6ed8 + 亮黄 #ffc93c + 白（中性蓝灰仅作文字/描边）
   ⚠️ 关键防遮挡：容器本身 pointer-events:none 且尺寸只有悬浮球；
      面板/对话框绝对定位脱离文档流，收起态不接收任何指针事件。
      旧版把 visibility:hidden 的面板留在 flex 流里，撑出 344×1037 的透明巨幕，
      会吞掉桌面上「我的 / 写一条真实记录」与手机端大部分按钮的点击。
   v7.2：面板进一步收窄为细长竖条（168px 宽），100% 比例下只占右下角、不遮挡主体。
   v7.3：四宫格改上下一列（评客端→我的管理中心 / 商家端→商家管理中心 / 系统端→管理后台·仅
      admin 可见 / 客服端→在线客服，底部公示官方热线 400-888-3219 与官方邮箱 zpl@xsd.cn）。 */
.sf-wrap{
  --sf-blue:#1a6ed8; --sf-blue-deep:#123f78; --sf-navy:#0a2e67;
  --sf-blue-soft:#eef5fd; --sf-blue-line:#cfe3f6;
  --sf-sun:#ffc93c; --sf-sun-soft:#fff8e0;
  --sf-ink:#213a55; --sf-ink2:#5b7291; --sf-line:#e6eef8;
  position:fixed;right:16px;bottom:16px;z-index:55;   /* 低于顶栏 60 / 弹窗 200，绝不压住导航与「我的」下拉 */
  width:60px;height:60px;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:flex-end;
  font-family:var(--sans)
}

/* ---------- 收起态：悬浮球 ---------- */
.sf-fab{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;pointer-events:auto;
  background:linear-gradient(135deg,var(--sf-blue),var(--sf-blue-deep));color:#ffffff;
  box-shadow:0 8px 22px rgba(18,63,120,.30);
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s ease,box-shadow .22s ease}
.sf-fab:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,63,120,.36)}
.sf-fab svg{width:25px;height:25px}
.sf-wrap.sf-open .sf-fab{display:none}      /* 展开时只留深蓝竖条，与参考站一致 */

/* ---------- 展开态：深蓝竖排服务面板 ---------- */
.sf-panel,.sf-chatbox{
  position:absolute;right:0;bottom:0;              /* 绝对定位：不参与父容器尺寸计算 */
  pointer-events:none;opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.97);transform-origin:bottom right;
  transition:opacity .22s ease,transform .22s ease,visibility .22s
}
.sf-panel.open,.sf-chatbox.open{pointer-events:auto;opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.sf-panel{width:168px;padding:12px 12px 14px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,#103c7e 0%,var(--sf-navy) 100%);
  box-shadow:0 18px 46px rgba(10,42,94,.34);
  max-height:calc(100vh - 44px);overflow-y:auto;scrollbar-width:none}
.sf-panel::-webkit-scrollbar{display:none}
.sf-collapse{position:absolute;right:10px;top:10px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(255,255,255,.18);color:#ffffff;font-size:15px;line-height:1;cursor:pointer;opacity:.72}
.sf-collapse:hover{opacity:1;background:rgba(255,255,255,.30)}

.sf-avatar{width:104px;height:104px;margin:2px auto 0}
.sf-avatar svg{width:100%;height:100%;display:block}

.sf-coop{display:block;width:124px;margin:10px auto 12px;padding:8px 0;border:0;border-radius:999px;
  background:linear-gradient(90deg,#1a7ff0,#2aa4ee);color:#ffffff;
  font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 6px 16px rgba(26,127,240,.36)}
.sf-coop:hover{filter:brightness(1.07)}
.sf-coop:active{transform:translateY(1px)}

.sf-card{background:#ffffff;border-radius:18px;padding:8px;display:grid;grid-template-columns:1fr;gap:8px}
.sf-cell{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;
  background:#f6f9ff;border:0;border-radius:12px;min-height:48px;padding:0 12px;text-align:left;
  color:var(--sf-ink);font-family:inherit;letter-spacing:.02em;cursor:pointer;
  transition:background .18s ease}
.sf-cell:hover{background:var(--sf-blue-soft);color:var(--sf-blue-deep)}
.sf-cell svg{width:26px;height:26px;flex:0 0 auto}
.sf-cell .sf-cell-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sf-cell .sf-cell-txt b{font-size:14px;font-weight:800}
.sf-cell .sf-cell-txt small{font-size:10.5px;color:var(--sf-ink2);margin-top:1px}
.sf-cell:hover .sf-cell-txt small{color:var(--sf-blue-deep)}

.sf-top-round{width:52px;height:52px;margin:14px auto 0;border:0;border-radius:50%;
  background:#ffffff;color:var(--sf-blue);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.14)}
.sf-top-round:hover{background:var(--sf-sun);color:var(--sf-blue-deep)}
.sf-top-round svg{width:26px;height:26px}

/* ---------- 智能客服对话框 ---------- */
.sf-chatbox{width:300px;max-width:calc(100vw - 32px);background:#ffffff;
  border:1px solid var(--sf-blue-line);border-radius:15px;overflow:hidden;
  box-shadow:0 18px 44px rgba(18,63,120,.24)}
.sf-chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(120deg,var(--sf-blue-deep),var(--sf-blue));color:#ffffff}
.sf-chat-head .ava{width:30px;height:30px;border-radius:50%;background:var(--sf-sun);
  color:var(--sf-blue-deep);display:grid;place-items:center;font-size:12px;font-weight:800}
.sf-chat-head .ttl{flex:1;font-size:14px;font-weight:700;line-height:1.35}
.sf-chat-head .ttl small{display:block;font-size:10.5px;opacity:.85;font-weight:500}
.sf-chat-head .cls{cursor:pointer;opacity:.85;font-size:19px;line-height:1}
.sf-chat-head .cls:hover{opacity:1}
.sf-chat-body{height:252px;overflow-y:auto;padding:13px;background:var(--sf-blue-soft)}
.msg{max-width:84%;padding:9px 12px;border-radius:11px;font-size:13px;
  line-height:1.7;white-space:pre-wrap;word-break:break-word;margin-bottom:10px}
.msg.bot{background:#ffffff;color:var(--sf-ink);border:1px solid var(--sf-line);border-bottom-left-radius:4px}
.msg.user{margin-left:auto;background:var(--sf-blue);color:#ffffff;border-bottom-right-radius:4px}
.msg-row{display:flex;gap:7px;align-items:flex-start}
.msg-row .chat-avatar{flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--sf-sun);color:var(--sf-blue-deep);font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.sf-contact{padding:9px 13px;background:var(--sf-sun-soft);border-top:1px solid #ffd84f;border-bottom:1px solid #ffd84f}
.sf-contact b{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--sf-blue-deep);margin-bottom:5px}
.sf-contact a,.sf-contact span,.sf-contact .sf-copy{display:block;font-size:12.5px;color:var(--sf-blue-deep);
  padding:2px 0;line-height:1.5;text-align:left;text-decoration:none}
.sf-contact a{font-weight:800}
.sf-contact a:hover{text-decoration:underline}
.sf-contact .sf-mini{font-size:11px;color:var(--sf-ink2)}
.sf-contact .sf-copy{border:0;background:transparent;font-family:inherit;cursor:pointer;padding:2px 0}
.sf-contact .sf-copy:hover{text-decoration:underline}
.chip-row{padding:10px 13px;display:flex;flex-wrap:wrap;gap:6px;background:var(--sf-blue-soft)}
.chip-q{font-size:12px;padding:5px 10px;border-radius:20px;cursor:pointer;
  background:#ffffff;color:var(--sf-blue);border:1px solid var(--sf-blue-line)}
.chip-q:hover{background:var(--sf-sun);color:var(--sf-blue-deep);border-color:var(--sf-sun)}
.sf-chat-foot{display:flex;gap:8px;padding:10px;border-top:1px solid var(--sf-line);background:#ffffff}
.sf-chat-foot input{flex:1;min-width:0;padding:8px 11px;font-size:16px;
  border:1px solid var(--sf-blue-line);border-radius:9px;outline:none;color:var(--sf-ink)}
.sf-chat-foot input:focus{border-color:var(--sf-blue);box-shadow:0 0 0 3px var(--sf-blue-soft)}
.sf-send{padding:8px 15px;font-size:13px;font-weight:700;border:0;border-radius:9px;
  cursor:pointer;background:var(--sf-blue);color:#ffffff}
.sf-send:hover{background:var(--sf-blue-deep)}

/* 手机端：默认收起为悬浮球，避免竖条遮挡内容；底部 tabbar 之上 */
@media(max-width:680px){
  .sf-wrap{right:10px;bottom:calc(74px + env(safe-area-inset-bottom, 0px));width:60px;height:50px}
  .sf-fab{width:50px;height:50px}
  .sf-panel{width:172px;padding:11px 11px 13px;max-height:calc(100vh - 140px)}
  .sf-avatar{width:96px;height:96px}
  .sf-coop{width:120px;margin:9px auto 11px;font-size:13px}
  .sf-cell{min-height:46px;font-size:13px;gap:8px;padding:0 10px}
  .sf-cell svg{width:24px;height:24px}
  .sf-top-round{width:48px;height:48px;margin:12px auto 0}
  .sf-chatbox{width:calc(100vw - 20px);max-width:calc(100vw - 20px)}
  .sf-chat-body{height:216px}
}