.wp-block-wlc-algolia-agent-chat {
	--wlc-accent: #DB002F;
	--wlc-chat-height: 600px;

	&__container {
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		height: var(--wlc-chat-height);
		max-height: 90vh;
	}

	&__header {
		padding: 16px 20px;
		background: var(--wlc-accent);
		color: #fff;
		font-weight: 600;
		font-size: 16px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	&__chat {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	&__error {
		padding: 20px;
		background: #fff3cd;
		border: 1px solid #ffc107;
		border-radius: 8px;
		color: #856404;

		p {
			margin: 0;
		}
	}
}

// Chat UI styles
.wp-block-wlc-algolia-agent-chat__chat {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wp-block-wlc-algolia-agent-chat__messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wp-block-wlc-algolia-agent-chat__message {
	max-width: 80%;
	padding: 12px 16px;
	border-radius: 12px;
	word-wrap: break-word;
	font-size: 14px;
	line-height: 1.6;

	&--user {
		align-self: flex-end;
		background: var(--wlc-accent);
		color: #fff;
	}

	&--assistant {
		align-self: flex-start;
		background: #f5f5f5;
		color: #333;

		// Ensure links are visible in assistant messages
		.wp-block-wlc-algolia-agent-chat__message-content a {
			color: var(--wlc-accent);
			text-decoration: underline;
			text-decoration-color: rgba(219, 0, 47, 0.4);
			text-underline-offset: 2px;
			transition: all 0.2s ease;
			font-weight: 500;

			&:hover {
				color: #b80026;
				text-decoration-color: var(--wlc-accent);
			}

			&:visited {
				color: #a00020;
			}
		}
	}

	&--loading {
		opacity: 0.7;
		font-style: italic;
	}

	&-content {
		line-height: 1.6;
		white-space: pre-wrap;
		font-size: 14px;

		// Style for links
		a {
			color: var(--wlc-accent);
			text-decoration: underline;
			text-decoration-color: rgba(219, 0, 47, 0.4);
			text-underline-offset: 2px;
			transition: all 0.2s ease;
			font-weight: 500;

			&:hover {
				color: #b80026;
				text-decoration-color: var(--wlc-accent);
			}

			&:visited {
				color: #a00020;
			}
		}

		// Style for bold text
		strong {
			font-weight: 600;
			color: #1a1a1a;
		}

		// Style for italic text
		em {
			font-style: italic;
		}

		// Style for lists
		ul, ol {
			margin: 8px 0;
			padding-left: 24px;

			li {
				margin: 4px 0;
			}
		}

		// Style for images
		img {
			max-width: 100%;
			height: auto;
			border-radius: 8px;
			margin: 8px 0;
			display: block;
		}

		// Style for product cards or structured content
		p {
			margin: 8px 0;

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.wp-block-wlc-algolia-agent-chat__input-wrapper {
	display: flex;
	gap: 8px;
	padding: 16px;
	border-top: 1px solid #eee;
	background: #fafafa;
}

.wp-block-wlc-algolia-agent-chat__input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 24px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s ease;

	&:focus {
		border-color: var(--wlc-accent);
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
}

.wp-block-wlc-algolia-agent-chat__send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--wlc-accent);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;

	&:hover:not(:disabled) {
		background: #b80026;
		transform: scale(1.05);
	}

	&:active:not(:disabled) {
		transform: scale(0.95);
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	svg {
		width: 20px;
		height: 20px;
	}
}
