/* Чат: лента, панель ввода, экран со всеми чатами. */

.chat {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  min-height: 420px;
}

.chat__head {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chat__feed {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Высота ленты фиксируется, иначе прокручивалась бы вся страница и «низ»
     переставал бы что-либо значить. */
  height: min(58vh, 640px);
}

.chat__empty {
  margin: auto;
  color: var(--text-dim);
}

.chat__jump {
  position: absolute;
  right: 18px;
  bottom: 104px;
  background: var(--accent);
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
}

/* ─── Сообщение ─────────────────────────────────────────────────────────── */

.msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 6px;
}

/* ⚠️ Все сообщения идут ПО ЛЕВОМУ краю, свои в том числе (решение
   пользователя 2026-08-11): «мои справа, чужие слева — некомфортно». Своё от
   чужого отличает только оттенок пузыря, и `.msg--own` теперь несёт ровно это.
   Не возвращать `align-items: flex-end` — колонка с рваным краем читается
   хуже ровной, а второй признак различия здесь не нужен. */

.msg__head {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.msg__author { font-weight: 600; color: var(--text); }

.msg__bubble {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  max-width: min(70ch, 82%);
  position: relative;
}

/* ⚠️ Оттенок теперь ЕДИНСТВЕННЫЙ признак «своё / чужое» — сторона его больше
   не дублирует. Прежние #e8f1fe против #f8fafc различались на глаз, пока
   пузыри стояли по разным краям; в одной колонке два почти белых сливаются,
   поэтому синева углублена. Если вышло слишком ярко — правится этими двумя
   строками, но светлее прежнего делать нельзя: различать станет нечем. */
.msg--own .msg__bubble {
  background: #dbe8fb;
  border-color: #b5d0f4;
}

.msg__body { white-space: normal; word-break: break-word; }

.msg__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.msg__edited { font-style: italic; }
.msg__seen { cursor: help; }

/* Рамка цитаты над ответом. Кликается — прыгает к оригиналу. */
.msg__quote {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 3px solid #1f6feb;
  background: rgba(31, 111, 235, 0.06);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.msg__quote-who { display: block; font-weight: 600; }

.msg__quote-text {
  display: block;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg__reply {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}

/* Подсветка оригинала после прыжка по цитате. */
.msg.is-flash { animation: msg-flash 1.2s ease-out; }

@keyframes msg-flash {
  from { background: rgba(31, 111, 235, 0.18); }
  to { background: transparent; }
}

.composer__reply {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-left: 3px solid #1f6feb;
  background: rgba(31, 111, 235, 0.06);
  border-radius: 4px;
}

.composer__reply-who { font-weight: 600; }

.composer__reply-text {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.composer__reply button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* Реакции: чипы под пузырём, панель значков — абсолютом над ними. */
.msg__reactions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.react {
  border: 1px solid var(--border, #dfe4ea);
  background: var(--bg, #fff);
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.react--mine { border-color: #1f6feb; background: rgba(31, 111, 235, 0.1); }
.react--add { color: var(--text-dim); }

.sign-panel,
.emoji-panel {
  position: absolute;
  bottom: 100%;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: 4px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #dfe4ea);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.sign-panel button,
.emoji-panel button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 4px;
}

.sign-panel button:hover,
.emoji-panel button:hover { background: rgba(31, 111, 235, 0.12); }

.composer__emoji {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0 4px;
}

.msg__menu {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.msg--gone {
  color: var(--text-dim);
  font-size: 12px;
  align-items: center;
  margin: 4px auto;
}

.msg--event {
  align-items: center;
  margin: 6px auto;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 2px 10px;
}

.msg__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.msg__pic img {
  max-height: 180px;
  max-width: 260px;
  border-radius: 6px;
  display: block;
}

/* Миниатюра открывает окно, а не скачивание — курсор обязан об этом
   говорить: `zoom-in` отличает просмотр от загрузки файла рядом. */
.msg__pic { cursor: zoom-in; }

/* Картинка в окне. Потолок по высоте — чтобы вертикальный снимок не выехал
   за экран вместе с подвалом, где лежит «Скачать». */
.pic-view {
  display: flex;
  justify-content: center;
}

.pic-view img {
  max-width: 100%;
  max-height: 72vh;
  display: block;
}

.msg__file {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
}

/* ─── Панель ввода ──────────────────────────────────────────────────────── */

.composer {
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  position: relative;
}

.composer__row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  /* Якорь для панели пикера — она ставится абсолютом от строки ввода. */
  position: relative;
}

.composer__input {
  flex: 1;
  resize: vertical;
  min-height: 42px;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.composer__clip {
  cursor: pointer;
  font-size: 18px;
  padding: 6px;
  user-select: none;
}

.composer__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
}

.chip button {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
}

.mention-box {
  position: absolute;
  bottom: 64px;
  left: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 20;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
}

.mention-box__more {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

.mention-box__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
}

.mention-box__item:hover { background: var(--surface-2); }

/* ─── Экран «Чаты» ──────────────────────────────────────────────────────── */

/* ⚠️ Экран занимает РОВНО окно, и страница на нём не прокручивается вовсе.

   Прежде обе колонки росли по содержимому, а прокрутка своя была только у
   ленты. Складывалось это в стену выше экрана — шапка 52 + отступ 18 + строка
   «Чаты» 47 + шапка диалога + лента 560 + строка ввода, — и поле ввода
   оказывалось ниже кромки окна: человек прокручивал СТРАНИЦУ на каждое
   сообщение. Жалоба звучала как «лента не открывается на последнем», хотя
   лента открывалась на последнем всегда (`Chat.scrollDown` при загрузке).

   Отсюда же и «список прибит слева»: списку некуда уезжать, если страница не
   движется. Отдельного `position: sticky` не нужно.

   Вычитаемое: 52 шапка + 18 отступ `.view` сверху + 47 строка заголовка
   «Чаты» + 18 отступ снизу. */
.chats {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 12px;
  align-items: stretch;
  height: calc(100vh - 135px);
  min-height: 420px;
}

/* ⚠️ `min-height: 0` у каждого звена цепочки обязателен: у flex-элемента
   умолчание `min-height: auto`, он отказывается сжиматься меньше содержимого,
   и внутренняя прокрутка не появляется — вместо неё колонка распирает сетку. */
.chats__list {
  background: var(--surface);
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Своя прокрутка у списка. Полоса отбора остаётся на месте — прокручиваются
   строки, а не поиск с галкой. */
.chats__items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.chats__pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chats__box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ⚠️ Высота ленты переопределяется ТОЛЬКО здесь, под `.chats`. Глобальное
   правило `.chat__feed` кормит ещё и вкладку «Чат» карточки сделки, где лента
   стоит среди других блоков и обязана иметь свой рост: правка в нём уехала бы
   на экран, которого никто не смотрел. */
.chats__box .chat {
  flex: 1;
  min-height: 0;
  border: 2px solid var(--ok);
}

.chats__box .chat__feed {
  height: auto;
  flex: 1;
  min-height: 0;
}

/* Заглушка «выберите чат слева» носит ту же зелёную рамку: иначе правый фрейм
   до выбора чата выглядел бы чужим элементом, а не пустым фреймом. */
.chats__pane > .card { border: 2px solid var(--ok); }

.chats__filters {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.chats__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}

.chats__item:hover { background: var(--surface-2); }
.chats__item.is-active { background: #e8f1fe; }
.chats__item.is-unread .chats__title { font-weight: 700; }

.chats__title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.chats__preview {
  color: var(--text-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chats__badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}

.chats__empty {
  padding: 16px;
  color: var(--text-dim);
}

.nav__badge {
  background: var(--danger);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  padding: 0 5px;
  margin-left: 4px;
}

/* Узкий экран: колонки схлопываются, диалог открывается поверх списка.
   Часть продаж работает не из цеха — этот экран откроют с телефона. */
@media (max-width: 900px) {
  .chats { grid-template-columns: 1fr; }
  .chats--dialog .chats__list { display: none; }
  .chats--list .chats__pane { display: none; }
  .chat__feed { height: 60vh; }

  /* ⚠️ Окно во всю высоту здесь ОТМЕНЯЕТСЯ, и это не забытая мелочь. На
     телефонах `100vh` больше видимой области на высоту адресной строки:
     жёсткая высота обрезала бы строку ввода ровно там, где прокрутить к ней
     нечем. Колонка на узком экране всё равно одна, и обычный поток страницы
     ведёт себя правильно сам. */
  .chats { height: auto; }
  .chats__items { overflow-y: visible; }
  .chats__box .chat__feed { height: 60vh; flex: none; }
}