/* --- reactions (static/js/meetings/reactions.js) --------------------------- */
/* Same language as the rest of the call: dark stone pills (like the name
 * labels), Inter bold, and the site's warm tones for the icons. */
.meet-react-heart { --meet-react: #c65d47; }   /* terracotta, the meetings accent */
.meet-react-like  { --meet-react: #f59e0b; }   /* amber, raised buttons */
.meet-react-party { --meet-react: #fcd34d; }
.meet-react-clap  { --meet-react: #fb923c; }
.meet-react-laugh { --meet-react: #fde68a; }
.meet-react-wow   { --meet-react: #d6d3d1; }

.meet-reactions {
  position: absolute;
  inset: 0;
  z-index: 25;
  overflow: hidden;
  pointer-events: none;
}

.meet-reaction {
  position: absolute;
  bottom: 84px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: 9999px;
  background: rgba(28, 25, 23, 0.88);
  border: 1px solid rgba(245, 158, 11, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #f5f5f4;
  font-family: Inter, system-ui, sans-serif;
  white-space: nowrap;
  animation: meet-react-up 3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.meet-reaction-icon {
  color: var(--meet-react, #f59e0b);
  font-size: 18px;
  line-height: 1;
}

.meet-reaction-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@keyframes meet-react-up {
  0%   { transform: translate(0, 12px); opacity: 0; }
  10%  { transform: translate(0, 0); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(var(--meet-react-drift, 0px), -34vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .meet-reaction { animation: meet-react-fade 2.5s ease-out forwards; }
  @keyframes meet-react-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

.meet-react-picker {
  position: fixed;
  z-index: 140;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 9999px;
  background: #1c1917;
  border: 1px solid #44403c;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.meet-react-picker.hidden {
  display: none;
}

.meet-react-picker button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--meet-react, #f59e0b);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.meet-react-picker button:hover,
.meet-react-picker button:focus-visible {
  background: #292524;
  transform: translateY(-2px);
  outline: none;
}

.meet-react-picker button:active {
  transform: scale(0.9);
}