/**
 * Monkey Bros Radio Chat — widget styles.
 *
 * Built on the Nocturne design-system tokens from the Claude Design project.
 * Every token is namespaced (--mbrc-*) so the widget keeps its look inside
 * any WordPress theme, and mapped onto the design's own names where the
 * component classes below expect them.
 */

.mbrc-root {
	/* Retuned from the Monkey Bros Radio player: pure-black ground, the
	   station's cyan (#80d0d8, sampled from the play button) as the accent,
	   and white text. Nocturne's structure is intact — only the hues moved. */
	--mbrc-bg: #000000;
	--mbrc-surface: #0b0e0f;
	--mbrc-text: #ffffff;
	--mbrc-accent: #7fd4db;
	--mbrc-accent-2: #a8e4e9;
	--mbrc-divider: color-mix(in srgb, #7fd4db 24%, transparent);
	/* One step above the surface, for inputs and anything that should read
	   as inset against the panel. */
	--mbrc-bubble-bg: #161b1d;

	--mbrc-neutral-100: #f4fbfc;
	--mbrc-neutral-200: #dceff1;
	--mbrc-neutral-300: #bcdfe3;
	--mbrc-neutral-400: #93b8bd;
	--mbrc-neutral-500: #6f9297;
	--mbrc-neutral-600: #557276;
	--mbrc-neutral-700: #3d5457;
	--mbrc-neutral-800: #26383a;
	--mbrc-neutral-900: #131e20;

	--mbrc-accent-100: #f0fcfd;
	--mbrc-accent-200: #d6f5f7;
	--mbrc-accent-300: #b3ebef;
	--mbrc-accent-400: #8fdfe5;
	--mbrc-accent-500: #7fd4db;
	--mbrc-accent-600: #5cb3ba;
	--mbrc-accent-700: #438e95;
	--mbrc-accent-800: #2c6167;
	--mbrc-accent-900: #1a3c40;

	/* Text that sits on a filled cyan surface. */
	--mbrc-on-accent: #02181a;

	/* The station's own voice. Cyan is the listeners' colour — it is on every
	   nickname and every donation — so anything the station says needs a hue
	   that cannot be mistaken for it at a glance. Amber is the far side of the
	   wheel from this cyan and stays legible on black. */
	--mbrc-station: #ffb63d;
	--mbrc-station-2: #ffd694;
	--mbrc-station-dim: #a8712a;
	--mbrc-on-station: #1c1000;

	--mbrc-font-heading: "Inter", system-ui, sans-serif;
	--mbrc-font-heading-weight: 500;
	--mbrc-font-body: "Inter", system-ui, sans-serif;

	--mbrc-space-1: 2.8px;
	--mbrc-space-2: 5.6px;
	--mbrc-space-3: 8.4px;
	--mbrc-space-4: 11.2px;
	--mbrc-space-6: 16.8px;
	--mbrc-space-8: 22.4px;

	--mbrc-radius-sm: 4px;
	--mbrc-radius-md: 8px;
	--mbrc-radius-lg: 14px;

	/* On a pure-black page a drop shadow does nothing, so elevation is
	   carried by the ring instead. */
	--mbrc-shadow-sm: 0 0 0 1px #26383a;
	--mbrc-shadow-md: 0 0 0 1px #3d5457, 0 8px 24px rgba(0, 0, 0, .9);
	--mbrc-shadow-lg: 0 0 0 1px #6f9297, 0 18px 48px rgba(0, 0, 0, .95);

	--mbrc-chat-height: 380px;

	display: block;
	max-width: 820px;
	margin-inline: auto;
	color: var(--mbrc-text);
	font-family: var(--mbrc-font-body);
	font-size: 15px;
	line-height: 1.55;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

.mbrc-root *,
.mbrc-root *::before,
.mbrc-root *::after {
	box-sizing: border-box;
}

.mbrc-root button {
	font-family: inherit;
	margin: 0;
}

/* The layout rules below set display on elements the client toggles with the
   `hidden` attribute, which would otherwise out-specify the UA default. */
.mbrc-root [hidden] { display: none !important; }

.mbrc-root a {
	color: var(--mbrc-accent);
	text-underline-offset: 3px;
}

.mbrc-root :focus { outline: none; }

.mbrc-root :focus-visible {
	outline: 2px solid var(--mbrc-accent);
	outline-offset: 2px;
}

.mbrc-root ::selection {
	background: color-mix(in srgb, var(--mbrc-accent) 30%, transparent);
}

/* ==========================================================================
   Shell
   ========================================================================== */

.mbrc-card {
	background: var(--mbrc-surface);
	border-radius: var(--mbrc-radius-lg);
	box-shadow: var(--mbrc-shadow-md);
	overflow: hidden;
}

.mbrc-head {
	display: flex;
	align-items: center;
	gap: var(--mbrc-space-4);
	padding: var(--mbrc-space-4) var(--mbrc-space-6);
}

.mbrc-head-main {
	flex: 1;
	min-width: 0;
}

.mbrc-head-title {
	font-family: var(--mbrc-font-heading);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.mbrc-head-as {
	font-size: 12.5px;
	color: var(--mbrc-neutral-400);
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mbrc-head-nick {
	color: var(--mbrc-accent-300);
	font-weight: 600;
}

.mbrc-head-change { color: var(--mbrc-accent-300); text-decoration: underline; }

/* The listener count is the one live number on the widget, so it gets to
   look like a readout rather than a caption. */
.mbrc-head-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex: none;
	padding: 7px 13px;
	border-radius: var(--mbrc-radius-md);
	background: color-mix(in srgb, var(--mbrc-accent) 12%, #000000);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mbrc-accent) 30%, transparent);
	text-align: right;
	line-height: 1.2;
	cursor: default;
}

.mbrc-head-stat-top {
	display: flex;
	align-items: center;
	gap: 7px;
}

.mbrc-head-stat-value {
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 23px;
	letter-spacing: -.01em;
	color: var(--mbrc-text);
	font-variant-numeric: tabular-nums;
	/* Lit from the same cyan as the dot beside it, so the pair reads as one
	   live indicator rather than a number that happens to sit near a light. */
	text-shadow:
		0 0 14px color-mix(in srgb, var(--mbrc-accent) 60%, transparent),
		0 0 30px color-mix(in srgb, var(--mbrc-accent) 30%, transparent);
}

/* The number only moves every quarter hour, so when it does it earns a
   moment of attention. */
.mbrc-head-stat-value.is-bumped {
	animation: mbrc-bump .45s cubic-bezier(.34, 1.5, .64, 1);
}

@keyframes mbrc-bump {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.22); }
	100% { transform: scale(1); }
}

/* One word, bold. The dot and the number already say "live" and "how many",
   so the label only has to name what is being counted. */
.mbrc-head-stat-label {
	font-family: var(--mbrc-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--mbrc-accent);
	white-space: nowrap;
}

/* A lit dot: a constant halo, plus a slow ring breathing outwards. The two
   shadows are layered in one property so the glow never blinks out with the
   ring. */
.mbrc-live-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	background: var(--mbrc-accent);
	box-shadow:
		0 0 6px 1px var(--mbrc-accent),
		0 0 14px 3px color-mix(in srgb, var(--mbrc-accent) 55%, transparent);
	animation: mbrc-live-glow 2.8s ease-in-out infinite;
}

.mbrc-live-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: mbrc-live-ring 2.8s ease-out infinite;
}

@keyframes mbrc-live-glow {
	0%, 100% {
		box-shadow:
			0 0 6px 1px var(--mbrc-accent),
			0 0 14px 3px color-mix(in srgb, var(--mbrc-accent) 55%, transparent);
	}
	50% {
		box-shadow:
			0 0 9px 2px var(--mbrc-accent),
			0 0 22px 5px color-mix(in srgb, var(--mbrc-accent) 70%, transparent);
	}
}

@keyframes mbrc-live-ring {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mbrc-accent) 60%, transparent); }
	70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--mbrc-accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mbrc-accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.mbrc-live-dot,
	.mbrc-live-dot::after,
	.mbrc-head-stat-value.is-bumped { animation: none; }
}

/* ==========================================================================
   Buttons — Nocturne .btn family
   ========================================================================== */

.mbrc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--mbrc-font-heading);
	font-weight: var(--mbrc-font-heading-weight);
	font-size: 14px;
	line-height: 1.2;
	color: var(--mbrc-text);
	background: transparent;
	border: 1px solid transparent;
	padding: var(--mbrc-space-2) calc(var(--mbrc-space-3) * 1.2);
	border-radius: var(--mbrc-radius-md);
}

.mbrc-btn svg { display: block; }

.mbrc-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Solid cyan, echoing the player's play button — the loudest thing on the
   page should be the thing you press. */
.mbrc-btn-primary {
	background: var(--mbrc-accent);
	color: var(--mbrc-on-accent);
	border-color: var(--mbrc-accent);
	font-weight: 600;
}

.mbrc-btn-primary:hover:not(:disabled) {
	background: var(--mbrc-accent-400);
	border-color: var(--mbrc-accent-400);
}

.mbrc-btn-primary:active:not(:disabled) {
	background: var(--mbrc-accent-600);
	border-color: var(--mbrc-accent-600);
}

.mbrc-btn-secondary {
	border-color: var(--mbrc-divider);
	color: var(--mbrc-accent-200);
}

.mbrc-btn-secondary:hover:not(:disabled) {
	background: color-mix(in srgb, var(--mbrc-accent) 14%, transparent);
	border-color: var(--mbrc-accent);
	color: var(--mbrc-text);
}

.mbrc-btn-secondary:active:not(:disabled) { background: color-mix(in srgb, var(--mbrc-accent) 24%, transparent); }

.mbrc-btn-ghost {
	color: var(--mbrc-accent);
	padding-inline: var(--mbrc-space-1);
}

.mbrc-btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--mbrc-accent) 10%, transparent); }
.mbrc-btn-ghost:active:not(:disabled) { background: color-mix(in srgb, var(--mbrc-accent) 18%, transparent); }

.mbrc-btn-icon {
	width: 36px;
	height: 36px;
	padding: 0;
	flex: none;
}

/* ==========================================================================
   Fields — Nocturne .field / .input
   ========================================================================== */

.mbrc-field > label {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
	color: color-mix(in srgb, var(--mbrc-text) 70%, transparent);
}

.mbrc-input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	font: inherit;
	font-size: 14px;
	color: var(--mbrc-text);
	caret-color: var(--mbrc-accent);
	background: var(--mbrc-surface);
	border: 1px solid var(--mbrc-divider);
	border-radius: var(--mbrc-radius-md);
}

.mbrc-input::placeholder { color: var(--mbrc-neutral-500); }
.mbrc-input:hover { border-color: color-mix(in srgb, var(--mbrc-text) 45%, transparent); }

.mbrc-input:focus-visible {
	border-color: var(--mbrc-accent);
	outline-offset: 0;
}

/* Hide the number spinners on the captcha and amount inputs. */
.mbrc-input[type="number"]::-webkit-outer-spin-button,
.mbrc-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mbrc-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Browsers paint autofilled fields with their own pale background, which
   turns the composer light blue on a dark panel. The inset shadow is the
   only reliable way to override it; the long transition keeps it from
   flashing back on refocus. */
.mbrc-root input:-webkit-autofill,
.mbrc-root input:-webkit-autofill:hover,
.mbrc-root input:-webkit-autofill:focus,
.mbrc-root input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--mbrc-text);
	-webkit-box-shadow: 0 0 0 1000px var(--mbrc-bubble-bg, #2a2d3d) inset;
	box-shadow: 0 0 0 1000px var(--mbrc-bubble-bg, #2a2d3d) inset;
	caret-color: var(--mbrc-accent);
	border-color: var(--mbrc-divider);
	transition: background-color 9999s ease-out 0s;
}

.mbrc-root input:autofill {
	-webkit-text-fill-color: var(--mbrc-text);
	box-shadow: 0 0 0 1000px var(--mbrc-bubble-bg, #2a2d3d) inset;
}

/* ==========================================================================
   Join gate
   ========================================================================== */

.mbrc-gate {
	border-top: 1px solid var(--mbrc-divider);
	padding: var(--mbrc-space-6) var(--mbrc-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--mbrc-space-3);
	align-items: flex-start;
}

.mbrc-gate:first-child { border-top: 0; }

.mbrc-gate .mbrc-field {
	width: 100%;
	max-width: 320px;
}

.mbrc-gate-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.mbrc-gate-hint {
	margin: 0;
	font-size: 12px;
	color: var(--mbrc-neutral-500);
}

.mbrc-gate-error {
	margin: 0;
	font-size: 12px;
	color: #ff9d9d;
}

.mbrc-gate-loading {
	margin: 0;
	font-size: 13px;
	color: var(--mbrc-neutral-500);
}

/* ==========================================================================
   Chat
   ========================================================================== */

.mbrc-chat {
	position: relative;
	border-top: 1px solid var(--mbrc-divider);
	display: flex;
	flex-direction: column;
	height: var(--mbrc-chat-height);
	/* A flex item will not shrink below its content unless told to. Without
	   this, a long conversation inflates the chat instead of scrolling the
	   list, and the composer is pushed off the bottom. */
	min-height: 0;
}

.mbrc-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--mbrc-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--mbrc-space-2);
	scrollbar-width: thin;
	scrollbar-color: var(--mbrc-neutral-700) transparent;
}

/* A half-empty room should look like a chat waiting for the next message,
   not like a broken layout. Pushing the first item down keeps the messages
   sitting on the composer, with the empty space above them — and it still
   scrolls normally once the list overflows. */
.mbrc-list > :first-child { margin-top: auto; }

.mbrc-list::-webkit-scrollbar { width: 8px; }
.mbrc-list::-webkit-scrollbar-track { background: transparent; }

.mbrc-list::-webkit-scrollbar-thumb {
	background: var(--mbrc-neutral-800);
	border-radius: 99px;
	border: 2px solid transparent;
	background-clip: content-box;
}

/* --------------------------------------------------------------- messages */

.mbrc-msg {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 9px 12px;
	border-radius: var(--mbrc-radius-md);
	background: #101416;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mbrc-accent) 10%, transparent);
	transition: background .15s ease, box-shadow .15s ease;
}

.mbrc-msg:hover {
	background: #161c1e;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mbrc-accent) 26%, transparent);
}

/* Runs from the same person collapse into one block: the avatar and name
   are printed once and the following lines tuck in underneath. */
.mbrc-msg-grouped {
	margin-top: -4px;
	padding-top: 1px;
	padding-bottom: 5px;
	background: transparent;
	box-shadow: none;
}

.mbrc-msg-grouped:hover {
	background: #101416;
	box-shadow: none;
}
.mbrc-msg-grouped .mbrc-avatar { visibility: hidden; height: 0; }
.mbrc-msg-grouped .mbrc-msg-meta { display: none; }

.mbrc-avatar {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--mbrc-font-heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .02em;
	user-select: none;
	text-transform: uppercase;
}

.mbrc-msg-body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mbrc-msg-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.mbrc-msg-nick {
	font-family: var(--mbrc-font-heading);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mbrc-msg-time {
	font-size: 11px;
	color: var(--mbrc-neutral-600);
	flex: none;
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.mbrc-msg-text {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--mbrc-text);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* A message that is nothing but emoji reads better big. */
.mbrc-msg-emoji .mbrc-msg-text {
	font-size: 26px;
	line-height: 1.15;
}

/* Donation message — accent gradient panel from the design, scaled up to
   match the heavier message cards around it. */
.mbrc-msg-donation {
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--mbrc-accent) 26%, #000000),
		color-mix(in srgb, var(--mbrc-accent) 9%, #000000)
	);
	border: 1px solid var(--mbrc-accent);
	border-radius: var(--mbrc-radius-md);
	box-shadow: 0 0 22px color-mix(in srgb, var(--mbrc-accent) 22%, transparent);
}

.mbrc-msg-donation:hover {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--mbrc-accent) 32%, #000000),
		color-mix(in srgb, var(--mbrc-accent) 12%, #000000)
	);
	box-shadow: 0 0 28px color-mix(in srgb, var(--mbrc-accent) 30%, transparent);
}

.mbrc-msg-donation .mbrc-msg-inner {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.mbrc-msg-donation .mbrc-msg-text { color: var(--mbrc-text); }

.mbrc-donation-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.mbrc-donation-head svg {
	width: 14px;
	height: 14px;
	flex: none;
	fill: var(--mbrc-accent-300);
}

.mbrc-donation-label {
	font-family: var(--mbrc-font-heading);
	font-weight: var(--mbrc-font-heading-weight);
	font-size: 12px;
	color: var(--mbrc-accent-300);
	letter-spacing: .02em;
}

.mbrc-msg-delete {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: var(--mbrc-radius-sm);
	background: transparent;
	border: 0;
	color: var(--mbrc-neutral-500);
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease, color .15s ease;
}

.mbrc-msg:hover .mbrc-msg-delete,
.mbrc-msg:focus-within .mbrc-msg-delete { opacity: 1; }

.mbrc-msg-delete:hover { color: #ff9d9d; }
.mbrc-msg-delete svg { width: 12px; height: 12px; }

.mbrc-list-empty {
	margin: auto;
	padding: var(--mbrc-space-8) var(--mbrc-space-4);
	font-size: 14px;
	line-height: 1.5;
	color: var(--mbrc-neutral-500);
	text-align: center;
	max-width: 34ch;
}

.mbrc-notice {
	align-self: center;
	max-width: 92%;
	padding: 6px 12px;
	border-radius: var(--mbrc-radius-md);
	background: color-mix(in srgb, var(--mbrc-text) 8%, transparent);
	color: var(--mbrc-neutral-300);
	font-size: 12px;
	text-align: center;
}

.mbrc-notice-error {
	background: color-mix(in srgb, #ff6b6b 16%, transparent);
	color: #ffb3b3;
}

.mbrc-notice-success {
	background: color-mix(in srgb, var(--mbrc-accent) 18%, transparent);
	color: var(--mbrc-accent-200);
}

/* ==========================================================================
   Composer
   ========================================================================== */

.mbrc-composer {
	position: relative;
	border-top: 1px solid var(--mbrc-divider);
	padding: var(--mbrc-space-3) var(--mbrc-space-4);
	display: flex;
	gap: 8px;
	align-items: center;
	background: #070a0b;
}

.mbrc-composer .mbrc-input {
	flex: 1;
	min-height: 44px;
	font-size: 15px;
	padding: 8px 14px;
	background: var(--mbrc-bubble-bg, #2a2d3d);
}

.mbrc-composer .mbrc-btn { flex: none; }

.mbrc-composer .mbrc-btn-icon {
	width: 44px;
	height: 44px;
}

.mbrc-composer .mbrc-btn-primary {
	min-height: 44px;
	padding-inline: var(--mbrc-space-6);
	font-size: 15px;
	font-weight: 600;
}

/* The heart pulses gently so listeners notice it. */
.mbrc-heart-btn {
	color: var(--mbrc-accent-300);
	border-color: var(--mbrc-accent-700);
	animation: mbrc-heart-glow 4s ease-in-out infinite;
}

@keyframes mbrc-heart-glow {
	0%, 85%, 100% { box-shadow: 0 0 0 0 transparent; }
	92% { box-shadow: 0 0 10px 2px color-mix(in srgb, var(--mbrc-accent) 55%, transparent); }
}

/* Emoji picker */
.mbrc-emoji-panel {
	position: absolute;
	right: 12px;
	bottom: 52px;
	z-index: 5;
	background: var(--mbrc-surface);
	box-shadow: var(--mbrc-shadow-lg);
	border-radius: var(--mbrc-radius-md);
	padding: 8px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	animation: mbrc-pop-in .12s ease-out;
}

.mbrc-emoji-panel button {
	background: transparent;
	border: none;
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
	border-radius: var(--mbrc-radius-sm);
	line-height: 1;
}

.mbrc-emoji-panel button:hover {
	background: color-mix(in srgb, var(--mbrc-accent) 18%, transparent);
}

@keyframes mbrc-pop-in {
	0%   { transform: scale(.6); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Heart bursts
   ========================================================================== */

.mbrc-bursts {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.mbrc-burst {
	position: absolute;
	bottom: 60px;
	font-size: 22px;
	animation: mbrc-fly-up 1.1s ease-out forwards;
	pointer-events: none;
}

@keyframes mbrc-fly-up {
	0%   { transform: translate(-50%, 0) scale(.8); opacity: 0; }
	15%  { transform: translate(-50%, -10px) scale(1.1); opacity: 1; }
	100% { transform: translate(calc(-50% + var(--mbrc-drift)), -140px) scale(.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mbrc-burst,
	.mbrc-heart-btn,
	.mbrc-emoji-panel { animation: none; }
}

/* ==========================================================================
   Donation dialog
   ========================================================================== */

/* Also carries .mbrc-root (see the client), so these override that block's
   own layout rather than fighting it. */
.mbrc-dialog-backdrop.mbrc-root,
.mbrc-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: var(--mbrc-space-4);
	max-width: none;
	margin: 0;
	background: color-mix(in srgb, #000000 78%, transparent);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: mbrc-fade-in .14s ease-out;
}

@keyframes mbrc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.mbrc-dialog {
	width: min(400px, 100%);
	display: flex;
	flex-direction: column;
	gap: var(--mbrc-space-4);
	padding: var(--mbrc-space-6);
	border-radius: var(--mbrc-radius-lg);
	background: #0b0e0f;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--mbrc-accent) 34%, transparent),
		0 0 40px color-mix(in srgb, var(--mbrc-accent) 16%, transparent),
		0 24px 60px rgba(0, 0, 0, .95);
	animation: mbrc-pop-in .16s cubic-bezier(.34, 1.4, .64, 1);
}

.mbrc-dialog-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--mbrc-font-heading);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--mbrc-text);
}

.mbrc-dialog-title svg {
	width: 19px;
	height: 19px;
	flex: none;
	fill: var(--mbrc-accent);
}

.mbrc-dialog-body {
	font-size: 14px;
	display: flex;
	flex-direction: column;
	gap: var(--mbrc-space-4);
}

/* The dialog's own labels sit above inputs on a darker ground than the
   widget's, so they get a little more presence. */
.mbrc-dialog .mbrc-field > label {
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mbrc-neutral-400);
	margin-bottom: 7px;
}

.mbrc-dialog .mbrc-input {
	min-height: 44px;
	font-size: 15px;
	padding: 8px 14px;
	background: var(--mbrc-bubble-bg);
}

.mbrc-amounts {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.mbrc-amount {
	padding: 10px 18px;
	border-radius: var(--mbrc-radius-md);
	cursor: pointer;
	font-family: var(--mbrc-font-heading);
	font-weight: 600;
	font-size: 15px;
	border: 1px solid var(--mbrc-neutral-700);
	background: var(--mbrc-bubble-bg);
	color: var(--mbrc-text);
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.mbrc-amount:hover {
	border-color: var(--mbrc-accent);
	transform: translateY(-1px);
}

/* The chosen amount is filled, matching the Send button and the player's
   own solid-cyan control. */
.mbrc-amount.is-selected {
	border-color: var(--mbrc-accent);
	background: var(--mbrc-accent);
	color: var(--mbrc-on-accent);
}

.mbrc-amount-custom {
	flex: 1 1 150px;
	min-width: 150px;
	min-height: 44px;
}

.mbrc-dialog-actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--mbrc-space-2);
	margin-top: var(--mbrc-space-2);
	flex-wrap: wrap;
}

/* Pinned left by the auto margin, so the primary action keeps the right. */
.mbrc-help-btn {
	margin-right: auto;
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--mbrc-neutral-700);
	background: transparent;
	color: var(--mbrc-neutral-400);
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.mbrc-help-btn:hover,
.mbrc-help-btn.is-open {
	color: var(--mbrc-on-accent);
	background: var(--mbrc-accent);
	border-color: var(--mbrc-accent);
}

.mbrc-help-pop {
	position: absolute;
	left: 0;
	bottom: calc(100% + 10px);
	z-index: 3;
	width: min(300px, calc(100vw - 64px));
	display: flex;
	flex-direction: column;
	gap: var(--mbrc-space-3);
	padding: var(--mbrc-space-4);
	border-radius: var(--mbrc-radius-md);
	background: var(--mbrc-bubble-bg);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--mbrc-accent) 30%, transparent),
		0 12px 30px rgba(0, 0, 0, .9);
	animation: mbrc-pop-in .12s ease-out;
	text-align: left;
}

/* A small pointer back down to the button. */
.mbrc-help-pop::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 100%;
	border: 6px solid transparent;
	border-top-color: var(--mbrc-bubble-bg);
}

.mbrc-help-note {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Greek leads, English follows in a quieter tone — the pair reads as one
   note rather than two competing lines. */
.mbrc-help-el {
	font-size: 13px;
	line-height: 1.4;
	color: var(--mbrc-text);
}

.mbrc-help-en {
	font-size: 12px;
	line-height: 1.4;
	color: var(--mbrc-neutral-400);
}

.mbrc-dialog-error {
	margin: 0;
	font-size: 12px;
	color: #ff9d9d;
}

/* The escape hatch when the quick check will not load. */
.mbrc-cap-retry {
	align-self: flex-start;
	margin-top: 6px;
}

/* ==========================================================================
   Station announcements
   --------------------------------------------------------------------------
   The whole point of an announcement is that nobody mistakes it for chatter,
   so it differs on four axes at once — hue, a solid left bar, a badge, and
   its own glow. Any one of those alone is a thing a listener could learn to
   ignore.
   ========================================================================== */

.mbrc-msg-announce {
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 12px 16px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--mbrc-station) 22%, #000000),
		color-mix(in srgb, var(--mbrc-station) 7%, #000000)
	);
	border: 1px solid color-mix(in srgb, var(--mbrc-station) 70%, transparent);
	border-left: 4px solid var(--mbrc-station);
	border-radius: var(--mbrc-radius-md);
	box-shadow: 0 0 22px color-mix(in srgb, var(--mbrc-station) 20%, transparent);
}

.mbrc-msg-announce:hover {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--mbrc-station) 28%, #000000),
		color-mix(in srgb, var(--mbrc-station) 10%, #000000)
	);
	box-shadow: 0 0 28px color-mix(in srgb, var(--mbrc-station) 28%, transparent);
}

.mbrc-announce-head {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
}

.mbrc-announce-head svg {
	width: 14px;
	height: 14px;
	flex: none;
	fill: var(--mbrc-station);
}

.mbrc-announce-label {
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	color: var(--mbrc-station);
	letter-spacing: .09em;
	text-transform: uppercase;
}

.mbrc-announce-time {
	margin-left: auto;
	font-size: 11px;
	color: color-mix(in srgb, var(--mbrc-station) 55%, var(--mbrc-neutral-400));
}

.mbrc-announce-title {
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--mbrc-station-2);
	margin: 0;
}

.mbrc-msg-announce .mbrc-msg-text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--mbrc-text);
	white-space: pre-wrap;
}

/* Images. Height is capped rather than left to the image, because a portrait
   photo at full width would push the entire conversation off the screen. */
.mbrc-announce-image {
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: var(--mbrc-radius-sm);
	background: var(--mbrc-neutral-900);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--mbrc-station) 40%, transparent);
}

.mbrc-announce-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--mbrc-station);
	color: var(--mbrc-on-station);
	font-family: var(--mbrc-font-heading);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
}

.mbrc-announce-link:hover {
	background: var(--mbrc-station-2);
	color: var(--mbrc-on-station);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   The pinned bar
   --------------------------------------------------------------------------
   Sits above the scrolling list rather than inside it, so it survives every
   scroll. Collapsible, because a pin that outstays its welcome is worse than
   no pin — but a *new* pin always arrives expanded.
   -------------------------------------------------------------------------- */

.mbrc-pinned {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* A pinned post with an image was swallowing the whole widget and leaving
	   room for about one message. Even opened deliberately it now gets a
	   fixed share of the height and scrolls inside itself; the conversation
	   is the point of the page. */
	max-height: 240px;
	overflow: hidden;
	padding: 10px 12px 10px 14px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--mbrc-station) 20%, #000000),
		color-mix(in srgb, var(--mbrc-station) 8%, #000000)
	);
	border-bottom: 1px solid color-mix(in srgb, var(--mbrc-station) 45%, transparent);
	border-left: 4px solid var(--mbrc-station);
}

/* The whole strip toggles, not just the chevron — a 22px target is a mean
   thing to ask for on a phone. */
.mbrc-pinned-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	flex: none;
	cursor: pointer;
	user-select: none;
}

.mbrc-pinned-bar svg {
	width: 13px;
	height: 13px;
	flex: none;
	fill: var(--mbrc-station);
}

.mbrc-pinned-label {
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 10px;
	color: var(--mbrc-station);
	letter-spacing: .09em;
	text-transform: uppercase;
}

.mbrc-pinned-peek {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	color: var(--mbrc-station-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .12s ease;
}

/* The one-line preview only earns its place once the body is hidden. */
.mbrc-pinned.is-collapsed .mbrc-pinned-peek { opacity: 1; }

.mbrc-pinned-toggle {
	margin-left: auto;
	flex: none;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--mbrc-radius-sm);
	background: transparent;
	color: var(--mbrc-station);
	cursor: pointer;
}

.mbrc-pinned-toggle:hover {
	background: color-mix(in srgb, var(--mbrc-station) 22%, transparent);
}

.mbrc-pinned-toggle svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	transition: transform .15s ease;
}

.mbrc-pinned.is-collapsed .mbrc-pinned-toggle svg { transform: rotate(-90deg); }

.mbrc-pinned-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* min-height:0 for the same reason the chat needs it — without it a flex
	   item refuses to shrink below its content and the max-height above would
	   simply be ignored. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mbrc-pinned.is-collapsed .mbrc-pinned-body { display: none; }

/* When the pin is taller than its cap the text stops mid-sentence, which
   reads as broken rather than scrollable. The fade is only applied when there
   is genuinely something below — measured, not assumed, because a short pin
   with a permanent shadow on it looks just as wrong. */
.mbrc-pinned.is-overflowing .mbrc-pinned-body {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

.mbrc-pinned-title {
	margin: 0;
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: var(--mbrc-station-2);
}

.mbrc-pinned-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mbrc-text);
	white-space: pre-wrap;
}

.mbrc-pinned .mbrc-announce-image { max-height: 120px; }

/* ==========================================================================
   Polls
   --------------------------------------------------------------------------
   A poll is a station announcement that happens to be interactive, so it
   keeps the amber identity. Before voting the options are buttons; after
   voting the same rows become result bars — the layout does not jump,
   the fill just grows out of the left edge.
   ========================================================================== */

.mbrc-msg-poll {
	flex-direction: column;
	gap: 10px;
	padding: 13px 14px 13px 16px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--mbrc-station) 18%, #000000),
		color-mix(in srgb, var(--mbrc-station) 6%, #000000)
	);
	border: 1px solid color-mix(in srgb, var(--mbrc-station) 60%, transparent);
	border-left: 4px solid var(--mbrc-station);
	border-radius: var(--mbrc-radius-md);
	box-shadow: 0 0 20px color-mix(in srgb, var(--mbrc-station) 16%, transparent);
}

.mbrc-poll-question {
	margin: 0;
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	color: var(--mbrc-text);
}

.mbrc-poll-options {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.mbrc-poll-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	padding: 7px 12px;
	border: 1px solid color-mix(in srgb, var(--mbrc-station) 38%, transparent);
	border-radius: var(--mbrc-radius-sm);
	background: rgba(0, 0, 0, .45);
	color: var(--mbrc-text);
	font-family: var(--mbrc-font-body);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .12s ease, background .12s ease;
}

.mbrc-poll-opt:hover:not(:disabled) {
	border-color: var(--mbrc-station);
	background: color-mix(in srgb, var(--mbrc-station) 14%, rgba(0, 0, 0, .45));
}

.mbrc-poll-opt:disabled { cursor: default; }

/* The fill is a sibling behind the text, not a background, so the percentage
   can animate without the label ever reflowing. */
.mbrc-poll-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: color-mix(in srgb, var(--mbrc-station) 26%, transparent);
	transition: width .45s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}

.mbrc-poll-opt.is-leading .mbrc-poll-fill {
	background: color-mix(in srgb, var(--mbrc-station) 42%, transparent);
}

.mbrc-poll-opt.is-mine {
	border-color: var(--mbrc-station);
	box-shadow: 0 0 0 1px var(--mbrc-station);
}

.mbrc-poll-opt-label {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mbrc-poll-opt-pct {
	position: relative;
	flex: none;
	font-family: var(--mbrc-font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--mbrc-station-2);
	font-variant-numeric: tabular-nums;
}

.mbrc-poll-tick {
	position: relative;
	flex: none;
	width: 13px;
	height: 13px;
	fill: var(--mbrc-station);
}

.mbrc-poll-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	font-size: 12px;
	color: var(--mbrc-neutral-400);
}

.mbrc-poll-closed {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mbrc-station) 20%, transparent);
	color: var(--mbrc-station-2);
	font-family: var(--mbrc-font-heading);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */

@media (max-width: 520px) {
	.mbrc-head {
		flex-wrap: wrap;
		row-gap: var(--mbrc-space-2);
	}

	.mbrc-head-stat {
		align-items: flex-start;
		text-align: left;
	}

	.mbrc-head-stat-label { font-size: 9px; }

	.mbrc-composer { flex-wrap: wrap; }
	.mbrc-composer .mbrc-input { flex: 1 1 100%; order: -1; }
	.mbrc-emoji-panel { right: 8px; bottom: 92px; }
}

/* ==========================================================================
   Theme armour
   --------------------------------------------------------------------------
   The widget renders inside whatever theme the station happens to run, and a
   perfectly ordinary theme rule like `input[type="text"] { color: #333 }`
   scores (0,1,1) — which outranks a bare `.mbrc-input` class at (0,1,0). The
   result is black text typed into a black field.

   Naming the element alongside our class lifts these to (0,2,1) so they win
   on merit rather than with !important, which would leave nothing for the
   Custom CSS box to override.
   ========================================================================== */

.mbrc-root input.mbrc-input,
.mbrc-root textarea.mbrc-input {
	color: var(--mbrc-text);
	-webkit-text-fill-color: var(--mbrc-text);
	background-color: var(--mbrc-bubble-bg);
	border-color: var(--mbrc-divider);
	caret-color: var(--mbrc-accent);
	font-family: var(--mbrc-font-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	opacity: 1;
}

.mbrc-root input.mbrc-input:focus,
.mbrc-root textarea.mbrc-input:focus {
	color: var(--mbrc-text);
	-webkit-text-fill-color: var(--mbrc-text);
	background-color: var(--mbrc-bubble-bg);
	border-color: var(--mbrc-accent);
	outline: none;
}

.mbrc-root input.mbrc-input::placeholder,
.mbrc-root textarea.mbrc-input::placeholder {
	color: var(--mbrc-neutral-500);
	-webkit-text-fill-color: var(--mbrc-neutral-500);
	opacity: 1;
}

/* Buttons are hit by the same class of rule — `.entry-content button`, theme
   resets that force uppercase, gradient backgrounds, and so on. */
.mbrc-root button.mbrc-btn {
	font-family: var(--mbrc-font-heading);
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	background-image: none;
	border-style: solid;
	border-width: 1px;
	width: auto;
}

.mbrc-root button.mbrc-btn-primary {
	background-color: var(--mbrc-accent);
	color: var(--mbrc-on-accent);
	border-color: var(--mbrc-accent);
}

.mbrc-root button.mbrc-btn-primary:hover:not(:disabled) {
	background-color: var(--mbrc-accent-400);
	border-color: var(--mbrc-accent-400);
	color: var(--mbrc-on-accent);
}

.mbrc-root button.mbrc-btn-secondary {
	background-color: transparent;
	color: var(--mbrc-accent-200);
	border-color: var(--mbrc-divider);
}

.mbrc-root button.mbrc-btn-ghost {
	background-color: transparent;
	color: var(--mbrc-accent);
	border-color: transparent;
}

.mbrc-root button.mbrc-btn-icon {
	width: 36px;
	padding: 0;
}

/* `.mbrc-root button { margin: 0 }` above is (0,1,1) and would otherwise
   cancel the auto margin that pins this to the left of the row. */
.mbrc-root button.mbrc-help-btn {
	background-image: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	width: 28px;
	min-width: 28px;
	padding: 0;
	margin: 0 auto 0 0;
	color: var(--mbrc-neutral-400);
}

.mbrc-root button.mbrc-help-btn:hover,
.mbrc-root button.mbrc-help-btn.is-open {
	background-color: var(--mbrc-accent);
	color: var(--mbrc-on-accent);
}

.mbrc-root .mbrc-help-el { color: var(--mbrc-text); }
.mbrc-root .mbrc-help-en { color: var(--mbrc-neutral-400); }

.mbrc-root button.mbrc-amount {
	background-image: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	width: auto;
	color: var(--mbrc-text);
}

.mbrc-root button.mbrc-amount.is-selected {
	background-color: var(--mbrc-accent);
	color: var(--mbrc-on-accent);
	border-color: var(--mbrc-accent);
}

.mbrc-root .mbrc-composer button.mbrc-btn-icon {
	width: 44px;
	height: 44px;
}

/* Station announcements and polls.
   `.mbrc-root a` above is (0,1,1) and paints every link cyan, which on a
   filled amber pill is cyan-on-orange — technically visible, practically
   unreadable. Naming the element wins the tie. Poll options are buttons and
   inherit every theme button reset going, so they need the same treatment as
   the .mbrc-btn family. */
.mbrc-root a.mbrc-announce-link,
.mbrc-root a.mbrc-announce-link:hover,
.mbrc-root a.mbrc-announce-link:visited,
.mbrc-root a.mbrc-announce-link:focus {
	color: var(--mbrc-on-station);
	text-decoration: none;
	text-shadow: none;
}

.mbrc-root button.mbrc-poll-opt {
	font-family: var(--mbrc-font-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	background-image: none;
	color: var(--mbrc-text);
	width: 100%;
	height: auto;
	margin: 0;
}

.mbrc-root button.mbrc-pinned-toggle {
	background-image: none;
	width: 22px;
	min-width: 22px;
	height: 22px;
	padding: 0;
	margin: 0 0 0 auto;
	color: var(--mbrc-station);
}

.mbrc-root .mbrc-announce-title,
.mbrc-root .mbrc-pinned-title { color: var(--mbrc-station-2); }

.mbrc-root .mbrc-poll-question,
.mbrc-root .mbrc-pinned-text,
.mbrc-root .mbrc-msg-announce .mbrc-msg-text { color: var(--mbrc-text); }

/* Message text sits in generic divs, so a theme colouring `div` or `p`
   inside content areas can bleach it out too. */
.mbrc-root .mbrc-msg-text,
.mbrc-root .mbrc-msg-time,
.mbrc-root .mbrc-head-title,
.mbrc-root .mbrc-dialog-title,
.mbrc-root .mbrc-field > label,
.mbrc-root .mbrc-gate-hint {
	text-shadow: none;
	text-transform: none;
}

.mbrc-root .mbrc-head-stat-label { text-shadow: none; }

/* Themes routinely colour bare `div`s and `label`s inside content areas,
   which is enough to swallow a heading whole. Restate the ones that carry
   meaning. */
.mbrc-root .mbrc-msg-text,
.mbrc-root .mbrc-head-title,
.mbrc-root .mbrc-dialog-title,
.mbrc-root .mbrc-head-stat-value {
	color: var(--mbrc-text);
}

.mbrc-root .mbrc-head-as { color: var(--mbrc-neutral-400); }
.mbrc-root .mbrc-head-stat-label { color: var(--mbrc-accent); font-weight: 700; }
.mbrc-root .mbrc-msg-time { color: var(--mbrc-neutral-600); }
.mbrc-root .mbrc-field > label { color: color-mix(in srgb, var(--mbrc-text) 70%, transparent); }
.mbrc-root .mbrc-dialog .mbrc-field > label { color: var(--mbrc-neutral-400); text-transform: uppercase; }
.mbrc-root .mbrc-gate-hint { color: var(--mbrc-neutral-500); }
.mbrc-root .mbrc-list-empty { color: var(--mbrc-neutral-500); }


/* ==========================================================================
   Embed page
   --------------------------------------------------------------------------
   In the iframe the card fills the frame and the chat takes the leftover
   height, which makes the chat a flex item — and a flex item defaults to
   min-height:auto, refusing to shrink below its content. That is what let a
   long conversation push the composer out of the frame entirely.
   ========================================================================== */

.mbrc-is-embed { height: 100%; }

.mbrc-is-embed .mbrc-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
}

.mbrc-is-embed .mbrc-head { flex: 0 0 auto; }

.mbrc-is-embed .mbrc-chat {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

.mbrc-is-embed .mbrc-gate { flex: 1 1 auto; min-height: 0; overflow-y: auto; }