/* 水一方智能客服挂件 —— 全部类名加 lagoai- 前缀，避免与站点样式冲突 */
.lagoai-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 99990;
  width: 56px; height: 56px; border-radius: 50%;
  background: #ff6700; color: #fff; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; transition: transform .18s;
}
.lagoai-btn:hover { transform: scale(1.06); }
.lagoai-btn .lagoai-dot {
  position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #ff3b30; border: 2px solid #fff; display: none;
}
.lagoai-btn.lagoai-new .lagoai-dot { display: block; }

.lagoai-panel {
  position: fixed; right: 18px; bottom: 84px; z-index: 99991;
  width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: none; flex-direction: column; font-size: 14px; color: #222;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.lagoai-panel.lagoai-open { display: flex; }

.lagoai-head {
  background: #ff6700; color: #fff; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; flex: none;
}
.lagoai-head b { font-size: 15px; font-weight: 600; }
.lagoai-head span { font-size: 12px; opacity: .85; display: block; margin-top: 2px; }
.lagoai-close {
  background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
  line-height: 1; padding: 0 4px;
}

.lagoai-body {
  flex: 1; overflow-y: auto; padding: 12px; background: #f6f7f9;
  -webkit-overflow-scrolling: touch;
}
.lagoai-msg { margin-bottom: 10px; display: flex; }
.lagoai-msg.lagoai-me { justify-content: flex-end; }
.lagoai-bubble {
  max-width: 78%; padding: 9px 12px; border-radius: 10px; line-height: 1.6;
  word-break: break-word; white-space: pre-wrap;
}
.lagoai-msg.lagoai-ai .lagoai-bubble { background: #fff; border: 1px solid #ececec; }
.lagoai-msg.lagoai-me .lagoai-bubble { background: #ff6700; color: #fff; }

.lagoai-card {
  background: #fff; border: 1px solid #ececec; border-radius: 8px;
  padding: 8px; margin-top: 8px; display: flex; gap: 8px; text-decoration: none; color: #222;
}
.lagoai-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.lagoai-card .lagoai-cn { min-width: 0; }
.lagoai-card .lagoai-ct {
  font-size: 13px; line-height: 1.4; max-height: 38px; overflow: hidden;
}
.lagoai-card .lagoai-cp { color: #ff6700; font-weight: 600; margin-top: 4px; font-size: 13px; }

.lagoai-refs { margin-top: 8px; font-size: 12px; }
.lagoai-refs a { color: #ff6700; text-decoration: none; margin-right: 10px; }

/* 合集卡片：一个专题入口，比零散链接成体系 */
/* white-space 必须重置：气泡基类是 pre-wrap，会让卡片内部的结构化标签之间
   的换行/缩进变成可见空行（列表上方出现一大块空白）。 */
.lagoai-coll { margin-top: 8px; padding: 10px 12px; background: #f7fbff; border: 1px solid #e2eefb; border-radius: 10px; white-space: normal; }
.lagoai-coll-h { display: flex; align-items: center; margin-bottom: 8px; }
.lagoai-coll-cover { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; margin-right: 10px; flex: 0 0 auto; }
.lagoai-coll-meta { min-width: 0; }
.lagoai-coll-name { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.3; }
.lagoai-coll-desc { font-size: 12px; color: #7a8798; margin-top: 2px; line-height: 1.4; }
.lagoai-coll-list { border-top: 1px dashed #e2eefb; padding-top: 6px; }
.lagoai-coll-item { display: flex; align-items: flex-start; padding: 5px 0; text-decoration: none; color: #2b3a4a; font-size: 13px; line-height: 1.45; }
.lagoai-coll-item:hover .lagoai-coll-tt { color: #ff6700; }
.lagoai-coll-idx { flex: 0 0 15px; color: #a8b6c6; font-size: 11px; line-height: 1.7; }
.lagoai-coll-tt { flex: 1; min-width: 0; }
.lagoai-coll-more { display: inline-block; margin-top: 6px; font-size: 12px; color: #0d7fd8; text-decoration: none; }

/* 图解：动作类问题「讲十遍不如一张图」。
   书稿插图为 1.57:1 横幅（1200×764），所以卡片按比例缩，不裁切。 */
.lagoai-figs { margin-top: 8px; }
.lagoai-figs-t { font-size: 12px; color: #888; margin-bottom: 6px; }
.lagoai-fig { margin-bottom: 10px; }
.lagoai-fig:last-child { margin-bottom: 0; }
.lagoai-fig a { display: block; text-decoration: none; }
.lagoai-fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid #ececec; border-radius: 8px; background: #f7faff;
}
.lagoai-fig-c {
  font-size: 12px; line-height: 1.5; color: #666;
  margin-top: 5px; padding-left: 2px;
}

.lagoai-chips { flex: none; padding: 8px 12px 0; background: #f6f7f9; }
.lagoai-chips button {
  display: inline-block; margin: 0 6px 6px 0; padding: 5px 10px; font-size: 12px;
  background: #fff; border: 1px solid #ffd0a8; color: #ff6700; border-radius: 14px; cursor: pointer;
}
.lagoai-chips button:hover { background: #fff5ee; }

/* 热线行：机器人万一没答上，这条永远在，客户随时能找到人 */
.lagoai-hot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: #fff5ee; border-top: 1px solid #ffe4cc; font-size: 12px; color: #a35a00;
}
.lagoai-hot .lagoai-tel {
  color: #ff6700; font-weight: 600; text-decoration: none;
  border: 1px solid #ff6700; border-radius: 14px; padding: 4px 10px; background: #fff;
}
.lagoai-hot span { color: #b06a2c; }

.lagoai-input { flex: none; display: flex; border-top: 1px solid #ececec; background: #fff; }
.lagoai-input input {
  flex: 1; border: none; outline: none; padding: 12px; font-size: 14px; background: transparent;
}
.lagoai-input button {
  border: none; background: #ff6700; color: #fff; padding: 0 18px; cursor: pointer; font-size: 14px;
}
.lagoai-input button[disabled] { background: #ccc; cursor: default; }

.lagoai-typing { color: #999; font-size: 13px; }

@media (max-width: 480px) {
  .lagoai-panel { right: 8px; left: 8px; bottom: 74px; width: auto; height: 62vh; }
  .lagoai-btn { right: 12px; bottom: 12px; }
}