/* Единый чат с клиентами — раздел #/chat.

   Два правила, как и у календаря, и по той же причине.

   1. Все классы с префиксом .chat-, все переменные с --chat-. Общие имена
      (--border, --ink) уже заняты в style.css, и переопределение поехало бы
      в воронке и таблице заявок.

   2. Порядок правил mobile-first: база — телефон, десктоп через
      @media (min-width: 768px). На телефоне список и переписка это ДВА
      состояния одного экрана, на десктопе — две колонки рядом.

   Палитра совпадает с calendar.css намеренно: это один продукт, и раздел не
   должен выглядеть вставкой из другого. */

.chat-root {
  /* Высота собственной шапки раздела. Высоту шапки ПРИЛОЖЕНИЯ здесь больше не
     держим: она жила тут числом 58px от старого верхнего навбара, и когда его
     заменили боковым меню, шапка «Диалогов» осталась прибитой на 58px ниже
     верха окна — замер в браузере показал, что она накрывала список на 57px. */
  --chat-top: 47px;

  --chat-bg: #f8fafc;
  --chat-panel: #ffffff;
  --chat-ink: #0f172a;
  --chat-muted: #64748b;
  --chat-faint: #94a3b8;
  --chat-line: #e2e8f0;
  --chat-line-2: #cbd5e1;
  --chat-brand: #1d4ed8;
  --chat-brand-ink: #ffffff;
  --chat-brand-soft: #eff6ff;
  --chat-unread: #dc2626;

  /* Реплика клиента и наша: разные фоны, потому что по одному выравниванию
     сторону не различить на узком экране. */
  --chat-in-bg: #ffffff;
  --chat-out-bg: #eff6ff;
  --chat-bot-bg: #f1f5f9;

  --chat-shadow: 0 1px 2px rgba(15, 23, 42, .06);

  color: var(--chat-ink);
  background: var(--chat-bg);
  /* clip, а не hidden: hidden делает элемент областью прокрутки, и тогда
     собственная шапка раздела прилипает ВНУТРИ карточки, а не к окну.
     Ровно на этом уже спотыкался календарь. */
  overflow: clip;
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  box-shadow: var(--chat-shadow);
}

/* Раздел шире стандартной колонки приложения: две панели рядом в 1280px
   выглядят зажатыми. Селектор :has ограничивает правило только этим экраном. */
/* Раздел занимает ровно окно: страница не прокручивается, прокрутка живёт
   внутри списка и ленты. Так шапке не подо что подлезать, а высоту не нужно
   считать формулой — её раздаёт flex.

   Правило общее для всех ширин: на телефоне у .chat-body тоже нет своей
   высоты, и без flex-родителя список рос бы по содержимому, утаскивая поле
   ввода за нижний край. */
#app-main:has(.chat-root) {
  max-width: none;
  padding: 0 20px;
  height: calc(100vh - var(--app-topbar-h, 0px));
  display: flex;
  flex-direction: column;
}
.chat-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ── верхняя полоса ──────────────────────────────────────────────────────── */
.chat-top {
  /* На десктопе раздел занимает ровно окно и не прокручивается — липкость там
     ни на что не влияет. Нужна она на телефоне, где страница едет; отступ
     берём от реальной высоты верхней полоски (style.css), а не от константы. */
  position: sticky; top: var(--app-topbar-h, 0px); z-index: 4;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; min-height: var(--chat-top);
  background: var(--chat-panel);
  border-bottom: 1px solid var(--chat-line);
}
.chat-title { font-weight: 600; font-size: 15px; }
.chat-search {
  flex: 1 1 200px; min-width: 0; max-width: 320px; margin-left: auto;
  padding: 6px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--chat-line-2); border-radius: 8px;
  background: var(--chat-panel); color: var(--chat-ink);
}
.chat-search:focus {
  outline: 2px solid var(--chat-brand); outline-offset: -1px; border-color: transparent;
}
.chat-tabs { display: flex; gap: 4px; flex: 0 0 auto; }
.chat-tab {
  padding: 5px 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--chat-line); background: var(--chat-panel);
  color: var(--chat-muted); cursor: pointer;
}
.chat-tab.is-on {
  background: var(--chat-brand-soft); border-color: var(--chat-brand);
  color: var(--chat-brand); font-weight: 500;
}
.chat-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chat-line-2); transition: background .3s;
}
.chat-live.is-fresh { background: #16a34a; }

/* ── раскладка ───────────────────────────────────────────────────────────── */
.chat-body {
  display: block;
  /* Высота приходит от flex-родителя, а не из calc с тремя константами.
     Прежняя формула вычитала 58 + 47 + 63 = 168px там, где хрома всего ~49px:
     список не доставал до низа окна на 116px (замерено). Любая правка полей
     страницы такую формулу снова ломает — flex же ничего не знает и не врёт. */
  flex: 1 1 auto;
  min-height: 0;
}
/* min-height: 0 обязателен и здесь, и ниже у ленты.

   Элемент flex/grid по умолчанию не может стать меньше своего содержимого
   (min-height: auto). Из-за этого лента переписки не начинала прокручиваться
   внутри себя, а растягивала колонку под всю высоту диалога — поле ввода
   уезжало за низ страницы, и прокручивалась вся страница целиком вместо ленты.
   Поймано в работе 27.08.2026. Тот же капкан уже ловили в календарной сетке. */
.chat-list {
  height: 100%; min-height: 0; overflow-y: auto; background: var(--chat-panel);
}
.chat-pane { display: none; height: 100%; min-height: 0; }
/* На телефоне переписка ЗАМЕЩАЕТ список: показывать обе панели на 360px
   значит не показать толком ни одну. */
.chat-root.is-thread-open .chat-list { display: none; }
.chat-root.is-thread-open .chat-pane { display: flex; flex-direction: column; }

/* ── строка списка ───────────────────────────────────────────────────────── */
.chat-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 14px; border: 0; border-bottom: 1px solid var(--chat-line);
  background: var(--chat-panel); color: inherit; font: inherit;
}
.chat-row:hover { background: #f8fafc; }
.chat-row.is-open { background: var(--chat-brand-soft); }
.chat-row-top { display: flex; align-items: baseline; gap: 8px; }
.chat-row-name {
  font-weight: 500; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-row-when { font-size: 12px; color: var(--chat-faint); flex: 0 0 auto; }
/* Число реплик клиента без ответа. Стоит рядом с именем, а не у времени:
   читается вместе с тем, КТО ждёт, а не с тем, когда это было. */
/* Метка «есть черновик» в строке списка. Приглушённая: это подсказка, где
   лежит работа, а не сигнал тревоги — в отличие от счётчика непрочитанного. */
.chat-d {
  flex: 0 0 auto; display: inline-flex; color: var(--chat-brand); opacity: .75;
}
.chat-tab-draft.is-on { border-color: #16a34a; color: #15803d; background: #dcfce7; }
.chat-n {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--chat-unread); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center;
}
.chat-row-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0;
}
.chat-row-prev {
  font-size: 13px; color: var(--chat-muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-row-foot { display: block; margin-top: 3px; }
.chat-taken { font-size: 11px; color: var(--chat-faint); }

/* Непрочитанное: жирное имя плюс точка слева. Только цветом отличать нельзя —
   часть людей его не различает, а строка списка это главный сигнал раздела. */
.chat-row.is-unread .chat-row-name { font-weight: 700; }
.chat-row.is-unread .chat-row-prev { color: var(--chat-ink); }
.chat-row.is-unread { position: relative; padding-left: 22px; }
.chat-row.is-unread::before {
  content: ""; position: absolute; left: 9px; top: 17px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--chat-unread);
}

/* Метка канала. Свой цвет у КАЖДОГО из пяти: одинаковые серые пилюли с одного
   взгляда не различаются, а канал — первое, что нужно понять в строке (в
   Telegram отвечают за секунды, на почту человек посмотрит завтра). Цвета взяты
   узнаваемые — фирменные у площадок, нейтральные у сайта и почты. */
.chat-ch {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 1.3; padding: 2px 6px;
  border-radius: 5px; font-weight: 600; letter-spacing: .01em;
  background: #f1f5f9; color: var(--chat-muted);
  border: 1px solid var(--chat-line); white-space: nowrap;
}
/* Инлайновый SVG наследует цвет и кегль текста — в отличие от эмодзи, который
   рисует система по своему усмотрению. */
.chat-i { flex: 0 0 auto; display: block; }
.chat-ch .chat-i { width: 11px; height: 11px; }
.chat-ch-tg   { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; }
.chat-ch-max  { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
.chat-ch-vk   { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.chat-ch-web  { background: #dcfce7; color: #15803d; border-color: #86efac; }
.chat-ch-mail { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
/* Корпоративные аккаунты. Цвет площадки берём тот же — канал тот же, — но
   заливку делаем плотнее: с той стороны живой менеджер, а не бот воронки, и
   отвечать туда надо иначе. Разницу несёт насыщенность, а не новый оттенок:
   семь разных цветов в одном списке перестают читаться. */
.chat-ch-tgu  { background: #bae6fd; color: #075985; border-color: #38bdf8; }
.chat-ch-maxu { background: #ddd6fe; color: #5b21b6; border-color: #a78bfa; }

/* ── шапка переписки ─────────────────────────────────────────────────────── */
.chat-head {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 10px 14px; background: var(--chat-panel);
  border-bottom: 1px solid var(--chat-line);
}
.chat-back {
  border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--chat-muted); cursor: pointer; padding: 0 6px;
}
.chat-head-main { min-width: 0; }
.chat-head-name {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-head-sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 2px; font-size: 12px; color: var(--chat-muted);
}

/* ── лента реплик ────────────────────────────────────────────────────────── */
.chat-feed {
  /* min-height: 0 — то, из-за чего лента вообще получает право прокручиваться:
     без него flex-элемент не сжимается ниже содержимого и растёт бесконечно. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
/* Короткую переписку прижимаем к низу, как в мессенджерах: свежее у поля ввода,
   а не наверху с пустотой под ним.

   Делаем это распоркой с margin-top:auto, а НЕ через justify-content:flex-end.
   У прокручиваемого контейнера flex-end обрезает верх содержимого недосягаемо,
   как только реплик становится больше экрана — до начала переписки уже не
   домотать. Распорка же схлопывается в ноль, едва содержимое переполнило ленту,
   и прокрутка работает обычным образом. */
.chat-feed::before { content: ""; margin-top: auto; }
.chat-feed > * { flex: 0 0 auto; }
.chat-day {
  align-self: center; font-size: 11px; color: var(--chat-faint);
  background: var(--chat-panel); border: 1px solid var(--chat-line);
  border-radius: 999px; padding: 2px 10px; margin: 6px 0 2px;
}
.chat-msg {
  max-width: 76%; padding: 7px 11px 5px; border-radius: 12px;
  border: 1px solid var(--chat-line); background: var(--chat-in-bg);
  box-shadow: var(--chat-shadow); word-wrap: break-word; overflow-wrap: anywhere;
}
.chat-msg.is-in { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.is-out {
  align-self: flex-end; background: var(--chat-out-bg);
  border-color: #bfdbfe; border-bottom-right-radius: 4px;
}
.chat-msg.is-bot { background: var(--chat-bot-bg); border-color: var(--chat-line); }
.chat-msg-who { font-size: 11px; color: var(--chat-muted); margin-bottom: 2px; }
.chat-msg-b { font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.chat-msg-t {
  display: block; text-align: right; font-size: 11px;
  color: var(--chat-faint); margin-top: 2px;
}
/* Время, восстановленное по последней активности беседы, а не настоящее.
   Пунктир — чтобы это было видно, но не кричало. */
.chat-msg-t.is-approx { border-bottom: 1px dotted var(--chat-line-2); display: inline-block; }

/* ── отправка ────────────────────────────────────────────────────────────── */
.chat-send {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 14px; background: var(--chat-panel);
  border-top: 1px solid var(--chat-line); flex-wrap: wrap;
}
/* Поле занимает всю строку, кнопки уходят под него — на любой ширине.

   На десктопе здесь стоял обратный override («ширины хватает, снова в одну
   строку»), и с двумя кнопками он был оправдан. Кнопок стало четыре, и поле
   ответа — главный элемент формы — сжалось до четверти ширины, уступив место
   вспомогательным подстановкам. Одна строка на ввод, вторая на действия. */
.chat-inp {
  flex: 1 0 100%; min-width: 0; min-height: 40px; max-height: 220px;
  padding: 9px 12px; font: inherit; font-size: 14px;
  /* resize: none — высоту ведёт autoGrow из chat.js. Оставить ручную тянучку
     значило бы, что заданный мышью размер слетает на следующем же нажатии
     клавиши. Упёршись в потолок, поле прокручивается внутри себя. */
  resize: none; overflow-y: auto;
  border: 1px solid var(--chat-line-2); border-radius: 10px;
  background: var(--chat-panel); color: var(--chat-ink);
  line-height: 1.45;
}
.chat-inp:focus {
  outline: 2px solid var(--chat-brand); outline-offset: -1px; border-color: transparent;
}
.chat-btn {
  flex: 0 0 auto; min-height: 40px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--chat-brand); background: var(--chat-brand);
  color: var(--chat-brand-ink); font-weight: 500; cursor: pointer;
}
.chat-btn:disabled { opacity: .6; cursor: default; }
/* «Отправить» прижата вправо, подстановки — влево. Так действие, завершающее
   работу, стоит там, где его ищут, и не смешивается со вспомогательными. */
.chat-send .chat-btn[type="submit"] { margin-left: auto; }
/* Второстепенная кнопка рядом с «Отправить»: подставляет готовый текст, но
   ничего никуда не шлёт, поэтому и выглядит тише основной. */
.chat-btn-2 {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--chat-panel); color: var(--chat-brand);
  border-color: var(--chat-line-2); font-weight: 500; padding: 0 12px;
}
.chat-btn-2:hover { border-color: var(--chat-brand); background: var(--chat-brand-soft); }
/* Та же кнопка, но ссылкой — вход через Битрикс в пустом состоянии списка. */
.chat-btn-link {
  display: inline-flex; align-items: center; text-decoration: none;
  padding: 10px 18px; margin-top: 4px;
}
.chat-send-msg { flex: 1 0 100%; font-size: 12px; color: var(--chat-muted); }

/* Кнопка только со значком — квадратная, без внутренних отступов под текст. */
.chat-btn-i { padding: 0 10px; }

/* Палитра эмодзи. Открывается над полем ввода, а не под ним: под полем у
   формы уже строка состояния отправки, и панель выталкивала бы её из виду. */
.chat-emoji {
  position: absolute; bottom: calc(100% + 6px); right: 14px; z-index: 6;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 8px; max-width: 320px;
  background: var(--chat-panel); border: 1px solid var(--chat-line);
  border-radius: 12px; box-shadow: var(--chat-shadow-lg, 0 8px 24px rgba(15,23,42,.14));
}
.chat-emoji[hidden] { display: none; }
.chat-emoji-b {
  border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1;
  padding: 5px; border-radius: 8px;
}
.chat-emoji-b:hover { background: var(--chat-brand-soft); }
.chat-send { position: relative; }

/* ── черновик от агента ──────────────────────────────────────────────────── */
/* Над полем ввода, а не в ленте: это предложение, а не сообщение. В ленте его
   приняли бы за отправленное. Фон другой и рамка пунктиром — чтобы ни на
   секунду не спутать с перепиской. */
.chat-draft {
  flex: 0 0 auto; margin: 0 14px 10px; padding: 10px 12px;
  border: 1px dashed var(--chat-line-2); border-radius: 12px;
  background: #fbfdff;
}
.chat-draft.is-low { border-color: #fcd34d; background: #fffbeb; }
.chat-draft-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--chat-muted); margin-bottom: 6px;
}
.chat-draft-warn {
  margin-left: auto; font-weight: 600; font-size: 11px;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 5px; padding: 1px 6px;
}
.chat-draft-b { font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
/* Пояснение агента: зачем он написал именно так. Читается за две секунды и
   экономит менеджеру разгадывание логики по тексту. */
.chat-draft-n {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--chat-line);
  font-size: 12px; color: var(--chat-muted); font-style: italic;
}
.chat-draft-a { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chat-draft-a > * { min-height: 34px; }
.chat-draft-msg { margin-top: 6px; font-size: 12px; color: var(--chat-muted); }
.chat-draft-msg.is-err { color: #b91c1c; }

/* Своё сообщение, ещё не прошедшее круг «очередь → бот → синхронизация».
   Приглушено, но читается: это уже сказанное, просто пока не подтверждённое. */
.chat-msg.is-pending { opacity: .72; }
.chat-msg-t.is-pending { color: var(--chat-faint); font-style: italic; }
/* Не ушло. Красная рамка, а не только подпись: в длинной ленте подпись у
   одного пузыря теряется, а рамку видно с расстояния. */
.chat-msg.is-failed { border-color: #fca5a5; background: #fef2f2; opacity: 1; }
.chat-msg-t.is-failed { color: #b91c1c; font-weight: 600; }
.chat-send-msg.is-ok { color: #15803d; }
.chat-send-msg.is-err { color: #b91c1c; }

/* ── мелочи ──────────────────────────────────────────────────────────────── */
.chat-empty {
  padding: 28px 18px; text-align: center; font-size: 14px; color: var(--chat-muted);
}
.chat-pane-empty { display: flex; align-items: center; justify-content: center; height: 100%; }
.chat-muted { color: var(--chat-muted); }
.chat-a { color: var(--chat-brand); text-decoration: underline; }

/* Бейдж непрочитанного в пункте меню. Живёт вне .chat-root — рисуется, даже
   когда раздел закрыт. */
.chat-badge {
  /* В боковом меню пункт стал flex-строкой, и бейдж должен прижиматься к
     правому краю, а не идти сразу за текстом: иначе у коротких названий он
     висит посреди пункта. margin-left:auto делает это без лишней разметки. */
  display: inline-block; margin-left: auto; padding: 1px 6px;
  border-radius: 999px; font-size: 11px; line-height: 1.5;
  background: var(--chat-unread, #dc2626); color: #fff; font-weight: 600;
  flex: none;
}
/* В свёрнутом меню подписи скрыты, и бейдж рядом с иконкой не помещается —
   показываем точкой. Число там всё равно было бы нечитаемым. */
body.nav-min .chat-badge {
  margin: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%;
  font-size: 0; position: absolute; top: 6px; right: 8px;
}
body.nav-min .nav-link { position: relative; }

/* ── десктоп ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* grid-template-rows обязателен: строка по умолчанию auto, то есть растёт под
     содержимое, и height:100% у колонок упирается в неё же — высота становится
     бесконечной, а внутренняя прокрутка не включается никогда. minmax(0, 1fr)
     жёстко привязывает строку к высоте .chat-body. */
  .chat-body {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .chat-list { border-right: 1px solid var(--chat-line); }
  /* Обе панели видны всегда: на широком экране прятать список незачем, а
     переключение «туда-обратно» на каждый диалог утомляет за день работы. */
  .chat-pane, .chat-root.is-thread-open .chat-pane { display: flex; flex-direction: column; }
  .chat-root.is-thread-open .chat-list { display: block; }
  .chat-back { display: none; }
  .chat-msg { max-width: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-live { transition: none; }
}

/* ── почта в переписке ────────────────────────────────────────────────────── */

/* Строка адресов под шапкой нити: на какой наш ящик написали и с какого адреса.
   Отдельной строкой, а не в общий ряд с бейджами каналов: адреса длинные, и на
   узком экране они выдавили бы имя клиента за край. */
.chat-head-mail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 4px; font-size: 12px; line-height: 1.4;
}
.chat-mail-box {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 6px;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  font-weight: 600;
}
.chat-mail-subj {
  color: #475569; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}

/* Поле темы. Занимает всю ширину формы: тема длиннее кнопки и в один ряд с
   ними не встаёт, а .chat-send и так flex-wrap. */
.chat-subj {
  flex: 1 0 100%;
  padding: 8px 11px; margin-bottom: 6px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  font: inherit; font-size: 14px; color: #0f172a; background: #fff;
}
.chat-subj::placeholder { color: #94a3b8; }
.chat-subj:focus { outline: 2px solid #6366f1; outline-offset: -1px; border-color: transparent; }

/* Переключатель канала ответа — только когда каналов больше одного. */
.chat-pick {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 6px; font-size: 12px; color: #64748b;
}
.chat-pick-b {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 7px;
  border: 1px solid #cbd5e1; background: #fff; color: #475569;
  font: inherit; font-size: 12px; cursor: pointer;
}
.chat-pick-b:hover { background: #f1f5f9; }
.chat-pick-b.is-on {
  background: #eef2ff; border-color: #6366f1; color: #4338ca; font-weight: 600;
}

/* ── подгрузка и период ───────────────────────────────────────────────────── */

/* Кнопка живёт В КОНЦЕ списка, а не в шапке: она относится к прокрученному
   хвосту, и человек добирается до неё ровно тогда, когда долистал. */
.chat-more {
  display: block; width: calc(100% - 20px); margin: 10px;
  padding: 9px 12px; border: 1px dashed #cbd5e1; border-radius: 9px;
  background: #fff; color: #475569; font: inherit; font-size: 13px; cursor: pointer;
}
.chat-more:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }
.chat-more:disabled { opacity: .6; cursor: default; }
.chat-more-end {
  padding: 12px 10px; text-align: center; font-size: 12px; color: #94a3b8;
}

/* Период. Два поля даты в шапке раздела; на узком экране переносятся вместе. */
.chat-dates { display: flex; align-items: center; gap: 5px; flex: none; }
.chat-date {
  padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px;
  font: inherit; font-size: 12px; color: #334155; background: #fff;
  /* Пустое поле даты в Chrome шире заполненного — фиксируем, чтобы шапка не
     дёргалась при выборе. */
  min-width: 128px;
}
.chat-date:focus { outline: 2px solid #6366f1; outline-offset: -1px; border-color: transparent; }
.chat-date-sep { color: #94a3b8; font-size: 12px; }
.chat-date-x {
  width: 24px; height: 24px; flex: none;
  border: 0; border-radius: 6px; background: transparent;
  color: #64748b; font-size: 17px; line-height: 1; cursor: pointer;
}
.chat-date-x:hover { background: #f1f5f9; color: #dc2626; }

@media (max-width: 900px) {
  .chat-dates { order: 3; }
  .chat-date { min-width: 0; flex: 1; }
}

/* ── подключение корпоративного аккаунта: QR ─────────────────────────────── */
.chat-dlg {
  border: 0; border-radius: 14px; padding: 0; max-width: 420px;
  background: var(--chat-panel); color: var(--chat-ink);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.chat-dlg::backdrop { background: rgba(15, 23, 42, .45); }
.chat-qr { padding: 18px 20px 22px; }
.chat-qr-h {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 15px; margin-bottom: 14px;
}
.chat-x {
  border: 0; background: transparent; color: var(--chat-muted);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.chat-x:hover { color: var(--chat-ink); }
/* Код должен быть крупным: его снимают телефоном с расстояния вытянутой руки,
   и мелкий QR камера ловит через раз. */
.chat-qr-img { display: flex; justify-content: center; margin-bottom: 14px; }
.chat-qr-img svg { width: 240px; height: 240px; display: block; }
.chat-qr-t { margin: 0; font-size: 13px; line-height: 1.5; color: var(--chat-muted); }
.chat-qr-acc { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: #15803d; }
.chat-qr-err { margin: 8px 0 0; font-size: 12px; color: #b91c1c; }

/* Кнопка «подключить аккаунт» — значок, а не надпись. В шапке раздела уже
   живут поиск, три вкладки и два поля дат; шестой подписанный элемент
   перетягивал на себя внимание, которое должно доставаться списку. */
.chat-add {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; font-weight: 400;
  border: 1px solid var(--chat-line-2); border-radius: 8px;
  background: var(--chat-panel); color: var(--chat-muted); cursor: pointer;
}
.chat-add:hover {
  border-color: var(--chat-brand); color: var(--chat-brand);
  background: var(--chat-brand-soft);
}

/* Выбор канала перед подключением. */
.chat-pick { display: flex; flex-direction: column; gap: 8px; }
.chat-pick-i {
  display: grid; grid-template-columns: 16px 1fr; gap: 2px 10px;
  align-items: center; text-align: left;
  padding: 11px 13px; border: 1px solid var(--chat-line); border-radius: 10px;
  background: var(--chat-panel); color: var(--chat-ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.chat-pick-i:hover:not(:disabled) {
  border-color: var(--chat-brand); background: var(--chat-brand-soft);
}
.chat-pick-i:disabled { opacity: .55; cursor: default; }
.chat-pick-s {
  grid-column: 2; font-size: 12px; font-weight: 400; color: var(--chat-muted);
}