/* ==========================================================================
   СМАЙЛИКИ ЗА СТОЛОМ — miniapp/reactions.js

   Картинка смайлика и пузырь над тем, кто прислал. Плоско:
   поверхность и линия из токенов, без тени и свечения. Картинка смайлика —
   содержание (как карта), а не оформление: её не перекрашиваем.
   ========================================================================== */

/* Кнопки у смайликов больше нет — вход один, в чате (miniapp/chat.css). Здесь картинка и пузырь. */

.rx-label {
  /* Две строки: «Хорошая игра» и «Ну как так» на 320 px в одну не влезают. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  font-size: var(--k-fs-caption);
  line-height: var(--k-lh-caption);
  color: var(--text-secondary);
}

/* Картинка или запасной эмодзи — одного размера, чтобы подмена файлов не двигала сетку. */
.rx-face {
  display: block;
  width: var(--k-av-md);
  height: var(--k-av-md);
  object-fit: contain;
}
.rx-emoji {
  display: grid;
  place-items: center;
  font-size: var(--k-fs-title);
  line-height: 1;
}
.rx-face.big { width: var(--k-av-lg); height: var(--k-av-lg); }

/* ---------------------------------------------------------------- пузырь */

/* Слой поверх экрана, но под шторкой; нажатия проходят насквозь — пузырь
   ничего не закрывает от пальца. */
.rx-layer {
  position: fixed;
  inset: 0;
  z-index: 38; /* над летящими фишками (#fx, 35), под затемнением шторки (40) */
  pointer-events: none;
}
.rx-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  padding: var(--k-s4);
  border: 1px solid var(--on-felt-line);
  border-radius: var(--k-r-lg);
  background: var(--bg-elevated);
  animation: rx-in 0.22s var(--k-ease) both;
}
.rx-bubble.out { opacity: 0; transition: opacity 0.18s linear; }
.rx-bubble.still { animation: none; }
@keyframes rx-in {
  from { opacity: 0; transform: translateY(8px) scale(0.6); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-bubble { animation: none; }
  .rx-bubble.out { transition: none; }
}