/*
 * ChatMate is a standalone plugin: it has no knowledge of any specific theme
 * and ships with its own classes, so it looks and behaves the same whether or
 * not a particular host theme is active. The one deliberate exception is this
 * block. `--mpmp-*` are CSS custom properties the CommunityQ theme defines
 * globally (site accent colour, corner radius, shadow, and so on) -- reading
 * them here is a narrow, opt-in styling contract, not structural coupling:
 * every property below has its own literal fallback, so on any other theme
 * (or with CommunityQ absent) ChatMate renders identically using those
 * defaults instead. This is a fundamentally different kind of dependency
 * than borrowing another plugin's selectors was. A custom property is inert
 * until something reads it -- it cannot hide an element, collapse a grid
 * column, or reorder a flex container the way the `mpmp-*` classes ChatMate
 * used to share could and did (see the 1.14.x changelog entries). The
 * fallback literals here match CommunityQ's own current defaults exactly, so
 * this rename changes no rendering on a site that already has it installed.
 */
.chatmate-app.chatmate-theme-inherit {
	font: inherit;
	color: inherit;
	--chatmate-z-dropdown: 1041;
	--chatmate-accent: var(--mpmp-accent, #7c3aed);
	--chatmate-accent-dark: var(--mpmp-accent-dark, #5b21b6);
	--chatmate-accent-soft: color-mix(in srgb, var(--chatmate-accent) 12%, #ffffff);
	--chatmate-accent-softer: color-mix(in srgb, var(--chatmate-accent) 7%, #ffffff);
	--chatmate-accent-border: color-mix(in srgb, var(--chatmate-accent) 24%, #e5e7eb);
	--chatmate-bg: var(--mpmp-bg, #ffffff);
	--chatmate-border: var(--mpmp-border, #e5e7eb);
	--chatmate-muted: var(--mpmp-muted, #6b7280);
	--chatmate-radius: var(--mpmp-radius, 0px);
	--chatmate-btn-radius: var(--mpmp-btn-radius, 30px);
	--chatmate-shadow: var(--mpmp-shadow, 0 10px 30px rgba(17, 24, 39, 0.08));
	--chatmate-divider-gradient: var(--mpmp-divider-gradient, linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982));
}

/*
 * Card surface, primary button, and conversation-row/avatar/bubble base
 * styling used to come from the host CommunityQ theme's own `.mpmp-*`
 * classes, which ChatMate's markup borrowed directly. That meant ChatMate's
 * look -- not just its palette -- depended on another plugin being active
 * and its stylesheet loading, and three separate bugs (the mobile chat panel
 * being `display: none` entirely, the room title collapsing to 0px wide, the
 * Send button rendering as a vertical sliver) all came from that same
 * borrowing: CommunityQ's rules were written for CommunityQ's own markup
 * shape, not ChatMate's. This section absorbs the actual declarations so
 * ChatMate owns its own structure and behaviour outright, while the
 * `--chatmate-*` variables above still let it pick up the host site's colour
 * and shape choices when they're present.
 */
.chatmate-app .chatmate-card {
	background: var(--chatmate-bg);
	border: 1px solid var(--chatmate-border);
	border-radius: var(--chatmate-radius);
	box-shadow: var(--chatmate-shadow);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.chatmate-app .chatmate-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--chatmate-btn-radius);
	cursor: pointer;
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	background: var(--chatmate-accent);
	color: #fff;
}

.chatmate-app .chatmate-btn-primary:hover {
	background: var(--chatmate-accent-dark);
	color: #fff;
}

.chatmate-app .chatmate-conversation-item {
	display: flex;
	align-items: stretch;
	gap: 0.35rem;
	width: 100%;
	padding: 0.35rem;
	border: 1px solid var(--chatmate-border);
	border-radius: var(--chatmate-radius);
	background: #fff;
}

.chatmate-app .chatmate-conversation-item.is-active,
.chatmate-app .chatmate-conversation-item:hover {
	border-color: var(--chatmate-accent);
	background: rgba(37, 99, 235, 0.04);
}

.chatmate-app .chatmate-conversation-open {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 0.75rem;
	align-items: center;
	flex: 1;
	min-width: 0;
	padding: 0.4rem;
	border: 0;
	border-radius: calc(var(--chatmate-radius) - 2px);
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.chatmate-app .chatmate-conversation-item.is-active .chatmate-conversation-open,
.chatmate-app .chatmate-conversation-item:hover .chatmate-conversation-open {
	background: transparent;
}

.chatmate-app .chatmate-conv-avatar,
.chatmate-app .chatmate-chat-header-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.chatmate-app .chatmate-chat-header-avatar {
	width: 40px;
	height: 40px;
	margin-right: 0.65rem;
}

.chatmate-app .chatmate-conv-info strong,
.chatmate-app .chatmate-conv-info p {
	display: block;
	margin: 0;
}

.chatmate-app .chatmate-conv-info p {
	color: var(--chatmate-muted);
	font-size: 0.875rem;
}

.chatmate-app .chatmate-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: var(--chatmate-btn-radius);
	background: var(--chatmate-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

/*
 * Base chat header: flex row, space between the info block and actions, and
 * -- on the inbox specifically -- the pride-flag gradient divider that was
 * previously inherited from CommunityQ's own `.mpmp-chat-header` rule. The
 * rooms UI overrides this divider further down (`.chatmate-app.chatmate-rooms
 * .chatmate-chat-header`) with its own thinner accent-tinted border, exactly
 * as it did before this rule was ChatMate's own -- that override is
 * unchanged by this migration.
 */
.chatmate-app .chatmate-chat-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 3px solid;
	border-image: var(--chatmate-divider-gradient) 1;
}

.chatmate-app .chatmate-chat-header-info {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 1;
	min-width: 0;
}

.chatmate-app .chatmate-chat-messages {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	min-height: 320px;
	max-height: 420px;
	overflow-y: auto;
	padding: 1rem 0;
}

.chatmate-app .chatmate-chat-bubble {
	max-width: 75%;
	padding: 0.7rem 0.9rem;
	border-radius: 1rem;
	line-height: 1.45;
	word-break: break-word;
}

.chatmate-app .chatmate-chat-bubble.is-theirs {
	align-self: flex-start;
	background: #f3f4f6;
	color: #111827;
}

.chatmate-app .chatmate-chat-bubble.is-mine {
	align-self: flex-end;
	background: var(--chatmate-accent);
	color: #fff;
}

.chatmate-app .chatmate-empty {
	padding: 1.25rem;
	text-align: center;
	color: var(--chatmate-muted);
}

/*
 * Lets the widget expand to fill wide/full-width Elementor sections and
 * Gutenberg's alignwide/alignfull, the same way it did when it carried
 * CommunityQ's `mpmp-messages` class -- but keyed on ChatMate's own wrapper
 * now, so this works whether or not CommunityQ is the active theme.
 */
.alignwide .chatmate-app,
.alignfull .chatmate-app,
.elementor-section.elementor-section-full_width .chatmate-app,
.elementor-widget-wrap .chatmate-app {
	max-width: none;
	width: 100%;
}

.chatmate-app.chatmate-rooms .chatmate-conversations-panel .chatmate-card {
	background: linear-gradient(180deg, var(--chatmate-accent-soft) 0%, var(--chatmate-bg) 32%);
	border: 1px solid var(--chatmate-accent-border);
}

.chatmate-app.chatmate-rooms .chatmate-chat-card {
	border: 1px solid var(--chatmate-accent-border);
}

.chatmate-app.chatmate-rooms .chatmate-chat-header {
	padding-bottom: 0.75rem;
	margin-bottom: 0.35rem;
	border-bottom: 2px solid color-mix(in srgb, var(--chatmate-accent) 30%, transparent);
}

/*
 * `.chatmate-app.chatmate-chat` (the private inbox) needs this panel to
 * clip nothing, because the member-search dropdown (`.chatmate-user-results`)
 * is an absolutely-positioned child that must be free to render outside the
 * card's box. But the same "overflow: visible" was previously applied to
 * every `.chatmate-app` conversations panel, including the rooms sidebar
 * (`.chatmate-rooms`), which has no such dropdown -- it just lists live
 * broadcasts and room members, content whose length isn't bounded. Once that
 * content is taller than the box (the wrapper's fixed height, set inline via
 * the `[chatmate_rooms height="..."]` attribute / its `calc(100vh - 220px)`
 * default), "overflow: visible" let it spill out of the box and render on
 * top of whatever follows the widget on the page -- e.g. footer widgets on
 * pages with little content below the shortcode. Scope the dropdown-safe
 * rule to the inbox only, and give the rooms sidebar its own internal
 * scrollbar instead so overflow stays inside the widget.
 */
.chatmate-app.chatmate-chat .chatmate-conversations-panel .chatmate-card {
	overflow: visible;
}

.chatmate-app.chatmate-rooms .chatmate-conversations-panel .chatmate-card {
	overflow-y: auto;
	overflow-x: visible;
}

.chatmate-room-list .list-group-item {
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
	font-size: 0.9rem;
}

.chatmate-room-current {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.75rem 0.85rem;
	border-radius: calc(var(--chatmate-radius) - 4px);
	background: linear-gradient(135deg, var(--chatmate-accent) 0%, var(--chatmate-accent-dark) 100%);
	border: 0;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--chatmate-accent) 35%, transparent);
	color: #fff;
}

.chatmate-room-current-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	opacity: 0.92;
}

.chatmate-room-current-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.chatmate-room-chat-title {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--chatmate-accent);
}

.chatmate-rooms .chatmate-room-list .chatmate-room-item.active {
	background: var(--chatmate-accent);
	border-color: var(--chatmate-accent);
	color: #fff;
}

.chatmate-rooms .chatmate-room-list .chatmate-room-item:not(.active):hover,
.chatmate-rooms .chatmate-room-list .chatmate-room-item:not(.active):focus-visible {
	background: color-mix(in srgb, var(--chatmate-accent) 10%, #ffffff);
	border-color: color-mix(in srgb, var(--chatmate-accent) 28%, transparent);
	color: var(--chatmate-accent-dark);
}

.chatmate-app #chatmate-conversation-list {
	display: grid;
	gap: 0.5rem;
	max-height: 520px;
	overflow-y: auto;
}

.chatmate-app .chatmate-messages-layout {
	height: inherit;
}

.chatmate-app .chatmate-chat-card {
	display: flex;
	flex-direction: column;
	height: inherit;
	min-height: 0;
}

.chatmate-app .chatmate-messages,
.chatmate-app #chatmate-messages,
.chatmate-app #chatmate-room-messages {
	flex: 1;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
}

.chatmate-search-wrap {
	position: relative;
	z-index: var(--chatmate-z-dropdown, 1041);
}

/*
 * Hidden by default; the mobile media query above reveals it. It only makes
 * sense while the inbox is showing a thread in place of the conversation
 * list, which is a narrow-screen state only.
 */
.chatmate-mobile-back {
	display: none;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: #fff;
	border-radius: 999px;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 0.6rem;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.chatmate-mobile-back:hover,
.chatmate-mobile-back:focus-visible {
	background: rgba(13, 110, 253, 0.08);
}

.chatmate-search-wrap.is-active .form-control {
	border-color: var(--chatmate-accent);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--chatmate-accent) 18%, transparent);
}

.chatmate-user-results {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.35rem);
	z-index: var(--chatmate-z-dropdown, 1041);
	max-height: 220px;
	overflow: auto;
	box-shadow: var(--chatmate-shadow);
	background: var(--chatmate-bg);
}

.chatmate-user-results .list-group-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.chatmate-thread-profile {
	color: inherit;
	text-decoration: none;
}

.chatmate-thread-profile--linked:hover .chatmate-thread-name,
.chatmate-thread-profile--linked:focus-visible .chatmate-thread-name {
	text-decoration: underline;
}

.chatmate-thread-profile[aria-disabled="true"] {
	cursor: default;
}

.chatmate-thread-profile:not([hidden]) + .chatmate-thread-placeholder {
	display: none;
}

.chatmate-room-message-row {
	display: flex;
	align-items: flex-end;
	gap: 0.65rem;
}

.chatmate-room-message-row.is-mine {
	justify-content: flex-end;
}

.chatmate-room-message-row .chatmate-room-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.chatmate-room-message-row.is-mine .chatmate-chat-bubble strong {
	text-align: right;
}

.chatmate-room-message-row.is-mine .chatmate-room-user-meta {
	text-align: right;
}

.chatmate-room-user-meta {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.85;
}

.chatmate-room-profile-link {
	color: inherit;
	text-decoration: none;
}

.chatmate-room-profile-link:hover,
.chatmate-room-profile-link:focus-visible {
	text-decoration: underline;
}

.chatmate-room-avatar-link {
	display: inline-flex;
	flex-shrink: 0;
}

.chatmate-room-message-row .chatmate-chat-bubble strong {
	display: inline;
	margin-bottom: 0;
	font-size: 0.85rem;
}

.chatmate-room-message-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.15rem;
}

.chatmate-room-message-row.is-mine .chatmate-room-message-head {
	justify-content: flex-end;
}

.chatmate-mod-badge {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: rgba(13, 110, 253, 0.15);
	color: inherit;
}

.chatmate-room-message-row.is-bot .chatmate-chat-bubble.is-theirs {
	border-left: 3px solid rgba(13, 110, 253, 0.45);
	background: rgba(13, 110, 253, 0.06);
}

.chatmate-room-message-row.is-pending-review .chatmate-chat-bubble.is-mine {
	opacity: 0.75;
	border-style: dashed;
}

.chatmate-pending-badge {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 600;
	background: rgba(255, 193, 7, 0.2);
}

.chatmate-held-notice {
	margin: 0.35rem 0 0.75rem;
	padding: 0.45rem 0.65rem;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	background: rgba(255, 193, 7, 0.12);
	text-align: center;
}

.chatmate-mod-queue-link {
	margin-left: auto;
	white-space: nowrap;
}

.chatmate-mod-delete {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: 0.55;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 0.2rem;
	cursor: pointer;
}

.chatmate-mod-delete:hover,
.chatmate-mod-delete:focus-visible {
	opacity: 1;
}

.chatmate-room-event {
	display: flex;
	justify-content: center;
	margin: 0.55rem 0;
}

.chatmate-room-event-text {
	max-width: 92%;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--chatmate-accent) 10%, #f8fafc);
	border: 1px solid color-mix(in srgb, var(--chatmate-accent) 14%, transparent);
	color: var(--chatmate-accent-dark);
	font-size: 0.82rem;
	line-height: 1.45;
	text-align: center;
}

.chatmate-room-event-text strong {
	font-weight: 600;
}

.chatmate-room-event-text .chatmate-room-user-meta {
	display: inline;
	margin: 0 0.15rem;
	font-size: inherit;
	opacity: 0.9;
}

.chatmate-room-event-action {
	margin-left: 0.2rem;
}

.chatmate-video {
	width: 100%;
	min-height: 220px;
	background: #000;
	border-radius: calc(var(--chatmate-radius) - 6px);
	object-fit: cover;
}

.chatmate-broadcast-start-dialog,
.chatmate-broadcast-popup {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

.chatmate-broadcast-start-dialog {
	z-index: 1300;
}

.chatmate-broadcast-popup {
	z-index: 1200;
}

.chatmate-broadcast-start-dialog[hidden],
.chatmate-broadcast-popup[hidden] {
	display: none !important;
}

.chatmate-broadcast-start-dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(15, 23, 42, 0.55);
	pointer-events: auto;
}

.chatmate-broadcast-start-card {
	width: min(100%, 480px);
	padding: 1.25rem;
	border-radius: calc(var(--chatmate-radius));
	background: #fff;
	color: #212529;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

/*
 * The site body sets a white `color` for its dark theme (see body { color:
 * #fff } in the theme). This card is a light/white surface with no color
 * of its own set previously, so its heading, description, and radio labels
 * silently inherited that white text straight onto the white card,
 * rendering invisible. Setting color on the card fixes inheritance for all
 * of them; .text-muted is pinned explicitly too since it otherwise
 * resolves through a Bootstrap CSS variable that the dark theme also
 * repoints to white.
 */
.chatmate-broadcast-start-card .text-muted {
	color: #6c757d !important;
}

.chatmate-broadcast-field,
.chatmate-broadcast-visibility {
	display: block;
	margin-bottom: 1rem;
}

.chatmate-broadcast-visibility legend {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.chatmate-broadcast-radio {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	margin-bottom: 0.45rem;
	font-size: 0.92rem;
}

.chatmate-broadcast-start-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.chatmate-broadcast-popup {
	display: block;
	padding: 0;
	background: transparent;
}

.chatmate-broadcast-popup-panel {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100vw - 2rem));
	height: min(420px, calc(100vh - 2rem));
	min-width: 280px;
	min-height: 220px;
	max-width: calc(100vw - 1rem);
	max-height: calc(100vh - 1rem);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: calc(var(--chatmate-radius));
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
	border: 1px solid rgba(15, 23, 42, 0.12);
	overflow: hidden;
	pointer-events: auto;
}

.chatmate-broadcast-popup-panel.is-dragging,
.chatmate-broadcast-popup-panel.is-resizing {
	user-select: none;
}

.chatmate-broadcast-popup-panel.is-resizing {
	cursor: nwse-resize;
}

.chatmate-broadcast-popup-header {
	cursor: grab;
	user-select: none;
	touch-action: none;
}

.chatmate-broadcast-popup-panel.is-dragging .chatmate-broadcast-popup-header {
	cursor: grabbing;
}

.chatmate-broadcast-popup-header,
.chatmate-broadcast-popup-footer {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: #111827;
	color: #fff;
}

.chatmate-broadcast-popup-header {
	align-items: flex-start;
}

.chatmate-broadcast-popup-footer {
	align-items: center;
}

.chatmate-broadcast-popup-header-main {
	flex: 1 1 auto;
	min-width: 0;
}

.chatmate-broadcast-popup-subtitle {
	display: block;
	margin-top: 0.15rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.78rem;
	line-height: 1.25;
}

.chatmate-broadcast-popup-header-tools {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	padding-top: 0.1rem;
}

.chatmate-broadcast-fullscreen {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	font-size: 0.78rem;
	line-height: 1.2;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}

.chatmate-broadcast-popup-expand {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease;
}

.chatmate-broadcast-popup-expand:hover,
.chatmate-broadcast-popup-expand:focus {
	background: rgba(15, 23, 42, 0.9);
	outline: none;
}

.chatmate-broadcast-popup-expand:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.chatmate-broadcast-expand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.chatmate-broadcast-popup-corner-tools {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: flex-end;
	pointer-events: none;
}

.chatmate-broadcast-popup-corner-tools > * {
	pointer-events: auto;
}

.chatmate-broadcast-fullscreen-icon {
	font-size: 0.95rem;
	line-height: 1;
}

.chatmate-broadcast-fullscreen:hover {
	background: rgba(255, 255, 255, 0.16);
}

.chatmate-broadcast-popup-panel.is-fullscreen .chatmate-broadcast-popup-corner-tools,
.chatmate-broadcast-popup-panel:fullscreen .chatmate-broadcast-popup-corner-tools,
.chatmate-broadcast-popup-panel:-webkit-full-screen .chatmate-broadcast-popup-corner-tools {
	display: none;
}

.chatmate-broadcast-popup-panel.is-fullscreen .chatmate-broadcast-viewers,
.chatmate-broadcast-popup-panel:fullscreen .chatmate-broadcast-viewers,
.chatmate-broadcast-popup-panel:-webkit-full-screen .chatmate-broadcast-viewers {
	display: none;
}

.chatmate-broadcast-popup-panel.is-fullscreen .chatmate-broadcast-popup-body,
.chatmate-broadcast-popup-panel:fullscreen .chatmate-broadcast-popup-body,
.chatmate-broadcast-popup-panel:-webkit-full-screen .chatmate-broadcast-popup-body {
	padding: 0.35rem;
}

.chatmate-broadcast-popup-panel.is-fullscreen .chatmate-broadcast-popup-stage,
.chatmate-broadcast-popup-panel:fullscreen .chatmate-broadcast-popup-stage,
.chatmate-broadcast-popup-panel:-webkit-full-screen .chatmate-broadcast-popup-stage {
	min-height: 0;
	flex: 1 1 auto;
	border-radius: 0;
}

.chatmate-broadcast-popup-panel:fullscreen,
.chatmate-broadcast-popup-panel:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	left: 0 !important;
	top: 0 !important;
	transform: none !important;
	border-radius: 0;
}

.chatmate-broadcast-popup-panel:fullscreen .chatmate-broadcast-popup-resize,
.chatmate-broadcast-popup-panel:-webkit-full-screen .chatmate-broadcast-popup-resize {
	display: none;
}

.chatmate-broadcast-popup-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 1rem;
	overflow: auto;
	display: flex;
	flex-direction: column;
}

.chatmate-broadcast-popup-stage {
	flex: 1 1 auto;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: calc(var(--chatmate-radius) - 4px);
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.chatmate-broadcast-popup-stage .chatmate-video {
	width: 100%;
	height: 100%;
	min-height: 120px;
	max-height: 100%;
	object-fit: contain;
}

.chatmate-broadcast-popup-resize {
	position: relative;
	width: 28px;
	height: 28px;
	cursor: nwse-resize;
	touch-action: none;
}

.chatmate-broadcast-popup-resize::after {
	content: '';
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 12px;
	height: 12px;
	border-right: 2px solid rgba(255, 255, 255, 0.75);
	border-bottom: 2px solid rgba(255, 255, 255, 0.75);
}

.chatmate-broadcast-popup-close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.chatmate-broadcast-popup-popout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.chatmate-broadcast-popup-popout:hover,
.chatmate-broadcast-popup-popout:focus {
	background: rgba(255, 255, 255, 0.14);
	outline: none;
}

.chatmate-broadcast-popup-minimize {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.chatmate-broadcast-popup-minimize:hover,
.chatmate-broadcast-popup-minimize:focus {
	background: rgba(255, 255, 255, 0.14);
	outline: none;
}

/*
 * .hidden is toggled on these two buttons from JS depending on device and
 * role, but every other rule for them sets `display` unconditionally --
 * without this, the plain `display: inline-flex` above would out-cascade
 * the browser's default `[hidden] { display: none }` (same specificity,
 * but author styles always beat user-agent styles), so the "hidden" one
 * would stay visible. This pins hidden to actually mean hidden.
 */
.chatmate-broadcast-popup-popout[hidden],
.chatmate-broadcast-popup-minimize[hidden] {
	display: none !important;
}

.chatmate-broadcast-popup-header button {
	cursor: pointer;
}

/*
 * Mobile mini bubble: a small, always-draggable floating thumbnail that
 * keeps a broadcast/viewer session visible without covering the chat
 * beneath it. This is what the minimize button (above) and the
 * auto-minimize-on-mobile behavior in chatmate-broadcast-popup.js switch
 * the panel into, in place of the desktop "pop out to its own window" flow
 * -- window.open() can't create a real separate window on a phone, so that
 * flow just strands the visitor on a blank new tab there instead.
 */
.chatmate-broadcast-popup-mini-controls {
	display: none;
}

.chatmate-broadcast-popup-panel.is-mini {
	min-width: 0;
	min-height: 0;
	border-radius: 18px;
	cursor: grab;
	touch-action: none;
}

.chatmate-broadcast-popup-panel.is-mini.is-dragging {
	cursor: grabbing;
}

.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-header,
.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-footer,
.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-corner-tools,
.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-expand {
	display: none;
}

.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-body {
	padding: 0;
	height: 100%;
}

.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-stage {
	border-radius: 0;
	cursor: inherit;
}

.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-stage .chatmate-video {
	object-fit: cover;
}

.chatmate-broadcast-popup-panel.is-mini .chatmate-broadcast-popup-mini-controls {
	display: block;
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 6;
}

.chatmate-broadcast-popup-mini-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chatmate-broadcast-popup-mini-close:hover,
.chatmate-broadcast-popup-mini-close:focus {
	background: rgba(15, 23, 42, 0.9);
	outline: none;
}

/*
 * Pop-out mode: BroadcastPopoutPage renders this same panel markup
 * stand-alone (no theme header/footer) inside a real, independently
 * movable/resizable OS window opened via window.open(). The panel fills
 * that window edge-to-edge instead of floating over page content, so all
 * of the in-page fixed positioning/dragging/resizing is neutralized here.
 */
body.chatmate-popout-active {
	margin: 0;
	background: #000;
	overflow: hidden;
}

body.chatmate-popout-active .chatmate-broadcast-popup {
	position: static;
	inset: auto;
	height: 100vh;
	width: 100vw;
}

body.chatmate-popout-active .chatmate-broadcast-popup-panel {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none;
	max-height: none;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.chatmate-popout-active .chatmate-broadcast-popup-header {
	cursor: default;
}

body.chatmate-popout-active .chatmate-broadcast-popup-corner-tools {
	display: none;
}

.chatmate-broadcast-share {
	margin-top: 0.45rem;
	color: #fff;
}

.chatmate-broadcast-share label {
	display: block;
	margin-bottom: 0.2rem;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
}

.chatmate-broadcast-share-row {
	display: flex;
	gap: 0.35rem;
	margin: 0;
	align-items: center;
}

.chatmate-broadcast-share-url,
#chatmate-broadcast-share-url {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.3rem 0.5rem;
	font-size: 0.78rem;
	line-height: 1.2;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 6px;
}

.chatmate-broadcast-share-url:focus,
#chatmate-broadcast-share-url:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.45);
	box-shadow: none;
	outline: none;
}

.chatmate-broadcast-share-copy {
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.78rem;
	line-height: 1.2;
	padding: 0.3rem 0.55rem;
	border-radius: 6px;
}

.chatmate-broadcast-share-copy:hover,
.chatmate-broadcast-share-copy:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.chatmate-broadcast-viewers {
	margin-top: 0.85rem;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	padding-top: 0.75rem;
}

.chatmate-broadcast-viewers-head {
	margin-bottom: 0.45rem;
	font-size: 0.92rem;
}

.chatmate-broadcast-viewer-count {
	position: absolute;
	left: 0.55rem;
	bottom: 0.55rem;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.65rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.chatmate-broadcast-viewer-count-footer {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.chatmate-broadcast-viewer-count-label {
	font-weight: 500;
	opacity: 0.85;
}

.chatmate-broadcast-viewer-count-value {
	font-weight: 700;
}

.chatmate-broadcast-viewer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 140px;
	overflow-y: auto;
	display: grid;
	gap: 0.45rem;
}

.chatmate-broadcast-viewer-item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.chatmate-broadcast-viewer-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.chatmate-broadcast-viewer-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chatmate-broadcast-viewer-name {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
}

.chatmate-broadcast-viewer-sub {
	font-size: 0.78rem;
	color: #64748b;
	line-height: 1.2;
}

.chatmate-broadcast-viewer-empty {
	font-size: 0.85rem;
	color: #64748b;
}

.chatmate-broadcast-popup-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.chatmate-broadcast-panel {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding-top: 0.15rem;
}

.chatmate-broadcast-panel-title,
.chatmate-rooms #chatmate-room-members-title {
	margin-bottom: 0;
	color: var(--chatmate-accent);
	font-weight: 700;
}

.chatmate-broadcast-quota {
	display: grid;
	gap: 0.1rem;
	line-height: 1.25;
}

.chatmate-broadcast-quota .chatmate-quota {
	font-size: 0.78rem;
	color: var(--chatmate-muted);
}

.chatmate-broadcast-list .list-group-item-action:hover,
.chatmate-broadcast-list .list-group-item-action:focus-visible {
	background: color-mix(in srgb, var(--chatmate-accent) 8%, #ffffff);
	color: var(--chatmate-accent-dark);
}

.chatmate-broadcast-list {
	margin: 0;
	max-height: 120px;
	overflow-y: auto;
}

.chatmate-broadcast-list .list-group-item {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-size: 0.88rem;
}

.chatmate-broadcast-list .chatmate-empty {
	padding: 0.35rem 0;
	font-size: 0.82rem;
}

.chatmate-room-members {
	border-top: 1px solid color-mix(in srgb, var(--chatmate-accent) 16%, transparent);
	padding-top: 0.45rem;
	margin-top: 0;
	background: var(--chatmate-accent-softer);
	border-radius: calc(var(--chatmate-radius) - 6px);
	padding-left: 0.55rem;
	padding-right: 0.55rem;
	padding-bottom: 0.45rem;
}

.chatmate-room-members-count {
	margin: 0;
	padding: 0.35rem 0.65rem;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--chatmate-accent-dark);
	text-align: center;
	background: color-mix(in srgb, var(--chatmate-accent) 12%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--chatmate-accent) 18%, transparent);
	border-radius: 999px;
}

.chatmate-start-broadcast {
	margin-top: 0.15rem;
	margin-bottom: 0;
}

/*
 * Starting or joining a broadcast is several server round trips before any
 * video can appear. Without a visible busy state the control just sits there
 * looking untouched, which reads as an unresponsive button.
 */
.chatmate-app .is-busy,
.chatmate-broadcast-start-dialog .is-busy {
	position: relative;
	opacity: 0.75;
	cursor: progress;
	pointer-events: none;
}

.chatmate-app .chatmate-watch-broadcast.is-busy,
.chatmate-broadcast-start-dialog .is-busy {
	padding-right: 2rem;
}

.chatmate-app .chatmate-watch-broadcast.is-busy::after,
.chatmate-broadcast-start-dialog .is-busy::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.6rem;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: -0.425rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: chatmate-busy-spin 0.7s linear infinite;
}

@keyframes chatmate-busy-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.chatmate-app .chatmate-watch-broadcast.is-busy::after,
	.chatmate-broadcast-start-dialog .is-busy::after {
		animation: none;
	}
}

.chatmate-room-members-head,
.chatmate-room-member-item {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.5fr) minmax(0, 1fr);
	gap: 0.35rem;
	align-items: center;
}

.chatmate-room-members-head {
	margin-bottom: 0.2rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--chatmate-accent);
}

.chatmate-room-members-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 160px;
	overflow-y: auto;
	display: grid;
	gap: 0.15rem;
}

.chatmate-room-member-item {
	font-size: 0.82rem;
	line-height: 1.25;
	padding: 0.15rem 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.chatmate-room-member-item:last-child {
	border-bottom: 0;
}

.chatmate-room-member-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--chatmate-accent-dark);
}

.chatmate-room-member-name .chatmate-room-profile-link {
	color: var(--chatmate-accent-dark);
}

.chatmate-room-member-name .chatmate-room-profile-link:hover,
.chatmate-room-member-name .chatmate-room-profile-link:focus-visible {
	color: var(--chatmate-accent);
}

.chatmate-room-member-age,
.chatmate-room-member-location {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #475569;
	font-size: 0.8rem;
}

.chatmate-room-members-empty {
	font-size: 0.82rem;
	color: #64748b;
	padding: 0.15rem 0;
}

@media (max-width: 767.98px) {
	/*
	 * The fixed height (e.g. the `[chatmate_rooms]` default of
	 * `calc(100vh - 220px)`) lives inline on `.chatmate-messages-layout` (the
	 * chat row itself now, not the outer `.chatmate-app` wrapper -- see the
	 * comment in templates/chat/rooms.php for why. Reset it to a natural
	 * height here on mobile so the row/card don't stay pinned to a
	 * desktop-sized box. `!important` is required here because inline
	 * styles otherwise always win over a stylesheet rule regardless of
	 * selector specificity.
	 */
	.chatmate-app .chatmate-conversations-panel {
		margin-bottom: 1rem;
	}

	.chatmate-app .chatmate-messages-layout,
	.chatmate-app .chatmate-chat-card {
		height: auto !important;
	}

	/*
	 * Historical note for anyone reading the 1.14.x changelog entries: the
	 * room chat panel used to need an explicit `display: block` rescue here.
	 * ChatMate's wrapper carried the host CommunityQ theme's `mpmp-messages`
	 * class for styling, which also opted it into CommunityQ's mobile
	 * master/detail rule (`.mpmp-messages:not(.mpmp-mobile-chat-active)
	 * .mpmp-chat-panel { display: none; }`) -- correct for CommunityQ's own
	 * inbox, but ChatMate never toggled the flag that rule waited for, so the
	 * room chat panel was `display: none` on every screen under 768px,
	 * permanently. Now that ChatMate's markup carries only its own classes,
	 * no other plugin's stylesheet can ever select it, so that collision is
	 * no longer just fixed -- it is structurally impossible. Nothing in this
	 * file hides `.chatmate-chat-panel` by default, so no rescue rule is
	 * needed for the rooms UI at all.
	 */

	/*
	 * With the chat panel visible again, source order would put the sidebar
	 * above it -- and that sidebar is not small: room title, two quota lines,
	 * a broadcast list, the Go Live button, the member count and the member
	 * list run to roughly 550px before the chat begins. Flip them so the
	 * chat is what you land on. `display: flex` is set explicitly rather
	 * than relying on Bootstrap's `.row` so the ordering holds even if the
	 * host theme's grid differs.
	 */
	.chatmate-app.chatmate-rooms .chatmate-messages-layout {
		display: flex;
		flex-direction: column;
	}

	.chatmate-app.chatmate-rooms .chatmate-chat-panel {
		order: 1;
	}

	.chatmate-app.chatmate-rooms .chatmate-conversations-panel {
		order: 2;
		margin-top: 1rem;
		margin-bottom: 0;
	}

	/*
	 * The inbox genuinely does want master/detail behaviour on mobile -- it
	 * has a real conversation list, and showing both the list and a thread
	 * side by side has no room to work in at phone widths. This used to be
	 * borrowed from CommunityQ's own CSS; it's ChatMate's own rule now.
	 * chatmate-front.js toggles `chatmate-mobile-thread-active` on the
	 * wrapper when a conversation is opened or closed (see
	 * setMobileChatActive() in assets/js/chatmate-front.js).
	 */
	.chatmate-app.chatmate-chat:not(.chatmate-mobile-thread-active) .chatmate-chat-panel {
		display: none;
	}

	.chatmate-app.chatmate-chat.chatmate-mobile-thread-active .chatmate-conversations-panel {
		display: none;
	}

	/*
	 * Truncate a long conversation partner name to one line rather than
	 * wrapping and pushing the header taller, once the thread is showing
	 * full-width on mobile.
	 */
	.chatmate-app.chatmate-chat .chatmate-chat-header-info strong {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*
	 * The back button that returns from the thread to the conversation list.
	 * Has nothing to do on desktop, where both panels are already visible
	 * side by side.
	 */
	.chatmate-app.chatmate-chat .chatmate-mobile-back {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		margin-right: 0.5rem;
		flex: 0 0 auto;
	}

	/*
	 * With the chat card at `height: auto`, the messages area is only as tall
	 * as its content -- an empty or quiet room collapsed to a sliver that was
	 * easy to miss. Give it a floor as well as a ceiling. `dvh` accounts for
	 * mobile browser chrome that expands and contracts on scroll; the `vh`
	 * declarations above each one are the fallback for browsers without it.
	 */
	.chatmate-app .chatmate-messages,
	.chatmate-app #chatmate-messages,
	.chatmate-app #chatmate-room-messages {
		min-height: 45vh;
		min-height: 45dvh;
		max-height: 60vh;
		max-height: 60dvh;
	}

	/*
	 * The sidebar now sits below the chat, so its inner lists no longer need
	 * to stay compact to keep the chat reachable -- and a cramped 120px
	 * scroller is awkward on a touch screen.
	 */
	.chatmate-app.chatmate-rooms .chatmate-broadcast-list {
		max-height: none;
	}

	.chatmate-app.chatmate-rooms .chatmate-room-members-list {
		max-height: 240px;
	}
}

/*
 * This grid used to inherit CommunityQ's three-column track (`auto 1fr
 * auto`), sized for CommunityQ's own composer with its extra attach control.
 * ChatMate's composer has only two children -- the text field and the send
 * button -- so the field landed in the fixed `auto` column and Send
 * inherited the flexible `1fr` one, leaving it whatever space was left over
 * (about 36px at phone widths, so "Send" wrapped one letter per line and
 * rendered as a tall vertical sliver). ChatMate now declares the two-column
 * track its own markup actually has: text field flexible, button sized to
 * its own content.
 */
.chatmate-app .chatmate-input-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.75rem;
	align-items: center;
}

/*
 * Belt and braces. Whatever a host stylesheet does to the surrounding grid
 * or flex context in future, the send label must never wrap.
 */
.chatmate-app .chatmate-send {
	white-space: nowrap;
}

.chatmate-composer-shell {
	position: relative;
}

.chatmate-composer-toolbar {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 0.45rem;
}

.chatmate-composer-btn {
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: #fff;
	border-radius: 999px;
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 0.55rem;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}

.chatmate-composer-btn:hover,
.chatmate-composer-btn:focus-visible {
	background: rgba(13, 110, 253, 0.08);
}

.chatmate-picker {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 0.35rem);
	z-index: 20;
	max-height: 280px;
	overflow: auto;
	padding: 0.65rem;
	border-radius: calc(var(--chatmate-radius));
	background: #fff;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.chatmate-emoji-group + .chatmate-emoji-group {
	margin-top: 0.65rem;
}

.chatmate-emoji-group-title {
	display: block;
	font-size: 0.75rem;
	margin-bottom: 0.35rem;
	color: rgba(15, 23, 42, 0.65);
}

.chatmate-emoji-grid,
.chatmate-gif-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
	gap: 0.25rem;
}

.chatmate-gif-results {
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.chatmate-emoji-item {
	border: 0;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1.4;
	cursor: pointer;
	border-radius: 0.35rem;
	padding: 0.15rem;
}

.chatmate-emoji-item:hover,
.chatmate-emoji-item:focus-visible {
	background: rgba(13, 110, 253, 0.08);
}

.chatmate-gif-picker-head {
	margin-bottom: 0.5rem;
}

.chatmate-gif-search-row {
	display: flex;
	gap: 0.45rem;
	align-items: center;
}

.chatmate-gif-search-row .chatmate-gif-search {
	flex: 1 1 auto;
}

.chatmate-gif-save-phrase {
	flex: 0 0 auto;
	white-space: nowrap;
}

.chatmate-gif-saved-wrap {
	margin-top: 0.55rem;
}

.chatmate-gif-saved-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: rgba(15, 23, 42, 0.65);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.chatmate-gif-saved-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.chatmate-gif-saved-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.08);
	overflow: hidden;
}

.chatmate-gif-saved-search {
	border: 0;
	background: transparent;
	padding: 0.25rem 0.55rem;
	font-size: 0.82rem;
	cursor: pointer;
	color: inherit;
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chatmate-gif-saved-remove {
	border: 0;
	background: transparent;
	padding: 0 0.45rem 0 0;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.65;
}

.chatmate-gif-saved-remove:hover,
.chatmate-gif-saved-remove:focus-visible {
	opacity: 1;
}

.chatmate-gif-item {
	border: 0;
	background: #000;
	border-radius: 0.35rem;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
}

.chatmate-gif-item img {
	display: block;
	width: 100%;
	height: 72px;
	object-fit: cover;
}

.chatmate-gif-empty {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(15, 23, 42, 0.65);
}

.chatmate-message-body .chatmate-gif,
.chatmate-gif {
	display: block;
	max-width: min(100%, 260px);
	border-radius: 0.5rem;
	margin-top: 0.15rem;
}

/* Room header actions (Leave Room + Moderation Queue) */
.chatmate-room-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.chatmate-leave-room {
	white-space: nowrap;
}

/* Chat Rooms directory page */
.chatmate-rooms-directory {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.chatmate-room-rules-card {
	border: 1px solid var(--chatmate-accent-border);
	background: linear-gradient(180deg, var(--chatmate-accent-soft) 0%, var(--chatmate-bg) 45%);
}

.chatmate-room-rules-content ul {
	margin: 0;
	padding-left: 1.15rem;
}

.chatmate-room-rules-content li {
	margin-bottom: 0.45rem;
	line-height: 1.5;
}

.chatmate-room-rules-content li:last-child {
	margin-bottom: 0;
}

/* Room grid (shared by directory page + embedded switcher) */
.chatmate-room-grid-embed {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.chatmate-room-grid-title {
	color: var(--chatmate-accent, inherit);
}

.chatmate-room-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.85rem;
}

.chatmate-room-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
	text-align: left;
	width: 100%;
	padding: 0.9rem 1rem;
	border-radius: calc(var(--chatmate-radius) - 4px);
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.chatmate-room-card:hover,
.chatmate-room-card:focus-visible {
	border-color: color-mix(in srgb, var(--chatmate-accent) 40%, transparent);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--chatmate-accent) 12%, transparent);
	transform: translateY(-1px);
	outline: none;
}

.chatmate-room-card.is-active-room {
	border-color: var(--chatmate-accent);
	background: color-mix(in srgb, var(--chatmate-accent) 6%, #ffffff);
}

.chatmate-room-card-badge {
	align-self: flex-start;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--chatmate-accent);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.chatmate-room-card-title {
	font-size: 1.02rem;
	font-weight: 700;
	color: inherit;
}

.chatmate-room-card-desc {
	font-size: 0.85rem;
	color: #64748b;
	line-height: 1.4;
}

.chatmate-room-card-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.15rem;
}

.chatmate-room-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #475569;
}

.chatmate-room-stat-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #22c55e;
	flex-shrink: 0;
}

.chatmate-room-stat--live .chatmate-room-stat-dot {
	background: #cbd5e1;
}

.chatmate-room-stat-dot--live {
	background: #ef4444 !important;
	animation: chatmate-live-pulse 1.6s ease-in-out infinite;
}

@keyframes chatmate-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.chatmate-room-stat--live.is-live {
	color: #dc2626;
}

/* Room join/leave modal */
.chatmate-room-modal {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(15, 23, 42, 0.55);
}

.chatmate-room-modal[hidden] {
	display: none !important;
}

.chatmate-room-modal-card {
	position: relative;
	width: min(100%, 440px);
	padding: 1.5rem;
	border-radius: var(--chatmate-radius);
	background: #fff;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.chatmate-room-modal-close {
	position: absolute;
	top: 0.65rem;
	right: 0.75rem;
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #64748b;
	padding: 0.25rem;
}

.chatmate-room-modal-close:hover,
.chatmate-room-modal-close:focus-visible {
	color: #0f172a;
}

.chatmate-room-modal-title {
	margin: 0 1.5rem 0.35rem 0;
	color: var(--chatmate-accent, inherit);
}

.chatmate-room-modal-desc {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: #475569;
}

.chatmate-room-modal-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.chatmate-room-modal-note {
	margin: 0 0 1rem;
	padding: 0.55rem 0.75rem;
	border-radius: calc(var(--chatmate-radius) - 6px);
	background: color-mix(in srgb, var(--chatmate-accent) 10%, #f8fafc);
	border: 1px solid color-mix(in srgb, var(--chatmate-accent) 20%, transparent);
	font-size: 0.85rem;
	color: #334155;
}

.chatmate-room-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

@media (max-width: 767.98px) {
	.chatmate-room-cards {
		grid-template-columns: 1fr;
	}

	.chatmate-room-modal-card {
		width: 100%;
	}

	/*
	 * The room title rendering one character per line, straight down the
	 * page, traced back to a `width: 100%` header-actions rule combined with
	 * the host CommunityQ theme forcing `flex-wrap: nowrap` on the header
	 * below 768px via a class ChatMate's markup used to share with it --
	 * a 100%-wide item in a nowrap flex row starves its `flex: 1 1 0%;
	 * min-width: 0` sibling down to literally 0px. That specific collision
	 * can no longer happen at all: `.chatmate-chat-header` is a name only
	 * ChatMate's own CSS knows, so no other plugin's stylesheet can force
	 * `nowrap` onto it regardless of what class names it uses internally,
	 * and the base rule above this media query already sets `flex-wrap:
	 * wrap` unconditionally. The three rules below are now redundant with
	 * that base rule rather than a fix for a live collision -- left in place
	 * as cheap, harmless belt-and-braces rather than removed on the strength
	 * of reasoning alone.
	 */
	.chatmate-app.chatmate-rooms .chatmate-chat-header {
		flex-wrap: wrap;
	}

	.chatmate-app.chatmate-rooms .chatmate-chat-header .chatmate-chat-header-info {
		flex: 1 1 100%;
		min-width: 0;
	}

	.chatmate-app.chatmate-rooms .chatmate-room-header-actions {
		width: auto;
		justify-content: flex-start;
	}
}