/* ════════════════════════════════════════════════════════════════
   ai-chat-panel.css — "AI 챗봇" 대화창(ai-chat-fab.js가 여는 패널).
   (2026-09-01 신규, 2차) 참고 스크린샷(흰 헤더+로봇 인사말+예시 질문 칩+입력창) 구성을
   따랐다. 데스크톱에서는 우측 하단에 뜨는 카드, 모바일(≤768px)에서는 화면 전체를 덮는다.
   매물 결과 카드 자체는 여기서 새로 안 만들고 기존 property-card.js의 buildPropCard()
   (가로형, layout:'horizontal')를 그대로 재사용한다 — .prop-card* 스타일은
   property-card.css(이미 로드됨)에 있다.
════════════════════════════════════════════════════════════════ */
.ai-chat-panel {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 1000;/* .float-btns(index.css, 999)보다 항상 위에 오도록 */
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15,23,42,.25), 0 4px 14px rgba(15,23,42,.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}
.ai-chat-panel[hidden] { display: none; }

/* ── 헤더 ── */
.ai-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f5;
  flex-shrink: 0;
}
.ai-chat-panel-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #16233f;
}
.ai-chat-panel-header-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(120deg, #1e3a8a 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.ai-chat-panel-header-actions { display: flex; align-items: center; gap: 10px; }
.ai-chat-panel-reset {
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #64748b;
  padding: 4px 6px;
}
.ai-chat-panel-reset:hover { color: #1d4ed8; }
.ai-chat-panel-close {
  border: none; background: #f1f5f9; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; color: #64748b; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ai-chat-panel-close:hover { background: #e2e8f0; color: #1e293b; }

/* ── 본문(대화 영역) ── */
.ai-chat-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f8fafc;
}

/* 인사말 화면(대화 시작 전) */
.ai-chat-greeting { text-align: center; padding: 12px 4px 4px; }
.ai-chat-greeting-avatar {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(120deg, #1e3a8a 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 20px rgba(76,29,149,.25);
}
.ai-chat-greeting-title { font-size: 17px; font-weight: 800; color: #16233f; margin-bottom: 6px; }
.ai-chat-greeting-sub { font-size: 12.5px; color: #64748b; line-height: 1.5; margin-bottom: 18px; }
.ai-chat-example-box {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 14px;
  padding: 12px; text-align: left;
}
.ai-chat-example-label {
  font-size: 11.5px; font-weight: 700; color: #64748b;
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.ai-chat-example-chip {
  display: block; width: 100%; text-align: left;
  border: none; background: #f1f5f9; border-radius: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  font-family: inherit; font-size: 12.5px; color: #334155; cursor: pointer;
  transition: background .12s;
}
.ai-chat-example-chip:last-child { margin-bottom: 0; }
.ai-chat-example-chip:hover { background: #e2e8f0; }
.ai-chat-hint {
  font-size: 11px; color: #94a3b8; margin-top: 12px; line-height: 1.5;
}

/* 메시지 버블 */
.ai-chat-msg { display: flex; }
.ai-chat-msg.user { justify-content: flex-end; }
.ai-chat-msg-bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-chat-msg.user .ai-chat-msg-bubble {
  background: #1d4ed8; color: #fff; border-bottom-right-radius: 4px;
}
.ai-chat-msg.bot .ai-chat-msg-bubble {
  background: #fff; color: #1e293b; border: 1px solid #e5e9f0; border-bottom-left-radius: 4px;
}
.ai-chat-msg.bot.typing .ai-chat-msg-bubble { color: #94a3b8; font-style: italic; }

/* 매물 결과 카드 묶음 — buildPropCard(가로형)를 그대로 붙인다 */
.ai-chat-results { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ai-chat-results .prop-card-h { cursor: pointer; }

/* 상담 CTA */
.ai-chat-consult-cta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ai-chat-consult-btn {
  border: 1px solid #1d4ed8; background: #fff; color: #1d4ed8;
  border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.ai-chat-consult-btn:hover { background: #eff6ff; }
.ai-chat-consult-form {
  margin-top: 8px; background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.ai-chat-consult-form input {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px;
  font-family: inherit; font-size: 12.5px;
}
.ai-chat-consult-form-submit {
  border: none; background: #1d4ed8; color: #fff; border-radius: 8px;
  padding: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.ai-chat-consult-form-submit:hover { background: #1e40af; }

/* ── 고객센터/상담종료 퀵버튼 ── */
.ai-chat-panel-quickrow {
  display: flex; gap: 8px; padding: 10px 16px 0;
  flex-shrink: 0;
}
.ai-chat-quickbtn {
  flex: 1;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  border-radius: 10px; padding: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none; text-align: center;
}
.ai-chat-quickbtn:hover { background: #f8fafc; }

/* ── 입력창 ── */
.ai-chat-panel-inputrow {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; flex-shrink: 0;
}
.ai-chat-panel-inputrow input {
  flex: 1; border: 1px solid #e2e8f0; border-radius: 20px;
  padding: 10px 14px; font-family: inherit; font-size: 13px; outline: none;
}
.ai-chat-panel-inputrow input:focus { border-color: #1d4ed8; }
.ai-chat-panel-inputrow button {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: #1d4ed8; color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ai-chat-panel-inputrow button:hover { background: #1e40af; }
.ai-chat-panel-inputrow button:disabled { background: #cbd5e1; cursor: default; }

.ai-chat-panel-disclaimer {
  font-size: 10px; color: #94a3b8; text-align: center;
  padding: 0 16px 12px; flex-shrink: 0;
}

@media (max-width: 768px) {
  .ai-chat-panel {
    right: 0; left: 0; bottom: 0; top: 0;
    width: 100%; max-width: 100%;
    height: 100%; max-height: 100%;
    border-radius: 0;
  }
}