/* Mentions — redesign.
 *
 * Covers three surfaces:
 *   1. The @-mention chip embedded in rich text (comments + descriptions).
 *   2. The autocomplete popover (<lexxy-prompt-menu>) that appears as you
 *      type `@` in the Lexxy editor.
 *   3. The popover's individual items (<.lexxy-prompt-menu__item>).
 *
 * Replaces the legacy components/mentions.css. The markup shipped from
 * team_members/_mention.html.erb (@Name) and _prompt_item.html.erb remains
 * the same — only styling changes.
 */

/* ------------------------------------------------------------------ */
/* .mention chip — inline in rendered rich text                       */
/* ------------------------------------------------------------------ */
@layer components {
  .mention {
    display: inline;
    padding: 0 4px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
    font-weight: 600;
    font-size: 0.96em;
    font-style: normal;
    border-radius: var(--rd-radius-sm);
    white-space: nowrap;
    text-decoration: none;
  }
  .mention:hover {
    background: oklch(0.68 0.22 0 / 0.18);
  }

  .mention-unresolved {
    background: var(--rd-bg-hover);
    color: var(--rd-fg-muted);
  }
}

/* ------------------------------------------------------------------ */
/* Autocomplete popover — scoped outside @layer so it wins against     */
/* Lexxy's default stylesheet load order.                              */
/* ------------------------------------------------------------------ */
.lexxy-prompt-menu {
  visibility: hidden;
  z-index: 1000;
  min-width: 220px;
  max-width: 300px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--rd-bg-raised);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-lg);
  box-shadow: var(--rd-shadow-pop);
  padding: 4px;
}
.lexxy-prompt-menu--visible {
  visibility: visible;
}

.lexxy-prompt-menu__item {
  cursor: pointer;
  border-radius: var(--rd-radius-md);
  transition: background-color var(--rd-dur-fast) var(--rd-ease);
}
.lexxy-prompt-menu__item[aria-selected] {
  background: var(--rd-accent-soft);
}
.lexxy-prompt-menu__item:hover:not([aria-selected]) {
  background: var(--rd-bg-hover);
}

/* Row content. Prefixed with .lexxy-prompt-menu so these rules clear any
   default Lexxy styling on the menu item. Updated markup in
   team_members/_prompt_item.html.erb yields:
     <div class="mention-option">
       <span class="mention-avatar">...</span>
       <span class="mention-meta">
         <span class="mention-option-name">Name</span>
         <span class="mention-option-sub">email</span>
       </span>
     </div>
*/
.lexxy-prompt-menu .mention-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}
.lexxy-prompt-menu .mention-avatar {
  width: 18px;
  height: 18px;
  border-radius: var(--rd-radius-sm);
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 8.5px;
  font-weight: 600;
  flex: 0 0 auto;
  line-height: 1;
  overflow: hidden;
}
.lexxy-prompt-menu img.mention-avatar {
  object-fit: cover;
  display: block;
}
.lexxy-prompt-menu .mention-option .avatar {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.lexxy-prompt-menu .mention-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.15;
}
.lexxy-prompt-menu .mention-option-name {
  font-size: var(--rd-text-sm);
  font-weight: 500;
  color: var(--rd-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lexxy-prompt-menu .mention-option-sub {
  font-size: var(--rd-text-2xs);
  color: var(--rd-fg-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ */
/* Inline-render fixes — force mentions to flow naturally inside the   */
/* Lexxy editor, regardless of how Lexxy wraps them.                   */
/* ------------------------------------------------------------------ */
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.mention"] {
  display: inline !important;
  white-space: normal !important;
}
lexxy-editor .mention {
  display: inline !important;
  white-space: nowrap !important;
}
lexxy-editor span[data-lexical-decorator="true"] {
  display: inline !important;
}
action-text-attachment[content-type="application/vnd.actiontext.mention"] {
  display: inline;
}