/* ========================================================================== MB Better Messages Skin - R3-2 / R3-4, corrected 13 Aug 2026 Enqueued + filemtime-versioned by novamira-sandbox/mb-bm-skin.php. SELECTOR AUDIT vs BETTER MESSAGES 2.15.24 Counted at CLASS BOUNDARIES, not by substring. The first version of this audit used substr_count, which matched 'reply' inside 'bm-reply', 'message-content' inside 'bm-message-content' and 'bm-header' inside 'bm-header-status-popup'. That inflated five counts and led to a whole block of rules that never matched anything. Corrected numbers: ALIVE bp-messages-wrap 2819 | chat-header 281 | threads-list 266 bm-message 376 | bm-message-content 255 | bm-reply 122 chat-footer 95 | unread-count 54 | new-message 51 bm-attachments 38 | bm-editor 28 | send-message 20 bm-editor-content 12 | bm-reactions 12 | bm-btn 10 bm-threads-top-bar 10 DEAD bp-better-messages-wrap 0 | bm-header 0 | threads-header 0 message-form 0 | bm-new-conversation 0 | bm-toggle-threads 0 ql-editor 0 | message-reactions 0 NEARLY messages-stack 2 | messages-list 2 | message-content 8 (the real names are bm-messages-stack / bm-message-content) Every dead name is listed here rather than quietly deleted. ========================================================================== */ :root { --bm-pink: var(--mb-pink, #E91E63); --bm-pink-hover: var(--mb-pink-hover, #C2185B); --bm-pink-light: var(--mb-bg-pink-soft, #FFF5F8); /* Header gradient. NOT #E91E63 -> #F06292: white measures 4.35:1 and 3.06:1 on that pair. These are existing brand tokens at 9.11:1 / 5.87:1. */ --bm-header-from: var(--mb-heading-plum, #7A2E45); --bm-header-to: var(--mb-pink-hover, #C2185B); } .bp-messages-wrap { border-radius: 16px !important; overflow: hidden; box-shadow: 0 4px 24px rgba(233, 30, 99, 0.08) !important; border: 1px solid rgba(233, 30, 99, 0.12) !important; font-family: Poppins, sans-serif !important; } /* -- HEADERS - R3-2 ------------------------------------------------------- ONE list reused for background, text, children and icons, so the two lists can never drift apart again (that drift WAS the R3-2 bug). `.bm-header` is DEAD in 2.15.24 and has been dropped from the list; `.chat-header` is the real one and is what the fix was measured against. */ .bp-messages-wrap .chat-header, .bp-messages-wrap .bm-threads-top-bar { background: linear-gradient(135deg, var(--bm-header-from) 0%, var(--bm-header-to) 100%) !important; color: #fff !important; } .bp-messages-wrap .chat-header *, .bp-messages-wrap .bm-threads-top-bar * { color: #fff !important; } /* SVG ignores `color` unless told to follow it. */ .bp-messages-wrap .chat-header svg, .bp-messages-wrap .bm-threads-top-bar svg { fill: currentColor !important; stroke: currentColor !important; color: #fff !important; } /* Direct children need MORE specificity than the wildcard above: BM ships `.bp-messages-wrap .chat-header > a` as !important at 0,2,1, which outranks `.chat-header *` at 0,2,0. That is why the new-conversation control stayed pink (2.10:1) despite !important. `a.new-message` is qualified to 0,3,1. */ .bp-messages-wrap .chat-header > a, .bp-messages-wrap .chat-header > span, .bp-messages-wrap .bm-threads-top-bar > a, .bp-messages-wrap .bm-threads-top-bar > span, .bp-messages-wrap .chat-header > a.new-message { color: #fff !important; } /* NO rule for header : BM renders the member-search field black on its own white background (#000 on #FFFCFD) and outranks us anyway. Forcing white here would either do nothing or put white text on a white field. */ /* -- COMPOSER ------------------------------------------------------------- The composer is `.bm-reply > .bm-editor > .bm-editor-content`. There is no `.reply` element and no `.ql-editor` - BM is not Quill. Measured at 1440 BEFORE this rule, with the row at x=674 w=381 and the editor at x=732 w=221: left gap 58px | right gap 102px -> editor sat 44px off-centre min-height 36px vs line-height 24px with padding 0 -> all 12px of slack fell BELOW the text, so the caret and the text sat hard against the top of the 24px-radius pill Both halves of "the text box is off centre and the bubble and cursor do not align". The editor now grows to fill the row, and the 12px of slack is split evenly above and below the line. */ .bp-messages-wrap .bm-reply { align-items: center !important; } .bp-messages-wrap .bm-editor { flex: 1 1 auto !important; min-width: 0 !important; } .bp-messages-wrap .bm-editor-content { box-sizing: border-box !important; /* 6 + 24 line-height + 6 = 36 = BM's own min-height, so nothing is resized, the line is simply centred inside the pill it already had. */ padding: 6px 14px !important; } /* -- THREAD LIST -------------------------------------------------------- */ .bp-messages-wrap .threads-list .thread { border-radius: 12px !important; margin: 4px 8px !important; transition: all 0.2s ease !important; } .bp-messages-wrap .threads-list .thread:hover { background: var(--bm-pink-light) !important; } .bp-messages-wrap .threads-list .thread.selected { background: rgba(233, 30, 99, 0.08) !important; border-left: 3px solid var(--bm-pink) !important; } /* -- MESSAGE BUBBLES - DELIBERATELY NOT STYLED HERE ----------------------- The previous skin targeted `.messages-stack.incoming/.outgoing` and `.message-content`. All three are dead names. The real bubble selector is .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-left-side .bm-content .bm-messages-listing .bm-message .bm-message-content and BM paints it from its OWN variables - --left-message-bg-color, --left-message-text-color and the right-side pair - with !important on a nine-class selector. Fighting that with a longer selector would be brittle; the supported route is to set those variables. Left alone until that is done and measured, rather than shipping another rule that quietly does nothing. */ /* -- AVATARS, SCROLLBAR, BADGES ----------------------------------------- */ .bp-messages-wrap ::-webkit-scrollbar { width: 6px; } .bp-messages-wrap ::-webkit-scrollbar-thumb { background: rgba(233, 30, 99, 0.2); border-radius: 3px; } .bp-messages-wrap .unread-count, .bp-better-messages-mini .unread-badge { background: var(--bm-pink) !important; border-radius: 50% !important; } /* Guests have no unread state to show. */ body:not(.logged-in) .bp-better-messages-mini .unread-badge, body:not(.logged-in) .bp-better-messages-mini .unread-count { display: none !important; } .bp-better-messages-mini .chat-widget { border-radius: 16px !important; box-shadow: 0 8px 32px rgba(233, 30, 99, 0.12) !important; overflow: hidden; } /* -- NEW CONVERSATION BUTTON -------------------------------------------- */ .bp-messages-wrap .new-message { background: linear-gradient(135deg, var(--bm-header-from), var(--bm-header-to)) !important; color: #fff !important; border-radius: 24px !important; border: none !important; } .bp-messages-wrap .new-message * { color: #fff !important; } /* -- SEND BUTTON -------------------------------------------------------- */ .bp-messages-wrap .send-message { background: linear-gradient(135deg, var(--bm-pink), var(--bm-pink-hover)) !important; border-radius: 50% !important; color: #fff !important; border: none !important; } /* -- BRIDGE ROOM -------------------------------------------------------- */ .mb-bridge-room--active { background: rgba(233, 30, 99, 0.12) !important; color: var(--bm-pink) !important; font-weight: 600; border-left: 3px solid var(--bm-pink); } /* -- SIDEBAR TOGGLE ------------------------------------------------------- `.bm-toggle-threads` and `.threads-header` are DEAD, so two of the four selectors in the old rule matched nothing. The attribute-substring selectors are markup-agnostic and survive. */ .bp-messages-wrap [class*="toggle-sidebar"], .bp-messages-wrap [class*="ToggleSidebar"], .bp-messages-wrap .bm-threads-top-bar button:first-child { display: flex !important; visibility: visible !important; opacity: 1 !important; min-width: 32px; min-height: 32px; } /* -- PHONE -------------------------------------------------------------- */ @media (max-width: 768px) { .bp-messages-wrap { border-radius: 0 !important; border: none !important; box-shadow: none !important; } }