/* Строка действий сообщения: иконки вместо текста (как в Zulip, решение
   заказчика 2026-11-14). Вынесена из messages.css: файл упирался в лимит
   600 строк, а действия - самостоятельный узел ленты со своей логикой
   (появление по наведению, тач-режим, иконки). */

/* Действия над сообщением: видны при наведении и при фокусе с клавиатуры.
   opacity, а не display: иначе пропадают из дерева доступности.
   absolute, а не поток: появление при наведении не двигает текст, а у
   продолжений блока шапки нет, и действия должны висеть справа на первой
   строке самого текста. */
.message .msg-actions {
  position: absolute;
  top: var(--s1);
  right: var(--s4);
  display: inline-flex;
  gap: var(--s0);
  align-items: center;
  padding-left: var(--s2);
  border-radius: var(--radius-control);
  opacity: 0;
  transition: opacity 0.1s;
}

/* Продолжение блока: шапки нет, первая строка текста начинается от самого
   верха сообщения (padding-top обнулён), туда же поднимаем и действия.
   Селектор с .message нужен, чтобы перебить top из правила выше.
   Фон совпадает с подсветкой строки при наведении, чтобы кнопки читались
   поверх текста, если тот всё же дотянется до правого края. */
.message .msg-actions-cont {
  top: 0;
  background: var(--surface-hover);
}

.message:hover .msg-actions,
.message:focus-within .msg-actions { opacity: 1; }

/* Плавающая панель: лёгкая подложка и тень отделяют иконки от текста
   сообщения, поверх которого они висят */
.message:hover .msg-actions {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0 var(--s1);
  box-shadow: var(--shadow-panel);
}
.message.msg-unread:hover .msg-actions { background: var(--accent-soft); }

.msg-link {
  /* Ссылка интерактивная: --text-faint (3:1) не проходит порог 4.5:1 */
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-chip);
}

.msg-act {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border-radius: var(--radius-chip);
}

.msg-act:hover { background: var(--surface-hover); color: var(--text); }

/* Иконки: 16px в 24px кнопке. stroke=currentColor - цвет ведёт токен
   кнопки, отдельной раскраски svg не существует */
.msg-act svg,
.msg-link svg {
  width: 16px;
  height: 16px;
  display: block;
}

.msg-act.reaction-add:hover { color: var(--accent); }

/* Тач-экран: наведения нет, действия видны всегда и стоят своей строкой
   под текстом. Порядок flex-колонки: шапка, текст, действия (order 3) -
   задан здесь, рядом с остальными тач-правилами строки действий */
@media (max-width: 900px) {
  .message .msg-actions,
  .message .msg-actions-cont {
    position: static;
    order: 3;
    align-self: flex-end;
    gap: var(--s2);
    padding-left: 0;
    margin-top: var(--s1);
    /* Действия нужны всегда: на тач-экране наведения не существует, и
       без этого правка, удаление и ответ были недоступны с телефона */
    opacity: 1;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* Тач-цель: иконка 16px в кнопке 24px мелка пальцу - расширяю поле */
  .message .msg-act,
  .message .msg-link { width: 32px; height: 32px; }

  /* Чипы реакций и строка действий идут вплотную: у чипов уже есть свой
     отступ от текста, а двойной отступ давал пустую полосу между ними */
  .message .reactions:not(:has(.reaction)) + .msg-actions,
  .message .msg-main + .msg-actions { margin-top: 0; }
}