/* ПОПАП ПОМОЩНИКА — кусок v14, Р-8. Виден на каждой странице сайта.

   🔴 НИ ОДНОГО КОДА ЦВЕТА: только имена ролей из `tokens.css`. Наберёт этот файл свой зелёный —
   и на одной странице окажется два разных зелёных, а браузер о несовпадении оттенков
   не жалуется (🅱️5, сторож `test_catalog_appearance.FORMY_CVETA`).

   🔴 Дизайн-стандарт: стекло и вуаль вместо сплошной заливки от края до края, скругление одного
   радиуса на весь сайт (`--skruglenie`), тени тонированы под фон (`--ten-2`, `--ten-3`).
   Разброс держим ближе к порядку: окно чата человек читает быстро, играть с ним нельзя. */

/* Обёртка прижата к правому нижнему углу окна. `fixed`, а не `sticky`: попап не участвует
   в потоке страницы вовсе и обязан оставаться на месте при любой прокрутке.

   ⚠️ Отступ снизу учитывает безопасную область телефона (`env(safe-area-inset-bottom)`):
   на телефонах с полосой жестов кнопка иначе прячется под неё. */
/* 🔴 НИЗ КНОПКИ СОВПАДАЕТ С НИЗОМ РЯДА ПЛИТОК НА ГЛАВНОЙ — правка Кирилла 12.08.2026:
   «сделай ты на одном уровне с низом плитки экзотики».

   Ряд разделов кончается на 95 % высоты окна — это следствие геометрии первого экрана,
   а не отдельное число. Значит кнопке остаётся 5 % снизу; при окне 1305 это 64 точки
   против прежних 16, и низ кнопки встаёт вровень с низом последней плитки.

   ⚠️ Доля, а не точки: на телефоне 844 точки высоты это 42 точки поля, и кнопка
   не упирается в край. Безопасная область телефона прибавляется поверх. */
.chat {
  position: fixed;
  right: 1rem;
  bottom: calc(5svh + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

/* ── Свёрнутый вид: кнопка с текстом (решение Кирилла) ──────────────────────── */
/* 🔴 ПЕРЕСОБРАНА 06.08.2026. Требование Кирилла, дословно: «кнопка спросить о растениях
   снизу справа почти незаметна, нужен ui такой же по ститлю как мы уже где-то испльзуем,
   полу-прозрачный, премиальный, заметный. Обводка рамки-фирменная золото-бронзовая,
   как на главной у „наших работ“».

   Три правки, и каждая отвечает своему слову:
   · «как на главной у наших работ» — обводка `--kromka-razdela`, ровно та краска, которой
     набрана рамка панели «Проекты». Второго бронзового у нас нет и заводить его не нужно;
   · «заметный» — бронзовый ореол `--ten-detali` под кнопкой. Одной линии в точку не хватало:
     кнопка стоит в правом нижнем углу поверх тёмного видео, и там тонкая обводка теряется;
   · «полу-прозрачный» — стекло с размытием под ним, как у самого окна помощника,
     и таблетка вместо прямого угла: так же скруглены кнопки первого экрана.

   ⚠️ Вес снижен с 700 до 600, кегль опущен на ступень. Полужирная строка в 17 точек рядом
   с ореолом читалась как объявление, а не как кнопка помощника: заметность даёт свет вокруг,
   а не толщина букв. Тот же разбор, что у надписей шапки. */
.chat__knopka {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--kromka-razdela);
  border-radius: var(--r-pill);
  background: var(--steklo-panel);
  backdrop-filter: var(--steklo-blur);
  color: var(--tekst);
  font: inherit;
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--ten-2), var(--ten-detali);
  cursor: pointer;
  transition: box-shadow var(--hod), transform var(--hod), border-color var(--hod);
}

.chat__knopka:hover {
  transform: translateY(-2px);
  border-color: var(--akcent-detal);
  box-shadow: var(--ten-3), var(--ten-detali-navedenie);
  color: var(--tekst);
}

/* Значок наушников. Цвет берётся у текста кнопки, поэтому здесь только размер: маска
   позволяет покрасить одноцветный рисунок текущим цветом, не заводя второго файла. */
.chat__znak {
  flex: none;
  width: 20px;
  height: 20px;
}

.chat__znak--shapka {
  width: 22px;
  height: 22px;
}

/* Текст кнопки. На узком экране остаётся только значок — тот же приём, что у корзины
   в шапке: слово прячется, знак остаётся. */
.chat__knopka-name {
  white-space: nowrap;
}

@media (max-width: 26rem) {
  .chat__knopka-name { display: none; }
}

/* ── Открытое окно ─────────────────────────────────────────────────────────── */
.chat__okno {
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 6rem));
  border: 1px solid var(--frame);
  border-radius: var(--skruglenie);
  background: var(--steklo-panel);
  /* Размытие того, что лежит под окном: живой фон сайта иначе читается сквозь стекло
     и мешает буквам. */
  backdrop-filter: blur(14px);
  box-shadow: var(--ten-3);
  overflow: hidden;
}

.chat__shapka {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--frame);
  background: var(--steklo-shag);
}

.chat__imya {
  font-weight: 700;
  color: var(--tekst);
}

/* 🔴 Строка «ИИ-помощник» — не украшение, а то, что делает имя робота законным (разбор
   в шапке шаблона). Тише имени, но читаемо: цвет второстепенного текста, а не полупрозрачность. */
.chat__rol {
  color: var(--tekst-tihiy);
  font-size: 0.9rem;
}

.chat__zakryt {
  margin-left: auto;
  padding: 0.1rem 0.4rem;
  border: 0;
  border-radius: var(--skruglenie-melkoe);
  background: transparent;
  color: var(--tekst-tihiy);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.chat__zakryt:hover { color: var(--tekst); }

/* Лента реплик. Прокручивается только она — шапка и поле ввода остаются на месте.

   🔴 `min-height: 0` — страховка от известной ловушки `flex`, а не лечение пойманной поломки:
   элемент внутри `flex` по умолчанию не сжимается ниже своего содержимого, и длинная переписка
   может распереть окно выше `max-height`, вытолкнув поле ввода за край экрана. Снимок
   06.08.2026 показал раскладку целой и без этой строки — то есть в сегодняшнем Chrome она
   не требуется. Оставлена сознательно: цена ей ноль, а ломается такое молча и только
   на длинной переписке, когда на первом экране всё выглядит правильно. */
.chat__lenta {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat__privet {
  margin: 0;
  color: var(--tekst-myagkiy);
}

/* Готовые вопросы: список без маркеров, кнопки во всю ширину. */
.chat__voprosy {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chat__vopros {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--frame);
  border-radius: var(--skruglenie);
  background: var(--steklo-plitka);
  color: var(--tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat__vopros:hover {
  border-color: var(--kromka-glavnaya);
  color: var(--akcent-navedenie);
}

/* ── Реплики. Классы ставит скрипт, поэтому правила у них обязаны быть здесь ── */
.chat__replika {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--skruglenie);
  /* Перенос по словам и сохранение переводов строк: человек пишет списком, агент отвечает
     абзацами, и без этого свойства всё склеилось бы в одну строку. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Реплика клиента прижата вправо и заметно отличается фоном: разговор должен читаться,
   не вглядываясь, кто что сказал. */
.chat__replika--klient {
  align-self: flex-end;
  max-width: 85%;
  border: 1px solid var(--kromka-glavnaya);
  background: var(--zalivka-glavnaya);
  color: var(--tekst);
}

.chat__replika--agent {
  align-self: flex-start;
  max-width: 95%;
  border: 1px solid var(--frame);
  background: var(--steklo-plitka);
  color: var(--tekst-myagkiy);
}

/* «Алексей печатает…» — та же плитка, что у ответа, чтобы ответ не прыгал, встав на её место. */
.chat__dumaet {
  align-self: flex-start;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--frame);
  border-radius: var(--skruglenie);
  background: var(--steklo-plitka);
  color: var(--tekst-tihiy);
}

.chat__nizh {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--frame);
  background: var(--steklo-shag);
}

.chat__pole {
  flex: 1 1 auto;
  /* 🔴 Не мельче 16 точек: браузер телефона приближает страницу при вводе в мелкое поле,
     и попап уезжает за край экрана. Тот же довод, что у полей формы заявки. */
  font: inherit;
  font-size: 1.05rem;
  padding: 0.5rem;
  border: 1px solid var(--frame);
  border-radius: var(--skruglenie);
  background: var(--fon-kartochki);
  color: var(--tekst);
  resize: none;
}

.chat__otpravit {
  flex: none;
  align-self: flex-end;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: var(--skruglenie);
  background: var(--akcent);
  color: var(--tekst-na-akcente);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.chat__otpravit:hover { background: var(--akcent-navedenie); }

/* Кнопка на время ожидания ответа гаснет: второе нажатие завело бы второй вопрос
   в тот же разговор, а лимит подписки общий с чужим проектом. */
.chat__otpravit:disabled {
  background: var(--hvoya-panel);
  color: var(--tekst-tihiy);
  cursor: default;
}

/* Человек попросил систему убрать движение — эффект набора отключается СКРИПТОМ, здесь же
   гасится плавность появления окна. Правило стоит рядом, чтобы обе половины одного решения
   не разъехались. */
@media (prefers-reduced-motion: reduce) {
  .chat__okno { transition: none; }
}