/*
 * KoloPlus — widgets/main/reactions · v1.1.3.005
 * Reaction picker: compact summary + expanded picker on hover/click.
 */

.reactions-daily-limit { display: none; }

.reactions-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Compact (collapsed) ─────────────────────────────────── */
.reactions-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--n-r-pill);
  background: transparent;
  cursor: pointer;
  user-select: none;
  color: var(--n-text-mute);
  transition: background var(--n-dur-base) var(--n-ease),
              color var(--n-dur-base) var(--n-ease);
}
.reactions-compact:hover:not([aria-disabled="true"]) {
  background: var(--n-bg-hover);
  color: var(--n-text);
}
.reactions-compact[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.reactions-add-btn,
.reactions-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--n-w-med);
  color: inherit;
}

/* v1.1.3.837: icon-only add-btn — без тексту "Додати реакцію", лише 😊 */
.reactions-add-btn--icon-only {
  gap: 0;
}
.reactions-add-btn--icon-only .r-icon {
  font-size: 1.15rem;
}

.reactions-widget[data-my-reaction]:not([data-my-reaction=""]) .reactions-compact {
  color: var(--n-accent);
}

.r-icon {
  font-style: normal;
  line-height: 1;
  font-size: 16px;
}
.r-text {
  font-variant-numeric: tabular-nums;
}

/* ── Expanded picker ────────────────────────────────────── */
/* v1.1.3.838 fix: панель емодзі вилазила вправо коли trigger близько до краю.
   left:-8px прив'язувало до лівого краю → 6 кнопок виходили за межі картки.
   Fix: центрування відносно trigger + max-width захист, щоб панель завжди
   лишалась у viewport. transform-origin теж по центру. */
.reactions-expanded {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  max-width: calc(100vw - 32px);
  background: var(--n-bg-2);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-pill);
  box-shadow: var(--n-sh-lg);
  z-index: var(--n-z-popover);

  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px) scale(.94);
  transform-origin: bottom center;
  transition: opacity var(--n-dur-base) var(--n-ease),
              transform var(--n-dur-base) var(--n-ease-spring);
}
.reactions-expanded.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* v1.1.3.903: canonical reaction-btn matching post-action-btn flat style.
   Compact, transparent default, accent on hover/active. */
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: var(--n-r-sm);
  cursor: pointer;
  padding: 6px 8px;
  margin: 0 -2px;
  font-size: 1rem;
  line-height: 1;
  color: var(--n-text-mute);
  position: relative;
  transition: color var(--n-dur-base) var(--n-ease),
              background var(--n-dur-base) var(--n-ease);
}
.reaction-btn:hover:not([disabled]) {
  color: var(--n-accent);
  background: var(--n-accent-soft);
}
.reaction-btn:active:not([disabled]) {
  transform: scale(.95);
}
/* Active = subtle color hint, NO heavy soft background */
.reaction-btn.active {
  color: var(--n-accent);
}
.reaction-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
.reaction-btn:focus-visible {
  outline: none;
  box-shadow: var(--n-focus-ring);
}

.r-cnt {
  font-size: 11px;
  font-weight: var(--n-w-bold);
  color: var(--n-text-mute);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reaction-btn.active .r-cnt {
  color: var(--n-accent);
}