/* Sticker tiles leave room for artwork; counters sit in the corner. */
.video-reactions-host[hidden] { display: none; }
.video-reactions { margin-top: 14px; margin-bottom: 4px; }
.video-reactions-list { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.video-reaction {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 76px; padding: 0 2px 12px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--muted, #9c95af);
  cursor: pointer; touch-action: manipulation; flex: 0 0 auto;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.video-reaction:hover { background: transparent; color: var(--text, #eeeaf6); }
.video-reaction[aria-pressed="true"] { background: transparent; color: var(--accent, #f4c24f); box-shadow: none; }
.video-reaction:focus-visible { outline: 2px solid var(--focus, #8fb8ff); outline-offset: 3px; }
.video-reaction:disabled { cursor: wait; opacity: .75; }
.video-reaction-image { display: inline-flex; width: 64px; height: 64px; flex: 0 0 64px; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.video-reaction-image img, .video-reaction-image video { display: block; width: 64px; height: 64px; object-fit: contain; border-radius: 8px; }
.video-reaction-count { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 8px; background: transparent; font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.video-reaction[aria-pressed="true"] .video-reaction-count { background: var(--accent, #f4c24f); color: #231c12; }
.video-reactions-error { color: var(--warn, #f4a04f); font-size: 13px; margin: 8px 0 0; }
.video-reactions-preference { margin: 12px 0; }
.video-reactions-preference p { margin: 5px 0 0; }
@media (prefers-reduced-motion: reduce) { .video-reaction { transition: none; } }
html[data-motion="reduced"] .video-reaction { transition: none; }