/*
 * LOUDmusic Better Messages bridge — Fluent Community portal only.
 * Maps --bm-* tokens to the same palette as loudmusic-portal.css / --fcom-*.
 */

/* Light mode (portal) */
body.bm-messages-light:has(.fcom_wrap) {
    --main-bm-color: 30, 115, 189;
    --bm-button-bg: 30, 115, 189;
    --bm-button-color: 255, 255, 255;

    --bm-bg-color: 255, 255, 255;
    --bm-bg-secondary: 245, 246, 248;
    --bm-hover-bg: 238, 242, 247;

    --bm-border-color: 229, 231, 235;
    --bm-border-secondary-color: 203, 213, 225;
    --bm-border-active: 148, 163, 184;

    --bm-text-color: 15, 23, 42;
    --bm-placeholder: 148, 163, 184;

    --bm-mention-bg: 238, 242, 247;
    --bm-mention-color: 15, 23, 42;

    --left-message-bg-color: 232, 235, 240;
    --left-message-text-color: 15, 23, 42;
    --left-message-nickname-color: 71, 85, 105;

    --right-message-bg-color: 30, 115, 189;
    --right-message-text-color: 255, 255, 255;
    --right-message-nickname-color: 30, 115, 189;

    --bm-border-radius: 8px;
    --bm-message-border-radius: 12px;
    --bm-avatar-radius: 8px;
    --bm-date-radius: 8px;
    --bm-widgets-button-radius: 8px;

    --main-bm-border-color: #e5e7eb;
    --bm-button-hover: rgba(15, 23, 42, 0.06);
    --bm-button-active: rgba(15, 23, 42, 0.1);

    --bm-sticky-date-bg: #0f172a;
    --bm-sticky-date-color: #ffffff;
}

/* Dark mode (portal) — neutral navy surfaces; blue reserved for buttons/actions */
body.bm-messages-dark:has(.fcom_wrap) {
    --main-bm-color-dark: 153, 160, 174;
    --main-bm-color: 153, 160, 174;
    --bm-button-bg: 30, 115, 189;

    --bm-bg-color-dark: 11, 13, 27;
    --bm-bg-secondary-dark: 17, 20, 35;
    --bm-hover-bg-dark: 15, 22, 41;

    --bm-border-color-dark: 26, 35, 50;
    --bm-border-secondary-color-dark: 26, 35, 50;

    --bm-text-color-dark: 255, 255, 255;
    --bm-placeholder-dark: 107, 114, 128;

    --left-message-bg-color-dark: 25, 27, 46;
    --left-message-text-color-dark: 255, 255, 255;
    --left-message-nickname-color-dark: 153, 160, 174;

    --right-message-bg-color-dark: 30, 33, 52;
    --right-message-text-color-dark: 255, 255, 255;
    --right-message-nickname-color-dark: 153, 160, 174;

    --bm-sticky-date-bg-dark: #191B2E;
    --bm-sticky-date-color-dark: #ffffff;

    --bm-button-hover-dark: rgba(255, 255, 255, 0.06);
    --bm-button-active-dark: rgba(255, 255, 255, 0.1);

    --bm-bg-color: var(--bm-bg-color-dark);
    --bm-bg-secondary: var(--bm-bg-secondary-dark);
    --bm-hover-bg: var(--bm-hover-bg-dark);
    --bm-border-color: var(--bm-border-color-dark);
    --bm-border-secondary-color: var(--bm-border-secondary-color-dark);
    --bm-text-color: var(--bm-text-color-dark);
    --bm-placeholder: var(--bm-placeholder-dark);
    --left-message-bg-color: var(--left-message-bg-color-dark);
    --left-message-text-color: var(--left-message-text-color-dark);
    --left-message-nickname-color: var(--left-message-nickname-color-dark);
    --right-message-bg-color: var(--right-message-bg-color-dark);
    --right-message-text-color: var(--right-message-text-color-dark);
    --right-message-nickname-color: var(--right-message-nickname-color-dark);
    --bm-sticky-date-bg: var(--bm-sticky-date-bg-dark);
    --bm-sticky-date-color: var(--bm-sticky-date-color-dark);
    --bm-button-hover: var(--bm-button-hover-dark);
    --bm-button-active: var(--bm-button-active-dark);

    --bm-border-radius: 8px;
    --bm-message-border-radius: 12px;
    --bm-avatar-radius: 8px;
}

/* Layout + chrome alignment with Fluent portal */
.fcom_wrap .fcom_better_messages_wrap {
    background: var(--fcom-primary-bg, #fff);
}

.fcom_wrap .fcom_better_messages_wrap .fhr_content_layout_header .fcom_page_title {
    color: var(--fcom-primary-text, #0f172a);
}

html.dark .fcom_wrap .fcom_better_messages_wrap .fhr_content_layout_header .fcom_page_title {
    color: var(--fcom-primary-text, #fff);
}

.fcom_wrap .fcom_full_size_container .bp-messages-wrap,
.fcom_wrap .fcom_boxed_container .bp-messages-wrap {
    background: var(--fcom-primary-bg, #fff) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.dark .fcom_wrap .fcom_full_size_container .bp-messages-wrap,
html.dark .fcom_wrap .fcom_boxed_container .bp-messages-wrap {
    background: var(--fcom-primary-bg, #0B0D1B) !important;
}

.fcom_wrap .bp-messages-wrap .chat-header,
.fcom_wrap .bp-messages-wrap .threads-list-wrapper {
    background: var(--fcom-secondary-bg, #f5f6f8) !important;
    border-color: var(--fcom-primary-border, #e5e7eb) !important;
}

html.dark .fcom_wrap .bp-messages-wrap .chat-header,
html.dark .fcom_wrap .bp-messages-wrap .threads-list-wrapper {
    background: var(--fcom-secondary-bg, #111423) !important;
    border-color: var(--fcom-primary-border, #1a2332) !important;
}

.fcom_wrap .bp-messages-wrap .threads-list .thread.active,
.fcom_wrap .bp-messages-wrap .threads-list .thread:hover {
    background: var(--fcom-active-bg, #eef2f7) !important;
}

html.dark .fcom_wrap .bp-messages-wrap .threads-list .thread.active,
html.dark .fcom_wrap .bp-messages-wrap .threads-list .thread:hover {
    background: var(--fcom-active-bg, #0f1629) !important;
}

.fcom_wrap .bp-messages-wrap .bm-reply {
    background: var(--fcom-primary-bg, #fff) !important;
    border-color: var(--fcom-primary-border, #e5e7eb) !important;
}

html.dark .fcom_wrap .bp-messages-wrap .bm-reply {
    background: var(--fcom-primary-bg, #0B0D1B) !important;
    border-color: var(--fcom-primary-border, #1a2332) !important;
}

/* Header messages menu badge — match LOUDmusic accent */
.fcom_wrap .fcom_better_messages_menu .el-badge__content.bm-unread-badge {
    background: var(--fcom-primary-button, #1E73BD) !important;
}

/* Hide BM settings / user footer (redundant with Fluent portal sidebar) */
.fcom_wrap .bp-messages-wrap .chat-footer {
    display: none !important;
}

/* Override BuddyBoss / WP global button focus ring inside messages */
.fcom_wrap .bp-messages-wrap button:focus,
.fcom_wrap .bp-messages-wrap button:active,
.fcom_wrap .bp-messages-wrap button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.fcom_wrap .bp-messages-wrap button:focus-visible {
    outline: 2px solid var(--fcom-primary-button, #1E73BD) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}