/* Чат-визитка: свёрнутая кнопка внизу, разворачивается в ленту.
   Стилистика та же, что у сцены: чёрный фон, белый текст, Inter,
   тонкие линии вместо плашек — окно чата не должно выглядеть виджетом,
   принесённым с другого сайта. */

#chat {
  position: fixed;
  right: var(--pad);
  bottom: max(var(--pad), env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font);
}

/* ── свёрнутое состояние ─────────────────────────────────────────── */
.chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: var(--fg);
  font-size: 13px;
  letter-spacing: -.005em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .25s ease, background .25s ease;
}
.chat-toggle:hover { border-color: rgba(255, 255, 255, .42); }

/* Точка «на связи»: единственный цветной элемент во всём интерфейсе,
   поэтому она и читается как индикатор, а не как украшение. */
.chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex: none;
}

#chat.is-open .chat-toggle-label { opacity: .6; }

/* ── развёрнутая панель ──────────────────────────────────────────── */
.chat-panel {
  width: min(370px, calc(100vw - var(--pad) * 2));
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.chat-panel[hidden] { display: none; }

.chat-log {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* прокрутка ленты не уходит в сцену */
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.chat-msg {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;          /* переносы из ответа сохраняем */
  max-width: 92%;
}

/* Вопрос — справа и приглушённый: это реплика гостя, а не содержание. */
.chat-msg-user {
  align-self: flex-end;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px 12px 3px 12px;
  color: var(--fg);
  opacity: .85;
}

.chat-msg-ai { align-self: flex-start; color: var(--fg); }
.chat-msg-ai.is-error { opacity: .7; }

/* Курсор печати: показывает, что ответ идёт, а не завис. */
.chat-msg.is-typing::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  background: var(--fg);
  vertical-align: -2px;
  animation: chat-caret 1s steps(2) infinite;
}
@keyframes chat-caret { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

.chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.chat-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}
.chat-input::placeholder { color: var(--fg-mute); }

.chat-send {
  flex: none;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  line-height: 1;
  transition: border-color .2s ease, opacity .2s ease;
}
.chat-send:hover:not(:disabled) { border-color: rgba(255, 255, 255, .5); }
.chat-send:disabled { opacity: .35; cursor: default; }

@media (max-width: 760px) {
  /* На телефоне подсказка внизу и чат делят одно место — чат главнее. */
  #chat { left: var(--pad); align-items: stretch; }
  .chat-panel { width: 100%; }
  .chat-toggle { align-self: flex-end; }
  .chat-log { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-msg.is-typing::after { animation: none; }
}