.vista-ai-root {
	--vista-primary: #6d5dfc;
	--vista-secondary: #00d4ff;
	box-sizing: border-box;
	color: #20263a;
	font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	z-index: 999998;
}

.vista-ai-root *,
.vista-ai-root *::before,
.vista-ai-root *::after {
	box-sizing: border-box;
}

.vista-ai-root.vista-mode-floating {
	position: fixed;
	bottom: 22px;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 14px;
	max-width: calc(100vw - 44px);
}

.vista-ai-root.vista-position-right {
	right: 22px;
}

.vista-ai-root.vista-position-left {
	left: 22px;
	align-items: flex-start;
}

.vista-mode-inline {
	position: relative;
	display: block;
	max-width: 100%;
}

.vista-launcher {
	width: 60px;
	height: 60px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--vista-primary), var(--vista-secondary));
	box-shadow: 0 12px 35px rgba(109, 93, 252, .28);
	color: #fff;
	cursor: pointer;
	transition: transform .22s, box-shadow .22s;
}

.vista-ai-root.is-open .vista-launcher,
.vista-mode-inline .vista-launcher {
	display: none;
}

.vista-launcher:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 18px 44px rgba(109, 93, 252, .34);
}

.vista-launcher svg {
	width: 27px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.8;
}

.vista-window {
	display: none;
	flex-direction: column;
	width: min(380px, calc(100vw - 44px));
	height: min(600px, calc(100vh - 105px));
	border: 1px solid rgba(70, 80, 110, .13);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 80px rgba(17, 22, 45, .25);
	overflow: hidden;
	scrollbar-width: none;
}

.vista-window::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.vista-window > * {
	min-width: 0;
	overflow-x: hidden;
}

.vista-ai-root.is-open .vista-window,
.vista-mode-inline .vista-window {
	display: flex;
	animation: vista-widget-in .2s ease;
}

.vista-mode-inline .vista-window {
	width: 100%;
	height: 580px;
	margin: 0;
}

@keyframes vista-widget-in {
	from {
		opacity: 0;
		transform: translateY(9px) scale(.98);
	}
}

.vista-chat-header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 16px 17px;
	color: #fff;
	background: linear-gradient(135deg, var(--vista-primary), var(--vista-secondary));
}

.vista-chat-header strong {
	display: block;
	max-width: 240px;
	overflow: hidden;
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vista-chat-header small {
	font-size: 11px;
	color: rgba(255, 255, 255, .82);
}

.vista-chat-header small i {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 4px;
	border-radius: 50%;
	background: #7dffb1;
}

.vista-avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	font-weight: 800;
	overflow: hidden;
}

.vista-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vista-minimize {
	width: 32px;
	height: 32px;
	margin-left: auto;
	border: 0;
	border-radius: 11px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.vista-minimize svg,
.vista-composer button svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.vista-messages {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	padding: 17px;
	background: #f6f7fb;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}

.vista-messages::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.vista-message {
	max-width: 84%;
	padding: 10px 13px;
	border-radius: 4px 14px 14px;
	background: #fff;
	box-shadow: 0 3px 12px rgba(30, 37, 64, .06);
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.vista-message.user {
	align-self: flex-end;
	border-radius: 14px 4px 14px 14px;
	background: var(--vista-primary);
	color: #fff;
}

.vista-message.agent {
	border-left: 3px solid var(--vista-secondary);
	background: #eefcff;
	color: #172033;
}

.vista-typing {
	display: flex;
	gap: 4px;
	align-items: center;
	width: 48px;
	padding: 12px;
	border-radius: 4px 14px 14px;
	background: #fff;
}

.vista-typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9ea7ba;
	animation: vista-dot 1s infinite;
}

.vista-typing i:nth-child(2) {
	animation-delay: .15s;
}

.vista-typing i:nth-child(3) {
	animation-delay: .3s;
}

@keyframes vista-dot {
	50% {
		opacity: .45;
		transform: translateY(-4px);
	}
}

.vista-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 0 0 auto;
	max-height: none;
	padding: 8px 13px 6px;
	background: #f6f7fb;
	overflow-x: hidden;
	overflow-y: hidden;
}

.vista-suggestions:empty,
.vista-suggestions[hidden] {
	display: none;
}

.vista-suggestions button {
	max-width: 100%;
	padding: 6px 9px;
	border: 1px solid rgba(109, 93, 252, .28);
	border-radius: 999px;
	background: #fff;
	color: var(--vista-primary);
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	line-height: 1.25;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vista-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 0 0 auto;
	padding: 3px 13px 7px;
	background: #f6f7fb;
	position: relative;
	z-index: 1;
}

.vista-appointment,
.vista-handoff {
	flex: 1 1 145px;
	min-width: 0;
	border: 1px solid rgba(109, 93, 252, .18);
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(109, 93, 252, .12), rgba(0, 212, 255, .12));
	box-shadow: 0 8px 18px rgba(30, 37, 64, .06);
	color: #20263a;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	min-height: 34px;
	padding: 8px 10px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vista-handoff {
	background: #fff;
	color: var(--vista-primary);
}

.vista-actions .vista-appointment:only-child,
.vista-actions .vista-handoff:only-child {
	flex-basis: 100%;
}

.vista-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	flex: 0 0 auto;
	padding: 10px 12px;
	border-top: 1px solid #e4e8f1;
	background: #fff;
	box-shadow: 0 -8px 24px rgba(30, 37, 64, .06);
	position: relative;
	z-index: 2;
}

.vista-composer textarea {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 42px;
	max-height: 96px;
	padding: 11px 15px;
	border: 1px solid #d8deea;
	border-radius: 16px;
	background: #fff;
	color: #111827;
	font: inherit;
	outline: 0;
	resize: none;
	box-shadow: inset 0 1px 2px rgba(30, 37, 64, .04);
}

.vista-composer textarea::placeholder {
	color: #6f7b91;
	opacity: 1;
}

.vista-composer textarea:focus {
	border-color: color-mix(in srgb, var(--vista-primary) 62%, #d8deea);
	box-shadow: 0 0 0 3px rgba(109, 93, 252, .12);
}

.vista-composer button,
.vista-lead-form button {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 0;
	border-radius: 14px;
	background: var(--vista-primary);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.vista-branding {
	flex: 0 0 auto;
	padding: 5px 6px 7px;
	background: #fff;
	color: #a0a7b5;
	font-size: 10px;
	text-align: center;
}

.vista-lead-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	max-height: none;
	padding: 12px;
	border: 1px solid #e5e9f2;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(30, 37, 64, .08);
	overflow: visible;
}

.vista-messages .vista-lead-form {
	align-self: stretch;
	flex: 0 0 auto;
	width: 100%;
}

.vista-lead-form strong,
.vista-lead-form p,
.vista-lead-form textarea,
.vista-lead-form select {
	grid-column: 1 / -1;
}

.vista-lead-form input,
.vista-lead-form textarea,
.vista-lead-form select {
	width: 100%;
	min-width: 0;
	border: 1px solid #e1e5ed;
	border-radius: 8px;
	padding: 8px;
	background: #fff;
	color: #252b3d;
	font: inherit;
}

.vista-lead-form textarea {
	min-height: 78px;
	resize: vertical;
}

.vista-lead-form button {
	grid-column: 1 / -1;
	width: 100%;
	height: 40px;
	flex: initial;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	padding: 0 12px;
}

.vista-theme-dark .vista-window {
	background: #101522;
	color: #eef2ff;
	border-color: #283047;
}

.vista-theme-dark .vista-messages,
.vista-theme-dark .vista-suggestions,
.vista-theme-dark .vista-actions {
	background: #0b101c;
}

.vista-theme-dark .vista-message,
.vista-theme-dark .vista-composer,
.vista-theme-dark .vista-branding,
.vista-theme-dark .vista-lead-form {
	background: #171d2c;
	color: #eef2ff;
	border-color: #293146;
}

.vista-theme-dark .vista-message.agent {
	background: #132a32;
	color: #eefcff;
}

.vista-theme-dark .vista-composer textarea,
.vista-theme-dark .vista-lead-form input,
.vista-theme-dark .vista-lead-form textarea,
.vista-theme-dark .vista-lead-form select {
	background: #101827;
	color: #fff;
	border-color: #38445d;
}

.vista-theme-dark .vista-composer textarea::placeholder {
	color: #a8b3c7;
}

.vista-theme-dark .vista-suggestions button {
	background: #171d2c;
	color: #dbe3ff;
}

.vista-theme-dark .vista-appointment {
	background: linear-gradient(135deg, rgba(109, 93, 252, .22), rgba(0, 212, 255, .16));
	box-shadow: inset 0 0 0 1px rgba(150, 163, 255, .18);
	color: #eef2ff;
}

.vista-theme-dark .vista-handoff {
	background: #171d2c;
	color: #dbe3ff;
}

@media (max-width: 480px) {
	.vista-ai-root.vista-mode-floating {
		right: 10px !important;
		left: 10px !important;
		bottom: 10px;
		align-items: flex-end;
		max-width: calc(100vw - 20px);
	}

	.vista-window {
		width: 100%;
		height: calc(100vh - 90px);
	}

	.vista-launcher {
		width: 56px;
		height: 56px;
	}

	.vista-chat-header strong {
		max-width: 190px;
	}

	.vista-lead-form {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 390px) {
	.vista-actions {
		gap: 6px;
		padding: 4px 12px 7px;
	}

	.vista-appointment,
	.vista-handoff {
		flex-basis: 100%;
		min-height: 34px;
		padding: 8px 10px;
	}

	.vista-composer {
		padding: 9px 10px;
	}
}