/*
 * Styles for rendering Action Text content (read-only display).
 * The .lexxy-content class is applied by app/views/layouts/action_text/contents/_content.html.erb
 *
 * Lexxy ships its own base styles (lexxy-content.css, all under :where() so they
 * have zero specificity). Here we only re-skin them with the neo-brutalist tokens
 * from app/assets/tailwind/application.css: first through Lexxy's variables, then
 * with a few targeted overrides. Avoid resetting margins/lists wholesale — that
 * fights Lexxy and causes double indents and stray spacing.
 */

.lexxy-content {
  --lexxy-color-ink: var(--color-ink);
  --lexxy-color-ink-lighter: color-mix(in srgb, var(--color-ink) 20%, transparent);
  --lexxy-color-ink-lightest: var(--color-paper);
  --lexxy-color-link: var(--color-brand);
  --lexxy-color-text-subtle: color-mix(in srgb, var(--color-ink) 60%, transparent);
  --lexxy-color-table-header-bg: var(--color-paper);
  --lexxy-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --lexxy-content-margin: 0.75em;
  --lexxy-radius: 0.375rem;

  color: var(--color-ink);
  line-height: 1.65;
  overflow-wrap: break-word;
}

.lexxy-content > :first-child {
  margin-top: 0;
}

.lexxy-content > :last-child {
  margin-bottom: 0;
}

/* Headings — sizes relative to the surrounding text so they scale with it */
.lexxy-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.25em 0 0.5em;
}

.lexxy-content h1 { font-size: 1.5em; }
.lexxy-content h2 { font-size: 1.25em; }
.lexxy-content h3 { font-size: 1.1em; }
.lexxy-content :is(h4, h5, h6) { font-size: 1em; }

/* Lists — Lexxy handles the indent; we only add rhythm and nested markers */
.lexxy-content li {
  margin-block: 0.25em;
}

.lexxy-content li > p {
  margin: 0;
}

.lexxy-content ul ul { list-style-type: circle; }
.lexxy-content ul ul ul { list-style-type: square; }
.lexxy-content ol ol { list-style-type: lower-alpha; }

.lexxy-content blockquote {
  background-color: var(--color-paper);
  border-left: 4px solid var(--color-ink);
  border-radius: 0 0.5rem 0.5rem 0;
  color: color-mix(in srgb, var(--color-ink) 75%, transparent);
  font-style: normal;
  margin: 1em 0;
  padding: 0.5em 1em;
}

.lexxy-content a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.lexxy-content a:hover {
  color: var(--color-brand-dark);
}

.lexxy-content hr {
  border: 0;
  border-top: 2px solid color-mix(in srgb, var(--color-ink) 15%, transparent);
  inline-size: 100%;
  margin: 1.5em 0;
}

/* Code — inline only (blocks are <pre>, optionally with data-language) */
.lexxy-content :not(pre) > code:not([data-language]) {
  background-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);
  border-radius: 0.25rem;
  font-size: 0.875em;
  padding: 0.1em 0.35em;
}

/* Code — block */
.lexxy-content pre,
.lexxy-content code[data-language] {
  background-color: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: 0.5rem;
  font-size: 0.875em;
  line-height: 1.6;
  margin: 0.75em 0;
  padding: 0.875em 1em;
}

.lexxy-content pre code {
  background: none;
  border: 0;
  font-size: inherit;
  padding: 0;
}

/* Images & attachments */
.lexxy-content img {
  border-radius: 0.5rem;
  height: auto;
  max-width: 100%;
}

/* Tables — wide ones scroll inside their wrapper instead of the page */
.lexxy-content table {
  font-size: 0.9375em;
}

.lexxy-content :is(th, td) {
  border-color: color-mix(in srgb, var(--color-ink) 20%, transparent);
  padding: 0.5em 0.75em;
}

/* Mentions (@usuario) */
.lexxy-content action-text-attachment[content-type^="application/vnd.actiontext"] {
  --lexxy-attachment-bg-color: var(--color-brand-light);
  --lexxy-attachment-text-color: var(--color-brand-dark);

  font-weight: 600;
  padding: 0 0.35em;
}

/* Comment content min-height */
.comment .lexxy-content {
  min-height: 10rem;
}

/* ─── Lexxy editor overrides ──────────────────────────────────────────────── */

/*
 * Fix: the placeholder (::before) has position:absolute with no top/left,
 * so it anchors to <lexxy-editor> (position:relative) which includes the
 * toolbar above the content. Making .lexxy-editor__content the containing
 * block ensures the placeholder aligns exactly with the cursor.
 */
.lexxy-editor__content {
  position: relative;
}

/* ─── Mention prompt menu ─────────────────────────────────────────────────── */

.lexxy-prompt-menu {
  background-color: var(--color-surface);
  border: 2px solid var(--color-ink);
  border-radius: 0.5rem;
  box-shadow: 4px 4px 0 0 var(--color-ink);
  list-style: none;
  margin: 0;
  max-height: 220px;
  min-width: 220px;
  overflow-y: auto;
  padding: 4px;
  z-index: 9999;
}

.lexxy-prompt-menu__item {
  align-items: center;
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  transition: background-color 80ms;
}

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

.lexxy-prompt-menu__item--empty {
  color: color-mix(in srgb, var(--color-ink) 40%, transparent);
  font-size: 0.8125rem;
  padding: 8px 10px;
  cursor: default;
}


lexxy-toolbar {
    border-radius: .5rem .5rem 0rem 0rem !important
}

/* ─── Editor de documentos (documents/_form) ──────────────────────────────── */

/*
 * La hoja (tarjeta de max-w-4xl) tiene un único margen interior compartido
 * por título, barra de formato y cuerpo, así todo queda alineado a la misma
 * línea. La barra de acciones del formulario y la de formato quedan fijas
 * arriba al hacer scroll, una debajo de la otra.
 */
:root {
  --document-sheet-pad: 1.25rem;
  --document-form-bar-height: 4rem;
}

@media (min-width: 640px) {
  :root { --document-sheet-pad: 3rem; }
}

.document-sheet-pad {
  padding-inline: var(--document-sheet-pad);
}

/* Título del documento (input en el form, h1 en show). Sin capa a propósito:
   así gana a la regla global de h1 de application.css. */
.document-title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

@media (min-width: 640px) {
  .document-title { font-size: 2.5rem; }
}

.document-form-bar {
  height: var(--document-form-bar-height);
}

.document-editor lexxy-editor {
  --lexxy-editor-rows: 22lh;
  --lexxy-editor-padding: 0;
  border: 0;
  border-radius: 0 0 0.625rem 0.625rem;
  background-color: transparent;
}

.document-editor lexxy-toolbar {
  position: sticky;
  top: var(--document-form-bar-height);
  z-index: 20;
  padding: 0.375rem calc(var(--document-sheet-pad) - 0.5rem);
  background-color: var(--color-paper);
  border-block: 2px solid var(--color-ink);
  border-radius: 0 !important;
}

.document-editor .lexxy-editor__toolbar-button {
  background-color: transparent;
}

.document-editor .lexxy-editor__toolbar-button:hover:not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

.document-editor .lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.document-editor .lexxy-editor__content {
  padding: 2rem var(--document-sheet-pad) 5rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* Indicador de autoguardado: punto de color + texto */
.autosave-status {
  align-items: center;
  color: color-mix(in srgb, var(--color-ink) 55%, transparent);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.375rem;
  white-space: nowrap;
}

.autosave-status__dot {
  background-color: color-mix(in srgb, var(--color-ink) 25%, transparent);
  border: 1.5px solid var(--color-ink);
  border-radius: 9999px;
  height: 0.625rem;
  width: 0.625rem;
}

.autosave-status[data-state="saved"] .autosave-status__dot { background-color: var(--color-success); }
.autosave-status[data-state="pending"] .autosave-status__dot { background-color: var(--color-accent); }
.autosave-status[data-state="saving"] .autosave-status__dot {
  animation: autosave-pulse 0.9s ease-in-out infinite alternate;
  background-color: var(--color-brand);
}
.autosave-status[data-state="error"] { color: var(--color-danger); }
.autosave-status[data-state="error"] .autosave-status__dot { background-color: var(--color-danger); }

@keyframes autosave-pulse {
  to { opacity: 0.3; }
}

/* Lectura del documento (documents/show) */
.document-reading .lexxy-content {
  font-size: 1.0625rem;
  line-height: 1.75;
}