/* 正乾纺织 · 网站自动回复 Agent 挂件样式（品牌色：藏青 #1F3450 / 金 #C0954E / 米 #FAF6EF） */
#zq-chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: inherit; }

.zq-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: #1F3450; color: #fff; box-shadow: 0 6px 20px rgba(31,52,80,.35);
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease;
}
.zq-fab:hover { transform: translateY(-2px); background: #16263b; }
.zq-fab-ic { font-size: 26px; line-height: 1; }

.zq-panel {
  position: absolute; right: 0; bottom: 72px; width: 340px; max-width: calc(100vw - 32px);
  height: 480px; max-height: calc(100vh - 110px);
  background: #FAF6EF; border-radius: 16px; overflow: hidden; display: none; flex-direction: column;
  box-shadow: 0 18px 48px rgba(31,52,80,.28); border: 1px solid rgba(31,52,80,.08);
}
.zq-panel.open { display: flex; animation: zqPop .18s ease; }
@keyframes zqPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* 头部 */
.zq-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #1F3450; color: #fff; padding: 12px 14px; }
.zq-ph-l { display: flex; align-items: center; gap: 10px; }
.zq-avatar { width: 36px; height: 36px; border-radius: 50%; background: #C0954E; color: #1F3450;
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.zq-title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.zq-sub { font-size: 11px; opacity: .72; }
.zq-ph-r { display: flex; align-items: center; gap: 6px; }
.zq-human { background: rgba(192,149,78,.18); color: #F3D9A8; border: 1px solid rgba(192,149,78,.5);
  font-size: 11px; padding: 5px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.zq-human:hover { background: rgba(192,149,78,.32); }
.zq-ai { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35);
  font-size: 11px; padding: 5px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-weight: 600; }
.zq-ai:hover { background: rgba(255,255,255,.2); }
.zq-ai.on { background: #C0954E; color: #1F3450; border-color: #C0954E; box-shadow: 0 0 0 3px rgba(192,149,78,.25); }
.zq-close { background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 2px; }
.zq-close:hover { opacity: 1; }

/* AI 思考中 loading 点 */
.zq-loading { color: #8a94a6; }
.zq-dots { display: inline-flex; gap: 2px; margin-left: 2px; }
.zq-dots i { font-style: normal; animation: zqblink 1.2s infinite; }
.zq-dots i:nth-child(2) { animation-delay: .2s; }
.zq-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes zqblink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }

/* 消息区 */
.zq-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #FAF6EF; }
.zq-row { display: flex; }
.zq-bot { justify-content: flex-start; }
.zq-user { justify-content: flex-end; }
.zq-bubble { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.55; word-break: break-word; white-space: normal; }
.zq-bot .zq-bubble { background: #fff; color: #1F3450; border: 1px solid rgba(31,52,80,.08); border-top-left-radius: 4px; }
.zq-user .zq-bubble { background: #1F3450; color: #fff; border-top-right-radius: 4px; }
.zq-bubble-action { background: transparent !important; border: none !important; padding: 0 !important; }

/* 产品卡 */
.zq-pcard { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid rgba(31,52,80,.1); border-radius: 12px; padding: 8px; max-width: 86%; }
.zq-pcard img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #eee; flex: none; }
.zq-pc-body { flex: 1; min-width: 0; }
.zq-pc-name { font-size: 12.5px; font-weight: 700; color: #1F3450; line-height: 1.25; }
.zq-pc-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.zq-pc-cat { display: inline-block; font-size: 10px; color: #C0954E; background: rgba(192,149,78,.12); padding: 1px 6px; border-radius: 999px; margin-top: 3px; }
.zq-pc-go { font-size: 11px; color: #C0954E; font-weight: 700; white-space: nowrap; padding-left: 4px; }
.zq-human-inline { background: #C0954E; color: #1F3450; border: none; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; }

/* 快捷问题 */
.zq-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.zq-chip { background: #fff; border: 1px solid rgba(31,52,80,.16); color: #1F3450; font-size: 11.5px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: background .12s; }
.zq-chip:hover { background: #f0e9da; }

/* 输入 */
.zq-input { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(31,52,80,.08); background: #fff; }
.zq-input input { flex: 1; border: 1px solid rgba(31,52,80,.18); border-radius: 999px; padding: 9px 14px; font-size: 13px; outline: none; color: #1F3450; background: #FAF6EF; }
.zq-input input:focus { border-color: #C0954E; }
.zq-send { background: #1F3450; color: #fff; border: none; border-radius: 999px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.zq-send:hover { background: #16263b; }

@media (max-width: 520px) {
  .zq-panel { width: calc(100vw - 32px); height: calc(100vh - 120px); bottom: 72px; }
  #zq-chatbot { right: 14px; bottom: 14px; }
}