/* ---------- «плюс» у поля ввода и меню «Прикрепить» ----------

   Своим листом, а не куском `app.css`: общий файл правят в несколько рук
   (тот же довод у почтовых листов в index.html). Разметка — `attachMenu.js`.

   Поверхность, рамка и тень — от общего `.popover` (`--shadow-pop` своя у
   светлой и тёмной темы), здесь только то, чем это меню отличается: пункты
   со значком в плашке и проявление от кнопки. */

/* «Плюс» поворачивается в крест, пока меню открыто: та же кнопка и закрывает. */
.attach-btn .icon { transition: transform 200ms var(--ease); }
.attach-btn.is-open { color: var(--accent-text); background: var(--surface-2); }
.attach-btn.is-open .icon { transform: rotate(45deg); }

/* Ширина — по подписям. Роман 14.09.2026: «справа много неиспользуемого
   места» — было `min-width: 212px` при подписях в одно слово. Нижний порог
   небольшой, чтобы меню из коротких слов не превращалось в столбик. */
.popover.attach-menu {
  min-width: 140px;
  width: max-content;
  padding: 6px;
  border-radius: var(--r-lg);
  /* Место считает `attachMenu.js`; до замера меню не должно мелькнуть в углу. */
  opacity: 0;
}
.popover.attach-menu.is-in,
.popover.attach-menu.is-out { opacity: 1; }
/* Фокус на самом меню (открыли мышью) — служебный, ради стрелок; рамка
   нужна пункту, а не всей панели. */
.popover.attach-menu:focus { outline: none; }

/* Проявление: прозрачность быстрее, подъём с лёгким масштабом — дольше, от
   кнопки (`transform-origin` ставит сценарий). Масштаб малый нарочно — 0.96:
   у общего `.popover` его нет вовсе, потому что буквы в 13 px на заметном
   масштабе дрожат (разбор у `.popover.is-in`); на четырёх процентах за
   180 мс дрожать нечему, а рост от кнопки читается. */
.popover.attach-menu.is-in {
  animation: attach-menu-fade 120ms linear, attach-menu-rise 190ms var(--ease);
}
/* Раскрытое вниз (сверху не хватило места) едет от кнопки в другую сторону. */
.popover.attach-menu:not(.is-up) { --attach-from: -6px; }
.popover.attach-menu.is-out {
  animation: attach-menu-out 110ms ease-in forwards;
  pointer-events: none;
}

@keyframes attach-menu-fade { from { opacity: 0; } }
@keyframes attach-menu-rise {
  from { transform: translateY(var(--attach-from, 6px)) scale(.96); }
}
@keyframes attach-menu-out {
  to { opacity: 0; transform: translateY(var(--attach-from, 4px)) scale(.98); }
}

.attach-menu__item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 6px 18px 6px 6px;
  border: 0; border-radius: var(--r);
  background: none; color: var(--text); cursor: pointer;
  font: inherit; font-size: 13.5px; text-align: left;
  transition: background-color var(--speed);
}
.attach-menu__item:hover,
.attach-menu__item:focus-visible { background: var(--surface-2); outline: none; }
.attach-menu__item:focus-visible { box-shadow: var(--ring); }
.attach-menu__item:active { background: var(--surface-3); }

.attach-menu__icon {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
  transition: transform 160ms var(--ease);
}
.attach-menu__item:hover .attach-menu__icon { transform: scale(1.06); }

.attach-menu__text { display: grid; gap: 1px; min-width: 0; }
.attach-menu__label { font-weight: 520; white-space: nowrap; }
.attach-menu__hint {
  font-size: 11.5px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* На телефоне пункты выше — под палец, а не под курсор. */
@media (pointer: coarse) {
  .attach-menu__item { padding-top: 8px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .attach-btn .icon,
  .attach-menu__icon { transition: none; }
  .popover.attach-menu.is-in,
  .popover.attach-menu.is-out { animation: none; }
  .attach-menu__item:hover .attach-menu__icon { transform: none; }
}

/* ---------- контакт, к которому пришли из сообщения ----------

   Карточка клиента подсвечивает человека, на чью карточку нажали в чате
   (`spotlightContact`): мягкая заливка акцентом, которая сама гаснет. */
.contact.is-spotlit {
  border-radius: var(--r);
  animation: contact-spotlight 2.4s var(--ease);
}
@keyframes contact-spotlight {
  0%, 35% { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .contact.is-spotlit { animation: none; background: var(--accent-soft); }
}