/* ============================================================
   AI 找房 · 悬浮聊天窗
   所有类名统一 ai- 前缀，避免与主题样式（house-card / wf-*）冲突
   ============================================================ */

/* ---------- 悬浮入口按钮 ---------- */
#aiFab {
  position: fixed;
  right: 15px;
  bottom: 138px;              /* 在微信悬浮按钮(78px)之上，避免重叠 */
  z-index: 9992;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  background: linear-gradient(135deg, #6d5efc 0%, #a855f7 55%, #ec4899 100%);
  box-shadow: 0 4px 14px rgba(109, 94, 252, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}

#aiFab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(109, 94, 252, .55);
}

#aiFab .ai-fab-tip {
  position: absolute;
  right: 60px;
  white-space: nowrap;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

#aiFab:hover .ai-fab-tip { opacity: 1; }

@media (min-width: 480px) {
  #aiFab { right: 40px; bottom: 160px; }
}

/* ---------- 聊天面板 ---------- */
#aiPanel {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 9996;

  display: none;
  flex-direction: column;
  width: min(400px, calc(100vw - 30px));
  height: min(620px, calc(100vh - 30px));

  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .28);

  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

#aiPanel.ai-open {
  display: flex;
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (min-width: 480px) {
  #aiPanel { right: 40px; bottom: 40px; }
}

/* ---------- 头部 ---------- */
.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(135deg, #6d5efc 0%, #a855f7 100%);
}

.ai-head-title { font-size: 15px; font-weight: 700; line-height: 1.2; }
.ai-head-sub { font-size: 11px; opacity: .85; }

.ai-head-close {
  margin-left: auto;
  border: none;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- 消息区 ---------- */
.ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: #f6f7fb;
  -webkit-overflow-scrolling: touch;
}

.ai-msg { margin-bottom: 12px; display: flex; }
.ai-msg.ai-me { justify-content: flex-end; }

.ai-bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-msg.ai-ai .ai-bubble {
  background: #fff;
  border: 1px solid #e8eaf2;
  border-top-left-radius: 4px;
}

.ai-msg.ai-me .ai-bubble {
  background: #6d5efc;
  color: #fff;
  border-top-right-radius: 4px;
}

/* 等待指示器 */
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a5a9bd;
  animation: aiBlink 1.1s infinite;
}
.ai-typing i:nth-child(2) { animation-delay: .18s; }
.ai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes aiBlink {
  0%, 60%, 100% { opacity: .28; }
  30% { opacity: 1; }
}

/* ---------- 快捷提示 ---------- */
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.ai-chip {
  border: 1px solid #d8dbee;
  background: #fff;
  color: #4b5069;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.ai-chip:hover { border-color: #6d5efc; color: #6d5efc; }

/* ---------- 房源卡片 ---------- */
.ai-cards { margin-bottom: 10px; }

.ai-card {
  display: flex;
  gap: 10px;
  padding: 8px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #e8eaf2;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}

.ai-card:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
  transform: translateY(-1px);
}

.ai-card-img {
  flex: 0 0 84px;
  width: 84px; height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef0f6;
}

.ai-card-noimg {
  flex: 0 0 84px;
  width: 84px; height: 72px;
  border-radius: 8px;
  background: #eef0f6;
  display: flex; align-items: center; justify-content: center;
  color: #a5a9bd; font-size: 11px;
}

.ai-card-main { flex: 1; min-width: 0; }

.ai-card-name {
  font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ai-card-meta { font-size: 11px; color: #8a8fa6; margin-top: 2px; }

.ai-card-price { font-size: 13px; font-weight: 700; color: #e0457b; margin-top: 3px; }

.ai-card-reason {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.45;
  color: #5b5f78;
  background: #f4f2ff;
  border-left: 2px solid #a855f7;
  padding: 4px 7px;
  border-radius: 0 6px 6px 0;
}

.ai-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ai-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef0f6;
  color: #6b7089;
}
.ai-tag.ai-tag-avail { background: #e6f7ee; color: #1a9c5b; }
.ai-tag.ai-tag-out { background: #f2f3f5; color: #9aa0b0; }

/* ---------- 输入区 ---------- */
.ai-foot {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  border-top: 1px solid #eceef6;
  background: #fff;
}

.ai-input {
  flex: 1;
  border: 1px solid #dfe2ee;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.4;
  max-height: 96px;
  resize: none;
  outline: none;
}

.ai-input:focus { border-color: #6d5efc; }

.ai-send {
  flex: 0 0 auto;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #6d5efc, #a855f7);
  cursor: pointer;
}

.ai-send[disabled] { opacity: .5; cursor: not-allowed; }

.ai-foot-note { font-size: 11px; color: #9aa0b0; padding: 0 10px 8px; text-align: center; }