/* 浮动客服条 + 客服面板（首页与所有子页共用）
   结构：上半部分是社交平台竖排图标，下半部分是客服 / 电话 / 回到顶部。
   整条离页面左边缘留 16px，不贴边；始终 position:fixed 浮在最上层。 */
.cs-rail{position:fixed;right:0;left:auto;top:0;bottom:0;transform:none;z-index:92;
  width:56px;height:100vh;background:#fff;border-left:1px solid var(--line);
  box-shadow:-2px 0 14px rgba(0,0,0,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.cs-rail button{width:40px;height:40px;border:0;padding:0;cursor:pointer;
  background:#fff;color:var(--red,#e70013);display:grid;place-items:center;
  border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.16);
  transition:background .18s,color .18s,transform .18s}
.cs-rail button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cs-rail button:hover{transform:translateY(-1px)}
.cs-rail .cs-rail-main{background:var(--red,#e70013);color:#fff}
.cs-rail .cs-rail-main:hover,.cs-rail .cs-rail-main.on{background:var(--red-d,#c60011)}

/* 社交平台图标 */
.cs-socials{display:flex;flex-direction:column;align-items:center;gap:8px}
.cs-socials button{color:#3a3a3a}
.cs-socials button svg{width:19px;height:19px}
.cs-socials button[data-cs-social="facebook"]:hover{background:#1877f2;color:#fff}
.cs-socials button[data-cs-social="instagram"]:hover{background:#e4405f;color:#fff}
.cs-socials button[data-cs-social="youtube"]:hover{background:#ff0000;color:#fff}
.cs-socials button[data-cs-social="whatsapp"]:hover{background:#25d366;color:#fff}
.cs-socials button[data-cs-social="tiktok"]:hover{background:#111;color:#fff}
.cs-sep{width:24px;height:1px;background:var(--line,#e5e5e5);margin:2px 0}

.cs-panel{position:fixed;right:64px;left:auto;top:50%;z-index:95;width:312px;max-width:calc(100vw - 90px);
  background:#fff;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.22);
  transform:translateY(-50%) translateX(10px);opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s;overflow:hidden}
.cs-panel.on{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.cs-panel .cs-head{background:var(--red,#e70013);color:#fff;padding:14px 16px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cs-panel .cs-head b{display:block;font-size:14px;letter-spacing:.02em}
.cs-panel .cs-head span{display:block;font-size:11px;opacity:.85;margin-top:3px;line-height:1.5}
.cs-panel .cs-close{border:0;background:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.cs-panel .cs-body{padding:14px 16px 16px}
.cs-panel .cs-greet{font-size:12px;color:var(--body,#595757);line-height:1.65;
  background:var(--soft,#f6f6f6);border-radius:8px;padding:11px 13px;margin-bottom:12px}
.cs-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;margin-bottom:8px;
  border:1px solid var(--line,#e5e5e5);border-radius:9px;background:#fff;cursor:pointer;
  text-align:left;transition:border-color .16s,background .16s}
.cs-item:hover{border-color:var(--red,#e70013);background:#fff7f7}
.cs-item .cs-ico{flex:0 0 34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:var(--soft,#f6f6f6);color:var(--red,#e70013)}
.cs-item .cs-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cs-item .cs-txt{flex:1;min-width:0}
.cs-item .cs-txt b{display:block;font-size:12.5px;color:var(--ink,#333);font-weight:700}
.cs-item .cs-txt span{display:block;font-size:11px;color:var(--body,#595757);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-item.cs-primary{background:var(--red,#e70013);border-color:var(--red,#e70013)}
.cs-item.cs-primary .cs-txt b,.cs-item.cs-primary .cs-txt span{color:#fff}
.cs-item.cs-primary .cs-ico{background:rgba(255,255,255,.18);color:#fff}
.cs-item.cs-primary:hover{background:var(--red-d,#c60011);border-color:var(--red-d,#c60011)}
.cs-panel .cs-note{font-size:10.5px;color:var(--body,#595757);line-height:1.6;margin-top:6px}

@media(max-width:1080px){
  .cs-rail{gap:6px}
  .cs-rail button{width:42px;height:42px;border-radius:11px}
  .cs-rail button svg{width:18px;height:18px}
  .cs-panel{left:64px;right:auto;width:300px}
}
@media(max-width:600px){
  .cs-rail{left:8px;gap:5px}
  .cs-rail button{width:38px;height:38px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.16)}
  .cs-rail button svg{width:17px;height:17px}
  .cs-panel{left:8px;right:8px;width:auto;max-width:none;top:auto;bottom:14px;
    transform:translateY(12px);max-height:70vh;overflow:auto}
  .cs-panel.on{transform:translateY(0)}
}
@media(max-height:520px){
  .cs-rail{gap:4px}
  .cs-rail button{width:34px;height:34px}
  .cs-rail button svg{width:15px;height:15px}
  .cs-sep{display:none}
}

/* 右下角「即时客服」按钮：本站自绘，直径/右边距与询盘圆钮完全一致（58px / right:24px），
   顶边落在 50% - 103px —— 即询盘圆钮（中线居中、上沿 50% - 29px）上方留 16px 间隙。 */
.cs-fab{position:fixed;right:24px;top:calc(50% - 103px);z-index:81;width:58px;height:58px;
  border:0;padding:0;border-radius:50%;background:#1a9e57;color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:background .18s,transform .18s}
.cs-fab:hover{background:#15884a;transform:translateY(-2px)}
.cs-fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1080px){ .cs-fab{right:12px} }
/* 桌面：在线客服钮（Tawk/Crisp 入口）收进右侧 56px 窄边栏，落在询盘红钮正上方。
   不能 display:none —— Tawk 自带气泡被 hideWidget() 藏掉后，这是桌面端唯一在线客服入口。 */
@media(min-width:1081px){
  .cs-fab{right:8px;top:auto;bottom:66px;transform:none;
    width:40px;height:40px;z-index:96}
  .cs-fab svg{width:19px;height:19px}
  .cs-fab:hover{transform:translateY(-1px)}
}

/* ===== 窄屏修正：悬浮条原来垂直居中钉在两侧，平板/手机上直接压住正文。
     改为：≤1080 隐藏整条左侧竖列（社交入口改由页脚 .foot-social 提供，
     chat.js 用同一份后台配置渲染），右侧只留客服钮和询盘钮，全部钉右下角。 ===== */
@media (max-width:1080px){
  .cs-rail{display:none}
  /* 在线客服钮放左下角，询盘圆钮（.fq-bubble）在右下角，两角对称互不遮挡；
     body 已有 96px 底部留白，页底滚到底时正文不会被任一圆钮盖住 */
  .cs-fab{top:auto;bottom:20px;transform:none;left:12px;right:auto}
  .cs-panel{left:12px;right:12px;width:auto;max-width:none;top:auto;bottom:88px;
    transform:translateY(10px)}
  .cs-panel.on{transform:translateY(0)}
}
/* 页脚社交行：全断点展示，链接与悬浮条同一份配置 */
.foot-social{display:flex;gap:10px;align-items:center;margin:0 0 18px}
.foot-social button{width:38px;height:38px;border:0;border-radius:10px;cursor:pointer;
  background:#fff;color:#3a3a3a;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.10);transition:color .18s,transform .18s}
.foot-social button svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot-social button:hover{color:var(--red,#e70013);transform:translateY(-1px)}

/* 桌面：询盘圆钮收进右侧窄边栏底部，不再压住中部内容与滑动箭头；
   展开后的询盘面板仍留在边栏左侧 80px 处。窄屏边栏隐藏后回归两底角。 */
@media(min-width:1081px){
  .fq{right:80px}
  .fq.collapsed{top:auto;bottom:18px;right:0;transform:none;width:56px;
    display:flex;justify-content:center;z-index:96}
  .fq.collapsed .fq-bubble{width:40px;height:40px;font-size:17px;margin:0;box-shadow:none}
  .fq-bubble{right:8px;top:auto;bottom:18px;transform:none;z-index:96;
    width:40px;height:40px;font-size:17px;box-shadow:none}
}