.ragbot-root {
	position: fixed;
	right: 20px;
	bottom: 30px;
	left: auto;
	top: auto;
	z-index: 2147483647;
	font-family: var(--font-family-secondary, system-ui, sans-serif);
}

.ragbot-root--collapsed {
	width: 56px;
	height: 56px;
}

.ragbot-launcher {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 5px 0 0;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	cursor: pointer;
	color: #ff0000;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.12),
		0 2px 8px rgba(0, 0, 0, 0.06),
		inset 0 1px 1px rgba(255, 255, 255, 0.65),
		inset 0 -1px 1px rgba(0, 0, 0, 0.04);
	transition:
		transform 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.ragbot-launcher:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.32);
	border-color: rgba(255, 255, 255, 0.75);
	box-shadow:
		0 14px 40px rgba(0, 0, 0, 0.14),
		0 4px 12px rgba(0, 0, 0, 0.08),
		inset 0 1px 1px rgba(255, 255, 255, 0.75),
		inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

.ragbot-launcher:active {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.26);
}

.ragbot-root--open {
	width: 56px;
	height: 56px;
	overflow: visible;
	pointer-events: none;
}

.ragbot-root--open .ragbot-launcher {
	display: flex;
	pointer-events: auto;
}

.ragbot-panel {
	position: fixed;
	right: 12px;
	bottom: 17px;
	left: auto;
	top: 80px;
	overflow-x: hidden !important;
	z-index: 2147483646;
	width: min(400px, calc(100vw - 24px));
	height: min(620px, calc(100dvh - 28px));
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	pointer-events: auto;
}

@media (max-width: 1024px) {
	.ragbot-root {
		bottom: max(calc(2dvh + env(safe-area-inset-bottom, 0px) + 10px), calc(2rem + 10px));
	}

	.ragbot-panel {
		bottom: max(calc(2dvh + env(safe-area-inset-bottom, 0px) - 10px), calc(2rem - 10px));
		height: min(
			620px,
			calc(
				100dvh - max(calc(2dvh + env(safe-area-inset-bottom, 0px) - 10px), calc(2rem - 10px)) -
					24px
			)
		);
	}
}

.ragbot-sheet {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: transparent;
}

.ragbot-close {
	position: absolute;
	top: 0.8rem;
	right: 2.5rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	transition:
		transform 0.18s ease,
		opacity 0.18s ease;
}

.ragbot-close-icon {
	display: block;
	z-index: 99999999;
	width: 2rem;
	height: 2rem;
}

.ragbot-close:hover {
	transform: translateY(-1px);
	opacity: 0.82;
}

.ragbot-close:active {
	transform: translateY(0);
	opacity: 0.65;
}

.ragbot-close:focus-visible {
	outline: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ragbot-close {
		top: 1.5rem;
		left: 1.5rem;
		right: auto;
	}
}

@media (min-width: 1025px) {
	.ragbot-close {
		top: calc(1.25rem - 0.5rem);
		right: calc(3.5rem - 0.7rem);
		left: auto;
	}
}

.ragbot-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
}

@media (max-height: 780px) {
	.ragbot-root {
		bottom: calc(30px - 1.5rem);
	}

	.ragbot-root--open {
		width: 0;
		height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.ragbot-root--open .ragbot-launcher {
		display: none;
		pointer-events: none;
	}
}

@media (max-width: 1024px) and (max-height: 780px) {
	.ragbot-root {
		bottom: max(
			calc(2dvh + env(safe-area-inset-bottom, 0px) + 10px - 1.5rem),
			calc(2rem + 10px - 1.5rem)
		);
	}
}