.reaction {
  position: relative;
  height: auto;
}

.reaction__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
}

.reaction__btn i {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url(../../../../../assets/images/icons/navigation/reaction.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: 0s;
  transition: 0s;
}

.reaction__list {
  max-height: 210px;
  position: absolute;
  background: #232934;
  border: 1px solid #3a424f;
  border-radius: 10px;
  padding: 15px;
  padding-right: 0;
  width: 173px;
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15), 0px 50px 50px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15), 0px 50px 50px 0px rgba(0, 0, 0, 0.1);
  z-index: 12;
  font-size: 13px;
  font-weight: 500;
  display: none;
}

.reaction__wrap {
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 5px;
  padding-right: 11px;
  max-height: 100%;
}

.reaction__item {
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -ms-flex-preferred-size: calc(25% - 4px);
  flex-basis: calc(25% - 4px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.reaction__item img {
  width: 22px;
  height: 22px;
}

.reaction__item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 35px;
  background: var(--blue);
  transition: transform 0.3s ease, background 0.3s ease;
}

.reaction__item.active {
  background: var(--blue);
  color: var(--white);
}

.reaction.action-active {
  background: rgba(191, 216, 255, 0.15);
  color: var(--yellow);
  border-color: var(--yellow);
}

.reaction.action-active .reaction__list {
  display: block;
}

.reaction.action-active .reaction__btn i {
  background-image: url(../../../../../assets/images/icons/navigation/reaction-active.svg);
}

.article__item:last-child .reaction__list {
  bottom: calc(100% + 8px);
  top: auto;
}

.emoji-reaction {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  color: #7385A2;
  max-width: 62%;
  width: 100%;
}

.emoji-reaction .reaction.action-active .reaction__btn i {
  background-image: url(../../../../../assets/images/icons/navigation/add-active.svg);
}

.emoji-reactionn .reaction__btn i {
  background-image: url(../../../../../assets/images/icons/navigation/add.svg);
}

.emoji-reaction.simplified  .reaction__btn i{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 23 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5 2.75C6.95058 2.75 3.25 6.45058 3.25 11C3.25 15.5494 6.95058 19.25 11.5 19.25C16.0494 19.25 19.75 15.5485 19.75 11C19.75 6.4515 16.0485 2.75 11.5 2.75Z' stroke='%237385A2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5512 8.70841C14.4247 8.70841 14.322 8.81108 14.3229 8.93758C14.3229 9.06408 14.4256 9.16675 14.5521 9.16675C14.6786 9.16675 14.7813 9.06408 14.7813 8.93758C14.7813 8.81108 14.6786 8.70841 14.5512 8.70841' stroke='%237385A2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.41836 8.70841C8.29186 8.70841 8.18919 8.81108 8.19011 8.93758C8.19011 9.06408 8.29277 9.16675 8.41927 9.16675C8.54577 9.16675 8.64844 9.06408 8.64844 8.93758C8.64844 8.81108 8.54577 8.70841 8.41836 8.70841' stroke='%237385A2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.7077 14.3806C14.7077 14.3806 13.5041 15.5833 11.4993 15.5833C9.49368 15.5833 8.29102 14.3806 8.29102 14.3806' stroke='%237385A2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
} 

.emoji-reaction.simplified  .reaction.action-active .reaction__btn i, .emoji-reaction.simplified.has-reaction .reaction__btn i  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 23 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5 2.75C6.95058 2.75 3.25 6.45058 3.25 11C3.25 15.5494 6.95058 19.25 11.5 19.25C16.0494 19.25 19.75 15.5485 19.75 11C19.75 6.4515 16.0485 2.75 11.5 2.75Z' stroke='%23ffc700' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5512 8.70841C14.4247 8.70841 14.322 8.81108 14.3229 8.93758C14.3229 9.06408 14.4256 9.16675 14.5521 9.16675C14.6786 9.16675 14.7813 9.06408 14.7813 8.93758C14.7813 8.81108 14.6786 8.70841 14.5512 8.70841' stroke='%23ffc700' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.41836 8.70841C8.29186 8.70841 8.18919 8.81108 8.19011 8.93758C8.19011 9.06408 8.29277 9.16675 8.41927 9.16675C8.54577 9.16675 8.64844 9.06408 8.64844 8.93758C8.64844 8.81108 8.54577 8.70841 8.41836 8.70841' stroke='%23ffc700' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.7077 14.3806C14.7077 14.3806 13.5041 15.5833 11.4993 15.5833C9.49368 15.5833 8.29102 14.3806 8.29102 14.3806' stroke='%23ffc700' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.emoji-reaction.simplified.has-reaction .navigation-buttons__item {
  border: 1px solid var(--yellow); 
}

.emoji-reaction.simplified.has-reaction span  {
  color: var(--yellow);
}


.emoji-reaction__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.emoji-reaction__item {
  height: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.12px;
  gap: 5px;
  border-radius: 30px;
  background: rgba(191, 216, 255, 0.08);
  padding: 0px 7px;
  cursor: pointer;
  -webkit-transition: .2s;
  transition: .2s;
}

.emoji-reaction__item span {
  line-height: 1;
}

.emoji-reaction__item.zero-count span {
  display: none;
}

.emoji-reaction__item.animating img {
  -webkit-animation: likeAnimation 0.4s ease-in-out;
  animation: likeAnimation 0.4s ease-in-out;
}

.emoji-reaction__item:hover {
  background: rgba(191, 216, 255, 0.15);
  /* transform: translateY(-2px); */
  transition: transform 0.3s ease, background 0.3s ease;
}

.emoji-reaction__item.active {
  background: var(--blue);
  color: var(--white);
}

.emoji-reaction__item img {
  width: 22px;
  height: 22px;
}

.emoji-reaction-more {
  height: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12px;
  gap: 5px;
  border-radius: 30px;
  background: rgba(191, 216, 255, 0.08);
  padding: 0px 7px;
  cursor: pointer;
}

.emoji-reaction-more.active span {
  display: none;
}

@-webkit-keyframes likeAnimation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes likeAnimation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .emoji-reaction {
    max-width: 100%;
  }
}

.navigation-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.navigation-buttons__item {
  height: 26.0px;
  padding: 0px 7px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  color: #7385A2;
  background: rgba(191, 216, 255, 0.08);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Анимация при добавлении реакции */
@keyframes likeAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.emoji-reaction__item.animating img {
  animation: likeAnimation 0.4s ease-in-out;
}

/* Удаляем все анимации и transition */
.navigation-buttons__item.reaction .reaction__list.fadeOut,
.navigation-buttons__item.reaction .reaction__list.fadeIn {
  animation: none;
}

.navigation-buttons__item.reaction.action-active .reaction__list {
  transform: none;
  backface-visibility: visible;
  will-change: auto;
  bottom: 35px;
  left: 0;
}

.navigation-buttons__item.reaction.action-active {
  transition: none;
}

/* Улучшенные анимации для реакций */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }

  15% {
    transform: translateX(-8%) rotate(-5deg);
  }

  30% {
    transform: translateX(6%) rotate(3deg);
  }

  45% {
    transform: translateX(-4%) rotate(-3deg);
  }

  60% {
    transform: translateX(2%) rotate(2deg);
  }

  75% {
    transform: translateX(-1%) rotate(-1deg);
  }

  100% {
    transform: translateX(0%);
  }
}

/* Анимация для реакций при добавлении */
.emoji-reaction__item.new-reaction {
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.emoji-reaction__item.reaction-added {
  animation: wobble 0.8s ease;
}

/* Улучшенная анимация при активации кнопки */
.navigation-buttons__item.reaction {
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.emoji-reaction__item.active,
.emoji-reaction__item.user-selected {
  animation: likeAnimation 0.6s ease;
}

@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  70% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Дополнительная анимация для затухания */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(191, 216, 255, 0.3);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(191, 216, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(191, 216, 255, 0);
  }
}

/* Применяем ripple эффект к активным элементам */
.emoji-reaction__item.active,
.emoji-reaction__item.user-selected,
.reaction__item.active,
.reaction__item.user-selected {
  animation: ripple 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Анимация пульсации желтым цветом для мини-карточек при смене реакции */
@keyframes pulse-highlight {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 199, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 199, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 199, 0, 0);
  }
}

/* Класс для активации анимации */
.emoji-reaction.simplified .navigation-buttons__item.reaction.pulse-animation {
  animation: pulse-highlight 0.8s ease-out;
}