.alma-comments {
  --alma-surface: #f3f0ea;
  --alma-inset: #faf8f4;
  --alma-border: #d1cbc0;
  --alma-hover: #e6e2d8;
  --alma-text: #121316;
  --alma-muted: rgb(18 19 22 / .62);
  --alma-accent: #ffaa00;
  --alma-on-accent: #121316;
  --alma-focus: #121316;
  --alma-link: #0a7d68;
  --alma-up: #d98200;
  --alma-down: #a855f7;
  color: var(--alma-text);
}
.alma-comments[data-theme="dark"] {
  --alma-surface: #1a1c21;
  --alma-inset: #121316;
  --alma-border: #282b33;
  --alma-hover: #282b33;
  --alma-text: #e6e2dd;
  --alma-muted: rgb(230 226 221 / .62);
  --alma-focus: #00ffcc;
  --alma-link: #00ffcc;
  --alma-up: #ffaa00;
}
/* .alma-comments :is(input, select, button, [contenteditable]) { color: var(--alma-text); font-family: inherit; } */
/* .alma-comments button[type="submit"] { color: var(--alma-on-accent); } */
.alma-comments button[type="submit"][disabled] { opacity: 0.6; }
.alma-comments select option { background: var(--alma-inset); color: var(--alma-text); }

/* Content rendered from user HTML (no Tailwind classes available inside it). */
.alma-content > :first-child { margin-top: 0; }
.alma-content blockquote { margin: .5rem 0; padding-inline-start: .75rem; border-inline-start: 3px solid var(--alma-accent); color: var(--alma-muted); }
.alma-content ul, .alma-content ol { margin: .5rem 0; padding-inline-start: 1.25rem; }
.alma-content ul { list-style: disc; }
.alma-content ol { list-style: decimal; }
.alma-content .spoiler { padding: 0 .25rem; border-radius: .25rem; background: var(--alma-border); }

/* Spoilers stay readable in the editor and without JS; hidden only once JS can reveal them. */
.is-js [data-body] .spoiler { cursor: pointer; }
.is-js [data-body] .spoiler:not([aria-expanded="true"]),
.is-js [data-body] .spoiler:not([aria-expanded="true"]) * { color: transparent; user-select: none; }
.is-js [data-body] .spoiler:focus-visible { outline: 2px solid var(--alma-focus); outline-offset: 2px; }

/* Editor */
.alma-editor { min-height: 5rem; outline: none; color: var(--alma-text); }
.alma-editor:empty::before { content: attr(data-placeholder); color: var(--alma-muted); pointer-events: none; }

/* Pressed / active states */
[data-cmd][aria-pressed="true"] { background: var(--alma-hover); color: var(--alma-link); }
[data-value="1"][aria-pressed="true"] { color: var(--alma-up); }
[data-value="-1"][aria-pressed="true"] { color: var(--alma-down); }

/* Loading: any element with aria-busy dims; buttons marked data-spinner also get a spinner. */
[aria-busy="true"] { opacity: .6; cursor: progress; }
[data-spinner][aria-busy="true"]::after {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-inline-start: .5rem;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: alma-spin .6s linear infinite;
}
@keyframes alma-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-spinner][aria-busy="true"]::after { animation-duration: 1.6s; } }

/* Built-in toast (replaced if you handle the alma-comments:notify event) */
[data-alma-toast] {
  position: fixed; inset-inline: 0; bottom: 1.5rem; z-index: 9999; margin-inline: auto;
  width: max-content; max-width: 90vw; padding: .6rem 1rem; border-radius: .75rem;
  background: #121316; border: 1px solid #282b33; color: #e6e2dd; font: 14px "Vazirmatn", sans-serif;
}
[data-alma-toast][data-type="error"] { border-color: #a855f7; }
[data-alma-toast][data-type="success"] { border-color: #00ffcc; }
[data-alma-toast][hidden] { display: none; }


/* Dialogs (report + thread) */
.alma-dialog {
  margin: auto; width: min(26rem, 92vw); max-height: 85vh; padding: 1rem;
  border: 1px solid var(--alma-border); border-radius: 1rem;
  background: var(--alma-surface); color: var(--alma-text);
}
.alma-dialog-wide { width: min(44rem, 94vw); }
.alma-dialog::backdrop { background: rgb(0 0 0 / .55); }

/* Linked comment highlight (native #comment-N and the thread modal) */
.alma-comments li:target > [data-comment],
.alma-comments li[data-target] > [data-comment] { background: var(--alma-hover); border-radius: .75rem; padding-inline: .5rem; }