.mchat-app {
	--mchat-accent: #2563eb;
	--mchat-surface: #fff;
	--mchat-sidebar: #f5f7fb;
	--mchat-text: #172033;
	--mchat-border: color-mix(in srgb, var(--mchat-text) 24%, var(--mchat-surface));
	--mchat-muted: color-mix(in srgb, var(--mchat-text) 62%, var(--mchat-surface));
	--mchat-header-bg: var(--mchat-surface);
	--mchat-header-text: var(--mchat-text);
	--mchat-reply-bg: var(--mchat-surface);
	--mchat-reply-text: var(--mchat-text);
	--mchat-own-message-bg: color-mix(in srgb, var(--mchat-accent) 12%, var(--mchat-surface));
	--mchat-own-message-text: var(--mchat-text);
	--mchat-other-message-bg: var(--mchat-sidebar);
	--mchat-other-message-text: var(--mchat-text);
	--mchat-date-label-bg: var(--mchat-sidebar);
	--mchat-date-label-text: var(--mchat-muted);
	--mchat-sidebar-width: 320px;
	--mchat-users-width: var(--mchat-sidebar-width);
	--mchat-bubble-radius: 14px;
	--mchat-bubble-max-width: 92%;
	--mchat-message-font-size: 15px;
	--mchat-control-surface: color-mix(in srgb, var(--mchat-text) 6%, var(--mchat-surface));
	--mchat-on-accent: #fff;
	--mchat-danger: color-mix(in srgb, #dc2626 72%, var(--mchat-text));
	--mchat-danger-border: color-mix(in srgb, var(--mchat-danger) 45%, var(--mchat-surface));
	--mchat-danger-surface: color-mix(in srgb, var(--mchat-danger) 14%, var(--mchat-surface));
	--mchat-height: 680px;
	position: relative;
	display: grid !important;
	grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr) var(--mchat-users-width);
	transition: grid-template-columns .18s ease;
	width: 100%;
	height: var(--mchat-height);
	min-height: 420px;
	overflow: hidden;
	border: 1px solid var(--mchat-border);
	border-radius: 16px;
	background: var(--mchat-surface);
	color: var(--mchat-text);
	font: var(--mchat-message-font-size)/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-shadow: 0 10px 30px rgba(20, 35, 60, .08);
}

.mchat-app *,
.mchat-app *::before,
.mchat-app *::after {
	box-sizing: border-box;
}
/* Native hidden state is functional, so it must beat component and host-theme display rules. */
.mchat-app[hidden], .mchat-app [hidden] { display: none !important; }
.mchat-app :where(button, input, textarea, select) {
	min-width: 0;
	max-width: none;
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}
.mchat-app :where(button) {
	width: auto;
	min-height: 36px;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 8px 11px;
	line-height: 1.2;
	cursor: pointer;
}
.mchat-app button:focus-visible,
.mchat-app input:focus-visible,
.mchat-app textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--mchat-accent) 30%, transparent); outline-offset: 1px; }

.mchat-sidebar,
.mchat-users {
	min-width: 0;
	overflow: auto;
	background: var(--mchat-sidebar);
	padding: 18px;
	transition: opacity .16s ease, transform .18s ease, padding .18s ease, border-color .18s ease;
}
.mchat-sidebar { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--mchat-border); }
.mchat-users { border-left: 1px solid var(--mchat-border); }
.mchat-sidebar-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 7px; margin-bottom: 10px; }
.mchat-sidebar-toolbar .mchat-inbox-search { margin-bottom: 0; }
.mchat-app .mchat-new-conversation {
	display: inline-grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	flex: 0 0 38px;
	place-items: center;
	border-color: var(--mchat-border);
	background: var(--mchat-surface);
	padding: 8px;
	color: var(--mchat-text);
}

.mchat-app .mchat-new-conversation:hover,
.mchat-app .mchat-new-conversation:focus-visible {
	border-color: var(--mchat-accent);
	color: var(--mchat-accent);
}

.mchat-app.mchat-new-conversation-mode .mchat-new-conversation {
	border-color: var(--mchat-accent);
	background: color-mix(in srgb, var(--mchat-accent) 9%, var(--mchat-surface));
	color: var(--mchat-accent);
}
.mchat-new-conversation .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.mchat-app .mchat-sidebar-toggle,
.mchat-app .mchat-sidebar-open {
	display: inline-grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	place-items: center;
	border-color: var(--mchat-border);
	background: var(--mchat-surface);
	padding: 8px;
	color: var(--mchat-text);
}
.mchat-app .mchat-sidebar-toggle:hover,
.mchat-app .mchat-sidebar-open:hover { border-color: var(--mchat-accent); color: var(--mchat-accent); }
.mchat-app .mchat-sidebar-open { display: none !important; }
.mchat-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.mchat-logo { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.mchat-app .mchat-product, .mchat-app .mchat-users h3 { margin: 0; color: var(--mchat-text); font-size: 18px; }
.mchat-app .mchat-search input { width: 100%; border: 1px solid var(--mchat-border); border-radius: 8px; background: var(--mchat-surface); padding: 9px; color: var(--mchat-text); }
.mchat-app .mchat-send,
.mchat-app .mchat-radio button { border-color: var(--mchat-accent); background: var(--mchat-accent); color: var(--mchat-on-accent); }

.mchat-new-conversation-draft {
	flex: 0 0 auto;
	border-bottom: 1px solid var(--mchat-border);
	background: var(--mchat-reply-bg);
}
.mchat-new-conversation-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-height: 54px;
	border-bottom: 1px solid var(--mchat-border);
	padding: 8px 16px;
	color: var(--mchat-text);
}
.mchat-new-conversation-row:last-child { border-bottom: 0; }
.mchat-new-conversation-row > strong { font-size: 14px; white-space: nowrap; }
.mchat-new-recipient-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mchat-new-to-body {
	position: relative;
	display: flex;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.mchat-app .mchat-new-recipient-search {
	min-width: 160px;
	flex: 1 1 220px;
	border: 0;
	background: transparent;
	padding: 7px 2px;
	color: var(--mchat-text);
	box-shadow: none;
}
.mchat-app .mchat-new-recipient-search:focus {
	outline: 0;
	box-shadow: none;
}
.mchat-new-recipient-results {
	position: absolute;
	z-index: 220;
	top: calc(100% + 7px);
	right: 0;
	left: 0;
	max-height: 240px;
	margin: 0;
	overflow: auto;
	border: 1px solid var(--mchat-border);
	border-radius: var(--mchat-panel-radius, 12px);
	background: var(--mchat-surface);
	padding: 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}
.mchat-new-recipient-results[hidden] {
	display: none !important;
}
.mchat-new-recipient-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 220px;
	border: 1px solid var(--mchat-border);
	border-radius: 999px;
	background: var(--mchat-surface);
	padding: 4px 5px 4px 7px;
	font-size: 12px;
}
.mchat-new-recipient-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.mchat-new-recipient-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchat-app .mchat-new-recipient-chip button {
	width: 22px;
	min-width: 22px;
	height: 22px;
	min-height: 22px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	padding: 0;
	color: var(--mchat-muted);
	font-size: 17px;
	line-height: 1;
}
.mchat-app .mchat-new-recipient-chip button:hover { background: var(--mchat-sidebar); color: var(--mchat-accent); }
.mchat-new-subject-row input {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 8px 0;
	color: var(--mchat-text);
	box-shadow: none;
}
.mchat-new-subject-row input:focus { outline: 0; box-shadow: none; }
.mchat-new-conversation-empty { min-height: 220px; }
.mchat-info-title-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	max-width: 100%;
}

.mchat-info-title-row h2 { margin: 0; }

.mchat-app .mchat-info-rename {
	display: inline-grid;
	width: 26px;
	min-width: 26px;
	height: 26px;
	min-height: 26px;
	place-items: center;
	border: 0;
	background: transparent;
	padding: 4px;
	color: var(--mchat-muted);
}

.mchat-app .mchat-info-rename:hover,
.mchat-app .mchat-info-rename:focus-visible {
	color: var(--mchat-accent);
}

.mchat-info-rename .mchat-control-icon {
	width: 15px;
	height: 15px;
}


.mchat-inbox-search { width: 100%; flex: 0 0 auto; margin-bottom: 10px; border: 1px solid var(--mchat-border); border-radius: 8px; background: var(--mchat-surface); padding: 9px; color: var(--mchat-text); }
.mchat-people-results { flex: 0 0 auto; max-height: 210px; overflow: auto; margin: 0 -8px 10px; border-bottom: 1px solid var(--mchat-border); padding: 0 8px 9px; }
.mchat-result-heading { display: block; margin: 3px 4px 6px; color: var(--mchat-muted); font-size: 11px; text-transform: uppercase; }
.mchat-person-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 6px 3px; }
.mchat-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchat-app .mchat-person-row button { min-height: 29px; border-color: var(--mchat-border); background: var(--mchat-surface); padding: 4px 7px; color: var(--mchat-accent); font-size: 11px; }
.mchat-inbox-panels { min-height: 0; flex: 1 1 auto; overflow: auto; margin-inline: -8px; }
.mchat-inbox-panel { min-height: 100%; }
.mchat-conversations { display: grid; gap: 2px; }
.mchat-conversation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 9px; }
.mchat-conversation-row:hover,
.mchat-conversation-row.is-pinned { background: color-mix(in srgb, var(--mchat-accent) 5%, transparent); }
.mchat-app .mchat-conversation { display: flex; position: relative; align-items: center; gap: 10px; width: 100%; min-height: 70px; background: transparent; padding: 9px 8px; color: inherit; text-align: left; }
.mchat-app .mchat-conversation:hover,
.mchat-app .mchat-conversation.is-active { background: var(--mchat-surface); color: var(--mchat-accent); }
.mchat-conversation-avatar { display: grid; position: relative; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--mchat-accent) 12%, var(--mchat-surface)); color: var(--mchat-accent); font-weight: 700; }
.mchat-conversation-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.mchat-conversation-avatar.is-stack { overflow: visible; }
.mchat-conversation-avatar.is-stack img { position: absolute; width: 28px; height: 28px; border: 2px solid var(--mchat-sidebar); border-radius: 50%; object-fit: cover; }
.mchat-conversation-avatar.is-stack img:nth-child(1) { top: 0; left: 0; }
.mchat-conversation-avatar.is-stack img:nth-child(2) { top: 0; right: 0; bottom: auto; }
.mchat-conversation-avatar.is-stack img:nth-child(3) { right: auto; bottom: 0; left: 50%; width: 28px; height: 28px; transform: translateX(-50%); }
.mchat-conversation-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.mchat-conversation-heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 7px; }
.mchat-conversation-heading strong { overflow: hidden; min-width: 0; color: var(--mchat-text); text-overflow: ellipsis; white-space: nowrap; }
.mchat-conversation-heading time { flex: 0 0 auto; color: var(--mchat-muted); font-size: 10px; }
.mchat-conversation-copy small { display: -webkit-box; overflow: hidden; color: var(--mchat-muted); font-size: 11px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mchat-app .mchat-conversation-pin { display: grid; width: 32px; min-width: 32px; min-height: 32px; place-items: center; border: 0; background: transparent; padding: 6px; color: var(--mchat-muted); opacity: .58; }
.mchat-app .mchat-conversation-pin:hover,
.mchat-app .mchat-conversation-pin.is-active { color: var(--mchat-accent); opacity: 1; }
.mchat-conversation-pin:disabled { cursor: default; }
.mchat-conversation-pin .mchat-control-icon { width: 17px; height: 17px; }
.mchat-conversation-pin .mchat-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mchat-unread { min-width: 22px; border-radius: 99px; background: var(--mchat-accent); padding: 3px 6px; color: #fff; font-size: 11px; text-align: center; }
.mchat-no-conversations { margin: 30px 12px; color: var(--mchat-muted); text-align: center; }
.mchat-scroll-for-more { width: max-content; max-width: 100%; margin: 0 auto; padding: 12px 10px 16px; color: var(--mchat-accent); font-size: 13px; font-weight: 600; text-align: center; }
.mchat-scroll-for-more[hidden] { display: none !important; }
.mchat-inbox-tabs {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	order: -1;
	flex: 0 0 auto;
	margin: 0 -18px 10px;
	border-top: 0;
	border-bottom: 1px solid var(--mchat-border);
}
.mchat-app .mchat-inbox-tabs button {
	display: flex;
	position: relative;
	min-width: 0;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 7px 8px;
	color: var(--mchat-text);
	font-size: clamp(11px, 1vw, 14px);
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
.mchat-app .mchat-inbox-tabs button.is-active { color: var(--mchat-accent); box-shadow: inset 0 3px var(--mchat-accent); }
.mchat-inbox-tab-label { display: block; min-width: 0; white-space: nowrap; }
.mchat-inbox-tabs strong { display: inline-grid; min-width: 19px; height: 19px; margin-right: 5px; place-items: center; border-radius: 50%; background: var(--mchat-accent); color: #fff; font-size: 10px; }

.mchat-main {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--mchat-surface);
	container-type: inline-size;
}

.mchat-load-older {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 12px;
	border: 0;
	background: transparent;
	padding: 4px 8px;
	color: var(--mchat-accent);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.mchat-load-older:hover {
	text-decoration: underline;
}

.mchat-header { display: flex; visibility: visible; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 70px; border-bottom: 1px solid var(--mchat-border); background: var(--mchat-header-bg); padding: 11px 16px; color: var(--mchat-header-text); }
.mchat-app .mchat-room-heading { display: block; min-width: 120px; min-height: 0; flex: 1; border: 0; background: transparent; padding: 0; color: inherit; text-align: left; }
.mchat-app .mchat-title { margin: 0; overflow: hidden; color: var(--mchat-text); font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.mchat-app .mchat-participant-count { margin: 1px 0 0; overflow: hidden; color: var(--mchat-muted); font-size: 11px; font-weight: 600; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.mchat-app .mchat-participant-count[hidden] { display: none; }
.mchat-app .mchat-description { margin: 2px 0 0; overflow: hidden; color: var(--mchat-muted); text-overflow: ellipsis; white-space: nowrap; }
.mchat-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.mchat-app .mchat-header-actions button,
.mchat-app .mchat-mobile-rooms { border-color: var(--mchat-border); background: var(--mchat-surface); color: var(--mchat-text); font-size: 12px; }
.mchat-app:not(.mchat-floating-app) .mchat-header-actions .mchat-unread-filter {
	display: inline-flex;
	width: auto;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px 11px;
	color: var(--mchat-text);
}
.mchat-app .mchat-header-actions button:hover,
.mchat-app .mchat-mobile-rooms:hover { border-color: var(--mchat-accent); color: var(--mchat-accent); }
.mchat-mobile-rooms { display: none; }
.mchat-online { color: #15803d; }
.mchat-control-icon { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mchat-main.mchat-header-compact .mchat-header-actions button {
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 7px;
}

.mchat-main.mchat-header-compact .mchat-header-actions .mchat-users-toggle {
	width: auto;
	min-width: 48px;
}

.mchat-main.mchat-header-compact .mchat-header-actions .mchat-control-icon {
	width: 18px;
	height: 18px;
}

.mchat-main.mchat-header-compact .mchat-header-actions .mchat-profile {
	width: 38px;
	min-width: 38px;
	padding: 6px;
	gap: 0;
}

.mchat-main.mchat-header-compact .mchat-profile .mchat-control-avatar {
	width: 24px;
	height: 24px;
}

.mchat-floating-app .mchat-mobile-rooms {
	display: inline-flex;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	text-align: center;
}

.mchat-floating-app .mchat-mobile-rooms .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-floating-app .mchat-mobile-rooms .mchat-control-icon {
	display: block;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin: 0;
}

.mchat-control-avatar {
	width: 25px;
	height: 25px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

.mchat-floating-tools .mchat-control-avatar {
	display: block;
	position: static;
	margin: 0;
}
.mchat-app .mchat-header-actions button,
.mchat-app .mchat-header .mchat-radio button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mchat-app .mchat-header-actions .mchat-profile { height: 36px; min-height: 36px; overflow: hidden; }
.mchat-online-avatars { display: none; align-items: center; padding-left: 5px; }
.mchat-online-avatar { display: grid; width: 23px; height: 23px; margin-left: -6px; place-items: center; overflow: hidden; border: 2px solid var(--mchat-surface); border-radius: 50%; background: color-mix(in srgb, var(--mchat-accent) 12%, var(--mchat-surface)); color: var(--mchat-accent); font-size: 9px; font-weight: 700; }
.mchat-online-avatar img { width: 100%; height: 100%; object-fit: cover; }

.mchat-app .mchat-search { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; width: 100%; margin: 0; border-bottom: 1px solid var(--mchat-border); padding: 9px 14px; }
.mchat-app .mchat-search input { flex: 1; }
.mchat-app .mchat-search button[type="submit"] { background: var(--mchat-accent); color: var(--mchat-on-accent); }
.mchat-app .mchat-search-close { background: transparent; color: var(--mchat-text); font-size: 19px; }
.mchat-header .mchat-radio { display: flex; flex: 0 1 330px; align-items: center; gap: 6px; min-width: 150px; border: 0; background: transparent; padding: 0; }
.mchat-header .mchat-radio div { display: grid; min-width: 65px; flex: 1; line-height: 1.15; }
.mchat-header .mchat-radio strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mchat-header .mchat-radio span { overflow: hidden; color: var(--mchat-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mchat-app .mchat-header .mchat-radio input[type="range"] { width: 68px; }
.mchat-app .mchat-header .mchat-radio button { width: 38px; min-width: 38px; min-height: 32px; padding: 5px 8px; font-size: 11px; }
.mchat-header .mchat-radio .mchat-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mchat-pinned {
	display: grid;
	flex: 0 0 auto;
	gap: 4px;
	border-bottom: 1px solid var(--mchat-border);
	background: color-mix(in srgb, var(--mchat-accent) 10%, var(--mchat-surface));
	padding: 6px 10px;
}

.mchat-app .mchat-pinned-message {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 8px;
	width: 100%;
	border: 0;
	border-radius: 7px;
	background: transparent;
	padding: 4px 6px;
	color: var(--mchat-text);
	text-align: left;
	cursor: pointer;
}

.mchat-app .mchat-pinned-message:hover,
.mchat-app .mchat-pinned-message:focus-visible {
	background: color-mix(in srgb, var(--mchat-accent) 9%, var(--mchat-surface));
}

.mchat-pinned-message strong {
	padding-top: 1px;
	color: var(--mchat-accent);
	font-size: 12px;
	white-space: nowrap;
}

.mchat-pinned-preview {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	color: var(--mchat-text);
	font-size: 12px;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.mchat-message-highlight .mchat-message-bubble {
	outline: 2px solid color-mix(in srgb, var(--mchat-accent) 70%, transparent);
	outline-offset: 2px;
	transition: outline-color .25s ease;
}

.mchat-app .mchat-load-latest {
	display: block;
	margin: 10px auto 0;
}

.mchat-messages { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 14px 16px; }
.mchat-empty { margin: 60px 0; color: var(--mchat-muted); text-align: center; }
.mchat-app .mchat-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; min-height: 0; margin: 0 0 9px; padding: 0; }
.mchat-message.is-mine { margin-left: 8%; }
.mchat-avatar,
.mchat-user-avatar { display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--mchat-accent) 14%, var(--mchat-surface)); color: var(--mchat-accent); font-weight: 700; }
.mchat-avatar { width: 32px; height: 32px; }
.mchat-avatar img,
.mchat-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mchat-message-content { min-width: 0; }
.mchat-message-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; padding: 0; }
.mchat-message-meta time,
.mchat-message-meta small { color: var(--mchat-muted); font-size: 11px; }
.mchat-message-meta time { white-space: nowrap; }
.mchat-message-body { overflow-wrap: anywhere; color: var(--mchat-text); white-space: pre-wrap; }
.mchat-message-body.is-html { white-space: normal; }
.mchat-app .mchat-message-body a { color: var(--mchat-accent); }
.mchat-app .mchat-message-body > :first-child { margin-top: 0; }
.mchat-app .mchat-message-body > :last-child { margin-bottom: 0; }
.mchat-app .mchat-message-body p { margin: 0 0 .6em; }
.mchat-app .mchat-message-body ul,
.mchat-app .mchat-message-body ol { margin: .45em 0 .6em; padding-left: 1.35em; }
.mchat-app .mchat-message-body li { margin: .25em 0; }
.mchat-app .mchat-message-body li > p { margin: .25em 0; }
.mchat-message.is-system-message .mchat-message-body { line-height: 1.35; }
.mchat-message.is-system-message .mchat-message-body p { margin: 0 0 .35em; }
.mchat-app .mchat-message.is-system-message .mchat-message-body,
.mchat-app .mchat-message.is-system-message .mchat-message-body :not(a) { color: var(--mchat-text); }
.mchat-app .mchat-message.is-system-message .mchat-message-body a { color: var(--mchat-accent); }
.mchat-layout-modern .mchat-message-content {
	width: fit-content;
	max-width: min(760px, var(--mchat-bubble-max-width));
}

.mchat-layout-modern .mchat-message-bubble {
	border-radius: var(--mchat-bubble-radius);
	background: var(--mchat-other-message-bg);
	color: var(--mchat-other-message-text);
	padding: 8px 11px;
}

.mchat-layout-modern .mchat-message.is-mine .mchat-message-bubble {
	background: var(--mchat-own-message-bg);
	color: var(--mchat-own-message-text);
}

/* Current user left */
.mchat-align-current-left .mchat-message.is-mine {
	margin-left: 0;
}

/* Current user right */
.mchat-align-current-right .mchat-message.is-mine {
	grid-template-columns: minmax(0, 1fr) 34px;
	margin-left: 8%;
	direction: ltr;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-avatar {
	grid-column: 2;
	grid-row: 1;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-content {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	text-align: left;
}

/* Modern bubbles follow alignment instead of choosing alignment themselves */
.mchat-layout-modern.mchat-align-current-left .mchat-message.is-mine .mchat-message-content {
	justify-self: start;
}

.mchat-layout-modern.mchat-align-current-right .mchat-message.is-mine .mchat-message-content {
	justify-self: end;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-meta {
	justify-content: flex-end;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-meta time {
	order: 1;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-meta strong {
	order: 2;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-body {
	text-align: left;
}

.mchat-quoted { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 0; margin: 0 0 6px; overflow: hidden; border: 0; border-left: 3px solid var(--mchat-accent); border-radius: 0; background: var(--mchat-sidebar); padding: 5px 8px; color: var(--mchat-muted); text-align: left; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.mchat-media { display: block; max-width: min(420px, 100%); max-height: 330px; margin-top: 8px; border-radius: 10px; object-fit: contain; cursor: zoom-in; }
.mchat-attachment { display: inline-block; margin-top: 7px; color: var(--mchat-accent); }
.mchat-message-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; opacity: 0; }
.mchat-message:hover .mchat-message-actions,
.mchat-message:focus-within .mchat-message-actions { opacity: 1; }
.mchat-app .mchat-message-actions button,
.mchat-app .mchat-reactions button { min-height: 25px; border: 0; background: transparent; padding: 3px 6px; color: var(--mchat-muted); font-size: 12px; }
.mchat-app .mchat-message-actions button:hover,
.mchat-app .mchat-reactions button:hover,
.mchat-app .mchat-reactions button.is-mine { background: var(--mchat-sidebar); color: var(--mchat-accent); }
.mchat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mchat-typing { min-height: 22px; flex: 0 0 auto; padding: 0 16px; color: var(--mchat-muted); font-size: 12px; font-style: italic; }
.mchat-reply-preview,
.mchat-edit-preview { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--mchat-border); background: var(--mchat-sidebar); padding: 7px 14px; font-size: 12px; }
.mchat-edit-preview { border-left: 3px solid var(--mchat-accent); color: var(--mchat-text); }
.mchat-edit-preview span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchat-app .mchat-edit-preview button { min-width: 30px; min-height: 30px; flex: 0 0 30px; border: 0; background: transparent; padding: 0; color: var(--mchat-muted); font-size: 20px; line-height: 1; }

.mchat-app .mchat-compose { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 7px; width: 100%; max-width: none; margin: 0; border-top: 1px solid var(--mchat-border); background: var(--mchat-reply-bg); padding: 10px; color: var(--mchat-reply-text); }
.mchat-app .mchat-compose textarea { display: block; width: auto; min-width: 120px; min-height: 46px; max-height: 120px; flex: 1 1 0; margin: 0; resize: none; border: 1px solid var(--mchat-border); border-radius: 10px; background: var(--mchat-surface); padding: 11px 12px; color: inherit; line-height: 1.35; }
.mchat-app .mchat-send { min-width: 68px; height: 46px; flex: 0 0 auto; }
.mchat-app .mchat-compose .mchat-upload,
.mchat-app .mchat-compose .mchat-gif,
.mchat-app .mchat-compose .mchat-emoji { width: 40px; min-width: 40px; height: 46px; min-height: 46px; flex: 0 0 40px; border-color: var(--mchat-border); background: var(--mchat-surface); padding: 5px; color: var(--mchat-accent); }
.mchat-app .mchat-compose .mchat-gif { width: 44px; min-width: 44px; flex-basis: 44px; font-size: 12px; font-weight: 700; }
.mchat-app .mchat-compose .mchat-emoji { font-size: 21px; }

.mchat-app.mchat-editing-message .mchat-compose .mchat-upload,
.mchat-app.mchat-editing-message .mchat-compose .mchat-gif,
.mchat-app.mchat-editing-message .mchat-compose .mchat-voice,
.mchat-app.mchat-editing-message .mchat-compose .mchat-video-record,
.mchat-app.mchat-editing-message .mchat-compose .mchat-location-share,
.mchat-app.mchat-editing-message .mchat-media-preview,
.mchat-app.mchat-editing-message .mchat-smart-replies { display: none !important; }
.mchat-compose .mchat-upload svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mchat-app .mchat-compose.has-media-preview { flex-wrap: wrap; }
.mchat-media-preview { order: -1; display: flex; width: 100%; flex: 1 0 100%; align-items: center; gap: 8px; border: 1px solid var(--mchat-border); border-radius: 9px; background: var(--mchat-sidebar); padding: 6px 8px; }
.mchat-media-preview img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.mchat-media-preview span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchat-app .mchat-media-preview button { width: 30px; min-width: 30px; min-height: 30px; padding: 3px; }
.mchat-app .mchat-compose .mchat-upload:hover,
.mchat-app .mchat-compose .mchat-gif:hover,
.mchat-app .mchat-compose .mchat-emoji:hover { border-color: var(--mchat-accent); }
.mchat-status { flex: 0 0 auto; min-height: 0; padding: 7px 12px; color: var(--mchat-muted); font-size: 12px; }
.mchat-status:empty { display: none; }
.mchat-status.is-error { background: var(--mchat-danger-surface); color: var(--mchat-danger); }

.mchat-picker { position: absolute; right: calc(var(--mchat-users-width) + 12px); bottom: 68px; z-index: 260; width: min(390px, calc(100% - 24px)); max-height: 340px; overflow: auto; border: 1px solid var(--mchat-border); border-radius: 12px; background: var(--mchat-surface); padding: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.mchat-app.mchat-no-users > .mchat-picker,
.mchat-app[data-users-mode="no"] > .mchat-picker { right: 12px; }
.mchat-picker.mchat-profile-menu {
	top: 62px;
	right: 12px;
	bottom: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
	width: min(300px, calc(100% - 24px));
	padding: 12px;
}

.mchat-profile-menu strong {
	padding: 5px 4px 2px;
	color: var(--mchat-text);
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
}

:is(.mchat-app, .mchat-floating-panel) .mchat-profile-menu button {
	width: 100%;
	min-height: 38px;
	border: 1px solid var(--mchat-border);
	background: var(--mchat-control-surface);
	padding: 8px 10px;
	color: var(--mchat-text);
	font-size: 12px;
	line-height: 1.25;
	text-align: left;
}

.mchat-profile-form {
	display: grid;
	gap: 7px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--mchat-border);
}

.mchat-profile-form label {
	display: grid;
	gap: 4px;
	color: var(--mchat-muted);
	font-size: 12px;
	line-height: 1.25;
}

:is(.mchat-app, .mchat-floating-panel) .mchat-profile-form input {
	width: 100%;
	min-height: 36px;
	border: 1px solid var(--mchat-border);
	border-radius: 7px;
	background: var(--mchat-surface);
	padding: 7px 9px;
	color: var(--mchat-text);
	font-size: 13px;
}

:is(.mchat-app, .mchat-floating-panel) .mchat-profile-form button {
	background: var(--mchat-accent);
	color: var(--mchat-on-accent);
	text-align: center;
}

:is(.mchat-app, .mchat-floating-panel) .mchat-profile-form .mchat-clear-chat-photo {
	background: transparent;
	border-color: var(--mchat-border);
	color: var(--mchat-muted);
	text-align: left;
}

:is(.mchat-app, .mchat-floating-panel) .mchat-profile-menu .mchat-logout {
	margin-top: 5px;
	border-color: var(--mchat-danger-border);
	color: var(--mchat-danger);
}

.mchat-profile-menu .mchat-manager-title {
	display: block;
	margin-top: 8px;
	border-top: 1px solid var(--mchat-border);
	padding: 10px 4px 2px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
}

:is(.mchat-app, .mchat-floating-panel) .mchat-profile-menu .mchat-clear-history-action {
	border-color: var(--mchat-danger-border);
	color: var(--mchat-danger);
}

.mchat-notification-dialog { position: absolute; z-index: 400; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, .58); padding: 18px; }

.mchat-confirm-dialog {
	position: absolute;
	z-index: 300;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(15, 23, 42, .58);
	padding: 18px;
}
.mchat-confirm-card {
	width: min(420px, 100%);
	max-height: calc(100% - 24px);
	overflow: auto;
	border: 1px solid var(--mchat-border);
	border-radius: 14px;
	background: var(--mchat-surface);
	padding: 18px;
	color: var(--mchat-text);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}
.mchat-confirm-title {
	margin: 0 0 8px;
	color: var(--mchat-text);
	font-size: 19px;
	line-height: 1.25;
}
.mchat-confirm-card .mchat-confirm-message {
	margin: 0 0 16px;
	color: var(--mchat-muted);
	line-height: 1.45;
	white-space: pre-line;
}
.mchat-confirm-field {
	width: 100%;
	min-height: 42px;
	box-sizing: border-box;
	margin: 0 0 16px;
	border: 1px solid var(--mchat-border);
	border-radius: 9px;
	background: var(--mchat-input-bg);
	padding: 10px 11px;
	color: var(--mchat-input-text);
	font: inherit;
}
textarea.mchat-confirm-field {
	min-height: 96px;
	resize: vertical;
}
.mchat-confirm-field:focus {
	outline: 2px solid color-mix(in srgb, var(--mchat-accent) 45%, transparent);
	outline-offset: 1px;
	border-color: var(--mchat-accent);
}
.mchat-confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
:is(.mchat-app, .mchat-floating-panel) .mchat-confirm-actions button {
	min-width: 78px;
}
:is(.mchat-app, .mchat-floating-panel) .mchat-confirm-actions .mchat-confirm-ok {
	border-color: var(--mchat-accent);
	background: var(--mchat-accent);
	color: var(--mchat-on-accent);
}
:is(.mchat-app, .mchat-floating-panel) .mchat-confirm-actions .mchat-confirm-ok.is-danger {
	border-color: var(--mchat-danger-border);
	background: var(--mchat-danger);
	color: #fff;
}
.mchat-notification-dialog[hidden] { display: none; }
.mchat-notification-card { position: relative; width: min(560px, 100%); max-height: calc(100% - 20px); overflow: auto; border: 1px solid var(--mchat-border); border-radius: 15px; background: var(--mchat-surface); padding: 22px; color: var(--mchat-text); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.mchat-app .mchat-notification-card h3 { margin: 0 36px 8px 0; color: var(--mchat-text); font-size: 21px; }
.mchat-app .mchat-notification-intro { margin: 0 0 18px; color: var(--mchat-muted); line-height: 1.5; }
.mchat-app .mchat-notification-close { position: absolute; top: 12px; right: 12px; width: 34px; min-width: 34px; height: 34px; border: 1px solid var(--mchat-border); border-radius: 50%; background: transparent; padding: 0; color: var(--mchat-text); font-size: 22px; }
.mchat-notification-form { display: grid; gap: 12px; }
.mchat-notification-form > label { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(150px, .8fr); align-items: center; gap: 12px; border: 1px solid var(--mchat-border); border-radius: 10px; background: var(--mchat-sidebar); padding: 11px 12px; font-weight: 600; }
.mchat-app .mchat-notification-form select { width: 100%; border: 1px solid var(--mchat-border); border-radius: 7px; background: var(--mchat-surface); padding: 7px; color: var(--mchat-text); }
.mchat-notification-channel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; border-top: 1px solid var(--mchat-border); padding-top: 13px; }
.mchat-notification-channel strong { color: var(--mchat-muted); font-size: 12px; }
.mchat-app .mchat-notification-channel button { grid-column: 1 / -1; width: 100%; max-width: 100%; height: auto; justify-self: start; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.35; text-align: left; }
.mchat-app .mchat-notification-email-state { margin: 0; color: var(--mchat-muted); font-size: 12px; }
.mchat-notification-form > .mchat-notification-email-toggle { display: flex; grid-template-columns: none; justify-content: flex-start; font-weight: 600; }
.mchat-notification-email-toggle input { width: auto; margin: 0; }
.mchat-notification-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.mchat-app .mchat-notification-actions .mchat-notification-save { border-color: var(--mchat-accent); background: var(--mchat-accent); color: var(--mchat-on-accent); }
.mchat-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(34px, 1fr)); gap: 3px; }
.mchat-app .mchat-emoji-grid button { min-height: 38px; border: 0; background: transparent; padding: 6px; color: inherit; font-size: 21px; }
.mchat-app .mchat-emoji-grid button:hover { background: var(--mchat-sidebar); }
.mchat-gif-search { display: flex; gap: 6px; margin-bottom: 8px; }
.mchat-app .mchat-gif-search input { min-width: 0; flex: 1; padding: 8px; }
.mchat-app .mchat-gif-search button { background: var(--mchat-accent); color: var(--mchat-on-accent); }
.mchat-gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mchat-app .mchat-gif-grid button { min-height: 0; border: 0; background: transparent; padding: 0; }
.mchat-gif-grid img { display: block; width: 100%; height: 90px; border-radius: 6px; object-fit: cover; }
.mchat-gif-credit { display: block; margin-top: 8px; color: var(--mchat-muted); text-align: right; }

.mchat-access { position: relative; z-index: 5; max-height: calc(100% - 58px); flex: 0 0 auto; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--mchat-border); background: var(--mchat-sidebar); padding: 10px; -webkit-overflow-scrolling: touch; }
.mchat-access-card { width: min(720px, 100%); margin: 0 auto; border: 0; border-radius: 10px; background: var(--mchat-surface); padding: 12px 14px; box-shadow: none; }
.mchat-app .mchat-access-card h3 { margin: 0 0 5px; color: var(--mchat-text); }
.mchat-app .mchat-access-card > p { margin: 0 0 10px; color: var(--mchat-muted); font-size: 13px; }
.mchat-app .mchat-access-card form { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); align-items: end; gap: 8px; margin: 0; }
.mchat-access-card .mchat-consent { grid-column: 1 / -1; }
.mchat-access-card form > label { display: grid; gap: 4px; }
.mchat-app .mchat-access-card input { width: 100%; border: 1px solid var(--mchat-border); border-radius: 8px; background: var(--mchat-surface); padding: 9px; color: var(--mchat-text); }
.mchat-access-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.mchat-app .mchat-access-actions button { min-width: 0; min-height: 50px; border-color: var(--mchat-border); background: var(--mchat-sidebar); padding: 7px 9px; color: var(--mchat-text); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.mchat-app .mchat-access-actions button.is-active { border-color: var(--mchat-accent); background: var(--mchat-accent); color: var(--mchat-on-accent); }
.mchat-social-login { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 10px; color: var(--mchat-muted); font-size: 12px; }
.mchat-social-providers { display: flex; align-items: center; gap: 7px; }
.mchat-social-provider { display: flex; align-items: center; }
.mchat-social-provider .nsl-container { margin: 0 !important; padding: 0 !important; }
.mchat-social-provider .nsl-container-buttons { display: flex !important; margin: 0 !important; padding: 0 !important; }
.mchat-social-provider .nsl-button { margin: 0 !important; }
.mchat-access-error { margin-top: 10px; border-radius: 7px; background: var(--mchat-danger-surface); padding: 9px 11px; color: var(--mchat-danger); }
.mchat-consent-label { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; }
.mchat-consent-label input { width: auto; margin-top: 2px; }

.mchat-user-list { display: grid; gap: 8px; margin-top: 14px; }
.mchat-app .mchat-drawer-close { display: none; }
.mchat-user { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-radius: 9px; background: var(--mchat-surface); padding: 8px; }
.mchat-user > span:not(.mchat-user-avatar):not(.mchat-user-tools) { min-width: 0; overflow-wrap: anywhere; }
.mchat-user-avatar { width: 30px; height: 30px; }
.mchat-user i { color: #16a34a; font-size: 10px; }
.mchat-user i.is-busy { color: #dc2626; }
.mchat-user > span > a, .mchat-info-member-copy a { color: inherit; text-decoration: none; }
.mchat-user > span > a:hover, .mchat-user > span > a:focus-visible { color: var(--mchat-accent); text-decoration: none; }
.mchat-info-member-copy a:hover, .mchat-info-member-copy a:focus-visible { color: var(--mchat-accent); text-decoration: underline; }
.mchat-user-status { display: flex; align-items: center; gap: 5px; }
.mchat-app .mchat-user-menu > summary { width: 28px; min-width: 28px; min-height: 28px; border: 0; background: transparent; padding: 4px; }
.mchat-user-menu .mchat-member-menu-panel { z-index: 30; }
.mchat-role { display: block; color: var(--mchat-muted); }

.mchat-conversation-info {
	position: absolute;
	z-index: 55;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(390px, 100%);
	overflow: auto;
	border-left: 1px solid var(--mchat-border);
	background: var(--mchat-surface);
	padding: 24px 18px;
	opacity: 0;
	transform: translateX(22px);
	transition: opacity .16s ease, transform .18s ease;
	box-shadow: -12px 0 30px rgba(15, 23, 42, .12);
}
.mchat-app.is-info-open .mchat-conversation-info { opacity: 1; transform: translateX(0); }
.mchat-app .mchat-info-close {
	display: grid;
	position: sticky;
	z-index: 2;
	top: 0;
	float: right;
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	place-items: center;
	border-color: var(--mchat-border);
	background: var(--mchat-surface);
	padding: 0;
	color: var(--mchat-text);
	font-size: 22px;
	line-height: 1;
}
.mchat-info-summary { display: grid; justify-items: center; gap: 6px; clear: both; padding: 8px 0 20px; text-align: center; }
.mchat-info-summary .mchat-conversation-avatar { width: 72px; height: 72px; }
.mchat-info-summary .mchat-conversation-avatar.is-stack img { width: 44px; height: 44px; border-color: var(--mchat-surface); }
.mchat-info-summary .mchat-conversation-avatar.is-stack img:nth-child(1) { top: 0; left: 0; }
.mchat-info-summary .mchat-conversation-avatar.is-stack img:nth-child(2) { top: 0; right: 0; bottom: auto; }
.mchat-info-summary .mchat-conversation-avatar.is-stack img:nth-child(3) { top: auto; right: auto; bottom: 0; left: 50%; width: 40px; height: 40px; transform: translateX(-50%); }
.mchat-app .mchat-info-summary h2, .mchat-app .mchat-conversation-info h3 { margin: 0; color: var(--mchat-text); }
.mchat-app .mchat-info-summary p { margin: 0; color: var(--mchat-muted); }
.mchat-info-notifications { display: grid; gap: 5px; margin-bottom: 18px; }
.mchat-app .mchat-info-notifications select, .mchat-app .mchat-info-search { width: 100%; border: 1px solid var(--mchat-border); border-radius: 8px; background: var(--mchat-surface); padding: 9px; color: var(--mchat-text); }
.mchat-info-search { margin: 10px 0; }
.mchat-info-members, .mchat-info-add { display: grid; gap: 5px; }
.mchat-info-add { margin-bottom: 10px; border-bottom: 1px solid var(--mchat-border); padding-bottom: 10px; }
.mchat-info-member { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-radius: 9px; background: var(--mchat-sidebar); padding: 8px; }
.mchat-info-member .mchat-user-avatar { width: 38px; height: 38px; }
.mchat-info-member-copy { display: grid; min-width: 0; }
.mchat-info-member-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchat-info-member-copy small { color: var(--mchat-muted); }
.mchat-info-member-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; }

.mchat-info-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 2px;
}

.mchat-info-pagination[hidden] {
	display: none;
}

.mchat-app .mchat-info-pagination button {
	display: inline-flex;
	min-width: 34px;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mchat-border);
	border-radius: 7px;
	background: var(--mchat-surface);
	padding: 5px 9px;
	color: var(--mchat-text);
	font-size: 12px;
	line-height: 1;
}

.mchat-app .mchat-info-pagination button:hover:not(:disabled),
.mchat-app .mchat-info-pagination button:focus-visible {
	border-color: var(--mchat-accent);
	color: var(--mchat-accent);
}

.mchat-app .mchat-info-pagination button.is-current {
	border-color: var(--mchat-accent);
	background: var(--mchat-accent);
	color: var(--mchat-on-accent);
	font-weight: 700;
}

.mchat-app .mchat-info-pagination button:disabled {
	opacity: .4;
	cursor: default;
}

.mchat-info-pagination-gap {
	display: inline-flex;
	min-width: 20px;
	align-items: center;
	justify-content: center;
	color: var(--mchat-muted);
}

.mchat-app .mchat-icon-action,
.mchat-app .mchat-member-menu > summary { display: grid; width: 32px; min-width: 32px; min-height: 32px; place-items: center; border: 1px solid var(--mchat-border); border-radius: 7px; background: var(--mchat-surface); padding: 6px; color: var(--mchat-text); cursor: pointer; list-style: none; }
.mchat-member-menu > summary::-webkit-details-marker { display: none; }
.mchat-icon-action .mchat-control-label,
.mchat-member-menu > summary .mchat-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mchat-icon-action .mchat-control-icon,
.mchat-member-menu > summary .mchat-control-icon { width: 17px; height: 17px; }
.mchat-member-menu { position: relative; }
.mchat-member-menu-panel {
	display: grid;
	position: absolute;
	z-index: 20;
	top: calc(100% + 7px);
	right: 0;
	width: max-content;
	min-width: 210px;
	gap: 3px;
	border: 1px solid var(--mchat-border);
	border-radius: 12px;
	background: var(--mchat-surface);
	padding: 8px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
	transform-origin: top right;
	animation: mchat-menu-in .14s ease-out;
}
@keyframes mchat-menu-in {
	from { opacity: 0; transform: translateY(-4px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.mchat-app .mchat-member-menu-panel button,
.mchat-app .mchat-member-menu-panel a,
.mchat-app .mchat-member-role { width: 100%; min-height: 32px; border: 1px solid var(--mchat-border); border-radius: 7px; background: var(--mchat-surface); padding: 5px 8px; color: var(--mchat-text); font-size: 12px; text-align: left; }
.mchat-app .mchat-member-menu-panel a { display: flex; align-items: center; text-decoration: none; }

.mchat-no-sidebar { grid-template-columns: minmax(0, 1fr) minmax(190px, 230px); }
.mchat-no-sidebar > .mchat-sidebar { display: none; }
.mchat-app.mchat-no-sidebar .mchat-sidebar-toggle,
.mchat-app.mchat-no-sidebar .mchat-sidebar-open,
.mchat-app.mchat-no-sidebar .mchat-mobile-rooms { display: none !important; }
@media (min-width: 901px) {
	.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) var(--mchat-users-width);
	}
	.mchat-left-collapsed > .mchat-sidebar {
		display: none;
	}
	.mchat-app.mchat-left-collapsed .mchat-sidebar-open { display: inline-grid !important; }

	.mchat-no-users {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr);
	}
	.mchat-no-users > .mchat-users {
		display: none;
	}
	.mchat-left-collapsed.mchat-no-users {
		grid-template-columns: minmax(0, 1fr);
	}

	.mchat-theme-compact.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
	.mchat-theme-slim.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
	.mchat-theme-compact.mchat-left-collapsed.mchat-no-users,
	.mchat-theme-slim.mchat-left-collapsed.mchat-no-users {
		grid-template-columns: minmax(0, 1fr);
	}
}
.mchat-no-sidebar.mchat-no-users { grid-template-columns: minmax(0, 1fr) 0; }
.mchat-fullscreen { position: fixed; inset: 0; z-index: 999999; width: 100vw; height: 100vh !important; border-radius: 0; }
.mchat-available-screen { width: 100%; height: calc(100vh - var(--mchat-top-offset, 0px) - var(--mchat-bottom-offset, 0px)) !important; height: calc(100dvh - var(--mchat-top-offset, 0px) - var(--mchat-bottom-offset, 0px)) !important; min-height: 420px; border-radius: 0; }

.mchat-floating { position: fixed; right: 20px; bottom: var(--mchat-floating-bottom-distance, 14px); z-index: 999990; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mchat-floating[hidden] { display: none !important; }
.mchat-floating-left { right: auto; left: 20px; }
.mchat-floating .mchat-floating-launcher { display: inline-flex; position: relative; min-height: 54px; align-items: center; gap: 9px; border: 0; border-radius: 999px; background: var(--mchat-accent); padding: 12px 17px; color: #fff; font: 600 14px/1 system-ui, sans-serif; box-shadow: 0 10px 30px rgba(15, 23, 42, .28); cursor: pointer; }
.mchat-floating-launcher svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mchat-floating-launcher strong { display: grid; position: absolute; top: -5px; right: -4px; min-width: 21px; height: 21px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #dc2626; color: #fff; font-size: 10px; }
.mchat-floating-launcher strong[hidden] { display: none; }
.mchat-floating-panel {
	position: absolute;
	right: 0;
	bottom: 66px;
	width: min(980px, calc(100vw - 40px));
	height: min(720px, calc(100vh - 100px));
	height: min(720px, calc(100dvh - 100px));
	overflow: hidden;
	border: 1px solid var(--mchat-border);
	border-radius: 16px;
	background: var(--mchat-surface);
	color: var(--mchat-text);
	font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-shadow: 0 22px 70px rgba(15, 23, 42, .3);
}
.mchat-floating-left .mchat-floating-panel { right: auto; left: 0; }
.mchat-floating-tools {
	display: flex;
	position: absolute;
	z-index: 150;
	top: 8px;
	right: 8px;
	left: 8px;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
}

.mchat-floating-tools > .mchat-new-conversation {
	margin-right: auto;
}

.mchat-floating-tools > .mchat-unread-filter {
	margin-right: 0;
}

.mchat-floating-tools > .mchat-inbox-search {
	width: auto;
	min-width: 0;
	flex: 1 1 auto;
	height: 34px;
	margin: 0 8px 0 0;
	border: 1px solid var(--mchat-border);
	border-radius: 8px;
	background: var(--mchat-surface);
	padding: 7px 10px;
	color: var(--mchat-text);
}

.mchat-floating-tools > .mchat-inbox-search[hidden] {
	display: none !important;
}
.mchat-floating .mchat-floating-tools button { display: grid; width: 34px; min-width: 34px; height: 34px; min-height: 34px; place-items: center; border: 1px solid var(--mchat-border); border-radius: 50%; background: var(--mchat-surface); padding: 7px; color: var(--mchat-text); cursor: pointer; }
.mchat-floating-tools .mchat-control-icon {
	width: 18px;
	height: 18px;
}

.mchat-floating-tools .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-floating-tools .mchat-floating-users {
	display: grid;
	width: 34px;
	min-width: 34px;
	place-items: center;
	white-space: nowrap;
}

.mchat-floating-users-count {
	display: block;
	color: #15803d;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.mchat-floating-users:has(.mchat-floating-users-count:not(:empty)) > .mchat-control-icon {
	display: none;
}
.mchat-floating-close {
	display: grid;
	place-items: center;
	position: static;
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 1;
}
.mchat-floating-app {
	width: 100%;
	height: 100% !important;
	min-height: 0;
	max-height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.mchat-floating-tools + .mchat-floating-app .mchat-header { padding-right: 126px; }
.mchat-floating-tools + .mchat-floating-app .mchat-header-actions { display: none; }
.mchat-floating-app .mchat-conversation-info { z-index: 200; }
.mchat-floating-app .mchat-sidebar { padding-top: 46px; }

.mchat-floating-app .mchat-sidebar-toolbar {
	display: none;
}

.mchat-floating-app > .mchat-sidebar .mchat-drawer-close { display: none; }

@media (min-width: 621px) {
	.mchat-theme-compact {
		grid-template-columns: 320px minmax(0, 1fr) 320px;
		font-size: 13px;
	}

	.mchat-theme-compact.mchat-no-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.mchat-theme-compact.mchat-no-users {
		grid-template-columns: 320px minmax(0, 1fr);
	}

	.mchat-theme-compact .mchat-sidebar,
	.mchat-theme-compact .mchat-users {
		padding: 11px;
	}

	.mchat-theme-compact .mchat-brand {
		gap: 7px;
		margin-bottom: 8px;
	}

	.mchat-theme-compact .mchat-logo {
		width: 32px;
		height: 32px;
	}

	.mchat-theme-compact .mchat-product,
	.mchat-theme-compact .mchat-users h3 {
		font-size: 16px;
	}

	.mchat-theme-compact .mchat-inbox-search {
		margin-bottom: 7px;
		padding: 7px 8px;
	}

	.mchat-theme-compact .mchat-inbox-panels {
		margin-inline: -5px;
	}

	.mchat-theme-compact .mchat-conversation {
		min-height: 56px;
		gap: 8px;
		padding: 5px;
	}

	.mchat-theme-compact .mchat-conversation-avatar {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}

	.mchat-theme-compact .mchat-conversation-copy {
		gap: 2px;
	}

	.mchat-theme-compact .mchat-conversation-copy small {
		font-size: 10px;
	}

	.mchat-theme-compact .mchat-conversation-pin {
		width: 28px;
		min-width: 28px;
		min-height: 28px;
		padding: 5px;
	}

	.mchat-theme-compact .mchat-header {
		min-height: 56px;
		gap: 8px;
		padding: 7px 10px;
	}

	.mchat-theme-compact .mchat-title {
		font-size: 18px;
	}

	.mchat-theme-compact .mchat-description {
		font-size: 12px;
	}

	.mchat-theme-compact .mchat-messages {
		padding: 10px 12px;
	}

	.mchat-theme-compact .mchat-message {
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 7px;
		margin-bottom: 6px;
	}

	.mchat-theme-compact .mchat-avatar {
		width: 28px;
		height: 28px;
	}

	.mchat-theme-compact .mchat-compose {
		gap: 5px;
		padding: 7px;
	}

	.mchat-theme-compact .mchat-compose textarea {
		min-height: 40px;
		padding: 9px 10px;
	}
}

.mchat-theme-simplified {
	border-radius: 8px;
	box-shadow: none;
}

.mchat-theme-simplified :where(button, input, textarea, select) {
	border-radius: 6px;
}

.mchat-theme-simplified .mchat-conversation-row,
.mchat-theme-simplified .mchat-conversation {
	border-radius: 6px;
}

.mchat-theme-simplified .mchat-inbox-search {
	border-radius: 6px;
}

@media (min-width: 621px) {
	.mchat-theme-simplified .mchat-sidebar,
	.mchat-theme-simplified .mchat-users {
		padding: 14px;
	}

	.mchat-theme-simplified .mchat-brand {
		margin-bottom: 9px;
	}

	.mchat-theme-simplified .mchat-conversation {
		min-height: 62px;
		gap: 8px;
		padding: 6px;
	}

	.mchat-theme-simplified .mchat-conversation-avatar {
		width: 42px;
		height: 42px;
		flex-basis: 42px;
	}

	.mchat-theme-simplified .mchat-header {
		min-height: 60px;
		padding: 8px 12px;
	}

	.mchat-theme-simplified .mchat-title {
		font-size: 18px;
	}

	.mchat-theme-simplified .mchat-messages {
		padding: 11px 13px;
	}

	.mchat-theme-simplified .mchat-message {
		gap: 8px;
		margin-bottom: 7px;
	}

	.mchat-theme-simplified .mchat-compose {
		padding: 8px;
	}
}

@media (min-width: 621px) {
	.mchat-theme-slim {
		grid-template-columns: 280px minmax(0, 1fr) 280px;
		font-size: 12px;
	}

	.mchat-theme-slim.mchat-no-sidebar {
		grid-template-columns: minmax(0, 1fr) 280px;
	}

	.mchat-theme-slim.mchat-no-users {
		grid-template-columns: 280px minmax(0, 1fr);
	}

	.mchat-theme-slim .mchat-sidebar,
	.mchat-theme-slim .mchat-users {
		padding: 7px;
	}

	.mchat-theme-slim .mchat-brand {
		gap: 5px;
		margin-bottom: 5px;
	}

	.mchat-theme-slim .mchat-logo {
		width: 28px;
		height: 28px;
	}

	.mchat-theme-slim .mchat-product,
	.mchat-theme-slim .mchat-users h3 {
		font-size: 14px;
	}

	.mchat-theme-slim .mchat-inbox-search {
		margin-bottom: 5px;
		padding: 5px 7px;
	}

	.mchat-theme-slim .mchat-inbox-panels {
		margin-inline: -3px;
	}

	.mchat-theme-slim .mchat-inbox-tabs {
		margin-bottom: 5px;
	}

	.mchat-theme-slim .mchat-inbox-tabs button {
		min-height: 38px;
		padding: 4px 5px;
	}

	.mchat-theme-slim .mchat-conversation {
		min-height: 46px;
		gap: 6px;
		padding: 3px 4px;
	}

	.mchat-theme-slim .mchat-conversation-avatar {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
	}

	.mchat-theme-slim .mchat-conversation-copy {
		gap: 1px;
	}

	.mchat-theme-slim .mchat-conversation-copy small {
		font-size: 9px;
	}

	.mchat-theme-slim .mchat-conversation-pin {
		width: 25px;
		min-width: 25px;
		min-height: 25px;
		padding: 4px;
	}

	.mchat-theme-slim .mchat-header {
		min-height: 48px;
		gap: 6px;
		padding: 5px 8px;
	}

	.mchat-theme-slim .mchat-title {
		font-size: 16px;
	}

	.mchat-theme-slim .mchat-description {
		font-size: 10px;
	}

	.mchat-theme-slim .mchat-messages {
		padding: 7px 9px;
	}

	.mchat-theme-slim .mchat-message {
		grid-template-columns: 26px minmax(0, 1fr);
		gap: 5px;
		margin-bottom: 4px;
	}

	.mchat-theme-slim .mchat-avatar {
		width: 25px;
		height: 25px;
	}

	.mchat-theme-slim .mchat-compose {
		gap: 4px;
		padding: 5px;
	}

	.mchat-theme-slim .mchat-compose textarea {
		min-height: 36px;
		padding: 7px 8px;
	}

	.mchat-theme-slim .mchat-compose .mchat-upload,
	.mchat-theme-slim .mchat-compose .mchat-gif,
	.mchat-theme-slim .mchat-compose .mchat-emoji {
		height: 38px;
		min-height: 38px;
	}
}

@media (min-width: 901px) {
	.mchat-floating-app {
		grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
	}

	.mchat-floating-app > .mchat-users {
		display: none !important;
	}

	.mchat-floating-app.is-mobile-users > .mchat-users {
		display: block !important;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		width: min(320px, 88%);
		padding-top: 72px;
		overflow-y: auto;
		transform: none;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	}

}

@media (max-width: 900px) {
	.mchat-app,
	.mchat-no-sidebar,
	.mchat-no-users { grid-template-columns: minmax(0, 1fr); }
	.mchat-sidebar,
	.mchat-users { position: absolute; top: 0; bottom: 0; z-index: 50; display: block; width: min(320px, 88%); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); -webkit-overflow-scrolling: touch; }
	.mchat-floating-app > .mchat-users .mchat-drawer-close {
		display: none;
	}
	.mchat-sidebar { left: 0; transform: translateX(-105%); }
	.mchat-users { right: 0; transform: translateX(105%); }
	.mchat-app.is-mobile-rooms .mchat-sidebar,
	.mchat-app.is-mobile-users .mchat-users { transform: translateX(0); }
	.mchat-mobile-rooms { display: inline-block; }
	.mchat-online-avatars {
		display: none;
	}

	.mchat-app .mchat-users-toggle.has-avatars {
		width: auto;
		min-width: 48px;
		padding-inline: 8px;
	}

	.mchat-users-toggle.has-avatars > .mchat-control-icon {
		display: block;
	}
	.mchat-no-sidebar .mchat-mobile-rooms,
	.mchat-no-users .mchat-users-toggle { display: none; }
	.mchat-floating { right: 14px; bottom: var(--mchat-floating-bottom-distance, 14px); }
	.mchat-floating-left { right: auto; left: 14px; }
	.mchat-floating-panel { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
	.mchat-floating-app { grid-template-columns: minmax(0, 1fr); }
	.mchat-floating-app .mchat-sidebar-toggle { display: none !important; }
	.mchat-floating-app > .mchat-sidebar {
		position: relative;
		inset: auto;
		z-index: 1;
		display: flex;
		width: 100%;
		padding-top: 62px;
		transform: none;
		box-shadow: none;
	}
	.mchat-floating-app:not(.is-thread-view) > .mchat-main {
		display: none !important;
	}

	.mchat-floating-app:not(.is-thread-view):not(.is-mobile-users) > .mchat-users {
		display: none !important;
	}

	.mchat-floating-app.is-mobile-users > .mchat-users {
		display: block !important;
		padding-top: 72px;
		transform: translateX(0);
	}
	
	.mchat-floating-app.is-thread-view > .mchat-sidebar { display: none !important; }
	.mchat-floating-app.is-thread-view > .mchat-main { display: flex !important; }
	.mchat-floating-app .mchat-mobile-rooms { display: inline-flex !important; }
	.mchat-floating-app .mchat-mobile-rooms[hidden] { display: none !important; }
	.mchat-floating-app .mchat-conversation-info {
		z-index: 200;
		inset: 0;
		width: 100%;
		border-left: 0;
	}
	body.mchat-popup-open { overflow: hidden; }

	/* Keep the full-screen mobile messenger fixed to the viewport. Only the
	   actual inbox/message scrollers may move; the panel/sidebar must never
	   become a second scroll container or grow past the viewport. */
	.mchat-floating-panel {
		max-width: 100vw;
		max-height: 100dvh;
		overflow: hidden;
		overscroll-behavior: none;
	}

	.mchat-floating-app {
		min-height: 0 !important;
		max-height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}

	.mchat-floating-app > .mchat-sidebar {
		height: 100%;
		min-height: 0;
		max-height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}

	.mchat-floating-app > .mchat-sidebar .mchat-inbox-panels {
		min-height: 0;
		max-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
	}
}

.mchat-main.mchat-header-compact {
	.mchat-header { gap: 6px; padding: 8px 10px; }

	.mchat-header .mchat-control-label,
	.mchat-header-actions .mchat-unread-filter .mchat-control-label,
	.mchat-users-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mchat-header-actions { gap: 3px; }

	.mchat-app .mchat-header-actions button,
	.mchat-app .mchat-mobile-rooms,
	.mchat-app .mchat-header .mchat-radio button {
		width: 36px;
		min-width: 36px;
		min-height: 36px;
		padding: 7px;
	}

	.mchat-app .mchat-header-actions .mchat-users-toggle {
		width: auto;
		min-width: 48px;
		padding-inline: 8px;
		overflow: hidden;
	}

	.mchat-app .mchat-header-actions .mchat-users-toggle.has-avatars {
		min-width: 48px;
	}

	.mchat-header-actions .mchat-users-toggle:not(.has-avatars) .mchat-control-icon {
		width: 15px;
		height: 15px;
		flex: 0 0 15px;
	}

	.mchat-profile .mchat-control-avatar {
		width: 23px;
		height: 23px;
	}

	.mchat-header .mchat-radio div,
	.mchat-header .mchat-radio input[type="range"] {
		display: none;
	}

	.mchat-header .mchat-radio {
		min-width: 75px;
		flex: 0 0 auto;
	}
}

@media (max-width: 620px) {
	.mchat-inbox-tabs {
		order: initial;
		margin: 10px -18px -18px;
		border-top: 1px solid var(--mchat-border);
		border-bottom: 0;
	}

	.mchat-app .mchat-inbox-tabs button {
		min-height: 50px;
		font-size: clamp(11px, 3.4vw, 14px);
		padding: 7px 6px;
	}
	.mchat-app { height: max(540px, var(--mchat-height)); border-radius: 0; }
	.mchat-header { align-items: center; flex-wrap: wrap; gap: 4px; padding: 7px; }
	.mchat-room-heading { min-width: 70px; flex: 1 1 90px; }
	.mchat-title { font-size: 16px; }
	.mchat-description { display: none; }
	.mchat-participant-count { font-size: 10px; }
	.mchat-header-actions { flex-wrap: nowrap; justify-content: flex-end; }
	.mchat-header-actions { max-width: 148px; }
	.mchat-app .mchat-header-actions button { min-height: 31px; padding: 6px 8px; }
	.mchat-floating-tools { top: 6px; right: 6px; left: 6px; gap: 3px; }
	.mchat-floating-tools > .mchat-inbox-search {
		height: 31px;
		margin-right: 4px;
		padding: 5px 8px;
	}
	.mchat-floating .mchat-floating-tools button { width: 31px; min-width: 31px; height: 31px; min-height: 31px; padding: 6px; }
	.mchat-floating-tools + .mchat-floating-app .mchat-header { padding-right: 108px; }
	.mchat-header .mchat-radio { margin-left: auto; }
	.mchat-users-toggle .mchat-online { font-size: 10px; font-weight: 700; }
	.mchat-app .mchat-compose { flex-wrap: wrap; }
	.mchat-app .mchat-compose textarea { order: 1; min-width: calc(100% - 132px); }
	.mchat-send { order: 2; }
	.mchat-upload, .mchat-gif, .mchat-emoji { order: 3; }
	.mchat-message.is-mine { margin-left: 0; }
	.mchat-message-actions { opacity: 1; }
	.mchat-header .mchat-radio div,
	.mchat-header .mchat-radio input[type="range"] { display: none; }
	.mchat-access-card form { grid-template-columns: 1fr; }
	.mchat-access-card .mchat-consent { grid-column: 1; }
	.mchat-notification-card { padding: 18px; }
	.mchat-notification-form > label { grid-template-columns: 1fr; }
	.mchat-notification-channel { grid-template-columns: 1fr; }
	.mchat-notification-channel strong,
	.mchat-notification-channel button { grid-column: 1; justify-self: stretch; }
	.mchat-app .mchat-notification-channel button { width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
	.mchat-notification-actions { display: grid; }
	.mchat-floating-launcher { width: 54px; padding: 14px; }
	.mchat-floating-launcher > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
	.mchat-app,
	.mchat-app * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.mchat-app .mchat-message.is-pending{opacity:.78;border:1px dashed var(--mchat-border);background:color-mix(in srgb,var(--mchat-surface) 88%,var(--mchat-accent))}
.mchat-app .mchat-pending-label{display:inline-flex;margin-inline-start:.45rem;padding:.1rem .45rem;border-radius:999px;background:var(--mchat-sidebar);color:var(--mchat-muted);font-weight:700}
.mchat-app .mchat-info-moderation{margin:1rem 0;padding:1rem;border:1px solid var(--mchat-border);border-radius:12px;background:var(--mchat-surface)}
.mchat-app .mchat-info-pending-item{display:grid;gap:.4rem;margin-top:.75rem;padding:.75rem;border:1px solid var(--mchat-border);border-radius:10px}
.mchat-app .mchat-info-pending-item time{font-size:.8rem;color:var(--mchat-muted)}
.mchat-app .mchat-info-pending-item p,.mchat-app .mchat-info-pending-item blockquote{margin:0}
.mchat-app .mchat-moderation-actions,.mchat-moderation-queue .mchat-moderation-item footer{display:flex;gap:.5rem;flex-wrap:wrap}
.mchat-moderation-queue{
	display:grid;
	gap:1rem;
	color:var(--mchat-text,#172033);
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mchat-moderation-queue :where(button,input,textarea,select){
	font:inherit;
}

.mchat-moderation-queue .mchat-moderation-item{
	padding:.75rem .875rem;
	border:1px solid var(--mchat-border,#d8deea);
	border-radius:12px;
	background:var(--mchat-surface,#fff);
}

.mchat-moderation-queue .mchat-moderation-item header{
	display:flex;
	gap:.75rem;
	align-items:center;
	flex-wrap:wrap;
}

.mchat-moderation-queue .mchat-moderation-item time{
	margin-inline-start:auto;
	color:var(--mchat-muted,#667085);
}

.mchat-moderation-queue .mchat-moderation-meta{
	margin:.35rem 0;
	color:var(--mchat-muted,#667085);
	font-size:.875rem;
}

.mchat-moderation-queue .mchat-moderation-content{
	margin:.5rem 0;
	white-space:pre-wrap;
}

.mchat-moderation-queue .mchat-moderation-item form{
	margin:0;
}

.mchat-app .mchat-ai-review,
.mchat-moderation-queue .mchat-ai-review {
	margin:10px 0;
	padding:10px 12px;
	border:1px solid var(--mchat-border);
	border-radius:10px;
	background:color-mix(in srgb,var(--mchat-accent) 8%,var(--mchat-surface));
	color:var(--mchat-text);
}

.mchat-app .mchat-ai-review p,
.mchat-moderation-queue .mchat-ai-review p {
	margin:4px 0 0;
}

.mchat-moderation-queue .mchat-ai-review{
	margin:.5rem 0;
	padding:.65rem .75rem;
}
.mchat-app .mchat-info-ai-summary { padding: 14px 0; border-bottom: 1px solid var(--mchat-border); }
.mchat-app .mchat-info-ai-summary > div:first-of-type,
.mchat-app .mchat-translation { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mchat-app .mchat-ai-summary-result { margin-top: 12px; }
.mchat-app .mchat-ai-summary-result h4,
.mchat-app .mchat-ai-summary-result p { margin: 0 0 8px; }
.mchat-app .mchat-ai-summary-result ul { margin: 4px 0 10px; padding-inline-start: 20px; }
.mchat-app .mchat-translation { margin-top: 8px; padding: 8px; border-top: 1px solid var(--mchat-border); }
.mchat-app .mchat-translation p { flex-basis: 100%; margin: 0; }
.mchat-app .mchat-bot-label,
.mchat-person-row .mchat-bot-label { display: inline-flex; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--mchat-accent) 12%, var(--mchat-surface)); color: var(--mchat-text); font-size: 11px; font-weight: 700; }
.mchat-person-row .mchat-person-name { display: flex; align-items: center; flex-wrap: wrap; }
.mchat-app .mchat-smart-replies { display: flex; min-width: 0; gap: 6px; align-items: center; flex-wrap: wrap; padding: 7px 12px; border-top: 1px solid var(--mchat-border); background: var(--mchat-surface); }
.mchat-app .mchat-smart-replies[hidden] { display: none; }
.mchat-app .mchat-smart-replies strong { color: var(--mchat-muted); font-size: 12px; }
.mchat-app .mchat-smart-replies button { width: auto; max-width: 100%; min-height: 30px; padding: 5px 9px; border: 1px solid var(--mchat-border); border-radius: 999px; background: color-mix(in srgb, var(--mchat-accent) 7%, var(--mchat-surface)); color: var(--mchat-text); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; white-space: normal; word-break: break-word; text-align: left; }
.mchat-app .mchat-copilot-result { margin-top: 8px; padding: 8px; border-inline-start: 3px solid var(--mchat-accent); color: var(--mchat-text); white-space: normal; }
.mchat-app .mchat-copilot-result:empty { display: none; }

.mchat-app .mchat-mention-picker { display: grid; flex: 0 0 auto; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--mchat-border); background: var(--mchat-surface); padding: 6px; }
.mchat-app .mchat-mention-picker[hidden] { display: none; }
.mchat-app .mchat-mention-picker button { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; padding: 6px 8px; color: var(--mchat-text); text-align: left; }
.mchat-app .mchat-mention-picker button:hover,
.mchat-app .mchat-mention-picker button.is-active { background: color-mix(in srgb, var(--mchat-accent) 10%, var(--mchat-surface)); }
.mchat-app .mchat-mention-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--mchat-accent) 16%, var(--mchat-surface)); font-size: 12px; font-weight: 700; }
.mchat-app .mchat-mention-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mchat-app .mchat-mention-copy { display: grid; min-width: 0; }
.mchat-app .mchat-mention-copy small,
.mchat-app .mchat-bot-presence { color: var(--mchat-muted); font-size: 11px; }


.mchat-hide-message-avatars .mchat-message { grid-template-columns: minmax(0, 1fr); }
.mchat-hide-message-avatars .mchat-avatar { display: none; }
.mchat-hide-own-avatar .mchat-message.is-mine .mchat-avatar { display: none; }
.mchat-hide-own-avatar .mchat-message.is-mine { grid-template-columns: minmax(0, 1fr); }
.mchat-hide-timestamps .mchat-message-meta time { display: none; }

.mchat-layout-modern .mchat-message-bubble,
.mchat-layout-modern .mchat-message-bubble *:not(a):not(button):not(input):not(select):not(textarea) {
	color: inherit;
}


/* vNext panel and control polish */
.mchat-sidebar-toolbar .mchat-sidebar-toggle .mchat-control-label,
.mchat-sidebar-open .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-sidebar-toolbar {
	grid-template-columns: minmax(0, 1fr) 38px;
	gap: 8px;
}

.mchat-sidebar-toolbar .mchat-inbox-search {
	min-width: 0;
	height: 38px;
}

.mchat-app .mchat-sidebar-toggle,
.mchat-app .mchat-sidebar-open {
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 8px;
	border-radius: 9px;
}

.mchat-app .mchat-header-actions > button {
	width: auto;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 8px 11px;
	border-radius: 9px;
}

.mchat-app .mchat-header-actions .mchat-profile {
	width: auto;
	min-width: 38px;
	padding: 6px 10px 6px 6px;
	gap: 7px;
}

.mchat-app .mchat-header-actions .mchat-profile .mchat-control-avatar {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
}

.mchat-app .mchat-header-actions .mchat-users-toggle {
	width: auto;
	min-width: 46px;
	gap: 5px;
}

.mchat-app .mchat-header-actions .mchat-users-toggle .mchat-online {
	position: static;
	min-width: 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.mchat-header {
	min-height: 58px;
	gap: 8px;
	padding: 9px 12px;
}

.mchat-app .mchat-title {
	font-size: 17px;
}

.mchat-app .mchat-description {
	font-size: 11px;
}

.mchat-users {
	padding: 16px 14px;
}

@media (min-width: 901px) {
	.mchat-app:not(.mchat-floating-app) > .mchat-users {
		position: relative;
	}
}

.mchat-app .mchat-users > .mchat-drawer-close {
	display: grid;
	position: absolute;
	z-index: 3;
	top: 10px;
	right: 10px;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	place-items: center;
	border-color: transparent;
	background: transparent;
	padding: 0;
	color: var(--mchat-muted);
	font-size: 22px;
	line-height: 1;
}

.mchat-app .mchat-users > .mchat-drawer-close:hover {
	border-color: var(--mchat-border);
	background: var(--mchat-surface);
	color: var(--mchat-text);
}

.mchat-app .mchat-users h3 {
	padding-right: 34px;
	font-size: 15px;
}

.mchat-user-list {
	gap: 4px;
	margin-top: 12px;
}

.mchat-user {
	border-radius: 8px;
	background: transparent;
	padding: 7px 5px;
}

.mchat-user:hover {
	background: color-mix(in srgb, var(--mchat-accent) 7%, transparent);
}

.mchat-conversation {
	border-radius: 9px;
	padding: 9px 8px;
}

.mchat-conversation:hover {
	background: color-mix(in srgb, var(--mchat-accent) 7%, transparent);
}

.mchat-conversation.is-active {
	background: color-mix(in srgb, var(--mchat-accent) 12%, transparent);
	box-shadow: inset 3px 0 var(--mchat-accent);
}

.mchat-empty {
	color: var(--mchat-muted);
}

@media (min-width: 901px) {
	.mchat-app:not(.mchat-no-users) .mchat-users {
		opacity: 1;
		transform: translateX(0);
	}
}


/* vNext configurable appearance system */
.mchat-app {
	border-radius: var(--mchat-frame-radius, 16px);
	font-size: var(--mchat-message-font-size, 15px);
	line-height: var(--mchat-message-line-height, 1.45);
}

.mchat-app :where(button) {
	border-radius: var(--mchat-button-radius, 9px);
}

.mchat-app :where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], textarea, select),
.mchat-inbox-search,
.mchat-app .mchat-search input,
.mchat-compose textarea {
	border-radius: var(--mchat-input-radius, 8px);
	background: var(--mchat-input-bg, var(--mchat-surface));
	color: var(--mchat-input-text, var(--mchat-text));
}

.mchat-header {
	min-height: var(--mchat-header-height, 58px);
}

.mchat-app .mchat-title {
	font-size: var(--mchat-title-font-size, 17px);
}

.mchat-app .mchat-description,
.mchat-conversation-copy small,
.mchat-message-meta time,
.mchat-message-meta small,
.mchat-role {
	font-size: var(--mchat-secondary-font-size, 11px);
}

.mchat-messages {
	padding: var(--mchat-message-area-padding, 16px);
}

.mchat-app .mchat-message {
	grid-template-columns: var(--mchat-avatar-size, 32px) minmax(0, 1fr);
	gap: max(7px, calc(var(--mchat-avatar-size, 32px) * .28));
	margin-bottom: var(--mchat-message-gap, 9px);
}

.mchat-avatar {
	width: var(--mchat-avatar-size, 32px);
	height: var(--mchat-avatar-size, 32px);
	border-radius: var(--mchat-avatar-radius, 50%);
}

.mchat-user-avatar,
.mchat-conversation-avatar {
	border-radius: var(--mchat-avatar-radius, 50%);
}

.mchat-layout-modern .mchat-message-bubble {
	border-radius: var(--mchat-bubble-radius, 14px);
	padding: var(--mchat-bubble-padding-y, 8px) var(--mchat-bubble-padding-x, 11px);
}

.mchat-align-current-right .mchat-message.is-mine {
	grid-template-columns: minmax(0, 1fr) var(--mchat-avatar-size, 32px);
}

.mchat-conversation-row,
.mchat-user,
.mchat-conversation-info,
.mchat-notification-dialog,
.mchat-member-menu-panel {
	border-radius: var(--mchat-panel-radius, 12px);
}

.mchat-app .mchat-conversation.is-active,
.mchat-conversation-row.is-active {
	background: var(--mchat-active-row-bg, var(--mchat-surface));
	color: var(--mchat-active-row-text, var(--mchat-accent));
}

.mchat-app .mchat-conversation.is-active .mchat-conversation-heading strong {
	color: var(--mchat-active-row-text, var(--mchat-accent));
}

.mchat-app .mchat-send,
.mchat-app .mchat-radio button,
.mchat-unread,
.mchat-inbox-tabs strong {
	color: var(--mchat-on-accent, #fff);
}

.mchat-floating {
	bottom: var(--mchat-floating-bottom-distance, 14px);
}

.mchat-floating.is-open {
	z-index: 2147482000;
}

@media (max-width: 900px) {
	.mchat-app .mchat-sidebar,
	.mchat-app .mchat-users,
	.mchat-app .mchat-conversation-info {
		width: var(--mchat-mobile-drawer-width, 88%);
		max-width: var(--mchat-mobile-drawer-width, 88%);
	}
}


.mchat-empty-state {
	display: grid;
	max-width: 360px;
	margin: auto;
	padding: 40px 24px;
	place-items: center;
	color: var(--mchat-muted);
	text-align: center;
}

.mchat-empty-state-icon {
	display: grid;
	width: 70px;
	height: 70px;
	margin-bottom: 16px;
	place-items: center;
	border: 1px solid var(--mchat-border);
	border-radius: 18px;
	background: color-mix(in srgb, var(--mchat-accent) 7%, var(--mchat-surface));
	color: var(--mchat-accent);
}

.mchat-empty-state-icon .mchat-control-icon {
	width: 34px;
	height: 34px;
}

.mchat-empty-state strong {
	margin-bottom: 6px;
	color: var(--mchat-text);
	font-size: 20px;
}

.mchat-empty-state span {
	font-size: 13px;
	line-height: 1.45;
}

.mchat-sidebar,
.mchat-users,
.mchat-conversation-info {
	transition:
		opacity .16s ease,
		transform .18s ease,
		padding .18s ease,
		border-color .18s ease,
		box-shadow .18s ease;
}


.mchat-conversation-copy small.is-draft {
	color: var(--mchat-accent);
	font-style: italic;
}


.mchat-message-content {
	position: relative;
}

.mchat-layout-standard .mchat-message-bubble {
	width: fit-content;
	max-width: 100%;
}

.mchat-message-menu {
	position: absolute;
	z-index: 16;
	top: 0;
	right: -38px;
}

.mchat-message-menu > summary {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 0;
	border-radius: var(--mchat-button-radius, 9px);
	background: transparent;
	color: var(--mchat-muted);
	cursor: pointer;
	list-style: none;
	opacity: 0;
	transition: opacity .14s ease, background .14s ease, color .14s ease;
}

.mchat-message-menu > summary::-webkit-details-marker {
	display: none;
}

.mchat-message:hover .mchat-message-menu > summary,
.mchat-message-menu[open] > summary,
.mchat-message-menu > summary:focus-visible {
	opacity: 1;
}

.mchat-message-menu > summary:hover {
	background: var(--mchat-control-surface);
	color: var(--mchat-text);
}

.mchat-message-menu > summary .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-message-menu .mchat-message-actions {
	display: grid;
	position: absolute;
	top: 34px;
	right: 0;
	width: max-content;
	min-width: 170px;
	gap: 3px;
	border: 1px solid var(--mchat-border);
	border-radius: var(--mchat-panel-radius, 12px);
	background: var(--mchat-surface);
	padding: 7px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
	animation: mchat-menu-in .14s ease-out;
}



.mchat-message-menu.mchat-menu-opens-up .mchat-message-actions {
	top: auto;
	bottom: 34px;
}

.mchat-member-menu.mchat-menu-opens-up .mchat-member-menu-panel {
	top: auto;
	bottom: calc(100% + 7px);
	transform-origin: bottom right;
}
.mchat-app .mchat-message-menu .mchat-message-actions button {
	display: flex;
	width: 100%;
	min-height: 32px;
	align-items: center;
	justify-content: flex-start;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 7px 9px;
	color: var(--mchat-text);
	text-align: left;
	text-indent: 0;
}

.mchat-app .mchat-message-menu .mchat-message-actions button:hover {
	background: var(--mchat-control-surface);
	color: var(--mchat-accent);
}

@media (max-width: 900px) {
	.mchat-message-menu > summary {
		opacity: 1;
	}
	.mchat-message-menu {
		right: -32px;
	}
}


/* vNext outlined message style */
.mchat-layout-outlined .mchat-message-content {
	width: fit-content;
	max-width: min(760px, var(--mchat-bubble-max-width));
}

.mchat-layout-outlined .mchat-message-bubble {
	border: 1px solid var(--mchat-border);
	border-radius: var(--mchat-bubble-radius, 14px);
	background: transparent;
	padding: var(--mchat-bubble-padding-y, 8px) var(--mchat-bubble-padding-x, 11px);
	color: var(--mchat-other-message-text);
}

.mchat-layout-outlined .mchat-message.is-mine .mchat-message-bubble {
	border-color: color-mix(in srgb, var(--mchat-accent) 45%, var(--mchat-border));
	color: var(--mchat-own-message-text);
}

.mchat-layout-outlined.mchat-align-current-left .mchat-message.is-mine .mchat-message-content {
	justify-self: start;
}

.mchat-layout-outlined.mchat-align-current-right .mchat-message.is-mine .mchat-message-content {
	justify-self: end;
}

/* Optional bubble tails */
.mchat-bubble-tail .mchat-layout-modern .mchat-message-bubble,
.mchat-bubble-tail.mchat-layout-modern .mchat-message-bubble,
.mchat-bubble-tail .mchat-layout-outlined .mchat-message-bubble,
.mchat-bubble-tail.mchat-layout-outlined .mchat-message-bubble {
	position: relative;
}

.mchat-bubble-tail.mchat-layout-modern .mchat-message:not(.is-mine) .mchat-message-bubble::before,
.mchat-bubble-tail.mchat-layout-outlined .mchat-message:not(.is-mine) .mchat-message-bubble::before {
	content: "";
	position: absolute;
	top: 12px;
	left: -6px;
	width: 11px;
	height: 11px;
	transform: rotate(45deg);
	border-bottom-left-radius: 2px;
	background: var(--mchat-other-message-bg);
}

.mchat-bubble-tail.mchat-layout-outlined .mchat-message:not(.is-mine) .mchat-message-bubble::before {
	left: -7px;
	border-left: 1px solid var(--mchat-border);
	border-bottom: 1px solid var(--mchat-border);
	background: var(--mchat-surface);
}

.mchat-bubble-tail.mchat-layout-modern.mchat-align-current-right .mchat-message.is-mine .mchat-message-bubble::before,
.mchat-bubble-tail.mchat-layout-outlined.mchat-align-current-right .mchat-message.is-mine .mchat-message-bubble::before {
	content: "";
	position: absolute;
	top: 12px;
	right: -6px;
	width: 11px;
	height: 11px;
	transform: rotate(45deg);
	border-top-right-radius: 2px;
	background: var(--mchat-own-message-bg);
}

.mchat-bubble-tail.mchat-layout-outlined.mchat-align-current-right .mchat-message.is-mine .mchat-message-bubble::before {
	right: -7px;
	border-top: 1px solid color-mix(in srgb, var(--mchat-accent) 45%, var(--mchat-border));
	border-right: 1px solid color-mix(in srgb, var(--mchat-accent) 45%, var(--mchat-border));
	background: var(--mchat-surface);
}

.mchat-bubble-tail.mchat-layout-modern.mchat-align-current-left .mchat-message.is-mine .mchat-message-bubble::before,
.mchat-bubble-tail.mchat-layout-outlined.mchat-align-current-left .mchat-message.is-mine .mchat-message-bubble::before {
	content: "";
	position: absolute;
	top: 12px;
	left: -6px;
	width: 11px;
	height: 11px;
	transform: rotate(45deg);
	background: var(--mchat-own-message-bg);
}

.mchat-bubble-tail.mchat-layout-outlined.mchat-align-current-left .mchat-message.is-mine .mchat-message-bubble::before {
	left: -7px;
	border-left: 1px solid color-mix(in srgb, var(--mchat-accent) 45%, var(--mchat-border));
	border-bottom: 1px solid color-mix(in srgb, var(--mchat-accent) 45%, var(--mchat-border));
	background: var(--mchat-surface);
}


.mchat-sidebar-toolbar {
	grid-template-columns: minmax(0, 1fr) 38px 38px;
}

.mchat-app .mchat-unread-filter {
	display: inline-grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	place-items: center;
	border-color: var(--mchat-border);
	background: var(--mchat-surface);
	padding: 8px;
	color: var(--mchat-muted);
}

.mchat-unread-filter .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-app .mchat-unread-filter:hover,
.mchat-app .mchat-unread-filter.is-active {
	border-color: var(--mchat-accent);
	background: color-mix(in srgb, var(--mchat-accent) 9%, var(--mchat-surface));
	color: var(--mchat-accent);
}


.mchat-app .mchat-voice {
	display: inline-grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	place-items: center;
	border-color: transparent;
	background: transparent;
	padding: 7px;
	color: var(--mchat-muted);
}

.mchat-app .mchat-voice:hover {
	color: var(--mchat-accent);
}

.mchat-app .mchat-voice.is-recording {
	background: color-mix(in srgb, #dc2626 12%, var(--mchat-reply-bg));
	color: #dc2626;
	animation: mchat-recording-pulse 1.1s ease-in-out infinite;
}

.mchat-voice .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@keyframes mchat-recording-pulse {
	50% { opacity: .55; }
}

.mchat-media-audio,
.mchat-pending-audio {
	display: block;
	width: min(360px, 100%);
	max-width: 100%;
	margin-top: 7px;
}

.mchat-media-video {
	display: block;
	width: min(520px, 100%);
	max-height: 420px;
	margin-top: 7px;
	border-radius: calc(var(--mchat-bubble-radius, 14px) * .7);
	background: #000;
}

.mchat-media-preview .mchat-pending-audio {
	min-width: 220px;
	margin: 0;
}


.mchat-app .mchat-video-record {
	display: inline-grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	place-items: center;
	border-color: transparent;
	background: transparent;
	padding: 7px;
	color: var(--mchat-muted);
}

.mchat-app .mchat-video-record:hover {
	color: var(--mchat-accent);
}

.mchat-app .mchat-video-record.is-recording {
	background: color-mix(in srgb, #dc2626 12%, var(--mchat-reply-bg));
	color: #dc2626;
	animation: mchat-recording-pulse 1.1s ease-in-out infinite;
}

.mchat-video-record .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-pending-video {
	display: block;
	width: min(280px, 100%);
	max-height: 220px;
	border-radius: 10px;
	background: #000;
	object-fit: cover;
}

.mchat-media-video.is-square {
	width: min(360px, 100%);
	aspect-ratio: 1;
	object-fit: cover;
}

.mchat-media-video.is-circle {
	width: min(320px, 100%);
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.mchat-media-video.is-rounded {
	border-radius: calc(var(--mchat-bubble-radius, 14px) * .7);
}


.mchat-app .mchat-location-share {
	display: inline-grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	place-items: center;
	border-color: transparent;
	background: transparent;
	padding: 7px;
	color: var(--mchat-muted);
}

.mchat-app .mchat-location-share:hover {
	color: var(--mchat-accent);
}

.mchat-location-share .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-pending-location {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--mchat-text);
}

.mchat-pending-location .mchat-control-icon {
	width: 18px;
	height: 18px;
	color: var(--mchat-accent);
}

.mchat-location-card {
	display: grid;
	gap: 7px;
	margin-top: 8px;
	overflow: hidden;
	border: 1px solid var(--mchat-border);
	border-radius: calc(var(--mchat-bubble-radius, 14px) * .7);
	background: var(--mchat-surface);
}

.mchat-location-map {
	display: block;
	width: min(420px, 100%);
	height: 190px;
	border: 0;
	background: var(--mchat-sidebar);
}

.mchat-location-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 11px;
	color: var(--mchat-accent);
	font-weight: 600;
	text-decoration: none;
}

.mchat-location-link:hover {
	text-decoration: underline;
}

.mchat-location-link .mchat-control-icon {
	width: 17px;
	height: 17px;
}


/* vNext conversation list and toolbar refinements */
.mchat-sidebar-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mchat-sidebar-toolbar .mchat-inbox-search {
	min-width: 0;
	height: 38px;
	flex: 1 1 auto;
	margin: 0;
}

.mchat-app .mchat-unread-filter,
.mchat-app .mchat-sidebar-toggle {
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	flex: 0 0 38px;
	padding: 8px;
	border-color: var(--mchat-border);
	background: var(--mchat-surface);
	color: var(--mchat-muted);
}

.mchat-app .mchat-unread-filter:hover,
.mchat-app .mchat-unread-filter[aria-pressed="true"] {
	border-color: var(--mchat-accent);
	color: var(--mchat-accent);
}

.mchat-unread-filter .mchat-control-label,
.mchat-sidebar-toggle .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-hide-inbox-search .mchat-inbox-search,
.mchat-hide-unread-filter .mchat-unread-filter {
	display: none;
}

.mchat-app .mchat-conversation {
	min-height: var(--mchat-conversation-row-height, 70px);
	padding: 8px 10px;
}

.mchat-conversation-avatar {
	width: var(--mchat-conversation-avatar-size, 46px);
	height: var(--mchat-conversation-avatar-size, 46px);
	flex-basis: var(--mchat-conversation-avatar-size, 46px);
}

.mchat-conversation-avatar.is-stack img {
	width: calc(var(--mchat-conversation-avatar-size, 46px) * .63);
	height: calc(var(--mchat-conversation-avatar-size, 46px) * .63);
}

.mchat-hide-conversation-previews .mchat-conversation-copy small {
	display: none;
}

.mchat-hide-conversation-timestamps .mchat-conversation-heading time {
	display: none;
}

.mchat-app .mchat-conversation.is-active {
	background: var(--mchat-active-row-bg, var(--mchat-surface));
	color: var(--mchat-active-row-text, var(--mchat-accent));
	box-shadow: inset 3px 0 var(--mchat-accent);
}

.mchat-app .mchat-conversation.is-active .mchat-conversation-heading strong {
	color: var(--mchat-active-row-text, var(--mchat-accent));
}

.mchat-conversation-copy small {
	opacity: .82;
}

.mchat-sidebar,
.mchat-users,
.mchat-conversation-info {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--mchat-muted) 40%, transparent) transparent;
}

.mchat-header-actions > button {
	background: color-mix(in srgb, var(--mchat-sidebar) 58%, var(--mchat-surface));
}

.mchat-header-actions > button:hover,
.mchat-header-actions > button:focus-visible {
	background: color-mix(in srgb, var(--mchat-accent) 9%, var(--mchat-surface));
}

.mchat-messages {
	scroll-behavior: smooth;
}

.mchat-compose textarea::placeholder,
.mchat-inbox-search::placeholder {
	color: var(--mchat-muted);
	opacity: .78;
}


/* vNext right panel, member menus and composer polish */
.mchat-conversation-info {
	width: min(390px, 100%);
	padding: 18px 16px;
	background: color-mix(in srgb, var(--mchat-sidebar) 72%, var(--mchat-surface));
}

.mchat-info-summary {
	margin: 0 -16px 16px;
	border-bottom: 1px solid var(--mchat-border);
	background: var(--mchat-surface);
	padding: 14px 18px 20px;
}

.mchat-info-summary .mchat-conversation-avatar {
	width: 82px;
	height: 82px;
	margin-bottom: 5px;
}

.mchat-info-notifications,
.mchat-info-add,
.mchat-info-ai-summary,
.mchat-info-moderation {
	border: 1px solid var(--mchat-border);
	border-radius: var(--mchat-panel-radius, 12px);
	background: var(--mchat-surface);
	padding: 12px;
}

.mchat-info-notifications,
.mchat-info-add,
.mchat-info-ai-summary,
.mchat-info-moderation {
	margin-bottom: 12px;
}

.mchat-info-members {
	gap: 4px;
}

.mchat-info-member {
	background: transparent;
	padding: 8px 6px;
	transition: background .14s ease;
}

.mchat-info-member:hover {
	background: color-mix(in srgb, var(--mchat-accent) 7%, transparent);
}

.mchat-member-menu-panel {
	min-width: 230px;
	padding: 7px;
}

.mchat-app .mchat-member-menu-panel button,
.mchat-app .mchat-member-menu-panel a {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	padding: 8px 10px;
	text-align: left;
}

.mchat-app .mchat-member-menu-panel button:hover,
.mchat-app .mchat-member-menu-panel a:hover {
	background: color-mix(in srgb, var(--mchat-accent) 8%, var(--mchat-surface));
	color: var(--mchat-accent);
}

.mchat-app .mchat-compose {
	gap: 6px;
	padding: 9px 10px;
}

.mchat-app .mchat-compose textarea {
	min-height: 42px;
	height: 42px;
	border-radius: var(--mchat-input-radius, 10px);
	padding: 10px 12px;
}

.mchat-app .mchat-compose .mchat-upload,
.mchat-app .mchat-compose .mchat-gif,
.mchat-app .mchat-compose .mchat-emoji,
.mchat-app .mchat-compose .mchat-voice,
.mchat-app .mchat-compose .mchat-video-record,
.mchat-app .mchat-compose .mchat-location-share {
	width: 38px;
	min-width: 38px;
	height: 42px;
	min-height: 42px;
	flex: 0 0 38px;
	border-color: transparent;
	border-radius: 9px;
	background: transparent;
	color: var(--mchat-muted);
}

.mchat-app .mchat-compose .mchat-upload:hover,
.mchat-app .mchat-compose .mchat-gif:hover,
.mchat-app .mchat-compose .mchat-emoji:hover,
.mchat-app .mchat-compose .mchat-voice:hover,
.mchat-app .mchat-compose .mchat-video-record:hover,
.mchat-app .mchat-compose .mchat-location-share:hover {
	background: color-mix(in srgb, var(--mchat-accent) 8%, var(--mchat-surface));
	color: var(--mchat-accent);
}

.mchat-app .mchat-send {
	min-width: 68px;
	height: 42px;
	border-radius: 9px;
	padding-inline: 14px;
}

.mchat-message-bubble {
	position: relative;
	transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.mchat-layout-modern .mchat-message-bubble {
	box-shadow: 0 1px 1px color-mix(in srgb, var(--mchat-text) 5%, transparent);
}

.mchat-layout-outlined .mchat-message-bubble {
	border: 1px solid var(--mchat-border);
	border-radius: var(--mchat-bubble-radius, 14px);
	background: transparent;
	padding: var(--mchat-bubble-padding-y, 8px) var(--mchat-bubble-padding-x, 11px);
}

.mchat-message-menu-panel,
.mchat-message-actions {
	backdrop-filter: blur(8px);
}


/* granular appearance color variables */
.mchat-sidebar,
.mchat-inbox-tabs,
.mchat-sidebar-toolbar {
	border-color: var(--mchat-sidebar-border, var(--mchat-border));
}
.mchat-conversation-heading strong,
.mchat-app .mchat-product,
.mchat-app .mchat-sidebar h3 {
	color: var(--mchat-sidebar-text, var(--mchat-text));
}
.mchat-conversation-copy small,
.mchat-conversation-heading time {
	color: var(--mchat-sidebar-preview, var(--mchat-muted));
}
.mchat-app .mchat-description {
	color: var(--mchat-header-secondary, var(--mchat-muted));
}
.mchat-app .mchat-compose textarea,
.mchat-app .mchat-search input,
.mchat-app .mchat-inbox-search,
.mchat-app .mchat-info-search input {
	border-color: var(--mchat-input-border, var(--mchat-border));
	background: var(--mchat-input-bg, var(--mchat-surface));
	color: var(--mchat-input-text, var(--mchat-text));
}
.mchat-message:not(.is-mine) .mchat-message-meta strong {
	color: var(--mchat-other-name, var(--mchat-muted));
}
.mchat-message.is-mine .mchat-message-meta strong {
	color: var(--mchat-own-name, var(--mchat-muted));
}
.mchat-app [role="tooltip"],
.mchat-app .mchat-tooltip {
	background: var(--mchat-tooltip-bg, #111827);
	color: var(--mchat-tooltip-text, #fff);
}


.mchat-hide-header-description .mchat-description,
.mchat-hide-typing-indicator .mchat-typing {
	display: none !important;
}


/* configurable date separators */
.mchat-date-label {
	display: table;
	margin: 12px auto;
	border-radius: 999px;
	background: var(--mchat-date-label-bg, var(--mchat-sidebar));
	padding: 4px 10px;
	color: var(--mchat-date-label-text, var(--mchat-muted));
	font-size: var(--mchat-secondary-font-size, 11px);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}


/* vNext frontend regression fixes: floating drawers, control centering and info panel */
.mchat-floating .mchat-floating-tools button {
	display: grid;
	place-items: center;
	padding: 0;
	line-height: 0;
}

.mchat-floating .mchat-floating-profile .mchat-control-avatar {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
	align-self: center;
	justify-self: center;
}

.mchat-floating .mchat-floating-close,
.mchat-app .mchat-info-close {
	position: relative;
	font-size: 0;
	line-height: 0;
}

.mchat-floating .mchat-floating-close::before,
.mchat-floating .mchat-floating-close::after,
.mchat-app .mchat-info-close::before,
.mchat-app .mchat-info-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transform-origin: center;
}

.mchat-floating .mchat-floating-close::before,
.mchat-app .mchat-info-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.mchat-floating .mchat-floating-close::after,
.mchat-app .mchat-info-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.mchat-conversation-info {
	background: var(--mchat-surface);
	padding: 24px 18px;
}

.mchat-info-summary {
	margin: 0;
	border-bottom: 0;
	background: transparent;
	padding: 8px 0 20px;
}

.mchat-info-summary .mchat-conversation-avatar {
	width: 72px;
	height: 72px;
	margin-bottom: 0;
}

.mchat-floating-app:not(.is-mobile-users) > .mchat-users {
	display: none !important;
}

.mchat-floating-app.is-mobile-users > .mchat-users {
	display: block !important;
	position: absolute;
	z-index: 190;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(320px, 88%);
	max-width: min(320px, 88%);
	height: auto;
	overflow-y: auto;
	transform: none;
	box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
}

@media (max-width: 900px) {
	/* Floating inbox occupies the full popup width. The generic mobile drawer width must not shrink it to 88%. */
	.mchat-floating-app:not(.is-thread-view) > .mchat-sidebar {
		width: 100%;
		max-width: 100%;
	}

	.mchat-app > .mchat-users {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
	}

	.mchat-floating-app.is-mobile-users > .mchat-users {
		width: min(320px, 88%);
		max-width: min(320px, 88%);
		padding-top: 72px;
	}
}

@media (min-width: 901px) {
	.mchat-theme-compact.mchat-no-users {
		grid-template-columns: 320px minmax(0, 1fr);
	}

	.mchat-theme-slim.mchat-no-users {
		grid-template-columns: 280px minmax(0, 1fr);
	}

	.mchat-theme-compact.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.mchat-theme-slim.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) 280px;
	}

	.mchat-theme-compact.mchat-left-collapsed.mchat-no-users,
	.mchat-theme-slim.mchat-left-collapsed.mchat-no-users,
	.mchat-left-collapsed.mchat-no-users {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* vNext unified full-width command toolbar */
.mchat-app {
	grid-template-rows: auto minmax(0, 1fr);
}

.mchat-global-toolbar {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 58px;
	border-bottom: 1px solid var(--mchat-border);
	background: var(--mchat-header-bg);
	padding: 8px 12px;
	color: var(--mchat-header-text);
}

.mchat-global-toolbar-left {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	align-items: center;
	gap: 8px;
}

.mchat-global-toolbar-left .mchat-inbox-search {
	width: min(420px, 100%);
	min-width: 120px;
	height: 38px;
	flex: 1 1 260px;
	margin: 0;
}

.mchat-global-toolbar .mchat-header-actions {
	display: flex;
	min-width: 0;
	flex: 0 1 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
}

.mchat-global-toolbar .mchat-header-actions > button {
	display: inline-flex;
	width: auto;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 11px;
	white-space: nowrap;
}

.mchat-global-toolbar .mchat-header-actions .mchat-unread-filter {
	display: inline-flex;
	width: auto;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 11px;
	border: 1px solid var(--mchat-border);
	background: var(--mchat-surface);
	color: var(--mchat-text);
}

.mchat-global-toolbar .mchat-header-actions .mchat-unread-filter .mchat-control-label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: nowrap;
}

.mchat-global-toolbar .mchat-new-conversation {
	display: inline-grid;
	flex: 0 0 38px;
}

.mchat-global-toolbar .mchat-mobile-rooms {
	flex: 0 0 38px;
}

.mchat-sidebar,
.mchat-main,
.mchat-users {
	grid-row: 2;
}

/* The workspace row must always consume the remaining app height.
   Message rendering is asynchronous, so the child panels cannot size the
   grid row from their content after a conversation finishes loading. */
.mchat-app {
	align-content: stretch;
	align-items: stretch;
}

.mchat-app > .mchat-sidebar,
.mchat-app > .mchat-main,
.mchat-app > .mchat-users {
	min-height: 0;
	height: 100%;
	align-self: stretch;
}

.mchat-app > .mchat-main {
	overflow: hidden;
}

.mchat-app > .mchat-main > .mchat-messages {
	min-height: 0;
	flex: 1 1 0;
	overflow-y: auto;
}

.mchat-sidebar {
	padding-top: 0;
}

.mchat-sidebar > .mchat-sidebar-toolbar {
	display: none !important;
}

.mchat-header {
	min-height: 54px;
}

.mchat-floating-tools {
	display: none !important;
}

.mchat-floating-app .mchat-sidebar {
	padding-top: 0;
}

.mchat-floating-app .mchat-global-toolbar {
	min-height: 54px;
	padding: 6px 8px;
}

.mchat-floating-app .mchat-global-toolbar-left .mchat-inbox-search {
	height: 36px;
}

.mchat-floating-app .mchat-global-toolbar .mchat-header-actions > button,
.mchat-floating-app .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter {
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 7px;
	border-radius: 50%;
}

.mchat-floating-app .mchat-global-toolbar .mchat-header-actions .mchat-control-label,
.mchat-floating-app .mchat-global-toolbar .mchat-header-actions .mchat-users-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-floating-app .mchat-global-toolbar .mchat-header-actions .mchat-profile {
	width: 36px;
	min-width: 36px;
	padding: 5px;
}

.mchat-floating-app .mchat-global-toolbar .mchat-header-actions .mchat-users-toggle {
	width: auto;
	min-width: 44px;
	padding-inline: 7px;
}

.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions .mchat-control-label,
.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions .mchat-users-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions > button,
.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter {
	width: 38px;
	min-width: 38px;
	padding: 7px;
}

.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions .mchat-profile {
	width: 38px;
	min-width: 38px;
	padding: 6px;
}

.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions .mchat-users-toggle {
	width: auto;
	min-width: 48px;
	padding-inline: 8px;
}

@media (max-width: 900px) {
	.mchat-global-toolbar {
		min-height: 54px;
		gap: 6px;
		padding: 6px;
	}

	.mchat-global-toolbar-left {
		gap: 5px;
	}

	.mchat-global-toolbar-left .mchat-inbox-search {
		min-width: 0;
		height: 36px;
	}

	.mchat-app > .mchat-sidebar,
	.mchat-app > .mchat-users {
		top: 54px;
	}

	.mchat-floating-app > .mchat-sidebar {
		top: auto;
	}

	.mchat-floating-app.is-thread-view > .mchat-main {
		grid-row: 2;
	}

	.mchat-floating-app .mchat-sidebar-toggle,
	.mchat-floating-app .mchat-sidebar-open {
		display: none !important;
	}
}

.mchat-floating-app:not(.is-thread-view) .mchat-global-toolbar-left .mchat-inbox-search[hidden] {
	display: none !important;
}


/* vNext toolbar corrective pass */
.mchat-global-toolbar-left {
	flex: 0 1 auto;
}

.mchat-global-toolbar-left .mchat-inbox-search {
	width: clamp(220px, 25vw, 340px);
	max-width: 340px;
	min-width: 180px;
	flex: 0 1 340px;
}

.mchat-global-toolbar .mchat-header-actions > button,
.mchat-global-toolbar .mchat-header-actions .mchat-unread-filter {
	flex: 0 0 auto;
}

.mchat-global-toolbar .mchat-header-actions .mchat-unread-filter {
	width: auto;
	min-width: max-content;
}

.mchat-global-toolbar .mchat-header-actions .mchat-unread-filter .mchat-control-label {
	display: inline;
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter {
	width: 38px;
	min-width: 38px;
}

.mchat-app.mchat-toolbar-compact .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mchat-app.mchat-left-collapsed .mchat-global-toolbar .mchat-sidebar-toggle {
	display: none !important;
}

.mchat-app:not(.mchat-left-collapsed) .mchat-global-toolbar .mchat-sidebar-open {
	display: none !important;
}

.mchat-app.mchat-left-collapsed .mchat-global-toolbar .mchat-sidebar-open {
	display: inline-grid !important;
}

.mchat-floating-tools + .mchat-floating-app .mchat-global-toolbar .mchat-header-actions {
	display: flex !important;
}

.mchat-floating-app .mchat-global-toolbar-left {
	flex: 0 1 auto;
}

.mchat-floating-app .mchat-global-toolbar-left .mchat-inbox-search {
	width: clamp(180px, 34vw, 300px);
	max-width: 300px;
	min-width: 150px;
	flex: 0 1 300px;
}

.mchat-floating-app .mchat-mobile-rooms[hidden] {
	display: none !important;
}

.mchat-floating-app .mchat-new-conversation[hidden] {
	display: none !important;
}

@media (max-width: 900px) {
	.mchat-global-toolbar {
		flex-wrap: nowrap;
	}

	.mchat-global-toolbar-left {
		flex: 0 1 auto;
	}

	.mchat-global-toolbar-left .mchat-inbox-search {
		width: min(42vw, 240px);
		max-width: 240px;
		min-width: 120px;
		flex: 0 1 240px;
	}

	.mchat-global-toolbar-left .mchat-inbox-search[hidden] {
		display: none !important;
	}

	.mchat-toolbar-compact .mchat-global-toolbar-left .mchat-control-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mchat-global-toolbar .mchat-header-actions {
		margin-left: auto;
	}

	.mchat-global-toolbar .mchat-header-actions > button,
	.mchat-global-toolbar .mchat-header-actions .mchat-unread-filter {
		width: 36px;
		min-width: 36px;
		height: 36px;
		min-height: 36px;
		padding: 7px;
	}

	.mchat-global-toolbar .mchat-header-actions .mchat-profile {
		width: 36px;
		min-width: 36px;
		padding: 5px;
	}

	.mchat-global-toolbar .mchat-header-actions .mchat-users-toggle {
		width: auto;
		min-width: 44px;
		padding-inline: 7px;
	}

	.mchat-floating-app .mchat-global-toolbar-left .mchat-inbox-search {
		width: min(38vw, 220px);
		max-width: 220px;
		min-width: 110px;
	}
}

@media (max-width: 620px) {
	.mchat-global-toolbar {
		gap: 4px;
		padding-inline: 5px;
	}

	.mchat-global-toolbar-left {
		gap: 4px;
	}

	.mchat-global-toolbar .mchat-header-actions {
		gap: 3px;
	}

	.mchat-global-toolbar .mchat-header-actions > button,
	.mchat-global-toolbar .mchat-header-actions .mchat-unread-filter,
	.mchat-global-toolbar .mchat-new-conversation,
	.mchat-global-toolbar .mchat-mobile-rooms {
		width: 34px;
		min-width: 34px;
		height: 34px;
		min-height: 34px;
		padding: 6px;
	}

	.mchat-global-toolbar .mchat-header-actions .mchat-users-toggle {
		width: 42px;
		min-width: 42px;
	}

	.mchat-global-toolbar-left .mchat-inbox-search,
	.mchat-floating-app .mchat-global-toolbar-left .mchat-inbox-search {
		width: min(36vw, 180px);
		max-width: 180px;
		min-width: 100px;
	}
}


/* When inbox search is open, keep Search beside New Conversation and the input immediately after it. */
.mchat-app.mchat-inbox-search-open .mchat-global-toolbar-left .mchat-search-toggle {
	display: inline-grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	flex: 0 0 38px;
	place-items: center;
	border-color: var(--mchat-border);
	background: var(--mchat-surface);
	padding: 8px;
	color: var(--mchat-text);
}
.mchat-app.mchat-inbox-search-open .mchat-global-toolbar-left .mchat-search-toggle:hover,
.mchat-app.mchat-inbox-search-open .mchat-global-toolbar-left .mchat-search-toggle:focus-visible {
	border-color: var(--mchat-accent);
	color: var(--mchat-accent);
}
.mchat-app.mchat-inbox-search-open .mchat-global-toolbar-left .mchat-search-toggle .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Keep the unread-only filter visibly active across toolbar, compact, and floating layouts. */
.mchat-app .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter[aria-pressed="true"],
.mchat-app .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter.is-active {
	border-color: var(--mchat-accent);
	background: var(--mchat-accent);
	color: var(--mchat-on-accent);
}

.mchat-app .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter[aria-pressed="true"]:hover,
.mchat-app .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter.is-active:hover {
	border-color: var(--mchat-accent);
	background: var(--mchat-accent);
	color: var(--mchat-on-accent);
}

/* Floating bubble controls remain icon-only, including Show unread. */
.mchat-floating-app .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter .mchat-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}




/* Mobile floating toolbar: let the active search field use all space between the left control and the close button. */
@media (max-width: 900px) {
	.mchat-floating-app.mchat-inbox-search-open .mchat-global-toolbar-left,
	.mchat-floating-app.mchat-new-conversation-mode .mchat-global-toolbar-left {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mchat-floating-app.mchat-inbox-search-open .mchat-global-toolbar-left .mchat-inbox-search,
	.mchat-floating-app.mchat-new-conversation-mode .mchat-global-toolbar-left .mchat-inbox-search {
		width: auto;
		max-width: none;
		min-width: 0;
		flex: 1 1 auto;
		margin-left: 3px;
	}

	.mchat-floating-app.mchat-inbox-search-open .mchat-global-toolbar-left .mchat-search-toggle,
	.mchat-floating-app.mchat-new-conversation-mode .mchat-global-toolbar-left .mchat-new-conversation {
		margin-right: 3px;
	}
}

/* Mobile search and new-conversation modes keep the input usable without hiding the floating close control. */
@media (max-width: 900px) {
	.mchat-app.mchat-new-conversation-mode .mchat-global-toolbar .mchat-header-actions > :not(.mchat-floating-close),
	.mchat-app.mchat-inbox-search-open .mchat-global-toolbar .mchat-header-actions > :not(.mchat-floating-close) {
		display: none !important;
	}

	.mchat-app.mchat-inbox-search-open .mchat-global-toolbar-left .mchat-inbox-search {
		width: min(62vw, 260px);
		max-width: 260px;
		flex: 1 1 260px;
	}
}


/* Online Users gets a real header row aligned with the main conversation header. */
.mchat-app > .mchat-users {
	padding-top: 0;
}

.mchat-app > .mchat-users > h3 {
	display: flex;
	height: var(--mchat-vnext-subheader-height);
	min-height: var(--mchat-vnext-subheader-height);
	align-items: center;
	margin: 0;
	padding: 0 42px 0 0;
	font-size: 15px;
	line-height: 1.2;
}

.mchat-app .mchat-users > .mchat-drawer-close {
	top: calc((var(--mchat-vnext-subheader-height) - 36px) / 2);
	right: 10px;
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	line-height: 1;
}

.mchat-app .mchat-users > .mchat-drawer-close:hover,
.mchat-app .mchat-users > .mchat-drawer-close:focus-visible {
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
}

/* Floating desktop users drawer should begin directly below the global toolbar, not 72px lower. */
@media (min-width: 901px) {
	.mchat-floating-app.is-mobile-users > .mchat-users {
		padding-top: 0;
	}
}

/* Mobile drawers occupy the area immediately under the unified top toolbar. */
@media (max-width: 900px) {
	.mchat-app > .mchat-sidebar,
	.mchat-app > .mchat-users {
		position: absolute;
		z-index: 120;
		top: 54px;
		bottom: 0;
		height: auto;
		max-height: none;
	}

	.mchat-app > .mchat-sidebar {
		display: flex;
		flex-direction: column;
		padding-top: 0;
	}

	.mchat-app.is-mobile-rooms > .mchat-sidebar {
		transform: translateX(0);
	}

	.mchat-app.is-mobile-users > .mchat-users {
		padding-top: 0;
		transform: translateX(0);
	}

	/* Keep inbox category tabs anchored at the bottom of the mobile conversation drawer. */
	.mchat-inbox-tabs {
		order: 10;
		flex: 0 0 auto;
		margin: auto -18px -18px;
		border-top: 1px solid var(--mchat-border);
		border-bottom: 0;
	}

	.mchat-inbox-panels {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* Full mobile chat: only the conversation list scrolls. Keep the drawer
	   and bottom category tabs fixed so overscroll cannot pull the tabs upward
	   and reveal empty drawer space underneath them. */
	.mchat-app:not(.mchat-floating-app) > .mchat-sidebar {
		overflow: hidden;
		overscroll-behavior: none;
	}

	.mchat-app:not(.mchat-floating-app) > .mchat-sidebar .mchat-inbox-panels {
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Force attachment/media controls to the second composer row on mobile. */
	.mchat-app .mchat-compose {
		flex-wrap: wrap;
		align-items: center;
	}

	.mchat-app .mchat-compose textarea {
		order: 1;
		min-width: calc(100% - 84px);
		flex: 1 1 calc(100% - 84px);
	}

	.mchat-app .mchat-send {
		order: 2;
		flex: 0 0 68px;
	}

	.mchat-app .mchat-compose .mchat-upload,
	.mchat-app .mchat-compose .mchat-gif,
	.mchat-app .mchat-compose .mchat-emoji,
	.mchat-app .mchat-compose .mchat-voice,
	.mchat-app .mchat-compose .mchat-video-record,
	.mchat-app .mchat-compose .mchat-location-share {
		order: 3;
	}
}


@media (max-width: 900px) {
	.mchat-app > .mchat-picker { right: 12px; }

	/* In the floating inbox there is no conversation title row until a thread is open. */
	.mchat-floating-app:not(.is-thread-view) .mchat-header {
		display: none !important;
	}
}


/* vNext theme geometry: color presets share structure; size presets only change density. */
.mchat-app {
	--mchat-sidebar-width: 340px;
	--mchat-users-width: var(--mchat-sidebar-width);
	--mchat-section-row-height: 58px;
}

@media (min-width: 621px) {
	.mchat-app {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr) var(--mchat-users-width);
	}

	.mchat-app.mchat-no-users {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr);
	}

	.mchat-app.mchat-no-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--mchat-users-width);
	}

	.mchat-app.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) var(--mchat-users-width);
	}

	.mchat-app.mchat-left-collapsed.mchat-no-users {
		grid-template-columns: minmax(0, 1fr);
	}

	.mchat-theme-compact {
		--mchat-sidebar-width: 320px;
		--mchat-section-row-height: 52px;
	}

	.mchat-theme-simplified {
		--mchat-sidebar-width: 320px;
		--mchat-section-row-height: 54px;
	}

	.mchat-theme-slim {
		--mchat-sidebar-width: 280px;
		--mchat-section-row-height: 44px;
	}

	.mchat-inbox-tabs,
	.mchat-app .mchat-inbox-tabs button,
	.mchat-header,
	.mchat-app > .mchat-users > h3 {
		height: var(--mchat-section-row-height);
		min-height: var(--mchat-section-row-height);
	}

	.mchat-inbox-tabs {
		margin-bottom: 0;
	}

	.mchat-app > .mchat-users > h3 {
		box-sizing: border-box;
		align-items: center;
	}

	.mchat-app .mchat-users > .mchat-drawer-close {
		top: calc((var(--mchat-section-row-height) - 36px) / 2);
	}

	/* Floating desktop uses the same left/right card width as the active theme. */
	.mchat-floating-app {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr);
	}

	.mchat-floating-app.is-mobile-users > .mchat-users {
		width: var(--mchat-users-width);
		max-width: var(--mchat-users-width);
	}
}

@media (min-width: 621px) and (max-width: 900px) {
	/* Tablet/smaller-desktop uses drawer navigation, so no desktop side columns may reserve width.
	   Keep theme color and density variables intact; only collapse the responsive grid geometry. */
	.mchat-app,
	.mchat-app.mchat-no-users,
	.mchat-app.mchat-no-sidebar,
	.mchat-app.mchat-left-collapsed,
	.mchat-app.mchat-left-collapsed.mchat-no-users,
	.mchat-floating-app {
		grid-template-columns: minmax(0, 1fr);
	}

	.mchat-app > .mchat-main {
		grid-column: 1 / -1;
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 900px) {
	/* Mobile already has the hamburger/back control; the panel toggle is redundant. */
	.mchat-global-toolbar .mchat-sidebar-toggle,
	.mchat-global-toolbar .mchat-sidebar-open {
		display: none !important;
	}

	/* No empty conversation-title row in the floating inbox before a thread is opened. */
	.mchat-floating-app:not(.is-thread-view) > .mchat-main {
		display: none !important;
	}
}


/* Floating mobile inbox has no empty conversation-header spacer before a thread is selected. */
@media (max-width: 900px) {
	.mchat-floating-app:not(.is-thread-view) > .mchat-sidebar {
		padding-top: 0 !important;
	}
}


/* Floating collapse and mobile drawer positioning corrections. */
@media (min-width: 901px) {
	/* In the floating messenger the Online Users panel is an overlay, not a reserved grid column.
	   When the left conversation panel closes, the main area must consume the full width. */
	.mchat-floating-app.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.mchat-floating-app.mchat-left-collapsed > .mchat-main {
		grid-column: 1 / -1;
		width: 100%;
	}
}

@media (max-width: 900px) {
	/* These drawers are positioned relative to the whole app. Reset their inherited grid row
	   so the 54px toolbar offset is applied only once instead of creating an empty second row. */
	.mchat-app > .mchat-sidebar,
	.mchat-app > .mchat-users {
		grid-row: 1 / -1;
		top: 54px;
	}

	.mchat-floating-app:not(.is-thread-view) > .mchat-sidebar {
		padding-top: 0 !important;
	}
}


/* Shared mobile detail-drawer shell: Conversation Info and Online Users use identical geometry. */
.mchat-info-drawer-title {
	display: none;
}

@media (max-width: 900px) {
	.mchat-app > .mchat-users,
	.mchat-app > .mchat-conversation-info {
		position: absolute;
		z-index: 120;
		grid-row: 1 / -1;
		top: 54px;
		right: 0;
		bottom: 0;
		left: auto;
		width: var(--mchat-mobile-drawer-width, 88%);
		max-width: var(--mchat-mobile-drawer-width, 88%);
		height: auto;
		overflow-y: auto;
		border-left: 1px solid var(--mchat-border);
		background: var(--mchat-sidebar);
		padding: 0 18px 18px !important;
		box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
		-webkit-overflow-scrolling: touch;
	}

	.mchat-app > .mchat-conversation-info {
		opacity: 0;
		transform: translateX(105%);
		transition: opacity .16s ease, transform .18s ease;
	}

	.mchat-app.is-info-open > .mchat-conversation-info {
		opacity: 1;
		transform: translateX(0);
	}

	.mchat-app > .mchat-users > h3,
	.mchat-app > .mchat-conversation-info > .mchat-info-drawer-title {
		display: flex;
		height: 54px;
		min-height: 54px;
		align-items: center;
		margin: 0 -18px;
		border-bottom: 1px solid var(--mchat-border);
		padding: 0 18px;
		color: var(--mchat-text);
		font-size: 15px;
		line-height: 1.2;
	}

	.mchat-app:not(.mchat-floating-app) > .mchat-users > .mchat-drawer-close,
	.mchat-app:not(.mchat-floating-app) > .mchat-conversation-info > .mchat-info-close {
		display: none !important;
	}

	.mchat-app.is-mobile-users .mchat-users-toggle,
	.mchat-app.is-info-open .mchat-info-toggle {
		border-color: var(--mchat-accent);
		background: color-mix(in srgb, var(--mchat-accent) 9%, var(--mchat-surface));
		color: var(--mchat-accent);
	}

	.mchat-app.mchat-floating-app > .mchat-users,
	.mchat-app.mchat-floating-app > .mchat-conversation-info {
		z-index: 210;
		top: 0;
	}

	.mchat-app.mchat-floating-app > .mchat-users > h3,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-drawer-title {
		padding-right: 52px;
	}

	.mchat-app.mchat-floating-app > .mchat-users > .mchat-drawer-close,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-close {
		display: grid !important;
		position: absolute;
		z-index: 2;
		top: 9px;
		right: 10px;
		width: 36px;
		min-width: 36px;
		height: 36px;
		min-height: 36px;
		place-items: center;
		border: 0 !important;
		border-radius: 0;
		background: transparent !important;
		padding: 0;
		color: var(--mchat-muted);
		font-size: 0;
		line-height: 0;
		box-shadow: none;
	}

	.mchat-app.mchat-floating-app > .mchat-users > .mchat-drawer-close:hover,
	.mchat-app.mchat-floating-app > .mchat-users > .mchat-drawer-close:focus-visible,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-close:hover,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-close:focus-visible {
		color: var(--mchat-accent);
	}

	.mchat-app.mchat-floating-app > .mchat-users > .mchat-drawer-close::before,
	.mchat-app.mchat-floating-app > .mchat-users > .mchat-drawer-close::after,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-close::before,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 17px;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
		transform-origin: center;
	}

	.mchat-app.mchat-floating-app > .mchat-users > .mchat-drawer-close::before,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.mchat-app.mchat-floating-app > .mchat-users > .mchat-drawer-close::after,
	.mchat-app.mchat-floating-app > .mchat-conversation-info > .mchat-info-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.mchat-app > .mchat-conversation-info .mchat-info-member {
		background: var(--mchat-surface);
	}
}


/* Compact preset: tighter density without changing the normal color-theme geometry. */
@media (min-width: 621px) {
	.mchat-theme-compact {
		--mchat-sidebar-width: 300px;
		--mchat-users-width: var(--mchat-sidebar-width);
		--mchat-section-row-height: 48px;
		font-size: 12px;
	}

	.mchat-theme-compact .mchat-inbox-tabs,
	.mchat-theme-compact .mchat-inbox-tabs button,
	.mchat-theme-compact .mchat-header,
	.mchat-theme-compact > .mchat-users > h3 {
		height: var(--mchat-section-row-height);
		min-height: var(--mchat-section-row-height);
	}

	.mchat-theme-compact .mchat-inbox-tabs {
		margin-bottom: 0;
	}

	.mchat-theme-compact .mchat-header {
		padding: 6px 10px;
	}

	.mchat-theme-compact > .mchat-sidebar,
	.mchat-theme-compact > .mchat-users {
		padding: 14px;
	}

	.mchat-theme-compact .mchat-conversation {
		min-height: 58px;
		padding: 7px 6px;
	}

	.mchat-theme-compact .mchat-conversation-avatar {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}

	.mchat-theme-compact .mchat-conversation-copy {
		gap: 1px;
	}

	.mchat-theme-compact .mchat-global-toolbar {
		min-height: 52px;
		padding: 6px 10px;
		gap: 7px;
	}

	.mchat-theme-compact .mchat-global-toolbar-left,
	.mchat-theme-compact .mchat-global-toolbar .mchat-header-actions {
		gap: 4px;
	}

	.mchat-theme-compact .mchat-global-toolbar .mchat-header-actions > button,
	.mchat-theme-compact .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter,
	.mchat-theme-compact .mchat-new-conversation,
	.mchat-theme-compact .mchat-sidebar-toggle,
	.mchat-theme-compact .mchat-sidebar-open {
		min-width: 34px;
		height: 34px;
		min-height: 34px;
		padding: 6px 8px;
	}

	.mchat-theme-compact .mchat-global-toolbar .mchat-header-actions .mchat-profile {
		width: auto;
		min-width: 34px;
		height: 34px;
		min-height: 34px;
		padding: 5px 8px 5px 5px;
	}

	.mchat-theme-compact .mchat-global-toolbar .mchat-header-actions .mchat-users-toggle {
		min-width: 42px;
	}

	.mchat-theme-compact .mchat-messages {
		padding: 10px 12px;
	}

	.mchat-theme-compact .mchat-compose {
		gap: 6px;
		padding: 7px 10px;
	}

	.mchat-theme-compact .mchat-compose textarea {
		padding: 7px 9px;
	}

	.mchat-theme-compact .mchat-pinned {
		padding: 6px 10px;
	}

	.mchat-theme-compact > .mchat-users > h3 {
		padding-right: 38px;
	}

	.mchat-theme-compact .mchat-users > .mchat-drawer-close {
		top: calc((var(--mchat-section-row-height) - 32px) / 2);
		width: 32px;
		min-width: 32px;
		height: 32px;
		min-height: 32px;
		right: 8px;
	}

	.mchat-theme-compact .mchat-users > .mchat-drawer-close:hover,
	.mchat-theme-compact .mchat-users > .mchat-drawer-close:focus-visible {
		width: 32px;
		min-width: 32px;
		height: 32px;
		min-height: 32px;
	}

	.mchat-floating-app.mchat-theme-compact {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr);
	}

	.mchat-floating-app.mchat-theme-compact.is-mobile-users > .mchat-users {
		width: var(--mchat-sidebar-width);
		max-width: var(--mchat-sidebar-width);
	}
}


/* Compact: remove the top panel inset so the Messages / Groups divider
   lands on the exact same line as the center header divider. */
@media (min-width: 621px) {
	.mchat-theme-compact > .mchat-sidebar {
		padding: 0 14px 14px;
	}

	.mchat-theme-compact .mchat-inbox-tabs {
		margin: 0 -14px 0;
	}

	.mchat-theme-compact > .mchat-users {
		padding: 0 14px 14px;
	}

	.mchat-theme-compact > .mchat-users > h3 {
		margin: 0 -14px;
		padding: 0 48px 0 14px;
		border-bottom: 1px solid var(--mchat-border);
	}
}


/* Skinny preset: denser than Compact while preserving exact structural alignment. */
@media (min-width: 621px) {
	.mchat-theme-slim {
		--mchat-sidebar-width: 260px;
		--mchat-users-width: var(--mchat-sidebar-width);
		--mchat-section-row-height: 42px;
		font-size: 11px;
	}

	/* All three divider/header rows share one height so the horizontal line is continuous. */
	.mchat-theme-slim .mchat-inbox-tabs,
	.mchat-theme-slim .mchat-inbox-tabs button,
	.mchat-theme-slim .mchat-header,
	.mchat-theme-slim > .mchat-users > h3 {
		height: var(--mchat-section-row-height);
		min-height: var(--mchat-section-row-height);
	}

	/* Remove the top inset exactly like Compact, but with tighter Skinny spacing. */
	.mchat-theme-slim > .mchat-sidebar {
		padding: 0 10px 10px;
	}

	.mchat-theme-slim .mchat-inbox-tabs {
		margin: 0 -10px 0;
	}

	.mchat-theme-slim > .mchat-users {
		padding: 0 10px 10px;
	}

	.mchat-theme-slim > .mchat-users > h3 {
		margin: 0 -10px;
		padding: 0 40px 0 10px;
		border-bottom: 1px solid var(--mchat-border);
	}

	.mchat-theme-slim .mchat-header {
		padding: 4px 8px;
	}

	.mchat-theme-slim .mchat-conversation {
		min-height: 50px;
		gap: 7px;
		padding: 5px 4px;
	}

	.mchat-theme-slim .mchat-conversation-avatar {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
	}

	.mchat-theme-slim .mchat-conversation-copy {
		gap: 0;
	}

	.mchat-theme-slim .mchat-conversation-heading time,
	.mchat-theme-slim .mchat-conversation-copy small {
		font-size: 9px;
	}

	.mchat-theme-slim .mchat-global-toolbar {
		min-height: 46px;
		padding: 4px 7px;
		gap: 5px;
	}

	.mchat-theme-slim .mchat-global-toolbar-left,
	.mchat-theme-slim .mchat-global-toolbar .mchat-header-actions {
		gap: 3px;
	}

	.mchat-theme-slim .mchat-global-toolbar .mchat-header-actions > button,
	.mchat-theme-slim .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter,
	.mchat-theme-slim .mchat-new-conversation,
	.mchat-theme-slim .mchat-sidebar-toggle,
	.mchat-theme-slim .mchat-sidebar-open {
		min-width: 30px;
		height: 30px;
		min-height: 30px;
		padding: 5px 6px;
	}

	.mchat-theme-slim .mchat-global-toolbar .mchat-header-actions .mchat-profile {
		width: auto;
		min-width: 30px;
		height: 30px;
		min-height: 30px;
		padding: 4px 6px 4px 4px;
	}

	.mchat-theme-slim .mchat-global-toolbar .mchat-header-actions .mchat-users-toggle {
		min-width: 38px;
	}

	.mchat-theme-slim .mchat-messages {
		padding: 7px 9px;
	}

	.mchat-theme-slim .mchat-pinned {
		padding: 4px 8px;
	}

	.mchat-theme-slim .mchat-compose {
		gap: 4px;
		padding: 5px 8px;
	}

	.mchat-theme-slim .mchat-compose textarea {
		padding: 6px 8px;
	}

	.mchat-theme-slim .mchat-users > .mchat-drawer-close {
		top: calc((var(--mchat-section-row-height) - 28px) / 2);
		right: 6px;
		width: 28px;
		min-width: 28px;
		height: 28px;
		min-height: 28px;
	}

	.mchat-theme-slim .mchat-users > .mchat-drawer-close:hover,
	.mchat-theme-slim .mchat-users > .mchat-drawer-close:focus-visible {
		width: 28px;
		min-width: 28px;
		height: 28px;
		min-height: 28px;
	}

	.mchat-floating-app.mchat-theme-slim {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr);
	}

	.mchat-floating-app.mchat-theme-slim.is-mobile-users > .mchat-users {
		width: var(--mchat-sidebar-width);
		max-width: var(--mchat-sidebar-width);
	}
}


/* Skinny preset: denser than Slim. */
@media (min-width: 621px) {
	.mchat-theme-skinny {
		--mchat-sidebar-width: 235px;
		--mchat-users-width: var(--mchat-sidebar-width);
		--mchat-section-row-height: 36px;
		font-size: 10px;
	}

	.mchat-theme-skinny .mchat-inbox-tabs,
	.mchat-theme-skinny .mchat-inbox-tabs button,
	.mchat-theme-skinny .mchat-header,
	.mchat-theme-skinny > .mchat-users > h3 {
		height: var(--mchat-section-row-height);
		min-height: var(--mchat-section-row-height);
	}

	.mchat-theme-skinny > .mchat-sidebar {
		padding: 0 7px 7px;
	}

	.mchat-theme-skinny .mchat-inbox-tabs {
		margin: 0 -7px;
	}

	.mchat-theme-skinny > .mchat-users {
		padding: 0 7px 7px;
	}

	.mchat-theme-skinny > .mchat-users > h3 {
		margin: 0 -7px;
		padding: 0 34px 0 7px;
		border-bottom: 1px solid var(--mchat-border);
	}

	.mchat-theme-skinny .mchat-header {
		padding: 3px 6px;
	}

	.mchat-theme-skinny .mchat-conversation {
		min-height: 42px;
		gap: 5px;
		padding: 3px 2px;
	}

	.mchat-theme-skinny .mchat-conversation-avatar {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}

	.mchat-theme-skinny .mchat-conversation-copy {
		gap: 0;
	}

	.mchat-theme-skinny .mchat-conversation-heading time,
	.mchat-theme-skinny .mchat-conversation-copy small {
		font-size: 8px;
	}

	.mchat-theme-skinny .mchat-global-toolbar {
		min-height: 40px;
		padding: 3px 5px;
		gap: 3px;
	}

	.mchat-theme-skinny .mchat-global-toolbar-left,
	.mchat-theme-skinny .mchat-global-toolbar .mchat-header-actions {
		gap: 2px;
	}

	.mchat-theme-skinny .mchat-global-toolbar .mchat-header-actions > button,
	.mchat-theme-skinny .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter,
	.mchat-theme-skinny .mchat-new-conversation,
	.mchat-theme-skinny .mchat-sidebar-toggle,
	.mchat-theme-skinny .mchat-sidebar-open {
		min-width: 26px;
		height: 26px;
		min-height: 26px;
		padding: 4px 5px;
	}

	.mchat-theme-skinny .mchat-global-toolbar .mchat-header-actions .mchat-profile {
		width: auto;
		min-width: 26px;
		height: 26px;
		min-height: 26px;
		padding: 3px 5px 3px 3px;
	}

	.mchat-theme-skinny .mchat-global-toolbar .mchat-header-actions .mchat-users-toggle {
		min-width: 34px;
	}

	.mchat-theme-skinny .mchat-messages {
		padding: 5px 7px;
	}

	.mchat-theme-skinny .mchat-pinned {
		padding: 3px 6px;
	}

	.mchat-theme-skinny .mchat-compose {
		gap: 3px;
		padding: 4px 6px;
	}

	.mchat-theme-skinny .mchat-compose textarea {
		padding: 5px 6px;
	}

	.mchat-theme-skinny .mchat-users > .mchat-drawer-close {
		top: calc((var(--mchat-section-row-height) - 24px) / 2);
		right: 5px;
		width: 24px;
		min-width: 24px;
		height: 24px;
		min-height: 24px;
	}

	.mchat-theme-skinny .mchat-users > .mchat-drawer-close:hover,
	.mchat-theme-skinny .mchat-users > .mchat-drawer-close:focus-visible {
		width: 24px;
		min-width: 24px;
		height: 24px;
		min-height: 24px;
	}

	.mchat-floating-app.mchat-theme-skinny {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr);
	}

	.mchat-floating-app.mchat-theme-skinny.is-mobile-users > .mchat-users {
		width: var(--mchat-sidebar-width);
		max-width: var(--mchat-sidebar-width);
	}
}


/* Simplified preset: cleaner/flatter presentation with shared geometry alignment. */
@media (min-width: 621px) {
	.mchat-theme-simplified {
		--mchat-sidebar-width: 320px;
		--mchat-users-width: var(--mchat-sidebar-width);
		--mchat-section-row-height: 54px;
		border-radius: 8px;
		box-shadow: none;
	}

	/* Lock all section dividers to one shared row height. */
	.mchat-theme-simplified .mchat-inbox-tabs,
	.mchat-theme-simplified .mchat-inbox-tabs button,
	.mchat-theme-simplified .mchat-header,
	.mchat-theme-simplified > .mchat-users > h3 {
		height: var(--mchat-section-row-height);
		min-height: var(--mchat-section-row-height);
	}

	/* Remove the top panel inset so Messages / Groups aligns with the center header. */
	.mchat-theme-simplified > .mchat-sidebar {
		padding: 0 12px 12px;
	}

	.mchat-theme-simplified .mchat-inbox-tabs {
		margin: 0 -12px;
	}

	.mchat-theme-simplified > .mchat-users {
		padding: 0 12px 12px;
	}

	.mchat-theme-simplified > .mchat-users > h3 {
		margin: 0 -12px;
		padding: 0 44px 0 12px;
		border-bottom: 1px solid var(--mchat-border);
	}

	/* Override the older 60px Simplified header rule. */
	.mchat-theme-simplified .mchat-header {
		min-height: var(--mchat-section-row-height);
		padding: 6px 10px;
	}

	/* Simplified is flatter and less decorative, not just smaller. */
	.mchat-theme-simplified :where(button, input, textarea, select) {
		border-radius: 5px;
		box-shadow: none;
	}

	.mchat-theme-simplified .mchat-conversation-row,
	.mchat-theme-simplified .mchat-conversation,
	.mchat-theme-simplified .mchat-inbox-search {
		border-radius: 5px;
	}

	.mchat-theme-simplified .mchat-conversation {
		min-height: 60px;
		gap: 7px;
		padding: 5px;
	}

	.mchat-theme-simplified .mchat-conversation-avatar {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
	}

	.mchat-theme-simplified .mchat-messages {
		padding: 10px 12px;
	}

	.mchat-theme-simplified .mchat-message {
		gap: 7px;
		margin-bottom: 6px;
	}

	.mchat-theme-simplified .mchat-compose {
		gap: 5px;
		padding: 7px;
	}

	.mchat-theme-simplified .mchat-compose textarea {
		padding: 8px 9px;
	}

	.mchat-theme-simplified .mchat-pinned {
		padding: 5px 9px;
	}

	.mchat-theme-simplified .mchat-global-toolbar {
		min-height: 54px;
		padding: 6px 9px;
		gap: 6px;
		box-shadow: none;
	}

	.mchat-theme-simplified .mchat-global-toolbar-left,
	.mchat-theme-simplified .mchat-global-toolbar .mchat-header-actions {
		gap: 4px;
	}

	.mchat-theme-simplified .mchat-global-toolbar .mchat-header-actions > button,
	.mchat-theme-simplified .mchat-global-toolbar .mchat-header-actions .mchat-unread-filter,
	.mchat-theme-simplified .mchat-new-conversation,
	.mchat-theme-simplified .mchat-sidebar-toggle,
	.mchat-theme-simplified .mchat-sidebar-open {
		min-width: 34px;
		height: 34px;
		min-height: 34px;
		padding: 6px 8px;
	}

	.mchat-theme-simplified .mchat-global-toolbar .mchat-header-actions .mchat-profile {
		width: auto;
		min-width: 34px;
		height: 34px;
		min-height: 34px;
		padding: 5px 8px 5px 5px;
	}

	.mchat-theme-simplified .mchat-users > .mchat-drawer-close {
		top: calc((var(--mchat-section-row-height) - 30px) / 2);
		right: 7px;
		width: 30px;
		min-width: 30px;
		height: 30px;
		min-height: 30px;
	}

	.mchat-theme-simplified .mchat-users > .mchat-drawer-close:hover,
	.mchat-theme-simplified .mchat-users > .mchat-drawer-close:focus-visible {
		width: 30px;
		min-width: 30px;
		height: 30px;
		min-height: 30px;
	}

	.mchat-floating-app.mchat-theme-simplified {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr);
	}

	.mchat-floating-app.mchat-theme-simplified.is-mobile-users > .mchat-users {
		width: var(--mchat-sidebar-width);
		max-width: var(--mchat-sidebar-width);
	}
}


/* Current-user-right mirrors the left message internals.
   Only the outer stack alignment is inverted; bubble/body sizing stays shared. */
.mchat-align-current-right .mchat-message.is-mine .mchat-message-content {
	justify-self: end;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-reactions,
.mchat-align-current-right .mchat-message.is-mine .mchat-message-actions {
	justify-content: flex-end;
}


/* Floating messenger stacking and icon-only launcher behavior. */
.mchat-floating.mchat-floating-always-on-top {
	z-index: 2147483000;
}

.mchat-floating-launcher.mchat-floating-icon-only {
	width: 54px;
	min-width: 54px;
	height: 54px;
	min-height: 54px;
	justify-content: center;
	gap: 0;
	padding: 14px;
}

.mchat-floating-launcher.mchat-floating-icon-only > span {
	display: none;
}

@media (max-width: 900px), (display-mode: standalone) {
	.mchat-floating.mchat-floating-always-on-top,
	.mchat-floating.mchat-floating-always-on-top .mchat-floating-panel {
		z-index: 2147483000;
	}
}


/* Functional context menus. No changes to existing theme geometry. */
.mchat-app .mchat-context-menu {
	position: absolute;
	z-index: 600;
	display: grid;
	min-width: 230px;
	max-width: min(300px, calc(100% - 16px));
	gap: 2px;
	border: 1px solid var(--mchat-border);
	border-radius: 10px;
	background: var(--mchat-surface);
	padding: 7px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
}

.mchat-app .mchat-context-menu button {
	width: 100%;
	min-height: 36px;
	justify-content: flex-start;
	border: 0;
	border-radius: 7px;
	background: transparent;
	padding: 7px 10px;
	color: var(--mchat-text);
	text-align: left;
	cursor: pointer;
}

.mchat-app .mchat-context-menu button:hover,
.mchat-app .mchat-context-menu button:focus-visible {
	background: color-mix(in srgb, var(--mchat-accent) 9%, var(--mchat-surface));
	color: var(--mchat-accent);
}

.mchat-app .mchat-context-menu button.is-danger {
	color: var(--mchat-danger, #b42318);
}

/* Desktop conversation information becomes a workspace, not a mobile-sized drawer.
   Mobile behavior below 900px remains unchanged. */
@media (min-width: 901px) {
	.mchat-app.is-info-open > .mchat-conversation-info {
		width: min(1100px, calc(100% - var(--mchat-sidebar-width, 340px)));
		max-width: calc(100% - var(--mchat-sidebar-width, 340px));
	}
}


/* Message reaction popover used by the message action menu and right-click menu. */
.mchat-app .mchat-reaction-context {
	position: absolute;
	z-index: 610;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: min(360px, calc(100% - 16px));
	border: 1px solid var(--mchat-border);
	border-radius: 12px;
	background: var(--mchat-surface);
	padding: 8px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
}

.mchat-app .mchat-reaction-context .mchat-reaction-choice {
	display: grid;
	width: 38px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	place-items: center;
	border: 0;
	border-radius: 9px;
	background: transparent;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mchat-app .mchat-reaction-context .mchat-reaction-choice:hover,
.mchat-app .mchat-reaction-context .mchat-reaction-choice:focus-visible {
	background: color-mix(in srgb, var(--mchat-accent) 10%, var(--mchat-surface));
}


/* Mine on the right: keep the message actions trigger attached to the right-side bubble.
   The message-content wrapper spans the row, so the generic "mine" left offset would
   otherwise leave the ellipsis floating in the middle of the conversation. */
.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu {
	left: auto;
	right: -38px;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu .mchat-message-actions {
	left: auto;
	right: 0;
}

@media (max-width: 900px) {
	.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu {
		left: auto;
		right: -32px;
	}
}


/* Mine on the right: keep the action trigger on the OUTER (left) side of the message,
   never over the avatar or floating in the center. */
.mchat-align-current-right .mchat-message.is-mine .mchat-message-content {
	width: fit-content;
	justify-self: end;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu {
	right: auto;
	left: -38px;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu .mchat-message-actions {
	right: auto;
	left: 0;
}

@media (max-width: 900px) {
	.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu {
		right: auto;
		left: -32px;
	}
}


/* Symmetric message action spacing: "Mine on the right" mirrors the normal left-side
   message exactly. The trigger sits 38px outside the LEFT edge of the right-side
   message, matching the generic 38px outside the RIGHT edge on left-side messages. */
.mchat-align-current-right .mchat-message.is-mine .mchat-message-content {
	width: fit-content;
	justify-self: end;
}


.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu {
	right: auto;
	left: -38px;
}

@media (max-width: 900px) {
	.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu {
		right: auto;
		left: -32px;
	}
}


/* When a message action menu is open, suppress every other message ellipsis.
   Prevents hover-revealed dots from appearing on top of the active popup while scrolling. */
.mchat-app.mchat-has-open-message-menu .mchat-message-menu:not([open]) > summary {
	opacity: 0 !important;
	pointer-events: none;
}

.mchat-app.mchat-has-open-message-menu .mchat-message-menu[open] {
	z-index: 40;
}

.mchat-app.mchat-has-open-message-menu .mchat-message-menu[open] .mchat-message-actions {
	z-index: 41;
}


/* Right-aligned own messages place the ellipsis on the outer LEFT side.
   Open the popup inward from that trigger so it stays inside narrow viewports. */
.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu .mchat-message-actions {
	left: 0;
	right: auto;
}



/* Full-size image viewer for uploaded message images and GIFs. */
.mchat-image-viewer {
	position: fixed;
	z-index: 2147483600;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, .86);
	padding: 24px;
	cursor: zoom-out;
}

.mchat-image-viewer-image {
	display: block;
	max-width: min(96vw, 1600px);
	max-height: 92vh;
	object-fit: contain;
	border-radius: 8px;
	cursor: default;
}

.mchat-image-viewer-close {
	position: fixed;
	top: 16px;
	right: 18px;
	display: grid;
	width: 42px;
	min-width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	padding: 0;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}


/* Conversation workspace sizing corrections. */
.mchat-messages {
	overflow-x: hidden;
	max-width: 100%;
}

.mchat-app .mchat-message,
.mchat-message-content,
.mchat-message-body {
	min-width: 0;
	max-width: 100%;
}

.mchat-message-body,
.mchat-message-body :where(a, p, li, span, strong, em, code, pre) {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mchat-message-body :where(img, video, iframe, canvas, svg) {
	max-width: 100%;
}

.mchat-app .mchat-message-link {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mchat-app .mchat-youtube-preview {
	width: min(560px, 100%);
	margin-top: 8px;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
	aspect-ratio: 16 / 9;
}

.mchat-app .mchat-youtube-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 901px) {
	/* A hidden right panel must not keep an empty grid track. */
	.mchat-app.mchat-no-users {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr) !important;
	}

	.mchat-app.mchat-no-sidebar.mchat-no-users,
	.mchat-app.mchat-left-collapsed.mchat-no-users {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.mchat-app.mchat-no-sidebar:not(.mchat-no-users) {
		grid-template-columns: minmax(0, 1fr) var(--mchat-users-width) !important;
	}

	/* Floating messenger uses Online Users as an overlay, never as reserved layout space. */
	.mchat-floating-app {
		grid-template-columns: var(--mchat-sidebar-width) minmax(0, 1fr) !important;
	}

	.mchat-floating-app.mchat-no-sidebar,
	.mchat-floating-app.mchat-left-collapsed {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.mchat-floating-app.mchat-no-sidebar > .mchat-main,
	.mchat-floating-app.mchat-left-collapsed > .mchat-main {
		grid-column: 1 / -1;
		width: 100%;
		min-width: 0;
	}
}


.mchat-message.is-sending { opacity: .72; }
.mchat-message.is-failed { opacity: .65; }
.mchat-message.is-failed .mchat-message-bubble { outline: 1px solid currentColor; }


/* Profile and conversation photos stay circular regardless of source image shape. */
.mchat-avatar,
.mchat-user-avatar,
.mchat-conversation-avatar,
.mchat-avatar img,
.mchat-user-avatar img,
.mchat-conversation-avatar > img {
	border-radius: 50%;
}


/* Avatar source images may be square/rectangular/PNG; UI avatars are always circular. */
.mchat-control-avatar,
.mchat-profile img,
.mchat-floating-profile img,
.mchat-avatar img,
.mchat-user-avatar img,
.mchat-conversation-avatar img,
.mchat-message-avatar img,
.mchat-online-avatars img,
.mchat-info-members img,
.mchat-picker img {
	border-radius: 50% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}


/* Native multi-attachment messages */
.mchat-attachments { display: grid; gap: 7px; margin-top: 7px; }
.mchat-attachments.is-multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mchat-attachments.is-multiple .mchat-media { width: 100%; height: auto; max-height: 240px; object-fit: cover; }
.mchat-pending-file { display: flex; min-width: 0; flex: 1 1 220px; align-items: center; gap: 8px; }
.mchat-pending-file img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px; object-fit: cover; }
.mchat-pending-file span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Message action menus choose horizontal/vertical direction in JS from available space.
   Keep one compact menu geometry and avoid alignment-specific inherited spacing. */
.mchat-app .mchat-message-menu .mchat-message-actions {
	top: 34px;
	right: 0;
	left: auto;
	min-width: 150px;
	margin: 0;
	gap: 1px;
	padding: 4px;
	text-align: left;
}

.mchat-app .mchat-message-menu.mchat-menu-opens-up .mchat-message-actions {
	top: auto;
	bottom: 34px;
}

.mchat-app .mchat-message-menu.mchat-menu-opens-right .mchat-message-actions {
	right: auto;
	left: 0;
}

.mchat-app .mchat-message-menu .mchat-message-actions button {
	display: flex;
	width: 100%;
	min-height: 32px;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	border: 0;
	border-radius: 6px;
	padding: 6px 8px;
	text-align: left;
	text-indent: 0;
	white-space: nowrap;
}

/* Right-side sender messages keep the trigger on the outside-left edge.
   Popup direction is now chosen dynamically, not hard-coded by alignment. */
.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu .mchat-message-actions {
	right: 0;
	left: auto;
	justify-content: stretch;
}

.mchat-align-current-right .mchat-message.is-mine .mchat-message-menu.mchat-menu-opens-right .mchat-message-actions {
	right: auto;
	left: 0;
	justify-content: stretch;
}


/* Prevent iOS Safari from auto-zooming focused chat form controls.
   Safari zooms the viewport when a focused input/textarea renders below 16px. */
@media (max-width: 900px) {
	.mchat-app .mchat-compose textarea,
	.mchat-app input[type="text"],
	.mchat-app input[type="search"],
	.mchat-app input[type="email"],
	.mchat-app input[type="password"],
	.mchat-app input[type="url"],
	.mchat-app input[type="number"],
	.mchat-app select {
		font-size: 16px;
	}
}


.mchat-app .mchat-message-mention {
	color: var(--mchat-accent);
	font-weight: 700;
	text-decoration: none;
}

.mchat-app a.mchat-message-mention:hover,
.mchat-app a.mchat-message-mention:focus-visible {
	text-decoration: none;
}