/* Композер: поле, панель форматирования, подсказка упоминаний,
   правка тона ИИ, предпросмотр. Вынесено из messages.css (лимит
   600 строк); подключается ПОСЛЕ messages.css и ДО forms.css -
   каскад идентичен исходному порядку правил. */

/* Подсказки упоминаний: компактный список НАД полем ввода.

   Прежний вариант был плотным блоком поверх текста и не давал выбрать с
   клавиатуры. Здесь строки высотой в одну строку текста, без акцентной
   заливки: подсказка помогает набрать имя, а не привлекает внимание.
   Позиция - absolute внутри .composer-main (position: relative), поэтому
   список привязан к полю и не улетает в сторону при прокрутке ленты. */
.composer-main { position: relative; }

.mention-hints {
  position: absolute;
  bottom: calc(100% + var(--s1));
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--bg);
  box-shadow: var(--shadow-popup);
}

.mention-hint {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  border: 0;
  border-radius: var(--radius-chip);
  background: none;
  text-align: left;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text);
  cursor: pointer;
}

/* Точка: у агента она означает доступность рантайма, у человека - просто
   маркер строки (присутствие в подсказке не показываем, оно в списках) */
.mention-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
}

.mention-hint-dot.is-person { background: var(--border-strong); }

.mention-hint-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-hint-handle {
  color: var(--text-faint);
  font-size: var(--fs-label);
  white-space: nowrap;
}

/* Выбор с клавиатуры и наведение: подсветка фоном, без синей заливки */
.mention-hint.is-active,
.mention-hint:hover { background: var(--surface-hover); }

/* ---- Панель форматирования в композере ----
   Колонка поле+панель: composer-main - flex-row (поле, файл, видео,
   отправка), поэтому панель и textarea живут в своём столбце */
.composer-field {
  flex: 1;
  min-width: 0;
}

.composer-field:focus-within .composer-format { display: flex; }

/* Появляется по фокусу: постоянная строка иконок отнимала бы место и
   прыгала бы на мобильных. Кнопки мелкие и тихие - это подсказка, а не
   главные действия */
.composer-format {
  /* relative - якорь для меню тонов: оно раскрывается над панелью */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
  margin-bottom: var(--s1);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--border);
}

.composer-format button {
  min-width: 28px;
  height: 24px;
  padding: 0 var(--s1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  font-size: var(--fs-label);
  line-height: 1;
  cursor: pointer;
}

.composer-format button:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}

.composer-format button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Предпросмотр - справа: отделяет его от кнопок разметки */
.composer-format .composer-format-preview {
  margin-left: auto;
}

.composer-preview {
  max-height: 40vh;
  overflow-y: auto;
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
}

/* На узком экране панель прокручивается по горизонтали, а не ломается
   на две строки: высота композера не должна скакать */
@media (max-width: 640px) {
  .composer-format {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .composer-format::-webkit-scrollbar { display: none; }

  .composer-format button { flex: 0 0 auto; }
}

/* ---- Правка тона ИИ: пилюля, меню, возврат ----

   Разметка (B, I, S, `, •) - тихие пиктограммы: они вставляют символы в
   текст. Правка тона - действие ИИ над готовой фразой, поэтому это
   ЕДИНСТВЕННЫЙ залитый элемент панели: акцентная подложка, акцентный
   текст, искра. Ряд читается по границе "разметка | ИИ", а не как
   двенадцать равных кнопок.

   Селекторы с .composer-format: общее правило панели
   (.composer-format button) по специфичности перебивает одиночный класс
   пилюли - та же ловушка, что была с button[type="submit"] в forms.css */

.composer-format-divider {
  width: 1px;
  align-self: stretch;
  margin: var(--s0) var(--s2);
  background: var(--border);
}

.composer-format .composer-tone-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: 26px;
  min-width: 0;
  padding: 0 var(--s2) 0 var(--s1);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--accent);
  font-size: var(--fs-label);
  line-height: 1;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.composer-format .composer-tone-toggle:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.composer-format .composer-tone-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Пустой композер: пилюля на месте и узнаваема, но не приглашает нажать
   в пустоту - подсказка объясняет условие */
.composer-format .composer-tone-toggle:disabled {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-faint);
  font-weight: 400;
  cursor: default;
}

/* Работа модели: искра медленно дышит, подпись говорит "правлю…".
   Reduced motion ниже отключает дыхание: состояние читается по подписи */
.composer-format .composer-tone-toggle.is-busy {
  background: var(--accent-soft);
  border-color: var(--border);
  color: var(--accent);
  font-weight: 400;
  cursor: progress;
}

.composer-format .composer-tone-toggle.is-busy .tone-spark {
  animation: tone-pulse 1.1s ease-in-out infinite;
}

@keyframes tone-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}

.tone-spark {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.tone-toggle-label { white-space: nowrap; }

/* Возврат: тише пилюли, но заметнее пиктограмм - это про потерянный текст */
.composer-format .composer-tone-undo {
  height: 26px;
  min-width: 0;
  padding: 0 var(--s2);
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--accent);
  font-size: var(--fs-label);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.composer-format .composer-tone-undo:hover {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Меню раскрывается НАД панелью: композер внизу экрана, и список,
   открытый вниз, ушёл бы за край. Шире прежнего: подсказке тона нужно
   место в одну строку, иначе названия тонов и пояснения сливаются */
.composer-tone-menu {
  position: absolute;
  bottom: calc(100% + var(--s2));
  left: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: var(--s0);
  min-width: 300px;
  max-width: 360px;
  padding: var(--s2);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-popup);
  animation: tone-menu-in 0.12s ease-out;
}

@keyframes tone-menu-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tone-caption {
  padding: 0 var(--s2) var(--s1);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Селектор с .composer-tone-menu и переопределение height/line-height
   обязательны: общее правило панели (.composer-format button) задаёт
   height:24px и line-height:1, и пункт сжимался вдвое - подпись тона
   наезжала на подсказку. Та же ловушка специфичности, что и с пилюлей */
.composer-tone-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s0);
  width: 100%;
  height: auto;
  min-height: 0;
  line-height: normal;
  padding: var(--s2) var(--s2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}

.composer-tone-menu button:hover,
.composer-tone-menu button:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

/* Фокус клавиатуры должен быть виден и в меню: подложка accent-soft
   слишком тихая для единственного указателя */
.composer-tone-menu button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.composer-tone-menu .tone-label {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text);
  font-weight: 600;
}

.composer-tone-menu .tone-hint {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .composer-tone-menu { animation: none; }
  .composer-format .composer-tone-toggle.is-busy .tone-spark { animation: none; }
}

/* На узком экране разделитель съедает ширину, а подпись пилюли важнее
   линии: прячем только линию */
@media (max-width: 640px) {
  .composer-format-divider { display: none; }
  .composer-format .composer-tone-toggle { padding: 0 var(--s2); }
}


/* Поле ввода тем же начертанием, что и текст сообщений: человек пишет
   в том шрифте, в котором его прочитают */
#composer-content { font-family: var(--font-text); font-size: 15.5px; }