:root {

	/* ===========================
	   COLORS
	=========================== */

	--chat--color--primary: #2563eb;
	--chat--color--primary-shade-50: #1d4ed8;
	--chat--color--primary--shade-100: #1e40af;

	--chat--color--secondary: #3b82f6;
	--chat--color-secondary-shade-50: #2563eb;

	--chat--color-white: #ffffff;
	--chat--color-light: #f4f8ff;
	--chat--color-light-shade-50: #dce8ff;
	--chat--color-light-shade-100: #bfd4ff;
	--chat--color-medium: #c8d4ea;
	--chat--color-dark: #0f172a;
	--chat--color-disabled: #94a3b8;
	--chat--color-typing: #64748b;

	/* ===========================
	   LAYOUT
	=========================== */

	--chat--spacing: 1rem;
	--chat--border-radius: 18px;
	--chat--transition-duration: .25s;

	--chat--font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	/* ===========================
	   WINDOW
	=========================== */

	--chat--window--width: 430px;
	--chat--window--height: 700px;
	--chat--window--bottom: 20px;
	--chat--window--left: 20px;
	--chat--window--z-index: 9999;

	--chat--window--border: 1px solid rgba(255,255,255,.25);
	--chat--window--border-radius: 20px;
	--chat--window--margin-bottom: 20px;

	/* ===========================
	   HEADER
	=========================== */

	--chat--header--background: linear-gradient(
		135deg,
		#2563eb,
		#3b82f6,
		#60a5fa
	);

	--chat--header--color: white;
	--chat--header--padding: 20px;

	--chat--heading--font-size: 1.5rem;
	--chat--subtitle--font-size: .95rem;
	--chat--subtitle--line-height: 1.5;

	/* ===========================
	   MESSAGES
	=========================== */

	--chat--message--font-size: 15px;
	--chat--message--padding: 14px;
	--chat--message--border-radius: 16px;
	--chat--message-line-height: 1.6;
	--chat--message--margin-bottom: 12px;

	--chat--message--bot--background: white;
	--chat--message--bot--color: #1e293b;
	--chat--message--bot--border: 1px solid #dbeafe;

	--chat--message--user--background: linear-gradient(
		135deg,
		#2563eb,
		#60a5fa
	);

	--chat--message--user--color: white;
	--chat--message--user--border: none;

	--chat--messages-list--padding: 18px;

	/* ===========================
	   BUTTON
	=========================== */

	--chat--toggle--size: 68px;
	--chat--toggle--width: 68px;
	--chat--toggle--height: 68px;
	--chat--toggle--border-radius: 50%;

	--chat--toggle--background: linear-gradient(
		135deg,
		#2563eb,
		#60a5fa
	);

	--chat--toggle--hover--background: linear-gradient(
		135deg,
		#1d4ed8,
		#3b82f6
	);

	--chat--toggle--active--background: #1e40af;
	--chat--toggle--color: white;

	/* ===========================
	   INPUT
	=========================== */

	--chat--textarea--height: 56px;
	--chat--input--padding: 16px;
	--chat--input--background: white;
	--chat--input--border-radius: 18px;
	--chat--input--border: none;

	/* ===========================
	   SEND BUTTON
	=========================== */

	--chat--input--send--button--background: transparent;
	--chat--input--send--button--color: #2563eb;

	--chat--input--send--button--background-hover: transparent;
	--chat--input--send--button--color-hover: #1d4ed8;

	/* ===========================
	   FILE BUTTON
	=========================== */

	--chat--input--file--button--background: transparent;
	--chat--input--file--button--color: #2563eb;

	/* ===========================
	   BODY
	=========================== */

	--chat--body--background: #eef5ff;
	--chat--footer--background: #eef5ff;
	--chat--footer--color: #1e293b;
}

/* ===========================
   WINDOW POSITION
=========================== */

.chat-window-wrapper{

	left:20px;
	right:auto;

	max-width:calc(100% - 40px);

}

.chat-window-wrapper .chat-window{

	transform-origin:left bottom;

	border-radius:20px;

	backdrop-filter:blur(18px);

	background:rgba(255,255,255,.82);

	box-shadow:
		0 10px 40px rgba(37,99,235,.20),
		0 0 40px rgba(59,130,246,.18);

	overflow:hidden;

	animation:chatGlow 4s ease-in-out infinite;

}

.chat-window-wrapper .chat-window-toggle{

	margin-left:0;
	margin-right:auto;

	box-shadow:
		0 0 18px rgba(59,130,246,.45),
		0 0 35px rgba(37,99,235,.35);

	animation:pulseGlow 2.5s infinite;

	transition:.3s;

}

.chat-window-wrapper .chat-window-toggle:hover{

	transform:scale(1.08);

	box-shadow:
		0 0 25px rgba(96,165,250,.9),
		0 0 60px rgba(37,99,235,.6);

}

/* ===========================
   HEADER
=========================== */

.chat-header{

	position:relative;

	overflow:hidden;

}

.chat-header::after{

	content:"";

	position:absolute;

	inset:0;

	background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,.28),
		transparent
	);

	animation:shine 5s linear infinite;

}

/* ===========================
   INPUT
=========================== */

.chat-input{

	border-top:1px solid rgba(37,99,235,.12);

}

/* ===========================
   ANIMATIONS
=========================== */

@keyframes pulseGlow{

	0%,100%{

		box-shadow:
			0 0 18px rgba(59,130,246,.35),
			0 0 40px rgba(37,99,235,.25);

	}

	50%{

		box-shadow:
			0 0 35px rgba(96,165,250,.8),
			0 0 70px rgba(59,130,246,.5);

	}

}

@keyframes chatGlow{

	0%,100%{

		box-shadow:
			0 10px 40px rgba(37,99,235,.18);

	}

	50%{

		box-shadow:
			0 10px 55px rgba(96,165,250,.35);

	}

}

@keyframes shine{

	from{

		transform:translateX(-120%);

	}

	to{

		transform:translateX(120%);

	}

}