/* Waline v3 反应按钮修复 */
.waline-reaction {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 1.5rem 0 !important;
  padding: 0 !important;
}

.waline-reaction-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  border-radius: 24px !important;
  background: var(--md-default-bg-color) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 0.95rem !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.waline-reaction-item:hover {
  background: var(--md-accent-fg-color--transparent) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  border-color: var(--md-primary-fg-color) !important;
}

/* 反应图标样式 */
.waline-reaction-item .icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 反应计数样式 */
.waline-reaction-item .count {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--md-primary-fg-color) !important;
  margin-left: 4px !important;
}

/* 选中状态 */
.waline-reaction-item.active {
  background: var(--md-primary-fg-color--transparent) !important;
  border-color: var(--md-primary-fg-color) !important;
}

/* 暗黑模式适配 */
[data-md-color-scheme="slate"] .waline-reaction-item {
  background: var(--md-code-bg-color) !important;
  border-color: var(--md-default-fg-color--light) !important;
}

[data-md-color-scheme="slate"] .waline-reaction-item:hover {
  background: rgba(66, 133, 244, 0.15) !important;
}

[data-md-color-scheme="slate"] .waline-reaction-item.active {
  background: rgba(66, 133, 244, 0.25) !important;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .waline-reaction {
    gap: 8px !important;
    justify-content: center !important;
  }
  
  .waline-reaction-item {
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
  }
  
  .waline-reaction-item .icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
  }
}

/* 添加动画效果 */
@keyframes reaction-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.waline-reaction-item.voted {
  animation: reaction-pop 0.4s ease;
}