editor.css

/*
 * KunEditor reference stylesheet.
 *
 * `@kungal/editor-vue` ships ZERO CSS — it only renders stable class hooks
 * (`.kun-editor__*`, `.kun-mention-dropdown*`) and `data-*` state. This file is
 * the canonical styling of those hooks, themed with KunUI design tokens
 * (`--color-*` from `@kungal/ui-tokens`), and it ships with the KunUI layer:
 *
 *   @import '@kungal/editor-nuxt/editor.css';
 *
 * Import it (fixes then arrive with a version bump) or copy it into your app and
 * edit freely — it's plain CSS with no build step.
 *
 * It also carries the structural rules the editor genuinely needs to function:
 * ProseMirror's `white-space`, the guard on ProseMirror's caret hack nodes, and
 * the popover positioning / show-hide.
 */

/* The surface every floating panel sits on (selection bubble, @mention dropdown,
 * sticker/emoji picker). KunUI's `--color-content1` is the RAISED surface token —
 * opaque by default, the same one KunPopover / KunDropdown use. `--color-background`
 * is the glassy page tint (0.7 alpha), so a panel floating OVER text would show
 * that text through it. Override this one var to restyle all three. */
:root {
  --kun-editor-surface: var(--color-content1, var(--color-background));
}

/* ── Shell + dual-view tabs ─────────────────────────────────────────────── */
.kun-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kun-editor__toolbar {
  display: flex;
  gap: 0.25rem;
}

.kun-editor__tab {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.kun-editor__tab[data-active='true'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-foreground, #fff);
}

/* Swap-sides button (split mode) — pushed to the end of the tab row. */
.kun-editor__swap {
  margin-left: auto;
}

/* ── Split view — editable source + read-only WYSIWYG preview ────────────── */
/* Stacked on narrow screens; side-by-side (swappable) from md up. The panes
   div is a plain block in non-split modes, so this only affects split. */
.kun-editor[data-mode='split'] .kun-editor__panes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.kun-editor[data-mode='split'] .kun-editor__pane {
  flex: 1 1 0;
  min-width: 0;
  /* Each pane scrolls internally (a bounded height) so scroll sync has something
     to sync. Override --kun-editor-split-height to taste. */
  height: var(--kun-editor-split-height, 60vh);
}
/* Make each editor fill + scroll within its pane. */
.kun-editor[data-mode='split'] .kun-editor__source .cm-editor {
  height: 100%;
}
.kun-editor[data-mode='split'] .kun-editor__wysiwyg {
  overflow: auto;
}
@media (min-width: 48rem) {
  .kun-editor[data-mode='split'] .kun-editor__panes {
    flex-direction: row;
    align-items: stretch;
  }
  .kun-editor[data-mode='split'] .kun-editor__panes[data-swap='true'] {
    flex-direction: row-reverse;
  }
}

/* ── WYSIWYG surface (ProseMirror) ──────────────────────────────────────── */
.kun-editor__wysiwyg .milkdown {
  outline: none;
}

.kun-editor__wysiwyg .ProseMirror {
  min-height: 8rem;
  padding: 0.75rem;
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  outline: none;
  /* ProseMirror REQUIRES a white-space rule; pre-wrap keeps wrapping + spaces. */
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ProseMirror's caret hack node. When a textblock ENDS in a `contenteditable=false`
 * node — an @mention or #floor chip, inline math, any inline atom — prosemirror-view
 * appends `<img class="ProseMirror-separator">` + `<br class="ProseMirror-trailingBreak">`
 * so Chrome / Safari can draw a caret after it. The img is meant to be a 0×0
 * inline nothing, but a host's generic `img` rule (Tailwind's preflight makes
 * every img display:block; the forum adds my-8 margins and a border) turns it
 * into a block box: the trailing <br>, and the caret with it, drop onto a new
 * line, the paragraph doubles in height, and every Backspace past a chip looks
 * like a jump. prosemirror-view's own stylesheet ships this guard ("Protect
 * against generic img rules"); Milkdown doesn't include that sheet, so it lives
 * here. `!important` on purpose — it has to beat whatever the host's prose
 * layer says about images. */
.kun-editor__wysiwyg img.ProseMirror-separator {
  display: inline !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Stickers. A sticker is a plain markdown image; @kungal/editor-core's sticker
 * plugin puts `kun-sticker` on the ones it recognizes (picked from the panel,
 * or matched by the host's `isSticker`). Sized like the forum's rendered post:
 * inline, 5rem (80px) tall, sitting on the text line — none of the host prose
 * layer's figure styling (block, full width, my-8 margins, border). The extra
 * `.ProseMirror` is specificity, so a host `.prose img` rule doesn't win. */
.kun-editor__wysiwyg .ProseMirror img.kun-sticker {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: 5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  vertical-align: middle;
}

/* The spoiler chip while you EDIT it (`||hidden||`). @kungal/editor-core paints
 * a `currentColor`-derived tint on its own — it must look hidden in a host with
 * no design tokens at all — and reads `--kun-spoiler-bg` first, which is this
 * hook: KunUI's muted surface, so the chip matches the rest of the chrome.
 * Setting a custom property works from here even though the chip's `background`
 * is an inline style (specificity applies per property, and this sets a
 * different one). */
.kun-editor__wysiwyg .kun-spoiler {
  --kun-spoiler-bg: var(--color-default-200);
}

/* Placeholder: the editor sets a `data-placeholder` attr + this class on the
 * empty block (a decoration, not real content). Render the text via ::before so
 * it never affects the doc / caret. */
/* The ::before is absolutely positioned, so it needs a positioned ancestor —
 * without one its containing block is the viewport and a long placeholder is
 * laid out against THAT width, escaping the editor (horizontal overflow). */
.kun-editor__placeholder {
  position: relative;
}

.kun-editor__placeholder::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0;
  left: 0;
  /* Wrap inside the block instead of running past the editor's right edge. */
  width: 100%;
  overflow-wrap: break-word;
  color: var(--color-default-400);
  pointer-events: none;
}

/* In-flight "uploading…" placeholder — a decoration widget the editor drops at
 * the caret while `uploadImage` runs (paste / drop / toolbar), replaced by the
 * image when it resolves. */
.kun-editor__uploading {
  color: var(--color-primary);
  font-size: 0.875rem;
  user-select: none;
}

/* ── Selection bubble toolbar (floats over a text selection) ────────────── */
/* Positioned by floating-ui (absolute left/top); visibility via data-show. */
.kun-editor__bubble {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  gap: 0.125rem;
  padding: 0.25rem;
  background: var(--kun-editor-surface);
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  z-index: 40;
}
.kun-editor__bubble[data-show='false'] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  pointer-events: none;
}

/* Enter: fade, a 4px rise, .98 → 1 (~150ms); leave in ~100ms — the entity
 * bubble's motion. Already showing when the selection moves (data-glide), it
 * glides there instead of re-entering; focus gone to another field
 * (data-instant), it vanishes at once. */
@media (prefers-reduced-motion: no-preference) {
  .kun-editor__bubble {
    transform-origin: bottom center;
    transition:
      opacity 150ms ease-out,
      transform 150ms ease-out,
      visibility 0s;
  }
  .kun-editor__bubble[data-show='false'] {
    transition:
      opacity 100ms ease-in,
      transform 100ms ease-in,
      visibility 0s linear 100ms;
  }
  .kun-editor__bubble[data-glide] {
    transition:
      opacity 150ms ease-out,
      transform 150ms ease-out,
      left 150ms ease-out,
      top 150ms ease-out;
  }
  .kun-editor__bubble[data-instant] {
    transition: none;
  }
}
.kun-editor__bubble-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
}
.kun-editor__bubble-btn:hover {
  background: var(--color-default-100);
}

/* ── Loading placeholder (WYSIWYG create/hydrate gap) ───────────────────── */
/* Shown while Milkdown hydrates; reserves height so the area doesn't collapse. */
.kun-editor__loading {
  padding: 0.75rem 0;
}
.kun-editor__skeleton {
  height: 0.85rem;
  margin: 0.6rem 0;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--color-default-100) 25%,
    var(--color-default-200) 50%,
    var(--color-default-100) 75%
  );
  background-size: 200% 100%;
  animation: kun-editor-shimmer 1.2s ease-in-out infinite;
}
.kun-editor__skeleton:nth-child(2) {
  width: 85%;
}
.kun-editor__skeleton:nth-child(3) {
  width: 60%;
}
@keyframes kun-editor-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kun-editor__skeleton {
    animation: none;
  }
}

/* ── Formatting toolbar ─────────────────────────────────────────────────── */
.kun-editor__format-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
}

.kun-editor__toolbar-divider {
  width: 1px;
  align-self: stretch;
  margin: 0.25rem;
  background: var(--color-default-200);
}

.kun-editor__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
}

.kun-editor__tool:hover {
  background: var(--color-default-100);
}

.kun-editor__tool[data-active='true'],
.kun-editor__bubble-btn[data-active='true'] {
  background: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
}

.kun-editor__tool[data-active='true']:hover,
.kun-editor__bubble-btn[data-active='true']:hover {
  background: var(--color-primary);
}

.kun-editor__icon {
  display: inline-flex;
}

/* ── Link editor (文本 + 链接) ──────────────────────────────────────────── */
/* One editor, every entry point: the selection bubble swaps its button row for
   it IN PLACE (data-mode='link': the bubble holds its left edge and grows to
   17rem); the headless toolbar opens it in this small floating panel; the KunUI
   toolbar in a KunPopover. */
.kun-editor__link {
  position: relative;
  display: inline-flex;
}

.kun-editor__link-panel {
  position: absolute;
  z-index: 30;
  box-sizing: border-box;
  width: 18rem;
  max-width: calc(100vw - 1rem);
  padding: 0.5rem;
  background: var(--kun-editor-surface);
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.kun-editor__bubble[data-mode='link'] {
  width: 17rem;
  max-width: calc(100vw - 1rem);
  padding: 0.5rem;
}

.kun-link-editor {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.375rem;
}

.kun-link-editor__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-default-200);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}

/* Phones: 16px, or iOS Safari zooms the page when the field takes focus. */
@media (max-width: 640px) {
  .kun-link-editor__input {
    font-size: 16px;
  }
}

.kun-link-editor__input:focus {
  border-color: var(--color-primary);
}

.kun-link-editor__input[aria-invalid='true'] {
  border-color: var(--color-danger, #e5484d);
}

.kun-link-editor__input[readonly] {
  background: var(--color-default-100);
  color: var(--color-default-500);
}

.kun-link-editor__error {
  color: var(--color-danger, #e5484d);
  font-size: 0.75rem;
}

.kun-link-editor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.kun-link-editor__spacer {
  flex: 1;
}

.kun-link-editor__action {
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.kun-link-editor__action:hover {
  background: var(--color-default-100);
}

.kun-link-editor__action:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.kun-link-editor__action[data-action='apply'] {
  background: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
}

.kun-link-editor__action[data-action='unlink'] {
  color: var(--color-danger, #e5484d);
}

/* ── Markdown source (CodeMirror) ───────────────────────────────────────── */
.kun-editor__source .cm-editor {
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* ── @mention dropdown (a slash view; positioned by SlashProvider) ──────── */
.kun-mention-dropdown {
  position: absolute;
  z-index: 30;
  display: none;
  min-width: 12rem;
  max-width: 20rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--kun-editor-surface);
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.kun-mention-dropdown[data-show='true'] {
  display: block;
}

.kun-mention-dropdown__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kun-mention-dropdown__item:hover,
.kun-mention-dropdown__item[data-active='true'] {
  background: var(--color-default-100);
}

.kun-mention-dropdown__avatar {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  object-fit: cover;
}

.kun-mention-dropdown__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-default-200);
  color: var(--color-default-600);
  font-size: 0.75rem;
}

.kun-mention-dropdown__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.kun-mention-dropdown__hint {
  padding: 0.375rem 0.5rem;
  color: var(--color-default-400);
  font-size: 0.875rem;
}

/* ── Sticker / emoji picker (toolbar popover) ───────────────────────────── */
.kun-editor__picker {
  position: relative;
  display: inline-flex;
}

.kun-editor__picker-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 30;
  overflow: hidden;
  background: var(--kun-editor-surface);
  border: 1px solid var(--color-default-200);
  border-radius: 0.75rem;
  box-shadow:
    0 10px 30px -10px rgb(0 0 0 / 0.25),
    0 4px 10px -4px rgb(0 0 0 / 0.1);
}

/* A phone: the panel is a sheet across the bottom of the screen. */
@media (max-width: 640px) {
  .kun-editor__picker-panel {
    position: fixed;
    top: auto;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
  }
}

/* The shared panel (<KunStickerPanel>, also inside the KunUI toolbar's
 * popover): one scroll of sections over a bottom rail. Fixed cell sizes, so
 * lazily loading stickers never move anything. */
.kun-sticker-panel {
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: 100%;
  height: 380px;
}

@media (max-width: 640px) {
  .kun-sticker-panel {
    width: 100%;
  }
}

/* 表情 | 贴纸 (the default tabs; KunEditorToolbar draws KunTab instead). */
.kun-sticker-panel__tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-default-200);
}

.kun-sticker-panel__tab {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-default-500);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.kun-sticker-panel__tab[aria-selected='true'] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* The pack row: covers, sideways scroll with no visible scrollbar, and ‹ ›
 * laid OVER its ends (so showing / hiding them never shifts the row). */
.kun-sticker-panel__packs {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-default-200);
}

.kun-sticker-panel__pack-row {
  display: flex;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  overflow-x: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.kun-sticker-panel__pack {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-default-500);
  cursor: pointer;
}

.kun-sticker-panel__pack[aria-selected='true'] {
  background: var(--color-default-100);
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

.kun-sticker-panel__pack img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.kun-sticker-panel__page {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 1.75rem;
  padding: 0;
  border: none;
  color: var(--color-default-600);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.kun-sticker-panel__page[data-dir='prev'] {
  left: 0;
  background: linear-gradient(to right, var(--kun-editor-surface) 60%, transparent);
}

.kun-sticker-panel__page[data-dir='next'] {
  right: 0;
  background: linear-gradient(to left, var(--kun-editor-surface) 60%, transparent);
}

.kun-sticker-panel__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0.5rem 0.5rem;
}

.kun-sticker-panel__header {
  position: sticky;
  top: -0.25rem;
  z-index: 1;
  padding: 0.5rem 0.25rem 0.375rem;
  background: var(--kun-editor-surface);
  color: var(--color-default-500);
  font-size: 0.75rem;
  font-weight: 600;
}

.kun-sticker-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
  gap: 0.25rem;
}

.kun-sticker-panel__section[data-kind='emoji'] .kun-sticker-panel__grid {
  grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
  gap: 0.125rem;
}

.kun-sticker-panel__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  line-height: 1;
  cursor: pointer;
}

.kun-sticker-panel__section[data-kind='emoji'] .kun-sticker-panel__cell {
  height: 2.25rem;
  font-size: 1.375rem;
}

.kun-sticker-panel__cell img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

.kun-sticker-panel__cell:hover,
.kun-sticker-panel__pack:hover,
.kun-sticker-panel__tab:hover {
  background: var(--color-default-100);
}

.kun-sticker-panel__cell:focus-visible,
.kun-sticker-panel__pack:focus-visible,
.kun-sticker-panel__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.kun-sticker-panel__hint {
  padding: 1rem;
  color: var(--color-default-400);
  font-size: 0.875rem;
  text-align: center;
}

/* ── Entity references (cards / chips) ──────────────────────────────────── */
/* The node's own element carries these hooks; the host's component renders
 * inside it with nothing else in between (`.kun-entity__body` is
 * `display: contents`), so the box is exactly the component's — a preview that
 * resolves late, at the size it reserved, moves nothing.
 *
 * Scoped to the editor: a host's PUBLISHED post may well render its own
 * `.kun-entity-chip`, and a stylesheet imported app-wide must not restyle it. */
.kun-editor__wysiwyg .kun-entity__body,
.kun-entity__slot,
.kun-entity__host {
  display: contents;
}

.kun-editor__wysiwyg .kun-entity-card {
  position: relative;
  display: block;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
  cursor: default;
}

.kun-editor__wysiwyg .kun-entity-chip {
  display: inline;
  border-radius: 0.375rem;
  cursor: default;
}

/* Selected (clicked, tapped, arrowed onto): a focus ring. An outline takes no
 * space, so selecting never shifts the text either. */
.kun-editor__wysiwyg .kun-entity[data-selected] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* …and the ring is the ONLY mark. A node selection is a DOM range around the
 * node, so the browser paints its own blue highlight over the card's text and
 * the caret blinks beside it; prosemirror-view flags the editor with
 * `ProseMirror-hideselection` for exactly this, and its stylesheet (which
 * Milkdown doesn't ship — see the separator guard above) hides both. */
.kun-editor__wysiwyg .ProseMirror-hideselection *::selection {
  background: transparent;
}
.kun-editor__wysiwyg .ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}
.kun-editor__wysiwyg .ProseMirror-hideselection {
  caret-color: transparent;
}

/* The grip handle at a card's left edge: shown on hover and while selected
 * (on a phone: tap the card, then long-press the handle). */
.kun-entity__handle {
  position: absolute;
  top: 50%;
  /* Inside the editor's 0.75rem gutter, never over its border. */
  left: -0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.6875rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  color: var(--color-default-400);
  cursor: grab;
  opacity: 0;
  touch-action: none;
  transform: translateY(-50%);
  user-select: none;
}

.kun-entity-card:hover > .kun-entity__body > .kun-entity__handle,
.kun-entity-card[data-selected] > .kun-entity__body > .kun-entity__handle {
  opacity: 1;
}

/* A bigger, invisible hit area than the dots (a finger needs it). */
.kun-entity__handle::before {
  content: '';
  position: absolute;
  inset: -0.375rem -0.375rem;
}

.kun-entity__handle:hover {
  background: var(--color-default-100);
  color: var(--color-default-600);
}

.ProseMirror[contenteditable='false'] .kun-entity__handle {
  display: none;
}

/* While dragging: the card left behind dims, a ghost follows the pointer,
 * and a line marks where it will land. */
.kun-editor__wysiwyg .kun-entity-card[data-dragging] {
  opacity: 0.4;
}

.kun-entity-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  margin: 0;
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.3);
  opacity: 0.85;
  pointer-events: none;
  transform-origin: top left;
}

.kun-entity-ghost .kun-entity__handle {
  display: none;
}

.kun-entity-drop {
  position: fixed;
  top: 0;
  z-index: 1001;
  height: 2px;
  border-radius: 1px;
  /* The one cue a drag has: never let a missing token make it invisible. */
  background: var(--color-primary, #3b82f6);
  pointer-events: none;
}

.kun-entity-drop[data-noop='true'] {
  opacity: 0.35;
}

html.kun-entity-dragging,
html.kun-entity-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

/* The card's bubble stays out of the way while it is being dragged. */
html.kun-entity-dragging .kun-entity-menu {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .kun-entity__handle {
    transition: opacity 150ms ease-out;
  }
  .kun-entity-drop[data-placed='true'] {
    transition:
      transform 120ms ease-out,
      opacity 120ms ease-out;
  }
}

/* No host component for this display: a neutral stand-in showing the URL. */
.kun-editor__wysiwyg .kun-entity-card .kun-entity__fallback {
  display: block;
  overflow: hidden;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  color: var(--color-default-600);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kun-editor__wysiwyg .kun-entity-chip .kun-entity__fallback {
  padding: 0.0625rem 0.375rem;
  border-radius: 0.375rem;
  background: var(--color-default-100);
  color: var(--color-primary);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

/* Gap cursor — the caret between two cards, or before a card that opens the
 * document / a blockquote, where no line of text offers one. */
.kun-editor__wysiwyg .ProseMirror-gapcursor {
  display: none;
  position: absolute;
  pointer-events: none;
}

.kun-editor__wysiwyg .ProseMirror-gapcursor::after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid currentColor;
}

.kun-editor__wysiwyg .ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .kun-editor__wysiwyg .ProseMirror-gapcursor::after {
    animation: kun-editor-gapcursor-blink 1.1s steps(2, start) infinite;
  }
}

@keyframes kun-editor-gapcursor-blink {
  to {
    visibility: hidden;
  }
}

/* The paste popover / selected-entity bubble (卡片 / 行内 / 链接 / 删除).
 * Positioned by floating-ui (absolute left/top, kept inside the viewport);
 * visibility via data-show. */
.kun-entity-menu {
  position: absolute;
  z-index: 40;
  display: flex;
  gap: 0.125rem;
  padding: 0.25rem;
  background: var(--kun-editor-surface);
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}

.kun-entity-menu[data-show='false'] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  pointer-events: none;
}

/* Enter: fade, a 4px rise, .98 → 1 (~150ms); leave in ~100ms. Moving to
 * another entity while open, it glides (data-glide) instead of jumping. */
@media (prefers-reduced-motion: no-preference) {
  .kun-entity-menu {
    transform-origin: top left;
    transition:
      opacity 150ms ease-out,
      transform 150ms ease-out,
      visibility 0s;
  }
  .kun-entity-menu[data-show='false'] {
    transition:
      opacity 100ms ease-in,
      transform 100ms ease-in,
      visibility 0s linear 100ms;
  }
  .kun-entity-menu[data-glide='true'] {
    transition:
      opacity 150ms ease-out,
      transform 150ms ease-out,
      left 150ms ease-out,
      top 150ms ease-out;
  }
}

.kun-entity-menu__item {
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}

.kun-entity-menu__item:hover {
  background: var(--color-default-100);
}

.kun-entity-menu__item[aria-pressed='true'] {
  color: var(--color-primary);
  font-weight: 600;
}

.kun-entity-menu__item[data-active='true'] {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.kun-entity-menu__item[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.kun-entity-menu__item[aria-disabled='true']:hover {
  background: transparent;
}

.kun-entity-menu__item[data-choice='remove'] {
  color: var(--color-danger, #e5484d);
}

.kun-entity-menu__item[data-loading='true'] {
  opacity: 0.6;
  cursor: progress;
}

/* The `/` menu: a floating command card. Type rows (shared with the toolbar's
 * type menu) — icon, title, description, `/command` — then, for an inline
 * search, hit rows in the same style. */
.kun-entity-slash {
  position: absolute;
  z-index: 30;
  display: none;
  width: min(22rem, calc(100vw - 1rem));
  overflow: hidden;
  background: var(--kun-editor-surface);
  border: 1px solid var(--color-default-200);
  border-radius: 0.75rem;
  box-shadow:
    0 10px 30px -10px rgb(0 0 0 / 0.25),
    0 4px 10px -4px rgb(0 0 0 / 0.1);
}

.kun-entity-slash[data-show='true'] {
  display: block;
}

/* Lists take their natural height; only a viewport too short for them makes
 * them scroll (`--kun-float-max-height` is the room floating-ui found) — and
 * even then without a visible scrollbar. Wheel, touch and scrollIntoView
 * still work. The `/` card keeps its 360px cap. */
.kun-entity-types,
.kun-entity-slash__list {
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem;
  scrollbar-width: none;
}

.kun-entity-slash .kun-entity-types,
.kun-entity-slash__list {
  max-height: min(360px, var(--kun-float-max-height, 360px));
}

.kun-entity-types.kun-entity-type-picker {
  max-height: calc(100dvh - 8rem);
}

/* In the headless toolbar's panel, the room floating-ui found is the PANEL's;
 * the list gets it minus the panel's own padding and border. */
.kun-editor__entity-panel .kun-entity-types.kun-entity-type-picker {
  max-height: calc(var(--kun-float-max-height, 100dvh) - 1rem - 2px);
}

.kun-entity-types::-webkit-scrollbar,
.kun-entity-slash__list::-webkit-scrollbar,
.kun-sticker-panel__pack-row::-webkit-scrollbar {
  display: none;
}

.kun-entity-types__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.kun-entity-types__row[data-active='true'],
.kun-entity-slash__option[data-active='true'],
.kun-entity-picker__option[data-active='true'] {
  background: var(--color-default-100);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

.kun-entity-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-default-600);
  font-size: 20px;
}

.kun-entity-icon img,
.kun-entity-icon svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.kun-entity-icon__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 0.375rem;
  background: var(--color-default-100);
  font-size: 0.75rem;
  font-weight: 600;
}

.kun-entity-types__text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.kun-entity-types__title {
  overflow: hidden;
  color: var(--color-foreground);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kun-entity-types__desc {
  overflow: hidden;
  color: var(--color-default-500);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kun-entity-types__command {
  flex: none;
  color: var(--color-default-400);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

.kun-entity-types__hit {
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
}

.kun-entity-types__empty {
  padding: 0.75rem;
  color: var(--color-default-400);
  font-size: 0.875rem;
  text-align: center;
}

/* The toolbar's type menu takes focus itself (keyboard), so it shows it. */
.kun-entity-type-picker {
  border-radius: 0.5rem;
  outline: none;
}

.kun-entity-type-picker:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.kun-entity-slash__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-default-200);
  color: var(--color-default-500);
  font-size: 0.75rem;
}

.kun-entity-slash__type {
  color: var(--color-foreground);
  font-size: 0.875rem;
  font-weight: 600;
}

.kun-entity-slash__query {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kun-entity-slash__option,
.kun-entity-picker__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.kun-entity-slash__thumb,
.kun-entity-picker__thumb {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  object-fit: cover;
}

.kun-entity-slash__text,
.kun-entity-picker__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.kun-entity-slash__label,
.kun-entity-picker__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.kun-entity-slash__sub,
.kun-entity-picker__sub {
  overflow: hidden;
  color: var(--color-default-500);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kun-entity-slash__hint,
.kun-entity-picker__hint {
  padding: 0.75rem;
  color: var(--color-default-400);
  font-size: 0.875rem;
  text-align: center;
}

/* The toolbar's entity picker (headless toolbar: a panel under its button;
 * the KunUI toolbar puts the same <KunEntityPicker> in a KunPopover). */
.kun-editor__entity {
  position: relative;
  display: inline-flex;
}

.kun-editor__entity-panel {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 30;
  width: min(20rem, calc(100vw - 1rem));
  padding: 0.5rem;
  background: var(--kun-editor-surface);
  border: 1px solid var(--color-default-200);
  border-radius: 0.5rem;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.kun-entity-picker__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.kun-entity-picker__type {
  padding: 0.25rem 0.5rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.kun-entity-picker__type[data-active='true'] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.kun-entity-picker__input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-default-200);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}

.kun-entity-picker__input:focus {
  border-color: var(--color-primary);
}

.kun-entity-picker__list {
  max-height: 16rem;
  margin-top: 0.25rem;
  overflow-y: auto;
}