/*
 * Rich text styles for the Lexical-based inline editor and persisted Action Text content.
 */

.lexical-inline-editor {
  background: var(--surface-section, var(--surface-bg));
  border-radius: 8px;
  padding: var(--space-2);
}

.inline-edit-form-shell {
  background: var(--surface-section, var(--surface-bg));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 0 var(--space-3) 0;
}

/* Markdown Editor */
.markdown-editor-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

@media (min-width: 768px) {
  .markdown-editor-wrapper {
    flex-direction: row;
    align-items: stretch;
  }

  .markdown-editor-wrapper > .markdown-editor-textarea,
  .markdown-editor-wrapper > .markdown-preview {
    flex: 1 1 0;
    min-width: 0;
  }
}

.markdown-editor-textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  background: var(--surface-section, var(--surface-bg));
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.markdown-editor-textarea:focus {
  border-color: var(--color-active);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-active) 15%, transparent);
}

.markdown-preview {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  background: var(--surface-btn, var(--surface-bg));
  min-height: 2rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.markdown-preview:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}

.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 {
  margin: 0 0 var(--space-2) 0;
}

.markdown-preview ul, .markdown-preview ol {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.markdown-preview blockquote {
  border-left: 3px solid var(--border-color);
  margin: 0 0 0.75rem 0;
  padding-left: 0.75rem;
  color: var(--text-muted);
}

.markdown-preview table {
  border-collapse: collapse;
  margin: 0 0 0.75rem 0;
}

.markdown-preview th, .markdown-preview td {
  border: 1px solid var(--border-color);
  padding: 0.35rem 0.6rem;
}

.markdown-preview img {
  max-width: 100%;
  height: auto;
}

.lexical-editor-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lexical-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.lexical-toolbar-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.lexical-toolbar-color__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 30px;
}

.lexical-toolbar-color__swatch {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-1);
  box-sizing: border-box;
  display: inline-block;
}

.lexical-toolbar-color__popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  min-width: 180px;
}

.lexical-toolbar-color__tokens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}

.lexical-toolbar-color__token-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s var(--ease-out-2);
}

.lexical-toolbar-color__token-btn:hover {
  transform: scale(1.15);
  border-color: var(--color-active);
}

.lexical-toolbar-color__token-btn.active {
  box-shadow: 0 0 0 2px var(--color-active);
}

.lexical-toolbar-color__custom-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-2);
}

.lexical-toolbar-color__popover input[type="color"] {
  appearance: none;
  cursor: pointer;
  border: none;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  background: transparent;
  flex-shrink: 0;
}

.lexical-toolbar-btn--small {
  min-width: auto;
  height: 24px;
  padding: 0 var(--space-1);
  font-size: var(--text-00);
}

.lexical-toolbar-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-0);
  font-weight: var(--weight-6);
  line-height: 1;
  height: 30px;
  min-width: 30px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease-out-2), color 0.15s var(--ease-out-2), border-color 0.15s var(--ease-out-2);
}

.lexical-toolbar-btn:hover,
.lexical-toolbar-btn:focus-visible {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
  outline: none;
}

.lexical-toolbar-btn.active {
  background: var(--color-active);
  border-color: var(--color-accent-border);
  color: var(--color-accent-text);
}

.lexical-toolbar-btn:disabled {
  opacity: 0.4;
  color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.lexical-toolbar-separator {
  align-self: stretch;
  border-left: 1px solid var(--border-color);
  margin-inline: var(--space-1);
}

.lexical-editor-inner {
  position: relative;
}

.lexical-content-editable {
  min-height: 6rem;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.lexical-placeholder {
  color: var(--text-muted);
  left: 0.75rem;
  pointer-events: none;
  position: absolute;
  top: 0.6rem;
}

/* Tables: editor theme classes plus the matching display tags, mirroring the
   pattern used for the other .lexical-* rules below. */
.lexical-table-wrapper {
  overflow-x: auto;
  margin: 0.75rem 0;
}

.lexical-table,
.creative-content table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0.75rem 0;
}

.lexical-table-cell,
.creative-content th,
.creative-content td {
  border: 1px solid var(--border-color);
  padding: 0.35rem 0.5rem;
  min-width: 4.5rem;
  vertical-align: top;
  text-align: start;
  position: relative;
  word-break: break-word;
}

.lexical-table-cell-header,
.creative-content th {
  background-color: var(--surface-hover);
  font-weight: var(--weight-6);
}

.lexical-table-selected {
  outline: 2px solid var(--color-link);
  outline-offset: -1px;
}

.lexical-table-selection *::selection {
  background-color: transparent;
}

/* Cell-boundary add-row / add-column buttons (portaled to <body>). */
.lexical-table-add-rows,
.lexical-table-add-columns {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--border-color);
  background-color: var(--surface-section);
  cursor: pointer;
  padding: 0;
}

.lexical-table-add-rows::after,
.lexical-table-add-columns::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
}

.lexical-table-add-rows:hover,
.lexical-table-add-columns:hover {
  background-color: var(--surface-hover);
}

/* Cell-gutter delete-row / delete-column buttons. Shown on cell hover in the
   hovered row's left gutter / column's top gutter (mousemove-driven, same proven
   mechanism as the "+" buttons — no focus/selection dependency). */
.lexical-table-delete-rows,
.lexical-table-delete-columns {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--border-color);
  background-color: var(--surface-section);
  cursor: pointer;
  padding: 0;
}

.lexical-table-delete-rows::after,
.lexical-table-delete-columns::after {
  content: "×";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
}

.lexical-table-delete-rows:hover,
.lexical-table-delete-columns:hover {
  background-color: var(--danger-surface, var(--surface-hover));
  color: var(--danger-text, var(--text-primary));
}

/* The .lexical-* classes are the editor theme (contenteditable). Markdown is now
   the canonical persisted/displayed form, so .creative-content renders plain
   semantic tags without those classes — mirror each rule onto the matching
   element so the display view matches the editor. .lexical-* kept for the
   editor and for legacy class-bearing HTML saved before the markdown switch.
   .creative-title-content is the title (h1) display of the same description HTML,
   so it needs the identical mirror — otherwise a markdown title renders a plain
   <p> with the browser-default margin and the single-line title style breaks. */
.lexical-paragraph,
.creative-content p,
.creative-title-content p {
  margin: 0 0 0 0;
}

.lexical-heading-h1,
.lexical-heading-h2,
.lexical-heading-h3,
.creative-content h1,
.creative-content h2,
.creative-content h3,
.creative-title-content h1,
.creative-title-content h2,
.creative-title-content h3 {
  font-weight: var(--weight-6);
  margin: 0 0 var(--space-2) 0;
}

.lexical-heading-h1,
.creative-content h1,
.creative-title-content h1 {
  font-size: 1.35rem;
}

.lexical-heading-h2,
.creative-content h2,
.creative-title-content h2 {
  font-size: 1.2rem;
}

.lexical-heading-h3,
.creative-content h3,
.creative-title-content h3 {
  font-size: 1.1rem;
}

.lexical-quote,
.creative-content blockquote,
.creative-title-content blockquote {
  border-left: var(--space-1) solid var(--border-color);
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
  padding-left: 0.75rem;
}

.lexical-list-ul,
.lexical-list-ol,
.creative-content ul,
.creative-content ol,
.creative-title-content ul,
.creative-title-content ol {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.lexical-list-item,
.creative-content li,
.creative-title-content li {
  margin: 0.35rem 0;
}

/* The wrapper <li> Lexical emits for a nested list holds no text of its own;
   hiding its marker prevents a stray bullet from appearing above the sub-list. */
.lexical-nested-list-item {
  list-style-type: none;
}

/* Content links only — the clickable creative-row anchor is an ancestor of
   .creative-content, not a descendant, so this never restyles the row wrapper.
   a[download] is excluded: attachment chips carry their own .lexical-attachment style. */
.lexical-link,
.creative-content a:not([download]),
.creative-title-content a:not([download]) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.lexical-text-bold,
.creative-content strong,
.creative-content b,
.creative-title-content strong,
.creative-title-content b {
  font-weight: var(--weight-6);
}

.lexical-text-italic,
.creative-content em,
.creative-content i,
.creative-title-content em,
.creative-title-content i {
  font-style: italic;
}

.lexical-text-underline,
.creative-content u,
.creative-title-content u {
  text-decoration: underline;
}

.lexical-text-strike,
.creative-content s,
.creative-content del,
.creative-title-content s,
.creative-title-content del {
  text-decoration: line-through;
}

.lexical-text-code {
  background: rgba(135, 143, 161, 0.15);
  border-radius: var(--radius-1);
  font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  padding: 0.1em 0.3em;
}

/* Match the rendered/preview/comment code-block container in code_highlight.css
 * (.creative-content pre et al.) exactly — same font, size, line-height, padding,
 * border — so a code block looks identical in the editor and every rendered surface.
 * Token colors are already shared via the global `.lexical-token-*` rules; this
 * aligns the box so edit mode and view mode no longer diverge in font/size. */
.lexical-code-block {
  display: block;
  background: var(--color-code-bg);
  border: var(--border-1) solid var(--border-color);
  border-radius: var(--radius-2);
  color: var(--color-code-text);
  font-family: var(--font-mono);
  font-size: var(--text-0);
  line-height: var(--leading-3);
  margin: var(--space-2) 0;
  overflow-x: auto;
  padding: var(--space-2) var(--space-3);
  white-space: pre;
}

.lexical-code-block span {
  background: transparent;
  border: 0;
}

.lexical-code-block code {
  display: block;
  white-space: inherit;
}

/*
 * Code block syntax highlighting inside the Lexical editor.
 *
 * The editor tokenizes code with Prism (@lexical/code) and tags each token
 * with a `.lexical-token-*` class, while the persisted/rendered creative is
 * highlighted with highlight.js (`.hljs-*`, see code_highlight.css). To keep
 * the editing view identical to the rendered view, both surfaces share the
 * single GitHub-style palette defined as `--syntax-*` in code_highlight.css
 * (loaded alongside this sheet via collavre_stylesheets). Each Prism token
 * below maps to the same `--syntax-*` color its highlight.js equivalent uses,
 * so light/dark/auto themes stay in sync with one source of truth — no
 * duplicate `--lexical-token-*` variables to drift.
 */
.lexical-token-comment,
.lexical-token-prolog,
.lexical-token-doctype,
.lexical-token-cdata {
  color: var(--syntax-comment);
  font-style: italic;
}

.lexical-token-keyword,
.lexical-token-atrule,
.lexical-token-namespace {
  color: var(--syntax-keyword);
}

.lexical-token-string,
.lexical-token-char,
.lexical-token-url {
  color: var(--syntax-string);
}

.lexical-token-number,
.lexical-token-boolean,
.lexical-token-constant,
.lexical-token-symbol {
  color: var(--syntax-number);
}

.lexical-token-builtin {
  color: var(--syntax-builtin);
}

.lexical-token-function,
.lexical-token-class,
.lexical-token-classname {
  color: var(--syntax-title);
}

.lexical-token-attr,
.lexical-token-property {
  color: var(--syntax-attr);
}

.lexical-token-variable {
  color: var(--syntax-variable);
}

.lexical-token-regex {
  color: var(--syntax-regexp);
}

.lexical-token-tag {
  color: var(--syntax-tag);
}

.lexical-token-selector {
  color: var(--syntax-selector);
}

/* highlight.js renders `.hljs-meta` (CSS !important) with color only, no
   bold — match that so the editor doesn't diverge from the rendered view. */
.lexical-token-important {
  color: var(--syntax-meta);
}

/* highlight.js leaves operators and punctuation at the default code color;
   match that here instead of the old custom operator hue. */
.lexical-token-punctuation,
.lexical-token-operator,
.lexical-token-entity {
  color: var(--color-code-text);
}

.lexical-token-deleted {
  color: var(--syntax-deletion-text);
  background: var(--syntax-deletion-bg);
}

.lexical-token-inserted {
  color: var(--syntax-addition-text);
  background: var(--syntax-addition-bg);
}

.lexical-attachment {
  position: relative;
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-section);
  box-shadow: var(--shadow-1);
}

.lexical-attachment figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lexical-attachment figure img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

.lexical-attachment.is-selected {
  border-color: var(--color-active);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-active) 20%, transparent);
}

.lexical-attachment__remove {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  border: 0;
  background: rgba(15, 23, 42, 0.75);
  color: #fff; /* stylelint-disable-line color-no-hex -- white on dark overlay */
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-round);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 0.95rem;
  line-height: 1;
}

.lexical-attachment:hover .lexical-attachment__remove,
.lexical-attachment.is-selected .lexical-attachment__remove {
  opacity: 1;
}

.lexical-attachment__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  color: #fff; /* stylelint-disable-line color-no-hex -- white on dark overlay */
  font-size: 0.9rem;
  font-weight: var(--weight-5);
}

.lexical-attachment__overlay--error {
  background: rgba(220, 38, 38, 0.75);
}

.lexical-attachment__resize-handle {
  display: none;
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: var(--space-3);
  height: var(--space-3);
  border-right: 2px solid var(--color-active);
  border-bottom: 2px solid var(--color-active);
  cursor: nwse-resize;
  opacity: 0.6;
}

.lexical-attachment__resize-handle:hover {
  opacity: 1;
}

.lexical-attachment--image .lexical-attachment__resize-handle {
  display: block;
}

.lexical-attachment__image-placeholder {
  width: 100%;
  padding-bottom: 56%;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,
      rgba(148, 163, 184, 0.25) 0,
      rgba(148, 163, 184, 0.25) 10px,
      rgba(148, 163, 184, 0.35) 10px,
      rgba(148, 163, 184, 0.35) 20px);
  position: relative;
}

.lexical-attachment__image-placeholder::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: var(--radius-round);
  border: 2px dashed rgba(100, 116, 139, 0.45);
}

.lexical-attachment__caption-input {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  padding: var(--space-2) 0.6rem;
  font-size: 0.9rem;
  background: var(--surface-section);
  color: inherit;
}

.lexical-attachment__caption-input:focus {
  outline: none;
  border-color: var(--color-active);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-active) 15%, transparent);
}

.lexical-attachment__caption-size {
  margin-left: var(--space-2);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.lexical-attachment__file {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.lexical-attachment__file-icon {
  font-size: 1.6rem;
}

.lexical-attachment__file-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lexical-attachment__file-name {
  font-weight: var(--weight-6);
  color: inherit;
  text-decoration: none;
}

.lexical-attachment__file-name:hover,
.lexical-attachment__file-name:focus-visible {
  text-decoration: underline;
}

.lexical-attachment__file-size {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/*
 * Persisted Action Text content retains the historical .trix-content class.
 */
.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid var(--border-color);
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: var(--surface-btn);
  color: var(--text-primary);
  overflow-x: auto;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
}

.trix-content .attachment__caption .attachment__name+.attachment__size::before {
  content: " \2022 ";
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: var(--text-muted);
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: var(--text-primary);
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

/* ── Lexical Image Resizer ── */

.lexical-image-container {
  position: relative;
  display: inline-block;
  cursor: default;
  user-select: none;
  line-height: 0;
}

.lexical-image-container img {
  display: block;
}

.lexical-image-selected {
  outline: 2px solid var(--color-active, #3b82f6);
  outline-offset: 2px;
  border-radius: var(--radius-1, 2px);
}

.lexical-image-resizing {
  cursor: nwse-resize;
}

.lexical-image-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--surface-bg, #fff);
  border: 2px solid var(--color-active, #3b82f6);
  border-radius: var(--radius-1, 2px);
  z-index: 2;
  box-sizing: border-box;
}

.lexical-image-handle--nw {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}

.lexical-image-handle--ne {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}

.lexical-image-handle--sw {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}

.lexical-image-handle--se {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}