/*
 * Aurora skin over Better Messages 2.15.32 markup — Build Brief 5.6, 5.8,
 * 5.10, 5.11, 5.12, 5.13 — plus the companion's own surfaces (5.3, 5.4, 5.5).
 *
 * Vendor CSS custom properties: assets/css/variables.css (:root, 76 lines).
 * Colour variables are RGB TRIPLETS used inside rgb()/rgba(); radius/size
 * variables are plain lengths. Class names cited from inc/functions.php,
 * inc/mini.php, inc/mini-list.php and the compiled SPA (.empty-thread).
 * Re-verify on every Better Messages bump.
 */

/* ── Tokens → vendor variables ─────────────────────────────────────────── */
:root {
	--bm-font-family: var(--ek-font);

	--main-bm-color:   11, 132, 120;   /* accent  (#0B8478) */
	--bm-button-bg:    11, 132, 120;   /* teal button fill  */
	--bm-button-color: 255, 255, 255;  /* white text        */

	--bm-text-color:   27, 31, 36;     /* ink #1B1F24       */
	--bm-bg-color:     255, 255, 255;
	--bm-bg-secondary: 234, 242, 251;  /* ground #EAF2FB    */
	--bm-hover-bg:     234, 242, 251;

	--bm-border-color:           220, 228, 238;
	--bm-border-secondary-color: 232, 238, 246;
	--bm-border-active:          11, 132, 120;

	/* Bubbles (5.6): solid white for others; own messages on the 14 % teal
	   wash. In the "modern" layout with modernLayout = left, own messages sit on
	   the LEFT, so the right-hand bubble is the other person: periwinkle wash
	   (Kevin, 11 Sep 2026; override block at the end of this file). Ink on both. */
	--left-message-bg-color:        221, 238, 236;   /* own messages (left): 14 % teal wash #DDEEEC */
	--left-message-text-color:      27, 31, 36;
	--left-message-nickname-color:  10, 122, 111;   /* teal text #0A7A6F */
	--right-message-bg-color:       223, 230, 255;   /* periwinkle wash #DFE6FF, see end of file */
	--right-message-text-color:     27, 31, 36;
	--right-message-nickname-color: 10, 122, 111;

	--bm-mention-bg:    221, 238, 236;
	--bm-mention-color: 10, 122, 111;

	--bm-border-radius:         var(--ek-radius);
	--bm-message-border-radius: var(--ek-radius);
	--bm-avatar-radius:         50%;
	--bm-widgets-button-radius: var(--ek-radius-pill);
	--bm-date-radius:           var(--ek-radius-pill);

	--bm-sticky-date-bg:    #EAF2FB;
	--bm-sticky-date-color: #1B1F24;

	/* Docked conversation window (5.12): 400px, pinned bottom-right. */
	--bm-mini-chats-width:         400px;
	--bm-mini-chats-height:        520px;
	--bm-mini-chats-border-radius: var(--ek-radius);
	--bm-mini-widgets-width:       360px;
	--bm-mini-widgets-height:      520px;
}

/* ── Vendor surfaces ───────────────────────────────────────────────────── */

/* Every Better Messages wrapper (inc/functions.php:3996, :1744, :1766; inc/mini.php:37). */
.bp-messages-wrap,
.bp-messages-wrap-main,
.bp-messages-single-thread-wrap,
.bp-better-messages-mini,
.bp-better-messages-list {
	font-family: var(--ek-font);
	color: var(--ek-ink);
}

/* Composer (5.6): pill field, teal send. Selectors are the vendor's generic
   form controls inside the wrap; refine against the SPA markup on the sandbox. */
.bp-messages-wrap textarea,
.bp-messages-wrap [contenteditable="true"] {
	border-radius: var(--ek-radius-pill);
	background: var(--ek-white);
	border: 1px solid rgb(var(--bm-border-color));
	color: var(--ek-ink);
}
.bp-messages-wrap button[type="submit"],
.bp-messages-wrap .bm-send-button {
	background: var(--ek-button);
	color: var(--ek-white);
	border-radius: var(--ek-radius-pill);
}

/* Unread badges (5.11): teal with white numerals. */
.bm-unread-badge,
.bp-better-messages-unread.bpbmuc {
	background: var(--ek-button) !important;
	color: var(--ek-white) !important;
	border-radius: var(--ek-radius-pill);
	font-weight: 600;
}

/* No GIF button (5.13) — belt over the pinned gifsProvider=''. */
.bp-messages-wrap [class*="gif"],
.bp-messages-wrap [data-action="gif"] {
	display: none !important;
}

/* ── Companion surfaces ────────────────────────────────────────────────── */

/* The Chat tab panel and its day-one empty state (5.5) were removed 14 Sep
   2026 with the tab; "Group Chat" in the group header (directories.css) sends
   members to the messenger instead. */

.ek-btn {
	font-family: var(--ek-font);
	font-weight: 600;
	border: 0;
	border-radius: var(--ek-radius-pill);
	padding: 10px 22px;
	cursor: pointer;
	line-height: 1.2;
}
.ek-btn--primary { background: var(--ek-button); color: var(--ek-white); }
.ek-btn--primary:hover { filter: brightness(1.05); }

/* Live-Room strip (5.4): solid Midnight, never glass; collapses when hidden. */
.ek-live-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--ek-midnight);
	color: var(--ek-white);
	border-radius: var(--ek-radius);
	font-family: var(--ek-font);
}
.ek-live-strip[hidden] { display: none; }
.ek-live-strip__icon { display: inline-flex; color: var(--ek-white); }
.ek-live-strip__text { flex: 1 1 auto; display: flex; gap: 6px; align-items: baseline; }
.ek-live-strip__label { font-weight: 600; }
.ek-live-strip__dot, .ek-live-strip__count { opacity: .85; }
.ek-live-strip__join {
	background: var(--ek-button);
	color: var(--ek-white) !important;
	text-decoration: none !important;
	font-weight: 600;
	border-radius: var(--ek-radius-pill);
	padding: 8px 18px;
}

/* Profile → Message (5.7): the one primary teal button. */
.bn-pf-actions .ek-profile-message {
	background: var(--ek-button) !important;
	color: var(--ek-white) !important;
	border-color: var(--ek-button) !important;
}

/* Kevin, 10 Sep 2026: Message is the row's single primary; Follow is
   demoted to the outlined secondary look whatever state the shared control
   binds (partials/follow-button.php:116-124 flips data-variant reactively). */
.bn-pf-actions .bn-follow-btn,
.bn-pf-actions .bn-follow-btn[data-variant="primary"] {
	background: transparent !important;
	color: var(--ek-teal-text) !important;
	border: 1px solid var(--ek-button) !important;
	box-shadow: none !important;
}
.bn-pf-actions .bn-follow-btn[data-state="following"] {
	color: var(--ek-ink) !important;
	border-color: rgb(var(--bm-border-color)) !important;
}

/* Bottom-bar Messages badge (5.11) */
.bn-mobile-nav__badge {
	background: var(--ek-button) !important;
	color: var(--ek-white) !important;
}

/* Call connection-quality pill (.bm-connection-quality, 2.15.33): the pill
   sets white text but its inner span and SVG inherit a dark grey from the
   wrapper, leaving "excellent"/"disconnected" unreadable on the green or red
   fill. Kevin, 10 Sep 2026: white. */
.bm-connection-quality,
.bm-connection-quality span,
.bm-connection-quality svg,
.bm-connection-quality path {
	color: #ffffff !important;
	fill: currentColor;
	stroke: currentColor;
}

/* Live-Room strip, "you're in it" state (Kevin, 10 Sep 2026): the Join
   button hides while BetterMessages.isInCall() is true and a label shows. */
.ek-live-strip__you {
	font-weight: 600;
	opacity: .9;
	padding: 8px 4px;
}
.ek-live-strip__you[hidden],
.ek-live-strip__join[hidden] { display: none; }

/* Vendor in-thread call banner (.bpbm-group-call-in-progress, rendered by the
   SPA above the message list on the Messages page and in docked windows):
   skinned to match the Live-Room strip (Build Brief 5.4) — solid Midnight,
   white text, teal Join pill, no uppercase, no green. Kevin, 11 Sep 2026. */
.bm-before-message-list .bpbm-group-call-in-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 12px 0;
	padding: 10px 14px;
	background: var(--ek-midnight) !important;
	color: var(--ek-white) !important;
	border-radius: var(--ek-radius);
	font-family: var(--ek-font);
	font-size: 14px;
	font-weight: 600;
	border: 0;
}
.bm-before-message-list .bpbm-group-call-in-progress-info {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ek-white) !important;
	opacity: 1;
}
.bm-before-message-list .bpbm-group-call-participant-count {
	color: var(--ek-white) !important;
	opacity: 1 !important;
	font-weight: 700;
}
.bm-before-message-list .bpbm-group-call-in-progress-info svg,
.bm-before-message-list .bpbm-group-call-in-progress-info svg path {
	width: 20px;
	height: 20px;
	color: var(--ek-white) !important;
	fill: var(--ek-white) !important;
	stroke: var(--ek-white) !important;
}
.bp-messages-wrap .bm-before-message-list .bpbm-group-call-in-progress.bpbm-group-call-type-video .bpbm-group-call-in-progress-join button,
.bp-messages-wrap .bm-before-message-list .bpbm-group-call-in-progress.bpbm-group-call-type-audio .bpbm-group-call-in-progress-join button,
.bm-before-message-list .bpbm-group-call-in-progress-join button {
	background: var(--ek-button) !important;
	color: var(--ek-white) !important;
	border: 0 !important;
	border-radius: var(--ek-radius-pill) !important;
	padding: 8px 18px !important;
	font-family: var(--ek-font);
	font-size: 14px;
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: 0;
	line-height: 1.2;
	cursor: pointer;
}
.bm-before-message-list .bpbm-group-call-in-progress-join button:hover {
	filter: brightness(1.05);
}

/* Kevin, 11 Sep 2026: "Room is live" is the phrase (Build Brief 5.4). The
   vendor banner renders the count first with no slot for a leading phrase,
   so it is prepended here; the sentence then reads "Room is live · N in the call".
   The dot and the count are separated by a real non-breaking space (U+00A0),
   written as a literal, because a space after a CSS hex escape is consumed. */
.bm-before-message-list .bpbm-group-call-participant-count::before {
	content: "Room is live ·";
	margin-right: 0.45em; /* real gap before the count; a space glyph was too tight in Outfit */
	font-weight: 600;
	color: var(--ek-white);
}

/* ── Messages page as a full-screen surface (interface walk A2, Kevin 11 Sep
   2026, LinkedIn's pattern). body.ek-messages-page is set by the companion on
   the vendor's chatPage. First phones only; since 11 Sep 2026 every width, so
   the messenger looks the same on a laptop as on a phone: no site header or
   footer, the "eKlektiv. Messenger" row with its ×, full height. On phones the
   vendor's mobile layout runs underneath (one pane at a time); on wider screens
   its two-pane layout does, with the Messages / Spaces bar restyled to match
   the phone (see the min-width block at the end of this file). ────────────── */
.ek-msg-bar { display: none; }

/* Site chrome leaves: Reign's fixed mobile header, the footer, and the
   padding the theme reserves for them. The messenger's own headers remain. */
body.ek-messages-page #masthead,
body.ek-messages-page .site-footer,
body.ek-messages-page footer#colophon,
body.ek-messages-page #page > footer,
body.ek-messages-page .reign-sticky-sentinel {
	display: none !important;
}
/* The Messages page (page 376) uses Listora's "Listora Full Width" template
   (wb-listora/templates/template-listora-full-width.php), which adds
   `main#primary.site-main` and `.listora-page-wrap` around the content, inside
   Reign's `.site-content-grid`. Once Listora Pro's styles loaded (15 Sep 2026)
   those gave the wrap 17px side padding and a 1400px cap on a −15px grid, so
   the messenger stopped reaching the edges and the page scrolled 43px. Reset
   them too, so the messenger is full screen whichever template the page uses. */
body.ek-messages-page,
body.ek-messages-page #page,
body.ek-messages-page #content,
body.ek-messages-page .site-content,
body.ek-messages-page .site-content > .container,
body.ek-messages-page .site-content-grid,
body.ek-messages-page #primary,
body.ek-messages-page .site-main,
body.ek-messages-page .listora-page-wrap,
body.ek-messages-page .entry-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
body.ek-messages-page { background: var(--ek-white); }

/* Home row: the wordmark "eKlektiv. Messenger" (Kevin, 11 Sep 2026) —
   brand ExtraBold, product ExtraLight, icon navy; still the Home link. The
   vendor's own "<" below it handles thread → list. */
body.ek-messages-page .ek-msg-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	padding: 0 4px 0 16px;
	background: var(--ek-white);
	border-bottom: 1px solid rgb(var(--bm-border-color));
	position: relative;
	z-index: 100001; /* above the vendor layer at 100000 */
}
/* Close (Kevin, 11 Sep 2026): same destination as the wordmark, 44px target. */
body.ek-messages-page .ek-msg-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ek-ink) !important;
	text-decoration: none !important;
}
body.ek-messages-page .ek-msg-close:active { background: rgba(27, 31, 36, .06); }
body.ek-messages-page .ek-msg-home {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	height: 48px;
	font-family: var(--ek-font);
	font-size: 21px;
	line-height: 48px;
	color: var(--ek-navy) !important;
	text-decoration: none !important;
	letter-spacing: -0.01em;
}
body.ek-messages-page .ek-msg-home__brand { font-weight: 800; }
body.ek-messages-page .ek-msg-home__app { font-weight: 200; }

/* The messenger fills what is left of the viewport. */
body.ek-messages-page .bp-messages-wrap-main {
	height: calc(100dvh - 48px) !important;
	min-height: calc(100dvh - 48px) !important;
	max-height: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
/* The inner box carries an inline height from the vendor script (630px
   on load); it must follow the outer box instead. Square corners: the
   messenger is the screen now, not a card on one. */
/* Direct child only: the vendor's search popup (.bm-search-popup) and
   other pop-ups reuse the .bp-messages-wrap class deeper in the tree, and
   a descendant match squeezed the search results to one row (11 Sep 2026). */
body.ek-messages-page .bp-messages-wrap-main > .bp-messages-wrap:not(.bm-search-popup) {
	height: 100% !important;
	min-height: 100% !important;
	border-radius: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}
/* The thread pane gets an inline height from the vendor too (630px,
   its initial container height); make it follow the box as well. */
body.ek-messages-page .bp-messages-wrap-main .bp-messages-threads-wrapper,
body.ek-messages-page .bp-messages-wrap-main .bp-messages-column {
	height: 100% !important;
}
body.ek-messages-page { overflow-x: hidden; }

/* Nothing to expand into: hide the vendor's maximize control in both
   headers (list .chat-header, thread .thread-actions). Also fixes A4 —
   the name in the thread header gets the room back. */
body.ek-messages-page .bpbm-maximize,
body.ek-messages-page .bpbm-switch-full-screen {
	display: none !important;
}

/* ── Space picture with corner badge (Kevin, 11 Sep 2026) ─────────────────
   The companion supplies space thread pictures as HTML (.ek-space-pic) in the
   vendor's .pic slot — list rows, thread headers, the launcher. The badge says
   "space"; while the space's Room is live the badge swaps to a video glyph and
   pulses (class .is-live, set by messaging.js from the vendor's call feed). */
.pic .ek-space-pic,
.ek-space-pic {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
}
.ek-space-pic img,
.ek-space-pic__letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bm-avatar-radius, 50%);
	background: var(--ek-navy);
	color: var(--ek-white);
	font: 700 1em var(--ek-font);
}
.ek-space-badge {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 42%;
	min-width: 16px;
	max-width: 22px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--ek-button);
	color: var(--ek-white);
	box-shadow: 0 0 0 2px var(--ek-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
}
.ek-space-badge svg { width: 62%; height: 62%; }
.ek-space-badge--live { display: none; background: var(--ek-midnight); }
.ek-space-pic.is-live .ek-space-badge--space { display: none; }
.ek-space-pic.is-live .ek-space-badge--live { display: flex; }
@media (prefers-reduced-motion: no-preference) {
	.ek-space-pic.is-live .ek-space-badge--live { animation: ek-live-pulse 1.8s ease-in-out infinite; }
	@keyframes ek-live-pulse {
		0%, 100% { box-shadow: 0 0 0 2px var(--ek-white), 0 0 0 2px rgba(11, 132, 120, 0); }
		50%      { box-shadow: 0 0 0 2px var(--ek-white), 0 0 0 6px rgba(11, 132, 120, .35); }
	}
}

/* ── Messages page in the vendor's mobile layout (Kevin, 11 Sep 2026) ─────
   The companion turns the vendor's mobile mode on for this page only (script
   variable mobileFullScreen), which brings its Messages / Spaces tab bar. In
   that mode the messenger is a fixed, full-screen layer (z-index 100000);
   these rules seat it below the wordmark row, retire its own "×" (the
   wordmark is the way out), and put the active tab in Aurora teal. */
@media (max-width: 767px) {
	body.ek-messages-page.bp-messages-mobile .bp-messages-wrap-main {
		top: 48px !important;
		height: calc(100dvh - 48px) !important;
		min-height: 0 !important;
	}
	body.ek-messages-page .chat-header .mobileClose {
		display: none !important;
	}
	body.ek-messages-page .bp-messages-wrap .chat-tabs > div.active {
		background: var(--ek-button) !important;
		border-color: var(--ek-button) !important;
		color: var(--ek-white) !important;
	}
	/* The label span and the icon paths carry the vendor's grey on their own
	   (Kevin, 11 Sep 2026: text on the buttons must read). */
	body.ek-messages-page .bp-messages-wrap .chat-tabs > div.active,
	body.ek-messages-page .bp-messages-wrap .chat-tabs > div.active * {
		color: var(--ek-white) !important;
		fill: currentColor;
		stroke: currentColor;
	}
	body.ek-messages-page .bp-messages-wrap .chat-tabs > div.active svg path[fill="none"] { fill: none; }
	body.ek-messages-page .bp-messages-wrap .chat-tabs > div:not(.active),
	body.ek-messages-page .bp-messages-wrap .chat-tabs > div:not(.active) * {
		color: var(--ek-ink) !important;
	}
	body.ek-messages-page .bp-messages-wrap .chat-tabs > div {
		font-family: var(--ek-font);
		font-weight: 600;
		font-size: 15px;
		border-radius: var(--ek-radius-pill);
	}
}

/* Spaces list (the vendor's group list): no inline "Search..." box. The
   header magnifier searches conversations, and a space thread is one, so the
   inline box was a second way to do a subset of the same thing (Kevin,
   11 Sep 2026). All widths. */
.bp-messages-wrap .bp-messages-group-list .bpbm-search-in-list {
	display: none !important;
}

/* ── Messenger type scale (Kevin, 11 Sep 2026) ─────────────────────────────
   The vendor's defaults are small (names ~15px, previews ~13px, messages
   14px, 13px in the desktop list). LinkedIn runs names ~18px and body ~16px;
   this brings the list, thread header, messages and composer up to that scale
   in Outfit, medium weight for reading text, semibold for names. Phones first,
   every width since 11 Sep 2026 ("the text is too small" on the browser). */
.bp-messages-wrap,
.bp-messages-wrap-main,
.bp-messages-single-thread-wrap {
	--bm-message-font-size: 16px;
	--bm-message-line-height: 22px;
}

/* Conversation list rows */
.bp-messages-wrap .threads-list .thread h4,
.bp-messages-wrap .thread .bm-info h4 {
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}
.bp-messages-wrap .thread .last-message,
.bp-messages-wrap .thread .bm-last-message-content {
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--ek-ink) !important;
}
.bp-messages-wrap .thread .time,
.bp-messages-wrap .thread .time-wrapper {
	font-size: 13px !important;
	font-weight: 500 !important;
}
.bp-messages-wrap .thread .pic,
.bp-messages-wrap .thread .pic img,
.bp-messages-wrap .thread .pic .ek-space-pic {
	width: 56px !important;
	height: 56px !important;
}

/* Spaces list rows */
.bp-messages-wrap .bp-messages-group-list .name,
.bp-messages-wrap .bp-messages-group-list li,
.bp-messages-wrap .bp-messages-group-list a {
	font-size: 17px !important;
	font-weight: 600 !important;
}

/* Thread header */
.bp-messages-wrap .chat-header .thread-info .name,
.bp-messages-wrap .chat-header .bm-user .name {
	font-size: 17px !important;
	font-weight: 600 !important;
}
.bp-messages-wrap .chat-header .sub-name {
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* Messages: sender name, bubbles, day markers */
.bp-messages-wrap .bm-messages-list [class*="nickname"],
.bp-messages-wrap .bm-messages-list .bm-message-author,
.bp-messages-wrap .bm-messages-list .author {
	font-size: 15px !important;
	font-weight: 600 !important;
}
.bp-messages-wrap .bm-messages-list .bm-content,
.bp-messages-wrap .bm-messages-list .message-content,
.bp-messages-wrap .bm-messages-list p {
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 22px !important;
}

/* Sender name above a bubble (.bm-content > .bm-info) and the time stamp
   inside it (.bm-message-info), which the bubble rule above had enlarged. */
.bp-messages-wrap .bm-messages-list .bm-content > .bm-info {
	font-size: 15px !important;
	font-weight: 600 !important;
}
.bp-messages-wrap .bm-messages-list .bm-message-info {
	font-size: 12px !important;
	font-weight: 500 !important;
}

/* Composer */
.bp-messages-wrap .bm-reply .bm-editor-content,
.bp-messages-wrap .bm-reply [contenteditable="true"],
.bp-messages-wrap .bm-reply textarea,
.bp-messages-wrap .bm-reply [data-placeholder]::before {
	font-size: 16px !important;
	font-weight: 500 !important;
}

/* Tab bar labels */
.bp-messages-wrap .chat-tabs > div {
	font-size: 16px !important;
}

/* Participant name links (messaging.js wraps the name in the avatar's link) */
.bp-messages-user-list .bm-name .ek-participant-link {
	color: inherit !important;
	text-decoration: none !important;
	cursor: pointer;
}
.bp-messages-user-list .bm-name .ek-participant-link:hover,
.bp-messages-user-list .bm-name .ek-participant-link:focus-visible {
	color: var(--ek-teal-text) !important;
	text-decoration: underline !important;
}

/* ── Messenger on wider screens (Kevin, 11 Sep 2026): same chrome as the
   phone. The vendor keeps its two panes (list left, thread right); the list
   pane widens for the larger type, and its Messages / Spaces tabs
   (.bm-side-tabs, top of the pane by default) move to the bottom of the pane
   and take the phone tab bar's look — teal pill for the active tab. ───────── */
@media (min-width: 768px) {
	body.ek-messages-page .ek-msg-bar {
		padding: 0 12px 0 24px;
	}
	/* The vendor sizes the pane with --bm-side-width (320px) from its own
	   scope; set the width on the pane itself. Only while expanded: the
	   vendor's collapse control (.bm-sidebar-toggle) adds .bm-side-compact to
	   .bp-messages-wrap and narrows the pane to avatars; a fixed width here
	   kept the pane wide and the conversation area never grew (Kevin, 11 Sep
	   2026). */
	body.ek-messages-page .bp-messages-wrap:not(.bm-side-compact) .bp-messages-side-threads {
		width: 380px !important;
		min-width: 380px !important;
		flex: 0 0 380px !important;
	}
	/* The collapse control sits at left: var(--bm-side-width); tell it the
	   pane's real width so it rides the pane's edge, not a line inside it. */
	body.ek-messages-page .bp-messages-wrap:not(.bm-side-compact) .bp-messages-threads-wrapper {
		--bm-side-width: 380px;
	}
	/* Collapsed pane: the Messages / Spaces buttons shrink to their icons,
	   stacked, still a teal pill for the active one. */
	body.ek-messages-page .bp-messages-wrap.bm-side-compact .bp-messages-side-threads .bm-side-tabs {
		flex-direction: column;
		gap: 6px;
		padding: 6px 10px 6px 6px; /* room on the right for the pane divider (Kevin, 11 Sep 2026) */
	}
	body.ek-messages-page .bp-messages-wrap.bm-side-compact .bp-messages-side-threads .bm-side-tabs > div {
		width: 100%;
		padding: 10px 0;
		gap: 0;
	}
	body.ek-messages-page .bp-messages-wrap.bm-side-compact .bp-messages-side-threads .bm-side-tabs > div > span {
		display: none;
	}
	body.ek-messages-page .bp-messages-wrap.bm-side-compact .bp-messages-side-threads .bm-side-tabs > div > svg {
		width: 1.25em;
		height: 1.25em;
	}
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs {
		order: 10;
		display: flex;
		/* Size to the pane: the vendor's rule sizes the bar content-box, so
		   padding pushed the buttons past the pane's right edge (Kevin,
		   11 Sep 2026). */
		box-sizing: border-box !important;
		width: auto !important;
		max-width: 100%;
		align-self: stretch;
		overflow: hidden;
		gap: 8px;
		padding: 8px;
		height: auto !important;
		border-top: 1px solid rgba(var(--bm-border-color), .62);
		border-bottom: 0 !important;
		background: var(--ek-white);
	}
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div {
		font-family: var(--ek-font);
		font-weight: 600;
		font-size: 16px;
		line-height: 1;
		padding: 12px 8px;
		border-radius: var(--ek-radius-pill);
		gap: 6px;
	}
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div > svg {
		width: 1.1em;
		height: 1.1em;
	}
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div.active {
		background: var(--ek-button) !important;
	}
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div.active,
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div.active * {
		color: var(--ek-white) !important;
		fill: currentColor;
		stroke: currentColor;
	}
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div.active svg path[fill="none"] { fill: none; }
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div:not(.active),
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div:not(.active) * {
		color: var(--ek-ink) !important;
		background: transparent !important;
	}
	/* The settings gear row sits above the tab bar; keep it compact. */
	body.ek-messages-page .bp-messages-side-threads > .chat-footer {
		order: 9;
	}
}

/* Messages page: no "Minimize chat" in the conversation header (Kevin,
   11 Sep 2026). The vendor offers it whenever docked mini chats are on
   (rest-api.php:2263 canMinimize); on the full-screen messenger there is
   nothing to minimize into. Same treatment as the maximize control above.
   The space Chat tab keeps it. */
body.ek-messages-page .bpbm-minimize {
	display: none !important;
}

/* ── The other person's bubble: periwinkle wash (Kevin, 11 Sep 2026) ───────
   Better Messages runs its "modern" layout with modernLayout = left, so your
   own messages sit on the left and the right-hand stack is the other person.
   Reign's Better Messages sheet (reign-theme/assets/css/
   bp-better-messages-main.min.css) paints that bubble with its theme blue,
   `background: var(--reign-colors-theme) !important` on
   body.bm-messages-theme-scheme …, which beat our variable while our ink text
   still applied: dark text on #1D76DA.
   Periwinkle #6C8CFF at 22 % over white = #DFE6FF. Ink #1B1F24 on it is about
   13:1 (white text on full periwinkle would be about 3:1 and fail). The time
   stamp and call icons follow the text variable. Same selector as Reign, one
   step more specific, also !important, so load order does not matter. Applies
   wherever the vendor renders bubbles: Messages page, docked chats, space Chat. */
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-right-side .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) {
	background: rgb(var(--right-message-bg-color)) !important;
	color: rgb(var(--right-message-text-color)) !important;
}

/* ── Own messages: 14 % teal wash (Kevin, 11 Sep 2026; Build Brief 5.6) ────
   Reign's Better Messages sheet also forces the own-message bubble to
   var(--reign-site-body-bg-color) (#FAFBFD) with the body text colour, both
   !important, on body.bm-messages-theme-scheme … .bm-left-side …, so our white
   never showed. Own = teal wash #DDEEEC (#0B8478 at 14 % over white), ink on
   it about 14:1. Keyed to the vendor's outgoing / incoming stacks, not to a
   side, so flipping the modernLayout setting cannot swap the two colours;
   these come after the side rule above, so they win a tie. */
:root {
	--ek-own-bubble:   221, 238, 236; /* teal wash #DDEEEC       */
	--ek-other-bubble: 223, 230, 255; /* periwinkle wash #DFE6FF */
	--ek-bubble-ink:   27, 31, 36;    /* ink #1B1F24             */
}
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.outgoing .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) {
	background: rgb(var(--ek-own-bubble)) !important;
	color: rgb(var(--ek-bubble-ink)) !important;
}
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.incoming .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) {
	background: rgb(var(--ek-other-bubble)) !important;
	color: rgb(var(--ek-bubble-ink)) !important;
}
/* Text inside the bubble: Reign also colours every descendant with its body
   text grey (#404855); the vendor's own `… .bm-message-content … *` rule means
   "bubble text colour", so both bubbles carry ink throughout (message text,
   time stamp, call icons, links). */
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.outgoing .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) *,
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.incoming .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) * {
	color: rgb(var(--ek-bubble-ink)) !important;
}

/* ── Send button: our teal (Kevin, 11 Sep 2026) ────────────────────────────
   Reign paints it with its theme blue: `background: var(--reign-colors-theme)`
   on body.bm-messages-theme-scheme .bp-messages-wrap:not(.bp-better-messages-mini)
   .bm-reply .bm-send-message (reign-theme bp-better-messages-main.min.css).
   Teal button #0B8478 with the vendor's white arrow (about 4.6:1); the darker
   teal text shade on hover. Docked chat windows included. */
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-reply .bm-send-message {
	background: var(--ek-button) !important;
}
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-reply .bm-send-message:hover,
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-reply .bm-send-message:focus-visible {
	background: #0A7A6F !important;
}
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-reply .bm-send-message svg {
	fill: #FFFFFF;
	color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════════
 * The Aurora skin lets Better Messages' own dark theme through.
 *
 * `initColourScheme()` mirrors the member's site toggle onto BM's
 * `.bm-messages-dark`, which is a complete theme they already ship. It landed,
 * and four things stayed black anyway — because THIS sheet was overruling it.
 *
 * Line 20 pins `--bm-text-color: 27, 31, 36`, BM's own ink token, to our light
 * value. With the dark class applied, BM sets that token to `255, 255, 255`
 * and our declaration promptly put it back. Skinning a vendor surface is the
 * posture; pinning a vendor's THEME token to one theme's value is how a skin
 * stops being a skin and starts being a cage.
 *
 * So the same token is given the dark value in dark, and the sticky date
 * follows. Everything else in this sheet is unchanged.
 * ══════════════════════════════════════════════════════════════════════════ */
[data-bn-theme="dark"],
[data-theme="dark"],
[data-bx-mode="dark"] {
	--bm-text-color:        255, 255, 255;
	--bm-sticky-date-color: #E6E8EB;
}

/*
 * The toggle Reign already owns, sitting in our bar.
 *
 * `initSchemeToggleInBar()` moves the real `.bx-color-mode-toggle` here rather
 * than building a second one, so it arrives with Reign's own icons and sizing
 * meant for the site header. These few lines sit it in a 48px bar and let it
 * take the bar's ink, nothing more — restyling it would be the beginning of a
 * second implementation.
 */
body.ek-messages-page .ek-msg-bar .bx-color-mode-toggle {
	display: inline-flex;
	align-items: center;
	margin-inline-start: auto;
}

body.ek-messages-page .ek-msg-bar .bx-color-mode-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* The bar had `background: var(--ek-white)` — a literal, so it stayed white on
 * a dark messenger, which is the pale strip across the top of every dark
 * screenshot. BM's own `--bm-bg-color` already flips with the theme now that
 * the dark class is mirrored, so the bar simply follows the panel it sits on
 * instead of carrying a colour of its own. */
body.ek-messages-page .ek-msg-bar {
	background: rgb( var( --bm-bg-color ) );
}

/*
 * The wordmark has to survive the bar going dark.
 *
 * `.ek-msg-home` is pinned to `var(--ek-navy) !important` — #002D79, the mark
 * sampled from the site icon. That is right on a white bar and unreadable the
 * moment the bar follows the theme, which it now does: navy on #181D2C. A
 * regression from the line above, caught in the same pass rather than left for
 * Kevin to find.
 *
 * It takes the bar's own ink in dark, which is legible and invents nothing.
 * **Deliberately not a lighter navy:** the site header does not render this as
 * text at all, it uses a light-blue PNG (`medium_24_lightblue_trans.png`), so
 * the brand already HAS a dark-mode treatment and matching it means sampling
 * that file, not guessing a tint. A brand colour is Dana's to set — flagged for
 * her rather than approximated here.
 */
[data-bn-theme="dark"] body.ek-messages-page .ek-msg-home,
[data-theme="dark"] body.ek-messages-page .ek-msg-home,
[data-bx-mode="dark"] body.ek-messages-page .ek-msg-home {
	color: var(--ek-ink) !important;
}

/*
 * Group chat call buttons wear the 1:1 call icons (Kevin, 15 Sep 2026).
 *
 * Kevin: "the icons for audio and video on the 1:1 messages … have the proper
 * icons. but on the group chat sessions there are different icons. see Design
 * Critique". Better Messages draws two different buttons in the thread header:
 *
 *   1:1    .bm-thread-header-action.audio-call        "Audio Call"  phone handset
 *          .bm-thread-header-action.video-call        "Video Call"  camcorder
 *   group  .bm-thread-header-action.group-audio-call  "Audio Chat"  speech bubble + bars
 *          .bm-thread-header-action.group-call        "Video Chat"  speech bubble + camera
 *
 * (read from the live header, 2.15.33). The group buttons keep their own
 * element, size, colour, click handler and label; only the picture changes. Their
 * paths are hidden and the 1:1 glyph — the same Ionicons path data, 512 viewBox —
 * is painted through a mask in the button's current colour, so hover, active and
 * dark mode follow exactly as they do for the 1:1 icons. CSS rather than a script
 * because the vendor re-renders the header on every thread switch.
 */
.bm-thread-header-action.group-audio-call svg,
.bm-thread-header-action.group-call svg {
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.bm-thread-header-action.group-audio-call svg > *,
.bm-thread-header-action.group-call svg > * {
	display: none;
}
.bm-thread-header-action.group-audio-call svg {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M436.9 364.8c-14.7-14.7-50-36.8-67.4-45.1-20.2-9.7-27.6-9.5-41.9.8-11.9 8.6-19.6 16.6-33.3 13.6-13.7-2.9-40.7-23.4-66.9-49.5-26.2-26.2-46.6-53.2-49.5-66.9-2.9-13.8 5.1-21.4 13.6-33.3 10.3-14.3 10.6-21.7.8-41.9C184 125 162 89.8 147.2 75.1c-14.7-14.7-18-11.5-26.1-8.6 0 0-12 4.8-23.9 12.7-14.7 9.8-22.9 18-28.7 30.3-5.7 12.3-12.3 35.2 21.3 95 27.1 48.3 53.7 84.9 93.2 124.3l.1.1.1.1c39.5 39.5 76 66.1 124.3 93.2 59.8 33.6 82.7 27 95 21.3 12.3-5.7 20.5-13.9 30.3-28.7 7.9-11.9 12.7-23.9 12.7-23.9 2.9-8.1 6.2-11.4-8.6-26.1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M436.9 364.8c-14.7-14.7-50-36.8-67.4-45.1-20.2-9.7-27.6-9.5-41.9.8-11.9 8.6-19.6 16.6-33.3 13.6-13.7-2.9-40.7-23.4-66.9-49.5-26.2-26.2-46.6-53.2-49.5-66.9-2.9-13.8 5.1-21.4 13.6-33.3 10.3-14.3 10.6-21.7.8-41.9C184 125 162 89.8 147.2 75.1c-14.7-14.7-18-11.5-26.1-8.6 0 0-12 4.8-23.9 12.7-14.7 9.8-22.9 18-28.7 30.3-5.7 12.3-12.3 35.2 21.3 95 27.1 48.3 53.7 84.9 93.2 124.3l.1.1.1.1c39.5 39.5 76 66.1 124.3 93.2 59.8 33.6 82.7 27 95 21.3 12.3-5.7 20.5-13.9 30.3-28.7 7.9-11.9 12.7-23.9 12.7-23.9 2.9-8.1 6.2-11.4-8.6-26.1z'/%3E%3C/svg%3E");
}
.bm-thread-header-action.group-call svg {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M450.6 153.6c-3.3 0-6.5.9-9.3 2.7l-86.5 54.6c-2.5 1.6-4 4.3-4 7.2v76c0 2.9 1.5 5.6 4 7.2l86.5 54.6c2.8 1.7 6 2.7 9.3 2.7h20.8c4.8 0 8.6-3.8 8.6-8.5v-188c0-4.7-3.9-8.5-8.6-8.5h-20.8zM273.5 384h-190C55.2 384 32 360.8 32 332.6V179.4c0-28.3 23.2-51.4 51.4-51.4h190c28.3 0 51.4 23.2 51.4 51.4v153.1c.1 28.3-23 51.5-51.3 51.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M450.6 153.6c-3.3 0-6.5.9-9.3 2.7l-86.5 54.6c-2.5 1.6-4 4.3-4 7.2v76c0 2.9 1.5 5.6 4 7.2l86.5 54.6c2.8 1.7 6 2.7 9.3 2.7h20.8c4.8 0 8.6-3.8 8.6-8.5v-188c0-4.7-3.9-8.5-8.6-8.5h-20.8zM273.5 384h-190C55.2 384 32 360.8 32 332.6V179.4c0-28.3 23.2-51.4 51.4-51.4h190c28.3 0 51.4 23.2 51.4 51.4v153.1c.1 28.3-23 51.5-51.3 51.5z'/%3E%3C/svg%3E");
}