/**
 * AI Assistant
 * FRM India Brand Styling
 */

/* =========================================================
   MAIN WIDGET
========================================================= */

.ai-assistant {
	position: fixed !important;
	right: 24px !important;
	bottom: 24px !important;
	z-index: 999999 !important;

	font-family: Arial, Helvetica, sans-serif !important;
}


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

.ai-assistant-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;

	padding: 12px 18px !important;

	min-height: 44px !important;
	box-sizing: border-box !important;

	border: 1px solid #c08a43 !important;
	border-radius: 4px !important;

	background: #c08a43 !important;
	color: #ffffff !important;

	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;

	cursor: pointer !important;

	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease !important;
}

.ai-assistant-toggle:hover {
	background: #a97435 !important;
	border-color: #a97435 !important;
	color: #ffffff !important;

	transform: translateY(-1px) !important;
}

.ai-assistant-toggle:focus,
.ai-assistant-toggle:active {
	background: #a97435 !important;
	border-color: #a97435 !important;
	color: #ffffff !important;
}

.ai-assistant-toggle-icon {
	font-size: 15px !important;
	line-height: 1 !important;
}

.ai-assistant-toggle-text {
	color: #ffffff !important;
}


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

.ai-assistant-window {
	position: absolute !important;

	right: 0 !important;
	bottom: 58px !important;

	width: 370px !important;
	height: 520px !important;

	max-width: calc(100vw - 32px) !important;
	max-height: calc(100vh - 100px) !important;

	box-sizing: border-box !important;

	background: #ffffff !important;

	border: 1px solid #d8d8d8 !important;
	border-radius: 5px !important;

	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20) !important;

	overflow: hidden !important;

	display: flex !important;
	flex-direction: column !important;
}


/*
 * IMPORTANT:
 * The chat must stay hidden until JavaScript removes
 * the HTML "hidden" attribute.
 */

.ai-assistant-window[hidden] {
	display: none !important;
}


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

.ai-assistant-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;

	flex-shrink: 0 !important;

	padding: 14px 16px !important;

	background: #111111 !important;
	color: #ffffff !important;

	border-bottom: 3px solid #c08a43 !important;
}

.ai-assistant-header strong {
	color: #ffffff !important;

	font-size: 15px !important;
	font-weight: 600 !important;
}


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

.ai-assistant-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 30px !important;
	height: 30px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 3px !important;

	background: transparent !important;
	color: #ffffff !important;

	font-size: 21px !important;
	line-height: 1 !important;

	cursor: pointer !important;
}

.ai-assistant-close:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
}


/* =========================================================
   MESSAGE AREA
========================================================= */

.ai-assistant-messages {
	flex: 1 !important;
	min-height: 0 !important;

	padding: 18px !important;

	overflow-y: auto !important;

	background: #f7f7f7 !important;
}


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

.ai-assistant-message {
	display: flex !important;

	margin-bottom: 12px !important;
}

.ai-assistant-message-bot {
	justify-content: flex-start !important;
}

.ai-assistant-message-user {
	justify-content: flex-end !important;
}

.ai-assistant-message-content {
	max-width: 82% !important;

	padding: 10px 13px !important;

	border-radius: 5px !important;

	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;

	word-wrap: break-word !important;
}


/* Assistant message */

.ai-assistant-message-bot .ai-assistant-message-content {
	background: #ffffff !important;

	border: 1px solid #e1e1e1 !important;

	color: #333333 !important;
}


/* Visitor message */

.ai-assistant-message-user .ai-assistant-message-content {
	background: #c08a43 !important;

	border: 1px solid #c08a43 !important;

	color: #ffffff !important;
}


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

.ai-assistant-input-area {
	flex-shrink: 0 !important;

	padding: 12px !important;

	background: #ffffff !important;

	border-top: 1px solid #e3e3e3 !important;
}

.ai-assistant-form {
	display: flex !important;
	gap: 8px !important;
}

.ai-assistant-input {
	flex: 1 !important;
	min-width: 0 !important;

	height: 42px !important;

	padding: 0 12px !important;

	box-sizing: border-box !important;

	border: 1px solid #d5d5d5 !important;
	border-radius: 3px !important;

	background: #ffffff !important;

	color: #222222 !important;

	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;

	outline: none !important;
}

.ai-assistant-input:focus {
	border-color: #c08a43 !important;

	box-shadow: 0 0 0 1px #c08a43 !important;
}


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

.ai-assistant-send {
	height: 42px !important;

	padding: 0 16px !important;

	border: 1px solid #c08a43 !important;
	border-radius: 3px !important;

	background: #c08a43 !important;
	color: #ffffff !important;

	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;

	cursor: pointer !important;

	transition: background-color 0.2s ease !important;
}

.ai-assistant-send:hover {
	background: #a97435 !important;
	border-color: #a97435 !important;
	color: #ffffff !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.ai-assistant {
		right: 16px !important;
		bottom: 16px !important;
	}

	.ai-assistant-window {
		right: 0 !important;
		bottom: 58px !important;

		width: calc(100vw - 32px) !important;

		height: 70vh !important;
		max-height: 600px !important;
	}

	.ai-assistant-toggle {
		padding: 11px 15px !important;
	}
}