/**
 * Reactions pill bar — module-level base styles.
 * Main layout styling is in the theme's collector-discussion.css.
 */

.collector-reactions__summary {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 10px;
}

.collector-reactions__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.reaction-pill:hover {
  background: #f8fafc;
  border-color: #cbd5e0;
  color: #334155;
}

.reaction-pill.is-active {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.reaction-pill__icon {
  font-size: 1rem;
  line-height: 1;
}

.reaction-pill__count {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 12px;
  text-align: center;
}

.reaction-pill__count:empty,
.reaction-pill__count[data-count="0"] {
  display: none;
}

@media (max-width: 600px) {
  .collector-reactions__pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .reaction-pill {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 6px 10px;
  }
}