/* ai-chat.css — AI 在线客服样式（移动端优先） */
.ai-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: none; align-items: center; justify-content: center;
  z-index: 4000; padding: 0;
}
.ai-mask.show { display: flex; }

.ai-box {
  background: #fff; width: 100%; max-width: 480px; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 640px) {
  .ai-mask { padding: 24px; }
  .ai-box { height: min(720px, 88vh); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
}

/* 头部 */
.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: linear-gradient(135deg,#0d6efd,#0a58ca);
  color: #fff; flex: 0 0 auto; safe-area-inset-top: env(safe-area-inset-top);
}
.ai-head-l { display: flex; align-items: center; gap: 10px; }
.ai-ava {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: .5px;
}
.ai-head b { display: block; font-size: 15px; font-weight: 500; }
.ai-head small { display: block; font-size: 12px; opacity: .85; margin-top: 1px; }
.ai-x {
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; opacity: .9;
}

/* 消息区 */
.ai-log {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 14px;
  background: #f7f8fa; -webkit-overflow-scrolling: touch;
}
.ai-msg { margin-bottom: 14px; display: flex; flex-direction: column; }
.ai-msg.ai-me { align-items: flex-end; }
.ai-bubble {
  max-width: 82%; padding: 10px 13px; border-radius: 12px;
  font-size: 15px; line-height: 1.65; word-break: break-word;
}
.ai-ai .ai-bubble {
  background: #fff; color: #1f2328;
  border: 1px solid #e6e8eb; border-top-left-radius: 4px;
}
.ai-me .ai-bubble {
  background: #0d6efd; color: #fff; border-top-right-radius: 4px;
}
.ai-bubble a { color: #0d6efd; text-decoration: underline; }
.ai-me .ai-bubble a { color: #fff; }

/* 引用来源 */
.ai-refs { margin-top: 5px; max-width: 82%; display: flex; flex-direction: column; gap: 3px; }
.ai-refs a {
  font-size: 12px; color: #5b6570; background: #fff;
  border: 1px solid #e6e8eb; border-radius: 6px; padding: 5px 8px;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 加载动画 */
.ai-dots { display: flex; gap: 4px; align-items: center; padding: 14px; }
.ai-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #b6bcc4; display: block;
  animation: aiBlink 1.2s infinite ease-in-out;
}
.ai-dots i:nth-child(2) { animation-delay: .2s; }
.ai-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }
@media (prefers-reduced-motion: reduce) { .ai-dots i { animation: none; } }

/* 快捷问题 */
.ai-quick {
  display: flex; gap: 7px; overflow-x: auto; padding: 9px 12px;
  background: #fff; border-top: 1px solid #e6e8eb; flex: 0 0 auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ai-quick::-webkit-scrollbar { display: none; }
.ai-quick button {
  flex: 0 0 auto; font-size: 13px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid #0d6efd; background: #fff; color: #0d6efd;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.ai-quick button:active { background: #0d6efd; color: #fff; }

/* 输入区 */
.ai-input {
  display: flex; gap: 8px; padding: 10px 12px;
  background: #fff; border-top: 1px solid #e6e8eb; flex: 0 0 auto;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.ai-input input {
  flex: 1; min-width: 0; font-size: 16px; /* ≥16px 防iOS 自动放大 */
  padding: 10px 12px; border: 1px solid #d9dde1; border-radius: 20px;
  outline: none; font-family: inherit; background: #fff;
}
.ai-input input:focus { border-color: #0d6efd; }
.ai-input button {
  flex: 0 0 auto; padding: 0 20px; font-size: 15px; border: 0; border-radius: 20px;
  background: #0d6efd; color: #fff; cursor: pointer; font-family: inherit;
}
.ai-input button:disabled { background: #b6bcc4; cursor: default; }

/* 底部免责 */
.ai-foot {
  flex: 0 0 auto; font-size: 11px; color: #8b939c; text-align: center;
  padding: 6px 12px; background: #fff;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}