/* Подключается компонентом ChatSpot — только на страницах, где есть чат. */

/* AI-АССИСТЕНТ, ВСТРОЕННЫЙ В СТРАНИЦУ (components/ChatSpot.tsx)
   Виджет больше не висит плавающей кнопкой на всём сайте: он появляется в
   нескольких точках, в каждой — со своим вопросом по теме места. На узком
   экране блок свёрнут в строку-затравку, чтобы не съедать экран. */
.chat-spot {
  display: grid;
  /* текст не растягивается на всю свободную ширину: иначе между ним и
     чатом остаётся полэкрана пустоты */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 420px);
  gap: clamp(28px, 4vw, 56px);
  justify-content: center;
  align-items: center;
}
.chat-spot.is-compact { display: block; }

.chat-spot-copy p {
  color: var(--text-muted); line-height: 1.7; margin: 14px 0 0; max-width: 52ch;
}

.chat-spot-stage { display: grid; gap: 8px; justify-items: end; }

.chat-spot-frame {
  /* низкое, пока в окне одно приветствие; после первого сообщения человека
     ChatSpot ставит .is-grown — окно вытягивается до полной высоты */
  position: relative; width: 100%; height: var(--chat-h-min, 360px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  transition: height 0.35s ease;
}
.chat-spot-frame.is-grown { height: var(--chat-h, 520px); }
.chat-spot.is-compact .chat-spot-frame { height: 100%; min-height: 340px; box-shadow: none; }

/* host виджета переезжает внутрь рамки (ChatSpot.tsx) — растягиваем его,
   чтобы окно в Shadow DOM получило рамку точкой отсчёта */
/* Встроенный виджет живёт внутри страницы, а не поверх неё: свой
   z-index: 99999 он держит ради плавающего режима, и при прокрутке
   проезжал поверх шапки сайта (у неё 1000). Создаём контекст наложения
   на рамке и гасим z-index внутри. */
.chat-spot-frame { position: relative; z-index: 0; isolation: isolate; }
.chat-spot-frame > #chat-widget-host { position: absolute; inset: 0; z-index: 0; }

.chat-spot-plug {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center; color: var(--text-dim); font-size: 0.9rem;
}
.chat-spot-plug a { color: var(--orange); text-decoration: none; border-bottom: 1px solid transparent; }
.chat-spot-plug a:hover { border-bottom-color: var(--orange); }

/* «Свернуть» — только на узком экране: на десктопе чат открыт всегда */
.chat-spot-hide { display: none; }
@media (max-width: 900px) {
  .chat-spot-hide { display: block; }
}
.chat-spot-hide {
  background: none; border: 0; padding: 2px 4px;
  color: var(--text-dim); font-size: 0.78rem; font-family: inherit; cursor: pointer;
}
.chat-spot-hide:hover { color: var(--text); }

/* Свёрнутое состояние: одна строка с вопросом — занимает ~64px вместо экрана */
.chat-spot-teaser {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px; text-align: left; font-family: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); color: inherit; cursor: pointer;
  transition: border-color 0.3s, transform 0.3s;
}
.chat-spot-teaser:hover { border-color: var(--card-hover-border); transform: translateY(-2px); }

.chat-spot-teaser-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.16);
}
.chat-spot-teaser-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.chat-spot-teaser-name {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.chat-spot-teaser-q {
  font-size: 0.9rem; color: var(--text); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-spot-teaser-arrow { color: var(--orange); font-size: 1.15rem; flex-shrink: 0; }

@media (max-width: 900px) {
.chat-spot { grid-template-columns: 1fr; }

.chat-spot { --chat-h: 460px; --chat-h-min: 400px; } /* пузыри уже — строк больше */

.chat-spot-stage { justify-items: stretch; }

.chat-spot-hide { justify-self: end; }
}