/* ============================================
   亿聚智能助手 - AI 客服挂件样式
   依赖 style.css 的 :root 设计 token
   ============================================ */

/* --- 浮动按钮(置于 back-to-top 上方) --- */
.ai-chat-fab {
  position: fixed;
  bottom: calc(var(--s6) + 52px);
  right: var(--s6);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--ease);
  z-index: 1000;
}
.ai-chat-fab.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ai-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45); }
.ai-chat-fab svg { width: 22px; height: 22px; }

/* --- 对话面板 --- */
.ai-chat-panel {
  position: fixed;
  bottom: calc(var(--s6) + 110px);
  right: var(--s6);
  width: 380px;
  max-width: calc(100vw - 2 * var(--s4));
  max-height: min(600px, calc(100vh - 160px));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 48px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: all var(--ease);
  z-index: 1001;
  overflow: hidden;
}
.ai-chat-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* 面板头部(深色,呼应站内 dark 板块) */
.ai-chat-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--bg-dark);
  color: var(--white);
  flex-shrink: 0;
}
.ai-chat-head .ai-head-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ai-chat-head .ai-head-info { flex: 1; min-width: 0; }
.ai-chat-head .ai-head-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}
.ai-chat-head .ai-head-sub {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.ai-chat-head .ai-head-sub .ai-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--green, #059669);
  flex-shrink: 0;
}
.ai-chat-head .ai-head-sub.offline .ai-dot { background: var(--orange, #EA580C); }
.ai-chat-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--s2);
  border-radius: var(--r-md);
  transition: all var(--ease);
}
.ai-chat-close:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }

/* 消息区 */
.ai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--bg-alt);
  min-height: 260px;
}

/* 气泡 */
.ai-msg {
  max-width: 86%;
  padding: var(--s3) var(--s4);
  font-size: 0.8125rem;
  line-height: 1.65;
  word-break: break-word;
  white-space: pre-wrap;
}
.ai-msg.bot {
  align-self: flex-start;
  background: var(--white);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.ai-msg.user {
  align-self: flex-end;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
}
.ai-msg a { color: var(--blue); text-decoration: underline; }
.ai-msg.user a { color: var(--white); }
.ai-msg .ai-msg-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  vertical-align: 1px;
  letter-spacing: 0.5px;
}
.ai-msg .ai-msg-tag.llm { background: var(--blue-bg, #EFF6FF); color: var(--blue); border: 1px solid rgba(37, 99, 235, 0.25); }
.ai-msg .ai-msg-tag.faq { background: var(--green-light, rgba(5, 150, 105, 0.08)); color: var(--green, #059669); border: 1px solid rgba(5, 150, 105, 0.25); }

/* 打字中指示 */
.ai-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
}
.ai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-4);
  animation: ai-typing-bounce 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* 流式输出光标 */
.ai-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--blue);
  vertical-align: -0.1em;
  margin-left: 2px;
  animation: ai-caret-blink 0.8s step-end infinite;
}
@keyframes ai-caret-blink { 50% { opacity: 0; } }

/* 快捷问题 chips */
.ai-chips {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4) 0;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.ai-chip {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--ease);
  font-family: inherit;
}
.ai-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-bg, #EFF6FF);
}

/* 输入区 */
.ai-chat-input {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--bg-alt);
  flex-shrink: 0;
}
.ai-chat-input input {
  flex: 1;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text-1);
  background: var(--white);
  transition: border-color var(--ease);
  min-width: 0;
}
.ai-chat-input input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
.ai-chat-input button {
  border: none;
  border-radius: var(--r-full);
  background: var(--blue);
  color: var(--white);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--ease);
}
.ai-chat-input button:hover { background: var(--blue-dark); }
.ai-chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-chat-input button svg { width: 16px; height: 16px; }

/* --- 响应式 --- */
@media (max-width: 480px) {
  .ai-chat-panel {
    right: var(--s4);
    left: var(--s4);
    bottom: calc(var(--s6) + 104px);
    width: auto;
    max-height: calc(100vh - 200px);
  }
  .ai-msg { max-width: 92%; }
}

/* --- 弱化动画 --- */
@media (prefers-reduced-motion: reduce) {
  .ai-chat-fab,
  .ai-chat-panel { transition: none; }
  .ai-typing span { animation: none; }
  .ai-caret { animation: none; }
}