.mks-ai-root {
	--mks-ai-primary: #8222ee;
	--mks-ai-accent: #ffd400;
	position: fixed;
	left: 50%;
	top: calc(env(safe-area-inset-top, 0px) + 12px);
	bottom: auto;
	transform: translateX(-50%);
	z-index: 999999;
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1d1730;
}

body.admin-bar .mks-ai-root { top: calc(env(safe-area-inset-top, 0px) + 44px); }

#masthead { position: relative; }

.mks-ai-header-slot {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1002;
}

.mks-ai-header-slot.is-after-logo {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	display: inline-flex;
	align-items: center;
	margin-inline-start: 12px;
	z-index: 1002;
}

.mks-ai-root.is-header-mounted,
body.admin-bar .mks-ai-root.is-header-mounted {
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	transform: none;
	z-index: 1002;
}

.mks-ai-launch {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 0;
	border-radius: 999px;
	background: var(--mks-ai-primary);
	color: var(--mks-ai-launch-text, #fff);
	padding: 9px 14px;
	font-size: 13px;
	line-height: 1.2;
	box-shadow: 0 7px 22px #45107a4a;
	cursor: pointer;
}

.mks-ai-launch > span {
	color: currentColor;
	font-size: 16px;
}

.mks-ai-launch:hover,
.mks-ai-launch:focus-visible {
	background: var(--mks-ai-launch-hover, #6819c2);
	color: var(--mks-ai-launch-hover-text, #fff);
	box-shadow: 0 10px 26px #35105e66;
	transform: translateY(-1px);
}

.mks-ai-launch:focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 3px;
}

.mks-ai-launch-mobile,
.mks-ai-launch-compact { display: none; }

.mks-ai-panel {
	position: absolute;
	left: 50%;
	top: 50px;
	right: auto;
	bottom: auto;
	transform: translateX(-50%);
	width: min(780px, calc(100vw - 28px));
	height: min(650px, calc(100vh - 92px));
	background: #fff;
	border: 1px solid #dfd5eb;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px #35105e40;
	display: flex;
	flex-direction: column;
}

.mks-ai-panel[hidden] { display: none; }

.mks-ai-panel header {
	position: relative;
	background: var(--mks-ai-primary);
	color: #fff;
	padding: 8px 12px;
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

.mks-ai-panel header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--mks-ai-accent);
}

.mks-ai-panel header div { display: flex; flex-direction: column; }
.mks-ai-panel header strong { font-size: 15px; line-height: 1.15; }
.mks-ai-panel header small { margin-top: 1px; color: #fff2a6; font-size: 11px; line-height: 1.1; }

.mks-ai-close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 23px;
	line-height: 1;
	padding: 3px 4px;
	cursor: pointer;
}

.mks-ai-messages { padding: 14px; flex: 1; overflow: auto; background: #f8f5fc; }
.mks-ai-message { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 12px; }
.mks-ai-message p { white-space: pre-wrap; margin: 0; max-width: 87%; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px #35105e1c; }
.mks-ai-message.is-user { align-items: flex-end; }
.mks-ai-message.is-user p { background: var(--mks-ai-primary); color: #fff; }
.mks-ai-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mks-ai-links a { max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; border: 1px solid var(--mks-ai-primary); color: var(--mks-ai-primary); background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.mks-ai-links a:hover, .mks-ai-links a:focus { background: #f3e9ff; }
.mks-ai-suggestions { display: flex; gap: 5px; padding: 7px 10px; overflow-x: auto; border-top: 1px solid #eadff5; scrollbar-width: thin; }
.mks-ai-suggestions[hidden] { display: none; }
.mks-ai-suggestions button { flex: 0 0 auto; white-space: nowrap; border: 0; border-radius: 999px; padding: 5px 9px; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.25; box-shadow: 0 2px 7px #35105e24; cursor: pointer; background: linear-gradient(135deg,#8222ee,#b65cff); }
.mks-ai-suggestions button:nth-child(2) { background: linear-gradient(135deg,#ef8b10,#ffd400); color: #2b1d00; }
.mks-ai-suggestions button:nth-child(3) { background: linear-gradient(135deg,#1559c5,#00a8e8); }
.mks-ai-suggestions button:nth-child(4) { background: linear-gradient(135deg,#7a1fa2,#d63ebc); }
.mks-ai-suggestions button:nth-child(5) { background: linear-gradient(135deg,#d9382e,#ff7043); }
.mks-ai-suggestions button:nth-child(6) { background: linear-gradient(135deg,#0d7a42,#21b66f); }
.mks-ai-suggestions button:nth-child(7) { background: linear-gradient(135deg,#006e8a,#00b7c7); }
.mks-ai-suggestions button:nth-child(8) { background: linear-gradient(135deg,#e04a91,#ff82bd); }
.mks-ai-suggestions button:nth-child(9) { background: linear-gradient(135deg,#5142a6,#8978e8); }
.mks-ai-suggestions button:hover, .mks-ai-suggestions button:focus { transform: translateY(-1px); filter: brightness(1.04); }
.mks-ai-compose { display: flex; gap: 8px; padding: 9px 12px; border-top: 1px solid #eadff5; }
.mks-ai-compose textarea { resize: none; flex: 1; min-height: 80px; max-height: 180px; border: 1px solid #d4c2e8; border-radius: 11px; padding: 9px 10px; }
.mks-ai-compose textarea:focus { border-color: var(--mks-ai-primary); outline: 2px solid #8222ee24; }
.mks-ai-compose button, .mks-ai-lead button[type=submit] { border: 0; border-radius: 10px; background: var(--mks-ai-primary); color: #fff; padding: 0 13px; cursor: pointer; }
.mks-ai-compose button { color: var(--mks-ai-accent); }
.mks-ai-whatsapp { margin: 0 12px 7px; padding: 9px; border-radius: 9px; text-align: center; text-decoration: none !important; background: #1fa855; color: #fff !important; font-weight: 700; }
.mks-ai-disclaimer { padding: 0 12px 8px; text-align: center; color: #766a85; font-size: 10px; }
.mks-ai-lead { padding: 13px; border-top: 1px solid #eadff5; background: #fff; }
.mks-ai-lead[hidden] { display: none; }
.mks-ai-lead p { margin: 4px 0 8px; }
.mks-ai-lead input[type=text], .mks-ai-lead input[type=tel] { width: 100%; box-sizing: border-box; margin: 4px 0; padding: 9px; border: 1px solid #d4c2e8; border-radius: 8px; }
.mks-ai-lead label { display: flex; gap: 7px; font-size: 11px; margin: 7px 0; }
.mks-ai-lead > div { display: flex; gap: 7px; }
.mks-ai-lead button { padding: 9px 10px; }
.mks-ai-not-now { border: 1px solid #d4c2e8; background: #fff; border-radius: 9px; }
.mks-ai-lead-error { color: #b42318 !important; }
.mks-ai-root.is-inline { position: relative; right: auto; bottom: auto; width: 100%; z-index: 1; }
.mks-ai-root.is-inline > .mks-ai-launch { display: none; }
.mks-ai-root.is-inline .mks-ai-panel { position: relative; right: auto; bottom: auto; width: 100%; height: 650px; }
.mks-ai-root.is-inline .mks-ai-close { display: none; }

@media (max-width: 1024px) {
	#mobile-header .site-header-row-container-inner,
	#mobile-header .site-container,
	#mobile-header .site-main-header-inner-wrap {
		min-height: 72px !important;
	}

	#mobile-header .site-container { padding-right: 14px; padding-left: 14px; }
	#mobile-header .site-main-header-inner-wrap {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 8px;
		position: relative;
	}
	#mobile-header .site-header-section {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		min-width: 0;
		width: auto !important;
	}
	#mobile-header .site-header-main-section-left { order: 1; }
	#mobile-header .mks-ai-header-slot {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		order: 4;
		margin-left: auto;
	}
	#mobile-header .mks-ai-header-slot.is-after-logo {
		margin-left: 8px;
		order: initial;
	}
	#mobile-header .mks-gre-lms-pwa-header-controls.is-inline {
		position: static !important;
		order: 2;
		flex: 0 0 112px;
		margin: 0 !important;
	}
	#mobile-header .site-header-main-section-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		order: 3;
		margin: 0;
	}
	#mobile-header .site-header-main-section-right { order: 5; }
	#mobile-header .site-branding a.brand img {
		width: auto;
		height: auto;
		max-width: 96px;
		max-height: 58px;
		object-fit: contain;
	}

	.mks-ai-launch { padding: 8px 12px; font-size: 12px; }
	.mks-ai-launch-desktop { display: none; }
	.mks-ai-launch-mobile { display: inline; }
}

@media (max-width: 600px) {
	#mobile-header .site-main-header-inner-wrap { gap: 5px; }
	#mobile-header .mks-gre-lms-pwa-header-controls.is-inline {
		flex-basis: 102px;
		width: 102px;
	}
	#mobile-header .site-branding a.brand img { max-width: 76px; max-height: 48px; }
	#mobile-header .mks-ai-launch {
		width: auto;
		height: 42px;
		justify-content: center;
		gap: 5px;
		padding: 0 10px;
		white-space: nowrap;
	}
	#mobile-header .gre-auth-header > .gre-lms-btn {
		min-width: 42px;
		width: 42px;
		height: 42px;
		min-height: 42px;
		padding: 0;
	}
	#mobile-header .gre-auth-header > .gre-lms-btn span { display: none; }
	#mobile-header .gre-auth-header-toggle { width: 42px; height: 42px; }
	#mobile-header .gre-auth-header-avatar { width: 38px; height: 38px; }
}

@media (max-width: 430px) {
	#mobile-header .mks-ai-launch { padding: 0 8px; }
	#mobile-header .mks-ai-launch-mobile { display: none; }
	#mobile-header .mks-ai-launch-compact { display: inline; }
}

@media (max-width: 520px) {
	.mks-ai-root:not(.is-inline) { left: 50%; top: calc(env(safe-area-inset-top, 0px) + 9px); right: auto; bottom: auto; }
	body.admin-bar .mks-ai-root:not(.is-inline) { top: calc(env(safe-area-inset-top, 0px) + 55px); }
	.mks-ai-root:not(.is-inline).is-open { inset: 0; width: 100%; transform: none; }
	.mks-ai-root.is-header-mounted:not(.is-inline),
	body.admin-bar .mks-ai-root.is-header-mounted:not(.is-inline) { left: auto; top: auto; right: auto; bottom: auto; transform: none; }
	.mks-ai-root.is-header-mounted:not(.is-inline).is-open { inset: auto; width: auto; transform: none; }
	.mks-ai-root:not(.is-inline).is-open .mks-ai-launch { display: none; }
	.mks-ai-root:not(.is-inline) .mks-ai-panel { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; transform: none; }
	.mks-ai-root:not(.is-inline) .mks-ai-panel header { padding-top: max(8px, env(safe-area-inset-top)); }
}
