/**
 * Страница-чат текстовой нейросети (ТЗ 9.10).
 *
 * Экран на всю высоту окна: страница целиком не прокручивается,
 * скроллятся список чатов и лента сообщений — каждый в своей области.
 * Поэтому раскладка держится на fixed и min-height: 0 у колонок:
 * без него flex-элемент не даёт вложенному блоку сжаться и прокрутка
 * уезжает на всю страницу.
 *
 * Цвета и размеры берутся из токенов дизайн-системы: собственных
 * значений здесь нет.
 */

.chat-page,
.chat-page__body {
  height: 100%;
  overflow: hidden;
}

/* Чат занимает всё, что осталось под общей шапкой сайта. */
.chat {
  position: fixed;
  inset: var(--h-head) 0 0 0;
  display: flex;
  overflow: hidden;
}

/* ============================ САЙДБАР ============================ */

.chat__side {
  flex: 0 0 272px;
  width: 272px;
  max-width: 272px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.chat-side__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 10px;
}



.chat-new {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  color: var(--tx);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-weight: 500;
  font-size: 13.5px;
}

.chat-new:hover {
  background: var(--surface3);
  border-color: var(--acc);
}

.chat-new-wrap {
  padding: 6px 14px 12px;
}

.chat-search {
  position: relative;
  margin: 0 14px 10px;
}

.chat-search input {
  width: 100%;
  height: 34px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 12px 0 32px;
  color: var(--tx);
  font-size: 13px;
}

.chat-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mut);
}

.chat-side__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 2px var(--s2) var(--s2);
}

.chat-side__label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px var(--s2) 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mut);
}

/* Строка чата в списке. Список плоский, без группировки по дате (ТЗ 9.10). */
.chat-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 9px;
  border-radius: var(--r-sm);
  color: var(--tx2);
  font-size: 13.5px;
}

/* Открытие чата — отдельная кнопка внутри строки: кнопки закрепления
   и удаления не могут лежать внутри неё. */
.chat-row__open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-row:hover {
  background: var(--surface2);
  color: var(--tx);
}

/* Открытый чат помечается aria-current, а не классом состояния. */
.chat-row[aria-current="true"] {
  background: var(--surface3);
  color: var(--tx);
}

.chat-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-row__pin {
  color: var(--acc);
  flex: none;
}

.chat-row__acts {
  display: none;
  gap: 3px;
  flex: none;
}

.chat-row:hover .chat-row__acts {
  display: flex;
}

.chat-row__acts button {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--mut);
  cursor: pointer;
  border-radius: 6px;
  display: grid;
  place-items: center;
}

.chat-row__acts button:hover {
  background: var(--surface);
  color: var(--tx);
}








/* ======================= ОСНОВНАЯ ОБЛАСТЬ ======================= */

.chat__main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Над лентой остались только кнопка сайдбара и плашка проекта:
   имя чата ушло в список слева, меню сайта — в общую шапку. */
.chat-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--s3) var(--s4) 0;
}



/* Навигация по сайту убрана в гамбургер: постоянная шапка отъедала бы
   высоту ленты (ТЗ 9.10). */




/* ============================ ЛЕНТА ============================ */

.chat-thread {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.chat-thread__col {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px var(--s5) calc(var(--composer-h, 150px) + var(--s5));
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  gap: 14px;
  padding: 0 var(--s5);
}

.chat-empty__mark {
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--acc-ink);
}

.chat-empty h2 {
  font-size: 22px;
}

.chat-empty p {
  color: var(--tx2);
  max-width: 44ch;
  margin: 0;
}

.chat-suggests {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.chat-suggest {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line2);
  background: var(--surface2);
  color: var(--tx2);
  cursor: pointer;
  font-size: 13px;
}

.chat-suggest:hover {
  background: var(--surface3);
  color: var(--tx);
  border-color: var(--acc);
}

/* ========================== СООБЩЕНИЯ ========================== */

.chat-msg {
  margin-bottom: 22px;
}

/* Подсветка сообщения, к которому привела прямая ссылка — например,
   «Результат» из истории генераций. Гаснет сама, чтобы не оставаться
   выделенной на всё время, пока открыта переписка. */
.chat-msg--flash {
  animation: chat-msg-flash 2.4s ease-out;
  border-radius: var(--r-lg);
}

@keyframes chat-msg-flash {
  0%, 35% {
    background: color-mix(in srgb, var(--acc) 16%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 1px transparent;
  }
}

.chat-msg--user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chat-msg__bubble {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 4px var(--r-xl);
  padding: 11px 15px;
  max-width: 80%;
  white-space: pre-wrap;
}

/* Одна строка под ответом: версия, цена, действия. Аватара нейросети
   и строки над сообщением нет — так решено в макете (ТЗ 9.10). */
.chat-msg__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: 11px;
  color: var(--mut);
}

.chat-msg__name {
  font-weight: 500;
  color: var(--tx2);
}

.chat-msg__sep {
  opacity: .5;
}

.chat-msg__meta .chat-act {
  margin-left: 2px;
}

.chat-msg__meta .chat-act:first-of-type {
  margin-left: var(--s2);
}

.chat-body p {
  margin: 0 0 11px;
  font-weight: 400;
}

.chat-body p:last-child {
  margin: 0;
}

.chat-body b {
  color: var(--tx);
  font-weight: 600;
}

/* Базовый слой снимает у ссылок цвет и подчёркивание — в ответе
   ссылку нужно отличать от текста с первого взгляда. */
.chat-body a[href] {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.chat-body a[href]:hover {
  color: var(--acc-d);
}

/* Таблица в ответе. Нейросеть охотно отвечает таблицей, и она
   обязана читаться таблицей, а не строкой слипшихся слов. На узком
   экране прокручивается вбок: сжимать колонки до нечитаемого нельзя. */
.chat-body table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 11px;
  font-size: 13px;
}

.chat-body th,
.chat-body td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}

.chat-body th {
  background: var(--surface2);
  color: var(--tx);
  font-weight: 600;
  white-space: nowrap;
}

.chat-body h3 {
  font-size: 15.5px;
  margin: 14px 0 7px;
}

.chat-body h3:first-child {
  margin-top: 0;
}

.chat-body ul {
  margin: 0 0 11px;
  padding-left: var(--s5);
}

.chat-body li {
  margin-bottom: 5px;
}

.chat-body code {
  font-family: var(--mono);
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .9em;
}

.chat-body pre {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--s3) 14px;
  padding-top: 34px;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 11px;
}

.chat-body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}

/* У блока кода своя кнопка копирования, отдельно от копирования
   всего ответа (ТЗ 9.10). */
.chat-code-copy {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line2);
  background: var(--surface3);
  color: var(--tx2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-code-copy:hover {
  background: var(--surface);
  color: var(--tx);
  border-color: var(--acc);
}

.chat-code-copy[data-done="true"] {
  color: var(--acc);
  border-color: var(--acc);
}

/* Прикреплённые файлы в сообщении пользователя. */
.chat-atts {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: 7px;
  justify-content: flex-end;
}

.chat-att {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px 11px;
  background: var(--surface3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  font-size: 12.5px;
}

/* Приложенная картинка: снимок вместо имени файла — по имени
   не понять, что на снимке. Щелчок открывает её целиком. */
.chat-att--img {
  padding: 0;
  overflow: hidden;
  width: 96px;
  height: 96px;
  display: block;
}

.chat-att--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-att--img:hover {
  border-color: var(--acc);
}

.chat-att__ic {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--acc-bg);
  display: grid;
  place-items: center;
  color: var(--acc);
  flex: none;
  font-size: 11px;
}

/* Файл-результат: иконка, имя, размер и тип, кнопка «Скачать» (ТЗ 9.10). */
.chat-file {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 13px 14px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* Карточка стоит под ответом, поэтому отступ сверху, а не снизу:
     снизу её и так отделяет строка с ценой и кнопками. */
  margin-top: 11px;
}

.chat-file__ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--acc-bg);
  display: grid;
  place-items: center;
  color: var(--acc);
  flex: none;
}

.chat-file__info {
  flex: 1;
  min-width: 0;
}

.chat-file__info b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-file__info span {
  font-size: 11.5px;
  color: var(--mut);
}

.chat-file__dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  background: var(--surface3);
  color: var(--tx);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  flex: none;
}

.chat-file__dl:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--acc-ink);
}

/* Отправленное голосовое: волна и длительность (ТЗ 9.10). */
.chat-voice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 4px var(--r-xl);
  max-width: 280px;
}

.chat-voice__play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--acc-ink);
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  border: 0;
}

.chat-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  flex: 1;
}

.chat-wave i {
  flex: 1;
  background: var(--acc);
  opacity: .55;
  border-radius: 2px;
  min-width: 2px;
}

/* Ожидание ответа: три точки на месте будущего сообщения. */
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mut);
  animation: chat-blink 1.2s infinite;
}

.chat-typing i:nth-child(2) { animation-delay: .2s; }
.chat-typing i:nth-child(3) { animation-delay: .4s; }

@keyframes chat-blink {
  0%, 60%, 100% { opacity: .3; }
  30% { opacity: 1; }
}

/* Иконка действия под ответом и кнопка «Размышление». */
/* Кнопки под ответом — со значком и подписью: по одному значку
   в них приходилось целиться наугад. */
.chat-act {
  height: 26px;
  padding: 0 7px;
  gap: 5px;
  border-radius: var(--s2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--mut);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 12.5px;
}

/* У своего сообщения подписей нет — там только значки. */
.chat-msg__acts .chat-act {
  width: 26px;
  padding: 0;
}

.chat-act:hover {
  background: var(--surface2);
  color: var(--tx2);
  border-color: var(--line);
}

.chat-act--wide {
  width: auto;
  padding: 0 10px;
  gap: 6px;
  font-size: 12px;
}

.chat-think {
  margin-bottom: 10px;
}

.chat-think__box {
  margin-top: var(--s2);
  padding: 10px 13px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.6;
}

/* ========================== КОМПОЗЕР ========================== */

/* Композер лежит поверх ленты: сообщения прокручиваются под ним
   и просвечивают сквозь фон. Чтобы последнее сообщение не пряталось,
   лента получает снизу отступ высотой с композер — её пишет chat.js
   в --composer-h, высота меняется с вложениями и длинным текстом.

   Просвечивающий текст размывается: полупрозрачного фона мало — буквы
   под ним читались и мешали набирать. Размытие слабое нарочно: смысл
   прозрачности в том, что под композером видно продолжение переписки,
   а сильный блюр стирал её в однородное пятно. Браузеру без
   backdrop-filter остаётся тот же фон, только без размытия. */
.chat-composer-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s3) var(--s5) var(--s4);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(4px);
}

.chat-composer {
  max-width: 820px;
  margin: 0 auto;
}

/* Поле ввода — «пилюля» с кнопкой отправки внутри. Рамка только у неё:
   строка под полем идёт без фона и рамок. */
.chat-pill {
  display: flex;
  /* Кнопка отправки должна стоять по центру пилюли, а не липнуть
     к низу: с однострочным текстом flex-end оставлял разный зазор
     сверху и снизу, и кнопка казалась смещённой вниз. */
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 4px 4px 4px 16px;
}

.chat-pill:focus-within {
  border-color: var(--acc);
}

.chat-composer textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  resize: none;
  outline: none;
  /* Предел высоты — десять строк, дальше поле прокручивается внутри.
     Точную высоту считает скрипт по реальной высоте строки. */
  max-height: calc(10 * 1.45em + 14px);
  line-height: 1.45;
  padding: 7px 0;
  color: var(--tx);
  font: inherit;
  overflow-y: hidden;
}

.chat-composer textarea::placeholder {
  color: var(--mut);
}

/* Чипы прикреплённых файлов — над полем ввода (ТЗ 9.10). */
.chat-pending {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  padding-bottom: 9px;
}

.chat-pending__item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
}

.chat-pending__item button {
  border: 0;
  background: transparent;
  color: var(--mut);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

/* Строка под полем: слева действия, по центру предупреждение,
   справа версия и усилие. */
.chat-tools {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px 6px 0;
}

.chat-tools__side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.chat-tools__side--end {
  margin-left: auto;
}

.chat-tools__hint {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Версия и усилие — в одну строку: без flex кнопки и их стрелки
   разъезжались по двум строкам. */
.chat-model-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.chat-model-wrap > .chat-model {
  flex: none;
}

/* Свёрнутая кнопка версии — без иконки-значка и без метки «Топ»:
   метка показывается только внутри списка (ТЗ 9.10). */
.chat-model {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--tx);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Усилие — второстепенная настройка, поэтому приглушено. */
.chat-model--mut {
  color: var(--mut);
}

.chat-model:hover,
.chat-model[aria-expanded="true"] {
  background: var(--surface2);
  color: var(--tx);
}

.chat-model b {
  font-weight: 600;
}

.chat-models {
  position: absolute;
  bottom: calc(100% + var(--s2));
  left: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  padding: 6px;
  z-index: 40;
}

.chat-models__opt {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--r-sm);
}

.chat-models__opt:hover {
  background: var(--surface2);
}

.chat-models__opt[aria-selected="true"] {
  background: var(--acc-bg);
}

.chat-models__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 6px 9px 9px;
  cursor: pointer;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--tx);
  text-align: left;
}

.chat-models__name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chat-models__price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut);
  white-space: nowrap;
}

/* Стрелочка открывает вложенное меню «Усилие». Она не выбирает версию
   и не закрывает список — самостоятельное действие (ТЗ 9.10). */
.chat-models__arrow {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--mut);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-right: 4px;
}

.chat-models__arrow:hover,
.chat-models__arrow[aria-expanded="true"] {
  background: var(--surface3);
  color: var(--tx);
}

.chat-effort {
  position: fixed;
  width: 172px;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  padding: 10px;
  z-index: 60;
}

.chat-effort__ttl {
  font-size: 10.5px;
  color: var(--mut);
  margin-bottom: var(--s2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.chat-effort__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s2);
  border-radius: var(--s2);
  cursor: pointer;
  font-size: 12.5px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--tx);
}

.chat-effort__opt:hover {
  background: var(--surface2);
}

.chat-effort__opt[aria-selected="true"] {
  color: var(--acc);
  font-weight: 600;
}

.chat-effort__opt svg {
  opacity: 0;
}

.chat-effort__opt[aria-selected="true"] svg {
  opacity: 1;
}

/* Кнопки под полем — без рамки и фона: строка должна быть тихой. */
.chat-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  color: var(--mut);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}

.chat-icon:hover {
  background: var(--surface2);
  color: var(--tx);
}

.chat-icon[data-recording="true"] {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
}

/* Кнопка отправки живёт внутри пилюли и загорается, когда есть что
   отправлять. */
.chat-send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  color: var(--mut);
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}

.chat-send:not(:disabled) {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--acc-ink);
}

.chat-send:disabled {
  cursor: not-allowed;
}



/* Запись голосового: таймер, отмена и отправка (ТЗ 9.10). */
.chat-rec {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 13px;
  background: color-mix(in srgb, var(--err) 10%, transparent);
  border: 1px solid var(--err);
  border-radius: var(--r-lg);
  margin-bottom: var(--s2);
}

.chat-rec__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--err);
  animation: chat-rec-pulse 1.2s infinite;
  flex: none;
}

.chat-rec span {
  flex: 1;
  font-size: 13px;
}

@keyframes chat-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ========================== МОБИЛЬНОЕ ========================== */

.chat-burger {
  display: none;
}

/* На узком экране прячется только подпись-подсказка: всё остальное
   в строке под полем остаётся на своих местах. */
@media (max-width: 560px) {
  .chat-tools__hint {
    display: none;
  }
}

@media (max-width: 640px) {
  .chat__side {
    position: fixed;
    top: var(--h-head);
    bottom: 0;
    left: 0;
    flex: 0 0 280px;
    width: 280px;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform .2s;
  }

  .chat__side[data-open="true"] {
    transform: translateX(0);
  }

  .chat-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 110;
  }

  .chat-burger {
    display: grid;
  }
}

/* Эффект печати: мигающая каретка в конце набираемого ответа. */
.chat-body.is-typing > :last-child::after,
.chat-body.is-typing:empty::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--acc);
  animation: chat-caret 1s steps(1) infinite;
}

@keyframes chat-caret {
  50% { opacity: 0; }
}

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

/* Проекты в списке чатов: заголовок проекта и его переписки.
   В чате проекта нейросеть видит инструкцию и файлы проекта. */
.chat-project {
  margin-bottom: 4px;
}

.chat-project__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--s2) 2px;
}

.chat-project__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: default;
}

.chat-project__new {
  width: 22px;
  height: 22px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mut);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.chat-project__new:hover {
  background: var(--surface2);
  color: var(--text);
}

.chat-project .chat-row {
  padding-left: 10px;
}

/* Меню переноса чата в проект — под строкой чата. */
.chat-move-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px var(--s2) 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.chat-move-menu__label {
  padding: 2px 6px 4px;
  font-size: 11px;
  color: var(--mut);
}

.chat-move-menu button {
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.chat-move-menu button:hover,
.chat-move-menu button[aria-current="true"] {
  background: var(--surface2);
}

/* Плашка проекта в шапке открытого чата. */
.chat-project-chip {
  max-width: 40%;
  margin-left: 8px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.chat-project-chip[hidden] {
  display: none;
}
/* ===================== ПОДСВЕТКА КОДА ===================== */
/* Цвета — свои для каждой темы: тёмная по умолчанию, светлая —
   по системе или явному выбору, как в tokens.css. */
.chat-body {
  --hl-kw: #C79BFF;
  --hl-str: #8FD694;
  --hl-num: #F2B36B;
  --hl-com: #7C8591;
  --hl-fn: #7DB8FF;
  --hl-var: #F28B8B;
  --hl-tag: #7DB8FF;
  --hl-attr: #F2B36B;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .chat-body {
    --hl-kw: #7A3EC8;
    --hl-str: #2C7A34;
    --hl-num: #A5570F;
    --hl-com: #8A929E;
    --hl-fn: #1E5FB8;
    --hl-var: #B53A3A;
    --hl-tag: #1E5FB8;
    --hl-attr: #A5570F;
  }
}

:root[data-theme="light"] .chat-body {
  --hl-kw: #7A3EC8;
  --hl-str: #2C7A34;
  --hl-num: #A5570F;
  --hl-com: #8A929E;
  --hl-fn: #1E5FB8;
  --hl-var: #B53A3A;
  --hl-tag: #1E5FB8;
  --hl-attr: #A5570F;
}

.hl-kw { color: var(--hl-kw); }
.hl-str { color: var(--hl-str); }
.hl-num { color: var(--hl-num); }
.hl-com { color: var(--hl-com); font-style: italic; }
.hl-fn { color: var(--hl-fn); }
.hl-var { color: var(--hl-var); }
.hl-tag { color: var(--hl-tag); }
.hl-attr { color: var(--hl-attr); }

/* ============ ДЕЙСТВИЯ СО СВОИМ СООБЩЕНИЕМ ============ */
.chat-msg__acts {
  display: flex;
  gap: var(--s1, 4px);
  margin-top: 4px;
  opacity: 0;
  transition: opacity .15s;
}

.chat-msg--user:hover .chat-msg__acts,
.chat-msg--user:focus-within .chat-msg__acts {
  opacity: 1;
}

@media (hover: none) {
  .chat-msg__acts {
    opacity: 1;
  }
}

/* Правка сообщения — поле на месте пузыря. */
.chat-edit {
  width: min(100%, 560px);
  background: var(--surface2);
  border: 1px solid var(--acc);
  border-radius: var(--r-xl);
  padding: 10px 12px;
}

.chat-edit textarea {
  width: 100%;
  min-height: 60px;
  max-height: 260px;
  resize: vertical;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  outline: none;
}

.chat-edit__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  font-size: 11px;
  color: var(--mut);
}

.chat-edit__foot span {
  margin-right: auto;
}

/* Расшифровка голосового — под записью. */
.chat-voice-text {
  max-width: 80%;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--tx2);
  white-space: pre-wrap;
}

/* Кнопка отправки на время ответа становится «Остановить». */
.chat-send[data-stop="true"] {
  background: var(--surface2);
  color: var(--tx);
  border: 1px solid var(--line);
}

/* Название чата в шапке переименовывается по клику. */


/* Файл тащат в окно — лента подсказывает, куда бросить. */
.chat__main[data-drop="true"] .chat-composer {
  outline: 2px dashed var(--acc);
  outline-offset: 3px;
}

/* Переименование переписки — прямо в строке списка. */
.chat-row__rename {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--tx);
  background: var(--surface2);
  border: 1px solid var(--acc);
  border-radius: 7px;
  padding: 3px 7px;
}