/* ---------- ИИ-робот сайта: кнопка с роботом, окно, окошки времени ---------- */
.chat { position: fixed; right: 18px; bottom: 18px; z-index: 1200; font-family: var(--font, inherit); }

.chat__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px;
  color: #fff; background: var(--accent, #1f7a5a); box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.chat__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.chat__btn-robot { width: 56px; height: 56px; flex: 0 0 auto; display: block; }
.chat__btn.is-pulse { animation: chat-pulse 1.6s ease-in-out 3; }
@keyframes chat-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  50%      { box-shadow: 0 0 0 12px var(--accent-soft, rgba(31,122,90,.22)); }
}

/* ---------- робот: рисованный SVG, без внешних картинок ---------- */
.chat__robot { display: block; width: 100%; height: 100%; transform-origin: 50% 88%; animation: chat-sway 7s ease-in-out infinite; }
.chat__robot-head, .chat__robot-body { fill: var(--surface, #fff); }
.chat__robot-ant, .chat__robot-neck { fill: var(--surface, #fff); opacity: .9; }
.chat__robot-eye { fill: var(--accent, #1f7a5a); transform-box: fill-box; transform-origin: center; animation: chat-blink 6.5s infinite; }
.chat__robot-smile { stroke: var(--accent, #1f7a5a); }
.chat__robot-lamp { fill: var(--accent, #1f7a5a); opacity: .7; }
@keyframes chat-blink { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes chat-sway  { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.chat__hint {
  position: absolute; right: 0; bottom: 62px; max-width: 240px;
  background: var(--surface, #fff); color: var(--ink, #20242a); border: 1px solid var(--line, #e3e7ea);
  border-radius: 12px; padding: 10px 12px; font-size: 13.5px; box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.12));
}
.chat__hint::after {
  content: ""; position: absolute; right: 22px; bottom: -7px; width: 12px; height: 12px;
  background: var(--surface, #fff); border-right: 1px solid var(--line, #e3e7ea); border-bottom: 1px solid var(--line, #e3e7ea);
  transform: rotate(45deg);
}

.chat__win {
  position: absolute; right: 0; bottom: 64px; width: 360px; max-width: calc(100vw - 36px);
  max-height: min(76vh, 640px); display: flex; flex-direction: column;
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e7ea); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22); overflow: hidden;
}
/* атрибут hidden обязан прятать окно: без этого правила display:flex его перебивает и крестик «не работает» */
.chat__win[hidden], .chat__hint[hidden], .chat__lead[hidden], .chat__chips[hidden] { display: none !important; }
.chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--accent, #1f7a5a); color: #fff;
  flex: 0 0 auto;
}
.chat__head-robot { width: 40px; height: 40px; flex: 0 0 auto; }
.chat__head-t { flex: 1 1 auto; min-width: 0; }
.chat__head-t b { display: block; font-size: 15.5px; font-weight: 800; }
.chat__head-t span { display: block; font-size: 12.5px; opacity: .9; margin-top: 2px; }
/* крестик: зона не меньше 48x48, закрывает по первому касанию, без задержки двойного тапа */
.chat__close {
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; margin: -6px -8px -6px 0;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.chat__close:active { opacity: .75; }
.chat__btn, .chat__chips button, .chat__slot, .chat__form button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.chat__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; background: var(--bg, #f6f7f9);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.chat__msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; white-space: pre-line; }
.chat__msg--bot { align-self: flex-start; background: var(--surface, #fff); border: 1px solid var(--line, #e3e7ea); color: var(--ink, #20242a); }
.chat__msg--me  { align-self: flex-end; background: var(--accent, #1f7a5a); color: #fff; }
.chat__msg--note { align-self: center; background: none; color: var(--muted, #5f6872); font-size: 12.5px; text-align: center; }
.chat__msg--bot a { color: var(--accent-dark, #145c43); }
.chat__msg.is-fresh { animation: chat-appear .35s ease-out; }
@keyframes chat-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; background: var(--bg, #f6f7f9); flex: 0 0 auto; }
.chat__chips button {
  border: 1px solid var(--line, #e3e7ea); background: var(--surface, #fff); color: var(--ink, #20242a);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
}
.chat__chips button:hover { border-color: var(--accent, #1f7a5a); color: var(--accent-dark, #145c43); }

/* карточки квартир под ответом (поле flats из chat.php) */
.chat__flats {
  display: flex; flex-direction: column; gap: 8px;
  align-self: stretch; max-width: 100%; width: 100%;
}
.chat__flats-card {
  display: flex; gap: 10px; align-items: stretch;
  text-decoration: none; color: inherit;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e3e7ea);
  border-radius: 12px; overflow: hidden;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.chat__flats-card:hover { border-color: var(--accent, #1f7a5a); }
.chat__flats-img {
  width: 96px; height: 96px; max-height: 140px; object-fit: cover;
  flex: 0 0 auto; background: #fff; display: block;
}
.chat__flats-meta {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
}
.chat__flats-title { font-weight: 700; font-size: 13.5px; color: var(--ink, #20242a); }
.chat__flats-sub { font-size: 12.5px; color: var(--muted, #5f6872); }
.chat__flats-price { font-weight: 800; font-size: 13.5px; color: var(--ink, #20242a); margin-top: 2px; }
.chat__flats-link { font-size: 12.5px; color: var(--accent-dark, #145c43); margin-top: 4px; text-decoration: underline; }

.chat__form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line, #e3e7ea); background: var(--surface, #fff); flex: 0 0 auto; }
.chat__input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14.5px; color: var(--ink, #20242a);
  background: #fff; border: 1.5px solid var(--line, #e3e7ea); border-radius: 10px; padding: 10px 12px;
}
.chat__input:focus { outline: none; border-color: var(--accent, #1f7a5a); }

.chat__lead { padding: 12px 14px 14px; border-top: 1px solid var(--line, #e3e7ea); background: var(--surface, #fff); flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat__lead-t { font-weight: 800; font-size: 14.5px; color: var(--ink, #20242a); }
.chat__lead-p { margin: 4px 0 10px; font-size: 13px; color: var(--muted, #5f6872); }
.chat__lead .chat__input { width: 100%; margin-bottom: 10px; }
.chat__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chat__slot {
  border: 1.5px solid var(--line, #e3e7ea); background: #fff; color: var(--ink, #20242a);
  border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none;
}
.chat__slot:hover { border-color: var(--accent, #1f7a5a); color: var(--accent-dark, #145c43); }
.chat__slot.is-active { background: var(--accent, #1f7a5a); border-color: var(--accent, #1f7a5a); color: #fff; }
.chat__slot--max { border-style: dashed; }
.chat__note { margin: 10px 0 0; font-size: 12px; color: var(--muted, #5f6872); line-height: 1.4; }
.chat__note a { color: inherit; text-decoration: underline; }

@media (max-width: 640px) {
  /* кнопка робота на телефоне — маленький робот в углу, а не полоса во всю ширину */
  .chat { right: 12px; bottom: 12px; left: auto; }
  .chat__btn { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .chat__btn-robot { width: 38px; height: 38px; }
  .chat__btn-label { display: none; }
  .chat__hint { max-width: 64vw; text-align: center; right: 0; }
  /* окно-панель снизу: не больше 60% экрана, шапка с крестиком всегда на виду */
  .chat__win {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    max-height: 60vh; height: auto; border-radius: 14px 14px 0 0; border: 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,.24);
  }
  .chat__head { border-radius: 14px 14px 0 0; padding: 8px 10px 8px 12px; gap: 8px; }
  .chat__head-robot { width: 30px; height: 30px; }
  .chat__head-t b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat__head-t span { font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat__close { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 28px; margin: 0 -6px 0 0; }
  .chat__body { padding: 12px; }
  .chat__form { padding: 10px 12px; }
  .chat__flats-img { width: 80px; height: 80px; }
  .chat__flats-title { font-size: 13px; }
  .chat__flats-price { font-size: 13px; }
  /* форма заявки компактнее: телефон, окошки времени и кнопка должны влезать в 60% экрана */
  .chat__lead { padding: 10px 12px 12px; }
  .chat__lead-t { font-size: 14px; }
  .chat__lead-p { font-size: 12.5px; margin: 3px 0 8px; }
  .chat__lead .chat__input { margin-bottom: 8px; padding: 9px 11px; }
  .chat__slots { gap: 6px; margin-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .chat__slot { padding: 5px 9px; font-size: 12px; flex: 0 0 auto; }
  /* пока открыта форма заявки, переписку прячем: телефон, окошки и кнопка видны целиком без прокрутки */
  .chat__win.is-lead .chat__body { display: none; }
  .chat__note { font-size: 11px; margin-top: 8px; }
}

/* уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .chat__robot, .chat__robot-eye, .chat__btn, .chat__btn.is-pulse, .chat__msg.is-fresh { animation: none !important; transition: none !important; }
}