/* =========================================================
   CFPO AI FLOATING CHAT
   Modern Brown, Gold and Cream Interface
========================================================= */

:root{
	--cfpo-ai-brown-950:#24150d;
	--cfpo-ai-brown-900:#352015;
	--cfpo-ai-brown-800:#4b2e19;
	--cfpo-ai-brown-700:#654126;
	--cfpo-ai-brown-600:#805533;

	--cfpo-ai-gold-700:#a9770a;
	--cfpo-ai-gold-600:#bf8b13;
	--cfpo-ai-gold-500:#d4a017;
	--cfpo-ai-gold-400:#e4b83d;
	--cfpo-ai-gold-300:#f1d27a;

	--cfpo-ai-cream-100:#fffdf9;
	--cfpo-ai-cream-200:#fcf8f1;
	--cfpo-ai-cream-300:#f6eee2;

	--cfpo-ai-white:#ffffff;
	--cfpo-ai-text:#2c1b12;
	--cfpo-ai-muted:#7f7165;
	--cfpo-ai-border:#eadfce;

	--cfpo-ai-shadow-sm:0 8px 24px rgba(53,32,21,.08);
	--cfpo-ai-shadow-md:0 18px 50px rgba(53,32,21,.16);
	--cfpo-ai-shadow-lg:0 34px 90px rgba(53,32,21,.24);

	--cfpo-ai-radius-sm:14px;
	--cfpo-ai-radius-md:20px;
	--cfpo-ai-radius-lg:28px;

	--cfpo-ai-transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease,
		transform .2s ease,
		opacity .2s ease;
}

/* =========================================================
   Widget Container
========================================================= */

.cfpo-ai-widget{
	position:fixed;
	right:26px;
	bottom:26px;
	z-index:9999999;
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;
	font-synthesis:none;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* =========================================================
   Floating AI Button
========================================================= */

.cfpo-ai-toggle{
	position:relative;
	width:70px;
	height:70px;
	padding:0;
	border:1px solid rgba(255,255,255,.28);
	border-radius:50%;
	background:
		linear-gradient(
			145deg,
			var(--cfpo-ai-brown-600) 0%,
			var(--cfpo-ai-brown-800) 55%,
			var(--cfpo-ai-brown-950) 100%
		);
	color:#ffe9a8;
	font-size:23px;
	font-weight:800;
	letter-spacing:.04em;
	cursor:pointer;

	display:flex;
	align-items:center;
	justify-content:center;

	box-shadow:
		0 0 0 5px rgba(212,160,23,.16),
		0 18px 45px rgba(53,32,21,.32);

	transition:var(--cfpo-ai-transition);
	isolation:isolate;
}

.cfpo-ai-toggle span{
	position:relative;
	z-index:2;
}

.cfpo-ai-toggle::before{
	content:"Chat with us  ✦";
	position:absolute;
	right:86px;
	top:50%;
	transform:translateY(-50%);

	padding:12px 17px;
	border:1px solid rgba(212,160,23,.24);
	border-radius:15px;

	background:rgba(255,255,255,.96);
	color:var(--cfpo-ai-brown-800);

	font-size:14px;
	font-weight:750;
	line-height:1.2;
	letter-spacing:-.01em;
	white-space:nowrap;

	box-shadow:
		0 14px 38px rgba(53,32,21,.14),
		inset 0 1px 0 rgba(255,255,255,.9);

	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);

	transition:var(--cfpo-ai-transition);
}

.cfpo-ai-toggle::after{
	content:"";
	position:absolute;
	right:78px;
	top:50%;

	width:15px;
	height:15px;

	background:rgba(255,255,255,.97);
	border-top:1px solid rgba(212,160,23,.24);
	border-right:1px solid rgba(212,160,23,.24);

	transform:translateY(-50%) rotate(45deg);
}

.cfpo-ai-toggle:hover{
	transform:translateY(-4px) scale(1.035);
	box-shadow:
		0 0 0 7px rgba(212,160,23,.18),
		0 24px 54px rgba(53,32,21,.38);
}

.cfpo-ai-toggle:hover::before{
	transform:translateY(-50%) translateX(-3px);
	box-shadow:
		0 18px 44px rgba(53,32,21,.18),
		inset 0 1px 0 rgba(255,255,255,.9);
}

.cfpo-ai-toggle:active{
	transform:translateY(-1px) scale(.98);
}

.cfpo-ai-toggle:focus-visible{
	outline:3px solid rgba(212,160,23,.42);
	outline-offset:5px;
}

/* Decorative inner highlight */

.cfpo-ai-chat-icon{
	width:30px;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.cfpo-ai-chat-icon svg{
	width:100%;
	height:100%;
	display:block;
}

.cfpo-ai-avatar svg{
	width:28px;
	height:28px;
	display:block;
}

/* =========================================================
   Chat Panel
========================================================= */

.cfpo-ai-chat-panel{
	position:fixed;
	right:26px;
	bottom:112px;

	width:min(420px, calc(100vw - 32px));
	height:min(680px, calc(100dvh - 138px));
	min-height:500px;

	display:flex;
	flex-direction:column;

	background:rgba(255,253,249,.98);
	border:1px solid rgba(212,160,23,.32);
	border-radius:var(--cfpo-ai-radius-lg);
	overflow:hidden;

	box-shadow:var(--cfpo-ai-shadow-lg);

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transform:translateY(18px) scale(.97);
	transform-origin:bottom right;

	transition:
		opacity .22s ease,
		transform .22s ease,
		visibility .22s ease;
}

.cfpo-ai-chat-panel.open{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateY(0) scale(1);
}

/* =========================================================
   Header
========================================================= */

.cfpo-ai-chat-header{
	position:relative;
	display:flex;
	align-items:center;
	gap:14px;
	padding:20px 20px 18px;

	background:
		radial-gradient(
			circle at 15% 0%,
			rgba(228,184,61,.22),
			transparent 36%
		),
		linear-gradient(
			135deg,
			var(--cfpo-ai-brown-950),
			var(--cfpo-ai-brown-800) 56%,
			var(--cfpo-ai-brown-700)
		);

	color:var(--cfpo-ai-white);
	flex-shrink:0;
	overflow:hidden;
}

.cfpo-ai-chat-header::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:3px;
	background:
		linear-gradient(
			90deg,
			transparent,
			var(--cfpo-ai-gold-400),
			var(--cfpo-ai-gold-500),
			transparent
		);
}

.cfpo-ai-avatar{
	position:relative;
	width:52px;
	height:52px;
	border-radius:17px;
	flex-shrink:0;

	display:flex;
	align-items:center;
	justify-content:center;

	background:
		linear-gradient(
			145deg,
			var(--cfpo-ai-gold-400),
			var(--cfpo-ai-gold-600)
		);

	color:var(--cfpo-ai-brown-950);
	border:1px solid rgba(255,255,255,.35);

	font-size:19px;
	font-weight:900;
	letter-spacing:.03em;

	box-shadow:
		0 10px 24px rgba(0,0,0,.2),
		inset 0 1px 0 rgba(255,255,255,.42);
}

.cfpo-ai-avatar::after{
	content:"";
	position:absolute;
	right:-2px;
	bottom:-2px;
	width:12px;
	height:12px;
	border:3px solid var(--cfpo-ai-brown-800);
	border-radius:50%;
	background:#63c174;
}

.cfpo-ai-chat-header > div:not(.cfpo-ai-avatar){
	min-width:0;
	flex:1;
}

.cfpo-ai-chat-header h3{
	margin:0;
	color:#fff;
	font-size:19px;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.025em;
}

.cfpo-ai-chat-header p{
	margin:5px 0 0;
	color:rgba(255,255,255,.74);
	font-size:12.5px;
	font-weight:450;
	line-height:1.45;
}

.cfpo-ai-close{
	width:36px;
	height:36px;
	margin-left:4px;
	padding:0;
	border:1px solid rgba(255,255,255,.15);
	border-radius:12px;
	flex-shrink:0;

	display:flex;
	align-items:center;
	justify-content:center;

	background:rgba(255,255,255,.08);
	color:rgba(255,255,255,.88);

	font-size:25px;
	font-weight:300;
	line-height:1;
	cursor:pointer;

	transition:var(--cfpo-ai-transition);
}

.cfpo-ai-close:hover{
	background:rgba(255,255,255,.16);
	border-color:rgba(244,208,111,.46);
	color:#fff;
	transform:rotate(4deg);
}

.cfpo-ai-close:focus-visible{
	outline:2px solid var(--cfpo-ai-gold-300);
	outline-offset:2px;
}

/* =========================================================
   Messages Area
========================================================= */

.cfpo-ai-chat-messages{
	flex:1;
	min-height:0;
	padding:22px 18px 16px;
	overflow-y:auto;
	overscroll-behavior:contain;
	scroll-behavior:smooth;

	background:
		radial-gradient(
			circle at 5% 0%,
			rgba(228,184,61,.10),
			transparent 25%
		),
		linear-gradient(
			180deg,
			#fffdf9 0%,
			#faf6ef 100%
		);
}

.cfpo-ai-message{
	position:relative;
	width:fit-content;
	max-width:84%;
	margin-bottom:14px;
	padding:12px 15px;

	border-radius:18px;

	font-size:14px;
	font-weight:450;
	line-height:1.55;
	overflow-wrap:anywhere;
	word-break:normal;

	animation:cfpoAiMessageIn .22s ease both;
}

@keyframes cfpoAiMessageIn{
	from{
		opacity:0;
		transform:translateY(7px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

.cfpo-ai-message-bot{
	margin-right:auto;
	background:rgba(255,255,255,.96);
	color:var(--cfpo-ai-text);
	border:1px solid var(--cfpo-ai-border);
	border-bottom-left-radius:5px;

	box-shadow:
		0 8px 24px rgba(53,32,21,.07),
		inset 0 1px 0 rgba(255,255,255,.8);
}

.cfpo-ai-message-user{
	margin-left:auto;
	background:
		linear-gradient(
			135deg,
			var(--cfpo-ai-brown-800),
			var(--cfpo-ai-brown-700)
		);
	color:#fff;
	border:1px solid rgba(255,255,255,.09);
	border-bottom-right-radius:5px;

	box-shadow:0 10px 26px rgba(75,46,25,.2);
}

/* =========================================================
   Quick Actions
========================================================= */

.cfpo-ai-quick-actions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:9px;
	margin:10px 0 18px;
}

.cfpo-ai-quick-actions button{
	width:100%;
	min-height:48px;
	padding:11px 12px;

	border:1px solid var(--cfpo-ai-border);
	border-radius:14px;

	background:rgba(255,255,255,.78);
	color:var(--cfpo-ai-brown-800);

	font-family:inherit;
	font-size:12.5px;
	font-weight:700;
	line-height:1.35;
	text-align:left;

	cursor:pointer;
	box-shadow:0 6px 18px rgba(53,32,21,.05);

	transition:var(--cfpo-ai-transition);
}

.cfpo-ai-quick-actions button:hover{
	background:#fff;
	border-color:rgba(212,160,23,.58);
	color:var(--cfpo-ai-brown-950);

	transform:translateY(-2px);

	box-shadow:
		0 12px 26px rgba(53,32,21,.1),
		0 0 0 3px rgba(212,160,23,.08);
}

.cfpo-ai-quick-actions button:active{
	transform:translateY(0);
}

.cfpo-ai-quick-actions button:focus-visible{
	outline:2px solid rgba(212,160,23,.5);
	outline-offset:2px;
}

/* =========================================================
   Input Area
========================================================= */

.cfpo-ai-chat-form{
	display:flex;
	align-items:flex-end;
	gap:10px;
	padding:14px 15px;

	background:rgba(255,255,255,.96);
	border-top:1px solid var(--cfpo-ai-border);

	flex-shrink:0;
}

.cfpo-ai-chat-form textarea{
	flex:1;
	width:100%;
	min-width:0;
	min-height:50px;
	max-height:120px;
	resize:none;

	padding:14px 15px;

	border:1px solid #e5dac9;
	border-radius:16px;

	background:#fbf8f3;
	color:var(--cfpo-ai-text);

	font-family:inherit;
	font-size:14px;
	font-weight:450;
	line-height:1.45;

	outline:none;

	transition:var(--cfpo-ai-transition);
}

.cfpo-ai-chat-form textarea::placeholder{
	color:#9a8d81;
	opacity:1;
}

.cfpo-ai-chat-form textarea:hover{
	border-color:#d8c8b1;
	background:#fff;
}

.cfpo-ai-chat-form textarea:focus{
	background:#fff;
	border-color:var(--cfpo-ai-gold-500);
	box-shadow:0 0 0 4px rgba(212,160,23,.12);
}

.cfpo-ai-chat-form button{
	width:76px;
	height:50px;
	padding:0 14px;
	border:0;
	border-radius:16px;
	flex-shrink:0;

	background:
		linear-gradient(
			135deg,
			var(--cfpo-ai-gold-500),
			var(--cfpo-ai-gold-700)
		);

	color:#fff;

	font-family:inherit;
	font-size:13px;
	font-weight:800;
	letter-spacing:.01em;

	cursor:pointer;

	box-shadow:
		0 10px 22px rgba(169,119,10,.24),
		inset 0 1px 0 rgba(255,255,255,.25);

	transition:var(--cfpo-ai-transition);
}

.cfpo-ai-chat-form button:hover{
	transform:translateY(-2px);
	background:
		linear-gradient(
			135deg,
			var(--cfpo-ai-gold-400),
			var(--cfpo-ai-gold-600)
		);
	box-shadow:
		0 14px 26px rgba(169,119,10,.3),
		inset 0 1px 0 rgba(255,255,255,.3);
}

.cfpo-ai-chat-form button:active{
	transform:translateY(0);
}

.cfpo-ai-chat-form button:focus-visible{
	outline:3px solid rgba(212,160,23,.32);
	outline-offset:3px;
}

/* =========================================================
   Disclaimer
========================================================= */

.cfpo-ai-disclaimer{
	padding:0 18px 13px;

	background:#fff;
	color:var(--cfpo-ai-muted);

	font-size:10.5px;
	font-weight:450;
	line-height:1.45;
	text-align:center;

	flex-shrink:0;
}

/* =========================================================
   Scrollbar
========================================================= */

.cfpo-ai-chat-messages{
	scrollbar-width:thin;
	scrollbar-color:#cfab62 transparent;
}

.cfpo-ai-chat-messages::-webkit-scrollbar{
	width:6px;
}

.cfpo-ai-chat-messages::-webkit-scrollbar-track{
	background:transparent;
}

.cfpo-ai-chat-messages::-webkit-scrollbar-thumb{
	background:#cfab62;
	border-radius:999px;
}

.cfpo-ai-chat-messages::-webkit-scrollbar-thumb:hover{
	background:#b78931;
}

/* =========================================================
   Tablet
========================================================= */

@media(max-width:768px){

	.cfpo-ai-widget{
		right:18px;
		bottom:18px;
	}

	.cfpo-ai-chat-panel{
		right:18px;
		bottom:100px;
		width:min(410px, calc(100vw - 36px));
		height:min(660px, calc(100dvh - 120px));
	}
}

/* =========================================================
   Mobile
========================================================= */

@media(max-width:520px){

	.cfpo-ai-widget{
		right:14px;
		bottom:14px;
	}

	.cfpo-ai-toggle{
		width:60px;
		height:60px;
		font-size:20px;

		box-shadow:
			0 0 0 4px rgba(212,160,23,.15),
			0 14px 34px rgba(53,32,21,.3);
	}

	.cfpo-ai-toggle span::before{
		width:36px;
		height:36px;
	}

	.cfpo-ai-toggle::before{
		content:"Chat with us  ✦";
		right:72px;
		padding:10px 13px;
		border-radius:13px;
		font-size:12px;
	}

	.cfpo-ai-toggle::after{
		right:65px;
		width:13px;
		height:13px;
	}

	.cfpo-ai-chat-panel{
		left:10px;
		right:10px;
		bottom:84px;

		width:auto;
		height:calc(100dvh - 98px);
		min-height:0;
		max-height:none;

		border-radius:22px;
		transform-origin:bottom center;
	}

	.cfpo-ai-chat-header{
		gap:11px;
		padding:15px 14px 14px;
	}

	.cfpo-ai-avatar{
		width:44px;
		height:44px;
		border-radius:14px;
		font-size:17px;
	}

	.cfpo-ai-avatar::after{
		width:10px;
		height:10px;
		border-width:2px;
	}

	.cfpo-ai-chat-header h3{
		font-size:16px;
	}

	.cfpo-ai-chat-header p{
		margin-top:3px;
		font-size:11px;
		line-height:1.35;
	}

	.cfpo-ai-close{
		width:33px;
		height:33px;
		border-radius:10px;
		font-size:23px;
	}

	.cfpo-ai-chat-messages{
		padding:16px 13px 12px;
	}

	.cfpo-ai-message{
		max-width:90%;
		margin-bottom:11px;
		padding:11px 13px;
		border-radius:16px;
		font-size:13.5px;
		line-height:1.5;
	}

	.cfpo-ai-message-bot{
		border-bottom-left-radius:5px;
	}

	.cfpo-ai-message-user{
		border-bottom-right-radius:5px;
	}

	.cfpo-ai-quick-actions{
		grid-template-columns:1fr;
		gap:8px;
		margin-top:8px;
	}

	.cfpo-ai-quick-actions button{
		min-height:44px;
		padding:10px 12px;
		border-radius:13px;
		font-size:12px;
	}

	.cfpo-ai-chat-form{
		gap:8px;
		padding:11px;
	}

	.cfpo-ai-chat-form textarea{
		min-height:46px;
		padding:12px 13px;
		border-radius:14px;
		font-size:13px;
	}

	.cfpo-ai-chat-form button{
		width:66px;
		height:46px;
		padding:0 10px;
		border-radius:14px;
		font-size:12px;
	}

	.cfpo-ai-disclaimer{
		padding:0 12px 10px;
		font-size:9.5px;
	}
}

/* =========================================================
   Very Small Phones
========================================================= */

@media(max-width:360px){

	.cfpo-ai-toggle::before{
		content:"Chat  ✦";
	}

	.cfpo-ai-chat-header p{
		display:none;
	}

	.cfpo-ai-quick-actions button{
		font-size:11.5px;
	}
}

/* =========================================================
   Reduced Motion Accessibility
========================================================= */

@media(prefers-reduced-motion:reduce){

	.cfpo-ai-toggle,
	.cfpo-ai-toggle::before,
	.cfpo-ai-close,
	.cfpo-ai-chat-panel,
	.cfpo-ai-message,
	.cfpo-ai-quick-actions button,
	.cfpo-ai-chat-form textarea,
	.cfpo-ai-chat-form button{
		animation:none !important;
		transition:none !important;
		scroll-behavior:auto !important;
	}
}
/* =========================================================
   Structured AI Response
========================================================= */

.cfpo-ai-message-bot section{
	display:flex;
	flex-direction:column;
	gap:0;
}

.cfpo-ai-message-bot h4{
	margin:18px 0 7px;
	color:var(--cfpo-ai-brown-800);
	font-size:14px;
	font-weight:800;
	line-height:1.35;
	letter-spacing:-.01em;
}

.cfpo-ai-message-bot h4:first-child{
	margin-top:0;
}

.cfpo-ai-message-bot p{
	margin:0 0 10px;
	color:var(--cfpo-ai-text);
	font-size:14px;
	line-height:1.65;
}

.cfpo-ai-message-bot p:last-child{
	margin-bottom:0;
}

.cfpo-ai-message-bot ul{
	margin:2px 0 10px;
	padding:0;
	list-style:none;
}

.cfpo-ai-message-bot li{
	position:relative;
	margin:0 0 7px;
	padding-left:18px;
	color:var(--cfpo-ai-text);
	font-size:14px;
	line-height:1.55;
}

.cfpo-ai-message-bot li:last-child{
	margin-bottom:0;
}

.cfpo-ai-message-bot li::before{
	content:"";
	position:absolute;
	left:2px;
	top:.68em;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--cfpo-ai-gold-500);
	box-shadow:0 0 0 3px rgba(212,160,23,.12);
}

.cfpo-ai-message-bot blockquote{
	margin:10px 0;
	padding:12px 14px;
	border-left:3px solid var(--cfpo-ai-gold-500);
	border-radius:0 12px 12px 0;
	background:rgba(212,160,23,.08);
	color:var(--cfpo-ai-brown-800);
	font-size:13.5px;
	font-style:italic;
	line-height:1.6;
}

.cfpo-ai-message-bot strong{
	color:var(--cfpo-ai-brown-900);
	font-weight:800;
}
@media (max-width: 760px) {
	.cfpo-ai-chat-window,
	.cfpo-chatbot-window {
		position: fixed !important;
		left: 8px !important;
		right: 8px !important;
		top: auto !important;
		bottom: 142px !important;
		width: auto !important;
		max-width: none !important;
		height: min(68dvh, 650px) !important;
		max-height: calc(100dvh - 175px) !important;
		overflow: hidden !important;
		z-index: 99998 !important;
	}

	.cfpo-ai-chat-messages,
	.cfpo-chatbot-messages {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.cfpo-ai-chat-launcher,
	.cfpo-chat-launcher {
		bottom: 82px !important;
		right: 12px !important;
	}
}