/**
 * Smart Leading Net — AI Chat Widget
 * Uses theme design tokens only.
 */

.sls-ai-chat {
	width: 100%;
}

/* Main conversation panel — wraps all user + assistant messages */
#sls-ai-chat-history.sls-ai-chat__history {
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid rgba(31, 78, 158, 0.2);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 20px rgba(31, 78, 158, 0.08);
	overflow: hidden;
}

#sls-ai-chat-history.sls-ai-chat__history[hidden] {
	display: none !important;
}

/* Scrollable inner list — bubbles only, no panel chrome */
.sls-ai-chat__history .sls-ai-chat__messages {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 360px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) rgba(31, 78, 158, 0.12);
}

.sls-ai-chat__history .sls-ai-chat__messages::-webkit-scrollbar {
	width: 8px;
}

.sls-ai-chat__history .sls-ai-chat__messages::-webkit-scrollbar-track {
	background: rgba(31, 78, 158, 0.12);
	border-radius: 20px;
}

.sls-ai-chat__history .sls-ai-chat__messages::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 20px;
	border: 1px solid rgba(31, 78, 158, 0.08);
}

.sls-ai-chat__history .sls-ai-chat__messages::-webkit-scrollbar-thumb:hover {
	background: var(--secondary-color);
}

.sls-ai-chat__bubble {
	max-width: 85%;
	padding: 12px 16px;
	border-radius: var(--card-radius);
	font-size: var(--paragraph-size);
	font-weight: var(--paragraph-weight);
	line-height: 1.55;
	word-wrap: break-word;
}

.sls-ai-chat__bubble--user {
	align-self: flex-end;
	margin-left: auto;
	background-color: var(--primary-color);
	color: var(--white);
	border-bottom-right-radius: 4px;
}

.sls-ai-chat__bubble--ai {
	align-self: flex-start;
	margin-right: auto;
	background: var(--white);
	color: var(--heading-color);
	border-bottom-left-radius: 4px;
	box-shadow: 0 4px 16px rgba(31, 78, 158, 0.1);
}

.sls-ai-chat__bubble--ai p {
	margin: 0 0 0.75em;
}

.sls-ai-chat__bubble--ai p:last-child {
	margin-bottom: 0;
}

.sls-ai-chat__history .sls-ai-chat__typing {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	font-size: 14px;
	font-style: italic;
	color: var(--text-color);
}

.sls-ai-chat__typing[hidden] {
	display: none !important;
}

.sls-ai-chat__typing::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary-color);
	animation: slsAiChatPulse 1.2s ease-in-out infinite;
}

.sls-ai-chat--has-messages {
	margin-top: 0;
}

.sls-ai-chat--has-messages .hero-banner__chat-form,
.sls-ai-chat--has-messages .sls-ai-chat__form {
	margin-top: 0;
}

.sls-ai-chat__clear {
	display: block;
	margin: 0 0 12px auto;
	padding: 0;
	border: none;
	background: none;
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	color: var(--primary-color);
	cursor: pointer;
	text-decoration: underline;
}

.sls-ai-chat__clear:hover,
.sls-ai-chat__clear:focus-visible {
	color: var(--secondary-color);
}

.sls-ai-chat__lead-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
	padding: 14px;
	border: 1px solid rgba(31, 78, 158, 0.18);
	border-radius: var(--card-radius);
	background: var(--white);
}

.sls-ai-chat__lead-form[hidden] {
	display: none !important;
}

.sls-ai-chat__lead-form-intro {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--text-color);
}

.sls-ai-chat__lead-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	color: var(--heading-color);
}

.sls-ai-chat__lead-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(31, 78, 158, 0.18);
	border-radius: 8px;
	font-family: var(--font-family-base);
	font-size: 14px;
	color: var(--heading-color);
	background: var(--white);
}

.sls-ai-chat__lead-input:focus {
	outline: none;
	border-color: var(--primary-color);
}

.sls-ai-chat__lead-submit {
	align-self: flex-start;
	margin-top: 4px;
	padding: 10px 18px;
	border: none;
	border-radius: 6px;
	background: var(--primary-color);
	color: var(--white);
	font-family: var(--font-family-base);
	font-size: 14px;
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: background-color var(--transition-base, 0.3s ease);
}

.sls-ai-chat__lead-submit:hover,
.sls-ai-chat__lead-submit:focus-visible {
	background: var(--secondary-color);
}

@keyframes slsAiChatPulse {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.85);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 767.98px) {
	#sls-ai-chat-history.sls-ai-chat__history {
		margin-top: 16px;
		margin-bottom: 16px;
		padding: 14px;
	}

	.sls-ai-chat__history .sls-ai-chat__messages {
		max-height: 300px;
	}

	.sls-ai-chat__bubble {
		max-width: 92%;
		padding: 10px 14px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sls-ai-chat__typing::before {
		animation: none;
		opacity: 0.7;
	}
}