/* ============================================================
   在线客服挂件(访客端)样式 —— 与站点风格解耦,独立命名空间 imw-
   ============================================================ */
#imWidgetRoot{
  --imw-primary:#1e9fff;
  --imw-primary-dark:#0e86e8;
  --imw-bg:#fff;
  --imw-text:#333;
  --imw-sub:#999;
  --imw-radius:12px;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
}
#imWidgetRoot *{box-sizing:border-box;margin:0;padding:0}

/* ---------- 浮动按钮(左下角,仅无 [data-im-trigger] 时兜底显示) ---------- */
#imwBtn{
  position:fixed;left:20px;bottom:80px;z-index:9999;
  width:54px;height:54px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--imw-primary),var(--imw-primary-dark));
  color:#fff;font-size:26px;line-height:54px;text-align:center;
  box-shadow:0 6px 18px rgba(30,159,255,.45);
  transition:transform .15s,box-shadow .15s;
}
#imwBtn:hover{transform:scale(1.06)}
#imwBtn .imw-badge{
  position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;line-height:18px;
  padding:0 5px;border-radius:9px;background:#FF4D4F;color:#fff;
  font-size:11px;font-weight:700;box-shadow:0 0 0 2px #fff;
}

/* 复用站点右侧浮条的"客服"按钮作为开关 */
[data-im-trigger].imw-active{background:#1e9fff;color:#fff}
[data-im-trigger] .float-badge{position:absolute;top:-4px;right:-4px;z-index:5}

/* ---------- 聊天面板 ---------- */
#imwPanel{
  position:fixed;left:20px;bottom:144px;z-index:9999;
  width:340px;height:480px;max-height:calc(100vh - 170px);
  background:var(--imw-bg);border-radius:var(--imw-radius);
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #eee;
}
/* 复用浮条按钮时,面板锚定右下角(悬浮于浮条之上) */
#imWidgetRoot.imw-right #imwPanel{left:auto;right:20px;bottom:80px}
#imwPanel[hidden]{display:none}

#imwHead{
  background:linear-gradient(135deg,var(--imw-primary),var(--imw-primary-dark));
  color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px;flex:0 0 auto;
}
#imwTitle{font-size:15px;font-weight:700}
#imwStatus{font-size:12px;opacity:.95;display:flex;align-items:center;gap:4px}
#imwStatus .dot{width:8px;height:8px;border-radius:50%;background:#52c41a;display:inline-block}
#imwStatus.off .dot{background:#bbb}
#imwClose{margin-left:auto;border:none;background:transparent;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:2px 4px}

#imwMsgs{flex:1 1 auto;overflow-y:auto;padding:12px;background:#f6f8fa}
#imwMsgs .imw-msg{margin-bottom:10px;display:flex;flex-direction:column;max-width:82%}
#imwMsgs .imw-msg.mine{align-self:flex-end;align-items:flex-end}
#imwMsgs .imw-msg.theirs{align-self:flex-start;align-items:flex-start}
#imwMsgs .imw-bubble{
  padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.55;
  word-break:break-word;white-space:pre-wrap;
}
#imwMsgs .mine .imw-bubble{background:var(--imw-primary);color:#fff;border-bottom-right-radius:2px}
#imwMsgs .theirs .imw-bubble{background:#fff;color:var(--imw-text);border:1px solid #e8ecf0;border-bottom-left-radius:2px}
#imwMsgs .imw-time{font-size:10px;color:var(--imw-sub);margin-top:3px}
#imwMsgs .imw-sys{
  text-align:center;color:var(--imw-sub);font-size:12px;margin:8px 0;
}

#imwTip{
  flex:0 0 auto;padding:7px 14px;font-size:11px;color:var(--imw-sub);
  background:#fafbfc;border-top:1px solid #f0f0f0;display:flex;align-items:center;gap:6px;
}
#imwTip b{color:var(--imw-primary);font-weight:600}
#imwTip a{color:var(--imw-primary);cursor:pointer;text-decoration:none}

#imwForm{
  flex:0 0 auto;display:flex;gap:8px;padding:10px 12px;border-top:1px solid #f0f0f0;
}
#imwInput{
  flex:1;height:38px;padding:0 12px;border:1px solid #dde3e9;border-radius:8px;
  font-size:13px;outline:none;transition:border-color .15s;
}
#imwInput:focus{border-color:var(--imw-primary)}
#imwInput:disabled{background:#f5f5f5}
#imwSend{
  height:38px;padding:0 16px;border:none;border-radius:8px;cursor:pointer;
  background:var(--imw-primary);color:#fff;font-size:13px;font-weight:600;
}
#imwSend:hover{background:var(--imw-primary-dark)}
#imwSend:disabled{background:#ccc;cursor:not-allowed}

/* 拉黑提示条(注意:display:flex 会覆盖 hidden 属性,必须显式补 hidden 规则) */
#imwBlocked{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  color:#999;font-size:13px;padding:20px;text-align:center;
}
#imwBlocked[hidden]{display:none}

/* ---------- 移动端适配 ---------- */
@media(max-width:768px){
  #imwBtn{left:14px;bottom:14px;width:50px;height:50px;line-height:50px;font-size:24px}
  #imwPanel{left:12px;right:12px;bottom:76px;width:auto;height:62vh}
}