/* Emoji reactions, GitHub-style: a smiley trigger opens the picker popup;
   emoji in use render as count chips (yours highlighted via aria-pressed).
   The feed-row summary stays read-only. */

@layer components {
  .reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space-half);
  }

  .reaction-picker {
    position: relative;
  }

  .reaction-picker__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--component-sm);
    block-size: var(--component-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    color: var(--color-text-subtle);
    font-size: var(--text-small);

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
        color: var(--color-ink);
      }
    }
  }

  /* Anchored to the trigger's end edge: the picker lives at the right side of
     footers, so the popup opens up-and-left to stay inside the panel. */
  /* Composes .popover (anchor + canvas + border + shadow); keeps its upward
     offset, horizontal layout, and pill radius as deltas. */
  .reaction-picker__menu {
    --popover-origin: bottom right;
    inset-block-end: 100%;
    margin-block-end: 0.25rem;
    display: flex;
    gap: 0.2ch;
    padding: 0.25rem;
    border-radius: var(--radius-pill);
  }

  .reaction-picker__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-normal);
    background: none;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
      }
    }

    &[aria-checked="true"] {
      background: var(--color-mist);
    }
  }

  /* Who-reacted tooltip (GitHub-style): dark, centered above the chip, fed by
     data-tooltip. Hover or keyboard focus shows it. */
  .reaction {
    position: relative;
  }

  .reaction[data-tooltip]:hover::after,
  .reaction[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-block-end: calc(100% + 0.375rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: max-content;
    max-inline-size: 11.25rem;
    padding: 0.375rem var(--inline-space);
    background: var(--color-ink);
    color: var(--color-canvas);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-x-small);
    line-height: var(--leading-snug);
    text-align: center;
    white-space: normal;
    z-index: 20;
    pointer-events: none;
  }

  /* Chips sit right-aligned in footers; when the content column is narrow a
     centered tooltip would clip past the panel edge, so anchor it to the chip's
     end instead. Keyed to the container, not the viewport. */
  @container app (max-width: 540px) {
    .reaction[data-tooltip]:hover::after,
    .reaction[data-tooltip]:focus-visible::after {
      inset-inline-start: auto;
      inset-inline-end: 0;
      transform: none;
    }
  }

  .reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;
    min-block-size: var(--component-sm);
    padding-inline: var(--inline-space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    font-size: var(--text-small);

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
      }
    }

    &[aria-pressed="true"] {
      border-color: var(--color-primary);
      background: var(--color-mist);
    }
  }

  .reaction__form {
    margin: 0;
    display: contents;
  }

  .reaction__count {
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    font-weight: 600;
    color: var(--color-text-subtle);
  }

  .reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    margin-inline-start: auto;
    font-size: var(--text-x-small);
    color: var(--color-text-subtle);
  }

  .reaction-summary__item {
    display: inline-flex;
    align-items: center;
    gap: 0.2ch;
  }
}