:root {
	/* Primary colors - Warm, inviting orange-red inspired by CHCKN's friendly brand */
	--chat--color-primary: #ff6b35;
	--chat--color-primary-shade-50: #e85a2e;
	--chat--color-primary-shade-100: #d14a27;

	/* Secondary colors - Fresh teal for balance and trust */
	--chat--color-secondary: #4ecdc4;
	--chat--color-secondary-shade-50: #45b7af;

	/* Base colors - Clean and modern */
	--chat--color-white: #ffffff;
	--chat--color-light: #faf9f7;
	--chat--color-light-shade-50: #f0eeea;
	--chat--color-light-shade-100: #e3ddd4;
	--chat--color-medium: #c8c4bc;
	--chat--color-dark: #2c3e50;
	--chat--color-disabled: #95a5a6;
	--chat--color-typing: #555555;

	/* Layout and spacing */
	--chat--spacing: .5rem;
	--chat--border-radius: 12px;
	--chat--transition-duration: 0.2s;

	/* Window dimensions - slightly larger for better UX */
	--chat--window--width: 420px;
	--chat--window--height: 650px;

	/* Header styling - warm and welcoming */
	--chat--header-height: auto;
	--chat--header--padding: 1.5rem;
	--chat--header--background: linear-gradient(135deg, var(--chat--color-dark) 0%, #34495e 100%);
	--chat--header--color: var(--chat--color-white);
	--chat--header--border-top: none;
	--chat--header--border-bottom: 3px solid var(--chat--color-primary);
	--chat--heading--font-size: 1.75rem;
	--chat--subtitle--font-size: 0.9rem;
	--chat--subtitle--line-height: 1.6;

	/* Textarea styling */
	--chat--textarea--height: 56px;

	/* Message styling - friendly and readable */
	--chat--message--font-size: 1rem;
	--chat--message--padding: 1rem 1.25rem;
	--chat--message--border-radius: 18px;
	--chat--message-line-height: 1.6;

	/* Bot messages - clean white with subtle shadow */
	--chat--message--bot--background: var(--chat--color-white);
	--chat--message--bot--color: var(--chat--color-dark);
	--chat--message--bot--border: 1px solid #e8e5e0;
	--chat--message--bot--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

	/* User messages - warm primary color */
	--chat--message--user--background: linear-gradient(135deg, var(--chat--color-primary) 0%, #ff7849 100%);
	--chat--message--user--color: var(--chat--color-white);
	--chat--message--user--border: none;
	--chat--message--user--shadow: 0 2px 8px rgba(255, 107, 53, 0.25);

	/* Code blocks */
	--chat--message--pre--background: rgba(44, 62, 80, 0.06);

	/* Chat toggle button - prominent and friendly */
	--chat--toggle--background: linear-gradient(135deg, var(--chat--color-primary) 0%, #ff7849 100%);
	--chat--toggle--hover--background: linear-gradient(135deg, var(--chat--color-primary-shade-50) 0%, #e85a2e 100%);
	--chat--toggle--active--background: linear-gradient(135deg, var(--chat--color-primary-shade-100) 0%, #d14a27 100%);
	--chat--toggle--color: var(--chat--color-white);
	--chat--toggle--size: 68px;
	--chat--toggle--shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
	--chat--toggle--hover-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);

	/* Additional enhancements for CHCKN-style warmth */
	--chat--input--background: var(--chat--color-white);
	--chat--input--border: 2px solid #e8e5e0;
	--chat--input--focus-border: var(--chat--color-secondary);
	--chat--input--border-radius: var(--chat--border-radius);
	--chat--input--padding: 0.875rem 1rem;

	/* Scroll styling */
	--chat--scrollbar--track: var(--chat--color-light);
	--chat--scrollbar--thumb: var(--chat--color-medium);
	--chat--scrollbar--thumb-hover: var(--chat--color-disabled);

	/* Status indicators */
	--chat--status--online: #2ecc71;
	--chat--status--away: #f39c12;
	--chat--status--offline: var(--chat--color-disabled);

	/* Animation easing */
	--chat--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--chat--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Additional CSS for enhanced CHCKN-style experience */
.chat-widget {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	border-radius: var(--chat--border-radius);
	overflow: hidden;
}

.chat-header {
	display: none !important;
	/* background: var(--chat--header--background);
	position: relative;*/
}

.chat-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--chat--color-primary) 0%, var(--chat--color-secondary) 100%);
}

.chat-toggle {
	background: var(--chat--toggle--background);
	box-shadow: var(--chat--toggle--shadow);
	transition: all var(--chat--transition-duration) var(--chat--ease-out);
}

.chat-toggle:hover {
	box-shadow: var(--chat--toggle--hover-shadow);
	transform: translateY(-2px);
}

.chat-message--bot {
	box-shadow: var(--chat--message--bot--shadow);
}

.chat-message--user {
	box-shadow: var(--chat--message--user--shadow);
}

.chat-input {
	background: var(--chat--input--background);
	border: var(--chat--input--border);
	border-radius: var(--chat--input--border-radius);
	padding: var(--chat--input--padding);
	transition: border-color var(--chat--transition-duration) var(--chat--ease-out);
}

.chat-input:focus {
	border-color: var(--chat--input--focus-border);
	outline: none;
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
}