/* Per-page comments section. Lives at the bottom of doc pages.
   All colors via theme tokens — no hardcoded hex. */

.cmt-section {
  margin: 32px 0 64px;
  padding: 24px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* Inline placement now lives inside its own .card.cmt-card wrapper, so
 * the section's own card-like chrome would create a nested card. Reset
 * the box-styling for inline; the wrapper card supplies everything. */
.cmt-card .cmt-section--inline {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  /* Flex column so the Discussion toolbar (a button child) stretches to
     full card width, the same way doc-page member-section toolbars do as
     direct flex children of the DaisyUI .card. Without this the toolbar
     sized to its content and the bar looked cut short (the label + count
     clustered left instead of spreading via justify-content). The
     toolbar's negative side margins still bleed it to the card edges. */
  display: flex;
  flex-direction: column;
}
.cmt-count-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

.cmt-empty {
  padding: 16px 0;
  color: var(--text-2);
  font-style: italic;
}

/* Inline placement renders the composer at the BOTTOM, right after the
 * comment list. A modest gap separates the last comment from the "Leave a
 * comment" CTA. The composer is a flex column so the collapsed trigger
 * (inline-flex + align-self:flex-start) sits left-aligned and compact
 * instead of stretching full-width. (Gutter placement puts the composer
 * at the top under its own header, so this is scoped to --inline only.) */
.cmt-section--inline [data-comments-composer] {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}
/* Empty state shouldn't reserve big vertical padding — keep it tight so
 * the "No comments yet" line + compact composer sit close together. */
.cmt-section--inline .cmt-empty {
  padding: 8px 0;
}

/* ─── Collapsed CTA (default state for top-level composer) ──────────── */
/* Compact by default — a small pill, not a full-width bar. It expands to
 * the full-width composer (textarea) only after the user clicks it. */
.cmt-composer-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  align-self: flex-start;
  max-width: 100%;
  margin-bottom: 0;
  padding: 10px 16px;
  background: var(--bg-2) !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: 10px;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.cmt-composer-trigger:hover {
  border-color: var(--accent) !important;
  border-style: solid !important;
  color: var(--text-0);
  background: var(--bg-1) !important;
}
.cmt-composer-trigger svg { color: var(--accent); flex-shrink: 0; }

/* ─── Composer (expanded state — top-level + reply share styles) ────── */
.cmt-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.cmt-composer textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-0);
  outline: none;
  white-space: pre-wrap;
}
.cmt-composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.cmt-composer textarea::placeholder { color: var(--text-3); opacity: 0.7; }

/* Composer header: one row, formatting icons left, Cancel/Post right.
   Kept slim so it reads as part of the editor, not a second card header. */
.cmt-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: -4px; /* tuck toward the editor */
}
.cmt-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
}
.cmt-toolbar-btn:hover { background: var(--bg-3); color: var(--text-0); }
.cmt-toolbar-btn svg { display: block; }
.cmt-tb-glyph { font-family: var(--font-mono); font-size: 13px; line-height: 1; }
.cmt-tb-glyph--h { font-weight: 700; }
.cmt-tb-glyph--b { font-weight: 800; }
.cmt-tb-glyph--i { font-style: italic; font-weight: 600; }
.cmt-toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Compact button variant: see .cmt-btn--bar next to the .cmt-btn base
   rules (it must come AFTER them in source order to win the padding). */

/* The WYSIWYG editor: a contenteditable surface that renders with the
   same .cmt-body rules as posted comments. Focus = slightly lighter gray
   border only, no accent glow (owner call 2026-07-07). No placeholder. */
.cmt-editor {
  min-height: 96px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  cursor: text;
}
.cmt-editor:focus { border-color: var(--border-strong); }

/* Floating link editor (body-level, positioned next to the selection). */
.cmt-link-pop {
  position: absolute;
  z-index: 4000;
  min-width: 280px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
/* display:flex above beats the UA's [hidden]{display:none} — without this
   guard the "closed" popup stays painted (the same trap as the avatar
   fallback and the image chip). */
.cmt-link-pop[hidden] { display: none !important; }
.cmt-link-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.cmt-link-pop-row > span { width: 34px; flex: none; }
.cmt-link-pop-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--text-0);
  outline: none;
}
.cmt-link-pop-row input:focus { border-color: var(--border-strong); }
.cmt-link-pop-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* (Image-attach paperclip + filename chip styles removed 2026-07-07:
   comments no longer take image attachments.) */

.cmt-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong) !important;
  background: var(--bg-2) !important;
  color: var(--text-1);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.cmt-btn:hover { background: var(--bg-3) !important; color: var(--text-0); }
.cmt-btn--primary {
  background: var(--accent) !important;
  color: #1a0e00 !important;
  border-color: var(--accent) !important;
}
.cmt-btn--primary:hover { filter: brightness(1.05); }
.cmt-btn--ghost { background: transparent !important; border-color: transparent !important; color: var(--text-2); }
.cmt-btn--small { font-size: 12px; padding: 6px 12px; }
/* Compact variant sized to sit beside the 26px toolbar icons (composer
   header + link popup). Flex-centered so the label can't sag regardless
   of inherited line-height; AFTER the base rule so its padding wins. */
.cmt-btn--bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
}

/* Comment row + tree. */
.cmt-list { display: flex; flex-direction: column; gap: 14px; }
.cmt-row {
  display: block;
}
/* No depth-based padding — that compounded as you nested and shrunk the
   bubble. Threading is shown by `.cmt-replies` having a left border +
   small indent so each level reads as "child of" without shrinking. */

/* Inline avatar — sits inside the bubble, in the meta row alongside
   the author name. No top-margin since it's part of the meta line. */
.cmt-avatar,
.cmt-avatar-fallback {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50%;
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-0);
  flex-shrink: 0;
}

.cmt-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* compact: byline hugs the body */
  padding: 9px 14px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
  position: relative;
}

/* Per-comment 3-dot kebab in the bubble's top-right corner. Holds
   Edit / Delete (owner) and Report (any authenticated user). The
   primary actions row keeps Like + Reply visible. */
.cmt-kebab {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
}
.cmt-kebab-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border) !important;
  background: var(--bg-1) !important;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.cmt-kebab-btn:hover { color: var(--accent); border-color: var(--accent) !important; }
.cmt-kebab-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 130px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.cmt-kebab-menu[hidden] { display: none; }
.cmt-kebab-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  border-radius: 6px;
}
.cmt-kebab-menu button:hover { background: var(--bg-2) !important; color: var(--text-0); }
.cmt-kebab-menu .cmt-kebab-danger:hover { color: var(--danger, #e57373); }
.cmt-row--pinned .cmt-bubble {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
/* Brief highlight when navigated to via #comment-<id>. The class is
   removed by JS after ~2 seconds so the page returns to its normal
   look once the user notices the target. */
.cmt-row--flash > .cmt-bubble {
  animation: cmt-flash 2s ease-out;
  border-color: var(--accent);
}
@keyframes cmt-flash {
  0%   { background: var(--accent-glow); box-shadow: 0 0 0 4px var(--accent-glow); }
  60%  { background: var(--accent-glow); box-shadow: 0 0 0 4px var(--accent-glow); }
  100% { background: transparent;        box-shadow: 0 0 0 0    transparent;       }
}
/* Comment author meta — 2-column layout: avatar | (name+handle / level+badges).
 * Row 1: display name + grayed @handle inline.
 * Row 2: level pip + worn identity badges (the chips the author picked on
 *        their profile). The posted-at time lives at the bottom-right of the
 *        actions row, not up here. */
.cmt-meta {
  display: flex;
  align-items: center;  /* byline centers on the avatar height */
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.cmt-meta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cmt-meta-name-row {
  display: flex;
  align-items: center;  /* badges are chips: center beats baseline here */
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.25;
}
.cmt-author {
  font-weight: 600;
  color: var(--text-0);
  text-decoration: none;
  font-size: 14px;
}
/* Name stays white on hover (owner call: no orange byline), underline is
   the only affordance that it links to the profile. */
.cmt-author:hover { color: var(--text-0); text-decoration: underline; }
.cmt-author-handle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: none;
  line-height: 1.1;
}
/* No hover treatment: the handle is plain quiet metadata (not a link). */
/* Worn identity badges: inline on the SAME row as name + handle (compact
 * byline; the level pip was retired 2026-07-07). A touch of extra left
 * margin separates them from the handle. The chips themselves reuse the
 * canonical .profile-badge classes (defined site-wide in badges.css) so
 * they look identical to the profile card — including the EF disc,
 * _diamond glow, and camp tints. Do NOT restyle .profile-badge here. */
.cmt-badges {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 6px;
}
/* SIZE-only override: byline badges shrink below the 24px avatar so they
   read as secondary metadata. The chip's LOOK (colors, EF disc, diamond
   glow, camp tints) still comes exclusively from the canonical
   .profile-badge rules in badges.css — do not fork those here. */
.cmt-badges .profile-badge {
  width: 18px;
  height: 18px;
}
.cmt-badges .profile-badge .profile-badge-icon { font-size: 10px; line-height: 1; }

/* Deleted-comment placeholder. Keeps the bubble in the tree so the
   replies retain their structure (no jumping to root level). The
   content reads as deliberately faded so it disappears visually next
   to live comments. */
.cmt-body--deleted {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  font-style: italic;
  color: var(--text-3);
  opacity: 0.75;
}
.cmt-deleted-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmt-deleted-reason {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-3);
  opacity: 0.85;
}

.cmt-edit-marker { color: var(--text-3); font-style: italic; font-size: 12px; }

.cmt-body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-0);
  line-height: 1.6;
  word-wrap: break-word;
}
/* Posted comment text: slight left inset so it clears the bubble edge
   (owner-tuned). Direct-child scope keeps the editor (its own 10px 12px)
   and the deleted placeholder (4px 0) untouched. */
.cmt-bubble > .cmt-body:not(.cmt-editor):not(.cmt-body--deleted) {
  padding: 0 0 0 10px;
}
/* No dead air at the body's edges: whatever element happens to be first
   or last (heading, code block, list, quote), its outer margin goes. */
.cmt-body > :first-child { margin-top: 0 !important; }
.cmt-body > :last-child { margin-bottom: 0 !important; }
.cmt-body p { margin: 0 0 8px; }
.cmt-body p:last-child { margin: 0; }
/* Links (hyperlinks, @mentions, auto-linked URLs): accent orange so they
   read as links (Tailwind's preflight strips underlines + color, which
   left them invisible). Applies inside the WYSIWYG editor too. */
.cmt-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cmt-body a:hover { border-bottom-color: var(--accent); }
/* Mention tokens read slightly heavier than ordinary links. Kill this
   rule set's border-underline for them: notifications.css already gives
   .cmt-mention a text-decoration hover underline, and stacking both drew
   a double underscore. */
.cmt-body a.cmt-mention { font-weight: 600; border-bottom: none; }
.cmt-body a.cmt-mention:hover { border-bottom: none; }
/* Horizontal split line (toolbar hr button). */
.cmt-body hr {
  border: none;
  border-top: 1px solid var(--border-strong);
  margin: 12px 0;
}

/* Headings — Tailwind's preflight resets <h1>..<h6> to inherit, so
   rendered headings would otherwise look identical to body text. Graded
   scale is the .cmt-body default (snippet descriptions reuse this class
   outside the comments widget and keep their hierarchy). */
.cmt-body h1, .cmt-body h2, .cmt-body h3,
.cmt-body h4, .cmt-body h5, .cmt-body h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-0);
  line-height: 1.25;
  margin: 12px 0 6px;
}
.cmt-body h1 { font-size: 20px; }
.cmt-body h2 { font-size: 17px; }
.cmt-body h3 { font-size: 15px; }
.cmt-body h4 { font-size: 14px; font-weight: 600; }
.cmt-body h5,
.cmt-body h6 { font-size: 13px; font-weight: 600; color: var(--text-1); }
.cmt-body h1:first-child, .cmt-body h2:first-child,
.cmt-body h3:first-child, .cmt-body h4:first-child,
.cmt-body h5:first-child, .cmt-body h6:first-child { margin-top: 0; }
/* Inside the COMMENTS widget (and its editor) every heading level renders
   at ONE size (owner call: single headline size in comments), with a
   tighter vertical rhythm than the default. Scoped to .cmt-card so
   snippet descriptions keep the graded scale. */
.cmt-card .cmt-body h1, .cmt-card .cmt-body h2, .cmt-card .cmt-body h3,
.cmt-card .cmt-body h4, .cmt-card .cmt-body h5, .cmt-card .cmt-body h6 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-0);
  margin: 8px 0 4px;
}
.cmt-card .cmt-body pre { margin: 8px 0; }
.cmt-card .cmt-body ul,
.cmt-card .cmt-body ol { margin-bottom: 6px; }
.cmt-body ul,
.cmt-body ol { margin: 0 0 8px 1.4em; padding: 0; }
.cmt-body blockquote {
  margin: 0 0 8px;
  padding: 4px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-2);
}
/* Inline `code` — a proper dark chip so it clearly reads as code against
   the bubble surface. */
.cmt-body code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border-strong);
  padding: 2px 6px;
  border-radius: 5px;
}
/* Fenced code block — distinct from inline. We give it the same dark
   surface the rest of the site uses for `<pre>` so hljs's color tokens
   land on the contrast they were designed for, then bump font-size
   so it's actually readable inside the comment bubble. */
.cmt-body pre {
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.55;
}
.cmt-body pre code,
.cmt-body pre code.hljs {
  background: transparent !important;  /* hljs themes set their own bg — kill it */
  padding: 0;
  border: none;        /* the inline-code chip border must not double-frame */
  border-radius: 0;    /* blocks (the <pre> already carries the frame) */
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 13px;
  display: block;
  white-space: pre;
}

/* Line-number gutter (added by addCodeLineNumbers for multi-line blocks).
 * The <pre> becomes a flex row; the gutter is a sticky left column so the
 * numbers stay pinned while the code scrolls horizontally. Vertical padding
 * moves from the <pre> onto the two children so the gutter background +
 * divider border span the full block height. Font metrics match the code
 * exactly so the numbers line up row-for-row. */
.cmt-body pre.cmt-has-ln {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.cmt-code-gutter {
  flex: 0 0 auto;
  position: sticky;
  left: 0;
  text-align: right;
  white-space: pre;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
  background: var(--bg-0);
  padding: 12px 10px 12px 14px;
  margin-right: 12px;
  border-right: 1px solid var(--border);
  z-index: 1;
}
.cmt-body pre.cmt-has-ln > code,
.cmt-body pre.cmt-has-ln > code.hljs {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px 12px 0;
}

/* ── Code cards ─────────────────────────────────────────────────────
   Every code BLOCK (rendered comments, snippet descriptions, AND the
   composer while typing) is a small "snippet card": traffic-dot header
   bar + language chip + line gutter, matching the code library look.
   Grid layout: the bar spans the full VISIBLE width and never scrolls;
   only the code cell scrolls horizontally. */
.cmt-body pre.cmt-codecard {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0;
  overflow: hidden;
}
.cmt-codecard-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  user-select: none;
}
.cmt-codecard-dots { display: inline-flex; gap: 4px; }
.cmt-codecard-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.cmt-codecard-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 1px 7px;
}
button.cmt-codecard-lang {
  cursor: pointer;
  color: var(--text-2);
  border-color: var(--border);
}
button.cmt-codecard-lang:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* Cell layout under the bar: single-line blocks span both columns;
   numbered blocks put the gutter in col 1 and the code in col 2. The
   code cell owns horizontal scrolling (grid instead of the old flex +
   sticky pattern, so the header bar can never come up short). */
.cmt-body pre.cmt-codecard > code,
.cmt-body pre.cmt-codecard > code.hljs {
  grid-column: 1 / -1;
  padding: 12px 14px;
  overflow-x: auto;
  min-width: 0;
}
.cmt-body pre.cmt-codecard.cmt-has-ln { display: grid; }
.cmt-body pre.cmt-codecard.cmt-has-ln > .cmt-code-gutter {
  grid-column: 1;
  position: static;
  margin-right: 0;
}
.cmt-body pre.cmt-codecard.cmt-has-ln > code,
.cmt-body pre.cmt-codecard.cmt-has-ln > code.hljs {
  grid-column: 2;
  padding: 12px 14px 12px 12px;
}
.cmt-body img { max-width: 100%; border-radius: 6px; margin: 6px 0; }
.cmt-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 6px 0;
  padding: 2px 12px;
  color: var(--text-2);
}

.cmt-image-attach {
  margin-top: 6px;
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
}

.cmt-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
  flex-wrap: wrap;
}
.cmt-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: transparent !important;
  border: 0 !important;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.cmt-action-btn:hover { color: var(--accent); background: var(--bg-1) !important; }
.cmt-action-btn.is-active { color: var(--accent); }

/* Posted-at time, pinned to the bottom-right of the actions row. Muted so
 * it reads as metadata, not an action. `margin-left:auto` pushes it past
 * the Like / Reply chips to the far edge. */
.cmt-time-foot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.cmt-time-foot .cmt-edit-marker { font-size: 11px; }

.cmt-replies { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.cmt-replies[hidden] { display: none; }

/* Show/Hide replies toggle — sits between a comment's actions and its
   nested children. Subtle so it doesn't compete with the primary
   actions row. */
.cmt-replies-toggle {
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 9px;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.cmt-replies-toggle:hover { color: var(--accent); border-color: var(--accent) !important; }

.cmt-error {
  font-size: 12px;
  color: var(--danger);
  font-weight: 500;
}