/*
 * pm-v2-comments — wpDiscuz themed through the design tokens.
 *
 * WHY THIS FILE EXISTS. wpDiscuz ships its own stylesheet
 * (`wpdiscuz-combo.min.css`) with HARDCODED light values: the comment textarea is
 * `#f7f8f9` on `#222`, the primary button is `#55555e`, dividers are `#ccc`, and the
 * muted label is `#666`. None of it reads the site's palette, so in DARK mode the whole
 * comment block stayed a bright white panel with near-black text while every other
 * surface on the page went dark — the exact defect reported.
 *
 * HOW IT IS THEMED. Every rule below paints a wpDiscuz element with a DESIGN TOKEN
 * (`--bg`, `--surface`, `--surface-muted`, `--text`, `--muted`, `--border`, `--primary`)
 * instead of a literal. Because the tokens are already resolved per theme — light, dark,
 * and the visitor's explicit choice — the comments block follows the SITE with no
 * dark-mode block of its own and no duplicated rules. There is no
 * `@media (prefers-color-scheme: dark)` in this file on purpose: if dark mode ever needs
 * a different value, it belongs in tokens.css, not here.
 *
 * SCOPE. Everything is scoped under `#wpdcom` (wpDiscuz' own root id) and inside `.pm-v2`,
 * so these rules cannot reach wpDiscuz' ADMIN screens (which are outside the theme and
 * load their own styles) and cannot leak onto any other surface. Selectors are raised to
 * `#wpdcom` + the plugin class so they out-specify the plugin's bundle without a single
 * `!important` — except where wpDiscuz ships one of its own, which is called out inline.
 *
 * Loaded ONLY on a singular view whose comments are open (see inc/enqueue.php), so a page
 * without a comment form never downloads it.
 */

/* --------------------------------------------------------------- containers -- */

/*
 * THE WRAPPER IS THE BIGGEST WHITE BLOCK. GeneratePress paints `.comments-area` a solid
 * WHITE background (its `separate-containers` layout gives each container its own card).
 * On a dark page that turns the entire comment region into a bright panel. It is reset to
 * the PAGE background here so it reads as part of the article, with the form itself on
 * the `--surface` tone for a subtle step forward.
 *
 * Both wrapper levels are targeted: the outer block GP prints AND the `#comments` /
 * nested `.comments-area` wpDiscuz adds inside it — the live DOM has two, and missing
 * either one leaves a white band.
 */
.pm-v2 .site-main > .comments-area,
.pm-v2 .site-main .comments-area,
.pm-v2 .site-main #comments.comments-area {
	background-color: var(--bg);
	color: var(--text);
}

.pm-v2 #wpdcom,
.pm-v2 #wpdcom .wpd-form-wrap,
.pm-v2 #wpdcom .wpd-thread-list,
.pm-v2 #wpdcom .wpd-secondary-forms-wrapper,
.pm-v2 #wpdcom .wpdiscuz-subscribe-bar {
	background-color: transparent;
	color: var(--text);
}

/* The form head ("Nhận thông báo" / login row) sits on a themed surface with a hairline
   divider, replacing the plugin's `#ccc` bottom border. */
.pm-v2 #wpdcom .wpd-form-head {
	background-color: transparent;
	border-bottom: var(--bw) solid var(--border);
	color: var(--text);
}

.pm-v2 #wpdcom .wpd-sbs-title,
.pm-v2 #wpdcom .wpd-login,
.pm-v2 #wpdcom .wpd-auth,
.pm-v2 #wpdcom .wpd-field-comment,
.pm-v2 #wpdcom .wpd-comment-text {
	color: var(--text);
}

.pm-v2 #wpdcom .wpd-sbs-title,
.pm-v2 #wpdcom .wpd-thread-info .wpdtc,
.pm-v2 #wpdcom .wpd-comment-date,
.pm-v2 #wpdcom .wpd-comment-link,
.pm-v2 #wpdcom .wpd-comment-author,
.pm-v2 #wpdcom .wc-field-submit-label {
	color: var(--muted);
}

/* ------------------------------------------------------------------- links -- */

/*
 * Links inside the comment block follow the theme's ONE link language: a colour change,
 * never an underline. wpDiscuz underlines them by default; that is removed here so a link
 * in a comment behaves exactly like a link in the article body.
 */
.pm-v2 #wpdcom a,
.pm-v2 #wpdcom .wpd-login a {
	color: var(--primary);
	text-decoration: none;
}

.pm-v2 #wpdcom a:hover,
.pm-v2 #wpdcom a:focus-visible {
	color: var(--primary-hover);
	text-decoration: none;
}

/* ---------------------------------------------------------------- textarea -- */

/*
 * THE TEXTAREA IS THE MAIN DEFECT. wpDiscuz paints it `#f7f8f9` on `#222` — legible on a
 * light page, unreadable-on-white against a dark one. It becomes a normal form field on
 * the themed surface with the themed border, and the placeholder follows the muted token.
 *
 * The plugin sets `background` on `.wc_comment` with a plain declaration, so a token value
 * at the same specificity wins by cascade order (this file loads after the plugin bundle);
 * `background-color` + `border` are restated here to be explicit about the intent.
 */
.pm-v2 #wpdcom .wpdiscuz-textarea-wrap {
	border: var(--bw) solid var(--border);
	border-radius: var(--r-sm);
	background-color: var(--surface);
}

.pm-v2 #wpdcom textarea.wc_comment,
.pm-v2 #wpdcom .wc_comment {
	background-color: var(--surface);
	color: var(--text);
	border: 0;
	font-size: var(--fs-body);
}

.pm-v2 #wpdcom textarea.wc_comment::placeholder,
.pm-v2 #wpdcom .wc_comment::placeholder {
	color: var(--muted);
}

/*
 * wpDiscuz' rich editor is QUILL, not a textarea: the "Hãy là người bình luận đầu tiên!"
 * prompt is a `div.ql-editor` whose placeholder is drawn by the plugin's own `::before`
 * pseudo-element with a hardcoded colour. Against the dark surface that colour left the
 * prompt nearly invisible. It is repainted with the muted token so it reads as a
 * placeholder in both themes.
 */
.pm-v2 #wpdcom .ql-editor.ql-blank::before,
.pm-v2 #wpdcom .wpdiscuz-textarea-wrap .ql-editor::before {
	color: var(--muted);
	font-style: normal;
	opacity: 1;
}

.pm-v2 #wpdcom .ql-editor {
	background-color: var(--surface);
	color: var(--text);
}

/* The editor toolbar's own surface + icon colour (Quill draws its own bar). */
.pm-v2 #wpdcom .ql-toolbar,
.pm-v2 #wpdcom .wpd-editor-toolbar {
	background-color: var(--surface);
	border-color: var(--border);
}

.pm-v2 #wpdcom .wpdiscuz-textarea-wrap:focus-within {
	border-color: var(--primary);
}

/* The editor toolbar row sits on the field's own surface, not a white strip. */
.pm-v2 #wpdcom .wpd-editor-toolbar,
.pm-v2 #wpdcom .wpd-editor-buttons-right,
.pm-v2 #wpdcom .wpd-editor-buttons-left {
	background-color: var(--surface);
	border-color: var(--border);
	color: var(--muted);
}

.pm-v2 #wpdcom .wpd-editor-toolbar svg,
.pm-v2 #wpdcom .wpd-editor-toolbar .wpd-editor-button {
	fill: var(--muted);
	color: var(--muted);
}

/* ---------------------------------------------------------------- buttons --- */

/*
 * The primary action and the secondary buttons. wpDiscuz ships `#55555e` white-on-grey;
 * both become the theme's own button vocabulary. The plugin marks the submit colour with
 * an inline style in some builds, so `background-color` is restated at `#wpdcom` depth to
 * win without `!important`.
 */
.pm-v2 #wpdcom .wpd-prim-button,
.pm-v2 #wpdcom input.wpd-prim-button,
.pm-v2 #wpdcom button.wpd-prim-button {
	background-color: var(--primary);
	color: var(--primary-contrast);
	border: var(--bw) solid var(--primary);
	border-radius: var(--r-sm);
	font-weight: var(--fw-semibold);
}

.pm-v2 #wpdcom .wpd-prim-button:hover,
.pm-v2 #wpdcom .wpd-prim-button:focus-visible {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
	color: var(--primary-contrast);
}

.pm-v2 #wpdcom .wpd-button-secondary,
.pm-v2 #wpdcom .wpd-sbs-toggle {
	color: var(--muted);
}

.pm-v2 #wpdcom .wpd-button-secondary:hover,
.pm-v2 #wpdcom .wpd-sbs-toggle:hover {
	color: var(--primary);
}

/* ------------------------------------------------------- comment thread ----- */

.pm-v2 #wpdcom .wpd-comment-wrap,
.pm-v2 #wpdcom .wpd-comment {
	background-color: transparent;
}

.pm-v2 #wpdcom .wpd-comment-footer,
.pm-v2 #wpdcom .wpd-thread-head {
	border-color: var(--border);
}

.pm-v2 #wpdcom .wpd-thread-head .wpdiscuz-sort-buttons {
	border-color: var(--border);
}

/* A reply / nested thread gets the PAGE background so the nesting reads as a step back,
   matching the way the theme separates stacked groups with tone, not borders. */
.pm-v2 #wpdcom .wpd-comment.wpd-reply .wpd-comment-right,
.pm-v2 #wpdcom .wpd-child-comments {
	background-color: var(--surface-muted);
}

/* The subscribe strip and its select control. */
.pm-v2 #wpdcom .wpdiscuz-subscribe-bar,
.pm-v2 #wpdcom select.wpdiscuz_select {
	background-color: var(--surface);
	color: var(--text);
	border-color: var(--border);
}

/* The "0 GÓP Ý" thread counter the theme already styles; keep its rule on-theme. */
.pm-v2 #wpdcom .wpd-thread-info {
	border-color: var(--border);
}

/* ------------------------------------------------------------------ inputs -- */

.pm-v2 #wpdcom input[type="text"],
.pm-v2 #wpdcom input[type="email"],
.pm-v2 #wpdcom input[type="url"],
.pm-v2 #wpdcom select {
	background-color: var(--surface);
	color: var(--text);
	border: var(--bw) solid var(--border);
	border-radius: var(--r-sm);
}

.pm-v2 #wpdcom input::placeholder {
	color: var(--muted);
}

/* ------------------------------------------------------------- avatars ------ */

/* wpDiscuz draws a light ring around avatars; on the dark surface that ring is a bright
   halo. It follows the border token so it disappears into the surface in both themes. */
.pm-v2 #wpdcom .wpd-comment-avatar img,
.pm-v2 #wpdcom .wpd-comment-author-avatar img {
	border-color: var(--border);
}