/* ChatFlow AI - frontend widget styles */
.cfa-root {
	--cfa-primary: #2563eb;
	--cfa-primary-dark: #1e3a8a;
	--cfa-button: #2563eb;
	--cfa-button-dark: #1e3a8a;
	--cfa-radius: 16px;
	--cfa-width: 380px;
	--cfa-bg: #ffffff;
	--cfa-text: #1f2937;
	--cfa-muted: #6b7280;
	--cfa-border: #e5e7eb;
	--cfa-bubble-user-text: #ffffff;
	--cfa-bubble-assistant-bg: #ffffff;
	all: initial;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cfa-text, #1f2937);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.cfa-root *, .cfa-root *::before, .cfa-root *::after {
	box-sizing: border-box !important;
	font-family: inherit;
}
/* Reset form-control defaults explicitly: buttons/inputs do not
   automatically inherit color or font from an ancestor in every
   browser, so every interactive element below sets its own color. */
.cfa-root button, .cfa-root input, .cfa-root textarea {
	font: inherit;
	line-height: inherit;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.cfa-launcher {
	position: fixed !important;
	bottom: 24px;
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	min-height: 60px !important;
	max-width: 60px !important;
	max-height: 60px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	box-sizing: border-box !important;
	cursor: pointer;
	background: var(--cfa-button, #2563eb);
	background: linear-gradient(135deg, var(--cfa-button, #2563eb), var(--cfa-button-dark, #1e3a8a));
	box-shadow: 0 10px 25px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.02);
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	z-index: 999999;
	transition: transform .18s ease, box-shadow .18s ease;
}
.cfa-launcher:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.cfa-launcher[data-pos="bottom-right"] { right: 24px; }
.cfa-launcher[data-pos="bottom-left"] { left: 24px; }
.cfa-launcher svg {
	width: 26px !important; height: 26px !important; max-width: none !important;
	flex-shrink: 0 !important; display: block !important;
	fill: none !important; stroke: #fff !important;
	transition: transform .2s ease, opacity .2s ease;
}
.cfa-launcher .cfa-icon-close { position: absolute; opacity: 0; transform: scale(.6) rotate(-45deg); }
.cfa-launcher.is-open .cfa-icon-chat { opacity: 0; transform: scale(.6) rotate(45deg); }
.cfa-launcher.is-open .cfa-icon-close { opacity: 1; transform: scale(1) rotate(0); }

.cfa-panel {
	position: fixed !important;
	bottom: 96px;
	width: var(--cfa-width, 380px) !important;
	max-width: calc(100vw - 32px);
	height: 560px !important;
	max-height: calc(100vh - 140px);
	background: var(--cfa-bg, #fff) !important;
	border-radius: var(--cfa-radius, 16px) !important;
	box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04);
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden;
	z-index: 999998;
	opacity: 0;
	transform: translateY(16px) scale(.98);
	pointer-events: none;
	transition: opacity .22s cubic-bezier(.2,.9,.3,1.2), transform .22s cubic-bezier(.2,.9,.3,1.2);
	box-sizing: border-box !important;
}
.cfa-panel[data-pos="bottom-right"] { right: 24px; }
.cfa-panel[data-pos="bottom-left"] { left: 24px; }
.cfa-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.cfa-root--inline .cfa-panel {
	position: relative !important;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	border: 1px solid var(--cfa-border, #e5e7eb);
	height: 560px;
	max-height: 640px;
}
.cfa-root--inline .cfa-launcher { display: none; }

.cfa-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--cfa-primary, #2563eb);
	background: linear-gradient(135deg, var(--cfa-primary, #2563eb), var(--cfa-primary-dark, #1e3a8a));
	color: #fff !important;
	flex-shrink: 0;
}
.cfa-avatar {
	width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important;
	border-radius: 50% !important; box-sizing: border-box !important;
	background: rgba(255,255,255,.22);
	border: 1px solid rgba(255,255,255,.35);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; flex-shrink: 0;
}
.cfa-avatar img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.cfa-avatar svg { width: 20px !important; height: 20px !important; max-width: none !important; fill: none !important; stroke: #fff !important; }
.cfa-header-text { flex: 1; min-width: 0; }
.cfa-header-title { font-weight: 600; font-size: 15px; color: #fff !important; }
.cfa-header-subtitle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff !important; opacity: .92; }
.cfa-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; animation: cfa-pulse 1.8s infinite; }
.cfa-dot--offline { background: #9ca3af !important; animation: none !important; }
@keyframes cfa-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.cfa-close {
	background: rgba(255,255,255,.12) !important; border: none !important; color: #fff !important; cursor: pointer;
	width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
	padding: 0 !important; border-radius: 8px !important; box-sizing: border-box !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	flex-shrink: 0;
}
.cfa-close svg {
	width: 18px !important; height: 18px !important; max-width: none !important;
	display: block !important; flex-shrink: 0 !important;
	fill: none !important; stroke: #fff !important;
}
.cfa-close:hover { background: rgba(255,255,255,.22) !important; }

.cfa-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f9fafb;
	scrollbar-width: thin;
}
.cfa-messages::-webkit-scrollbar { width: 6px; }
.cfa-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.cfa-msg { display: flex; flex-direction: column; max-width: 82%; animation: cfa-fade-in .2s ease; }
@keyframes cfa-fade-in { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }
.cfa-msg-bubble { padding: 10px 13px; word-wrap: break-word; white-space: pre-wrap; font-size: 14px; }
.cfa-msg-time { font-size: 10px; color: var(--cfa-muted, #6b7280) !important; margin-top: 4px; padding: 0 2px; }

.cfa-msg--user { align-self: flex-end; align-items: flex-end; }
.cfa-msg--user .cfa-msg-bubble {
	background: var(--cfa-primary, #2563eb) !important;
	color: var(--cfa-bubble-user-text, #ffffff) !important;
	border-radius: 16px 16px 6px 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.cfa-msg--assistant { align-self: flex-start; align-items: flex-start; }
.cfa-msg--assistant .cfa-msg-bubble {
	background: var(--cfa-bubble-assistant-bg, #ffffff) !important;
	color: var(--cfa-text, #1f2937) !important;
	border: 1px solid var(--cfa-border, #e5e7eb);
	border-radius: 16px 16px 16px 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.cfa-msg--system { align-self: center; }
.cfa-msg--system .cfa-msg-bubble {
	background: transparent !important; color: var(--cfa-muted, #6b7280) !important; font-size: 12px; border: none; padding: 4px 8px; box-shadow: none;
}

.cfa-typing { display: flex; gap: 4px; padding: 12px 14px; align-self: flex-start; }
.cfa-typing span {
	width: 7px; height: 7px; border-radius: 50%; background: #9ca3af;
	animation: cfa-bounce 1.2s infinite;
}
.cfa-typing span:nth-child(2) { animation-delay: .15s; }
.cfa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cfa-bounce { 0%,60%,100%{transform: translateY(0); opacity:.5;} 30%{transform: translateY(-5px); opacity:1;} }

.cfa-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; flex-shrink: 0; }
.cfa-quick-btn {
	border: 1px solid var(--cfa-border, #e5e7eb) !important; background: #ffffff !important; color: var(--cfa-text, #1f2937) !important;
	border-radius: 999px !important; padding: 7px 13px !important; font-size: 12px !important; font-weight: 500; cursor: pointer;
	text-decoration: none; display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important;
	box-sizing: border-box !important;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.cfa-quick-btn:hover { background: #f3f4f6 !important; border-color: #d1d5db; transform: translateY(-1px); }
.cfa-quick-btn--whatsapp { color: #16a34a !important; border-color: #bbf7d0 !important; }
.cfa-quick-btn--whatsapp:hover { background: #f0fdf4 !important; }

/* Chip rows rendered inline within a conversation (e.g. price estimator
   category/tier picks) — same hardened box model as quick-actions above,
   since the same theme-override risk applies to any button here. */
.cfa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 6px 2px; max-width: 82%; }
.cfa-chip {
	border: 1px solid var(--cfa-primary, #2563eb) !important; background: #fff !important; color: var(--cfa-primary, #2563eb) !important;
	border-radius: 999px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 600; cursor: pointer;
	display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important;
	box-sizing: border-box !important;
	transition: background .15s ease, transform .1s ease;
}
.cfa-chip:hover { background: var(--cfa-primary, #2563eb) !important; color: #fff !important; transform: translateY(-1px); }

/* Exit feedback modal: pops over the whole panel when the visitor closes,
   instead of living inline in the message stream. */
.cfa-exit-modal {
	position: absolute !important; inset: 0 !important; z-index: 20;
	display: flex !important; align-items: center !important; justify-content: center !important;
	padding: 20px; box-sizing: border-box !important;
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, visibility 0s linear .18s;
}
.cfa-exit-modal.is-open { opacity: 1; visibility: visible; transition: opacity .18s ease; }
.cfa-exit-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(17,24,39,.45) !important; }
.cfa-exit-modal-card {
	position: relative; z-index: 1;
	background: #fff !important; color: var(--cfa-text, #1f2937) !important;
	border-radius: 14px !important; padding: 24px 22px !important;
	max-width: 240px; width: 100%; text-align: center;
	box-shadow: 0 16px 36px rgba(0,0,0,.3);
	box-sizing: border-box !important;
	transform: translateY(6px) scale(.97);
	transition: transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.cfa-exit-modal.is-open .cfa-exit-modal-card { transform: translateY(0) scale(1); }
.cfa-exit-modal-text { margin: 0 0 14px !important; font-size: 14px !important; font-weight: 600; color: var(--cfa-text, #1f2937) !important; }
.cfa-exit-modal-buttons { display: flex !important; justify-content: center !important; gap: 14px !important; margin-bottom: 12px !important; }
.cfa-exit-modal-buttons .cfa-feedback-btn { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; }
.cfa-exit-modal-buttons .cfa-feedback-btn svg { width: 20px !important; height: 20px !important; }

.cfa-feedback-btn {
	width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
	padding: 0 !important; border-radius: 50% !important; box-sizing: border-box !important;
	border: 1px solid var(--cfa-border, #e5e7eb) !important; background: #fff !important; color: var(--cfa-muted, #6b7280) !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.cfa-feedback-btn svg { width: 16px !important; height: 16px !important; max-width: none !important; display: block !important; stroke: currentColor !important; fill: none !important; }
.cfa-feedback-btn--like:hover { background: #f0fdf4 !important; border-color: #86efac !important; color: #16a34a !important; transform: translateY(-1px); }
.cfa-feedback-btn--dislike:hover { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #dc2626 !important; transform: translateY(-1px); }
.cfa-feedback-skip {
	background: transparent !important; border: none !important; color: var(--cfa-muted, #6b7280) !important;
	font-size: 12px !important; text-decoration: underline; cursor: pointer; padding: 0 4px !important;
	width: auto !important; height: auto !important;
}
.cfa-feedback-skip:hover { color: var(--cfa-text, #1f2937) !important; }

.cfa-consent { padding: 10px 16px; font-size: 12px; color: var(--cfa-muted, #6b7280) !important; border-top: 1px solid var(--cfa-border, #e5e7eb); flex-shrink: 0; background: #fff; }
.cfa-consent label { display: flex; gap: 8px; align-items: flex-start; color: inherit; }
.cfa-consent input { margin-top: 2px; width: auto !important; height: auto !important; }

.cfa-input-row {
	display: flex; align-items: flex-end; gap: 8px;
	padding: 12px 14px; border-top: 1px solid var(--cfa-border, #e5e7eb); background: #ffffff !important; flex-shrink: 0;
}
.cfa-hp {
	position: absolute !important; left: -9999px !important; top: auto !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
	opacity: 0 !important; pointer-events: none !important;
}
.cfa-input {
	flex: 1; resize: none; max-height: 120px; min-height: 38px !important;
	border: 1px solid var(--cfa-border, #e5e7eb) !important; border-radius: 20px !important; padding: 9px 14px !important;
	font-size: 14px !important; outline: none; color: var(--cfa-text, #1f2937) !important; background: #fff !important;
	width: 100% !important; box-sizing: border-box !important;
}
.cfa-input::placeholder { color: #9ca3af; opacity: 1; }
.cfa-input:focus { border-color: var(--cfa-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.cfa-send {
	width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important;
	padding: 0 !important; border-radius: 50% !important; border: none !important; box-sizing: border-box !important;
	cursor: pointer;
	background: var(--cfa-button, #2563eb) !important; color: #fff !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	flex-shrink: 0; transition: opacity .15s ease, transform .1s ease;
}
.cfa-send svg {
	stroke: #fff !important; fill: none !important; width: 16px !important; height: 16px !important;
	max-width: none !important; display: block !important; flex-shrink: 0 !important;
}
.cfa-send:hover:not(:disabled) { transform: scale(1.05); }
.cfa-send:disabled { opacity: .6; cursor: not-allowed; }
.cfa-send.is-busy svg { animation: cfa-spin 0.8s linear infinite; }
@keyframes cfa-spin { to { transform: rotate(360deg); } }

.cfa-branding {
	text-align: center !important; padding: 6px 10px 10px !important;
	font-size: 10px !important; background: #ffffff !important; flex-shrink: 0;
}
.cfa-branding a { color: var(--cfa-muted, #9ca3af) !important; text-decoration: none !important; }
.cfa-branding a:hover { color: var(--cfa-text, #1f2937) !important; text-decoration: underline !important; }

.cfa-error-bubble { color: #b91c1c !important; background: #fef2f2 !important; border: 1px solid #fecaca; padding: 10px 13px; border-radius: 12px; font-size: 13px; }

@media (max-width: 480px) {
	.cfa-panel:not(.cfa-root--inline .cfa-panel) {
		bottom: 0; right: 0 !important; left: 0 !important;
		width: 100%; max-width: 100%;
		height: 85vh; max-height: 85vh;
		border-radius: 16px 16px 0 0;
	}
	.cfa-launcher { bottom: 16px; }
	.cfa-launcher[data-pos="bottom-right"] { right: 16px; }
	.cfa-launcher[data-pos="bottom-left"] { left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.cfa-panel, .cfa-launcher, .cfa-msg, .cfa-dot, .cfa-typing span, .cfa-send.is-busy svg, .cfa-exit-modal, .cfa-exit-modal-card {
		animation: none !important; transition: none !important;
	}
}