/**
 * 浮动客服样式 v6
 * 文件: Public/css/float-service.css
 */
.fs-widget{position:fixed;z-index:99998;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.fs-widget *{box-sizing:border-box;margin:0;padding:0}

/* 垂直居中，离边缘20px */
.fs-widget.fs-pos-right{right:20px;top:50%;transform:translateY(-50%)}
.fs-widget.fs-pos-left{left:20px;top:50%;transform:translateY(-50%)}

.fs-trigger-wrap{display:flex;justify-content:center}

.fs-trigger{
    width:56px;height:56px;border-radius:50%;border:none;outline:none;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.2);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
    position:relative;gap:6px;
}
.fs-trigger:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,0,0,.25)}
.fs-trigger:active{transform:scale(.95)}
.fs-trigger svg{width:26px;height:26px;fill:currentColor;pointer-events:none}
.fs-trigger .fs-close-icon{display:none}
.fs-trigger.open .fs-main-icon{display:none}
.fs-trigger.open .fs-close-icon{display:flex;align-items:center;justify-content:center}

.fs-trigger.fs-style-1{border-radius:50%}
.fs-trigger.fs-style-2{border-radius:14px}
.fs-trigger.fs-style-3{width:auto;border-radius:28px;padding:0 24px;font-size:14px;font-weight:600}
.fs-trigger.fs-style-4{border-radius:50%;flex-direction:column;width:auto;height:auto;padding:0;background:none!important;box-shadow:none!important}
.fs-trigger.fs-style-4 .fs-main-icon{display:flex;flex-direction:column;align-items:center;gap:5px}
.fs-trigger.fs-style-4 .fs-trigger-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fs-trigger.fs-style-4:hover .fs-trigger-circle{transform:scale(1.1)}
.fs-trigger.fs-style-4 .fs-trigger-label{font-size:10px;font-weight:700;letter-spacing:1.5px}
.fs-trigger.fs-style-4.open .fs-main-icon{display:none}
.fs-trigger.fs-style-4.open .fs-close-icon{display:flex;width:52px;height:52px;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.fs-trigger.fs-style-5{border-radius:50%}
.fs-trigger.fs-style-6{border-radius:50%;background:#fff!important;box-shadow:0 4px 20px rgba(0,0,0,.1)!important}

/* 面板 */
.fs-panel{
    position:absolute;width:300px;background:#fff;border-radius:20px;
    box-shadow:0 12px 48px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.06);
    opacity:0;visibility:hidden;
    transform:translateY(10px) scale(.92);
    transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),visibility .35s;
    overflow:hidden;
}
.fs-panel.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.fs-pos-right .fs-panel{bottom:auto;top:50%;right:calc(100% + 14px);transform:translateY(-50%) translateX(10px) scale(.92)}
.fs-pos-right .fs-panel.show{transform:translateY(-50%) translateX(0) scale(1)}
.fs-pos-left .fs-panel{bottom:auto;top:50%;left:calc(100% + 14px);transform:translateY(-50%) translateX(-10px) scale(.92)}
.fs-pos-left .fs-panel.show{transform:translateY(-50%) translateX(0) scale(1)}

/* 面板样式1 */
.fs-panel.ps-1 .fs-panel-head{padding:22px 24px 18px;color:#fff;font-size:17px;font-weight:700;line-height:1.3}
.fs-panel.ps-1 .fs-panel-head small{display:block;font-size:12px;font-weight:400;opacity:.8;margin-top:5px}
.fs-panel.ps-1 .fs-panel-body{padding:14px 18px 18px}

/* 面板样式2 */
.fs-panel.ps-2{background:rgba(255,255,255,.88)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.5)}
.fs-panel.ps-2 .fs-panel-head{padding:22px 24px 18px;color:#fff;font-size:17px;font-weight:700;line-height:1.3}
.fs-panel.ps-2 .fs-panel-head small{display:block;font-size:12px;font-weight:400;opacity:.85;margin-top:5px}
.fs-panel.ps-2 .fs-panel-body{padding:14px 18px 18px}

/* 面板样式3 */
.fs-panel.ps-3{background:#1a1a2e!important;border:1px solid rgba(255,255,255,.06)}
.fs-panel.ps-3 .fs-panel-head{padding:22px 24px 18px;color:#fff;font-size:17px;font-weight:700;background:transparent!important;border-bottom:1px solid rgba(255,255,255,.06)}
.fs-panel.ps-3 .fs-panel-head small{display:block;font-size:12px;font-weight:400;opacity:.5;margin-top:5px}
.fs-panel.ps-3 .fs-panel-body{padding:14px 18px 18px}
.fs-panel.ps-3 .fs-btn{box-shadow:0 2px 8px rgba(0,0,0,.3)}
.fs-panel.ps-3 .fs-wa-sub{background:rgba(255,255,255,.05)}
.fs-panel.ps-3 .fs-wa-sub a{color:#fff}
.fs-panel.ps-3 .fs-wa-sub .wa-name{color:#fff}
.fs-panel.ps-3 .fs-wa-sub a:hover{background:rgba(255,255,255,.08)}

/* 面板样式4 */
.fs-panel.ps-4{background:#fff!important;border:2px solid #eee;box-shadow:0 8px 32px rgba(0,0,0,.06)!important;border-radius:16px!important}
.fs-panel.ps-4 .fs-panel-head{padding:22px 24px 18px;font-size:17px;font-weight:700;background:#fff!important;color:#333!important;border-bottom:2px solid #f0f0f0}
.fs-panel.ps-4 .fs-panel-head small{display:block;font-size:12px;font-weight:400;color:#999;margin-top:5px}
.fs-panel.ps-4 .fs-panel-body{padding:14px 18px 18px}

/* 面板样式5 */
.fs-panel.ps-5{overflow:visible!important;border:none}
.fs-panel.ps-5::before{content:'';position:absolute;inset:-3px;border-radius:23px;background:linear-gradient(135deg,var(--fs-color,#25D366),#667eea,#764ba2);z-index:-1;opacity:.5;filter:blur(10px)}
.fs-panel.ps-5 .fs-panel-head{padding:22px 24px 18px;color:#fff;font-size:17px;font-weight:700}
.fs-panel.ps-5 .fs-panel-head small{display:block;font-size:12px;font-weight:400;opacity:.85;margin-top:5px}
.fs-panel.ps-5 .fs-panel-body{padding:14px 18px 18px}

/* 面板样式6 */
.fs-panel.ps-6{border-radius:28px!important;box-shadow:0 16px 48px rgba(0,0,0,.1)!important}
.fs-panel.ps-6 .fs-panel-head{padding:24px 24px 18px;color:#fff;font-size:17px;font-weight:700}
.fs-panel.ps-6 .fs-panel-head small{display:block;font-size:12px;font-weight:400;opacity:.85;margin-top:5px}
.fs-panel.ps-6 .fs-panel-body{padding:16px 20px 20px}
.fs-panel.ps-6 .fs-btn{border-radius:16px;padding:14px 18px;font-size:15px}

/* 按钮 */
.fs-btn{
    display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;
    border:none;border-radius:12px;cursor:pointer;font-size:14px;color:#fff;
    font-weight:600;text-decoration:none;margin-bottom:10px;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.fs-btn:last-child{margin-bottom:0}
.fs-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15);color:#fff;text-decoration:none}
.fs-btn:active{transform:translateY(0)}
.fs-btn svg{width:22px;height:22px;fill:#fff;flex-shrink:0}
.fs-btn-inquiry{background:linear-gradient(135deg,#FF6B35,#F7522E)}
.fs-btn-whatsapp{background:linear-gradient(135deg,#25D366,#128C7E)}
.fs-btn-email{background:linear-gradient(135deg,#4A90D9,#357ABD)}

/* WA下拉 */
.fs-wa-sub{display:none;padding:6px 0;margin-top:-4px;margin-bottom:10px;background:rgba(37,211,102,.05);border-radius:10px}
.fs-wa-sub.show{display:block}
.fs-wa-sub a{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;color:#333;text-decoration:none;transition:background .15s}
.fs-wa-sub a:hover{background:rgba(37,211,102,.1)}
.fs-wa-sub .wa-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #25D366;background:#f0f0f0}
.fs-wa-sub .wa-av img{width:100%;height:100%;object-fit:cover;display:block}
.fs-wa-sub .wa-av svg{width:32px;height:32px;display:block}
.fs-wa-sub .wa-info{flex:1;min-width:0}
.fs-wa-sub .wa-name{font-size:13px;font-weight:600;color:#333}
.fs-wa-sub .wa-status{font-size:10px;color:#25D366}
.fs-wa-sub .wa-arrow svg{width:16px;height:16px;fill:#999}

/* 脉冲 */
@keyframes fs-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.fs-trigger.pulse{animation:fs-pulse 2s infinite}
.fs-trigger.fs-style-4.pulse{animation:none}
.fs-trigger.fs-style-4.pulse .fs-trigger-circle{animation:fs-pulse 2s infinite}
.fs-trigger.open{animation:none}
.fs-trigger.fs-style-4.open .fs-trigger-circle{animation:none}
@keyframes fs-glow{0%{box-shadow:0 0 0 0 var(--fs-glow-color,rgba(37,211,102,.5))}70%{box-shadow:0 0 0 18px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fs-trigger.fs-style-5.pulse{animation:fs-glow 2s infinite}

/* 手机端也垂直居中，不变 */
@media(max-width:768px){
    .fs-widget.fs-pos-right{right:16px}
    .fs-widget.fs-pos-left{left:16px}
    .fs-panel{width:calc(100vw - 100px)!important;max-width:300px}
}