/*
 * Aurora skin over Better Messages 3.x (written against 3.0.12, 2 Oct 2026) —
 * Build Brief 5.6, 5.8, 5.10, 5.11, 5.12, 5.13 — plus the companion's own
 * surfaces (5.3, 5.4).
 *
 * ══════════════════════════════════════════════════════════════════════════
 * WHAT CHANGED WITH 3.x, AND WHY THIS SHEET IS SHORTER
 *
 * The 2.x sheet did three jobs. Each is done differently now.
 *
 * 1. **Colour.** 2.x read a couple of dozen variables (`--main-bm-color`,
 *    `--bm-text-color`, `--left-message-bg-color`, …) and this sheet set them.
 *    3.x reads NONE of them. It paints from `--bm-color-*` design tokens: 181
 *    of them, "R,G,B" triples, a light set on `:root` and a dark set under
 *    `body.bm-messages-dark` (assets/css/better-messages.min.css; schema in
 *    inc/design-schema.php). The block below answers each one that has a role
 *    in our palette with one of Dana's `--ds-*-rgb` triplets. It is GENERATED
 *    from the vendor's own token list by `scripts/dev/bm-token-map.py`; run
 *    that on every bump and never edit between its markers.
 *
 *    Dana's triplets follow Light, Dark and Night by themselves, so one block
 *    is three schemes. The vendor's own design screen (its light and dark
 *    pair, its presets) is therefore not how this messenger gets its colours.
 *
 * 2. **Out-specifying Reign.** About a third of the 2.x sheet was
 *    `html body.bm-messages-theme-scheme …` chains written to beat the Reign
 *    theme's own Better Messages skin. Reign went on 27 September; the chains
 *    went with this rewrite.
 *
 * 3. **Type and sizes**, rule by rule on vendor selectors. 3.x has tokens for
 *    those too (`--bm-messenger-font`, `--bm-font-size-x`, `--bm-radius`,
 *    `--bm-sidebar-width`), set once below.
 *
 * What is still CSS on vendor class names is listed where it sits, and gate
 * `sg-ms-messages-shell` checks every one of those names against the vendor's
 * own stylesheet and bundle on every run: in 2.x→3.x 34 of 62 went, and a dead
 * selector fails silently.
 *
 * **Not seen in a signed-in browser when written.** Every rule here was
 * derived from the vendor's source. The first walk is Kevin's.
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ── Tokens ────────────────────────────────────────────────────────────────
   On `<html>` AND on `<body>`, and both are needed:

   - the vendor's zone aliases (`--bm-zone-header-bg: var(--bm-color-bg)`) are
     declared on `:root`, and a custom property's `var()` is resolved where it
     is DECLARED; so the answers must be on `<html>` for those to pick up;
   - the vendor's dark set is declared on `<body>` (`body.bm-messages-dark`,
     and `body:not(.bm-messages-light)` under the phone's own dark setting),
     which is nearer than `<html>` to everything in the messenger; so the
     answers must be on `<body>` too, and more specific than those (0,1,1).

   `html:root` is (0,1,1) against the vendor's `:root` (0,1,0), including the
   copy its design screen prints inline; `html:root body` is (0,1,2). */
html:root,
html:root body {
	/* GENERATED: bm-token-map BEGIN */
	--bm-color-bg: var(--ds-surface-rgb);
	--bm-color-bg-secondary: var(--ds-bg-rgb);
	--bm-color-bg-elevated: var(--ds-surface-rgb);
	--bm-color-bg-hover: var(--ds-surface2-rgb);
	--bm-color-bg-active: var(--ds-surface2-rgb);
	--bm-color-toast-bg: var(--ds-surface-rgb);
	--bm-color-toast-text: var(--ds-ink-rgb);
	--bm-color-toast-border: var(--ds-line-rgb);
	--bm-color-card-bg: var(--ds-surface-rgb);
	--bm-color-card-border: var(--ds-line-rgb);
	--bm-color-inbox-bg: var(--ds-bg-rgb);
	--bm-color-inbox-text: var(--ds-ink-rgb);
	--bm-color-inbox-border: var(--ds-line-rgb);
	--bm-color-inbox-field: var(--ds-surface-rgb);
	--bm-color-inbox-accent: var(--ds-accent-rgb);
	--bm-color-inbox-accent-text: 255, 255, 255;
	--bm-color-inbox-accent-text-auto: 255, 255, 255;
	--bm-color-inbox-muted: var(--ds-ink2-rgb);
	--bm-color-inbox-preview: var(--ds-ink2-rgb);
	--bm-color-inbox-icon: var(--ds-ink2-rgb);
	--bm-color-list-bg: var(--ds-surface-rgb);
	--bm-color-list-text: var(--ds-ink-rgb);
	--bm-color-list-border: var(--ds-line-rgb);
	--bm-color-list-field: var(--ds-surface-rgb);
	--bm-color-list-accent: var(--ds-accent-rgb);
	--bm-color-list-accent-text: 255, 255, 255;
	--bm-color-list-accent-text-auto: 255, 255, 255;
	--bm-color-list-muted: var(--ds-ink2-rgb);
	--bm-color-list-preview: var(--ds-ink2-rgb);
	--bm-color-list-icon: var(--ds-ink2-rgb);
	--bm-color-icon: var(--ds-ink2-rgb);
	--bm-color-preview: var(--ds-ink2-rgb);
	--bm-color-preview-unread: var(--ds-ink-rgb);
	--bm-color-field-text-fallback: var(--ds-ink-rgb);
	--bm-color-field-text: var(--ds-ink-rgb);
	--bm-color-field-placeholder: var(--ds-ink2-rgb);
	--bm-color-header-bg: var(--ds-surface-rgb);
	--bm-color-header-text: var(--ds-ink-rgb);
	--bm-color-header-muted: var(--ds-ink2-rgb);
	--bm-color-header-border: var(--ds-line-rgb);
	--bm-color-reply-bg: var(--ds-surface-rgb);
	--bm-color-reply-text: var(--ds-ink-rgb);
	--bm-color-reply-muted: var(--ds-ink2-rgb);
	--bm-color-reply-border: var(--ds-line-rgb);
	--bm-color-reply-accent: var(--ds-accent-rgb);
	--bm-color-reply-accent-text: 255, 255, 255;
	--bm-color-reply-accent-text-auto: 255, 255, 255;
	--bm-color-mc-head-bg: var(--ds-surface-rgb);
	--bm-color-mc-head-text: var(--ds-ink-rgb);
	--bm-color-mc-head-muted: var(--ds-ink2-rgb);
	--bm-color-mc-head-border: var(--ds-line-rgb);
	--bm-color-mc-bg: var(--ds-surface-rgb);
	--bm-color-mc-text: var(--ds-ink-rgb);
	--bm-color-mc-muted: var(--ds-ink2-rgb);
	--bm-color-mc-border: var(--ds-line-rgb);
	--bm-color-mc-self-bg: var(--ds-accent-soft-rgb);
	--bm-color-mc-self-text: var(--ds-ink-rgb);
	--bm-color-mc-self-name: var(--ds-accent-text-rgb);
	--bm-color-mc-other-bg: var(--ds-surface2-rgb);
	--bm-color-mc-other-text: var(--ds-ink-rgb);
	--bm-color-mc-other-name: var(--ds-accent-text-rgb);
	--bm-color-mc-reply-bg: var(--ds-surface-rgb);
	--bm-color-mc-reply-text: var(--ds-ink-rgb);
	--bm-color-mc-reply-muted: var(--ds-ink2-rgb);
	--bm-color-mc-reply-border: var(--ds-line-rgb);
	--bm-color-mc-reply-accent: var(--ds-accent-rgb);
	--bm-color-mc-reply-accent-text: 255, 255, 255;
	--bm-color-mc-reply-accent-text-auto: 255, 255, 255;
	--bm-color-dock-bg: var(--ds-surface-rgb);
	--bm-color-dock-text: var(--ds-ink-rgb);
	--bm-color-dock-muted: var(--ds-ink2-rgb);
	--bm-color-dock-border: var(--ds-line-rgb);
	--bm-color-dock-accent: var(--ds-accent-rgb);
	--bm-color-dock-accent-text: 255, 255, 255;
	--bm-color-dock-accent-text-auto: 255, 255, 255;
	--bm-color-wlist-bg: var(--ds-surface-rgb);
	--bm-color-wlist-text: var(--ds-ink-rgb);
	--bm-color-wlist-preview: var(--ds-ink2-rgb);
	--bm-color-wlist-muted: var(--ds-ink2-rgb);
	--bm-color-wlist-icon: var(--ds-ink2-rgb);
	--bm-color-wlist-border: var(--ds-line-rgb);
	--bm-color-wlist-field: var(--ds-surface-rgb);
	--bm-color-wlist-accent: var(--ds-accent-rgb);
	--bm-color-wlist-accent-text: 255, 255, 255;
	--bm-color-wlist-accent-text-auto: 255, 255, 255;
	--bm-color-mob-head-bg: var(--ds-surface-rgb);
	--bm-color-mob-head-text: var(--ds-ink-rgb);
	--bm-color-mob-head-muted: var(--ds-ink2-rgb);
	--bm-color-mob-head-border: var(--ds-line-rgb);
	--bm-color-mob-bg: var(--ds-surface-rgb);
	--bm-color-mob-text: var(--ds-ink-rgb);
	--bm-color-mob-muted: var(--ds-ink2-rgb);
	--bm-color-mob-border: var(--ds-line-rgb);
	--bm-color-mob-self-bg: var(--ds-accent-soft-rgb);
	--bm-color-mob-self-text: var(--ds-ink-rgb);
	--bm-color-mob-self-name: var(--ds-accent-text-rgb);
	--bm-color-mob-other-bg: var(--ds-surface2-rgb);
	--bm-color-mob-other-text: var(--ds-ink-rgb);
	--bm-color-mob-other-name: var(--ds-accent-text-rgb);
	--bm-color-mob-reply-bg: var(--ds-surface-rgb);
	--bm-color-mob-reply-text: var(--ds-ink-rgb);
	--bm-color-mob-reply-muted: var(--ds-ink2-rgb);
	--bm-color-mob-reply-border: var(--ds-line-rgb);
	--bm-color-mob-reply-accent: var(--ds-accent-rgb);
	--bm-color-mob-reply-accent-text: 255, 255, 255;
	--bm-color-mob-reply-accent-text-auto: 255, 255, 255;
	--bm-color-mob-list-bg: var(--ds-surface-rgb);
	--bm-color-mob-list-text: var(--ds-ink-rgb);
	--bm-color-mob-list-preview: var(--ds-ink2-rgb);
	--bm-color-mob-list-muted: var(--ds-ink2-rgb);
	--bm-color-mob-list-icon: var(--ds-ink2-rgb);
	--bm-color-mob-list-border: var(--ds-line-rgb);
	--bm-color-mob-list-field: var(--ds-surface-rgb);
	--bm-color-mob-list-accent: var(--ds-accent-rgb);
	--bm-color-mob-list-accent-text: 255, 255, 255;
	--bm-color-mob-list-accent-text-auto: 255, 255, 255;
	--bm-color-mob-tabs-bg: var(--ds-surface-rgb);
	--bm-color-mob-tabs-icon: var(--ds-ink2-rgb);
	--bm-color-mob-tabs-border: var(--ds-line-rgb);
	--bm-color-mob-tabs-accent: var(--ds-accent-rgb);
	--bm-color-mob-tabs-accent-text: 255, 255, 255;
	--bm-color-mob-tabs-accent-text-auto: 255, 255, 255;
	--bm-color-surface: var(--ds-surface-rgb);
	--bm-color-chat-bg: var(--ds-surface-rgb);
	--bm-color-composer-bg: var(--ds-surface-rgb);
	--bm-color-text-primary: var(--ds-ink-rgb);
	--bm-color-text-secondary: var(--ds-ink-rgb);
	--bm-color-text-tertiary: var(--ds-ink2-rgb);
	--bm-color-text-disabled: var(--ds-ink2-rgb);
	--bm-color-text-link: var(--ds-accent-text-rgb);
	--bm-color-border: var(--ds-line-rgb);
	--bm-color-border-strong: var(--ds-line-rgb);
	--bm-color-border-subtle: var(--ds-line-rgb);
	--bm-color-accent: var(--ds-accent-rgb);
	--bm-color-accent-hover: var(--ds-accent-rgb);
	--bm-color-accent-pressed: var(--ds-accent-rgb);
	--bm-color-accent-subtle: var(--ds-accent-soft-rgb);
	--bm-color-text-on-accent: 255, 255, 255;
	--bm-color-bubble-self-bg: var(--ds-accent-soft-rgb);
	--bm-color-bubble-self-text: var(--ds-ink-rgb);
	--bm-color-bubble-self-nickname: var(--ds-accent-text-rgb);
	--bm-color-bubble-self-link: var(--ds-accent-text-rgb);
	--bm-color-bubble-self-outline: var(--ds-accent-soft-rgb);
	--bm-color-bubble-other-bg: var(--ds-surface2-rgb);
	--bm-color-bubble-other-text: var(--ds-ink-rgb);
	--bm-color-bubble-other-nickname: var(--ds-accent-text-rgb);
	--bm-color-bubble-other-link: var(--ds-accent-text-rgb);
	--bm-color-bubble-other-outline: var(--ds-line-rgb);
	--bm-color-bubble-self-seen: var(--ds-ink2-rgb);
	--bm-color-mention-bg: var(--ds-accent-soft-rgb);
	--bm-color-mention-text: var(--ds-accent-text-rgb);
	--bm-color-sticky-date-bg: var(--ds-surface2-rgb);
	--bm-color-sticky-date-text: var(--ds-ink-rgb);
	--bm-color-bubble-button-bg: var(--ds-accent-rgb);
	--bm-color-bubble-button-icon: 255, 255, 255;
	--bm-color-bubble-button-border: var(--ds-accent-rgb);
	/* GENERATED: bm-token-map END */

	/* Type: Outfit, larger than the vendor draws it, and times the member's own
	   text size (`--ek-text`, style.css; Kevin, 2 Oct 2026: "users with low
	   eyesight will have issues with the size of font and icons"). The vendor
	   has three size tokens (inc/design-schema.php), and its own sliders run to
	   22px and 140%, so its layout is built to take these:
	     - base: the message text itself. The vendor's is 15px; ours starts at 17.
	     - name: the sender's name over a message in a group. 12px; ours 14.
	     - x:    every label, button, preview and timestamp, as a multiple.
	             Capped at the vendor's own ceiling: past 140% its fixed-height
	             rows (the 44px headers) start to clip.
	   The first version of this block set only `x` (to 1.0667) and believed it
	   had raised the message text; it had not. */
	--bm-messenger-font: var(--ek-font);
	--bm-font-size-base: calc(17px * var(--ek-text, 1));
	--bm-font-size-name: calc(14px * var(--ek-text, 1));
	--bm-font-size-x: min(1.4, calc(1.1 * var(--ek-text, 1)));

	/* Corners: ours. Avatars stay round (the vendor's `--bm-radius-circle`). */
	--bm-radius: var(--ek-radius);
	--bm-radius-bubble: var(--ek-radius);

	/* Docked conversation window (5.12): 400px wide, pinned bottom-right. */
	--bm-mini-chat-width: 400px;
	--bm-mini-chat-height: 520px;
	--bm-mini-widget-width: 360px;
	--bm-mini-widget-height: 520px;
}

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

/* Every Better Messages wrapper (inc/functions.php get_page(), get_group_page(); inc/mini.php). */
.bm-wrap,
.bm-wrap-main,
.bm-single-thread-wrap,
.bm-mini-chat {
	font-family: var(--ek-font);
}

/*
 * The conversation header's icons stay the size the vendor draws them (18px).
 * They were 22px here, growing with the text size, from 2 Oct 2026 until Kevin
 * looked at it the same day: "the bigger size bumps the video and audio call
 * options off the bar. Make this the original size." The header is one fixed
 * row (44px, five buttons of 34px beside the name), with no room to give. So
 * nothing in this sheet sizes an icon in `.chat-header`, and the general rule
 * below leaves that row out.
 */

/*
 * A long name in the conversation header wraps to a second line (Kevin, 2 Oct
 * 2026: "a long group name could also push them off the bar. We need to wrap
 * long group names to prevent the icons from going away").
 *
 * The vendor's header (`.bm-thread-header`) is a row: back, the picture, the
 * name over its "3 members · 1 online" line, then the buttons. The buttons
 * already never shrink (`.bm-thread-header__actions`, flex 0 0 auto) and the
 * name's column gives way to them (`__body`, flex 1 1 0), so a long name does
 * not push a button off. What it did instead was vanish: the name is one line
 * with an ellipsis, and beside five buttons on a phone "Tuesday Night Men's
 * Group" read "Tues…".
 *
 * So the name may take two lines, breaking inside a long word if it must, and
 * is cut with an ellipsis only after the second. The row is no longer a fixed
 * height (73px, or 55px on a phone): those are its least, and it grows by the
 * extra line. It is a fixed-size item in a column, so the message list under
 * it takes what is left, as it does now. The buttons are restated as
 * unshrinkable here too, so that this rule and that promise live together.
 */
html .bm-thread-header {
	height: auto;
	min-height: 73px;
	padding-block: 8px;
}
html .bm-thread-header[data-compact="1"] {
	height: auto;
	min-height: 55px;
	padding-block: 6px;
}
html .bm-thread-header__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.2;
}
html .bm-thread-header__actions,
html .bm-thread-header__back,
html .bm-thread-header__avatar-btn {
	flex: 0 0 auto;
}

/*
 * On a phone the name has a row to itself, and the buttons the row under it
 * (Kevin, 2 Oct 2026, with a screenshot of "Tom as…" squeezed between the
 * picture and seven buttons: "Name is too cramped can we just put it on a row
 * above the tool bar").
 *
 * The header's four children are, in order: the back arrow, the picture, the
 * name's column, the buttons (the close × is one of the buttons). The header
 * may now wrap, and the buttons ask for a whole line, so the first line is
 * back arrow, picture and a name with everything that is left, and the second
 * is the buttons, at the right where a thumb is. Only where the vendor itself
 * says the header is narrow (`data-compact`, or its full-screen phone layer);
 * on a computer there is room and it stays one row.
 */
html .bm-thread-header[data-compact="1"],
html .bm-mobile .bm-thread-header {
	flex-wrap: wrap;
	row-gap: 2px;
	padding-block: 8px 4px;
}
html .bm-thread-header[data-compact="1"] .bm-thread-header__actions,
html .bm-mobile .bm-thread-header .bm-thread-header__actions {
	flex: 0 0 100%;
	justify-content: flex-end;
}

/*
 * Every Better Messages icon, 4px larger (Kevin, 2 Oct 2026: "The default
 * icons BM uses are too small. Bump them by 4px and let's see how it looks").
 *
 * The vendor draws each icon as an `<svg viewBox="0 0 24 24" aria-hidden>` with
 * its size written on it as `width` and `height` (its `Icon` component), and
 * no class. So the size it asked for is the handle: one rule per size the
 * client uses, each four more. From 10px to 24px. The 8px and 9px marks (the
 * ticks beside a sent message) and the large pictures of an empty screen (26px
 * and up) are left as drawn.
 *
 * This moves the pictures, not the buttons round them: a button is 8px of
 * padding round its icon, so it grows by the same four; a row with a fixed
 * height does not, and that is the thing to look for.
 *
 * The conversation header (`.chat-header`) is left out: see the note above.
 * The attach plus is sized further down, larger than this and growing with
 * the member's text size; its rule is written to outweigh these.
 */
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="10"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 14px; height: 14px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="11"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 15px; height: 15px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="12"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 16px; height: 16px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="13"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 17px; height: 17px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="14"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 18px; height: 18px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="15"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 19px; height: 19px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="16"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 20px; height: 20px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="17"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 21px; height: 21px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="18"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 22px; height: 22px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="20"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 24px; height: 24px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="22"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 26px; height: 26px; }
:is(.bm-wrap, .bm-wrap-main, .bm-single-thread-wrap, .bm-mini-chat, .bm-context-menu, .bm-modal-window, .bm-location-picker, .bm-emoji-popover) svg[viewBox="0 0 24 24"][aria-hidden="true"][width="24"]:not(.chat-header svg, .bm-thread-header-action svg) { width: 28px; height: 28px; }

/* Unread badges (5.11): the brand accent with white numerals. `.bm-unread-badge`
   is the companion's and the vendor add-ons' own; `.bp-better-messages-unread.bpbmuc`
   is the vendor's counter shortcode (inc/shortcodes.php), which kept its 2.x name.
   !important because the vendor's is. */
.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=''. */
.bm-wrap [class*="gif"],
.bm-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: var(--ds-line) !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 (`.bm-group-call-in-progress`, drawn by the
   client above the message list on the Messages screen and in docked windows):
   skinned to match the Live-Room strip (Build Brief 5.4) — solid Midnight,
   white text, an accent Join pill, no uppercase, no green. Kevin, 11 Sep 2026.
   3.x renamed the family `bpbm-…` → `bm-…`; the structure is the same. */
.bm-before-message-list .bm-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 .bm-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 .bm-group-call-participant-count {
	color: var(--ek-white) !important;
	opacity: 1 !important;
	font-weight: 700;
}
.bm-before-message-list .bm-group-call-in-progress-info svg,
.bm-before-message-list .bm-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;
}
.bm-wrap .bm-before-message-list .bm-group-call-in-progress .bm-group-call-in-progress-join button,
.bm-before-message-list .bm-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 .bm-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". */
.bm-before-message-list .bm-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);
}

/* ══════════════════════════════════════════════════════════════════════════
 * The Messages screen, inside the app shell (companion Chrome\Messages;
 * Kevin, 2 Oct 2026: "put it in the shell").
 *
 * `.ek-msgs` is the screen's own section, inside BuddyNext's swap region. The
 * 2.x rules stood on `body.ek-messages-page`; a body class is the wrong handle
 * now, because after an in-app page swap the body is still the page's the
 * member came from. Everything here stands on the section, or on the vendor's
 * own `bm-mobile`.
 *
 * The messenger is the vendor's main container with `bm-host-sized`
 * (`functions->get_page( [ 'host_sized' => true ] )`): no height of its own,
 * the host says how tall. Two cases, as before, and they are the vendor's to
 * choose between, not a width of ours:
 *
 * A. **In the page** (a computer; any browser the vendor does not call a
 *    phone). The container is where the section put it and fills what is left
 *    under the desktop bar.
 *
 * B. **The vendor's phone mode** (`bm-mobile`). 3.x MOVES the container out of
 *    the page: it becomes a child of `<body>`, `position: fixed`, the whole
 *    window, z-index 100000 (`useMobileFullScreen`; `.bm-wrap-main.bm-mobile`).
 *    So it cannot be reached through `.ek-msgs` at all; it is seated between
 *    our top row and the bottom bar by its own class. messaging.js takes it
 *    down when the member leaves the screen.
 * ══════════════════════════════════════════════════════════════════════════ */

/*
 * **The messenger is the whole centre column** (Kevin, 5 Oct 2026: "Messages is
 * special it needs to take up the whole center column"): edge to edge between
 * the rail and the window, from the desktop bar to the bottom of the window, no
 * page width, no gutters, and the page itself never scrolls; the list and the
 * thread scroll inside the vendor's panes.
 *
 * WHY IT DID NOT, after the page frame (f226d1f). Every rule here, and the
 * frame's own exclusion of this screen, stood on things a swap does not change:
 * `#bn-app[data-bn-hub]` and the body's classes are OUTSIDE BuddyNext's swap
 * region (`hub-shell.php`; `navigate.js` replaces `buddynext/main` and nothing
 * else). Arriving from Home by a tap, the hub still said "feed", so the frame
 * gave the messenger its 1128px panel, centred, inside 32px gutters and a 28px
 * top, and the page scrolled by the gutters' height (measured 5 Oct: 272px
 * either side at 1920, the page 83px taller than the window). So everything
 * here stands on the section itself, `:has(> .ek-msgs)`, which arrives and
 * leaves with the region; `frame.css` does the same.
 *
 * And the height is the window's, not a number. The pane was
 * `calc(100dvh - 77px)`: the bar's 68px plus an 8px gap and a 1px line it had on
 * 27 Sep 2026. The bar is 68px with its line now, so the messenger stopped 9px
 * short of the bottom on every desktop. On a desktop the shell is the window's
 * height for this screen and the column fills its row under the bar
 * (`grid-template-rows: auto minmax(0, 1fr)`, style.css), so a change to the
 * bar needs nothing here.
 */

/* The section is the whole column: no reading measure, no panel width. Above the
   frame's `.bn-app__main > *` (0,5,1) and the bare hubs' 640px (0,3,1). */
body .bn-app .bn-app__main:has(> .ek-msgs) > .ek-msgs.ek-msgs.ek-msgs {
	max-width: none;
	margin: 0;
	min-width: 0;
	width: 100%;
}

/* The vendor caps an in-page container at `100dvh - 40px` and floors it at 450px
   (`.bm-wrap-main:not(.bm-mobile):not(.bm-full-screen)`); the host knows better
   here, so both are lifted. */
.ek-msgs .bm-wrap-main:not(.bm-mobile):not(.bm-full-screen) {
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

/* The column keeps no air round a pane already sized to the window, at any
   width: since 2 Oct 2026 this screen has no top row of ours on a phone either
   (Kevin: "pull the top bar off the messages and let better messages take over
   the screen"). */
body .bn-app .bn-app__main:has(> .ek-msgs) {
	padding: 0;
}

@media (min-width: 768.02px) {
	/* Case A on a desktop: the shell is the window, the bar its first row, the
	   column the rest. The rail spans both rows (style.css). */
	.bn-app__shell:has(> .bn-app__region > .bn-app__main > .ek-msgs) {
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
	}
	.bn-app__shell > .bn-app__region > .bn-app__main:has(> .ek-msgs) {
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;
	}
	.bn-app__main > .ek-msgs.ek-msgs {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.ek-msgs .bm-wrap-main:not(.bm-mobile):not(.bm-full-screen) {
		flex: 1 1 auto;
		height: auto !important;
	}
}

@media (min-width: 768.02px) {
	/* The vendor's empty right-hand column gives its track back. */
	.bn-app__shell:has(.ek-msgs) .bn-app__right {
		display: none;
	}
	/* The list pane, wider for the larger type (was a width forced on
	   `.bp-messages-side-threads`; 3.x has the token, and animates it when the
	   member collapses the pane to its rail). */
	.ek-msgs {
		--bm-sidebar-width: 380px;
	}
}

@media (max-width: 768px) {
	/* Case A on a narrow window that is not a phone: from the top of the window
	   to the bottom bar, whose real height BuddyNext publishes. */
	.ek-msgs .bm-wrap-main:not(.bm-mobile):not(.bm-full-screen) {
		height: calc(100dvh - var(--bn-mobile-nav-h, 60px)) !important;
	}
}

/* Case B. `top` and `bottom`, never a height: a height has to be recomputed
   whenever either bar changes. Above 768px the bar over it is the desktop
   bar. Below, it is the whole window (Kevin, 2 Oct 2026: "let better messages
   take over the screen"), under the phone's own status area where there is
   one. The bottom bar is not under it: the vendor hides every fixed element of
   the host that its layer overlaps (`hideOverlappingHostChrome`), the bar
   included, so a gap left for the bar was an empty band. The way out is the
   vendor's own close control, which messaging.js sends Home. */
body.bm-mobile > .bm-wrap-main.bm-mobile {
	top: 77px !important;
	bottom: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}
@media (max-width: 768px) {
	body.bm-mobile > .bm-wrap-main.bm-mobile {
		top: env(safe-area-inset-top, 0px) !important;
		bottom: 0 !important;
	}
}

/* On a phone the messenger is only ever the layer above. Its in-page copy is
   what the vendor falls back to for a moment before it takes over, and again
   when its close control is used: a short box saying "Tap to open messages"
   over our own bottom bar, which read as a broken screen (Kevin, 2 Oct 2026).
   Kept in the layout (the vendor will not take over a box that is not laid
   out) and not shown. `bm-mobile-device` is the vendor's own word for a phone. */
body.bm-mobile-device .ek-msgs .bm-wrap-main:not(.bm-mobile):not(.bm-full-screen) {
	visibility: hidden;
}
/* The page behind the phone layer does not scroll sideways under it. */
body.bm-mobile:has(.ek-msgs) { overflow-x: hidden; }

/* Nothing to expand into, nothing to minimise into: the screen IS the
   messenger (Kevin, 11 Sep 2026). Both controls sit in `.chat-header`. */
.ek-msgs .chat-header .bm-maximize,
.ek-msgs .chat-header .bm-minimize,
body.bm-mobile > .bm-wrap-main .chat-header .bm-maximize,
body.bm-mobile > .bm-wrap-main .chat-header .bm-minimize {
	display: none !important;
}

/* The Messages / Groups tabs of the list pane, in Dana's accent (Kevin, 27 Sep
   2026: "could use some accent when active"). The vendor's active tab is its
   secondary background; this is the same blue as the rail's current row. */
.bm-wrap .bm-side-tabs > div.active {
	background: var(--ds-accent) !important;
}
.bm-wrap .bm-side-tabs > div.active,
.bm-wrap .bm-side-tabs > div.active * {
	color: var(--ds-on-accent) !important;
}

/* Groups list (the vendor's `.bm-groups`): no inline "Search..." box. The
   header magnifier searches conversations, and a group thread is one (Kevin,
   11 Sep 2026). */
.bm-wrap .bm-groups .bm-search-in-list {
	display: none !important;
}

/* Participant name links (messaging.js wraps the name in the avatar's link). */
.bm-user-list .bm-name .ek-participant-link {
	color: inherit !important;
	text-decoration: none !important;
	cursor: pointer;
}
.bm-user-list .bm-name .ek-participant-link:hover,
.bm-user-list .bm-name .ek-participant-link:focus-visible {
	color: var(--ds-accent-text) !important;
	text-decoration: underline !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-radius-avatar, 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); }
	}
}

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

/*
 * The box you write in is the size of the messages you read (Kevin, 2 Oct
 * 2026: "Our text size setting should apply to the write your message area
 * too").
 *
 * The vendor sizes it twice, and the two disagree: `.bm-composer
 * .bm-editor-content` takes the message size (`--bm-font-size-base`), but an
 * older rule, `.bm-wrap .bm-reply .bm-editor *`, outweighs it with the
 * INTERFACE size and a line fixed at 24px. The interface size is the one this
 * sheet caps at the vendor's 140%, so what a member typed stopped growing
 * while what they read went on to 150%, and at the larger sizes its fixed line
 * was shorter than its letters. Stated once here, with weight over both: the
 * message size, a line that follows it, and room for about four lines before
 * the box scrolls, at any size. The placeholder ("Write your message") is the
 * box's own text and follows.
 */
html .bm-composer .bm-editor-content,
html .bm-wrap .bm-reply .bm-editor,
html .bm-wrap .bm-reply .bm-editor .bm-editor-content,
html .bm-wrap .bm-reply .bm-editor .bm-editor-content :where(p, div, span, a, b, i, em, strong, u, s, li) {
	font-size: var(--bm-font-size-base) !important;
	line-height: 1.4 !important;
}
html .bm-composer .bm-editor-content {
	max-height: calc(160px * var(--ek-text, 1));
}
html .bm-wrap .bm-reply .bm-editor {
	max-height: calc(150px * var(--ek-text, 1));
}

/*
 * The attach button is a plus, not a paperclip (Kevin, 2 Oct 2026: "The
 * paperclip was not intuitive for me… can we change it to a + sign?").
 *
 * The button opens a menu of three things (Upload files, Camera, Share
 * location), and a paperclip says only the first. A plus in a circle is what
 * Android's own Messages draws in the same place. The vendor's button, its
 * label ("Add attachment"), its count badge and its click are untouched; only
 * the picture changes: the paperclip's own paths are hidden and the plus is
 * painted through a mask in the button's current colour, so hover, the accent
 * it takes when files are attached, and Light, Dark and Night all follow. The
 * same technique as the group call icons above, and for the same reason: the
 * vendor re-draws the composer, so a script would have to keep up with it.
 * A little larger than the vendor's 18px, and it grows with the member's text
 * size. `html` in front for weight over the vendor's own icon rule.
 */
html .bm-wrap .bm-composer__attach-wrap svg[viewBox][aria-hidden][width],
html .bm-composer__attach-wrap .bm-btn svg,
html .bm-composer__attach-wrap button svg {
	width: min(30px, calc(24px * var(--ek-text, 1)));
	height: min(30px, calc(24px * var(--ek-text, 1)));
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v9M7.5 12h9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v9M7.5 12h9'/%3E%3C/svg%3E") center / contain no-repeat;
}
html .bm-composer__attach-wrap .bm-btn svg > *,
html .bm-composer__attach-wrap button svg > * {
	display: none;
}

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