.chatAcknowledgements {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 6px -4px -6px;
}
.chatAcknowledgements button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease, background 140ms ease;
}
.chatAcknowledgements button:hover { background: rgba(255, 255, 255, .06); }
.chatAcknowledgements button[aria-pressed="true"] { color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.chatAcknowledgements button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.chatAcknowledgements button:disabled { opacity: .55; cursor: wait; }
.chatAckGlyph {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--chat-ack-icon) center / contain no-repeat;
  mask: var(--chat-ack-icon) center / contain no-repeat;
}
[data-chat-ack="like"] { --chat-ack-icon: url('./assets/icons/lucide-heart.svg'); }
[data-chat-ack="seen"] { --chat-ack-icon: url('./assets/icons/lucide-check-check.svg'); }
.chatAckCount { min-width: 1ch; font-variant-numeric: tabular-nums; }
.chatAckCount.is-empty { visibility: hidden; }
.chatMessage.is-mine:not(.is-team) .chatAcknowledgements button { color: var(--accent-contrast); }
.chatMessage.is-mine:not(.is-team) .chatAcknowledgements button[aria-pressed="true"] { background: rgba(var(--accent-contrast-rgb), .14); }
@media (prefers-reduced-motion: reduce) {
  .chatAcknowledgements button { transition: none; }
}