/*
 * 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);

	/*
	 * Dana's palette, through the one token set's triplets (30 Sep 2026, Kevin,
	 * d-palette a). Declared on :root beside `--ds-*`, so each follows Light,
	 * Dark and Night; Better Messages' own dark class is pointed at the same
	 * values at the end of this sheet.
	 */
	--main-bm-color:   var(--ds-accent-rgb);
	--bm-button-bg:    var(--ds-accent-rgb);
	--bm-button-color: 255, 255, 255;  /* white on the accent fill */

	--bm-text-color:   var(--ds-ink-rgb);
	--bm-bg-color:     var(--ds-surface-rgb);
	--bm-bg-secondary: var(--ds-bg-rgb);
	--bm-hover-bg:     var(--ds-surface2-rgb);

	--bm-border-color:           var(--ds-line-rgb);
	--bm-border-secondary-color: var(--ds-line-rgb);
	--bm-border-active:          var(--ds-accent-rgb);

	/* Bubbles (5.6): own messages on the accent-soft wash, the other person's
	   on surface2, ink on both. Keyed to outgoing/incoming further down. */
	--left-message-bg-color:        var(--ds-accent-soft-rgb);
	--left-message-text-color:      var(--ds-ink-rgb);
	--left-message-nickname-color:  var(--ds-accent-text-rgb);
	--right-message-bg-color:       var(--ds-surface2-rgb);
	--right-message-text-color:     var(--ds-ink-rgb);
	--right-message-nickname-color: var(--ds-accent-text-rgb);

	--bm-mention-bg:    var(--ds-accent-soft-rgb);
	--bm-mention-color: var(--ds-accent-text-rgb);

	--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:    var(--ds-surface2);
	--bm-sticky-date-color: var(--ds-ink);

	/* 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): the brand accent with white numerals.
   Moved to --ds-accent on 26 Sep 2026 with the palette flip — these two carry
   !important because the vendor does, so they do not follow --bn-accent and
   had to be named. */
.bm-unread-badge,
.bp-better-messages-unread.bpbmuc {
	background: var(--ds-accent) !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(--ds-accent) !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). ────────────── */

/* 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. */
/* Close (Kevin, 11 Sep 2026): same destination as the wordmark, 44px target. */

/*
 * The messenger fills what is left of the viewport.
 *
 * The 48px this used to subtract was `.ek-msg-bar`, which went on 27 September
 * 2026. What sits above the messenger now is `Chrome\DeskBar` on a desktop —
 * a 68px bar with 8px under it — and `Chrome\TopRow` on a phone, which is a
 * different height again. So the two cases are stated separately rather than
 * sharing one number, which is how the 48 came to be wrong in two places at
 * once.
 */
/* ──────────────────────────────────────────────────────────────────────────
 * The messenger in the vendor's FULL-SCREEN mode.
 *
 * Kevin: *"on mobile the messages screen renders for desktop in length."*
 *
 * **Keyed on the vendor's own class, not on a width of ours** — and that is
 * the fix rather than a tidy-up. These rules used to live inside
 * `@media (max-width: 767px)`, a number guessed to line up with Better
 * Messages' idea of "mobile". The vendor decides that itself and adds
 * `bp-messages-mobile` when it does; on any device where its breakpoint and
 * our guess disagreed, the messenger went full-screen-fixed while our sizing
 * stayed on the in-flow desktop rule — a pane the length of a desktop window
 * on a phone, which is exactly what he saw. Our own bottom bar is at 768 and
 * this was at 767, so there was at least one pixel of guaranteed disagreement
 * before any device was involved.
 *
 * The class says when the vendor is in that mode. Nothing else has to agree.
 *
 * WHERE ITS EDGES GO still depends on which of our two rows is on screen,
 * and that IS our breakpoint to know: the desktop bar above 768, the phone
 * row and the bottom bar below it.
 * ────────────────────────────────────────────────────────────────────────── */
body.ek-messages-page.bp-messages-mobile .bp-messages-wrap-main {
	top: 77px !important;
	bottom: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

@media (max-width: 768px) {
	/*
	 * 86px is where our own content starts on these screens: the top row's
	 * 22px of air, its 46px of controls, and the 18px under it.
	 *
	 * The foot is `--bn-mobile-nav-h`, which BuddyNext's shell script measures
	 * off the real bar and publishes on `<html>`, so the panel follows the
	 * bar's actual height including the safe-area inset rather than a number
	 * that is right on one handset. The fallback covers the frame before that
	 * script runs.
	 *
	 * `bottom` and not `height`, deliberately: a height has to be recomputed
	 * every time either bar changes, and a hard-coded offset here has now gone
	 * stale twice.
	 */
	body.ek-messages-page.bp-messages-mobile .bp-messages-wrap-main {
		top: 86px !important;
		bottom: var(--bn-mobile-nav-h, 60px) !important;
	}
}

body.ek-messages-page:not(.bp-messages-mobile) .bp-messages-wrap-main {
	/*
	 * 77 = the bar's 68px, the 8px under it, and its 1px bottom line.
	 * Measured rather than derived: 76 left the messenger one pixel past the
	 * fold, which is enough to put a scrollbar on a screen that should not
	 * have one.
	 */
	height: calc(100dvh - 77px) !important;
	min-height: 0 !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; }

/*
 * The messenger IS the screen, so the column keeps no space under it.
 *
 * `.ek-app__main` carries 64px of bottom padding on every app screen — room
 * under the last card, which is right for a list of courses and wrong for a
 * pane already sized to the viewport: it was the whole of this page's vertical
 * scroll.
 */
body.ek-messages-page .ek-app__main {
	padding-bottom: 0;
}

/* 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 color-mix(in srgb, var(--ds-accent) 0%, transparent); }
		50%      { box-shadow: 0 0 0 2px var(--ek-white), 0 0 0 6px color-mix(in srgb, var(--ds-accent) 35%, transparent); }
	}
}

/* ── 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 between our own top row and the bottom bar, retire its
   own "×", and put the active tab in Aurora teal. */
/* ──────────────────────────────────────────────────────────────────────────
 * The Messages / Groups tabs, in Dana's accent.
 *
 * Kevin: *"our better messages Messages and Groups Tabs could use some accent
 * when active from the palette we are using from the blue sky work."*
 *
 * The active pill was `--ek-button` — #0B8478, the Aurora teal the whole app
 * carried before her palette landed. It was the last teal on this screen, and
 * it read as another product's control sitting inside ours.
 *
 * `--ds-accent` and `--ds-on-accent` instead, so the tab is the same blue as
 * the rail's current row, the group page's Pinned chip and every primary
 * button — and so it follows light, dark and night without being restated.
 *
 * **Gated on the vendor's own class, not on a width.** These rules sat in
 * `@media (max-width: 767px)`, a guess at Better Messages' idea of mobile that
 * was already one pixel off our own bottom bar's 768 before any device was
 * involved. `.chat-tabs` exists only while the vendor is in its full-screen
 * mode, and `bp-messages-mobile` is the vendor saying so.
 * ────────────────────────────────────────────────────────────────────────── */
body.ek-messages-page.bp-messages-mobile .chat-header .mobileClose {
	display: none !important;
}

body.ek-messages-page.bp-messages-mobile .bp-messages-wrap .chat-tabs > div.active {
	background: var(--ds-accent) !important;
	border-color: var(--ds-accent) !important;
	color: var(--ds-on-accent) !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-mobile .bp-messages-wrap .chat-tabs > div.active,
body.ek-messages-page.bp-messages-mobile .bp-messages-wrap .chat-tabs > div.active * {
	color: var(--ds-on-accent) !important;
	fill: currentColor;
	stroke: currentColor;
}

body.ek-messages-page.bp-messages-mobile .bp-messages-wrap .chat-tabs > div.active svg path[fill="none"] { fill: none; }

body.ek-messages-page.bp-messages-mobile .bp-messages-wrap .chat-tabs > div:not(.active),
body.ek-messages-page.bp-messages-mobile .bp-messages-wrap .chat-tabs > div:not(.active) * {
	color: var(--ds-ink) !important;
}

/* The strip the phone's tabs sit in, for the same reason as the desktop one. */
body.ek-messages-page.bp-messages-mobile .bp-messages-wrap .chat-tabs {
	background: var(--ds-surface) !important;
}

body.ek-messages-page.bp-messages-mobile .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: 768.02px) {
	/* 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;
	}
	/*
	 * **The tab bar follows the theme, and that is what makes the ink safe.**
	 *
	 * `.bm-side-tabs` carries a literal white from the vendor — white in dark
	 * mode too, which is the bright band across the foot of the thread pane in
	 * every dark screenshot. The inactive tab's ink used to be `--ek-ink`, a
	 * FIXED dark, and it was legible for exactly that reason: it was dark text
	 * on a bar that never flipped.
	 *
	 * Moving that ink to `--ds-ink` without touching the bar made it near-white
	 * on white. Measured before this rule: 1.15:1. So the bar takes
	 * `--ds-surface` and both follow the mode together.
	 *
	 * The same trap the deleted `.ek-msg-bar` notes described — a literal
	 * colour surviving a palette change and only showing in one mode.
	 */
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs {
		background: var(--ds-surface) !important;
	}

	/* The same accent the phone's tabs take — see the note on `.chat-tabs`. */
	body.ek-messages-page .bp-messages-side-threads .bm-side-tabs > div.active {
		background: var(--ds-accent) !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(--ds-on-accent) !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(--ds-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 {
	/* Dana's accent-soft for your own, surface2 for theirs, ink on both
	   (30 Sep 2026; were the teal wash #DDEEEC and periwinkle #DFE6FF). */
	--ek-own-bubble:   var(--ds-accent-soft-rgb);
	--ek-other-bubble: var(--ds-surface2-rgb);
	--ek-bubble-ink:   var(--ds-ink-rgb);
}
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: var(--ds-accent) !important;
}
html body.bm-messages-theme-scheme .bp-messages-wrap .bm-reply .bm-send-message svg {
	fill: var(--ds-on-accent);
	color: var(--ds-on-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 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:        var(--ds-ink-rgb);
	--bm-sticky-date-color: var(--ds-ink);
}

/*
 * Better Messages' own dark theme, in Dana's dark and night (30 Sep 2026).
 *
 * `body.bm-messages-dark` (bp-messages.css) reads its colours from `*-dark`
 * variables — navy greys of its own. They are pointed at the token set, so the
 * messenger is the same ground and cards as the rest of the app in Dark, and
 * near-black in Night. `html body` out-specifies the vendor's `body`; its
 * `!important` declarations take the `-dark` variables, which is why these are
 * set rather than the final ones.
 */
html body.bm-messages-dark {
	--bm-text-color-dark:             var(--ds-ink-rgb);
	--bm-bg-color-dark:               var(--ds-surface-rgb);
	--bm-bg-secondary-dark:           var(--ds-bg-rgb);
	--bm-border-color-dark:           var(--ds-line-rgb);
	--bm-border-secondary-color-dark: var(--ds-line-rgb);
	--bm-hover-bg-dark:               var(--ds-surface2-rgb);
	--bm-placeholder-dark:            var(--ds-ink2-rgb);
	--bm-sticky-date-bg-dark:         var(--ds-surface2);
	--bm-sticky-date-color-dark:      var(--ds-ink);
	--main-bm-color-dark:             var(--ds-accent-text-rgb);
	--left-message-bg-color-dark:     var(--ds-accent-soft-rgb);
	--left-message-text-color-dark:   var(--ds-ink-rgb);
	--left-message-nickname-color-dark:  var(--ds-accent-text-rgb);
	--right-message-bg-color-dark:    var(--ds-surface2-rgb);
	--right-message-text-color-dark:  var(--ds-ink-rgb);
	--right-message-nickname-color-dark: var(--ds-accent-text-rgb);
}

/*
 * The toggle Reign already owns, sitting in our bar.
 *
 * `initSchemeToggleInBar()` moved the real `.bx-color-mode-toggle` into the
 * messenger's own bar rather than building a second one.
 *
 * **All of that went with the bar on 27 September 2026.** Three notes stood
 * here — how the toggle was seated, why the bar stopped being literal white in
 * dark, and how the wordmark had to survive the bar going dark. Every one of
 * them described `.ek-msg-*`, and the row they described is gone: the light
 * and dark switch lives in `Chrome\TopRow`'s avatar menu, which is on this
 * screen like every other.
 *
 * One thing in them outlived the bar and is kept here so it is not rediscovered
 * the hard way: **the brand has a dark-mode treatment already, and it is an
 * image.** The site header does not render the wordmark as text at all — it
 * uses `medium_24_lightblue_trans.png`. So anywhere the wordmark needs to work
 * on a dark ground, the answer is to sample that file rather than to pick a
 * lighter navy. A brand colour is Dana's to set.
 */

/*
 * 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");
}

/*
 * Two messenger findings from the 30 Sep scan: the conversation search's
 * placeholder is the vendor's ink at 33% (2.30 light, 1.97 dark, 1.87 night),
 * and the empty pane's two lines are ink at 60% (4.34 light). Both take
 * Dana's ink2, which clears 4.5 on every surface in every scheme.
 */
.bp-messages-wrap input::placeholder,
.bp-messages-wrap textarea::placeholder {
	color: var(--ds-ink2) !important;
	opacity: 1;
}
.bp-messages-wrap .bpbm-empty-message,
.bp-messages-wrap .bpbm-empty-or {
	color: var(--ds-ink2) !important;
}

/*
 * Better Messages' on-site toasts, in our palette and type (Kevin, 1 Oct 2026, of
 * the "Enable browser push notifications…" prompt: "we need to force it into our
 * light style with typography and palette").
 *
 * The vendor draws them in its compiled client (react-toastify) and paints them
 * `#000 !important` with `#fff !important` type, a green "Enable" and a system
 * sans-serif, whatever the scheme. Its `!important` can only be beaten by ours
 * (playbook §2). The same rules cover the three toasts that share that black box
 * (the push prompt, a new-message toast, a site notification) and "Close all", so
 * they are one family.
 *
 * **Every selector stands on the vendor's own `bm-toast-*` class, doubled to
 * out-specify it, and on nothing else.** The first version put `.Toastify__toast`
 * in front for specificity; the prompt then showed the vendor's black for a moment
 * before ours (Kevin: "a flash of the old styling before the new one takes over"),
 * which is what a rule does when it waits on a class the toast library adds a beat
 * after the vendor's. A rule that needs only the class the black comes from is
 * there as soon as the black would be.
 *
 * Every colour is a scheme token: white card and ink in Light, the scheme's own
 * surface in Dark and Night. `--ds-accent` is a fill behind white type; as text
 * the accent is `--ds-accent-text` (playbook §3.2).
 */
.Toastify__toast-container,
.bm-toasts {
	--toastify-font-family: var(--ek-font-body);
	--toastify-color-dark: var(--ds-surface);
	--toastify-color-light: var(--ds-surface);
	--toastify-text-color-dark: var(--ds-ink);
	--toastify-text-color-light: var(--ds-ink);
}
.bm-toast-site-notification.bm-toast-site-notification,
.bm-toast-site-message.bm-toast-site-message,
.bm-toast-close-all-notifications.bm-toast-close-all-notifications {
	border: 1px solid var(--ds-line);
	background: var(--ds-surface) !important;
	color: var(--ds-ink) !important;
	box-shadow: var(--ds-shadow-pop);
	font-family: var(--ek-font-body);
}
@media (min-width: 481px) {
	.bm-toast-site-notification.bm-toast-site-notification,
	.bm-toast-site-message.bm-toast-site-message {
		border-radius: var(--ek-radius);
		padding: 12px;
	}
}
.bm-toasts.bm-toasts .Toastify__close-button {
	color: var(--ds-ink2) !important;
	opacity: 1;
}
.bm-toast-push-proposal-container.bm-toast-push-proposal-container {
	background: transparent !important;
	color: var(--ds-ink) !important;
	font-family: var(--ek-font-body);
	font-size: .9375rem;
}
.bm-toast-push-proposal-container.bm-toast-push-proposal-container .bm-toast-push-proposal-title {
	margin-bottom: 12px;
	line-height: 1.45;
}
.bm-toast-push-proposal-container.bm-toast-push-proposal-container .bm-toast-push-proposal-content {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bm-toast-push-proposal-container.bm-toast-push-proposal-container .bm-toast-push-proposal-content > button {
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--ds-line);
	border-radius: 10px;
	background: transparent;
	color: var(--ds-accent-text) !important;
	font-family: var(--ek-font);
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: none;
}
.bm-toast-push-proposal-container.bm-toast-push-proposal-container .bm-toast-push-proposal-content > .bm-toast-push-proposal-agree {
	border-color: var(--ds-accent);
	background: var(--ds-accent);
	color: var(--ds-on-accent) !important;
}
.bm-toast-push-proposal-container.bm-toast-push-proposal-container .bm-toast-push-proposal-content > .bm-toast-push-proposal-dismiss:hover {
	background: var(--ds-surface2);
}