/*
 * Lexxy editor and content dark mode styles.
 * The Lexxy gem provides base editor styles via the "lexxy" stylesheet.
 * These styles add dark mode support and custom content display styles.
 */

/* ==========================================================================
   Lexxy Editor Dark Mode - CSS Variables
   ========================================================================== */

/* Light mode (default) */
:root {
  --lexxy-bg: #ffffff;
  --lexxy-text: #1f2937;
  --lexxy-border: #e5e7eb;
  --lexxy-toolbar-bg: transparent;
  --lexxy-toolbar-border: transparent;
  --lexxy-button-hover: rgba(0, 0, 0, 0.05);
  --lexxy-button-active: #e5e7eb;
  --lexxy-placeholder: #9ca3af;
  --lexxy-link: #14b8a6;
  --lexxy-code-bg: #f5f5f5;
  --lexxy-blockquote-border: #d1d5db;
  --lexxy-prompt-bg: #ffffff;
  --lexxy-prompt-border: #e5e7eb;
  --lexxy-prompt-hover: #f3f4f6;
  --lexxy-prompt-selected: #e0f2fe;
}

/* Dark mode via class (Tailwind approach) */
.dark {
  --lexxy-bg: #27272a;
  --lexxy-text: #d4d4d8;
  --lexxy-border: #3f3f46;
  --lexxy-toolbar-bg: transparent;
  --lexxy-toolbar-border: transparent;
  --lexxy-button-hover: rgba(255, 255, 255, 0.08);
  --lexxy-button-active: #52525b;
  --lexxy-placeholder: #71717a;
  --lexxy-link: #2dd4bf;
  --lexxy-code-bg: #3f3f46;
  --lexxy-blockquote-border: #52525b;
  --lexxy-prompt-bg: #27272a;
  --lexxy-prompt-border: #3f3f46;
  --lexxy-prompt-hover: #3f3f46;
  --lexxy-prompt-selected: #164e63;
  /* Lexxy gem native variables */
  --lexxy-color-canvas: transparent;
  --lexxy-color-ink-inverted: #27272a;
  --lexxy-color-ink-lightest: #3f3f46;
  --lexxy-color-selected: #52525b;
  --lexxy-color-selected-hover: #3f3f46;
}

/* Dark mode via media query (system preference) */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --lexxy-bg: #27272a;
    --lexxy-text: #d4d4d8;
    --lexxy-border: #3f3f46;
    --lexxy-toolbar-bg: transparent;
    --lexxy-toolbar-border: transparent;
    --lexxy-button-hover: rgba(255, 255, 255, 0.08);
    --lexxy-button-active: #52525b;
    --lexxy-placeholder: #71717a;
    --lexxy-link: #2dd4bf;
    --lexxy-code-bg: #3f3f46;
    --lexxy-blockquote-border: #52525b;
    --lexxy-prompt-bg: #27272a;
    --lexxy-prompt-border: #3f3f46;
    --lexxy-prompt-hover: #3f3f46;
    --lexxy-prompt-selected: #164e63;
    /* Lexxy gem native variables */
    --lexxy-color-canvas: transparent;
    --lexxy-color-ink-inverted: #27272a;
    --lexxy-color-ink-lightest: #3f3f46;
    --lexxy-color-selected: #52525b;
    --lexxy-color-selected-hover: #3f3f46;
  }
}

/* ==========================================================================
   Lexxy Editor Styles
   ========================================================================== */

lexxy-editor {
  background-color: transparent !important;
  color: var(--lexxy-text);
  border-color: var(--lexxy-border);
}

lexxy-editor [data-lexxy-editor],
lexxy-editor .lexxy-editor,
lexxy-editor .ProseMirror,
lexxy-editor [contenteditable],
lexxy-editor .lexxy-content-wrapper,
lexxy-editor > div {
  background-color: transparent !important;
  color: var(--lexxy-text);
  caret-color: var(--lexxy-text);
}

/* Ensure no inner elements have light backgrounds */
lexxy-editor * {
  background-color: inherit;
}

/* Fix toolbar spacer background */
.lexxy-editor__toolbar-spacer,
lexxy-editor .lexxy-editor__toolbar-spacer {
  background-color: transparent !important;
}

lexxy-editor [data-lexxy-placeholder]::before,
lexxy-editor .lexxy-placeholder::before,
lexxy-editor [data-placeholder]::before {
  color: var(--lexxy-placeholder) !important;
}

/* Toolbar - multiple selector patterns for compatibility */
lexxy-editor [data-lexxy-toolbar],
lexxy-editor .lexxy-toolbar,
lexxy-toolbar,
.lexxy-toolbar {
  background-color: transparent !important;
  border: none !important;
}

/* Scratchpad editor: keep formatting controls visible while long notes scroll. */
.scratchpad-rich-text {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.scratchpad-rich-text lexxy-toolbar {
  background-color: var(--lexxy-bg) !important;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 20;
}

.scratchpad-rich-text .lexxy-editor__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.scratchpad-save-indicator {
  align-self: center;
  background-color: #10b981;
  border-radius: 9999px;
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}

.scratchpad-save-indicator[data-state="unsaved"] {
  background-color: #f59e0b;
}

/* Direct message composer: keep the chat editor compact and action-only. */
.chat-message-form--compact [data-lexxy-toolbar],
.chat-message-form--compact .lexxy-toolbar,
.chat-message-form--compact lexxy-toolbar,
.chat-message-form--compact .lexxy-editor__toolbar-spacer,
.chat-message-form--compact trix-toolbar {
  display: none !important;
}

/* Discussion thread composer: Twist-like single-line reply bar. */
.discussion-reply-composer [data-lexxy-toolbar],
.discussion-reply-composer .lexxy-toolbar,
.discussion-reply-composer lexxy-toolbar,
.discussion-reply-composer .lexxy-editor__toolbar-spacer,
.discussion-reply-composer trix-toolbar {
  display: none !important;
}

.discussion-reply-composer lexxy-editor,
.discussion-reply-composer lexxy-editor [data-lexxy-editor],
.discussion-reply-composer lexxy-editor .lexxy-editor,
.discussion-reply-composer lexxy-editor .ProseMirror,
.discussion-reply-composer lexxy-editor [contenteditable],
.discussion-reply-composer lexxy-editor .lexxy-content-wrapper,
.discussion-reply-composer trix-editor {
  border: 0 !important;
  box-shadow: none !important;
  min-height: 2rem !important;
  padding: 0 !important;
}

.discussion-reply-composer lexxy-editor,
.discussion-reply-composer trix-editor {
  display: block;
  width: 100%;
}

.discussion-reply-composer .lexxy-content p,
.discussion-reply-composer trix-editor p {
  margin: 0;
}

.native-comment-composer lexxy-editor,
.native-comment-composer lexxy-editor [data-lexxy-editor],
.native-comment-composer lexxy-editor .lexxy-editor,
.native-comment-composer lexxy-editor .ProseMirror,
.native-comment-composer lexxy-editor [contenteditable],
.native-comment-composer lexxy-editor .lexxy-content-wrapper,
.native-comment-composer lexxy-editor > div {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.native-comment-composer .feed-comment-form lexxy-editor {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.native-comment-composer .feed-comment-form lexxy-editor [data-lexxy-editor],
.native-comment-composer .feed-comment-form lexxy-editor .lexxy-editor,
.native-comment-composer .feed-comment-form lexxy-editor .ProseMirror,
.native-comment-composer .feed-comment-form lexxy-editor [contenteditable],
.native-comment-composer .feed-comment-form lexxy-editor .lexxy-content-wrapper {
  flex: 1 1 auto;
  min-height: 0 !important;
  width: 100%;
}

/* Document/workspace edit pages provide their own surface, so the editor
   itself should be chrome-free. */
.document-editor-content lexxy-editor,
.document-editor-content lexxy-editor [data-lexxy-editor],
.document-editor-content lexxy-editor .lexxy-editor,
.document-editor-content lexxy-editor .ProseMirror,
.document-editor-content lexxy-editor [contenteditable],
.document-editor-content lexxy-editor .lexxy-content-wrapper,
.document-editor-content lexxy-editor > div,
.workspace-editor-content lexxy-editor,
.workspace-editor-content lexxy-editor [data-lexxy-editor],
.workspace-editor-content lexxy-editor .lexxy-editor,
.workspace-editor-content lexxy-editor .ProseMirror,
.workspace-editor-content lexxy-editor [contenteditable],
.workspace-editor-content lexxy-editor .lexxy-content-wrapper,
.workspace-editor-content lexxy-editor > div {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Inline editor: hide the toolbar until the editor is focused */
.inline-description [data-lexxy-toolbar],
.inline-description .lexxy-toolbar,
.inline-description lexxy-toolbar {
  display: none !important;
}

.inline-description:focus-within [data-lexxy-toolbar],
.inline-description:focus-within .lexxy-toolbar,
.inline-description:focus-within lexxy-toolbar {
  display: flex !important;
}

/* Inline editor: drop the editor border/radius and let it size to content */
.inline-description lexxy-editor {
  border: 0 !important;
  border-radius: 0 !important;
}

.inline-description lexxy-editor [data-lexxy-editor],
.inline-description lexxy-editor .lexxy-editor,
.inline-description lexxy-editor .ProseMirror,
.inline-description lexxy-editor [contenteditable],
.inline-description lexxy-editor .lexxy-content-wrapper {
  min-height: 0 !important;
  border-radius: 0 !important;
}

/* Inline note row: chromeless editor that always hides the toolbar
   and sizes to its content (no min-height). */
.inline-note [data-lexxy-toolbar],
.inline-note .lexxy-toolbar,
.inline-note lexxy-toolbar,
.inline-note .lexxy-editor__toolbar-spacer {
  display: none !important;
}

.inline-note lexxy-editor {
  border: 0 !important;
  padding: 0 !important;
}

.inline-note lexxy-editor [data-lexxy-editor],
.inline-note lexxy-editor .lexxy-editor,
.inline-note lexxy-editor .ProseMirror,
.inline-note lexxy-editor [contenteditable],
.inline-note lexxy-editor .lexxy-content-wrapper,
.inline-note lexxy-editor > div {
  min-height: 0 !important;
  padding: 0 !important;
}

/* Toolbar buttons */
lexxy-editor [data-lexxy-toolbar] button,
lexxy-editor .lexxy-toolbar button,
lexxy-toolbar button,
.lexxy-toolbar button,
lexxy-editor button[data-lexxy-action],
lexxy-editor .lexxy-button {
  color: var(--lexxy-text) !important;
  background-color: transparent !important;
}

lexxy-editor [data-lexxy-toolbar] button:hover,
lexxy-editor .lexxy-toolbar button:hover,
lexxy-toolbar button:hover,
.lexxy-toolbar button:hover,
lexxy-editor button[data-lexxy-action]:hover,
lexxy-editor .lexxy-button:hover {
  background-color: var(--lexxy-button-hover) !important;
}

lexxy-editor [data-lexxy-toolbar] button[data-active="true"],
lexxy-editor [data-lexxy-toolbar] button.active,
lexxy-editor [data-lexxy-toolbar] button[aria-pressed="true"],
lexxy-editor .lexxy-toolbar button[data-active="true"],
lexxy-editor .lexxy-toolbar button.active,
lexxy-toolbar button[data-active="true"],
lexxy-toolbar button.active,
lexxy-toolbar button[aria-pressed="true"],
.lexxy-toolbar button[data-active="true"],
.lexxy-toolbar button.active {
  background-color: var(--lexxy-button-active) !important;
}

/* Toolbar button SVG icons */
lexxy-editor [data-lexxy-toolbar] button svg,
lexxy-editor .lexxy-toolbar button svg,
lexxy-toolbar button svg,
.lexxy-toolbar button svg {
  color: var(--lexxy-text);
}


/* Toolbar dividers/separators */
lexxy-editor [data-lexxy-toolbar] [role="separator"],
lexxy-editor .lexxy-toolbar-divider,
lexxy-toolbar [role="separator"],
.lexxy-toolbar [role="separator"] {
  background-color: var(--lexxy-toolbar-border);
}

/* Toolbar dropdowns */
lexxy-editor [data-lexxy-toolbar] [role="listbox"],
lexxy-editor [data-lexxy-toolbar] [role="menu"],
lexxy-editor .lexxy-dropdown {
  background-color: var(--lexxy-prompt-bg) !important;
  border-color: var(--lexxy-prompt-border) !important;
  color: var(--lexxy-text) !important;
}

lexxy-editor [data-lexxy-toolbar] [role="option"],
lexxy-editor [data-lexxy-toolbar] [role="menuitem"] {
  color: var(--lexxy-text) !important;
}

lexxy-editor [data-lexxy-toolbar] [role="option"]:hover,
lexxy-editor [data-lexxy-toolbar] [role="menuitem"]:hover {
  background-color: var(--lexxy-button-hover) !important;
}

/* Code blocks in editor */
lexxy-editor pre,
lexxy-editor code {
  background-color: var(--lexxy-code-bg) !important;
  color: var(--lexxy-text) !important;
}

/* Blockquotes in editor */
lexxy-editor blockquote {
  border-left-color: var(--lexxy-blockquote-border) !important;
  color: var(--lexxy-placeholder);
}

/* Headings in editor */
lexxy-editor h1,
lexxy-editor h2,
lexxy-editor h3,
lexxy-editor h4 {
  font-weight: bold;
  line-height: 1.25;
  margin: 0.85em 0 0;
}

lexxy-editor h1:first-child,
lexxy-editor h2:first-child,
lexxy-editor h3:first-child,
lexxy-editor h4:first-child {
  margin-top: 0;
}

lexxy-editor h1 {
  font-size: 1.65em;
}

lexxy-editor h2 {
  font-size: 1.4em;
}

lexxy-editor h3 {
  font-size: 1.22em;
}

lexxy-editor h4 {
  font-size: 1.08em;
}

lexxy-editor strong,
lexxy-editor .lexxy-content__bold {
  font-weight: bold;
}

lexxy-editor p {
  margin: 0.25em 0 0;
}

lexxy-editor li > p,
lexxy-editor blockquote > p {
  margin: 0.5em 0 0;
}

/* Lists in editor */
lexxy-editor ul,
lexxy-editor ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

lexxy-editor ul {
  list-style-type: disc;
}

lexxy-editor ol {
  list-style-type: decimal;
}

lexxy-editor li {
  margin: 0.25em 0;
}

/* Nested list wrapper - hide bullet on wrapper li */
lexxy-editor .lexxy-nested-listitem,
.lexxy-content .lexxy-nested-listitem {
  list-style-type: none;
}

/* Nested lists in editor */
lexxy-editor ul ul,
lexxy-editor ol ul {
  list-style-type: circle;
  margin: 0.25em 0;
}

lexxy-editor ul ul ul,
lexxy-editor ol ul ul,
lexxy-editor ul ol ul,
lexxy-editor ol ol ul {
  list-style-type: square;
}

lexxy-editor ol ol,
lexxy-editor ul ol {
  list-style-type: lower-alpha;
  margin: 0.25em 0;
}

lexxy-editor ol ol ol,
lexxy-editor ul ol ol,
lexxy-editor ol ul ol,
lexxy-editor ul ul ol {
  list-style-type: lower-roman;
}

/* Links in editor */
lexxy-editor a {
  color: var(--lexxy-link);
}

/* Link dialog/popup */
lexxy-editor [data-lexxy-link-popup],
lexxy-editor .lexxy-link-popup,
lexxy-editor [role="dialog"] {
  background-color: var(--lexxy-prompt-bg) !important;
  border-color: var(--lexxy-prompt-border) !important;
  color: var(--lexxy-text) !important;
}

lexxy-editor [data-lexxy-link-popup] input,
lexxy-editor .lexxy-link-popup input {
  background-color: var(--lexxy-bg) !important;
  border-color: var(--lexxy-border) !important;
  color: var(--lexxy-text) !important;
}

/* ==========================================================================
   Lexxy Prompt (Mentions) Dark Mode
   ========================================================================== */

lexxy-prompt {
  --lexxy-prompt-background: var(--lexxy-prompt-bg);
  --lexxy-prompt-border-color: var(--lexxy-prompt-border);
  --lexxy-prompt-text: var(--lexxy-text);
}

/* Lexxy appends the @mention menu inside the editor and uses low-specificity
   :where() selectors, so keep these overrides explicit and opaque. */
.lexxy-prompt-menu,
[data-lexxy-prompt-menu] {
  --lexxy-color-canvas: var(--lexxy-prompt-bg);
  --lexxy-color-ink: var(--lexxy-text);
  --lexxy-color-ink-lightest: var(--lexxy-prompt-hover);
  --lexxy-color-selected: var(--lexxy-prompt-selected);
  --lexxy-color-selected-hover: var(--lexxy-prompt-selected);
  --lexxy-prompt-avatar-size: 1.5rem;
  --lexxy-prompt-padding: 0.25rem;

  background-color: var(--lexxy-prompt-bg) !important;
  border: 1px solid var(--lexxy-prompt-border);
  box-sizing: border-box;
  color: var(--lexxy-text) !important;
  max-block-size: min(20rem, calc(100vh - 2rem));
  max-inline-size: min(24rem, calc(100vw - 2rem));
  min-inline-size: min(18rem, calc(100vw - 2rem));
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 1000;
}

.lexxy-prompt-menu.lexxy-prompt-menu--portaled {
  inset: auto !important;
  left: var(--mb-lexxy-prompt-left, 0px) !important;
  max-inline-size: min(24rem, calc(100vw - 1rem));
  position: fixed !important;
  right: auto !important;
  top: var(--mb-lexxy-prompt-top, 0px) !important;
  z-index: 9999;
}

.lexxy-prompt-menu__item,
[data-lexxy-prompt-menu] [data-lexxy-prompt-item] {
  line-height: 1.25;
  min-width: 0;
}

.lexxy-prompt-menu__item > *,
[data-lexxy-prompt-menu] [data-lexxy-prompt-item] > * {
  min-width: 0;
}

.lexxy-prompt-menu__item:hover,
.lexxy-prompt-menu__item[aria-selected],
.lexxy-prompt-menu__item:focus-visible,
[data-lexxy-prompt-menu] [data-lexxy-prompt-item]:hover,
[data-lexxy-prompt-menu] [data-lexxy-prompt-item][data-selected="true"] {
  background-color: var(--lexxy-prompt-hover) !important;
  outline: none;
}

.lexxy-prompt-menu__item[aria-selected],
.lexxy-prompt-menu__item:focus-visible {
  box-shadow: inset 0 0 0 1px var(--lexxy-link);
}

lexxy-prompt-item {
  color: var(--lexxy-text);
}

.mention-picker-avatar {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
  flex: 0 0 auto;
}

/* ==========================================================================
   Lexxy Content Display Styles
   ========================================================================== */

.lexxy-content {
  line-height: 1.5;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  color: var(--lexxy-text);
}

.lexxy-content * {
  box-sizing: border-box;
}

.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3,
.lexxy-content h4 {
  font-weight: bold;
  line-height: 1.25;
  margin: 0.85em 0 0;
}

.lexxy-content h1:first-child,
.lexxy-content h2:first-child,
.lexxy-content h3:first-child,
.lexxy-content h4:first-child {
  margin-top: 0;
}

.lexxy-content h1 {
  font-size: 1.65em;
}

.lexxy-content h2 {
  font-size: 1.4em;
}

.lexxy-content h3 {
  font-size: 1.22em;
}

.lexxy-content h4 {
  font-size: 1.08em;
}

.lexxy-content strong,
.lexxy-content .lexxy-content__bold {
  font-weight: bold;
}

.lexxy-content p {
  margin: 0.25em 0 0;
}

.lexxy-content li > p,
.lexxy-content blockquote > p {
  margin: 0.5em 0 0;
}

.lexxy-content blockquote {
  border-left: 3px solid var(--lexxy-blockquote-border);
  margin-left: 0.3em;
  padding-left: 0.6em;
  color: var(--lexxy-placeholder);
}

.lexxy-content ul,
.lexxy-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.lexxy-content ul {
  list-style-type: disc;
}

.lexxy-content ol {
  list-style-type: decimal;
}

.lexxy-content li {
  margin: 0.25em 0;
}

/* Nested lists in content */
.lexxy-content ul ul,
.lexxy-content ol ul {
  list-style-type: circle;
  margin: 0.25em 0;
}

.lexxy-content ul ul ul,
.lexxy-content ol ul ul,
.lexxy-content ul ol ul,
.lexxy-content ol ol ul {
  list-style-type: square;
}

.lexxy-content ol ol,
.lexxy-content ul ol {
  list-style-type: lower-alpha;
  margin: 0.25em 0;
}

.lexxy-content ol ol ol,
.lexxy-content ul ol ol,
.lexxy-content ol ul ol,
.lexxy-content ul ul ol {
  list-style-type: lower-roman;
}

.lexxy-content pre {
  background-color: var(--lexxy-code-bg);
  color: var(--lexxy-text);
  max-width: 100%;
  padding: 0.75em;
  border-radius: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.lexxy-content code {
  background-color: var(--lexxy-code-bg);
  color: var(--lexxy-text);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.lexxy-content pre code {
  background-color: transparent;
  padding: 0;
  white-space: inherit;
  overflow-wrap: normal;
  word-break: normal;
}

.lexxy-content a {
  color: var(--lexxy-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lexxy-content a:hover {
  opacity: 0.8;
}

.lexxy-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Attachment styles */
.lexxy-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.lexxy-content .attachment__caption {
  text-align: center;
  font-size: 0.875em;
  color: var(--lexxy-placeholder);
  margin-top: 0.25em;
}

/* Compact mobile image attachments in editors. Lexxy still owns the underlying
   attachment node; this only changes the touch layout and menu affordance. */
@media (max-width: 640px) {
  lexxy-editor .attachment-gallery {
    display: block !important;
  }

  lexxy-editor figure.attachment--preview,
  lexxy-editor figure.attachment--file {
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 3rem;
    margin: 0.5rem 0;
    padding: 0.5rem 0.625rem;
    overflow: visible;
    border: 1px solid #e7e5e4;
    border-radius: 0.75rem;
    background-color: rgba(250, 250, 249, 0.94) !important;
    color: #292524;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
  }

  .dark lexxy-editor figure.attachment--preview,
  .dark lexxy-editor figure.attachment--file {
    border-color: rgba(87, 83, 78, 0.9);
    background-color: rgba(28, 25, 23, 0.94) !important;
    color: #f5f5f4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  }

  .chat-message-form--compact lexxy-editor figure.attachment--preview,
  .chat-message-form--compact lexxy-editor figure.attachment--file {
    width: calc(100% - 2.75rem);
  }

  lexxy-editor figure.attachment--preview::before,
  lexxy-editor figure.attachment--file .attachment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border: 1px solid #d6d3d1;
    border-radius: 0.5rem;
    background-color: #f5f5f4;
    color: #57534e;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
  }

  lexxy-editor figure.attachment--preview::before {
    content: "IMG";
  }

  .dark lexxy-editor figure.attachment--preview::before,
  .dark lexxy-editor figure.attachment--file .attachment__icon {
    border-color: #57534e;
    background-color: #292524;
    color: #e7e5e4;
  }

  lexxy-editor figure.attachment--preview > .attachment__container {
    display: none !important;
  }

  lexxy-editor figure.attachment--preview > .attachment__caption,
  lexxy-editor figure.attachment--preview > div > .attachment__caption,
  lexxy-editor figure.attachment--file > .attachment__caption,
  lexxy-editor figure.attachment--file > div > .attachment__caption {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: currentColor;
    text-align: left;
  }

  lexxy-editor figure.attachment--preview .attachment__caption a,
  lexxy-editor figure.attachment--file .attachment__caption a {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  lexxy-editor figure.attachment--preview .attachment__name,
  lexxy-editor figure.attachment--file .attachment__name {
    display: -webkit-box;
    overflow: hidden;
    color: #292524;
    font-weight: 600;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .dark lexxy-editor figure.attachment--preview .attachment__name,
  .dark lexxy-editor figure.attachment--file .attachment__name {
    color: #f5f5f4;
  }

  lexxy-editor figure.attachment--preview .attachment__size,
  lexxy-editor figure.attachment--file .attachment__size {
    display: block;
    margin-top: 0.125rem;
    color: #78716c;
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .dark lexxy-editor figure.attachment--preview .attachment__size,
  .dark lexxy-editor figure.attachment--file .attachment__size {
    color: #a8a29e;
  }

  lexxy-editor figure.attachment--preview .attachment__caption textarea,
  lexxy-editor figure.attachment--file .attachment__caption textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 1.25rem;
    max-height: 2.5rem;
    resize: none;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: transparent !important;
    appearance: none;
    color: currentColor;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
    text-align: left;
  }

  lexxy-editor figure.attachment--preview .attachment__caption textarea::placeholder,
  lexxy-editor figure.attachment--file .attachment__caption textarea::placeholder {
    color: currentColor;
    opacity: 0.82;
  }

  lexxy-editor figure.attachment--preview lexxy-node-delete-button.lexxy-floating-controls,
  lexxy-editor figure.attachment--file lexxy-node-delete-button.lexxy-floating-controls {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 auto;
    margin-left: auto;
    background: transparent !important;
    transform: none !important;
  }

  lexxy-editor figure.attachment--preview .lexxy-floating-controls__group,
  lexxy-editor figure.attachment--file .lexxy-floating-controls__group {
    position: relative;
    display: flex;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  lexxy-editor figure.attachment--preview .lexxy-node-delete,
  lexxy-editor figure.attachment--file .lexxy-node-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 9999px;
    padding: 0;
    position: relative;
    z-index: 1;
    background: rgba(120, 113, 108, 0.08) !important;
    color: #78716c !important;
  }

  .dark lexxy-editor figure.attachment--preview .lexxy-node-delete,
  .dark lexxy-editor figure.attachment--file .lexxy-node-delete {
    background: rgba(231, 229, 228, 0.08) !important;
    color: #d6d3d1 !important;
  }

  lexxy-editor figure.attachment--preview .lexxy-node-delete svg,
  lexxy-editor figure.attachment--file .lexxy-node-delete svg {
    display: none !important;
  }

  lexxy-editor figure.attachment--preview .lexxy-node-delete::before,
  lexxy-editor figure.attachment--file .lexxy-node-delete::before {
    content: "…";
    display: block;
    color: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-0.125rem);
  }

  lexxy-editor figure.attachment--preview .lexxy-node-delete:hover,
  lexxy-editor figure.attachment--preview .lexxy-node-delete:focus-visible,
  lexxy-editor figure.attachment--file .lexxy-node-delete:hover,
  lexxy-editor figure.attachment--file .lexxy-node-delete:focus-visible {
    background-color: rgba(120, 113, 108, 0.12) !important;
    color: #292524 !important;
  }

  .dark lexxy-editor figure.attachment--preview .lexxy-node-delete:hover,
  .dark lexxy-editor figure.attachment--preview .lexxy-node-delete:focus-visible,
  .dark lexxy-editor figure.attachment--file .lexxy-node-delete:hover,
  .dark lexxy-editor figure.attachment--file .lexxy-node-delete:focus-visible {
    background-color: rgba(231, 229, 228, 0.1) !important;
    color: #f5f5f4 !important;
  }

  lexxy-editor .lexxy-compact-attachment-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 30;
    min-width: 8rem;
    overflow: hidden;
    border: 1px solid var(--lexxy-prompt-border);
    border-radius: 0.75rem;
    background-color: var(--lexxy-prompt-bg) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  }

  lexxy-editor .lexxy-compact-attachment-menu button {
    display: block;
    width: 100%;
    border: 0;
    padding: 0.625rem 0.875rem;
    background: transparent !important;
    color: #dc2626 !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: left;
  }

  lexxy-editor .lexxy-compact-attachment-menu button:hover,
  lexxy-editor .lexxy-compact-attachment-menu button:focus-visible {
    background-color: var(--lexxy-button-hover) !important;
  }
}

/* Mention styles */
.lexxy-content .mention {
  color: var(--lexxy-link);
  font-weight: 500;
}

/* Horizontal rule */
.lexxy-content hr {
  border: none;
  border-top: 1px solid var(--lexxy-border);
  margin: 1em 0;
}

/* ==========================================================================
   Todo Item / Checkbox Styles
   ========================================================================== */

.lexxy-content ul.todo-list {
  list-style: none;
  padding-left: 0;
  margin: 0.5em 0;
}

/* Remove extra spacing when multiple todo-lists are consecutive */
.lexxy-content ul.todo-list + ul.todo-list {
  margin-top: 0;
}

.lexxy-content li.todo-item {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25em 0;
}

/* Hide default checkbox, use custom circle style */
.lexxy-content li.todo-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin-top: 0.2em;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  border: 2px solid #a8a29e; /* stone-400 */
  border-radius: 50%;
  background: transparent;
  transition: all 0.15s ease;
}

.lexxy-content li.todo-item input[type="checkbox"]:hover {
  border-color: #14b8a6; /* teal-500 */
}

/* Checked state - filled circle */
.lexxy-content li.todo-item input[type="checkbox"]:checked {
  background-color: #14b8a6; /* teal-500 */
  border-color: #14b8a6;
}

/* Checkmark inside the circle */
.lexxy-content li.todo-item input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 0.35em;
  height: 0.55em;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-10%, -10%);
  margin-left: 0.3em;
  margin-top: 0.05em;
}

.lexxy-content li.todo-item.checked {
  text-decoration: line-through;
  color: var(--lexxy-placeholder);
}

/* Dark mode */
.dark .lexxy-content li.todo-item input[type="checkbox"] {
  border-color: #57534e; /* stone-600 */
}

.dark .lexxy-content li.todo-item input[type="checkbox"]:hover {
  border-color: #2dd4bf; /* teal-400 */
}

.dark .lexxy-content li.todo-item input[type="checkbox"]:checked {
  background-color: #2dd4bf; /* teal-400 */
  border-color: #2dd4bf;
}

/* Tables (if supported) */
.lexxy-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5em 0;
}

.lexxy-content th,
.lexxy-content td {
  border: 1px solid var(--lexxy-border);
  padding: 0.5em;
  text-align: left;
}

.lexxy-content th {
  background-color: var(--lexxy-code-bg);
  font-weight: 600;
}

/* ==========================================================================
   Toolbar Toggle - Hidden State
   ========================================================================== */

lexxy-editor.toolbar-hidden lexxy-toolbar {
  display: none !important;
}

/* ==========================================================================
   Compact Editor for Chat Forms
   ========================================================================== */

.chat-message-form lexxy-editor .ProseMirror,
.chat-message-form lexxy-editor [contenteditable] {
  min-height: 56px;
  padding: 14px 16px;
  padding-right: 80px; /* Space for send button */
}

.chat-message-form lexxy-editor {
  min-height: auto;
}

/* Remove border from lexxy editor when inside chat message form */
.chat-message-form lexxy-editor,
.chat-message-form lexxy-editor *,
.chat-message-form [data-controller="lexxy"] {
  --lexxy-border: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove border from lexxy editor when inside the scratchpad. */
.scratchpad-form lexxy-editor,
.scratchpad-form lexxy-editor *,
.scratchpad-form [data-controller="lexxy"] {
  --lexxy-border: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.scratchpad-form lexxy-editor {
  overflow: visible !important;
}

.scratchpad-form lexxy-editor [data-lexxy-toolbar],
.scratchpad-form lexxy-editor .lexxy-toolbar,
.scratchpad-form lexxy-toolbar,
.scratchpad-form .lexxy-toolbar {
  box-sizing: border-box !important;
  padding-right: 3rem !important;
  position: sticky !important;
  top: 0;
  z-index: 20;
  width: calc(100% - 2rem) !important;
  background-color: #ffffff !important;
}

.dark .scratchpad-form lexxy-editor [data-lexxy-toolbar],
.dark .scratchpad-form lexxy-editor .lexxy-toolbar,
.dark .scratchpad-form lexxy-toolbar,
.dark .scratchpad-form .lexxy-toolbar {
  background-color: #1c1917 !important;
}

/* Compact rendered DM bubbles. Lexxy/typography defaults add paragraph margins
   that make messages with line breaks look over-padded inside the bubble. */
.chat-message-content .lexxy-content {
  line-height: 1.35;
  white-space: normal;
}

.chat-message-content .lexxy-content p {
  margin: 0;
}

.chat-message-content .lexxy-content p + p {
  margin-top: 0.25rem;
}

.chat-message-content .lexxy-content p:empty::before {
  content: "\00a0";
}

.chat-message-content .lexxy-content > :first-child {
  margin-top: 0;
}

.chat-message-content .lexxy-content > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Feed Comment Form - Borderless Editor
   ========================================================================== */

/* Remove border from lexxy editor when inside feed comment form */
.feed-comment-form lexxy-editor,
.feed-comment-form lexxy-editor *,
.feed-comment-form [data-controller="lexxy"] {
  --lexxy-border: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   Post Edit Form - Borderless Editor
   ========================================================================== */

/* Remove border from lexxy editor when inside post edit content area */
.post-edit-content lexxy-editor,
.post-edit-content lexxy-editor *,
.post-edit-content [data-controller="lexxy"] {
  --lexxy-border: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Keep mention pickers polished inside borderless editor contexts. */
.feed-comment-form .lexxy-prompt-menu,
.post-edit-content .lexxy-prompt-menu {
  border: 1px solid var(--lexxy-prompt-border) !important;
  box-shadow: var(--lexxy-shadow, 0 12px 24px rgba(15, 23, 42, 0.14)) !important;
}

.feed-comment-form .lexxy-prompt-menu__item[aria-selected],
.feed-comment-form .lexxy-prompt-menu__item:focus-visible,
.post-edit-content .lexxy-prompt-menu__item[aria-selected],
.post-edit-content .lexxy-prompt-menu__item:focus-visible {
  box-shadow: inset 0 0 0 1px var(--lexxy-link) !important;
}