/* Lexxy (Action Text editor) in the app's own colours. Lexxy styles itself
   through --lexxy-* variables; pointing them at the daisyUI theme tokens means
   the editor and rendered messages follow light/dark mode with the rest of
   the app, with no separate dark palette to maintain. */
:root,
[data-theme] {
  --lexxy-color-ink: var(--color-base-content);
  --lexxy-color-ink-medium: color-mix(in oklab, var(--color-base-content) 72%, transparent);
  --lexxy-color-ink-light: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  --lexxy-color-ink-lighter: var(--color-base-300);
  --lexxy-color-ink-lightest: var(--color-base-200);
  --lexxy-color-ink-inverted: var(--color-base-100);

  --lexxy-color-accent-dark: var(--color-primary);
  --lexxy-color-accent-medium: color-mix(in oklab, var(--color-primary) 60%, var(--color-base-100));
  --lexxy-color-accent-light: color-mix(in oklab, var(--color-primary) 25%, var(--color-base-100));
  --lexxy-color-accent-lightest: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));

  --lexxy-color-canvas: var(--color-base-100);
  --lexxy-color-link: var(--color-secondary);
  --lexxy-focus-ring-color: var(--color-secondary);

  --lexxy-font-base: inherit;
}

/* The editor inside a reply box: a bordered field like the app's inputs. */
lexxy-editor {
  display: block;
  border: 1px solid var(--color-base-300);
  border-radius: 0.75rem;
  background: var(--color-base-100);
  font-size: 14px;
}
lexxy-editor:focus-within {
  border-color: color-mix(in oklab, var(--color-secondary) 60%, var(--color-base-300));
}
lexxy-editor .lexxy-editor__content {
  min-height: 6rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}

/* Rendered messages sit in coloured chat bubbles: keep their text, links and
   quote rules in the bubble's own ink rather than Lexxy's page colours. */
.message-content .lexxy-content {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.message-content .lexxy-content > :first-child { margin-top: 0; }
.message-content .lexxy-content > :last-child { margin-bottom: 0; }
.message-content .lexxy-content a { color: inherit; text-decoration: underline; }
.message-content .lexxy-content blockquote { border-color: currentColor; opacity: 0.85; }