/* Estilos para los botones de reacción de comentarios */
.comment-reaction-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 0.85em;
  color: #65676b;
  cursor: pointer;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  margin-top: 5px;
}

.comment-reaction-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .comment-reaction-btn {
  color: #b0b3b8;
}

.dark-mode .comment-reaction-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.comment-reaction-count {
  margin-left: 4px;
  font-size: 0.9em;
}

/* Estilos para los botones de reacción activos */
.comment-reaction-btn.active.like-reaction {
  color: #2078f4;
}

.comment-reaction-btn.active.love-reaction {
  color: #f33e58;
}

.comment-reaction-btn.active.haha-reaction {
  color: #f7b125;
}

.comment-reaction-btn.active.wow-reaction {
  color: #f7b125;
}

.comment-reaction-btn.active.sad-reaction {
  color: #f7b125;
}

.comment-reaction-btn.active.angry-reaction {
  color: #e9710f;
}

.dark-mode .comment-reaction-btn.active.like-reaction {
  color: #4080ff;
}

.dark-mode .comment-reaction-btn.active.love-reaction {
  color: #ff6584;
}

/* Estilos para el menú de reacciones de comentarios */
.comment-reaction-menu {
  position: absolute;
  background-color: white;
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  display: none;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  align-items: center;
  transform: translateY(0);
}

.comment-reaction-menu-container {
  position: fixed;
  z-index: 9999;
}

.comment-reaction-menu.show {
  display: flex;
  opacity: 1;
}

.dark-mode .comment-reaction-menu {
  background-color: #242526;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Animación para las reacciones en el menú */
@keyframes reaction-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.reaction-option:hover {
  transform: scale(1.3);
  animation: reaction-bounce 0.4s ease;
}

.reaction-option:hover .reaction-label {
  opacity: 1;
  transform: translateY(0);
}