/*
 * MeowBot — compact fixed center-right widget
 *
 * The launcher stays at center-right on desktop and mobile.
 * The compact panel always opens to the launcher's left.
 */

#meowbot-root {
	--mb-accent: #14b8a6;
	--mb-bg: #0b1625;
	--mb-surface: #142236;
	--mb-text: #f8fafc;
	--mb-muted: #aab8cc;
	--mb-link: #67e8f9;
	--mb-header-end: #3730a3;

	--mb-right-gap: 26px;
	--mb-mobile-right-gap: 20px;

	--mb-launcher-size: 54px;
	--mb-image-size: 44px;
	--mb-fallback-icon-size: 25px;
	--mb-launcher-opacity: .8;

	--mb-panel-width: 286px;
	--mb-panel-max-height: 356px;
	--mb-messages-height: 220px;
	--mb-panel-radius: 15px;
	--mb-border-width: 2px;

	/*
	 * Negative value creates a small visual overlap with the neon glow.
	 */
	--mb-panel-launcher-gap: -3px;

	--mb-base-font-size: 13px;
	--mb-agent-font-size: 14px;
	--mb-subtitle-font-size: 10px;
	--mb-message-font-size: 13px;
	--mb-result-font-size: 12px;

	--mb-icon-neon-speed: 1.35s;
	--mb-panel-neon-speed: 2.5s;
	--mb-ripple-speed: 2.25s;
	--mb-ripple-scale: 1.62;

	--mb-label-size: 11px;
	--mb-label-color: #fff;
	--mb-label-bg: #142236;

	--mb-greeting-size: 12px;
	--mb-greeting-color: #fff;
	--mb-greeting-bg: #142236;

	position: fixed !important;
	top: 50% !important;
	right: var(--mb-right-gap) !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 2147483646 !important;

	display: block !important;
	width: var(--mb-launcher-size) !important;
	height: var(--mb-launcher-size) !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;

	border: 0;
	color: var(--mb-text);
	background: transparent;
	font:
		var(--mb-base-font-size)/1.4 system-ui,
		-apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;

	opacity: 1 !important;
	visibility: visible !important;
	transform: translate3d(0, -50%, 0) !important;
	pointer-events: none;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

#meowbot-root,
#meowbot-root *,
#meowbot-root *::before,
#meowbot-root *::after {
	box-sizing: border-box;
}

#meowbot-root button,
#meowbot-root input {
	font-family: inherit;
}

/* =========================================================
   Accessibility
   ========================================================= */

#meowbot-root .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================================================
   Launcher wrapper
   ========================================================= */

#meowbot-root .mb-launcher-wrap,
#meowbot-root.mb-open .mb-launcher-wrap {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 10;

	display: grid !important;
	place-items: center;
	width: var(--mb-launcher-size) !important;
	height: var(--mb-launcher-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;

	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto !important;
}

#meowbot-root.mb-open .mb-launcher-label,
#meowbot-root.mb-open .mb-greeting {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* =========================================================
   Launcher
   ========================================================= */

#meowbot-root .mb-launcher,
#meowbot-root.mb-open .mb-launcher {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 2;

	display: grid !important;
	place-items: center;
	width: var(--mb-launcher-size) !important;
	height: var(--mb-launcher-size) !important;
	min-width: var(--mb-launcher-size) !important;
	min-height: var(--mb-launcher-size) !important;
	max-width: var(--mb-launcher-size) !important;
	max-height: var(--mb-launcher-size) !important;
	margin: 0 !important;
	padding: 3px !important;
	overflow: visible !important;

	border: var(--mb-border-width) solid transparent;
	border-radius: 50%;
	color: #fff;
	background:
		linear-gradient(
			rgba(9, 20, 35, .94),
			rgba(9, 20, 35, .94)
		) padding-box,
		linear-gradient(
			90deg,
			#22d3ee,
			#8b5cf6,
			#ec4899,
			#f59e0b,
			#34d399,
			#22d3ee
		) border-box;
	background-size: 100% 100%, 300% 100%;
	background-position: 0 0, 0 50%;
	box-shadow:
		0 0 7px rgba(34, 211, 238, .58),
		0 0 15px rgba(139, 92, 246, .28);

	opacity: var(--mb-launcher-opacity);
	visibility: visible !important;
	transform: none !important;
	cursor: pointer;
	pointer-events: auto !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;

	animation:
		mb-icon-neon
		var(--mb-icon-neon-speed)
		linear infinite;

	transition:
		opacity .15s ease,
		box-shadow .15s ease;
}

#meowbot-root .mb-launcher::before,
#meowbot-root .mb-launcher::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--mb-launcher-size);
	height: var(--mb-launcher-size);
	border:
		var(--mb-border-width)
		solid rgba(34, 211, 238, .72);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.9);
	transform-origin: center;

	animation:
		mb-ripple
		var(--mb-ripple-speed)
		cubic-bezier(.16, .72, .34, 1)
		infinite;
}

#meowbot-root .mb-launcher::after {
	border-color: rgba(167, 139, 250, .66);
	animation-delay:
		calc(var(--mb-ripple-speed) / 2);
}

#meowbot-root .mb-launcher:hover,
#meowbot-root .mb-launcher:focus-visible,
#meowbot-root.mb-open .mb-launcher {
	opacity: 1;
	box-shadow:
		0 0 10px rgba(34, 211, 238, .9),
		0 0 22px rgba(139, 92, 246, .5);
}

#meowbot-root .mb-launcher img {
	position: relative;
	z-index: 2;
	display: block;
	width: var(--mb-image-size);
	height: var(--mb-image-size);
	max-width: calc(var(--mb-launcher-size) - 8px);
	max-height: calc(var(--mb-launcher-size) - 8px);
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .78);
	border-radius: 50%;
	object-fit: cover;
}

#meowbot-root .mb-launcher svg {
	position: relative;
	z-index: 2;
	display: block;
	width: var(--mb-fallback-icon-size);
	height: var(--mb-fallback-icon-size);
	max-width: calc(var(--mb-launcher-size) - 12px);
	max-height: calc(var(--mb-launcher-size) - 12px);
	fill: currentColor;
}

/* =========================================================
   Launcher label
   ========================================================= */

#meowbot-root .mb-launcher-label {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	z-index: 4;

	display: block;
	width: max-content;
	max-width: min(180px, calc(100vw - 24px));
	margin: 0;
	padding: 4px 9px;
	overflow: hidden;

	border: 1px solid rgba(103, 232, 249, .32);
	border-radius: 999px;
	color: var(--mb-label-color);
	background: var(--mb-label-bg);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, .25),
		0 0 8px rgba(34, 211, 238, .2);

	font-size: var(--mb-label-size);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;

	pointer-events: none;
	opacity: var(--mb-launcher-opacity);
	visibility: visible;
	transform: translateX(-50%);

	animation:
		mb-label-attract
		2.8s ease-in-out infinite;
}

#meowbot-root .mb-curved-label {
	display: none !important;
}

#meowbot-root.mb-no-label-animation
	.mb-launcher-label {
	animation: none;
}

/* =========================================================
   Visitor greeting
   ========================================================= */

#meowbot-root .mb-greeting {
	position: absolute;
	top: 50%;
	right: calc(var(--mb-launcher-size) + 10px);
	z-index: 6;

	width: max-content;
	max-width: min(220px, calc(100vw - 110px));
	margin: 0;
	padding: 8px 11px;

	border: 1px solid rgba(103, 232, 249, .32);
	border-radius: 12px 12px 4px 12px;
	color: var(--mb-greeting-color);
	background: var(--mb-greeting-bg);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, .28),
		0 0 10px rgba(34, 211, 238, .18);

	font:
		600 var(--mb-greeting-size)/1.35
		system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-align: left;

	cursor: pointer;
	pointer-events: none;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;

	opacity: 0;
	visibility: hidden;
	transform: translate(8px, -50%);

	transition:
		opacity .18s ease,
		transform .18s ease,
		visibility .18s;
}

#meowbot-root .mb-greeting::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -6px;
	width: 11px;
	height: 11px;
	border-top:
		1px solid rgba(103, 232, 249, .32);
	border-right:
		1px solid rgba(103, 232, 249, .32);
	background: var(--mb-greeting-bg);
	transform:
		translateY(-50%)
		rotate(45deg);
}

#meowbot-root .mb-greeting-visible {
	opacity: var(--mb-launcher-opacity);
	visibility: visible;
	pointer-events: auto;
	transform: translate(0, -50%);
}

#meowbot-root .mb-greeting:hover,
#meowbot-root .mb-greeting:focus-visible {
	opacity: 1;
}

/* =========================================================
   Animation switches
   ========================================================= */

#meowbot-root.mb-no-neon .mb-launcher,
#meowbot-root.mb-no-neon .mb-panel {
	animation: none;
}

#meowbot-root.mb-no-ripple
	.mb-launcher::before,
#meowbot-root.mb-no-ripple
	.mb-launcher::after {
	display: none;
}

/* =========================================================
   Compact panel — always opens left
   ========================================================= */

#meowbot-root .mb-panel,
#meowbot-root.mb-open .mb-panel {
	position: absolute !important;
	top: 50% !important;

	/*
	 * The panel's right edge is anchored to the root's left edge.
	 * With a -3px gap, the panel overlaps the launcher glow slightly.
	 */
	right:
		calc(
			100% +
			var(--mb-panel-launcher-gap)
		) !important;

	bottom: auto !important;
	left: auto !important;
	z-index: 5;

	display: block;
	width: min(
		var(--mb-panel-width),
		calc(
			100vw -
			var(--mb-right-gap) -
			var(--mb-launcher-size) -
			8px
		)
	) !important;
	max-width: calc(
		100vw -
			var(--mb-right-gap) -
			var(--mb-launcher-size) -
			8px
	) !important;

	height: auto !important;
	max-height: min(
		var(--mb-panel-max-height),
		calc(100dvh - 24px)
	) !important;

	margin: 0 !important;
	padding: var(--mb-border-width);
	overflow: hidden;

	border: var(--mb-border-width) solid transparent;
	border-radius: var(--mb-panel-radius);
	color: var(--mb-text);
	background:
		linear-gradient(
			var(--mb-bg),
			var(--mb-bg)
		) padding-box,
		linear-gradient(
			90deg,
			#22d3ee,
			#8b5cf6,
			#ec4899,
			#f59e0b,
			#34d399,
			#22d3ee
		) border-box;
	background-size: 100% 100%, 300% 100%;
	background-position: 0 0, 0 50%;
	box-shadow:
		0 12px 34px rgba(0, 0, 0, .42),
		0 0 12px rgba(34, 211, 238, .2);

	transform-origin: right center !important;

	animation:
		mb-panel-neon
		var(--mb-panel-neon-speed)
		linear infinite;
}

#meowbot-root .mb-panel {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform:
		translate3d(6px, -50%, 0) !important;

	transition:
		opacity .14s ease,
		visibility .14s ease,
		transform .14s ease;
}

#meowbot-root.mb-open .mb-panel {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform:
		translate3d(0, -50%, 0) !important;
}

/* =========================================================
   Panel header
   ========================================================= */

#meowbot-root .mb-header {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	min-height: 50px;
	margin: 0;
	padding: 7px 9px;

	border-radius:
		max(
			0px,
			calc(
				var(--mb-panel-radius) -
				var(--mb-border-width)
			)
		)
		max(
			0px,
			calc(
				var(--mb-panel-radius) -
				var(--mb-border-width)
			)
		)
		0 0;

	color: #fff;
	background:
		linear-gradient(
			115deg,
			var(--mb-accent),
			#0e7490,
			var(--mb-header-end)
		);
}

#meowbot-root .mb-avatar {
	display: grid;
	flex: 0 0 32px;
	place-items: center;
	width: 32px;
	height: 32px;
	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, .82);
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	font-size: 15px;
}

#meowbot-root .mb-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

#meowbot-root .mb-title {
	flex: 1;
	min-width: 0;
}

#meowbot-root .mb-title strong,
#meowbot-root .mb-title small {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#meowbot-root .mb-title strong {
	font-size: var(--mb-agent-font-size);
	line-height: 1.15;
}

#meowbot-root .mb-title small {
	margin-top: 1px;
	color: inherit;
	font-size: var(--mb-subtitle-font-size);
	line-height: 1.2;
	opacity: .9;
}

#meowbot-root .mb-close {
	display: grid;
	flex: 0 0 28px;
	place-items: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	margin: 0;
	padding: 0;

	border:
		1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	color: #fff;
	background: rgba(0, 0, 0, .18);

	font: 18px/1 system-ui, sans-serif;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease;
}

#meowbot-root .mb-close:hover {
	color: #fff;
	background: rgba(0, 0, 0, .34);
}

/* =========================================================
   Messages
   ========================================================= */

#meowbot-root .mb-messages {
	height: min(
		var(--mb-messages-height),
		calc(100dvh - 120px)
	) !important;
	min-height: 0;
	max-height: min(
		var(--mb-messages-height),
		calc(100dvh - 120px)
	) !important;
	margin: 0;
	padding: 8px;
	overflow-x: hidden;
	overflow-y: auto;

	color: var(--mb-text);
	background: var(--mb-bg);

	scrollbar-width: thin;
	scrollbar-color:
		rgba(103, 232, 249, .46)
		transparent;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

#meowbot-root .mb-messages::-webkit-scrollbar {
	width: 5px;
}

#meowbot-root .mb-messages::-webkit-scrollbar-track {
	background: transparent;
}

#meowbot-root .mb-messages::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: rgba(103, 232, 249, .46);
}

#meowbot-root .mb-message {
	width: fit-content;
	max-width: 92%;
	margin: 0 0 7px;
	padding: 7px 9px;
	overflow-wrap: anywhere;

	border:
		1px solid rgba(148, 163, 184, .16);
	border-radius: 10px;
	color: var(--mb-text);
	background: var(--mb-surface);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, .15);

	font-size: var(--mb-message-font-size);
	line-height: 1.38;
}

#meowbot-root .mb-message:last-child {
	margin-bottom: 0;
}

#meowbot-root .mb-message-user {
	margin-left: auto;
	border-color: transparent;
	border-bottom-right-radius: 3px;
	color: #fff;
	background: var(--mb-accent);
}

#meowbot-root .mb-message-bot {
	border-bottom-left-radius: 3px;
}

/* =========================================================
   Search results
   ========================================================= */

#meowbot-root .mb-results {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

#meowbot-root .mb-results li {
	margin: 0;
	padding: 0;
}

#meowbot-root .mb-results li + li {
	margin-top: 6px;
	padding-top: 6px;
	border-top:
		1px solid rgba(148, 163, 184, .18);
}

#meowbot-root .mb-results a,
#meowbot-root .mb-results a:link,
#meowbot-root .mb-results a:visited {
	display: inline;
	margin: 0 -3px;
	padding: 1px 3px;

	border-radius: 4px;
	color: var(--mb-link) !important;
	background: transparent !important;
	-webkit-text-fill-color: var(--mb-link);

	font-size: var(--mb-result-font-size);
	font-weight: 700;
	text-decoration: none !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;

	transition:
		color .14s ease,
		background-color .14s ease,
		text-shadow .14s ease;
}

#meowbot-root .mb-results a:hover,
#meowbot-root .mb-results a:focus,
#meowbot-root .mb-results a:focus-visible,
#meowbot-root .mb-results a:active {
	color: #fff !important;
	background-color:
		rgba(34, 211, 238, .16) !important;
	-webkit-text-fill-color: #fff;
	text-decoration: underline !important;
	text-decoration-color:
		var(--mb-link) !important;
	text-shadow:
		0 0 5px rgba(34, 211, 238, .9),
		0 0 10px rgba(139, 92, 246, .5);
}

#meowbot-root .mb-results a:focus-visible {
	outline: 2px solid var(--mb-link);
	outline-offset: 2px;
}

#meowbot-root .mb-results small {
	display: block;
	margin-top: 2px;
	color: var(--mb-muted);
	font-size:
		calc(var(--mb-result-font-size) - 1.5px);
	line-height: 1.35;
}

/* =========================================================
   Input
   ========================================================= */

#meowbot-root .mb-form {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 7px;

	border-top:
		1px solid rgba(148, 163, 184, .15);

	border-radius:
		0 0
		max(
			0px,
			calc(
				var(--mb-panel-radius) -
				var(--mb-border-width)
			)
		)
		max(
			0px,
			calc(
				var(--mb-panel-radius) -
				var(--mb-border-width)
			)
		);

	background: var(--mb-bg);
}

#meowbot-root .mb-form input {
	flex: 1;
	min-width: 0;
	width: auto;
	height: 34px;
	min-height: 34px;
	margin: 0;
	padding: 0 9px;

	border:
		1px solid rgba(103, 232, 249, .38);
	border-radius: 9px;
	outline: 0;
	color: var(--mb-text);
	background: rgba(255, 255, 255, .07);

	font:
		calc(var(--mb-base-font-size) - 1px)/1
		system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", sans-serif;

	-webkit-appearance: none;
	appearance: none;
}

#meowbot-root .mb-form input::placeholder {
	color: var(--mb-muted);
	opacity: 1;
}

#meowbot-root .mb-form input:focus {
	border-color: var(--mb-link);
	box-shadow:
		0 0 0 2px rgba(34, 211, 238, .13);
}

#meowbot-root .mb-send {
	display: grid;
	flex: 0 0 35px;
	place-items: center;
	width: 35px;
	height: 34px;
	min-width: 35px;
	min-height: 34px;
	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 9px;
	color: #fff;
	background: var(--mb-accent);

	font-size: 15px;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
	transition: filter .15s ease;
}

#meowbot-root .mb-send:hover {
	color: #fff;
	background: var(--mb-accent);
	filter: brightness(1.12);
}

#meowbot-root .mb-send:disabled {
	opacity: .55;
	cursor: wait;
}

/* =========================================================
   Focus
   ========================================================= */

#meowbot-root .mb-launcher:focus-visible,
#meowbot-root .mb-greeting:focus-visible,
#meowbot-root .mb-close:focus-visible,
#meowbot-root .mb-send:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* =========================================================
   Animations
   ========================================================= */

@keyframes mb-icon-neon {
	from {
		background-position: 0 0, 0% 50%;
	}

	to {
		background-position: 0 0, 100% 50%;
	}
}

@keyframes mb-ripple {
	0% {
		transform:
			translate(-50%, -50%) scale(.88);
		opacity: 0;
	}

	12% {
		opacity: .72;
	}

	75%,
	100% {
		transform:
			translate(-50%, -50%)
			scale(var(--mb-ripple-scale));
		opacity: 0;
	}
}

@keyframes mb-panel-neon {
	from {
		background-position: 0 0, 0% 50%;
	}

	to {
		background-position: 0 0, 100% 50%;
	}
}

@keyframes mb-label-attract {
	0%,
	100% {
		opacity:
			calc(var(--mb-launcher-opacity) * .8);
		text-shadow: none;
	}

	50% {
		opacity: 1;
		text-shadow:
			0 0 6px rgba(103, 232, 249, .65);
	}
}

/* =========================================================
   Desktop visibility
   ========================================================= */

@media screen and (min-width: 601px) {
	#meowbot-root.mb-hide-label-desktop
		.mb-launcher-label,
	#meowbot-root.mb-hide-greeting-desktop
		.mb-greeting {
		display: none !important;
	}
}

/* =========================================================
   Mobile
   ========================================================= */

@media screen and (max-width: 600px) {
	html body #meowbot-root {
		--mb-panel-width: 250px;
		--mb-panel-max-height: 330px;
		--mb-messages-height: 190px;
		--mb-panel-launcher-gap: -3px;

		position: fixed !important;
		top: 50% !important;
		right:
			var(--mb-mobile-right-gap) !important;
		bottom: auto !important;
		left: auto !important;
		transform:
			translate3d(0, -50%, 0) !important;
	}

	#meowbot-root.mb-hide-label-mobile
		.mb-launcher-label,
	#meowbot-root.mb-hide-greeting-mobile
		.mb-greeting {
		display: none !important;
	}

	#meowbot-root .mb-launcher-label {
		top: calc(100% + 6px);
		max-width:
			min(145px, calc(100vw - 20px));
		padding: 3px 7px;
	}

	#meowbot-root .mb-greeting {
		right:
			calc(var(--mb-launcher-size) + 8px);
		max-width:
			min(180px, calc(100vw - 94px));
		padding: 7px 9px;
	}

	html body #meowbot-root .mb-panel,
	html body #meowbot-root.mb-open .mb-panel {
		position: absolute !important;
		top: 50% !important;

		right:
			calc(
				100% +
				var(--mb-panel-launcher-gap)
			) !important;

		bottom: auto !important;
		left: auto !important;

		width: min(
			var(--mb-panel-width),
			calc(
				100vw -
					var(--mb-mobile-right-gap) -
					var(--mb-launcher-size) -
					6px
			)
		) !important;

		max-width: calc(
			100vw -
				var(--mb-mobile-right-gap) -
				var(--mb-launcher-size) -
				6px
		) !important;

		max-height: min(
			var(--mb-panel-max-height),
			calc(100dvh - 16px)
		) !important;

		transform-origin:
			right center !important;
	}

	html body #meowbot-root .mb-panel {
		transform:
			translate3d(6px, -50%, 0) !important;
	}

	html body #meowbot-root.mb-open .mb-panel {
		transform:
			translate3d(0, -50%, 0) !important;
	}

	html body #meowbot-root .mb-messages {
		height: min(
			var(--mb-messages-height),
			calc(100dvh - 120px)
		) !important;

		max-height: min(
			var(--mb-messages-height),
			calc(100dvh - 120px)
		) !important;
	}
}

/* =========================================================
   Narrow phones
   ========================================================= */

@media screen and (max-width: 380px) {
	html body #meowbot-root {
		--mb-mobile-right-gap: 10px;
		--mb-launcher-size: 48px;
		--mb-image-size: 39px;
		--mb-panel-width: 224px;
		--mb-panel-max-height: 310px;
		--mb-messages-height: 175px;
		--mb-panel-launcher-gap: -3px;
	}

	#meowbot-root .mb-greeting,
	#meowbot-root .mb-launcher-label {
		display: none !important;
	}
}

/* =========================================================
   Viewport fallback
   ========================================================= */

@supports not (height: 100dvh) {
	#meowbot-root .mb-panel {
		max-height: min(
			var(--mb-panel-max-height),
			calc(100vh - 24px)
		) !important;
	}

	#meowbot-root .mb-messages {
		height: min(
			var(--mb-messages-height),
			calc(100vh - 120px)
		) !important;

		max-height: min(
			var(--mb-messages-height),
			calc(100vh - 120px)
		) !important;
	}

	@media screen and (max-width: 600px) {
		html body #meowbot-root .mb-panel {
			max-height: min(
				var(--mb-panel-max-height),
				calc(100vh - 16px)
			) !important;
		}

		html body #meowbot-root .mb-messages {
			height: min(
				var(--mb-messages-height),
				calc(100vh - 120px)
			) !important;

			max-height: min(
				var(--mb-messages-height),
				calc(100vh - 120px)
			) !important;
		}
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	#meowbot-root .mb-launcher,
	#meowbot-root .mb-launcher::before,
	#meowbot-root .mb-launcher::after,
	#meowbot-root .mb-launcher-label,
	#meowbot-root .mb-panel {
		animation: none !important;
	}

	#meowbot-root .mb-launcher,
	#meowbot-root .mb-greeting,
	#meowbot-root .mb-panel,
	#meowbot-root .mb-close,
	#meowbot-root .mb-send,
	#meowbot-root .mb-results a {
		transition: none !important;
	}
}

/* =========================================================
   Final non-negotiable left-opening lock
   Keep this block at the absolute end of the file.
   ========================================================= */

html body #meowbot-root {
	position: fixed !important;
	top: 50% !important;
	right: var(--mb-right-gap, 26px) !important;
	bottom: auto !important;
	left: auto !important;
	transform: translate3d(0, -50%, 0) !important;
}

html body #meowbot-root .mb-panel,
html body #meowbot-root.mb-open .mb-panel {
	position: absolute !important;
	top: 50% !important;
	right: calc(
		100% +
		var(--mb-panel-launcher-gap, -3px)
	) !important;
	bottom: auto !important;
	left: auto !important;
}

html body #meowbot-root .mb-panel {
	transform:
		translate3d(6px, -50%, 0) !important;
}

html body #meowbot-root.mb-open .mb-panel {
	transform:
		translate3d(0, -50%, 0) !important;
}

@media screen and (max-width: 600px) {
	html body #meowbot-root {
		right:
			var(--mb-mobile-right-gap, 20px) !important;
	}

	html body #meowbot-root .mb-panel,
	html body #meowbot-root.mb-open .mb-panel {
		right: calc(
			100% +
			var(--mb-panel-launcher-gap, -3px)
		) !important;
		left: auto !important;
	}
}

/* =========================================================
   DEFINITIVE MOBILE LEFT-SIDE OVERRIDE
   This must be the final block in meowbot.css.
   ========================================================= */

@media screen and (max-width: 600px) {
	/*
	 * Launcher: fixed center-right.
	 */
	html body #meowbot-root,
	html body aside#meowbot-root,
	html body div#meowbot-root {
		position: fixed !important;
		top: 50% !important;
		right: 20px !important;
		bottom: auto !important;
		left: auto !important;

		width: 54px !important;
		height: 54px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;

		transform: translate3d(0, -50%, 0) !important;
		z-index: 2147483646 !important;
	}

	/*
	 * Panel: fixed to the viewport.
	 *
	 * The launcher starts 20px from the right and is 54px wide.
	 * Setting panel right to 71px places its right edge 3px inside
	 * the launcher's left edge:
	 *
	 * 20px + 54px - 3px = 71px
	 */
	html body #meowbot-root .mb-panel,
	html body #meowbot-root.mb-open .mb-panel {
		position: fixed !important;
		top: 50% !important;
		right: 71px !important;
		bottom: auto !important;
		left: auto !important;

		width: min(
			250px,
			calc(100vw - 77px)
		) !important;
		max-width: calc(100vw - 77px) !important;

		height: auto !important;
		max-height: min(
			330px,
			calc(100dvh - 16px)
		) !important;

		margin: 0 !important;
		transform-origin: right center !important;
	}

	html body #meowbot-root .mb-panel {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform:
			translate3d(5px, -50%, 0) !important;
	}

	html body #meowbot-root.mb-open .mb-panel {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform:
			translate3d(0, -50%, 0) !important;
	}

	html body #meowbot-root .mb-messages {
		height: min(
			190px,
			calc(100dvh - 120px)
		) !important;
		max-height: min(
			190px,
			calc(100dvh - 120px)
		) !important;
	}
}

/* Narrow phones using a 48px launcher and 10px right gap. */
@media screen and (max-width: 380px) {
	html body #meowbot-root,
	html body aside#meowbot-root,
	html body div#meowbot-root {
		right: 10px !important;
		width: 48px !important;
		height: 48px !important;
	}

	/*
	 * 10px right gap + 48px launcher - 3px overlap = 55px.
	 */
	html body #meowbot-root .mb-panel,
	html body #meowbot-root.mb-open .mb-panel {
		right: 55px !important;
		left: auto !important;

		width: min(
			224px,
			calc(100vw - 61px)
		) !important;
		max-width: calc(100vw - 61px) !important;

		max-height: min(
			310px,
			calc(100dvh - 12px)
		) !important;
	}

	html body #meowbot-root .mb-messages {
		height: min(
			175px,
			calc(100dvh - 116px)
		) !important;
		max-height: min(
			175px,
			calc(100dvh - 116px)
		) !important;
	}
}

/* Older mobile-browser fallback. */
@supports not (height: 100dvh) {
	@media screen and (max-width: 600px) {
		html body #meowbot-root .mb-panel,
		html body #meowbot-root.mb-open .mb-panel {
			max-height: min(
				330px,
				calc(100vh - 16px)
			) !important;
		}

		html body #meowbot-root .mb-messages {
			height: min(
				190px,
				calc(100vh - 120px)
			) !important;
			max-height: min(
				190px,
				calc(100vh - 120px)
			) !important;
		}
	}
}