@layer components {
  .message-edit { position: relative; }
  .mention-popover {
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; width: 320px; max-width: calc(100vw - 32px); padding: 5px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--popover); color: var(--popover-foreground);
    box-shadow: var(--shadow-sm); font-size: 13px; line-height: 1.4;
  }
  /* The warning for the active option sits right above the field; the list rises by its height. */
  .mention-notice {
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; width: 320px; max-width: calc(100vw - 32px); padding: 8px 10px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    border: 1px solid var(--jx-wait); border-radius: 10px; background: var(--popover); color: var(--popover-foreground);
    box-shadow: var(--shadow-sm); font-size: 13px; line-height: 1.4;
  }
  .mention-notice[hidden] { display: none; }
  .mention-notice-text { margin: 0; }
  .mention-add[hidden] { display: none; }
  .mention-popover[data-mention-target=popover]:has(~ .mention-notice:not([hidden])) { bottom: calc(100% + 12px + var(--mention-notice-height, 0px)); }
  .mention-options { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
  .mention-options ul { list-style: none; margin: 0; padding: 0; }
  .mention-group { padding: 5px 8px 6px; color: var(--muted-foreground); }
  .mention-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
  .mention-option:is(:hover, :active) { background: var(--accent); }
  /* The keyboard choice also carries an accent bar, not only a faint background. */
  .mention-option[aria-selected="true"] { background: var(--accent); box-shadow: inset 2px 0 0 var(--jx-accent); }
  /* The key hints help a keyboard; a finger has none. */
  .mention-footer { border-top: 1px solid var(--border); margin-top: 4px; font-size: 13px; }
  .mention-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mention-note {
    /* The note gives way before the name: a long place or role never hides who or what is picked. */
    margin-left: auto; flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--muted-foreground);
  }
  .mention-option .mention-name { flex: 0 0 auto; max-width: 60%; }
  .mention-document-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px;
    color: var(--muted-foreground);
  }
  .mention-option:is(:hover, :active, [aria-selected="true"]) .mention-note { color: var(--popover-foreground); }
  .mention-option .mention-note--outsider { color: var(--jx-wait); }
  /* Emoji suggestions reuse the mention list; the shortcode keeps its width and the French label shrinks. */
  .emoji-option-char { flex: none; width: 24px; text-align: center; font-size: 18px; line-height: 1; }
  .emoji-option .mention-name { flex: none; }
  .emoji-option .mention-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* A channel's pill is neutral where a person's or an agent's is tinted; its "#" says the rest, not the colour. */
  .mention--channel { background: var(--muted); color: var(--foreground); }
  a.mention--channel { text-decoration: none; }
  a.mention--channel:hover { text-decoration: underline; }
  .message:is(:target, .is-mentioning-me) .mention.mention--channel { background: var(--background); box-shadow: inset 0 0 0 1px var(--border); }
  /* A channel alert reads neutral, like its pill: no person or agent colour. */
  .mention-alert-avatar, .mention-channel-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 6px;
    color: var(--foreground); background: var(--muted);
  }
  .mention-agent-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 6px;
    color: var(--agent-color); background: color-mix(in oklch, var(--agent-color) 14%, transparent);
  }

  /* Touch screens: options a finger picks, five in view at most, never over the thread's header with the keyboard
     open (--vv-height comes from lib/visual_viewport.js). */
  @media (pointer: coarse) {
    .mention-footer { display: none; }
    .mention-add { min-height: var(--tap); }
    .mention-option { min-height: 48px; padding-block: 0; }
    .mention-options { max-height: min(calc(5 * 48px + 1.875rem), calc(var(--vv-height, 100dvh) - 13rem)); }
  }

  /* Phones: the composer's list spans the screen, right above the field. */
  @media (max-width: 767px) {
    .composer .mention-notice { left: calc(-1 * (var(--gutter) + 1px)); right: calc(-1 * (var(--gutter) + 1px)); width: auto; max-width: none; border-inline: 0; border-radius: 0; }
    .composer .mention-popover {
      left: calc(-1 * (var(--gutter) + 1px)); right: calc(-1 * (var(--gutter) + 1px)); width: auto; max-width: none;
      border-inline: 0; border-radius: 12px 12px 0 0;
    }
  }
}