/* richtext.css — the Quill editor, wearing the app's theme.
   ---------------------------------------------------------------------------
   Loaded LAST, after quill.snow.css and quill.mention.css. That order is the
   whole point: those two hardcode light colours in single-class selectors
   (.mention, .ql-mention-list-container), so an override in core.css — which is
   loaded first — would lose every tie. Winning by escalating the specificity of
   each selector instead is unreadable six months later.

   The editor surface itself used to carry an inline
   "background: white; color: black", which no stylesheet could reach at all.
   That is gone from RichText.php; everything below is what replaces it.
   --------------------------------------------------------------------------- */

.rich-text-editor,
.rich-text-container .ql-container {
  background-color: var(--panel);
  color: var(--text);
}

.rich-text-container .ql-container,
.rich-text-container .ql-toolbar {
  border-color: var(--border-strong);
}

.rich-text-container .ql-editor {
  color: var(--text);
}

/* Quill's placeholder is an ::before on .ql-editor with a hardcoded grey. */
.rich-text-container .ql-editor.ql-blank::before {
  color: var(--muted);
  font-style: normal;
}

/* Toolbar glyphs are inline SVG whose stroke and fill come from the stylesheet. */
.rich-text-container .ql-snow .ql-stroke { stroke: var(--text); }
.rich-text-container .ql-snow .ql-fill { fill: var(--text); }
.rich-text-container .ql-snow .ql-picker { color: var(--text); }
.rich-text-container .ql-snow .ql-picker-options {
  background-color: var(--panel);
  border-color: var(--border-strong);
}

/* The @mention dropdown. QuillMention appends it outside .rich-text-container,
   so these cannot be scoped to it — being last is what makes them apply. */
.ql-mention-list-container {
  background-color: var(--panel);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.ql-mention-list-item { color: var(--text); }
.ql-mention-list-item.selected {
  background-color: color-mix(in srgb, var(--brand) 16%, var(--panel));
  color: var(--text);
}

/* A mention inside a saved comment or description.

   Also drops the fixed "width: 65px; height: 24px" from quill.mention.css: that
   is a hard size on an inline span, so any name wider than 65px was clipped. */
.mention {
  width: auto;
  height: auto;
  display: inline;
  background-color: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0 3px;
}

/* Rendered comment bodies use .ql-editor outside an editor, so they must not
   inherit the editor's own min-height or padding. */
.comments-list .ql-editor,
.timeline .ql-editor {
  padding: 0;
  min-height: 0;
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Comment bubbles
   ---------------------------------------------------------------------------
   Comment.php asked for bg-brand-100 and bg-white, and neither had a rule in any
   loaded stylesheet — so every bubble rendered with no background, which is also
   why a deleted comment was indistinguishable from a live one: its .deleted class
   had no rule either.
   --------------------------------------------------------------------------- */

.conversation-single { max-width: 100%; }

.comment-content {
  min-width: 0;          /* so a long unbroken word cannot widen the thread */
  max-width: 46rem;
}

.comment {
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Mine: tinted with the brand, tail on the bottom-left. */
.comment.comment-mine {
  background-color: color-mix(in srgb, var(--brand) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  border-bottom-left-radius: 0;
}

/* Theirs: a quiet step off the panel, tail on the bottom-right. */
.comment.comment-theirs {
  background-color: var(--soft);
  border: 1px solid var(--border);
  border-bottom-right-radius: 0;
}

/* A deleted comment. Deliberately unlike either of the above: no fill, a dashed
   outline, muted italic text and no tail — it is a placeholder where something
   used to be, not a message. The class wins over the two above because it is
   listed after them and carries the same specificity. */
.comment.comment-deleted,
.comment.comment-deleted.comment-mine,
.comment.comment-deleted.comment-theirs {
  background-color: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--muted);
  font-style: italic;
  opacity: .75;
}

/* The author's name on a deleted comment stays legible but recedes. */
.comment.comment-deleted .title {
  font-weight: 400;
  opacity: .6;
}

.comment.comment-deleted .ql-editor { color: var(--muted); }