/* OctaSpace Admin Lexxy Editor Theme
 * Overrides for Lexxy editor to match OctaSpace design system
 * Adapted from Fizzy reference implementation
 */

:root {
  /* Light mode */
  --lexxy-color-ink: #0a0a0a;
  --lexxy-color-ink-medium: #737373;
  --lexxy-color-ink-light: #a3a3a3;
  --lexxy-color-ink-lighter: #e4e4e7;
  --lexxy-color-ink-lightest: #f4f4f5;
  --lexxy-color-ink-inverted: #ffffff;

  --lexxy-color-accent-dark: #8a1475;
  --lexxy-color-accent-medium: #B11995;
  --lexxy-color-accent-light: rgba(177, 25, 149, 0.15);
  --lexxy-color-accent-lightest: rgba(177, 25, 149, 0.08);

  /* Transparent canvas - inherits form background */
  --lexxy-color-canvas: transparent;
  /* Solid canvas for dropdowns/popups */
  --lexxy-color-canvas-solid: #ffffff;
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: #B11995;

  /* Code block specific - Monokai background */
  --lexxy-code-bg: #272822;
  --lexxy-code-text: #f8f8f2;
  --lexxy-code-border: #3e3d32;

  /* Syntax highlighting colors - Monokai theme */
  --lexxy-token-keyword: #f92672;    /* Pink - keywords, control flow */
  --lexxy-token-string: #e6db74;     /* Yellow - strings */
  --lexxy-token-comment: #75715e;    /* Grey-brown - comments */
  --lexxy-token-function: #66d9ef;   /* Cyan - functions, methods */
  --lexxy-token-variable: #fd971f;   /* Orange - variables, parameters */
  --lexxy-token-property: #ae81ff;   /* Purple - numbers, constants */
  --lexxy-token-operator: #f92672;   /* Pink - operators */
  --lexxy-token-punctuation: #f8f8f2; /* Light - punctuation */
  --lexxy-token-number: #ae81ff;     /* Purple - numbers */
  --lexxy-token-class: #a6e22e;      /* Green - class names, types */

  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --lexxy-radius: 6px;

  /* Highlight text colors */
  --highlight-1: rgb(136, 118, 38);   /* muted gold */
  --highlight-2: rgb(185, 94, 6);     /* burnt orange */
  --highlight-3: rgb(207, 0, 0);      /* bright red */
  --highlight-4: rgb(216, 28, 170);   /* magenta */
  --highlight-5: rgb(144, 19, 254);   /* violet */
  --highlight-6: rgb(5, 98, 185);     /* deep blue */
  --highlight-7: rgb(17, 138, 15);    /* forest green */
  --highlight-8: rgb(148, 82, 22);    /* brown */
  --highlight-9: rgb(102, 102, 102);  /* gray */

  /* Highlight background colors */
  --highlight-bg-1: rgba(229, 223, 6, 0.3);   /* yellow */
  --highlight-bg-2: rgba(255, 185, 87, 0.3);  /* peach */
  --highlight-bg-3: rgba(255, 118, 118, 0.3); /* light red */
  --highlight-bg-4: rgba(248, 137, 216, 0.3); /* pink */
  --highlight-bg-5: rgba(190, 165, 255, 0.3); /* lavender */
  --highlight-bg-6: rgba(124, 192, 252, 0.3); /* sky blue */
  --highlight-bg-7: rgba(140, 255, 129, 0.3); /* mint green */
  --highlight-bg-8: rgba(221, 170, 123, 0.3); /* tan */
  --highlight-bg-9: rgba(200, 200, 200, 0.3); /* light gray */

  /* Lexxy dropdown button size */
  --lexxy-dropdown-btn-size: 2.5em;
}

/* Dark mode - supports .dark class and data-theme attributes */
.dark,
[data-theme="night"],
[data-theme="drakula"] {
  --lexxy-color-ink: #fafafa;
  --lexxy-color-ink-medium: #a3a3a3;
  --lexxy-color-ink-light: #52525b;
  --lexxy-color-ink-lighter: #3f3f46;
  --lexxy-color-ink-lightest: #27272a;
  --lexxy-color-ink-inverted: #0a0a0a;

  --lexxy-color-accent-dark: #c026d3;
  --lexxy-color-accent-medium: #B11995;
  --lexxy-color-accent-light: rgba(177, 25, 149, 0.25);
  --lexxy-color-accent-lightest: rgba(177, 25, 149, 0.12);

  /* Transparent canvas - inherits form background */
  --lexxy-color-canvas: transparent;
  /* Solid canvas for dropdowns/popups */
  --lexxy-color-canvas-solid: #171717;
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);

  /* Code block specific - Monokai background (slightly darker for dark mode) */
  --lexxy-code-bg: #1e1e1a;
  --lexxy-code-text: #f8f8f2;
  --lexxy-code-border: #3e3d32;

  /* Syntax highlighting colors - Monokai theme (same for dark mode) */
  --lexxy-token-keyword: #f92672;    /* Pink - keywords, control flow */
  --lexxy-token-string: #e6db74;     /* Yellow - strings */
  --lexxy-token-comment: #75715e;    /* Grey-brown - comments */
  --lexxy-token-function: #66d9ef;   /* Cyan - functions, methods */
  --lexxy-token-variable: #fd971f;   /* Orange - variables, parameters */
  --lexxy-token-property: #ae81ff;   /* Purple - numbers, constants */
  --lexxy-token-operator: #f92672;   /* Pink - operators */
  --lexxy-token-punctuation: #f8f8f2; /* Light - punctuation */
  --lexxy-token-number: #ae81ff;     /* Purple - numbers */
  --lexxy-token-class: #a6e22e;      /* Green - class names, types */

  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Editor container - supports both lexxy-editor and trix-editor */
lexxy-editor,
trix-editor {
  background-color: var(--lexxy-color-canvas);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-ink);
  font-size: 0.875rem;
  line-height: 1.5;

  /* Reference styles */
  display: block;
  position: relative;
  overflow: visible;

  /* Hide upload button when attachments are disabled */
  &[data-attachments="false"] button[name="upload"] {
    display: none;
  }
}

lexxy-editor:focus-within,
trix-editor:focus-within,
trix-editor:focus {
  border-color: var(--lexxy-color-ink-light);
  box-shadow: 0 0 0 3px rgba(82, 82, 82, 0.15);
}

.dark lexxy-editor:focus-within,
.dark trix-editor:focus-within,
.dark trix-editor:focus,
[data-theme="night"] lexxy-editor:focus-within,
[data-theme="night"] trix-editor:focus-within,
[data-theme="night"] trix-editor:focus,
[data-theme="drakula"] lexxy-editor:focus-within,
[data-theme="drakula"] trix-editor:focus-within,
[data-theme="drakula"] trix-editor:focus {
  box-shadow: 0 0 0 3px rgba(82, 82, 82, 0.25);
}

/* Trix editor content area text color */
trix-editor .trix-content,
trix-editor.trix-content {
  color: var(--lexxy-color-ink);
}

/* Toolbar - Lexxy */
lexxy-toolbar {
  --lexxy-toolbar-icon-size: 1em;

  background-color: var(--lexxy-color-canvas);
  border-block-end: 1px solid var(--lexxy-color-ink-lighter);
  /* Match parent border-radius at top corners */
  border-radius: calc(var(--lexxy-radius) - 1px) calc(var(--lexxy-radius) - 1px) 0 0;
  color: var(--lexxy-color-ink-medium);
  display: flex;
  font-size: 0.875rem;
  gap: 2px;
  /* Offset margin to cover border gap */
  margin: -1px -1px 0 -1px;
  padding: 4px 5px;
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

/* Toolbar - Trix */
trix-toolbar {
  background-color: var(--lexxy-color-canvas);
  border-bottom: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: calc(var(--lexxy-radius) - 1px) calc(var(--lexxy-radius) - 1px) 0 0;
  padding: 4px 5px;
}

trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px;
}

trix-toolbar .trix-button-group {
  border: none;
  margin-bottom: 0;
  display: flex;
  gap: 2px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 8px;
}

trix-toolbar .trix-button {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  color: var(--lexxy-color-ink-medium);
  padding: 6px 8px;
  margin: 0;
}

trix-toolbar .trix-button:hover {
  background-color: var(--lexxy-color-ink-lightest);
  color: var(--lexxy-color-ink);
}

trix-toolbar .trix-button.trix-active {
  background-color: var(--lexxy-color-selected);
  color: var(--lexxy-color-accent-medium);
}

trix-toolbar .trix-button--icon::before {
  opacity: 0.7;
}

trix-toolbar .trix-button:hover .trix-button--icon::before,
trix-toolbar .trix-button.trix-active::before {
  opacity: 1;
}

/* Dark mode - invert toolbar icons */
.dark trix-toolbar .trix-button--icon::before,
[data-theme="night"] trix-toolbar .trix-button--icon::before,
[data-theme="drakula"] trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

/* Trix dialogs */
trix-toolbar .trix-dialog {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  box-shadow: var(--lexxy-shadow);
}

trix-toolbar .trix-input--dialog {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 4px;
  color: var(--lexxy-color-ink);
}

trix-toolbar .trix-button--dialog {
  background-color: var(--lexxy-color-accent-medium);
  color: white;
  border-radius: 4px;
}

.lexxy-editor__toolbar-button {
  --toolbar-button-size: 32px;

  appearance: none;
  aspect-ratio: 1;
  background-color: transparent;
  block-size: var(--toolbar-button-size);
  border: none;
  border-radius: 4px;
  color: var(--lexxy-color-ink-medium);
  cursor: pointer;
  display: grid;
  font-size: inherit;
  place-items: center;
  transition: background-color 0.15s, color 0.15s;
}

.lexxy-editor__toolbar-button:hover {
  background-color: var(--lexxy-color-ink-lightest);
  color: var(--lexxy-color-ink);
}

.lexxy-editor__toolbar-button:active,
.lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: var(--lexxy-color-selected);
  color: var(--lexxy-color-accent-medium);
}

.lexxy-editor__toolbar-button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.35;
}

.lexxy-editor__toolbar-button svg {
  block-size: var(--lexxy-toolbar-icon-size);
  fill: currentColor;
  inline-size: var(--lexxy-toolbar-icon-size);
}

.lexxy-editor__toolbar-spacer {
  flex: 1;
  min-inline-size: 8px;
}

/* Content area */
.lexxy-editor__content {
  min-block-size: 200px;
  outline: 0;
  padding: 12px;
}

/* Placeholder styling */
.lexxy-editor--empty .lexxy-editor__content:not(:has(ul, ol))::before {
  color: var(--lexxy-color-ink-light);
  opacity: 0.7;
}

/* Dropdowns */
.lexxy-editor__toolbar-dropdown-content {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  box-shadow: var(--lexxy-shadow);
  padding: 8px;
  position: absolute;
  z-index: 100;
}

/* Highlight Dropdown */
lexxy-highlight-dropdown {
  --gap: 0.5ch;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

lexxy-highlight-dropdown [data-button-group] {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  flex-wrap: wrap;
}

/* Highlight color buttons */
.lexxy-highlight-button {
  appearance: none;
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: grid;
  font-size: 0.875rem;
  font-weight: 600;
  width: var(--lexxy-dropdown-btn-size);
  height: var(--lexxy-dropdown-btn-size);
  place-content: center;
  position: relative;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.lexxy-highlight-button::after {
  content: "Aa";
}

.lexxy-highlight-button:hover {
  opacity: 0.85;
  box-shadow: 0 0 0 2px var(--lexxy-color-ink-lighter);
}

.lexxy-highlight-button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--lexxy-color-accent-medium);
}

.lexxy-highlight-button[aria-pressed="true"]::after {
  content: "✓";
}

/* Reset highlight button */
.lexxy-editor__toolbar-dropdown-reset {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 99rem;
  color: var(--lexxy-color-ink);
  cursor: pointer;
  font-size: 0.75rem;
  margin-top: 0.5em;
  padding: 0.5em 1em;
  width: 100%;
  transition: background-color 0.15s ease;
}

.lexxy-editor__toolbar-dropdown-reset:hover:not(:disabled) {
  background-color: var(--lexxy-color-ink-lightest);
}

.lexxy-editor__toolbar-dropdown-reset:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

lexxy-link-dropdown input[type="url"] {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 4px;
  color: var(--lexxy-color-ink);
  padding: 6px 10px;
  min-inline-size: 30ch;
}

lexxy-link-dropdown button[type="submit"] {
  background-color: var(--lexxy-color-accent-medium);
  color: white;
  border-radius: 4px;
  padding: 6px 12px;
}

lexxy-link-dropdown button[type="submit"]:hover {
  background-color: var(--lexxy-color-accent-dark);
}

/* Prompt menu (mentions) */
.lexxy-prompt-menu {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  box-shadow: var(--lexxy-shadow);
  z-index: 100;
}

.lexxy-prompt-menu__item:hover {
  background-color: var(--lexxy-color-ink-lightest);
}

.lexxy-prompt-menu__item[aria-selected] {
  background-color: var(--lexxy-color-selected);
}

/* Code Language Picker (Pill Style from Fizzy) */
/* ВАЖНО: lexxy-code-language-picker это web component на уровне lexxy-editor,
   Lexxy автоматически устанавливает top через inline style относительно code блока */

lexxy-code-language-picker {
  /* Absolute позиционирование - Lexxy сам устанавливает top */
  position: absolute;
  right: 0.75em; /* Отступ от правого края = padding кода справа */
  z-index: 10;
  margin: 4px 18px !important;
  
  /* Скрыт по умолчанию */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Показать при фокусе на редакторе */
lexxy-editor:focus-within lexxy-code-language-picker {
  opacity: 1;
  visibility: visible;
}

/* Стили для select внутри компонента */
lexxy-code-language-picker select,
.lexxy-code-language-picker {
  --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
  --caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");

  -webkit-appearance: none;
  appearance: none;
  background-color: var(--lexxy-color-canvas-solid);
  background-image: var(--caret-icon);
  background-position: center right 0.7em;
  background-repeat: no-repeat;
  background-size: 0.45em;
  border: 1px solid var(--lexxy-color-ink-light);
  border-radius: 99rem; /* Pill style - полностью скругленные края */
  color: var(--lexxy-color-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem; /* 11.2px - компактный размер */
  font-weight: 500;
  line-height: 1.3;
  
  padding: 6px 12px;
  padding-right: 2em; /* Место для иконки стрелки */
  text-align: start;
}

/* Dark mode - смена иконки на светлую */
.dark lexxy-code-language-picker select,
.dark .lexxy-code-language-picker,
[data-theme="night"] lexxy-code-language-picker select,
[data-theme="night"] .lexxy-code-language-picker,
[data-theme="drakula"] lexxy-code-language-picker select,
[data-theme="drakula"] .lexxy-code-language-picker {
  background-image: var(--caret-icon-dark);
}

/* Options в dropdown */
lexxy-code-language-picker select option,
.lexxy-code-language-picker option {
  background-color: var(--lexxy-color-canvas-solid);
  color: var(--lexxy-color-ink);
}

/* Character counter */
.lexxy-character-counter {
  color: var(--lexxy-color-ink-light);
  font-size: 0.75rem;
  margin-top: 6px;
  text-align: right;
}

.lexxy-character-counter.warning {
  color: #f59e0b;
}

.lexxy-character-counter.error {
  color: #ef4444;
}

/* Attachment Caption Styling */
/* High specificity to override Tailwind Forms plugin defaults */
.trix-content figure.attachment .attachment__caption textarea,
trix-editor figure.attachment .attachment__caption textarea,
figure.attachment .attachment__caption textarea {
  font-size: 0.85em;
  color: var(--lexxy-color-ink-medium);
  text-align: center;
  margin-top: 0.5rem;

  /* Reset form styles */
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  border-radius: 4px;
  width: 100%;
  resize: none;
  text-align: center;
  padding: 0.2rem;
  font-family: inherit;

  /* Crucial: Override background */
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.trix-content figure.attachment .attachment__caption textarea:focus,
trix-editor figure.attachment .attachment__caption textarea:focus,
figure.attachment .attachment__caption textarea:focus {
  outline: none;
  background-color: var(--lexxy-color-canvas-solid) !important;
  color: var(--lexxy-color-ink);
  box-shadow: 0 0 0 2px var(--lexxy-color-ink-lighter) !important;
}

.dark .trix-content figure.attachment .attachment__caption textarea:focus,
.dark trix-editor figure.attachment .attachment__caption textarea:focus,
.dark figure.attachment .attachment__caption textarea:focus,
[data-theme="night"] .trix-content figure.attachment .attachment__caption textarea:focus,
[data-theme="night"] trix-editor figure.attachment .attachment__caption textarea:focus,
[data-theme="night"] figure.attachment .attachment__caption textarea:focus,
[data-theme="drakula"] .trix-content figure.attachment .attachment__caption textarea:focus,
[data-theme="drakula"] trix-editor figure.attachment .attachment__caption textarea:focus,
[data-theme="drakula"] figure.attachment .attachment__caption textarea:focus {
  background-color: #27272a !important; /* Zinc 800 */
  box-shadow: 0 0 0 2px #3f3f46 !important; /* Zinc 700 */
}

.trix-content figure.attachment .attachment__caption textarea::placeholder,
trix-editor figure.attachment .attachment__caption textarea::placeholder,
figure.attachment .attachment__caption textarea::placeholder {
  color: var(--lexxy-color-ink-light);
  opacity: 0.7;
}

/* Hide file size by default for nicer look */
.trix-content .attachment__size,
trix-editor .attachment__size {
  display: none;
}

/* Center attachment previews */
.trix-content .attachment,
trix-editor .attachment,
figure.attachment {
  display: block !important;
  inline-size: fit-content;
  max-inline-size: 100%;
  position: relative;
}

.trix-content .attachment--preview,
trix-editor .attachment--preview,
figure.attachment.attachment--preview {
  margin-inline: auto !important;
  text-align: center;
}

.trix-content .attachment--preview img,
trix-editor .attachment--preview img,
figure.attachment.attachment--preview img {
  display: block;
  margin-inline: auto;
  max-inline-size: 100%;
  block-size: auto;
}


/* Mobile adjustments */
@media (max-width: 640px) {
  .lexxy-editor__toolbar-button {
    --toolbar-button-size: 36px;
  }

  lexxy-toolbar {
    padding: 2px;
  }

  .lexxy-editor__content {
    min-block-size: 150px;
    padding: 10px;
  }
}

/* Rich text content display (Adapted from rich-text-content.css) */
.rich-text-content,
.lexxy-editor__content,
trix-editor {
  color: var(--lexxy-color-ink);
  font-size: 0.875rem;
  line-height: 1.625;
  --block-margin: 0.5lh;
  min-height: 200px;
  padding: 12px;
}

.rich-text-content h1, .lexxy-editor__content h1, trix-editor h1,
.rich-text-content h2, .lexxy-editor__content h2, trix-editor h2,
.rich-text-content h3, .lexxy-editor__content h3, trix-editor h3,
.rich-text-content h4, .lexxy-editor__content h4, trix-editor h4,
.rich-text-content h5, .lexxy-editor__content h5, trix-editor h5,
.rich-text-content h6, .lexxy-editor__content h6, trix-editor h6 {
  color: var(--lexxy-color-ink);
  display: block;
  font-weight: 800;
  letter-spacing: -0.02ch;
  line-height: 1.1;
  margin-block: 1em var(--block-margin); /* Adjusted top margin for better spacing */
  overflow-wrap: break-word;
  text-wrap: balance;
}

.rich-text-content h1, .lexxy-editor__content h1, trix-editor h1 { font-size: 2em; }
.rich-text-content h2, .lexxy-editor__content h2, trix-editor h2 { font-size: 1.5em; }
.rich-text-content h3, .lexxy-editor__content h3, trix-editor h3 { font-size: 1.17em; }
.rich-text-content h4, .lexxy-editor__content h4, trix-editor h4 { font-size: 1em; }

.rich-text-content p, .lexxy-editor__content p, trix-editor p {
  margin-block: 0 var(--block-margin);
}

.rich-text-content p:empty, .lexxy-editor__content p:empty, trix-editor p:empty {
  display: none;
}

.rich-text-content ul, .lexxy-editor__content ul, trix-editor ul,
.rich-text-content ol, .lexxy-editor__content ol, trix-editor ol {
  margin-block: 0 var(--block-margin);
  padding-inline-start: 3ch;
}

.rich-text-content ul, .lexxy-editor__content ul, trix-editor ul { list-style-type: disc; }
.rich-text-content ol, .lexxy-editor__content ol, trix-editor ol { list-style-type: decimal; }

.rich-text-content li, .lexxy-editor__content li, trix-editor li { margin: 0.25rem 0; }

.rich-text-content blockquote, .lexxy-editor__content blockquote, trix-editor blockquote {
  border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
  color: var(--lexxy-color-ink-medium);
  font-style: italic;
  margin: var(--block-margin) 0;
  padding-inline-start: 2ch;
}

/* Inline code */
.rich-text-content code, .lexxy-editor__content code, trix-editor code {
  background-color: var(--lexxy-color-ink-lightest);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 0.3em;
  color: var(--lexxy-color-ink);
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  font-weight: 500;
  padding: 0.1em 0.3em;
}

/* Code blocks - distinct dark background (like in Fizzy reference) */
.rich-text-content pre, .lexxy-editor__content pre, trix-editor pre,
.lexxy-editor__content code[data-language],
.lexxy-editor__content code[spellcheck="false"] {
  background-color: var(--lexxy-code-bg);
  border: 1px solid var(--lexxy-code-border);
  border-radius: 0.5em;
  color: var(--lexxy-code-text);
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85em;
  font-weight: 400;
  margin-block: var(--block-margin);
  overflow-x: auto;
  padding: 0.75em 1em;
  tab-size: 2;
  text-wrap: nowrap;
  white-space: pre;
  position: relative; /* ВАЖНО: для позиционирования dropdown */
}

.rich-text-content pre code, .lexxy-editor__content pre code, trix-editor pre code {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.rich-text-content a, .lexxy-editor__content a, trix-editor a {
  color: var(--lexxy-color-accent-medium);
  text-decoration: underline;
}

.rich-text-content a:hover, .lexxy-editor__content a:hover, trix-editor a:hover {
  color: var(--lexxy-color-accent-dark);
}

/* ==========================================================================
   Syntax Highlighting (Lexxy code-token classes)
   Lexxy uses custom class names: code-token__attr, code-token__property, etc.
   ========================================================================== */

/* Keywords, attributes, directives: def, end, class, function, if, else, return, etc. */
.lexxy-editor__content .code-token__attr,
.rich-text-content .code-token__attr,
.lexxy-editor__content .code-token__keyword,
.rich-text-content .code-token__keyword,
trix-editor .code-token__attr,
trix-editor .code-token__keyword {
  color: var(--lexxy-token-keyword); /* #f92672 - Розовый */
}

/* Strings, selectors, char, inserted */
.lexxy-editor__content .code-token__selector,
.rich-text-content .code-token__selector,
.lexxy-editor__content .code-token__string,
.rich-text-content .code-token__string,
trix-editor .code-token__selector,
trix-editor .code-token__string {
  color: var(--lexxy-token-string); /* #e6db74 - Желтый */
}

/* Comments, doctype, prolog */
.lexxy-editor__content .code-token__comment,
.rich-text-content .code-token__comment,
trix-editor .code-token__comment {
  color: var(--lexxy-token-comment); /* #75715e - Серо-коричневый */
  font-style: italic;
}

/* Functions, class names, decorators */
.lexxy-editor__content .code-token__function,
.rich-text-content .code-token__function,
trix-editor .code-token__function {
  color: var(--lexxy-token-function); /* #66d9ef - Голубой */
}

/* Variables, parameters, regex, namespace */
.lexxy-editor__content .code-token__variable,
.rich-text-content .code-token__variable,
trix-editor .code-token__variable {
  color: var(--lexxy-token-variable); /* #fd971f - Оранжевый */
}

/* Properties, constants, booleans, numbers, tags */
.lexxy-editor__content .code-token__property,
.rich-text-content .code-token__property,
trix-editor .code-token__property {
  color: var(--lexxy-token-property); /* #ae81ff - Фиолетовый */
}

/* Numbers */
.lexxy-editor__content .code-token__number,
.rich-text-content .code-token__number,
trix-editor .code-token__number {
  color: var(--lexxy-token-number); /* #ae81ff - Фиолетовый */
}

/* Classes and types */
.lexxy-editor__content .code-token__class,
.rich-text-content .code-token__class,
.lexxy-editor__content .code-token__class-name,
.rich-text-content .code-token__class-name,
trix-editor .code-token__class,
trix-editor .code-token__class-name {
  color: var(--lexxy-token-class); /* #a6e22e - Зеленый */
}

/* Operators, entities, urls, deleted */
.lexxy-editor__content .code-token__operator,
.rich-text-content .code-token__operator,
trix-editor .code-token__operator {
  color: var(--lexxy-token-operator); /* #f92672 - Розовый */
}

/* Punctuation: (), {}, [], ;, : */
.lexxy-editor__content .code-token__punctuation,
.rich-text-content .code-token__punctuation,
trix-editor .code-token__punctuation {
  color: var(--lexxy-token-punctuation); /* #f8f8f2 - Светлый */
}

/* Boolean values (true, false, nil, null) */
.lexxy-editor__content .code-token__boolean,
.rich-text-content .code-token__boolean,
trix-editor .code-token__boolean {
  color: var(--lexxy-token-property); /* #ae81ff - Фиолетовый */
}

/* Tags (HTML/XML) */
.lexxy-editor__content .code-token__tag,
.rich-text-content .code-token__tag,
trix-editor .code-token__tag {
  color: var(--lexxy-token-keyword); /* #f92672 - Розовый */
}

/* Regex patterns */
.lexxy-editor__content .code-token__regex,
.rich-text-content .code-token__regex,
trix-editor .code-token__regex {
  color: var(--lexxy-token-variable); /* #fd971f - Оранжевый */
}

/* ==========================================================================
   Lexxy Text Formatting Classes
   ========================================================================== */

/* Strikethrough text */
.lexxy-content__strikethrough,
trix-editor .lexxy-content__strikethrough,
.rich-text-content .lexxy-content__strikethrough,
.trix-content del,
.trix-content s,
trix-editor del,
trix-editor s {
  text-decoration: line-through;
}

/* Underline text */
.lexxy-content__underline,
trix-editor .lexxy-content__underline,
.rich-text-content .lexxy-content__underline,
.trix-content u,
trix-editor u {
  text-decoration: underline;
}

/* Bold text */
.lexxy-content__bold,
trix-editor .lexxy-content__bold,
.rich-text-content .lexxy-content__bold {
  font-weight: 700;
}

/* Italic text */
.lexxy-content__italic,
trix-editor .lexxy-content__italic,
.rich-text-content .lexxy-content__italic {
  font-style: italic;
}

/* Subscript */
.lexxy-content__subscript,
trix-editor .lexxy-content__subscript,
.rich-text-content .lexxy-content__subscript {
  vertical-align: sub;
  font-size: 0.75em;
}

/* Superscript */
.lexxy-content__superscript,
trix-editor .lexxy-content__superscript,
.rich-text-content .lexxy-content__superscript {
  vertical-align: super;
  font-size: 0.75em;
}

/* Highlight/Mark - don't set background-color, let Lexxy inline styles work */
.lexxy-content__highlight,
trix-editor .lexxy-content__highlight,
.rich-text-content .lexxy-content__highlight,
.trix-content mark,
trix-editor mark {
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
}