/* ============================================================
   Страница alexxx.ai/chat — чистый чат во весь экран (задача 2045).

   ЗДЕСЬ ТОЛЬКО ХРОМ СТРАНИЦЫ: тонкая шапка, её кнопки и высота экрана. Сам
   чат — лента, поле, пузыри, значки, ожидание — одет `vhod.css` (§17.2,
   правила `.ekran--chat`), тем же файлом и теми же правилами, что на
   главной. Второй копии стилей чата на витрине нет намеренно: они разошлись
   бы в первый же круг, и телефон узнал бы об этом последним.

   ТЕЛЕФОН ПЕРВЫМ. Базовые правила писаны под 390 px; всё, что шире, добирает
   воздух в @media (min-width: 761px). Все кнопки шапки — не меньше 44×44 по
   ОБЕИМ сторонам (урок #1950: `summary` дал 43,2 px по ширине при высоте 44
   и трижды закрыл ворота).
   ============================================================ */

/* Высота шапки уезжает в переменную: ею `vhod.css` считает высоту экрана
   чата (`height: calc(100dvh - var(--hdr-h))`). Своей формулы высоты у
   страницы нет — иначе их стало бы две. */
.chatstr { --hdr-h: 52px; margin: 0; }

/* На странице чата прокрутки нет вовсе: лента прокручивается внутри себя.
   Это и есть обещание «страница не растёт от сообщений» — держит его
   раскладка браузера, а не формула в скрипте. */
html { height: 100%; }
body.chatstr { height: 100%; overflow: hidden; }

/* ---------- тонкая шапка ---------- */
.chatstr-hdr {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--hdr-h);
  padding: 0 10px calc(0px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.chatstr-dom {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 8px;
  font-size: 14px; color: var(--text-2); text-decoration: none;
  border-radius: 10px;
}
.chatstr-dom:hover, .chatstr-dom:focus-visible { color: var(--text); }

/* Имя — по центру полосы и с живой точкой: гость должен видеть, КТО ему
   отвечает, раньше первой реплики. На 390 px подпись короче: «помощница
   A.L.E.X.» уносила строку в перенос и била высоту шапки. */
.chatstr-imya {
  flex: 1; margin: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14.5px; line-height: 1.2; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chatstr-tochka {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 60%, transparent);
}

.chatstr-knopki { display: flex; align-items: center; gap: 4px; }

.chatstr-skachat {
  min-height: 44px; min-width: 44px; padding: 0 12px;
  font: 13.5px var(--font); color: var(--text-2);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
.chatstr-skachat:hover:not([aria-disabled="true"]),
.chatstr-skachat:focus-visible { color: var(--text); border-color: var(--accent); }
/* Повтор клика (п.7): пока файл собирается, кнопка гаснет и не слушает —
   второго файла с тем же разговором не будет. */
.chatstr-skachat[aria-disabled="true"] { opacity: .5; cursor: default; }
/* Знак-стрелка живёт только на узком экране (см. @media ниже). */
.chatstr-skachat-znak { display: none; }

/* ---------- экран чата ---------- */
.chatstr-main { display: block; }
/* Строка обещания стоит НАД лентой и не отнимает у неё места в разговоре:
   `flex: 0 0 auto` — как у заголовка экрана в vhod.css §17.2. */
.chatstr-obeshchanie {
  flex: 0 0 auto; margin: 0 0 clamp(8px, 1.6vh, 16px);
  font-size: 14.5px; line-height: 1.45; color: var(--text-2);
  max-width: 620px;
}
/* Колонка разговора уже, чем 800 px общего правила: на чистой странице нет
   ни карточек, ни соседей, и широкая строка читается хуже. */
.chatstr .ekran--chat .ekran-in { width: min(100%, 760px); padding: 0 12px; }

/* НА ТЕЛЕФОНЕ ПОДПИСЬ КОРОЧЕ, А НЕ МЕЛЬЧЕ. Уменьшать кегль в шапке нельзя:
   это первая строка, которую гость читает на странице. */
@media (max-width: 480px) {
  /* На 390 px в полосе помещается либо дорога домой словами, либо подпись
     целиком — не то и другое разом. Обрезка подписи многоточием читается как
     поломка, поэтому лишнее прячется целыми узлами: у ссылки остаётся
     стрелка (подпись держит `aria-label`), у имени — «Хриса». */
  .chatstr-dom-slovo { display: none; }
  .chatstr-imya-dop { display: none; }
  .chatstr-imya { justify-content: flex-start; }
  .chatstr-skachat { padding: 0; width: 44px; }
  /* Слово уходит целым узлом, знак встаёт вместо него. Подпись для голосового
     доступа и клавиатуры держит `aria-label` кнопки — она на месте всегда. */
  .chatstr-skachat-slovo { display: none; }
  .chatstr-skachat-znak { display: block; font-size: 17px; line-height: 42px; }
}

@media (min-width: 761px) {
  .chatstr { --hdr-h: 58px; }
  .chatstr-hdr { padding: 0 18px; gap: 12px; }
  .chatstr-imya { font-size: 15px; }
}

/* Меньше движения — уважаем (тот же ключ, что у остальной витрины). */
@media (prefers-reduced-motion: reduce) {
  .chatstr-tochka { box-shadow: none; }
}