/* Chatbot UI Styles */
:root {
	color-scheme: light dark;
}
body {
	background: #dadde7;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	margin: 0;
	display: grid;
	place-items: center;
	min-height: 100dvh;
}
.chat {
	width: min(800px, 94vw);
	height: min(70vh, 700px);
	border: 1px solid #9993;
	border-radius: 16px;
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
	box-shadow: 0 10px 30px #0001;
}
.log {
	padding: 16px;
	overflow-y: auto;
	background: #fafafc;
}
.row {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 12px;
	background: #fff;
	border-top: 1px solid #9993;
}
.msg {
	padding: 10px 12px;
	border-radius: 12px;
	margin: 6px 0;
	max-width: 80%;
	white-space: pre-wrap;
	line-height: 1.35;
	display: flex;
	align-items: center;
}
.user {
	background: #E6F6D2;
	margin-left: auto;
}
.bot {
	background: #D6E5F2;
	margin-right: auto;
}
button {
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid #0002;
	background: #fff;
	cursor: pointer;
	font-size: 1.2em;
}
input,
textarea {
	flex: 1;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid #0002;
}
.lottie-avatar {
	width: 40px;
	height: 40px;
	margin-right: 8px;
}