/* Speaker Reactions Page Styles */

.reaction-stat {
  display: flex;
  align-items: center;
  gap: var(--size-1);
}

.emoji {
  font-size: 1.25rem;
}

.talk-reaction-row {
  transition: background-color 0.2s ease;
}

.talk-reaction-row:hover {
  background-color: var(--layer-surface-variant);
  margin-inline: calc(var(--size-3) * -1);
  padding-inline: var(--size-3);
}

.comment-emotion {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  padding: var(--size-8) var(--size-4);
}

.empty-state-icon {
  color: var(--on-surface-variant);
  margin-bottom: var(--size-4);
}

.filter-panel {
  background-color: var(--surface-container);
  border-top: 1px solid var(--outline-variant);
}

.border-bottom {
  border-bottom: 1px solid var(--outline-variant);
}

button.active {
  color: var(--primary);
}

.empty-state-small {
  padding: var(--size-6) var(--size-4);
}

@media (max-width: 768px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}