/* 福码 · AI 客服浮窗样式 —— 由 cs-widget.html 拆出，请勿单独手改 */
/* ---------- 浮窗按钮 ----------
配色跟主站主色一致（正红 #e63946）；
touch-action:none 是为了让手指拖动时不触发页面滚动。 */
#csBtn{ position:fixed; right:16px; bottom:76px; z-index:9000; width:54px; height:54px; border-radius:50%;
border:none; cursor:grab; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#f0535f,#e63946 55%,#c62839); color:#fff;
box-shadow:0 6px 20px -6px rgba(230,57,70,.55); transition:box-shadow .18s;
touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
/* 拖动中不要 hover 动效，否则手指按住时按钮会跳 */
#csBtn:hover{ box-shadow:0 10px 26px -8px rgba(230,57,70,.6); }
#csBtn:not(.dragging):hover{ transform:translateY(-2px); }
#csBtn:not(.dragging):active{ transform:scale(.96); }
#csBtn.dragging{ cursor:grabbing; transform:scale(1.08); box-shadow:0 14px 30px -6px rgba(230,57,70,.7); }
#csBtn svg{ width:26px; height:26px; fill:#fff; pointer-events:none; }
#csBtn .cs-dot{ position:absolute; top:2px; right:2px; width:10px; height:10px; border-radius:50%;
background:#f5a623; border:2px solid #fff; pointer-events:none; }
#csBtn .cs-dot.hide{ display:none; }
/* 拖动时贴着按钮的小标签，告诉客户「松手就放这儿」 */
#csBtn .cs-tip{ position:absolute; right:60px; top:50%; transform:translateY(-50%);
white-space:nowrap; background:rgba(51,51,51,.9); color:#fff; font-size:11.5px;
padding:5px 9px; border-radius:8px; opacity:0; transition:opacity .15s; pointer-events:none; }
#csBtn.dragging .cs-tip{ opacity:1; }
/* 拖到屏幕下半部分时，把标签放左边；上半部分放右边，避免被屏幕边缘切掉 */
#csBtn.tip-left .cs-tip{ right:auto; left:60px; }
/* 第一次打开时的操作说明气泡 */
#csIntro{ position:fixed; right:82px; bottom:88px; z-index:9002;
max-width:min(232px, calc(100vw - 110px)); background:#fff; color:#333;
font-size:12.5px; line-height:1.7; padding:11px 13px; border-radius:12px;
border:1px solid #eee; box-shadow:0 8px 26px -8px rgba(16,17,20,.22);
transition:opacity .2s, transform .2s; }
#csIntro.hide{ opacity:0; transform:translateY(6px); pointer-events:none; }
#csIntro b{ color:#e63946; }
#csIntro .cs-intro-x{ position:absolute; top:5px; right:8px; font-size:16px; line-height:1;
color:#bbb; cursor:pointer; background:none; border:none; padding:2px; }
#csIntro .cs-intro-x:hover{ color:#888; }
/* ---------- 面板 ---------- */
#csPanel{ position:fixed; right:16px; bottom:76px; z-index:9001; width:min(360px, calc(100vw - 32px));
height:min(520px, calc(100vh - 120px)); background:#fff; border-radius:16px; overflow:hidden;
display:none; flex-direction:column; border:1px solid rgba(0,0,0,.1);
box-shadow:0 24px 60px -20px rgba(16,18,24,.35); }
#csPanel.on{ display:flex; animation:csIn .22s cubic-bezier(.22,.9,.3,1); }
@keyframes csIn{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
/* 头部 */
.cs-head{ flex:none; display:flex; align-items:center; gap:10px; padding:13px 14px;
background:linear-gradient(135deg,#f0535f,#e63946 60%,#c62839); color:#fff; }
.cs-head .mk{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
background:rgba(255,255,255,.2); font-size:15px; font-weight:700; font-family:"Songti SC","STSong",serif; }
.cs-head .tt{ font-size:14px; font-weight:700; letter-spacing:.02em; }
.cs-head .st{ font-size:11px; opacity:.85; margin-top:1px; }
.cs-head .x{ margin-left:auto; background:none; border:none; color:#fff; font-size:22px; line-height:1;
cursor:pointer; opacity:.85; padding:0 2px; }
.cs-head .x:hover{ opacity:1; }
/* 消息区 */
.cs-body{ flex:1; overflow-y:auto; padding:14px 12px 6px; background:#F7F7F8; -webkit-overflow-scrolling:touch; }
.cs-body::-webkit-scrollbar{ width:6px; }
.cs-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.14); border-radius:3px; }
.cs-msg{ display:flex; gap:8px; margin-bottom:12px; align-items:flex-start; }
.cs-msg.me{ flex-direction:row-reverse; }
.cs-av{ width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center;
font-size:13px; font-weight:700; font-family:"Songti SC","STSong",serif;
background:linear-gradient(135deg,#f0535f,#e63946); color:#fff; }
.cs-msg.me .cs-av{ background:#E8E9EC; color:#4A4A52; }
.cs-bub{ max-width:78%; padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.75;
background:#fff; border:1px solid rgba(0,0,0,.08); color:#17181C; white-space:pre-wrap; word-break:break-word; }
.cs-msg.me .cs-bub{ background:linear-gradient(135deg,#f0535f,#e63946); color:#fff; border-color:transparent; }
.cs-bub b{ color:#e63946; }
.cs-msg.me .cs-bub b{ color:#fff; }
.cs-bub .cs-k{ display:inline-block; padding:1px 7px; border-radius:100px; font-size:11px;
background:rgba(230,57,70,.08); color:#c62839; margin:2px 4px 2px 0; }
.cs-bub .cs-ok{ color:#2bb673; font-weight:700; }
.cs-bub .cs-wait{ color:#e63946; font-weight:700; }
/* 快捷问题 */
.cs-quick{ display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; background:#F7F7F8; }
.cs-quick button{ padding:6px 11px; border-radius:100px; font-size:12px; cursor:pointer;
border:1px solid rgba(0,0,0,.1); background:#fff; color:#6C6E76; transition:.15s; }
.cs-quick button:hover{ border-color:#e63946; color:#c62839; background:rgba(230,57,70,.05); }
/* 输入区 */
.cs-foot{ flex:none; display:flex; gap:8px; padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
background:#fff; border-top:1px solid rgba(0,0,0,.08); }
.cs-foot input{ flex:1; border:1px solid rgba(0,0,0,.12); border-radius:100px; padding:10px 14px;
font-size:13px; outline:none; background:#fff; color:#17181C; }
.cs-foot input:focus{ border-color:#e63946; }
.cs-foot button{ flex:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
background:linear-gradient(135deg,#f0535f,#e63946); color:#fff; display:grid; place-items:center; }
.cs-foot button:disabled{ opacity:.45; cursor:default; }
.cs-foot button svg{ width:18px; height:18px; fill:#fff; }
/* 打字中 */
.cs-typing span{ display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:50%;
background:#e63946; opacity:.5; animation:csT 1.2s infinite; }
/* ==========================================================================
订单卡片（客户和客服都能一眼看到金额/时间/状态）
--------------------------------------------------------------------------
客户诉求：下单后给个单号，客服能直接查，不用客户反复翻订单信息。
卡片挂在【客户自己那条消息】下面，紧挨着他说的话，一眼对应得上。
========================================================================== */
.cs-ocard{ margin-top:8px; padding:9px 11px; border-radius:10px; background:#fff;
border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 2px rgba(16,17,20,.04); }
/* 客户自己的气泡是红底，卡片要跳出来才看得清 */
.cs-msg.me .cs-ocard{ background:#fff; color:#333; }
.cs-ocard-top{ display:flex; align-items:center; gap:8px; }
.cs-ocard-no{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px;
color:#555; letter-spacing:.2px; word-break:break-all; }
.cs-ocard-st{ flex:none; margin-left:auto; font-size:11px; font-weight:700;
padding:1px 7px; border-radius:100px; }
.cs-ocard-st.ok{ background:rgba(43,182,115,.12); color:#1f8f57; }
.cs-ocard-st.wait{ background:rgba(245,166,35,.14); color:#c8860f; }
.cs-ocard-st.bad{ background:rgba(230,57,70,.1); color:#c62839; }
.cs-ocard-title{ font-size:12.5px; color:#333; margin-top:5px; line-height:1.5; }
.cs-ocard-meta{ display:flex; gap:12px; margin-top:4px; font-size:11.5px; color:#999; }
/* 客户消息在右侧，卡片跟着窄一点，别把气泡拉太长 */
.cs-msg.me .cs-ocard{ max-width:230px; }
/* 我的订单：点「订单」展开，选一单直接发出去 */
.cs-orders{ display:none; flex:none; max-height:230px; overflow-y:auto;
background:#f5f5f7; border-top:1px solid rgba(0,0,0,.06); }
.cs-orders.on{ display:block; }
.cs-oload{ padding:14px 13px; font-size:12.5px; color:#999; line-height:1.7; }
.cs-oitem{ display:block; width:100%; text-align:left; border:none; background:#fff;
padding:10px 13px; border-bottom:1px solid rgba(0,0,0,.05); cursor:pointer; position:relative; }
.cs-oitem:hover{ background:#fdf6f6; }
.cs-oitem-no{ display:block; font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:11.5px; color:#555; word-break:break-all; padding-right:56px; }
.cs-oitem-sub{ display:block; font-size:12px; color:#333; margin-top:3px; padding-right:56px; }
.cs-oitem-st{ position:absolute; right:13px; top:50%; transform:translateY(-50%);
font-size:11px; font-weight:700; padding:2px 8px; border-radius:100px; }
.cs-oitem-st.ok{ background:rgba(43,182,115,.12); color:#1f8f57; }
.cs-oitem-st.wait{ background:rgba(245,166,35,.14); color:#c8860f; }
/* 输入区左边的「订单」按钮 */
.cs-foot .cs-o{ flex:none; height:42px; padding:0 11px; border-radius:100px; border:1px solid rgba(0,0,0,.1);
background:#fff; color:#666; font-size:12px; display:flex; align-items:center; gap:4px; cursor:pointer; }
.cs-foot .cs-o:hover{ border-color:#e63946; color:#c62839; background:rgba(230,57,70,.04); }
.cs-foot .cs-o svg{ width:15px; height:15px; fill:currentColor; }
.cs-typing span:nth-child(2){ animation-delay:.15s }
.cs-typing span:nth-child(3){ animation-delay:.3s }
@keyframes csT{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:1 } }
@media (max-width:420px){
#csBtn{ right:12px; bottom:70px; width:50px; height:50px; }
}
/* ==========================================================================
手机端：把聊天做成【全屏独立子页】，不再是小浮层盖在主页上
--------------------------------------------------------------------------
为什么改：浮层盖在内容上会挡住正文、显廉价；而且手机上小面板打字很容易误触。
现在手机上点客服图标 = 进入一个整屏的聊天页（有自己的头部和返回键），
电脑端仍然是右下角的小浮层（那个尺寸下浮层更合适）。
顶部留 env(safe-area-inset-top)，适配刘海屏；底部同样留出安全区。
========================================================================== */
@media (max-width:420px){
/* 全屏：从屏幕最顶到最底，圆角和浮层阴影都去掉 —— 它现在是一个页面 */
#csPanel{
left:0; right:0; top:0; bottom:0 !important;
width:auto; height:auto; max-height:none;
border-radius:0; border:none; box-shadow:none;
animation:csPageIn .24s cubic-bezier(.22,.9,.3,1);
}
@keyframes csPageIn{ from{ opacity:0; transform:translateX(14px) } to{ opacity:1; transform:none } }
/* 头部：白底 + 细分割线，比整块红色更耐看、也更像正经产品 */
.cs-head{
flex:none; display:flex; align-items:center; gap:10px;
padding:calc(11px + env(safe-area-inset-top,0px)) 14px 11px;
background:#fff; color:#333; border-bottom:1px solid #eee;
}
.cs-head .mk{ width:34px; height:34px; border-radius:50%; font-size:15px;
background:linear-gradient(135deg,#f0535f,#e63946); color:#fff; }
.cs-head .tt{ font-size:15px; font-weight:700; color:#333; letter-spacing:0; }
.cs-head .st{ font-size:11.5px; color:#999; margin-top:1px; }
/* 返回键：手机上「×」不直观，换成返回箭头，而且它真的会退回上一页
★ 点击区必须是 44×44（手指点击标准）—— 原来是 30×30，手机上很难点中，
可视化自检（visual-check.html）会把它标成失败项。图标本身还是 9px，
只是把可点范围放大，视觉上没有变化。 */
.cs-head .x{ margin-left:0; order:-1; font-size:0; width:44px; height:44px;
display:grid; place-items:center; color:#333; opacity:1;
-webkit-tap-highlight-color:transparent; }
.cs-head .x::before{
content:''; width:9px; height:9px;
border-left:2px solid #333; border-bottom:2px solid #333;
transform:rotate(45deg); margin-left:3px; border-radius:1px;
}
.cs-head .x:hover{ opacity:.6; }
/* 消息区：留白更大、气泡更好读 */
.cs-body{ padding:16px 14px 8px; background:#f5f5f7; }
#csPanel.on .cs-msg{ animation:csMsgIn .2s ease-out; }
@keyframes csMsgIn{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
.cs-av{ width:32px; height:32px; border-radius:10px; font-size:14px; }
.cs-bub{ max-width:80%; padding:11px 14px; border-radius:15px; font-size:14.5px; line-height:1.78;
border:none; box-shadow:0 1px 2px rgba(16,17,20,.05); }
.cs-msg.me .cs-bub{ background:linear-gradient(135deg,#f0535f,#e63946); }
.cs-msg{ gap:9px; margin-bottom:14px; }
/* 快捷问题：横向滚动，不占两行高度 */
.cs-quick{ flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:0 14px 11px;
background:#f5f5f7; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.cs-quick::-webkit-scrollbar{ display:none }
.cs-quick button{ flex:none; padding:8px 14px; font-size:13px; border:none;
background:#fff; color:#555; box-shadow:0 1px 2px rgba(16,17,20,.06); }
/* 输入区：大一点好点，发送键够手指按 */
.cs-foot{ gap:9px; padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
border-top:1px solid #eee; box-shadow:0 -1px 3px rgba(16,17,20,.03); }
.cs-foot input{ font-size:15px; padding:12px 16px; background:#f5f5f7; border-color:transparent; }
.cs-foot input:focus{ background:#fff; border-color:#e63946; }
.cs-foot button{ width:46px; height:46px; box-shadow:0 2px 8px -2px rgba(230,57,70,.5); }
.cs-foot button svg{ width:19px; height:19px; }
/* 状态条也跟着做大一点，手机上才看得清 */
.cs-human{ padding:9px 14px; font-size:12.5px;
background:rgba(230,57,70,.07); color:#b3252f; border-bottom:1px solid rgba(230,57,70,.14); }
.cs-staff-typing{ padding:9px 14px; font-size:12.5px; background:#fff; border-bottom:1px solid #f0f0f2; }
/* 聊天页打开时把圆球收掉，别压在输入框旁边 */
body.cs-chat-open #csBtn,
body.cs-chat-open #csIntro{ display:none !important; }
}
/* 说明气泡在手机上改为顶部提示条，不再从按钮旁边伸出来 */
@media (max-width:420px){
#csIntro{ left:12px !important; right:12px !important; top:12px; bottom:auto !important; max-width:none; }
}
/* 人工接管提示条 */
.cs-human{ flex:none; display:none; align-items:center; gap:7px; padding:8px 13px; font-size:11.5px;
background:linear-gradient(90deg,rgba(180,72,60,.1),rgba(169,138,75,.1)); color:#8A4A40; border-bottom:1px solid rgba(180,72,60,.16) }
.cs-human.on{ display:flex }
.cs-human i{ width:6px; height:6px; border-radius:50%; background:#e63946; animation:csHu 1.4s infinite; flex:none }
@keyframes csHu{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
/* 客服正在输入（让客户知道对面有人在，别干等）
注意：类名/ID 都不要用 csTyping / .cs-typing ——
聊天区里「机器人正在回复」的气泡已经占了那个名字（见 addTyping），重名会互相删掉 */
.cs-staff-typing{ flex:none; display:none; align-items:center; gap:6px; padding:7px 13px; font-size:11.5px;
color:#5A6070; background:#F7F8FA; border-bottom:1px solid #ECEEF2 }
.cs-staff-typing.on{ display:flex }
.cs-staff-typing .d{ display:inline-flex; gap:3px }
.cs-staff-typing .d i{ width:5px; height:5px; border-radius:50%; background:#9AA0AD; animation:csTyp 1.2s infinite }
.cs-staff-typing .d i:nth-child(2){ animation-delay:.18s }
.cs-staff-typing .d i:nth-child(3){ animation-delay:.36s }
@keyframes csTyp{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-2px) } }