/* Resolve Lexxy's palette to Sabha's, in the editor and in rendered messages,
   so everything follows Sabha's light/dark color scheme */
.lexxy-content {
  --lexxy-color-canvas: transparent;
  --lexxy-color-text: var(--color-text);
  --lexxy-color-text-subtle: var(--color-text);
  --lexxy-color-link: var(--color-link);
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-inverted: var(--color-text-reversed);
  --lexxy-color-ink-medium: var(--color-text);
  --lexxy-color-ink-lighter: var(--color-border-darker);
  --lexxy-color-ink-lightest: var(--color-bg);
  --lexxy-color-selected: var(--color-selected, var(--color-bg));
  --lexxy-color-code-bg: var(--color-bg);

  /* Message lines stack without extra block margins */
  --lexxy-content-margin: 0;
}

lexxy-editor {
  &.input {
    --lexxy-editor-padding: 0;

    /* One line high when empty. Lexxy derives this from attr(rows lh, 8lh),
       whose resolution differs between Chrome versions — pin it instead of
       risking the 8-line fallback */
    --lexxy-editor-rows: 1lh;

    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 24px;
  }

  .attachment--content {
    margin: 0;
    display: inline-flex;
  }
}

/* The mentions menu needs a solid surface — the editor's transparent canvas
   would let messages show through it. Sized to stay within the viewport on
   phones and to offer tap-friendly rows. */
.lexxy-prompt-menu {
  --lexxy-color-canvas: var(--color-bg);
  --lexxy-prompt-avatar-size: 1.6em;
  --lexxy-prompt-padding: 0.5ch;

  border: 1px solid var(--color-border-dark);
  border-radius: 0.8em;
  box-shadow: var(--shadow-pop);
  font-size: max(15px, 0.95em);
  max-block-size: min(45vh, 15em);
  max-inline-size: min(34ch, calc(100vw - 2rem));
  min-inline-size: min(22ch, calc(100vw - 2rem));
  overscroll-behavior: contain;

  .lexxy-prompt-menu__item {
    /* Roomier rows that clear the ~44px touch-target guideline */
    min-block-size: 2.6em;
    gap: 0.6em;
    padding: 0.4em 0.6em;

    &[aria-selected],
    &:hover {
      background-color: var(--color-selected);
      color: var(--color-text);
    }
  }

  /* Long names ellipsize instead of wrapping or overflowing the menu */
  .autocomplete__item {
    min-inline-size: 0;
  }

  .autocompletable__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Same for the code block language picker: with a transparent canvas the
   native dropdown renders white-on-white in dark mode */
lexxy-editor lexxy-code-language-picker select {
  background-color: var(--color-bg);
  color: var(--color-text);

  option {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}

/* The toolbar only shows when rich text mode is toggled on (see composer.css) */
lexxy-toolbar {
  /* Wide, airy button spacing like the old Trix toolbar */
  --lexxy-toolbar-gap: 1.3em;

  /* Match the compact size of the old toolbar buttons */
  --lexxy-toolbar-button-size: 1.7em;
  --lexxy-toolbar-icon-size: 1.125em;

  display: none;
  border-block-end: 0;
  min-width: 0;
  z-index: 3;

  /* Tools Sabha doesn't surface in the toolbar: underline, color highlights,
     tables, dividers and undo/redo. Their markup still survives from paste and
     markdown (see ContentFilters::EDITOR_FORMATTING_TAGS). */
  button[name="underline"],
  button[name="table"],
  button[name="divider"],
  button[name="undo"],
  button[name="redo"],
  lexxy-highlight-dropdown {
    display: none !important;
  }

  /* No group separator pipes */
  .lexxy-editor__toolbar-button.lexxy-editor__toolbar-group-end::after {
    display: none;
  }

  /* Dropdown panels: a solid surface with a uniform radius. Lexxy derives the
     panel's radius and gap from --lexxy-toolbar-gap, which Sabha repurposes for
     button spacing */
  .lexxy-editor__toolbar-dropdown [data-dropdown-panel] {
    --lexxy-color-canvas: var(--color-bg);
    --lexxy-color-ink-lightest: var(--color-message-bg);
    --lexxy-color-selected: var(--color-selected);
    --lexxy-color-selected-hover: var(--color-message-bg);

    border: 1px solid var(--color-border-dark);
    border-radius: 0.5em;
    gap: 0.25em;
    padding: 0.25em;
  }

  .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button[aria-expanded="true"] {
    border-radius: var(--lexxy-radius);
  }
}

/* Attachment markup contains formatting whitespace that must not turn into
   line breaks under the editor's white-space: pre-wrap */
lexxy-editor action-text-attachment {
  white-space: normal;
}

action-text-attachment[content-type~="application/vnd.sabha.mention"] {
  display: inline-flex;
  margin: 0;
  padding: 0;
  position: relative;
}

action-text-attachment[content-type~="application/vnd.actiontext.opengraph-embed"] {
  lexxy-editor & {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  /* No selection background — it peeks through the card's rounded corners.
     The lexxy-editor prefix out-specifies Lexxy's own selection rule. */
  lexxy-editor &.node--selected {
    --lexxy-attachment-bg-color: transparent;
  }

  /* A prominent remove button on the card's top edge, horizontally centered.
     The lexxy-editor prefix out-specifies Lexxy's own placement rules. */
  lexxy-editor & lexxy-node-delete-button {
    inset-block-start: 0;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, -50%);

    .lexxy-floating-controls__group {
      --button-size: 2.2em;

      background-color: var(--color-negative);
      border-radius: 50%;
      color: white;
    }
  }
}

.lexxy-content {
  pre {
    background-color: var(--color-bg) !important;
    border-radius: 0.5em;
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.8rem !important;
    margin: 0 !important;
    padding: 1em !important;
    white-space: pre-wrap !important;
    word-wrap: break-word;
  }

  --blockquote-border: var(--inline-space-half);
  --blockquote-padding: 1.5ch;
  --blockquote-margin: var(--inline-space);

  blockquote {
    border: 0 solid var(--color-border-darker) !important;
    border-inline-start-width: var(--blockquote-border) !important;
    font-style: normal;
    margin: 0 var(--blockquote-margin) !important;
    padding-inline-start: var(--blockquote-padding) !important;
  }

  cite {
    display: block;
    margin-inline-start: calc(var(--blockquote-padding));
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;

    &::before {
      content: "— ";
      color: var(--color-border-darker);
    }
  }

  a:not([class]) {
    color: var(--color-link);
  }

  ul,
  ol {
    margin: 0 !important;
    padding: 0 !important;
  }

  li {
    margin: 0 0 0 var(--inline-space-double) !important;
    padding: 0 !important;
  }

  h1 {
    font-size: 1.5rem !important;
    margin: 0.75em 0 0.25em;
  }

  h2 {
    font-size: 1.25rem !important;
    margin: 0.5em 0 0.25em;
  }

  h1:first-child,
  h2:first-child {
    margin-block-start: 0;
  }

  /* Pasted or markdown tables (the toolbar hides its own table button, but the
     markup still survives sanitization) render as a simple bordered grid. */
  table {
    border-collapse: collapse;
    margin: var(--inline-space) 0;
    max-inline-size: 100%;
    overflow-x: auto;
  }

  th,
  td {
    border: 1px solid var(--color-border-dark);
    padding: 0.35em 0.6em;
    text-align: start;
  }

  th {
    background-color: var(--color-message-bg);
    font-weight: 600;
  }
}