.tiptap-page-mention,
.tiptap a.tiptap-page-mention {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--color-zinc-500) 15%, transparent);
  color: var(--color-zinc-200);
  font-size: 0.95em;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
  vertical-align: baseline;
  white-space: nowrap;
}

/* The page-mention static renderer emits an anchor for accessible links. The
   `.tiptap a` chain in `content.css` (color: accent + underline) has higher
   specificity than a single-class chip rule, so we double up here to make
   sure the chip styling wins regardless of variant. */
.tiptap a.tiptap-page-mention:hover {
  background-color: color-mix(in srgb, var(--color-zinc-500) 30%, transparent);
  color: var(--color-zinc-100);
  text-decoration: none;
}

.tiptap-page-mention:hover {
  background-color: color-mix(in srgb, var(--color-zinc-500) 30%, transparent);
  color: var(--color-zinc-100);
}

.tiptap-page-mention:focus-visible {
  outline: 2px solid rgb(var(--accent-500) / 0.6);
  outline-offset: 1px;
}

.tiptap-page-mention-label {
  border-bottom: 1px dashed color-mix(in srgb, var(--color-zinc-400) 50%, transparent);
}

.tiptap-page-mention:hover .tiptap-page-mention-label {
  border-bottom-color: color-mix(in srgb, var(--color-zinc-300) 70%, transparent);
}

.tiptap-page-mention-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  line-height: 1;
}

.tiptap-page-mention--pending {
  color: var(--color-zinc-500);
  cursor: default;
}

.tiptap-page-mention--pending .tiptap-page-mention-label {
  border-bottom-color: transparent;
}

.tiptap-page-mention--pending:hover {
  background-color: color-mix(in srgb, var(--color-zinc-500) 15%, transparent);
  color: var(--color-zinc-500);
}

.tiptap-page-mention--restricted {
  color: var(--color-zinc-500);
  cursor: default;
}

.tiptap-page-mention--restricted .tiptap-page-mention-label {
  border-bottom-color: transparent;
}

.tiptap-page-mention--restricted:hover {
  background-color: color-mix(in srgb, var(--color-zinc-500) 15%, transparent);
  color: var(--color-zinc-500);
}

.ProseMirror-selectednode.tiptap-page-mention,
.tiptap-page-mention.ProseMirror-selectednode {
  background-color: color-mix(in srgb, var(--color-accent-500) 25%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 50%, transparent);
}

.tiptap-page-mention-picker-search {
  padding: 8px 8px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-zinc-500) 25%, transparent);
}

.tiptap-page-mention-picker-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--color-zinc-500) 30%, transparent);
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--color-zinc-900) 80%, transparent);
  color: var(--color-zinc-200);
  font-size: 0.875rem;
  outline: none;
}

.tiptap-page-mention-picker-input::placeholder {
  color: var(--color-zinc-500);
}

.tiptap-page-mention-picker-input:focus {
  border-color: color-mix(in srgb, var(--color-accent-500) 60%, transparent);
  background-color: var(--color-zinc-900);
}