/* Styling for Blazor.Lexical. Lexical ships unstyled by design; the content
   theme classes below are those returned by LexicalTheme.Default, and the
   toolbar chrome styles the <LexicalToolbar> control set.

   The default look mirrors the Lexical playground (https://playground.lexical.dev):
   the editor renders as a single white, rounded card whose toolbar sits flush
   on top of the content, separated only by a hairline. The page framing the
   playground puts *around* that card — the gray backdrop, the system font, and
   the centered max-width column — is intentionally NOT baked in here; it is a
   host concern, so the demo apps supply it. Restyle via the CSS custom
   properties on .blazor-lexical, or supply your own LexicalTheme. */

/* Shared theming knobs. Scoped to both the editor and the toolbar because the
   toolbar renders as a sibling of the editor in the popover overlays, and to keep
   the variables reachable from either. Values track the playground reference. */
.blazor-lexical,
.blazor-lexical__toolbar {
  --blazor-lexical-accent: rgb(33, 111, 219);          /* links, focus, drop line */
  --blazor-lexical-surface: #fff;                       /* the card + toolbar + popovers */
  --blazor-lexical-border: #e0e0e0;                     /* input/select/popover hairlines */
  --blazor-lexical-divider: #eee;                       /* toolbar underline + group separators */
  --blazor-lexical-muted: #999;                         /* placeholder text */
  --blazor-lexical-subtle: rgb(101, 103, 107);          /* quote text, h2, block-select label */
  --blazor-lexical-heading: rgb(5, 5, 5);               /* h1 */
  --blazor-lexical-quote-border: rgb(206, 208, 212);
  --blazor-lexical-btn-hover: #eee;
  --blazor-lexical-btn-active: rgb(223, 232, 250);      /* active toolbar button */
  --blazor-lexical-code-bg: rgb(240, 242, 245);
  --blazor-lexical-radius: 10px;
  --blazor-lexical-content-font-size: 16px;
  --blazor-lexical-mark-bg: rgb(255, 212, 0);           /* marked (highlighted) spans */
  --blazor-lexical-mark-overlap-bg: rgb(255, 160, 0);   /* … where two marks overlap */
  --blazor-lexical-mark-active-outline: rgb(33, 111, 219);
  --blazor-lexical-highlight-bg: rgb(255, 235, 130);    /* <LexicalHighlights> default set */
  --blazor-lexical-suggestion-deletion: rgb(197, 48, 48);   /* struck-through original */
  --blazor-lexical-suggestion-insertion-bg: rgb(198, 246, 213); /* proposed insertion */
  --blazor-lexical-suggestion-insertion: rgb(34, 84, 61);
  --blazor-lexical-hr-color: rgb(206, 208, 212);        /* horizontal rule line */
  --blazor-lexical-toc-indent: 0.9rem;                  /* per-level outline indent */
  --blazor-lexical-toc-active: rgb(33, 111, 219);
}

/* The editor root is the card: a white, rounded surface. The toolbar (rendered
   as the first child) sits flush on top; the content surface fills the rest.
   The subtle shadow lifts the card off its backdrop even on a white page — on
   the gray playground-style backdrop the demos use, it reads as a clean sheet. */
.blazor-lexical {
  position: relative;
  background: var(--blazor-lexical-surface);
  border-radius: var(--blazor-lexical-radius);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  color: #000;
  line-height: 1.7;
}

.blazor-lexical__content {
  position: relative;
  min-height: 150px;
  /* Roomy playground gutters: small top, generous sides, deep bottom so there is
     always somewhere to click below the last block. */
  padding: 8px 46px 40px;
  border-radius: 0 0 var(--blazor-lexical-radius) var(--blazor-lexical-radius);
  outline: none;
  font-size: var(--blazor-lexical-content-font-size);
  overflow-wrap: anywhere;
}

/* The playground content editable carries no border and no focus ring — the
   card is the only frame — so typing feels like writing on a sheet of paper. */
.blazor-lexical__content[contenteditable="false"] {
  background: #f7f7f7;
  color: #555;
}

/* Placeholder: JS toggles data-lexical-empty on the content when it has no text;
   the text comes from the data-placeholder attribute. No .NET involved.
   It overlays the content box and inherits the content's own padding, so it
   aligns with where typed text starts. */
.blazor-lexical__content[data-lexical-empty]::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: var(--blazor-lexical-muted);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Content theme (class names returned by LexicalTheme.Default).       */
/* Adapted from the MIT-licensed Lexical playground reference theme.   */
/* Paragraphs carry no margin — line-height alone spaces the prose,    */
/* matching the playground.                                            */
/* ------------------------------------------------------------------ */

.blazor-lexical__paragraph {
  margin: 0;
  position: relative;
}

.blazor-lexical__h1 {
  font-size: 24px;
  color: var(--blazor-lexical-heading);
  font-weight: 400;
  margin: 0;
}

.blazor-lexical__h2 {
  font-size: 16px;
  color: var(--blazor-lexical-subtle);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.blazor-lexical__h3 {
  font-size: 12px;
  margin: 0;
  text-transform: uppercase;
}

/* The playground reference theme only styles h1–h3; h4–h6 continue the same
   small-uppercase idiom so the deeper levels stay visually consistent. */
.blazor-lexical__h4,
.blazor-lexical__h5,
.blazor-lexical__h6 {
  font-size: 12px;
  color: var(--blazor-lexical-subtle);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.blazor-lexical__quote {
  margin: 0 0 10px 20px;
  color: var(--blazor-lexical-subtle);
  border-left: 4px solid var(--blazor-lexical-quote-border);
  padding-left: 16px;
}

/* Lists indent via the list item's own margin (playground idiom) so the marker
   sits in the content gutter rather than a padded <ul>/<ol>. */
.blazor-lexical__ul,
.blazor-lexical__ol {
  padding: 0;
  margin: 0;
  list-style-position: outside;
}

.blazor-lexical__li {
  margin: 0 32px;
}

/* Nested lists should not add their own marker/outer margin. */
.blazor-lexical__nested-li {
  list-style-type: none;
}

.blazor-lexical__link {
  color: var(--blazor-lexical-accent);
  text-decoration: none;
  cursor: pointer;
}

.blazor-lexical__link:hover {
  text-decoration: underline;
}

/* Tables (class names returned by LexicalTheme.Default). Fixed layout with
   collapsed borders, matching the playground's editable-table look. */
.blazor-lexical__table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px 0;
  table-layout: fixed;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: break-word;
}

.blazor-lexical__table-cell {
  position: relative;
  min-width: 75px;
  padding: 6px 10px;
  border: 1px solid var(--blazor-lexical-border);
  vertical-align: top;
  text-align: start;
  outline: none;
}

.blazor-lexical__table-cell-header {
  background: var(--blazor-lexical-code-bg);
  font-weight: 700;
  text-align: start;
}

/* Cell drag-selection: the observer marks selected cells and the table itself. */
.blazor-lexical__table-cell-selected {
  background: var(--blazor-lexical-btn-active);
  caret-color: transparent;
}

.blazor-lexical__table-selected {
  outline: 2px solid var(--blazor-lexical-accent);
}

.blazor-lexical__text-bold {
  font-weight: 700;
}

.blazor-lexical__text-italic {
  font-style: italic;
}

.blazor-lexical__text-underline {
  text-decoration: underline;
}

.blazor-lexical__text-strikethrough {
  text-decoration: line-through;
}

.blazor-lexical__text-underline-strikethrough {
  text-decoration: underline line-through;
}

.blazor-lexical__text-code {
  background: var(--blazor-lexical-code-bg);
  padding: 1px 0.25rem;
  font-family: Menlo, Consolas, Monaco, monospace;
  font-size: 94%;
}

.blazor-lexical__text-subscript {
  font-size: 0.8em;
  vertical-align: sub;
}

.blazor-lexical__text-superscript {
  font-size: 0.8em;
  vertical-align: super;
}

.blazor-lexical__text-lowercase {
  text-transform: lowercase;
}

.blazor-lexical__text-uppercase {
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Toolbar chrome (<LexicalToolbar>).                                  */
/* Sits flush atop the content as the card's header: same white        */
/* surface, rounded top corners, a hairline divider below.             */
/* ------------------------------------------------------------------ */

.blazor-lexical__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  padding: 6px;
  background: var(--blazor-lexical-surface);
  border-bottom: 1px solid var(--blazor-lexical-divider);
  border-radius: var(--blazor-lexical-radius) var(--blazor-lexical-radius) 0 0;
}

.blazor-lexical__toolbar-group {
  display: flex;
  align-items: center;
  gap: 1px;
}

/* Thin separators between groups (the playground's toolbar divider). */
.blazor-lexical__toolbar-group:not(:last-child)::after {
  content: "";
  align-self: stretch;
  width: 1px;
  margin: 4px;
  background: var(--blazor-lexical-divider);
}

.blazor-lexical__toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 8px;
  border: none;
  border-radius: var(--blazor-lexical-radius);
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

/* Active/disabled state is set by JS (data-lexical-*), not Blazor, so it stays in
   sync with the caret without any interop. */
.blazor-lexical__toolbar-btn:hover:not([data-lexical-disabled]) {
  background: var(--blazor-lexical-btn-hover);
}

.blazor-lexical__toolbar-btn[data-lexical-active] {
  background: var(--blazor-lexical-btn-active);
}

.blazor-lexical__toolbar-btn[data-lexical-disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* The block-type <select> styled as a borderless toolbar item: muted 14px label
   like the playground's "Normal ▾" dropdown. */
.blazor-lexical__block-select {
  height: 34px;
  padding: 0 4px;
  border: none;
  border-radius: var(--blazor-lexical-radius);
  background: none;
  color: var(--blazor-lexical-subtle);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.blazor-lexical__block-select:hover {
  background: var(--blazor-lexical-btn-hover);
}

/* Glyph styling so the format buttons read as what they do. */
.blazor-lexical__glyph-bold {
  font-weight: 700;
}

.blazor-lexical__glyph-italic {
  font-style: italic;
}

.blazor-lexical__glyph-underline {
  text-decoration: underline;
}

.blazor-lexical__glyph-strikethrough {
  text-decoration: line-through;
}

.blazor-lexical__glyph-code {
  font-family: Menlo, Consolas, Monaco, monospace;
  font-size: 0.85em;
}

.blazor-lexical__link-input {
  height: 28px;
  padding: 0 0.4rem;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* In-editor overlays (floating toolbar, slash menu, drag handle).     */
/* Each is Blazor-authored markup positioned absolutely by JS relative */
/* to the editor root; JS toggles data-lexical-visible to show/hide.   */
/* ------------------------------------------------------------------ */

/* Shared hidden/visible state. visibility:hidden (not display:none) keeps the
   element measurable so JS can position it before it becomes visible. */
.blazor-lexical__floating-toolbar,
.blazor-lexical__slash-menu,
.blazor-lexical__mention-menu,
.blazor-lexical__link-editor,
.blazor-lexical__comment-composer,
.blazor-lexical__table-menu,
.blazor-lexical__drop-line {
  position: absolute;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.blazor-lexical__floating-toolbar[data-lexical-visible],
.blazor-lexical__slash-menu[data-lexical-visible],
.blazor-lexical__mention-menu[data-lexical-visible],
.blazor-lexical__link-editor[data-lexical-visible],
.blazor-lexical__comment-composer[data-lexical-visible],
.blazor-lexical__table-menu[data-lexical-visible] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Ghost completion (setup.primitives.ghost): the muted "rest of the word" hint painted
   after the caret by an extension. A JS-owned overlay parented to the root — outside the
   contenteditable — so it is never part of the document, state or history. It shares the
   overlay hidden/visible convention above, but stays pointer-events:none AND
   user-select:none even when visible, like the placeholder: it must never intercept a
   click or land in a copy, it only shows what typing would complete to. Hosts can restyle. */
.blazor-lexical__ghost {
  position: absolute;
  z-index: 20;
  visibility: hidden;
  color: var(--blazor-lexical-muted);
  pointer-events: none;
  user-select: none;
  white-space: pre;
}

.blazor-lexical__ghost[data-lexical-visible] {
  visibility: visible;
}

/* The floating toolbar reuses the toolbar chrome but as a compact popover.
   Its left never crosses into the gutter (JS clamps it to the first text
   column); the higher z-index just keeps it above the other overlays. */
.blazor-lexical__floating-toolbar {
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 8px;
  background: var(--blazor-lexical-surface);
  box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}

/* Reset the group separator/underline so nested groups sit flush in the popover. */
.blazor-lexical__floating-toolbar .blazor-lexical__toolbar-group:not(:last-child)::after {
  display: none;
}

/* Slash command menu: a vertical list of options floated at the caret. */
.blazor-lexical__slash-menu {
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 8px;
  background: var(--blazor-lexical-surface);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

.blazor-lexical__slash-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.blazor-lexical__slash-item:hover,
.blazor-lexical__slash-item[data-lexical-slash-active] {
  background: var(--blazor-lexical-btn-hover);
}

/* Mention nodes. Each config's colour rides inline as --blazor-lexical-mention-color;
   these classes carry the shared shape. Inserted references get a tinted background;
   freeform highlights (hashtag-style) just recolour the text. */
.blazor-lexical__mention {
  --_mention-color: var(--blazor-lexical-mention-color, var(--blazor-lexical-accent));
  color: var(--_mention-color);
  background-color: color-mix(in srgb, var(--_mention-color) 15%, transparent);
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 500;
}

.blazor-lexical__mention[data-lexical-mention-url] {
  text-decoration: underline;
  cursor: pointer;
}

.blazor-lexical__mention-highlight {
  color: var(--blazor-lexical-mention-color, var(--blazor-lexical-accent));
  font-weight: 500;
}

/* Mark nodes (<LexicalMarks>). A mark carries an ARRAY of app-owned ids, so a span
   inside two marks gets --overlap alongside the base class — the overlap has to read
   as deliberate rather than as one slightly-different highlight. [data-lexical-mark-active]
   is JS-set decoration (SetActiveMarkAsync), never document state. */
.blazor-lexical__mark {
  background-color: var(--blazor-lexical-mark-bg);
  border-bottom: 2px solid transparent;
  color: inherit;
  cursor: pointer;
}

.blazor-lexical__mark--overlap {
  background-color: var(--blazor-lexical-mark-overlap-bg);
}

.blazor-lexical__mark[data-lexical-mark-active] {
  border-bottom-color: var(--blazor-lexical-mark-active-outline);
}

/* Highlights (<LexicalHighlights>). Painted with the CSS Custom Highlight API, so there
   is no element and no class to target — the selector is the registered highlight name,
   which is `blazor-lexical-` + the app's highlight id. Only the default id is styled
   here; an app using several sets (AI suggestions vs. reviewer, spelling vs. structure)
   declares one rule per id of its own. ::highlight() only honours a handful of
   properties — background-color, color, text-decoration — by design. */
::highlight(blazor-lexical-default) {
  background-color: var(--blazor-lexical-highlight-bg);
}

/* Suggested edits (<LexicalSuggestions>). Display-only inline diff: the original text is
   struck through (the deletion) and the proposed replacement follows it, highlighted (the
   insertion). Both carry data-suggestion-id and are clickable, so the app can open its own
   accept/reject chrome. */
.blazor-lexical__suggestion-deletion {
  color: var(--blazor-lexical-suggestion-deletion);
  text-decoration: line-through;
  cursor: pointer;
}

.blazor-lexical__suggestion-insertion {
  background-color: var(--blazor-lexical-suggestion-insertion-bg);
  color: var(--blazor-lexical-suggestion-insertion);
  cursor: pointer;
}

/* Horizontal rule: a thematic break. Clicking one selects it (so Delete removes it),
   which needs a visible treatment of its own — an <hr> has no text to highlight. */
.blazor-lexical__hr {
  background-color: var(--blazor-lexical-hr-color);
  border: none;
  height: 1px;
  margin: 1.5em 0;
  padding: 0;
}

.blazor-lexical__hr--selected {
  outline: 2px solid var(--blazor-lexical-accent);
  outline-offset: 3px;
}

/* Mention picker: a floating list of provider candidates, built by JS at the caret. */
.blazor-lexical__mention-menu {
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 8px;
  background: var(--blazor-lexical-surface);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

.blazor-lexical__mention-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.blazor-lexical__mention-item:hover,
.blazor-lexical__mention-item[data-lexical-mention-active] {
  background: var(--blazor-lexical-btn-hover);
}

.blazor-lexical__mention-item-secondary {
  font-size: 12px;
  opacity: 0.7;
}

/* Loading state: JS sets data-lexical-mention-loading while a provider query is in
   flight, so a slow data source shows the picker working instead of nothing. The
   affordance is a spinner rather than a message — no text to localize. Hosts can
   restyle it via the same attribute. */
.blazor-lexical__mention-menu[data-lexical-mention-loading] {
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}

.blazor-lexical__mention-menu[data-lexical-mention-loading]::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--blazor-lexical-border);
  border-top-color: var(--blazor-lexical-accent);
  border-radius: 50%;
  animation: blazor-lexical-spin 0.7s linear infinite;
}

@keyframes blazor-lexical-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect a reduced-motion preference: keep the indicator, drop the spin. */
@media (prefers-reduced-motion: reduce) {
  .blazor-lexical__mention-menu[data-lexical-mention-loading]::after {
    animation: none;
  }
}

/* Block-gutter items: the drag grip, the "+" button, and any <LexicalGutterButton>.
   One shape for all of them, so a host button sits flush with the built-ins — the same
   deal the toolbar primitives get. */
.blazor-lexical__gutter-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--blazor-lexical-muted);
  font: inherit;
  line-height: 1;
}

.blazor-lexical__gutter-btn {
  cursor: pointer;
}

.blazor-lexical__drag-grip {
  cursor: grab;
}

.blazor-lexical__gutter-item:hover {
  background: var(--blazor-lexical-btn-hover);
  color: inherit;
}

/* Horizontal indicator showing where a dragged block will drop. --lexical-drop-color lets
   a consumer theme the preview per target (set it on any drop-target container); it falls
   back to the editor accent. */
.blazor-lexical__drop-line {
  height: 2px;
  background: var(--lexical-drop-color, var(--blazor-lexical-accent));
  border-radius: 1px;
}

.blazor-lexical__drop-line[data-lexical-visible] {
  visibility: visible;
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Floating link editor popup (playground-style).                      */
/* JS swaps between the preview (.__link-view) and edit (.__link-edit)  */
/* rows by toggling [hidden]; the box itself shows via the shared       */
/* overlay [data-lexical-visible] rule above.                          */
/* ------------------------------------------------------------------ */

.blazor-lexical__link-editor {
  z-index: 40;
  min-width: 16rem;
  max-width: 24rem;
  padding: 4px 6px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 8px;
  background: var(--blazor-lexical-surface);
  box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}

.blazor-lexical__link-view:not([hidden]),
.blazor-lexical__link-edit:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* The URL input and the preview link each take the free space in their row. */
.blazor-lexical__link-editor .blazor-lexical__link-input {
  flex: 1 1 auto;
  min-width: 0;
}

.blazor-lexical__link-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--blazor-lexical-accent);
  text-decoration: none;
}

.blazor-lexical__link-preview:hover {
  text-decoration: underline;
}

/* Compact icon buttons for edit/remove/confirm/cancel (and the link glyph). */
.blazor-lexical__link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.blazor-lexical__link-btn:hover:not([data-lexical-disabled]) {
  background: var(--blazor-lexical-btn-hover);
}

/* ------------------------------------------------------------------ */
/* Comment composer (<LexicalCommentComposer>).                        */
/* A floating textarea + actions, shown via the shared overlay         */
/* [data-lexical-visible] rule above; JS floats it at the captured     */
/* selection. The commented span stays visible while the textarea has  */
/* focus via the CSS Custom Highlight API — no element, so the selector */
/* is the registered highlight name (like <LexicalHighlights>).        */
/* ------------------------------------------------------------------ */

.blazor-lexical__comment-composer {
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 18rem;
  max-width: 100%;
  padding: 8px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 8px;
  background: var(--blazor-lexical-surface);
  box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}

.blazor-lexical__comment-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 6px;
  background: var(--blazor-lexical-surface);
  color: inherit;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.blazor-lexical__comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.blazor-lexical__comment-btn {
  padding: 4px 10px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.blazor-lexical__comment-btn:hover {
  background: var(--blazor-lexical-btn-hover);
}

.blazor-lexical__comment-btn--primary {
  border-color: var(--blazor-lexical-accent);
  background: var(--blazor-lexical-accent);
  color: #fff;
}

.blazor-lexical__comment-btn--primary:hover {
  filter: brightness(1.05);
}

/* The "add comment" button, styled like a toolbar/floating-toolbar button. JS toggles
   [data-lexical-disabled] so it is live only over a non-collapsed selection. */
.blazor-lexical__comment-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.blazor-lexical__comment-add:hover:not([data-lexical-disabled]) {
  background: var(--blazor-lexical-btn-hover);
}

.blazor-lexical__comment-add[data-lexical-disabled] {
  opacity: 0.4;
  cursor: default;
}

/* The transient compose-highlight painted over the target while composing. */
::highlight(blazor-lexical-comment-compose) {
  background-color: var(--blazor-lexical-highlight-bg);
}

/* ------------------------------------------------------------------ */
/* Insert-table grid picker (<LexicalTableButton>).                    */
/* A toolbar trigger with a CSS-anchored grid popover; JS tracks the   */
/* hovered R×C span (data-lexical-active) and inserts on click.        */
/* ------------------------------------------------------------------ */

.blazor-lexical__table-picker {
  position: relative;
  display: inline-flex;
}

.blazor-lexical__glyph-table {
  font-size: 0.95em;
}

.blazor-lexical__table-picker-caret {
  margin-left: 2px;
  font-size: 0.7em;
}

.blazor-lexical__table-picker-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 8px;
  background: var(--blazor-lexical-surface);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

.blazor-lexical__table-picker-popover[hidden] {
  display: none;
}

.blazor-lexical__table-grid {
  display: grid;
  grid-template-columns: repeat(var(--blazor-lexical-table-grid-cols, 10), 16px);
  gap: 2px;
}

.blazor-lexical__table-grid-cell {
  width: 16px;
  height: 16px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 2px;
  cursor: pointer;
}

.blazor-lexical__table-grid-cell[data-lexical-active] {
  background: var(--blazor-lexical-btn-active);
  border-color: var(--blazor-lexical-accent);
}

.blazor-lexical__table-picker-label {
  margin-top: 6px;
  color: var(--blazor-lexical-subtle);
  font-size: 12px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* In-cell table action menu (<LexicalTableEditor>).                   */
/* JS floats the container at the caret cell's top-right (shared        */
/* overlay visibility rule above); the dropdown anchors below the       */
/* trigger and toggles via [hidden].                                    */
/* ------------------------------------------------------------------ */

.blazor-lexical__table-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 4px;
  background: var(--blazor-lexical-surface);
  color: var(--blazor-lexical-subtle);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
}

.blazor-lexical__table-menu-trigger:hover {
  background: var(--blazor-lexical-btn-hover);
}

.blazor-lexical__table-menu-dropdown {
  position: absolute;
  top: 22px;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 4px;
  border: 1px solid var(--blazor-lexical-border);
  border-radius: 8px;
  background: var(--blazor-lexical-surface);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

.blazor-lexical__table-menu-dropdown[hidden] {
  display: none;
}

.blazor-lexical__table-menu-dropdown button {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.blazor-lexical__table-menu-dropdown button:hover {
  background: var(--blazor-lexical-btn-hover);
}

.blazor-lexical__table-menu-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--blazor-lexical-divider);
}

/* ------------------------------------------------------------------ */
/* Table of contents (<LexicalToc> / <LexicalTocList>).                */
/* One stylesheet for both paths: the JS renderer and the C# component  */
/* emit the same nested <ol>/<a data-lexical-toc-item> markup.          */
/* The outline usually lives OUTSIDE the editor root, so it declares    */
/* its own variables rather than inheriting the editor's.               */
/* ------------------------------------------------------------------ */

.blazor-lexical__toc {
  --blazor-lexical-toc-indent: 0.9rem;
  --blazor-lexical-toc-active: rgb(33, 111, 219);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nested levels indent; the level attribute is there for hosts that want to key off
   the absolute depth (a jumped level, h1 → h3) rather than the nesting. */
.blazor-lexical__toc .blazor-lexical__toc {
  padding-left: var(--blazor-lexical-toc-indent);
}

.blazor-lexical__toc a {
  display: block;
  padding: 2px 0;
  color: inherit;
  font-size: 14px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blazor-lexical__toc a:hover {
  text-decoration: underline;
}

/* Scrollspy: JS marks the heading currently at the top of the scroll container. */
.blazor-lexical__toc a[data-lexical-toc-active] {
  color: var(--blazor-lexical-toc-active);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Block gutter (<LexicalBlockGutter>).                                */
/* Host-authored content floated beside the hovered block by JS, on     */
/* the side named by data-lexical-block-gutter-side.                    */
/* ------------------------------------------------------------------ */

.blazor-lexical__block-gutter {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-height: 1.5rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.blazor-lexical__block-gutter[data-lexical-visible] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* No side-specific offsets: JS measures each rail and computes its exact left, which
   is what lets several rails on one side stack instead of overlapping. */