/* ===== 右下角悬浮客服（2026-10-10 站长：点开弹出与客服的聊天窗口）=====
   为什么做成悬浮而不是「我的 → 消息」：站长要的是「避免用户没看到」——
   悬浮头像在每个页面都在，未读有红点，用户一进站就看得见。 */
.aip-support-fab {
  position: fixed;
  right: 16px;
  bottom: 84px;            /* 让开移动端底部导航栏 */
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #32bd86, #1f9c6d);
  color: #fff;
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(31, 156, 109, .38);
  cursor: pointer; z-index: 900;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .16s ease;
}
.aip-support-fab:active { transform: scale(.95); }
.aip-support-fab-dot {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: #ff4d4f; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.aip-support-panel[hidden] { display: none !important; }
.aip-support-panel {
  position: fixed;
  right: 16px; bottom: 146px;
  width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 200px));
  display: flex; flex-direction: column;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #19221e);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  overflow: hidden; z-index: 901;
  animation: aipSupportIn .2s ease;
}
@keyframes aipSupportIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.aip-support-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #32bd86, #1f9c6d);
  color: #fff;
}
.aip-support-head b { font-size: .92rem; font-weight: 800; }
.aip-support-head span { font-size: .68rem; opacity: .9; display: block; margin-top: 2px; }
.aip-support-close {
  margin-left: auto; border: 0; background: rgba(255,255,255,.18); color: #fff;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 15px;
}
.aip-support-log {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-base, #f6f8f7);
  -webkit-overflow-scrolling: touch;
}
.aip-support-bubble {
  max-width: 82%; padding: 9px 12px; border-radius: 14px;
  font-size: .82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.aip-support-bubble.is-user { align-self: flex-end; background: #32bd86; color: #fff; border-bottom-right-radius: 4px; }
.aip-support-bubble.is-staff { align-self: flex-start; background: #fff; border: 1px solid var(--border, rgba(0,0,0,.08)); border-bottom-left-radius: 4px; }
.aip-support-bubble.is-system { align-self: center; background: rgba(50,189,134,.12); color: #1f7a58; font-size: .74rem; text-align: center; }
.aip-support-time { font-size: .62rem; opacity: .55; margin-top: 4px; }
.aip-support-empty { margin: auto; text-align: center; font-size: .78rem; color: var(--text-secondary, #617068); line-height: 1.7; }
.aip-support-form {
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--bg-card, #fff);
}
.aip-support-input {
  flex: 1; min-height: 40px; max-height: 96px; resize: none;
  border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: .82rem;
  background: var(--bg-base, #f6f8f7); color: inherit;
}
.aip-support-input:focus { outline: 2px solid rgba(50,189,134,.45); outline-offset: 1px; }
.aip-support-send {
  border: 0; border-radius: 12px; padding: 0 16px; min-width: 64px;
  background: #32bd86; color: #fff; font: inherit; font-weight: 800; font-size: .82rem;
  cursor: pointer;
}
.aip-support-send:disabled { opacity: .5; cursor: default; }
@media (max-width: 480px) {
  .aip-support-panel {
    right: 8px; left: 8px; width: auto;
    bottom: 140px; height: min(60vh, 480px);
  }
}