@layer components {
  /* Lexxy reads these variables, set light-only on :root. Redeclaring them
     here points the editor, its menus, and the preview at the app tokens,
     which follow light and dark mode. Derived variables are redeclared too,
     because :root already resolved them against Lexxy's own values. */
  .lexxy-content {
    --lexxy-color-ink: var(--foreground);
    --lexxy-color-ink-medium: var(--muted-foreground);
    --lexxy-color-ink-light: var(--muted-foreground);
    --lexxy-color-ink-lighter: var(--border);
    --lexxy-color-ink-lightest: var(--muted);
    --lexxy-color-ink-inverted: var(--primary-foreground);
    --lexxy-color-accent-dark: var(--primary);
    --lexxy-color-accent-medium: color-mix(in oklab, var(--primary) 80%, var(--background));
    --lexxy-color-accent-light: var(--accent);
    --lexxy-color-accent-lightest: var(--accent);
    --lexxy-color-red: var(--destructive);

    --lexxy-color-canvas: var(--background);
    --lexxy-color-text: var(--foreground);
    --lexxy-color-text-subtle: var(--muted-foreground);
    --lexxy-color-link: var(--foreground);
    --lexxy-color-selected: var(--accent);
    --lexxy-color-selected-hover: color-mix(in oklab, var(--foreground) 10%, var(--accent));
    --lexxy-color-selected-dark: var(--ring);
    --lexxy-color-selected-50: color-mix(in oklab, var(--ring) 50%, transparent);
    --lexxy-color-code-bg: var(--muted);

    --lexxy-color-table-header-bg: var(--muted);
    --lexxy-color-table-cell-border: var(--border);
    --lexxy-color-table-cell-selected: var(--accent);
    --lexxy-color-table-cell-selected-border: var(--ring);
    --lexxy-color-table-cell-selected-bg: var(--accent);
    --lexxy-color-table-cell-add: color-mix(in oklab, var(--ring) 50%, transparent);
    --lexxy-color-table-cell-toggle: var(--accent);
    --lexxy-color-table-cell-remove: color-mix(in oklab, var(--destructive) 10%, transparent);

    --lexxy-color-code-token-att: light-dark(#d73a49, #f97583);
    --lexxy-color-code-token-comment: light-dark(#6a737d, #8b949e);
    --lexxy-color-code-token-function: light-dark(#6f42c1, #d2a8ff);
    --lexxy-color-code-token-operator: light-dark(#d73a49, #f97583);
    --lexxy-color-code-token-property: light-dark(#005cc5, #79c0ff);
    --lexxy-color-code-token-punctuation: light-dark(#24292e, #c9d1d9);
    --lexxy-color-code-token-selector: light-dark(#22863a, #7ee787);
    --lexxy-color-code-token-variable: light-dark(#e36209, #ffa657);

    --lexxy-focus-ring-color: var(--ring);
    --lexxy-font-base: var(--font-sans);
    --lexxy-font-mono: var(--font-mono);
    --lexxy-radius: var(--radius-sm);

    line-height: var(--text-base--line-height);

    & > :first-child {
      margin-block-start: 0;
    }

    & > :last-child {
      margin-block-end: 0;
    }
  }

  .rich-text-editor {
    display: grid;
    gap: 0.75rem;
  }

  .rich-text-editor lexxy-editor {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }

  .rich-text-editor action-text-attachment[content-type="application/vnd.momntum.variable"] {
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
    white-space: normal;
  }

  .lexxy-variable {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.35rem;
    padding-block: 0.1rem;
    border-radius: var(--radius-sm);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    white-space: nowrap;
  }

  .lexxy-variable-option {
    display: grid;
    gap: 0.15rem;
  }

  .lexxy-variable-option__name {
    font-weight: var(--font-weight-medium);
  }

  .lexxy-variable-option__code {
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .lexxy-conditional-node {
    display: grid;
    gap: 0.5rem;
    margin-block: 0.75rem;
    padding: 0.75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--muted) 70%, transparent);
  }

  .lexxy-conditional-node__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
  }

  .lexxy-conditional-node__badge {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }

  .lexxy-conditional-node__select {
    min-inline-size: 12rem;
    padding-inline: 0.5rem;
    padding-block: 0.35rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--foreground);
  }

  .lexxy-conditional-node__body {
    min-inline-size: 0;
    padding-inline: 0.5rem;
    border-inline-start: 2px solid var(--border);

    & > :first-child {
      margin-block-start: 0;
    }

    & > :last-child {
      margin-block-end: 0;
    }
  }

  .prompt-versions {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .prompt-versions__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .prompt-versions__meta {
    display: grid;
    gap: 0.15rem;
  }

  .prompt-versions__number {
    font-weight: var(--font-weight-medium);
  }

  .prompt-preview {
    display: grid;
    gap: 1rem;
  }

  .prompt-preview__body {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--card-foreground);
  }

  .prompt-preview__markdown {
    display: grid;
    gap: 0.5rem;

    & > summary {
      inline-size: fit-content;
      min-block-size: 2.75rem;
      align-content: center;
      color: var(--foreground);
      font-weight: var(--font-weight-medium);
      cursor: pointer;
    }

    & > p {
      margin: 0;
    }
  }

  .prompt-preview__markdown-text {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--muted);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* Unlayered so these beat Lexxy's toolbar rules. Highlight and underline have
   no Markdown form, so a model would never see them. */
.rich-text-editor lexxy-highlight-dropdown,
.rich-text-editor button[name="underline"],
.rich-text-editor lexxy-editor:not([data-editor-mode="article"]) button[name="image"],
.rich-text-editor button[name="file"] {
  display: none;
}

/* The prompt editor fills the main pane below the tabs instead of guessing a
   height from the viewport. Each wrapper down to Lexxy's content area grows
   into the remaining space but never shrinks below its content, so a short
   prompt leaves the page unscrolled and a long one grows the page. The editor
   content does not scroll on its own: Lexxy places its code language picker
   and table tools against lexxy-editor and does not reposition them on
   scroll. Unlayered to beat Lexxy's display rule on lexxy-editor and the
   shell-page grid. */
.prompt-workspace {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;

  & form,
  & .field:has(.rich-text-editor),
  & .rich-text-editor,
  & .rich-text-editor lexxy-editor,
  & .rich-text-editor lexxy-editor .lexxy-editor__content {
    flex: 1 0 auto;
  }

  & form,
  & .field:has(.rich-text-editor),
  & .rich-text-editor,
  & .rich-text-editor lexxy-editor {
    display: flex;
    flex-direction: column;
  }

  & form {
    max-inline-size: none;
    min-inline-size: 0;
  }

  /* On a short viewport the editor keeps a usable height and the page scrolls. */
  & .rich-text-editor lexxy-editor {
    min-block-size: 16rem;
  }
}