.kmb-support,
.kmb-support * {
	box-sizing: border-box;
}

.kmb-support {
	bottom: 20px;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	position: fixed;
	right: 20px;
	z-index: 99990;
}

.kmb-support__launcher {
	align-items: center;
	background: linear-gradient(135deg, #0b1728, #102b42);
	border: 1px solid rgba(112, 199, 255, .48);
	border-radius: 999px;
	box-shadow: 0 16px 42px rgba(1, 7, 17, .34);
	color: #f2f8ff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 9px;
	min-height: 48px;
	padding: 7px 16px 7px 7px;
}

.kmb-support__launcher > span,
.kmb-support__brand > span {
	align-items: center;
	background: linear-gradient(145deg, #1f5374, #12334d);
	border: 1px solid rgba(116, 205, 255, .46);
	border-radius: 50%;
	color: #8fd2ff;
	display: inline-flex;
	font-size: 9px;
	font-weight: 900;
	height: 34px;
	justify-content: center;
	letter-spacing: .08em;
	width: 34px;
}

.kmb-support__launcher > b {
	font-size: 11px;
	letter-spacing: .02em;
}

.kmb-support__launcher:hover,
.kmb-support__launcher:focus-visible {
	border-color: #7fcfff;
	box-shadow: 0 18px 46px rgba(1, 7, 17, .4), 0 0 0 3px rgba(91, 185, 246, .12);
	outline: none;
}

.kmb-support__panel {
	background:
		radial-gradient(circle at 88% 5%, rgba(60, 188, 255, .16), transparent 35%),
		linear-gradient(155deg, #08111e, #0d1d2e);
	border: 1px solid rgba(116, 184, 235, .28);
	border-radius: 22px;
	bottom: 62px;
	box-shadow: 0 26px 72px rgba(0, 0, 0, .42);
	color: #edf6ff;
	display: grid;
	grid-template-rows: auto minmax(150px, 1fr) auto auto auto;
	max-height: min(660px, calc(100vh - 105px));
	overflow: hidden;
	position: absolute;
	right: 0;
	width: min(390px, calc(100vw - 24px));
}

.kmb-support__panel[hidden] {
	display: none;
}

.kmb-support__header {
	align-items: center;
	border-bottom: 1px solid rgba(148, 163, 184, .14);
	display: flex;
	justify-content: space-between;
	padding: 17px 17px 15px;
}

.kmb-support__brand {
	align-items: center;
	display: flex;
	gap: 11px;
}

.kmb-support__brand > span {
	border-radius: 10px;
	height: 36px;
	width: 36px;
}

.kmb-support__brand strong,
.kmb-support__brand small {
	display: block;
}

.kmb-support__brand strong {
	color: #fff;
	font-size: 14px;
	letter-spacing: -.01em;
}

.kmb-support__brand small {
	color: #7f91a8;
	font-size: 8px;
	font-weight: 850;
	letter-spacing: .14em;
	margin-top: 3px;
}

.kmb-support__brand small i {
	background: #36d5a0;
	border-radius: 50%;
	display: inline-block;
	height: 6px;
	margin-right: 5px;
	width: 6px;
}

.kmb-support__close {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	color: #a9b7c8;
	cursor: pointer;
	font: 300 22px/1 system-ui, sans-serif;
	height: 34px;
	padding: 0 0 2px;
	width: 34px;
}

.kmb-support__close:hover,
.kmb-support__close:focus-visible {
	border-color: rgba(126, 205, 255, .52);
	color: #fff;
	outline: none;
}

.kmb-support__messages {
	display: flex;
	flex-direction: column;
	gap: 11px;
	overflow-y: auto;
	padding: 18px 16px 10px;
	scrollbar-color: #31506b transparent;
	scrollbar-width: thin;
}

.kmb-support__message {
	border-radius: 15px;
	font-size: 12px;
	line-height: 1.58;
	max-width: 92%;
	padding: 12px 13px;
}

.kmb-support__message p {
	color: inherit;
	font: inherit;
	margin: 0;
}

.kmb-support__message--bot {
	align-self: flex-start;
	background: rgba(22, 42, 64, .92);
	border: 1px solid rgba(129, 188, 232, .16);
	color: #c4d1e1;
}

.kmb-support__message--user {
	align-self: flex-end;
	background: #eaf6ff;
	color: #0a1726;
}

.kmb-support__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

.kmb-support__actions a {
	background: rgba(111, 198, 255, .09);
	border: 1px solid rgba(111, 198, 255, .28);
	border-radius: 999px;
	color: #8fd2ff !important;
	font-size: 9px;
	font-weight: 800;
	padding: 7px 10px;
	text-decoration: none !important;
}

.kmb-support__topics {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	padding: 7px 16px 11px;
	scrollbar-width: none;
}

.kmb-support__topics::-webkit-scrollbar {
	display: none;
}

.kmb-support__topics button {
	background: transparent;
	border: 1px solid rgba(129, 188, 232, .22);
	border-radius: 999px;
	color: #a9bdd2;
	cursor: pointer;
	flex: 0 0 auto;
	font: 750 9px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
	padding: 8px 10px;
}

.kmb-support__topics button:hover,
.kmb-support__topics button:focus-visible {
	border-color: #70c7ff;
	color: #fff;
	outline: none;
}

.kmb-support__form {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0 16px;
}

.kmb-support__form input {
	background: rgba(4, 11, 20, .68);
	border: 1px solid rgba(148, 163, 184, .2);
	border-radius: 12px;
	color: #eef7ff;
	font: 12px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
	min-height: 43px;
	min-width: 0;
	padding: 10px 12px;
}

.kmb-support__form input::placeholder {
	color: #718399;
}

.kmb-support__form input:focus {
	border-color: #70c7ff;
	box-shadow: 0 0 0 3px rgba(91, 185, 246, .11);
	outline: none;
}

.kmb-support__form button {
	background: #eaf6ff;
	border: 0;
	border-radius: 12px;
	color: #081522;
	cursor: pointer;
	font: 850 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
	padding: 0 15px;
}

.kmb-support__privacy {
	color: #62758b;
	font-size: 8px;
	line-height: 1.4;
	margin: 0;
	padding: 10px 17px 14px;
	text-align: center;
}

@media (max-width: 540px) {
	.kmb-support {
		bottom: 12px;
		right: 12px;
	}

	.kmb-support__panel {
		border-radius: 18px;
		bottom: 59px;
		max-height: min(650px, calc(100vh - 84px));
		width: calc(100vw - 24px);
	}

	.kmb-support.is-open .kmb-support__launcher > b {
		display: none;
	}

	.kmb-support.is-open .kmb-support__launcher {
		padding-right: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kmb-support *,
	.kmb-support *::before,
	.kmb-support *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}
