/* ═════════════════ Логин: нажатие и меню копирования ═════════════════
   Вид меню берётся у остальных контекстных меню (.message-menu и
   .message-dim в chat.css) — здесь только место в слоях и поведение
   самого логина. Разметку кладёт js/username-menu.js. */

.message-dim.username-dim { position: fixed; z-index: 120; }
.message-menu.username-menu { position: fixed; z-index: 121; min-width: 208px; }

/* Логин ведёт себя как кнопка. Продавливание ставит ui.js по классу
   is-pressed (data-pressable): :active в Safari срабатывает через раз.
   Ширина — по самому тексту: строка «Логин» в карточке это колонка на
   flex, и растянутый на неё элемент ловил нажатие по всему блоку, а
   уменьшение от середины уводило текст вправо. Отсюда inline-block,
   align-self и точка отсчёта у левого края. */
[data-username] {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: scale(1);
  transform-origin: left center;
  transition: transform 180ms var(--ease), color 140ms ease;
}

[data-username].is-pressed { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  [data-username] { transition: none; }
}