/*
   cs_widget.php 在线客服组件样式（2026-08-30 抽出）
   来源：/www/wwwroot/website/includes/cs_widget.php 的原 <style> 块
   ⚠️ 改了本文件必须把引用处的 ?v= 版本号 +1。全站每个页面都会加载，改动要小心。
*/

.cs-widget{position:fixed;right:20px;bottom:80px;z-index:9999;font-family:inherit;}
.cs-btn{width:56px;height:56px;background:linear-gradient(135deg,#F5A623,#e8941a);color:#1a1a1a;
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:24px;box-shadow:0 4px 16px rgba(245,166,35,0.45);transition:all .25s;position:relative;border:none;outline:none;}
.cs-btn:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(245,166,35,0.6);}
.cs-btn::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(245,166,35,0.3);animation:csRipple 2s ease-out infinite;}
@keyframes csRipple{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}
/* 面板 */
.cs-panel{display:none;position:absolute;right:66px;bottom:0;background:#fff;
  border:1px solid #e8e8e8;border-radius:12px;width:290px;box-shadow:0 8px 30px rgba(0,0,0,.12);}
.cs-panel.show{display:block;}
.cs-ph{padding:14px 16px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:8px;}
.cs-ph .dot{width:8px;height:8px;border-radius:50%;background:#F5A623;flex-shrink:0;}
.cs-ph .tt{font-size:14px;font-weight:700;color:#E65100;flex:1;}
.cs-ph .st{font-size:10px;color:#F5A623;}
.cs-close{background:none;border:none;font-size:18px;color:#999;cursor:pointer;padding:0;line-height:1;}
/* 联系人列表 */
.cs-body{padding:10px 12px;}
.cs-item{display:flex;align-items:center;gap:10px;color:#333;text-decoration:none;
  padding:8px 10px;font-size:12px;border-radius:8px;margin-bottom:2px;transition:all .15s;cursor:pointer;}
.cs-item:hover{background:#fff8e1;color:#E65100;}
.cs-item .ico{font-size:16px;width:22px;text-align:center;flex-shrink:0;}
.cs-item .lb{flex:1;font-weight:500;}
.cs-item .vl{color:#999;font-size:10px;}
/* 发送消息按钮 */
.cs-chat-btn{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:6px;padding:10px;background:linear-gradient(135deg,#F5A623,#e8941a);
  color:#1a1a1a;border:none;border-radius:8px;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .15s;width:100%;}
.cs-chat-btn:hover{background:linear-gradient(135deg,#e8941a,#d48510);}
/* 对话表单 */
.cs-chat{display:none;padding:12px 14px;}
.cs-chat.show{display:block;}
.cs-chat input,.cs-chat textarea{width:100%;padding:8px 10px;border:1.5px solid #ddd;
  border-radius:6px;font-size:12px;box-sizing:border-box;margin-bottom:8px;outline:none;transition:border .2s;}
.cs-chat input:focus,.cs-chat textarea:focus{border-color:#F5A623;}
.cs-chat textarea{resize:none;height:70px;}
.cs-chat .cs-send{width:100%;padding:9px;background:#F5A623;color:#000;border:none;
  border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s;}
.cs-chat .cs-send:hover{background:#e69500;}
.cs-chat .cs-back{text-align:center;margin-top:6px;}
.cs-chat .cs-back a{color:#888;font-size:11px;cursor:pointer;text-decoration:none;}
.cs-chat .cs-back a:hover{color:#F5A623;}
.cs-ok{display:none;text-align:center;padding:16px;color:#2e7d32;font-size:13px;font-weight:600;}
.cs-err{display:none;text-align:center;padding:8px;color:#c62828;font-size:11px;}
@media(max-width:768px){.cs-widget{right:12px;bottom:70px}.cs-panel{right:56px;width:280px;padding:0}}