@layer components {
  .message-reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  .message-reactions[hidden], .message-react[hidden] { display: none; }
  .reaction, .reaction-control {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; padding: 3px 8px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--foreground);
    font: inherit; font-size: var(--text-body); cursor: pointer;
  }
  .reaction, .reaction-add { border-radius: 999px; }
  .reaction-add { visibility: hidden; gap: 2px; padding-inline: 7px; }
  .message:focus-within .reaction-add, .message[data-reaction-focusing] .reaction-add { visibility: visible; }
  /* A real hover only: a tap hovers too, and iOS Safari then drops its click. */
  @media (hover: hover) { .message:hover .reaction-add { visibility: visible; } }
  @media (hover: none), (pointer: coarse) { .reaction-add { display: none; } }
  .reaction { -webkit-touch-callout: none; user-select: none; }
  .conversation[data-can-post="false"] .reaction-add { display: none; }
  .reaction[aria-pressed="true"] { border-color: var(--jx-accent); color: var(--jx-accent); background: var(--jx-accent-soft); }
  .reaction:disabled { cursor: default; }
  .reaction > span:first-child, .emoji-choice {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  .message-quick-react { font-size: 15px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
  .message-quick-react[aria-pressed="true"] { background: var(--jx-accent-soft); box-shadow: inset 0 0 0 1.5px var(--jx-accent); }
  /* A space's emoji is an image sized by the place that holds it: 16 px in a pill, 18 in a quick reaction, 28 in the grid. */
  /* A box of its own, centered by its holder: inline, the image would sit on the text's baseline, above the middle. */
  .reaction-glyph { display: flex; flex: none; justify-content: center; line-height: 0; }
  .reaction-emoji { display: block; flex: none; width: 20px; height: 20px; object-fit: contain; }
  .reaction .reaction-emoji { width: 16px; height: 16px; }
  .message-quick-react .reaction-emoji { width: 18px; height: 18px; }
  .emoji-choice .reaction-emoji { width: 28px; height: 28px; }
  .emoji-preview .reaction-emoji { width: 24px; height: 24px; }
  .emoji-choice { display: grid; place-items: center; color: inherit; }
  .emoji-categories .emoji-space-mark {
    display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
    background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; line-height: 1; /* decorative: initials */
  }
  /* The picker's bottom: the emoji under the pointer or the focus, and the way to the management page. */
  #reaction_picker .sheet-foot { flex-direction: row; align-items: center; min-height: 44px; padding: 6px 14px; }
  .emoji-foot { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .emoji-preview { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .emoji-preview code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .emoji-preview-glyph { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1; }
  .emoji-preview-label { color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .emoji-manage { flex: none; font-size: var(--text-body); }
  .emoji-frequent-title { margin: 10px 0 6px; font-size: var(--text-body); font-weight: 600; color: var(--muted-foreground); }
  .reaction-control { background: transparent; color: var(--muted-foreground); }
  .reaction:focus-visible, .reaction-control:focus-visible, .emoji-choice:focus-visible {
    outline: 2px solid var(--jx-accent); outline-offset: 2px;
  }
  /* Top-layer card placed by script by its pill; the ::before bridges the gap on the side facing the pill. */
  .reaction-bubble {
    position: fixed; inset: auto; margin: 0; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground);
    box-shadow: var(--shadow-sm); font-size: var(--text-body); line-height: 1.35; overflow-wrap: anywhere; overflow: visible;
  }
  .reaction-bubble::before { content: ""; position: absolute; left: 0; right: 0; height: 8px; }
  .reaction-bubble[data-side="above"]::before { top: 100%; }
  .reaction-bubble[data-side="below"]::before { bottom: 100%; }
  :is(#reaction_picker, #reaction_details) [hidden] { display: none; }
  .emoji-search { width: 100%; }
  .emoji-categories { display: flex; gap: 4px; overflow-x: auto; padding: 10px 0; }
  .emoji-categories button { flex: none; }
  .emoji-categories [aria-pressed="true"] { color: var(--jx-accent); background: var(--jx-accent-soft); }
  .emoji-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .emoji-choice { min-width: 0; min-height: 44px; padding: 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; font-size: 24px; cursor: pointer; }
  .emoji-choice:hover, .emoji-choice[aria-pressed="true"] { background: var(--jx-accent-soft); border-color: var(--jx-accent); }
  .reaction-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
  .reaction-group [aria-pressed="true"] { color: var(--jx-accent); background: var(--jx-accent-soft); }
  .reaction-people { list-style: none; padding: 0; margin: 10px 0; }
  .reaction-people li { padding: 6px 0; border-bottom: 1px solid var(--border); }
  .reaction-error { margin: 0; color: var(--muted-foreground); font-size: var(--text-body); }
  .reaction-error:not(:empty) { padding: 8px var(--gutter); }
  /* A page shown from its offline copy cannot load reactions: no error, no retry offered. */
  html[data-offline-copy] .reaction-error { display: none; }
  @media (min-width: 1100px) {
    :is(#reaction_picker, #reaction_details) { width: 380px; max-height: 440px; }
    /* Taller by the footer's height, so the grid keeps its room. */
    #reaction_picker { max-height: 468px; }
    :is(#reaction_picker, #reaction_details)[style] { position: fixed; inset: var(--reaction-top, auto) auto auto var(--reaction-left, auto); margin: 0; }
  }
  @media (pointer: coarse) {
    .reaction, .reaction-control, .reaction-group button, .emoji-categories button { min-width: 44px; min-height: 44px; }
    .reaction { min-width: 64px; padding-inline: 12px; }
  }
}