/**
 * Better Messages - BuddyX dark-mode compatibility.
 *
 * Loaded only when Better_Messages is active (see inc/Styles/Component.php).
 * Better Messages themes itself through its own CSS variables and already
 * ships a dark palette (--bm-*-dark), but BuddyX's [data-bx-mode="dark"] flag
 * never triggers it. Map Better Messages' runtime variables onto its own dark
 * values whenever BuddyX dark mode is on, so the whole messaging UI follows
 * the theme. RGB-triplet fallbacks mirror the plugin's bundled dark values in
 * case a future plugin version renames the -dark variables.
 */
:root[data-bx-mode="dark"] .bp-messages-wrap {
	--bm-bg-color: var(--bm-bg-color-dark, 24, 29, 44);
	--bm-bg-secondary: var(--bm-bg-secondary-dark, 29, 35, 51);
	--bm-text-color: var(--bm-text-color-dark, 255, 255, 255);
	--bm-border-color: var(--bm-border-color-dark, 63, 72, 95);
	--bm-border-secondary-color: var(--bm-border-secondary-color-dark, 63, 72, 95);
	--bm-hover-bg: var(--bm-hover-bg-dark, 28, 35, 56);
}

:root[data-bx-mode="dark"] {
    --main-bm-color-dark: 255, 255, 255;
    --bm-text-color-dark: 255, 255, 255;
    --bm-bg-color-dark: 24, 29, 44;
    --bm-bg-secondary-dark: 29, 35, 51;
    --bm-border-color-dark: 63, 72, 95;
    --bm-border-secondary-color-dark: 63, 72, 95;
    --bm-hover-bg-dark: 28, 35, 56;
    --bm-button-hover-dark: #ffffff24;
    --bm-button-active-dark: #ffffff45;
    --bm-placeholder-dark: 181, 193, 211;
    --bm-scrollbar: hsla(0, 0%, 100%, .1);
    --bm-scrollbar-active: hsla(0, 0%, 100%, .55);
    --bm-scrollbar-focus: hsla(0, 0%, 100%, .7);
    /* --main-bm-color: var(--main-bm-color-dark) !important; */
    --bm-text-color: var(--bm-text-color-dark);
    --bm-bg-color: var(--bm-bg-color-dark);
    --bm-bg-secondary: var(--bm-bg-secondary-dark);
    --bm-border-color: var(--bm-border-color-dark);
    --bm-border-secondary-color: var(--bm-border-secondary-color-dark);
    --bm-hover-bg: var(--bm-hover-bg-dark);
    --bm-placeholder: var(--bm-placeholder-dark);
    --bm-sticky-date-bg-dark: #1d2333;
    --bm-sticky-date-bg: var(--bm-sticky-date-bg-dark);
    --bm-sticky-date-color-dark: #fff;
    --bm-sticky-date-color: var(--bm-sticky-date-color-dark);
    --bm-tooltip-bg-dark: 0, 0, 0;
    --bm-tooltip-color-dark: 255, 255, 255;
    --bm-tooltip-bg: var(--bm-tooltip-bg-dark);
    --bm-tooltip-color: var(--bm-tooltip-color-dark);
    --left-message-bg-color-dark: 232, 232, 232;
    --left-message-bg-color: var(--left-message-bg-color-dark) !important;
    --left-message-text-color-dark: 0, 0, 0;
    --left-message-text-color: var(--left-message-text-color-dark) !important;
    --left-message-nickname-color-dark: 255, 255, 255;
    --left-message-nickname-color: var(--left-message-nickname-color-dark) !important;
    --right-message-bg-color-dark: 64, 78, 114;
    --right-message-bg-color: var(--right-message-bg-color-dark) !important;
    --right-message-text-color-dark: 255, 255, 255;
    --right-message-text-color: var(--right-message-text-color-dark) !important;
    --right-message-nickname-color-dark: 255, 255, 255;
    --right-message-nickname-color: var(--right-message-nickname-color-dark) !important;
    --bm-button-hover: var(--bm-button-hover-dark);
    --bm-button-active: var(--bm-button-active-dark);
}

/* A few fields hardcode #fff !important instead of using the variables above;
 * point them back at the (now dark) Better Messages tokens. */
:root[data-bx-mode="dark"] .bp-messages-wrap input,
:root[data-bx-mode="dark"] .bp-messages-wrap textarea,
:root[data-bx-mode="dark"] .bp-messages-wrap .new-message form > div textarea {
	background-color: rgba(var(--bm-bg-color), 1) !important;
	color: rgba(var(--bm-text-color), 1) !important;
	border-color: rgba(var(--bm-border-secondary-color), 1) !important;
}