/* ============================================================
   V2.9.1 全站浮动「联络咨询」—— 实时双向聊天
   ============================================================ */

/* ---------- 浮动按钮 ---------- */
.fchat{
  position:fixed;right:18px;bottom:84px;z-index:380;
  display:flex;flex-direction:column;gap:10px;
}
.fchat-btn{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(150deg,#00C870,#009040);
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,144,64,.36),0 2px 6px rgba(0,0,0,.10);
  cursor:pointer;border:0;position:relative;
  transition:transform .18s,box-shadow .18s;
}
.fchat-btn:hover{transform:scale(1.06);box-shadow:0 12px 28px rgba(0,144,64,.44),0 2px 6px rgba(0,0,0,.12);}
.fchat-btn svg{width:25px;height:25px;}
.fchat-btn .fchat-badge{
  position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;
  background:#E63946;color:#fff;font-size:11px;font-weight:800;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;line-height:1;
}
.fchat-btn .fchat-tip{
  position:absolute;right:66px;top:50%;transform:translateY(-50%);
  background:rgba(13,26,19,.92);color:#fff;font-size:13px;padding:6px 12px;
  border-radius:8px;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;
  pointer-events:none;
}
.fchat-btn .fchat-tip::after{
  content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:rgba(13,26,19,.92);
}
.fchat-btn:hover .fchat-tip{opacity:1;visibility:visible;}
.fchat-pulse::before{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  background:rgba(0,200,112,.45);
  animation:fchat-pulse 2.2s infinite;z-index:-1;
}
@keyframes fchat-pulse{
  0%{transform:scale(.85);opacity:.9;}
  70%{transform:scale(1.55);opacity:0;}
  100%{transform:scale(1.55);opacity:0;}
}

/* ---------- 面板 ---------- */
.fchat-panel{
  position:fixed;right:18px;bottom:150px;z-index:390;
  width:352px;max-width:calc(100vw - 28px);
  max-height:calc(100vh - 190px);
  background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.20),0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.05);
  display:none;flex-direction:column;overflow:hidden;
}
.fchat-panel.open{display:flex;animation:fchat-fadein .22s ease;}
@keyframes fchat-fadein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.fchat-head{
  background:linear-gradient(150deg,#009040,#00C870);color:#fff;
  padding:15px 18px 13px;position:relative;flex-shrink:0;
}
.fchat-head .ft{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;}
.fchat-head .ft .ldot{
  width:8px;height:8px;background:#7BFF9D;border-radius:50%;
  box-shadow:0 0 0 3px rgba(123,255,157,.32);
  animation:fchat-blink 2s infinite;
}
@keyframes fchat-blink{0%,100%{opacity:1;}50%{opacity:.55;}}
.fchat-head .fb{font-size:11.5px;opacity:.92;margin-top:5px;line-height:1.6;}
.fchat-close{
  position:absolute;top:11px;right:12px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;line-height:1;
}
.fchat-close:hover{background:rgba(255,255,255,.32);}

/* ---------- 快捷通道 ---------- */
.fchat-quick{
  display:flex;gap:7px;padding:9px 12px;background:#F7FAF8;
  border-bottom:1px solid #EBF0ED;flex-shrink:0;
}
.fchat-quick .fq{
  flex:1;display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:11.5px;font-weight:700;text-decoration:none;font-family:inherit;
  padding:7px 5px;border-radius:9px;border:1px solid #E1EAE4;background:#fff;
  transition:all .15s;cursor:pointer;
}
.fchat-quick .fq.wx{color:#07C160;}
.fchat-quick .fq.sale{color:#009040;}
.fchat-quick .fq.tel{color:#009040;}
.fchat-quick .fq.mail{color:#1E6FB8;flex:0 0 auto;}
.fchat-quick .fq:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.07);border-color:#CFE0D6;}

/* 企业微信二维码弹层（只展示二维码） */
.fchat-qr{
  position:absolute;inset:0;z-index:9;background:rgba(10,22,17,.62);
  backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:18px;
}
.fchat-qr.open{display:flex;animation:fchat-fadein .18s ease;}
.fchat-qr .qr-card{
  background:#fff;border-radius:16px;padding:20px 20px 16px;text-align:center;
  width:100%;max-width:290px;box-shadow:0 20px 50px rgba(0,0,0,.28);position:relative;
}
.fchat-qr .qr-card img{
  width:100%;max-width:230px;height:auto;display:block;margin:0 auto 12px;
  border-radius:8px;border:1px solid #EBF0ED;
}
.fchat-qr .qr-card b{display:block;font-size:14px;font-weight:800;color:#1a2b22;}
.fchat-qr .qr-card span{display:block;font-size:11.5px;color:#8FA096;margin-top:4px;}
.fchat-qr .qr-close{
  position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;
  border:0;background:rgba(0,0,0,.06);color:#5c6b63;font-size:17px;line-height:1;cursor:pointer;
}
.fchat-qr .qr-close:hover{background:#009040;color:#fff;}

/* ---------- 消息区 ---------- */
.fchat-thread{
  flex:1;min-height:150px;max-height:290px;overflow-y:auto;
  padding:14px 14px 6px;background:#F4F7F5;
  display:flex;flex-direction:column;gap:10px;
}
.fchat-thread::-webkit-scrollbar{width:6px;}
.fchat-thread::-webkit-scrollbar-thumb{background:#CFDCD5;border-radius:99px;}

.fmsg{display:flex;flex-direction:column;max-width:88%;}
.fmsg.in{animation:fmsg-in .26s ease;}
@keyframes fmsg-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.fmsg .fb{
  padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.65;
  word-break:break-word;white-space:normal;
}
.fmsg .ft{font-size:10.5px;color:#93A29A;margin-top:4px;padding:0 4px;}
.fmsg.agent{align-self:flex-start;}
.fmsg.agent .fb{background:#fff;color:#22312A;border:1px solid #E6EDE9;border-bottom-left-radius:4px;}
.fmsg.agent .ft{text-align:left;}
.fmsg.me{align-self:flex-end;align-items:flex-end;}
.fmsg.me .fb{background:linear-gradient(150deg,#00C870,#009040);color:#fff;border-bottom-right-radius:4px;}
.fmsg.me .ft{text-align:right;}

/* ---------- 身份信息 ---------- */
.fchat-meta{
  padding:9px 12px 0;background:#fff;display:flex;gap:7px;flex-shrink:0;
}
.fchat-meta input{
  flex:1;min-width:0;padding:8px 11px;border:1px solid #E1EAE4;border-radius:9px;
  font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;
}
.fchat-meta input:focus{border-color:#009040;}

/* ---------- 输入区 ---------- */
.fchat-inputbar{
  display:flex;gap:8px;padding:9px 12px 10px;background:#fff;align-items:flex-end;flex-shrink:0;
}
.fchat-inputbar textarea{
  flex:1;min-width:0;padding:9px 12px;border:1px solid #E1EAE4;border-radius:11px;
  font-size:13.5px;font-family:inherit;line-height:1.6;resize:none;outline:none;
  transition:border-color .15s;max-height:96px;
}
.fchat-inputbar textarea:focus{border-color:#009040;}
.fchat-send{
  width:40px;height:40px;flex-shrink:0;border:0;border-radius:11px;
  background:linear-gradient(150deg,#00C870,#009040);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.fchat-send:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,144,64,.32);}
.fchat-send:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;}

.fchat-foot{
  padding:8px 16px 11px;background:#fff;border-top:1px solid #F0F4F2;text-align:center;
}
.fchat-foot small{font-size:10.5px;color:#9AA8A0;}

/* ---------- 移动端 ---------- */
@media(max-width:520px){
  .fchat{right:12px;bottom:74px;}
  .fchat-btn{width:50px;height:50px;}
  .fchat-panel{
    right:8px;left:8px;bottom:132px;width:auto;
    max-height:calc(100vh - 160px);
  }
  .fchat-btn .fchat-tip{display:none;}
}