/* Chat @-mentions: the composer's autocomplete popup + chip row
   (chat--mention Stimulus controller, server-rendered results/chips)
   and the mention chip inside sent bubbles (rendered from the
   message's validated metadata snapshot).

   Popup open/closed state rides on the [hidden] attribute (FE-4);
   selection state on [aria-selected]; the chip row hides itself via
   :empty. The composer form is the positioning context (declared in
   components/chat_composer.css — that file owns the form block). */

.chat-mention-popup {
  --chat-mention-bg: var(--tblr-bg-surface);
  --chat-mention-border: var(--gxp-slate-200);
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 0;
  margin-block-end: 0.25rem;
  min-inline-size: 18rem;
  max-inline-size: 100%;
  background: var(--chat-mention-bg);
  border: 1px solid var(--chat-mention-border);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
}

.chat-mention-results {
  max-block-size: 16rem;
  overflow-y: auto;
  padding-block: 0.25rem;
}

.chat-mention-group + .chat-mention-group {
  margin-block-start: 0.25rem;
}

.chat-mention-group-label {
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gxp-slate-400);
}

.chat-mention-item {
  --chat-mention-item-bg: transparent;
  --chat-mention-item-color: var(--gxp-slate-800);
  --chat-mention-item-icon-color: var(--gxp-slate-400);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
  border: 0;
  background: var(--chat-mention-item-bg);
  text-align: start;
  font-size: 0.875rem;
  color: var(--chat-mention-item-color);
  cursor: pointer;
}

.chat-mention-item[aria-selected="true"] {
  --chat-mention-item-bg: var(--traqx-blue-50);
  --chat-mention-item-color: var(--traqx-blue-700);
  --chat-mention-item-icon-color: var(--traqx-blue-600);
}

.chat-mention-item-icon {
  display: inline-flex;
  color: var(--chat-mention-item-icon-color);
  flex-shrink: 0;
}

.chat-mention-item-label {
  flex: 1;
  min-inline-size: 0;
}

.chat-mention-empty {
  padding-block: 0.75rem;
  padding-inline: 0.75rem;
  font-size: 0.875rem;
  color: var(--gxp-slate-500);
}

/* --- The inline mention pill --- */

/* One chip, two homes: atomic pill inside the composer editor
   (contenteditable=false, serialized to its token) and inline chip in
   the sent bubble's flowing text (rendered from the metadata
   snapshot). Same block, same look.

   The chip is a TRUE inline participant: it inherits the surrounding
   font-size and line-height, sits on the text baseline, and wraps with
   the flow (box-decoration-break keeps the pill shape on both wrap
   fragments). No inline-block: combined with overflow it would move
   the baseline to the box bottom and inflate the line — exactly the
   "floats above the line" look this replaces. Vertical padding is
   deliberately near-zero so the line height never grows; the pill
   reads as highlighted text, not as a badge. */
.mention-chip {
  display: inline;
  padding-block: 0.075em;
  padding-inline: 0.35em;
  border-radius: var(--tblr-border-radius);
  background: var(--traqx-blue-100);
  color: var(--traqx-blue-700);
  font-weight: 500;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The composer pill's mouse remove affordance (×) — built into the
   chip by atoms.js and the autocomplete template, never part of
   bubble chips or drag ghosts. Decorative (aria-hidden): keyboard
   deletion stays Backspace/Delete via the engine's atom deletion.
   Same mask technique as the type icons. */
.mention-chip-remove {
  display: inline-block;
  inline-size: 0.75em;
  block-size: 0.75em;
  margin-inline-start: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  opacity: 0.55;
  cursor: pointer;
  -webkit-mask: var(--mention-chip-x) center / contain no-repeat;
  mask: var(--mention-chip-x) center / contain no-repeat;
  --mention-chip-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
}

.mention-chip-remove:hover {
  opacity: 1;
}

/* Adjacent pills hug each other otherwise (between them sit only the
   zero-width caret guards) — a hair of visual breathing room, without
   inserting characters into the serialized text. The `+` combinator
   matches across intervening text nodes, so the guards don't break it. */
.mention-chip + .mention-chip {
  margin-inline-start: 0.2em;
}

/* Type icon inside the chip, keyed by the one-letter token anchor
   (a=artifact, d=document, k=knowledge_source). The shapes are the
   SAME Tabler icons the agent stage headlines and popup rows use
   (Type.icon: package / files / book, lib/icons/outline) — inlined as mask data-URIs so the icon
   (a) inherits the chip color via currentColor and (b) needs NO new
   markup: pure CSS keeps the bubble renderer's sanitizer allowlist
   untouched (SEC-12/SEC-14). A new mention type adds one anchor rule
   here alongside its Type class. */
.mention-chip[data-mention-anchor]::before {
  content: "";
  display: inline-block;
  inline-size: 0.85em;
  block-size: 0.85em;
  margin-inline-end: 0.3em;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: var(--mention-chip-icon) center / contain no-repeat;
  mask: var(--mention-chip-icon) center / contain no-repeat;
}

.mention-chip[data-mention-anchor="a"] { --mention-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5'/%3E%3Cpath d='M12 12l8 -4.5'/%3E%3Cpath d='M12 12l0 9'/%3E%3Cpath d='M12 12l-8 -4.5'/%3E%3Cpath d='M16 5.25l-8 4.5'/%3E%3C/svg%3E"); }
.mention-chip[data-mention-anchor="d"] { --mention-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2'/%3E%3C/svg%3E"); }
.mention-chip[data-mention-anchor="k"] { --mention-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6l0 13'/%3E%3Cpath d='M12 6l0 13'/%3E%3Cpath d='M21 6l0 13'/%3E%3C/svg%3E"); }

/* Drag ghost (drag_payload_controller's ghost target): a REAL chip,
   rendered but parked offscreen so setDragImage can rasterize it —
   dragging previews the pill the drop will insert. position: fixed
   escapes any ancestor overflow clipping (a clipped ghost rasterizes
   blank); the pill needs its own font-size since it leaves the text
   flow it usually inherits from. */
.drag-payload-ghost {
  position: fixed;
  inset-block-start: -100vh;
  inset-inline-start: 0;
  pointer-events: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Rejection alert (invalid mention on submit) — appended to the
   bubbles container, sized like a bubble row. */
.chat-mention-alert {
  margin-block-start: 0.5rem;
}

.chat-mention-alert-tokens {
  overflow-wrap: anywhere;
  /* Muted token list — same hue .text-secondary would give, minus
     its !important. */
  color: var(--tblr-secondary);
}