/* Реакции: панель выбора и слой, по которому они всплывают над сукном.
   Отдельным файлом — ни с чем не пересекается и подключается одной строкой. */

/* Слой ничего не ловит: реакции летят поверх стола, но целиться сквозь них
   надо как ни в чём не бывало. Ниже табло и кнопок, выше канвы. */
#emo {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

#emo .emo-fly {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  animation: emo-rise 2.2s ease-out both;
  will-change: transform, opacity;
}
#emo .face {
  font-size: 34px;
  line-height: 1;
  /* Эмодзи над зелёным сукном без тени сливается с ним на светлых местах. */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
/* Подпись автора: реакция летит вдали от табло, и без неё непонятно, чья. */
#emo .who {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 7px;
  color: #16140f;
  background: hsl(var(--hue, 40) 42% 62%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@keyframes emo-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--tilt, 0deg));
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--dy, 120px)))
      scale(var(--s, 1)) rotate(var(--tilt, 0deg));
  }
}

/* --- панель выбора -------------------------------------------------------- */

/* Место — за id, вид — за классом .emobar: появляется панель тем же
   «джинном», что чат (render/geniefx.ts), а у его полос-копий id нет. */
#react-bar {
  position: fixed;
  /* Там же, где чат, и над ним: реакцию шлют и посреди разговора, и панель
     не должна прятаться под открытым окном — раньше пряталась. */
  right: calc(10px + var(--safe-r));
  bottom: calc(48px + var(--safe-b));
  z-index: 9;
}
#react-bar.hidden { display: none; }

.emobar {
  display: flex;
  gap: 4px;
  padding: 7px;
  border-radius: 18px;
  background: rgba(18, 20, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.genie-slice > .emobar { box-shadow: none; }

/* Крупно: реакцию выбирают на бегу, между ударами, и попадать пальцем в
   мелкую кнопку некогда. */
.emobar .emo-pick {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.15s cubic-bezier(0.34, 1.5, 0.64, 1);
}
/* Под указателем эмодзи подрастает, как в пикерах реакций мессенджеров. */
.emobar .emo-pick:hover {
  background: rgba(236, 231, 220, 0.1);
  transform: scale(1.14);
}
.emobar .emo-pick:active { transform: scale(0.9); }
/* Отказ по частоте: молча проглоченное нажатие читается как поломка панели. */
.emobar .emo-pick.nope { animation: emo-nope 0.32s ease-in-out; }
@keyframes emo-nope {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Полёт — украшение, и первым идёт под нож. Реакцию всё равно показываем:
   она несёт смысл, а не только движение. */
@media (prefers-reduced-motion: reduce) {
  #emo .emo-fly { animation: emo-fade 2.2s linear both; }
  .emobar .emo-pick { transition: background 0.12s ease; }
  .emobar .emo-pick:hover { transform: none; }
  .emobar .emo-pick.nope { animation: none; outline: 1px solid var(--alarm, #e0705a); }
  @keyframes emo-fade {
    0%, 100% { opacity: 0; }
    12%, 76% { opacity: 1; }
  }
}


/* См. chat.css: на узком экране кнопки подняты, панель идёт за ними — туда
   же, где низ чата. */
@container screen (max-width: 560px) {
  #react-bar { bottom: calc(86px + var(--safe-b)); }
}
/* Совсем узкий экран: шесть кнопок по 48 — это 330 px, в 360 не влезают с
   полями. Чуть мельче, но всё ещё крупнее прежних 34. */
@container screen (max-width: 380px) {
  .emobar .emo-pick { width: 42px; height: 42px; font-size: 26px; }
}