/* Reactions styling */

/* Reaction deleteable state - cursor changes when user can delete */
.reaction--deleteable {
  cursor: pointer;
}

.reaction--deleteable:hover {
  filter: brightness(0.95);
}

.dark .reaction--deleteable:hover {
  filter: brightness(1.1);
}

/* Show delete button when reaction is expanded */
.reaction.expanded .reaction__delete {
  display: inline-flex;
}

/* Hide emoji content when delete button is showing */
.reaction.expanded span[data-reaction-delete-target="content"] {
  display: none;
}

/* Reaction deleting animation */
.reaction--deleting {
  animation: scale-fade-out 0.2s ease-out forwards;
}

@keyframes scale-fade-out {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Reaction form animation */
.reaction__form.expanded {
  animation: react 300ms ease-out both;
}

@keyframes react {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reaction form buttons */
.reaction__submit-btn,
.reaction__cancel-btn,
.reaction__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.reaction__submit-btn:hover,
.reaction__cancel-btn:hover,
.reaction__menu-btn:hover {
  opacity: 0.8;
  box-shadow: none;
}

.reaction__submit-btn img,
.reaction__cancel-btn img,
.reaction__menu-btn img {
  width: 1.25rem;
  height: 1.25rem;
}

/* Emoji picker popover */
.reaction__emoji-picker {
  /* Width that fits 10 columns of 32px buttons + gaps + padding */
  width: min(340px, calc(100vw - 1rem));
}

/* Responsive emoji grid */
.reaction__emoji-list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.25rem;
}

/* Mobile: fewer columns to fit smaller width */
@media (max-width: 400px) {
  .reaction__emoji-picker {
    width: calc(100vw - 1rem);
  }

  .reaction__emoji-list {
    grid-template-columns: repeat(8, 1fr);
  }
}