/* Scoped to comments; does not affect calendar/poster print layouts. */
@media screen {
  .comment-actions:has(> .comment-reactions) { align-items: flex-start; flex-wrap: wrap; opacity: 1; }
  .comment-actions .comment-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
  .comment-reaction-counts { display: flex; flex-wrap: wrap; gap: 6px; }
  .comment-actions .comment-reactions button,
  .comment-actions .comment-reaction-picker summary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; min-width: 40px; margin: 0; padding: 6px 10px;
    border: 1px solid #d7dfec; border-radius: 12px; background: #f6f8fc;
    color: #465774; font: inherit; font-size: 13px; line-height: 1.25; cursor: pointer;
  }
  .comment-reaction-chip > span { font-size: 18px; }
  .comment-actions .comment-reactions button[aria-pressed="true"] { background: #fbeaf1; border-color: #ad2452; color: #8b153e; }
  .comment-actions .comment-reactions button:hover:not(:disabled),
  .comment-actions .comment-reaction-picker summary:hover { border-color: #ad2452; }
  .comment-actions .comment-reactions button:focus-visible,
  .comment-actions .comment-reaction-picker summary:focus-visible { outline: 2px solid #ad2452; outline-offset: 2px; }
  .comment-actions .comment-reactions button:disabled { opacity: .55; cursor: wait; }
  .comment-reaction-picker { min-width: 0; max-width: 100%; }
  .comment-reaction-picker[open] { flex-basis: 100%; }
  .comment-reaction-picker summary { list-style: none; width: fit-content; }
  .comment-reaction-picker summary::-webkit-details-marker { display: none; }
  .comment-reaction-picker .comment-reaction-options { display: flex; flex-wrap: wrap; gap: 6px; max-width: 318px; margin-top: 8px; padding: 8px; border: 1px solid #d7dfec; border-radius: 14px; background: #fff; }
  .comment-actions .comment-reaction-options button[data-reaction-emoji] { width: 44px; height: 44px; padding: 0; font-size: 22px; flex-shrink: 0; }
  .comment-reaction-message { font-size: 12px; line-height: 1.5; color: #63718a; }
  .comment-reaction-message:empty { display: none; }
  .comment-actions .comment-reactions [hidden] { display: none !important; }
  html[data-theme="dark"] .comment-actions .comment-reactions button,
  html[data-theme="dark"] .comment-actions .comment-reaction-picker summary { background: #263247; border-color: #53627a; color: #e4ebf7; }
  html[data-theme="dark"] .comment-actions .comment-reactions button[aria-pressed="true"] { background: #4b2940; border-color: #ef9fbe; color: #ffd4e5; }
  html[data-theme="dark"] .comment-reaction-options { background: #1d283b; border-color: #53627a; }
  html[data-theme="dark"] .comment-reaction-message { color: #b9c5da; }
  html[data-theme="dark"] .comment-actions .comment-reactions :focus-visible { outline-color: #ef9fbe; }
  @media (max-width: 600px) {
    .comment-actions .comment-reactions { flex-basis: 100%; }
    .comment-actions .comment-reactions button,
    .comment-actions .comment-reaction-picker summary { min-height: 44px; min-width: 44px; }
  }
}
@media print { .comment-reactions { display: none !important; } }

/* ---- Кнопка «Реакция» в одном ряду с «Изменить», «Удалить», «Вложение» ----
   Она сделана из <summary>, поэтому общий стиль кнопок обсуждения её не
   касался: выходила крупная серо-голубая плашка рядом с мелкими мятными
   капсулами. Повторяем те же размеры и цвета, что у соседей. */
.comment-actions .comment-reaction-picker summary {
  gap: 4px;
  min-height: 0;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid rgba(175, 29, 78, .22);
  border-radius: 999px;
  background: rgba(220, 248, 239, .66);
  color: #7d1436;
  font-size: 10px;
  line-height: normal;
}
.comment-actions .comment-reaction-picker summary:hover {
  transform: translateY(-1px);
  border-color: rgba(175, 29, 78, .22);
  background: rgba(175, 29, 78, .14);
}
[data-theme=dark] .comment-actions .comment-reaction-picker summary {
  border-color: var(--line);
  background: rgba(28, 42, 60, .7);
  color: var(--muted);
}
[data-theme=dark] .comment-actions .comment-reaction-picker summary:hover {
  background: rgba(189, 31, 84, .22);
  color: var(--text);
}