/* Чат и вход. Палитра, шрифт и переключатель темы — в `theme.css`: он один
   на все страницы службы, и здесь его значения не повторяются намеренно.
   Цвет в этом файле не объявляется нигде — только берётся ролью. */
/* Палитра — в `theme.css`, одна на все страницы. Здесь её нет
   намеренно: две копии переменных разъедутся в первую же правку, и
   человек, переключивший тему в чате, увидит в сводке прежнюю. */
* { box-sizing: border-box; }

/* Один раз на весь файл: тем, кто в системе просил меньше движения,
   анимации не показываем — это не украшение, а требование доступности. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* На время запуска переходы выключены: иначе панель, положение которой
   восстанавливается из памяти браузера, выезжала бы при каждой загрузке. */
body.no-anim * { transition: none !important; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--шрифт);
  color: var(--текст);
  background: var(--фон);
  font-size: var(--размер-тело);
  line-height: 1.55;
}

/* Панель вынута из потока и сдвигается transform'ом, а не шириной колонки:
   grid-template-columns анимируется не везде, а сдвиг и отступ — везде и плавно. */
.side {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--side); z-index: 20;
  background: var(--панель);
  border-right: 1px solid var(--граница);
  padding: 22px 20px;
  overflow: hidden;
  /* четырьмя рядами: кто вошёл, кнопка, список (он и тянется), шестерёнка.
     На flex с margin-top:auto низ зависел от того, растянулся ли список.
     Рядов ровно столько, сколько детей: лишний `1fr` достаётся не тому, кому
     назначался, — так кнопка «Новый чат» однажды и растянулась на всю панель,
     когда сверху добавилась строка с адресом вошедшего. */
  display: grid;
  /* Рядов ровно столько, сколько детей: логотип, подпись, кто вошёл, кнопка,
     поиск, список (он и тянется), каталог, сводка, шестерёнка (ночь 25:
     логотип, подпись и каталог добавлены). Пункт сводки не-админу скрыт
     совсем (`display:none`), рядом он не становится, и лишний ряд остаётся
     пустым — раскладка от этого не съезжает. */
  grid-template-rows: auto auto auto auto auto 1fr auto auto auto;
  gap: 18px;
  transform: translateX(0);
  transition: transform var(--slow) var(--ease);
}
body.side-hidden .side { transform: translateX(-100%); }
/* ------------------------------------------------------------- беседы */
.btn-new {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: var(--размер-кнопка); cursor: pointer;
  color: var(--на-основном); background: var(--основной); border: 0;
  border-radius: var(--r); padding: 11px 12px;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
/* Малиновый фон при наведении убран: акцент в этой палитре означает
   «внимание, опасно», а новая беседа — самое обычное действие. Вместо цвета
   отвечает движение, тем же приёмом, что у шестерёнки.

   Плюс поворачивается ровно на четверть оборота и в конце выглядит так же,
   как в начале: заметно, но ничего не обещает сверх того, что кнопка делает. */
.btn-new:hover { background: var(--основной-т); box-shadow: var(--тень-1); }
.btn-new svg { flex: none; transition: transform var(--slow) var(--ease); }
.btn-new:hover svg { transform: rotate(90deg); }

/* Список бесед занимает свободную высоту панели и прокручивается сам:
   настройки под ним должны оставаться на виду при любом числе бесед. */
.chats {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0; overflow-y: auto; margin: 0 -6px;
  padding: 0 6px;
}
.chats-empty { font-size: var(--размер-подпись); color: var(--текст-тихий); padding: 4px 6px; }
.chat-item {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border-radius: var(--r); padding: 8px 8px 8px 10px;
  transition: background var(--fast) var(--ease);
}
.chat-item:hover { background: var(--наведение); }
.chat-item.on { background: var(--выделение); box-shadow: inset 3px 0 0 var(--акцент); }
.chat-title {
  flex: 1; min-width: 0; font-size: var(--размер-кнопка); color: var(--основной);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item.on .chat-title { font-weight: 600; }
/* крестик показываем по наведению: в покое список читается спокойнее */
.chat-del {
  flex: none; width: 20px; height: 20px; line-height: 1; font-size: var(--размер-тело);
  color: var(--текст-тихий); background: none; border: 0; border-radius: var(--r);
  cursor: pointer; opacity: 0; transition: opacity var(--fast) var(--ease),
                                           background var(--fast) var(--ease);
}
.chat-item:hover .chat-del, .chat-del:focus-visible { opacity: 1; }
.chat-del:hover { background: var(--акцент-мягкий); color: var(--акцент); }

/* ------------------------------------------------- шестерёнка и окно настроек */
/* Настройки вынесены из панели: к ключу, модели и режиму поиска обращаются
   редко, а место в панели нужнее списку бесед. */
.gear {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; font: inherit; font-size: var(--размер-кнопка); font-weight: 500;
  color: var(--основной); cursor: pointer;
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r);
  padding: 10px 12px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.gear:hover { border-color: var(--основной); box-shadow: var(--тень-1); }
.gear svg { flex: none; transition: transform var(--slow) var(--ease); }
.gear:hover svg { transform: rotate(60deg); }


/* Пункт «Сводка по базе». Внешне — та же кнопка, что шестерёнка: два соседних
   ряда панели не должны выглядеть как элементы из разных служб. */
.side-link {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; font-size: var(--размер-кнопка); font-weight: 500; text-decoration: none;
  color: var(--основной);
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r);
  padding: 10px 12px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
/* Пункт сводки — ссылка, и общее правило `a:hover` красило её текст
   малиновым и подводило малиновую черту. Для кнопки в панели это выглядит как
   предупреждение, которым она не является: отменяем оба и здесь. */
.side-link:hover {
  border-color: var(--основной); box-shadow: var(--тень-1);
  color: var(--основной); background-size: 0 1px;
}
.side-link { background-image: none; box-shadow: none; }
.side-link[hidden] { display: none; }
.side-link svg { flex: none; }

/* Столбцы значка меняют высоту поодиночке и с задержкой друг за другом —
   как будто на диаграмме сменились данные. `transform-box: fill-box` нужен,
   чтобы каждая линия считала начало отсчёта от себя, а не от всего рисунка;
   без него все четыре тянулись бы от нижнего края холста. */
.side-link svg line {
  transform-box: fill-box; transform-origin: bottom;
  transition: transform .26s var(--ease);
}
.side-link:hover svg line:nth-of-type(1) { transform: scaleY(1.65); transition-delay: 0ms; }
.side-link:hover svg line:nth-of-type(2) { transform: scaleY(.55); transition-delay: 45ms; }
.side-link:hover svg line:nth-of-type(3) { transform: scaleY(1.5); transition-delay: 90ms; }
.side-link:hover svg line:nth-of-type(4) { transform: scaleY(.7); transition-delay: 135ms; }

/* Окно и затемнение появляются плавно. Закрывать окно сразу нельзя: элемент
   покидает верхний слой мгновенно, и затемнение пропало бы рывком, — поэтому
   close() откладывается в коде ровно на длину перехода. */
.modal {
  opacity: 0; transform: translateY(-10px) scale(.985);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  width: min(560px, calc(100vw - 32px));
  border: 0; border-radius: var(--r); padding: 0;
  background: var(--карточка); color: var(--текст);
  box-shadow: var(--тень-4);
}
.modal.on { opacity: 1; transform: none; }
.modal::backdrop {
  background: var(--подложка-окна); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--slow) var(--ease);
}
.modal.on::backdrop { opacity: 1; }
/* заголовок с акцентной чертой — тот же приём, что был у разделов панели */
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px 14px; border-bottom: 2px solid var(--акцент);
  margin: 0 0 0;
}
.modal-head h2 {
  margin: 0; font-size: var(--размер-подпись); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--основной);
}
.modal-close {
  font: inherit; font-size: var(--размер-крупный); line-height: 1; color: var(--текст-тихий);
  background: none; border: 0; border-radius: var(--r); cursor: pointer;
  width: 30px; height: 30px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.modal-close:hover { background: var(--акцент-мягкий); color: var(--акцент); }
.modal-body {
  display: flex; flex-direction: column; gap: 22px;
  padding: 24px 28px 28px; max-height: 74vh; overflow-y: auto;
}
/* в окне сведения о базе стоят наравне с полями, а не прижаты к низу панели */
.modal-body .side-stats { margin-top: 0; border-top: 0; padding-top: 0; }

.field { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; margin: 0; }
.field-label { font-size: var(--размер-подпись); font-weight: 500; color: var(--текст-тихий);
               letter-spacing: .04em; text-transform: uppercase; }
.field-label b { color: var(--основной); }
.hint { font-size: var(--размер-подпись); color: var(--текст-тихий); }

input[type=password], select, textarea {
  font: inherit; color: var(--текст); background: var(--карточка);
  border: 1px solid var(--граница); border-radius: var(--r); padding: 9px 11px;
  width: 100%; outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input[type=password]:hover, select:hover, textarea:hover { border-color: var(--граница-ярче); }
input[type=password]:focus, select:focus, textarea:focus {
  border-color: var(--основной); box-shadow: 0 0 0 3px var(--кольцо);
}

/* ------------------------------------------------------------- ползунок */
/* Положение бегунка у нативного ползунка анимировать нечем: браузер ставит его
   по значению мгновенно, и при 15 делениях он телепортируется между ними.
   Поэтому нативный лежит сверху прозрачным и принимает мышь, касания,
   клавиатуру и доступность, а дорожку с бегунком рисуем своими элементами —
   их положение уже переходит плавно. Долю пройденного (--p, от 0 до 1)
   ставит app.js. */
.slider { position: relative; height: 24px; --p: .43; }
.slider input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.slider-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 5px;
  transform: translateY(-50%); background: var(--граница); border-radius: var(--r-тонкий);
  overflow: hidden;
}
.slider-fill {
  height: 100%; border-radius: var(--r-тонкий); background: var(--основной);
  width: calc(var(--p) * (100% - 18px) + 9px);
  transition: width var(--glide) var(--ease);
}
.slider-thumb {
  position: absolute; top: 50%; width: 18px; height: 18px;
  left: calc(var(--p) * (100% - 18px));
  border-radius: 50%; background: var(--карточка); border: 2px solid var(--основной);
  transform: translateY(-50%);
  transition: left var(--glide) var(--ease), width var(--fast) var(--ease),
              height var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
/* Тень и рост — на самом бегунке; масштабировать через transform нельзя,
   он уже занят вертикальным центрированием. */
.slider:hover .slider-thumb { box-shadow: 0 0 0 6px var(--кольцо); }
.slider:active .slider-thumb {
  width: 22px; height: 22px; border-color: var(--акцент);
  box-shadow: 0 0 0 8px var(--кольцо-акцент);
}
.slider input[type=range]:focus-visible ~ .slider-thumb {
  box-shadow: 0 0 0 6px var(--кольцо-плотное);
}

.radio { display: flex; align-items: center; gap: 8px; font-size: var(--размер-кнопка); cursor: pointer;
         padding: 3px 5px; margin-left: -5px; border-radius: var(--r);
         transition: background-color var(--fast) var(--ease); }
.radio:hover { background: var(--наведение); }
.radio input { accent-color: var(--основной); margin: 0; }

.side-stats {
  margin-top: auto; font-size: var(--размер-кнопка); color: var(--текст-тихий);
  border-top: 1px solid var(--граница); padding-top: 14px;
}
.side-stats b { color: var(--основной); }

.btn-ghost {
  font: inherit; font-weight: 500; cursor: pointer;
  background: var(--карточка); color: var(--основной);
  border: 1px solid var(--граница); border-radius: var(--r); padding: 9px 12px;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn-ghost:hover { border-color: var(--основной); box-shadow: var(--тень-1); }
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }

/* ---------------------------------------------------------------- центр */
.main {
  display: flex; flex-direction: column; height: 100vh; min-width: 0;
  margin-left: var(--side);
  position: relative;              /* точка отсчёта для кнопки возврата вниз */
  transition: margin-left var(--slow) var(--ease);
}
body.side-hidden .main { margin-left: 0; }

.head {
  position: sticky; top: 0; z-index: 5; background: var(--карточка);
  border-bottom: 1px solid var(--граница);
  padding: 20px 40px 14px;
  display: flex; align-items: center; gap: 16px;
  transition: padding var(--slow) var(--ease);
}
.head-text { min-width: 0; }
/* Переход в каталог с главной (решение владельца 20.10): вторичная кнопка
   справа в шапке, как «Выгрузить CSV» в сводке. */
.head-каталог {
  margin-left: auto; flex: none; white-space: nowrap; text-decoration: none;
  font-size: var(--размер-кнопка); font-weight: 500; color: var(--основной);
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r);
  padding: 8px 14px; background-image: none;
}
.head-каталог:hover { border-color: var(--основной); color: var(--основной); background-size: 0 1px; }
.side-link + .side-link { margin-top: 8px; }
.head h1 {
  margin: 0; font-size: var(--размер-заголовок); font-weight: 700; letter-spacing: -.02em;
  color: var(--основной); transition: font-size var(--slow) var(--ease);
}

/* Кнопка сворачивания панели: окно с боковой колонкой и шеврон направления.
   Прежде это были три полосы, складывавшиеся в звёздочку, и они выглядели
   разной толщины. Причина не в значениях: полоса в 2 px по пиксельной сетке
   рисуется чётко, а повёрнутая на 45° размазывается по трём пикселям с
   полупрозрачными краями. В SVG толщина задана штрихом и одинакова при любом
   угле. */
.burger {
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0; cursor: pointer;
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--основной);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.burger:hover { border-color: var(--основной); background: var(--панель); }
/* Двигается один шеврон: панель открыта — он указывает влево («свернуть»),
   закрыта — вправо («развернуть»). Больше не анимируется ничего. */
.burger .ptr {
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--slow) var(--ease);
}
body.side-hidden .burger .ptr { transform: rotate(180deg); }
/* при прокрутке шапка ужимается; класс ставит app.js, а не прокруточная
   анимация CSS: она не работает, когда прокручивается внутренний контейнер */
.head.small { padding: 10px 40px 9px; }
.head.small h1 { font-size: var(--размер-тело); }

/* scroll-behavior: smooth здесь убран намеренно: во время генерации лента
   подкручивается на каждую порцию текста, и плавная прокрутка на каждую из них
   боролась с колесом мыши. Плавность оставлена только кнопке возврата вниз. */
.thread { flex: 1; overflow-y: auto; padding: 26px 40px 10px; overscroll-behavior: contain; }

/* кнопка «к последним строкам» — появляется, когда лента отпущена */
.jump {
  position: absolute; right: 34px; bottom: 92px; z-index: 6;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--карточка); color: var(--основной);
  border: 1px solid var(--граница); border-radius: 50%;
  box-shadow: var(--тень-3);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease),
              visibility var(--fast), border-color var(--fast) var(--ease);
}
.jump.on { opacity: 1; visibility: visible; transform: translateY(0); }
.jump:hover { border-color: var(--основной); }
.thread-inner { max-width: 860px; margin: 0 auto; }

/* ------------------------------------------------------------ сообщения */
.msg {
  border: 1px solid var(--граница); border-left: 3px solid var(--основной);
  border-radius: var(--r); padding: 14px 18px; margin: 0 auto 14px;
  max-width: 860px; background: var(--карточка);
}
.msg.user { background: var(--панель); }
.msg.bot { border-left-color: var(--акцент); }
.msg-role {
  font-size: var(--размер-подпись); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--текст-тихий); margin-bottom: 7px;
}
.msg.bot .msg-role { color: var(--акцент); }
.msg-body > :first-child { margin-top: 0; }
.msg-body > :last-child { margin-bottom: 0; }
.msg-body p { margin: 0 0 .7em; }
.msg-body ul, .msg-body ol { margin: 0 0 .7em; padding-left: 1.3em; }
.msg-body li { margin-bottom: .25em; }
.msg-body code {
  background: var(--панель); border: 1px solid var(--граница); border-radius: var(--r);
  padding: 1px 5px; font-size: .92em;
}
.msg-body table { border-collapse: collapse; margin: 0 0 .7em; width: 100%; }
.msg-body th, .msg-body td { border: 1px solid var(--граница); padding: 6px 9px; text-align: left; }
.msg-body th { background: var(--панель); font-weight: 500; }

/* Подчёркивание рисуется фоном и разъезжается от левого края, а не
   мигает сменой цвета рамки: рамку плавно показать нельзя, фон — можно. */
a {
  color: var(--основной); text-decoration: none;
  background-image: linear-gradient(var(--акцент), var(--акцент));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  box-shadow: inset 0 -1px 0 var(--подчёркивание);
  transition: color var(--fast) var(--ease), background-size var(--slow) var(--ease);
}
a:hover { color: var(--акцент); background-size: 100% 1px; }

.caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: -2px;
         background: var(--акцент); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }


/* ------------------------------------------------------------- витрина */
/* Три случайных препарата на пустой странице. Плитки те же, что под ответом:
   препарат должен выглядеть одинаково, где бы ни показывался. */
.showcase { margin-top: 26px; text-align: left; }
.showcase-title {
  font-size: var(--размер-подпись); font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--текст-тихий); margin-bottom: 10px;
}
/* Двух кнопок в подвале плитки быть не должно в одну строку встык: между
   ними нужен зазор, иначе они читаются как одна широкая. */
.drug-foot { display: flex; gap: 6px; flex-wrap: wrap; }
.drug-foot .file { flex: 1 1 auto; }

/* Итог шага — что вышло, а не что собирались сделать. Серым и мельче:
   намерение читают первым, итог — вторым. */
.step-out {
  color: var(--текст-тихий); font-size: var(--размер-подпись); margin-left: 6px;
}
.step-out::before { content: "→ "; }

/* Как искалось по базе: строки из недр поиска. Отступом и мельче — это
   подробность к шагу, а не самостоятельный шаг. */
.step-sub {
  margin: 3px 0 0; padding-left: 16px; list-style: none;
  color: var(--текст-тихий); font-size: var(--размер-подпись);
}
.step-sub li { padding: 1px 0; }

/* ------------------------------------------------- ход работы агента */
/* Стоит между вопросом и ответом и свёрнут: это справка о том, откуда взят
   ответ, а не сам ответ. Оформлен тише ответа нарочно — он не должен
   перетягивать взгляд. */
.steps { max-width: 860px; margin: 0 auto 12px; font-size: var(--размер-кнопка); }
.steps summary {
  cursor: pointer; user-select: none; padding: 7px 0;
  color: var(--текст-тихий); transition: color var(--fast) var(--ease);
}
.steps summary:hover { color: var(--основной); }
.steps-list {
  margin: 4px 0 6px; padding: 10px 14px 10px 32px;
  background: var(--панель); border-radius: var(--r);
  border-left: 3px solid var(--граница);
}
.steps-list li { margin-bottom: 5px; color: var(--основной); }
.steps-list li:last-child { margin-bottom: 0; }
/* Имя инструмента — тем же шрифтом, что и прочий моноширинный текст службы. */
.steps-list code {
  margin-left: 7px; font-size: var(--размер-подпись); color: var(--текст-тихий);
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r);
  padding: 1px 6px;
}

/* ------------------------------------------------------------ материалы */
.attach {
  max-width: 860px; margin: 0 auto 16px;
  background: var(--панель); border: 1px solid var(--граница);
  border-left: 4px solid var(--акцент); border-radius: var(--r);
  padding: 15px 18px;
}
.attach-title {
  font-size: var(--размер-подпись); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--основной); border-bottom: 1px solid var(--граница);
  padding-bottom: 8px; margin-bottom: 12px;
}
.attach-sec {
  font-size: var(--размер-подпись); font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--текст-тихий); margin: 14px 0 8px;
}
.attach-sec:first-of-type { margin-top: 0; }

/* Размер снимка зависит от их количества: один показываем крупно, а когда
   их полтора десятка — сетка ужимается, иначе материалы вытеснят сам ответ.
   Число проставляет app.js в data-n. Крупно любой смотрится по щелчку. */
.photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.photos[data-n="1"] { grid-template-columns: minmax(0, 460px); }
.photos[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photos[data-n="3"], .photos[data-n="4"] { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.photos.many { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

.photo {
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r); padding: 10px;
  cursor: zoom-in; margin: 0;
  transition: border-color var(--fast) var(--ease), box-shadow var(--slow) var(--ease),
              transform var(--slow) var(--ease);
}
.photo:hover {
  border-color: var(--основной); transform: translateY(-2px);
  box-shadow: var(--тень-2);
}
.photo img {
  width: 100%; height: 320px; object-fit: contain; display: block;
  transition: height var(--slow) var(--ease);
}
.photos[data-n="2"] .photo img { height: 260px; }
.photos[data-n="3"] .photo img, .photos[data-n="4"] .photo img { height: 210px; }
.photos.many .photo img { height: 140px; }
.photo figcaption { font-size: var(--размер-подпись); color: var(--текст-тихий); margin-top: 8px; text-align: center; }

/* --------------------------------------------------- плитка препарата */
/* Одна плитка — один препарат: снимок, название, производитель, фасовки,
   кнопка инструкции. Прежде снимок стоял в одном разделе, ссылка на тот же
   препарат — в другом, и связать их можно было только чтением подписей.
   Приём с data-n тот же, что был у снимков: один препарат крупно, при пяти и
   больше сетка ужимается, чтобы материалы не вытеснили сам ответ. */
.drugs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.drugs[data-n="1"] { grid-template-columns: minmax(0, 420px); }
.drugs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drugs[data-n="3"], .drugs[data-n="4"] { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.drugs.many { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.drug {
  display: flex; flex-direction: column;
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r);
  padding: 10px;
  transition: border-color var(--fast) var(--ease);
}
.drug:hover { border-color: var(--граница); }

/* Снимок внутри плитки — без своей рамки и полей: рамка теперь у плитки.
   Поднимается при наведении **только он**: подъём всей плитки при наведении на
   ссылку внутри неё выглядит нервно. */
.drug .photo {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 9px;
}
.drug .photo:hover {
  transform: translateY(-2px); box-shadow: var(--тень-2);
}
.drug .photo img { height: 170px; }
.drugs[data-n="1"] .drug .photo img { height: 300px; }
.drugs[data-n="2"] .drug .photo img { height: 220px; }
.drugs.many .drug .photo img { height: 140px; }

/* Заглушка ровно того же размера, что снимок: иначе сетка скачет. Ни надписи
   «нет фото», ни перечёркнутой картинки — препарат от этого не хуже. Щелчка по
   ней нет, увеличивать нечего. */
.noshot {
  height: 170px; margin-bottom: 9px; border-radius: var(--r);
  background: var(--панель); color: var(--текст-тихий);
  display: flex; align-items: center; justify-content: center;
}
.drugs[data-n="1"] .noshot { height: 300px; }
.drugs[data-n="2"] .noshot { height: 220px; }
.drugs.many .noshot { height: 140px; }

.drug-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.drug-name { font-size: var(--размер-кнопка); font-weight: 500; color: var(--основной); overflow-wrap: anywhere; }
.drug-co { font-size: var(--размер-подпись); color: var(--текст-тихий); overflow-wrap: anywhere; }

.packs summary {
  font-size: var(--размер-подпись); color: var(--основной); cursor: pointer; user-select: none;
  padding: 2px 0;
}
.packs summary:hover { color: var(--акцент); }
.packs-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--размер-подпись); }
.packs-list li { margin-bottom: 3px; overflow-wrap: anywhere; }
.calc, .drug .note { font-size: var(--размер-подпись); }
.drug .note { color: var(--текст-тихий); font-size: var(--размер-подпись); }

/* Кнопки инструкций выстраиваются по нижнему краю: плитки бывают разной
   высоты, и ряд кнопок вразнобой сразу выдаёт неряшливость. */
.drug-foot { margin-top: auto; padding-top: 10px; }
.drug-foot .file { width: 100%; justify-content: center; text-align: center; }

/* ------------------------------------------------------- увеличенное фото */
.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--подложка); cursor: zoom-out; padding: 40px;
  opacity: 0; transition: opacity var(--slow) var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.on { opacity: 1; }
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 82vh; object-fit: contain;
  background: var(--карточка); border-radius: var(--r); padding: 12px;
  transform: scale(.96); transition: transform var(--slow) var(--ease);
}
.lightbox.on img { transform: scale(1); }
.lightbox-cap { color: var(--на-подложке); font-size: var(--размер-кнопка); text-align: center; }

.links { margin: 0; padding: 0; list-style: none; }
.links li { margin-bottom: 8px; }
.links .meta { display: block; font-size: var(--размер-подпись); color: var(--текст-тихий); }

.files { display: flex; flex-wrap: wrap; gap: 9px; }
.file {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--основной); color: var(--на-основном);
  border: 1px solid var(--основной);
  border-radius: var(--r); padding: 8px 13px; font-size: var(--размер-кнопка); font-weight: 500;
  box-shadow: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.file:hover { background: var(--карточка); color: var(--основной); box-shadow: var(--тень-3); background-size: 0 1px; }
.file:active { transform: translateY(1px); box-shadow: none; }


/* ------------------------------------------------------------ пустой вид */
.empty { max-width: 860px; margin: 40px auto; text-align: center; color: var(--текст-тихий); }
.empty h2 { color: var(--основной); font-size: var(--размер-крупный); margin: 0 0 8px; }
.empty p { margin: 0 0 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chip {
  font: inherit; font-size: var(--размер-кнопка); cursor: pointer; color: var(--основной);
  background: var(--карточка); border: 1px solid var(--граница); border-radius: var(--r);
  padding: 8px 13px;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              box-shadow var(--slow) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover {
  border-color: var(--основной); background: var(--панель);
  transform: translateY(-2px); box-shadow: var(--тень-2);
}
.chip:active { transform: translateY(0); box-shadow: none; }

/* -------------------------------------------------------------- ввод */
.composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 14px 40px 20px; border-top: 1px solid var(--граница); background: var(--карточка);
}
/* Выбор отрасли слева от поля (ночь 17). Видно выбранное, не открывая список;
   на узком экране встаёт над полем, а не сжимает его до нечитаемого. */
.отрасль-выбор { flex: 0 0 auto; margin-left: auto; }
/* Кнопка списка — тоже <button> внутри .composer, и правила кнопки отправки
   (синий фон, 42×42) легли бы на неё: возвращаем вид списка явно. */
.composer .отрасль-выбор .список-кнопка {
  width: auto; height: auto; min-width: 168px; padding: 10px 11px; font-size: var(--размер-кнопка);
  margin: 0; background: var(--карточка); color: var(--текст); border-color: var(--граница);
  box-shadow: none; transform: none;
}
.composer .отрасль-выбор .список-кнопка:hover { background: var(--наведение); box-shadow: none; }
.composer .отрасль-выбор .список-кнопка svg { transform: none; }
.composer .отрасль-выбор.выбрана .список-кнопка {
  border-color: var(--основной); color: var(--основной); font-weight: 600;
  background: var(--выделение);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.head-отрасль {
  display: inline-block; margin-top: 4px; padding: 2px 9px; font-size: var(--размер-кнопка);
  border-radius: var(--r-пункт); color: var(--основной);
  background: var(--выделение); border: 1px solid var(--основной);
}
.head-отрасль[hidden] { display: none; }
.chat-отрасль {
  flex: none; font-size: var(--размер-подпись); color: var(--основной); border: 1px solid var(--основной);
  border-radius: var(--r-пункт); padding: 0 5px; line-height: 16px;
}
/* Под ответом: с какой отраслью он был дан. Через неделю иначе не понять,
   почему ответ был коротким. */
.отрасль-метка { font-size: var(--размер-подпись); color: var(--текст-тихий); margin: 6px 0 0; }
/* Поле вопроса растёт под текст до 180 пикселей, а дальше прокручивается.
   Полосу прокрутки в нём прячем: поле низкое, полоса в нём занимает заметную
   долю ширины и выглядит поломкой. Прокрутка при этом остаётся — колесом,
   клавишами и за курсором, — поэтому длинный вопрос не становится
   недоступным. */
.composer textarea {
  resize: none; max-height: 180px; max-width: 860px;
  scrollbar-width: none;
}
.composer textarea::-webkit-scrollbar { width: 0; height: 0; }
.composer button {
  flex: 0 0 auto; margin-right: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; cursor: pointer;
  background: var(--основной); color: var(--на-основном);
  border: 1px solid var(--основной);
  border-radius: var(--r);
  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.composer button svg { transition: transform var(--slow) var(--ease); }
.composer button:hover:not(:disabled) {
  background: var(--основной-т); box-shadow: var(--тень-3);
}
.composer button:hover:not(:disabled) svg { transform: translateX(2px); }
.composer button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.composer button:disabled { opacity: .45; cursor: default; }


/* строка состояния агента: «ищу состав Дирофена…». Живёт секунды, до
   первого слова ответа, поэтому нарочно неяркая — это не сообщение, а признак
   того, что служба работает. */
.step {
  margin: 0; color: var(--текст-тихий); font-size: var(--размер-кнопка); font-style: italic;
  animation: step-in var(--slow) var(--ease);
}
@keyframes step-in { from { opacity: 0 } to { opacity: 1 } }

.error {
  max-width: 860px; margin: 0 auto 14px; padding: 11px 15px;
  border: 1px solid var(--акцент); border-left: 3px solid var(--акцент);
  border-radius: var(--r); background: var(--ошибка-фон); color: var(--ошибка-текст); font-size: var(--размер-кнопка);
}

@media (max-width: 860px) {
  /* на узком экране панель поверх содержимого, а не рядом: иначе она
     съедает больше половины ширины */
  .main { margin-left: 0; }
  .side { box-shadow: var(--тень-боковая); }
  .head, .thread, .composer { padding-left: 18px; padding-right: 18px; }
  .head h1 { font-size: var(--размер-крупный); }
  /* Узкий экран: выбор отрасли над полем, поле и кнопка — своей строкой. */
  .composer { flex-wrap: wrap; }
  .отрасль-выбор { flex: 1 1 100%; margin-left: 0; }
  .отрасль-выбор .список { display: block; }
  .composer textarea { flex: 1 1 0; min-width: 0; }
  .photos, .photos[data-n="1"], .photos[data-n="2"] { grid-template-columns: 1fr; }
  .photos.many { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  /* через [data-n] и .many — иначе правила выше по файлу, задающие высоту для
     трёх, четырёх и «многих», окажутся частнее и перебьют это */
  .photos[data-n] .photo img { height: 230px; }
  .photos.many .photo img { height: 120px; }
  /* Одна колонка: две плитки по 190 px рядом не читаются. */
  .drugs, .drugs.many, .drugs[data-n] { grid-template-columns: 1fr; }
  .drugs[data-n] .drug .photo img, .drugs[data-n] .noshot { height: 220px; }
}

/* Кнопка скачивания навыка. Обычная ссылка, а не button: браузер сам сохранит
   файл по атрибуту download, обработчик не нужен. Вид — как у «Нового чата»,
   чтобы окно настроек не выбивалось из остальной страницы. */
.btn-dl {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font: inherit; font-weight: 500; text-decoration: none;
  color: var(--основной); background: var(--карточка);
  border: 1px solid var(--граница); border-radius: var(--r);
  padding: 9px 14px; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn-dl:hover {
  color: var(--на-основном); background: var(--основной);
  border-color: var(--основной);
  box-shadow: var(--тень-3);
}
.btn-dl svg { flex: none; }
.hint code {
  font-family: var(--шрифт-код); font-size: var(--размер-метка);
  background: var(--наведение); border-radius: var(--r-тонкий); padding: 1px 4px;
}

/* Шапка боковой панели: адрес вошедшего и выход. Адрес обрезается многоточием
   — длинный почтовый адрес иначе распирает панель. */
/* Логотип Agropredict вверху панели (ночь 25, `234` §5). */
.side-лого { display: inline-flex; justify-self: start; line-height: 0; background-image: none; box-shadow: none; }
.side-лого .лого-svg { width: 120px; height: 33px; }
.side-подпись { margin: -12px 0 0; font-size: var(--размер-подпись); color: var(--текст-тихий); }
.side-user {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--граница);
}
.side-email {
  flex: 1; min-width: 0; font-size: var(--размер-кнопка); color: var(--текст-тихий);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-out {
  flex: none; padding: 4px 8px; font: inherit; font-size: var(--размер-подпись);
  color: var(--текст-тихий); background: transparent; border: 1px solid var(--граница);
  border-radius: var(--r); cursor: pointer;
  /* Цвет и рамка меняются плавно, как у всего остального в службе: резкий
     скачок здесь выбивался из общей картины — кнопка вспыхивала малиновым
     раньше, чем человек успевал понять, что навёл на неё курсор. */
  transition: color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}
.side-out:hover {
  color: var(--акцент); border-color: var(--акцент);
  background: var(--акцент-мягкий);
}

/* Окно с предложением войти. Уже, чем настройки: в нём три строки и две
   кнопки, и растянутое на всю ширину оно выглядело бы как ошибка. */
.modal-join { max-width: 420px; }
.join-list { margin: 0 0 20px; padding-left: 20px; color: var(--текст); }
.join-list li { margin-bottom: 8px; font-size: var(--размер-кнопка); line-height: 1.45; }
.join-buttons { display: flex; flex-direction: column; gap: 8px; }
.join-main, .join-alt {
  display: block; padding: 11px 16px; text-align: center; font-size: var(--размер-тело);
  font-weight: 500; border-radius: var(--r); text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.join-main { color: var(--на-основном); background: var(--основной); border: 1px solid var(--основной); }
.join-main:hover { background: var(--основной-т); border-color: var(--основной-т); }
.join-alt { color: var(--основной); background: var(--карточка); border: 1px solid var(--граница); }
.join-alt:hover { border-color: var(--основной); }

/* Кнопка «Войти» в шапке панели — на месте адреса и «Выйти» у вошедшего. */
.side-in {
  flex: 1; padding: 6px 10px; font: inherit; font-size: var(--размер-кнопка); font-weight: 500;
  color: var(--на-основном); background: var(--основной); border: 0; border-radius: var(--r);
  cursor: pointer; text-align: center; text-decoration: none;
}
.side-in:hover { background: var(--основной-т); }

/* Поле ввода запирается, когда бесплатные вопросы кончились: серое и не
   принимает текст — это понятнее, чем молчащая кнопка отправки. */
.composer.locked { opacity: .6; }

/* ------------------------------------------------------------- плавность */

/* Сдержанно и быстро: ничего дольше 300 мс, отклик на нажатие 100–150 мс,
   двигаются только `transform` и `opacity`. `width`, `height` и `top` не
   анимируются нигде — они заставляют браузер пересчитывать разметку, и на
   странице с полусотней плиток это видно рывками.

   Всё ниже выключается при `prefers-reduced-motion`: правило в шапке файла
   гасит длительности, а появления перечислены отдельно — анимацию оно
   укорачивает, но лучше её просто не запускать. */

/* Ответ проявляется, а не возникает рывком. Сдвиг маленький: реплика длиной в
   экран, приехавшая издалека, читается как рывок страницы. */
@keyframes всплыть {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.msg { animation: всплыть .22s var(--ease) both; }

/* Плитки материалов — волной. Задержка 40 мс на плитку и не больше восьми:
   при девятой волна превращается в ожидание, а последняя плитка появлялась бы
   через полсекунды после первой. */
.drug { animation: всплыть .22s var(--ease) both; }
.drug:nth-child(1) { animation-delay: 0ms; }
.drug:nth-child(2) { animation-delay: 40ms; }
.drug:nth-child(3) { animation-delay: 80ms; }
.drug:nth-child(4) { animation-delay: 120ms; }
.drug:nth-child(5) { animation-delay: 160ms; }
.drug:nth-child(6) { animation-delay: 200ms; }
.drug:nth-child(7) { animation-delay: 240ms; }
.drug:nth-child(8) { animation-delay: 280ms; }
.drug:nth-child(n+9) { animation-delay: 280ms; }

/* Нажатие видно раньше, чем придёт ответ: кнопка вдавливается на пиксель.
   На медленной сети это единственный признак, что нажатие вообще случилось. */
.chip:active, .btn-new:active, .file:active, .btn-ghost:active,
.side-link:active {
  transform: translateY(1px);
}

/* Заглушки на время загрузки. Пустое место читается как «ничего нет»;
   серые прямоугольники — как «сейчас будет». Мерцание идёт по прозрачности,
   а не по цвету фона: цвет заставляет перерисовывать слой целиком. */
@keyframes мерцание {
  0%, 100% { opacity: .45; }
  50%      { opacity: .85; }
}
.скелет {
  background: var(--панель); border: 1px solid var(--граница);
  border-radius: var(--r); animation: мерцание 1.1s var(--ease) infinite;
}
.скелет-плитки {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin: 14px 0;
}
.скелет-плитка { height: 210px; }

@media (prefers-reduced-motion: reduce) {
  .msg, .drug, .скелет { animation: none; }
  .chip:active, .btn-new:active, .file:active, .btn-ghost:active,
  .side-link:active { transform: none; }
  .btn-new:hover svg, .side-link:hover svg line { transform: none; }
}

/* ------------------------------------------- поиск по беседам и клавиши */

.поиск-бесед {
  width: 100%; font: inherit; font-size: var(--размер-кнопка);
  color: var(--текст); background: var(--карточка);
  border: 1px solid var(--граница); border-radius: var(--r);
  padding: 7px 10px; margin: -8px 0 -4px;
  transition: border-color var(--fast) var(--ease);
}
.поиск-бесед:focus { outline: none; border-color: var(--основной); }

/* Поле переименования занимает место заголовка, а не встаёт рядом: строка
   списка не должна прыгать в высоте при двойном щелчке. */
.chat-переим {
  flex: 1; min-width: 0; font: inherit; font-size: var(--размер-кнопка);
  color: var(--текст); background: var(--фон);
  border: 1px solid var(--основной); border-radius: var(--r);
  padding: 1px 5px;
}
.chat-переим:focus { outline: none; }

.клавиши {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: var(--подложка-окна); padding: 20px;
}
.клавиши-карта {
  width: min(400px, 100%); background: var(--карточка);
  border: 1px solid var(--граница); border-radius: var(--r);
  box-shadow: var(--тень-4); padding: 18px 20px 20px;
}
.клавиши-заголовок {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--размер-подпись); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--основной);
  border-bottom: 2px solid var(--акцент); padding-bottom: 10px;
}
.клавиши-закрыть {
  font: inherit; font-size: var(--размер-крупный); line-height: 1; cursor: pointer;
  color: var(--текст-тихий); background: none; border: 0;
  width: 28px; height: 28px; border-radius: var(--r);
}
.клавиши-закрыть:hover { background: var(--акцент-мягкий); color: var(--акцент); }
.клавиши dl {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 14px;
  margin: 14px 0 0; font-size: var(--размер-кнопка);
}
.клавиши dt { color: var(--текст-тихий); white-space: nowrap; }
.клавиши dd { margin: 0; }
.клавиши kbd {
  font: inherit; font-size: var(--размер-подпись); padding: 2px 6px;
  border: 1px solid var(--граница); border-bottom-width: 2px;
  border-radius: var(--r); background: var(--панель);
}

/* --------------------------------------------------- быстрые уточнения */

/* Под ответом, а не сбоку: их читают, дочитав ответ, и взгляд уже внизу.
   Составляет их служба — модель предложила бы раздел, которого в базе нет. */
/* Уточнения стоят под блоком материалов, а не вплотную к тексту ответа:
   вплотную они читались как продолжение ответа и мешали дочитать его до
   конца. Ниже плиток они попадаются на глаза ровно тогда, когда ответ уже
   прочитан. */
.уточнения {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 860px; margin: 0 auto 18px; padding: 0 40px;
}
.уточнение {
  font: inherit; font-size: var(--размер-кнопка); cursor: pointer;
  color: var(--основной); background: var(--карточка);
  border: 1px solid var(--граница); border-radius: var(--r);
  padding: 7px 12px; text-align: left;
  transition: border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.уточнение:hover { border-color: var(--основной); background: var(--панель); }
.уточнение:active { transform: translateY(1px); }

/* ---------------------------------------------------------- сравнение */

/* Флажок в углу плитки: по наведению — чтобы в покое плитка оставалась
   снимком с названием, а не бланком с галочками. На касании наведения нет,
   поэтому там он виден всегда. */
.drug { position: relative; }
.drug-выбор {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 26px; height: 26px; display: flex;
  align-items: center; justify-content: center;
  background: var(--карточка); border: 1px solid var(--граница);
  border-radius: var(--r); cursor: pointer;
  opacity: 0; transition: opacity var(--fast) var(--ease);
}
.drug:hover .drug-выбор, .drug.выбран .drug-выбор,
.drug-выбор:focus-within { opacity: 1; }
@media (hover: none) { .drug-выбор { opacity: 1; } }
.drug-выбор input { margin: 0; cursor: pointer; accent-color: var(--основной); }
.drug.выбран { border-color: var(--основной); box-shadow: var(--тень-2); }

/* Панель отбора внизу экрана: она относится ко всей ленте, а не к одной
   плитке, и место у неё соответствующее. */
.сравнение {
  position: fixed; left: 50%; bottom: 92px; z-index: 25;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  background: var(--карточка); border: 1px solid var(--граница);
  border-radius: var(--r); box-shadow: var(--тень-3);
  padding: 9px 10px 9px 14px;
  animation: всплыть .18s var(--ease) both;
}
.сравнение-что {
  font-size: var(--размер-кнопка); color: var(--текст-тихий);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.сравнение-да {
  font: inherit; font-size: var(--размер-кнопка); font-weight: 500; cursor: pointer;
  color: var(--на-основном); background: var(--основной);
  border: 0; border-radius: var(--r); padding: 7px 14px; white-space: nowrap;
}
.сравнение-да:hover { background: var(--основной-т); }
.сравнение-нет {
  font: inherit; font-size: var(--размер-подзаголовок); line-height: 1; cursor: pointer;
  color: var(--текст-тихий); background: none; border: 0;
  width: 26px; height: 26px; border-radius: var(--r);
}
.сравнение-нет:hover { background: var(--акцент-мягкий); color: var(--акцент); }

@media (prefers-reduced-motion: reduce) {
  .сравнение { animation: none; }
  .уточнение:active { transform: none; }
}

/* ------------------------------------------------- вид по стилю vet.agropredict.ru

   Ночь 24 (`docs/night/225-design.md`): меняется вид, не разметка и не
   поведение. Белые панели и карточки радиуса 16 на сером полотне, тень сайта,
   кнопка отправки — тёмный квадрат радиуса 8, примеры — вторичные кнопки;
   удалить — красной парой сайта, а не цветом выделения. */
body { font-family: var(--шрифт); }
.side { background: var(--панель); border-right: 1px solid var(--граница); }
.drug { border-radius: var(--r-карточка); background: var(--карточка); box-shadow: var(--тень-2); }
.drug .photo { border-radius: var(--r-блок); }
.msg { border-radius: var(--r-блок); }
.modal { border-radius: var(--r-карточка); }
.chip { border-radius: var(--r); background: var(--карточка); border: 1px solid var(--граница-ярче); }
.empty h2 { font-size: var(--размер-заголовок); font-weight: 700; color: var(--текст); }
.composer { background: var(--фон); }
.composer textarea { background: var(--карточка); border-radius: var(--r); }
#send { background: var(--текст); color: var(--фон); border-radius: var(--r-пункт); }
#send:hover { background: var(--основной); color: var(--на-основном); }
.chat-item { border-radius: var(--r-пункт); }
.btn-new { border-radius: var(--r-пункт); }
.chat-del:hover, .modal-close:hover { background: var(--опасное-фон); color: var(--опасное); }