/* Flutra AI Chatbot – widget styles. Brand tokens are injected inline from settings.
 * Every selector starts with #fac-root so theme / Elementor kit rules (e.g. ".elementor-kit-8 button")
 * can never restyle the widget. Keep it that way when adding rules. */
#fac-root {
	--fac-primary: #914C9E;
	--fac-primary-dark: #5E2C69;
	--fac-accent: #FBBB7E;
	--fac-night: #2B1631;
	--fac-bg: #FBF8F4;
	--fac-ink: #1D1420;
	--fac-ink2: #3A2A40;
	--fac-muted: #756C7A;
	--fac-line: color-mix(in srgb, var(--fac-primary) 14%, #fff);
	--fac-lav: color-mix(in srgb, var(--fac-primary) 8%, #fff);
	--fac-ring: color-mix(in srgb, var(--fac-primary) 18%, transparent);
	--fac-radius: 24px;
	--fac-shadow: 0 32px 80px -28px rgba(30, 14, 36, .5), 0 10px 28px -14px rgba(30, 14, 36, .28);
	--fac-ease: cubic-bezier(.2, .8, .2, 1);
	position: fixed;
	z-index: 2147483000;
	font-family: Figtree, "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	color: var(--fac-ink);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Reset: neutralise theme / page-builder styles inside the widget ---------- */
#fac-root *, #fac-root *::before, #fac-root *::after { box-sizing: border-box; }
#fac-root [hidden] { display: none !important; }
#fac-root button,
#fac-root textarea,
#fac-root input {
	-webkit-appearance: none; appearance: none;
	margin: 0; padding: 0;
	width: auto; height: auto; min-width: 0; min-height: 0; max-width: none;
	border: 0; border-radius: 0;
	background: none; box-shadow: none; outline: none;
	color: inherit;
	font: inherit; letter-spacing: inherit; text-transform: none; text-decoration: none; text-shadow: none;
	line-height: inherit; text-align: inherit; white-space: normal;
	transition: none; transform: none; filter: none;
}
#fac-root button { cursor: pointer; -webkit-user-select: none; user-select: none; }
#fac-root button:focus { outline: none; }
#fac-root button:focus-visible { outline: 2px solid var(--fac-accent); outline-offset: 2px; }
#fac-root p, #fac-root ul, #fac-root small, #fac-root strong, #fac-root span, #fac-root em { margin: 0; padding: 0; font-family: inherit; letter-spacing: inherit; }
#fac-root a { color: inherit; box-shadow: none; }
#fac-root img { border: 0; box-shadow: none; border-radius: 0; }
#fac-root svg { display: block; flex-shrink: 0; }
#fac-root .fac-launcher-ico svg,
#fac-root .fac-icon-btn svg,
#fac-root .fac-send svg,
#fac-root .fac-teaser-x svg,
#fac-root .fac-avatar svg { width: 100%; height: 100%; }

/* ---------- Position: fac-v-{bottom|middle|top} + fac-h-{right|left}; offsets from settings ---------- */
#fac-root.fac-v-bottom { bottom: var(--fac-oy, 22px); }
#fac-root.fac-v-top { top: var(--fac-oy, 22px); }
#fac-root.fac-v-middle { top: calc(50% - 30px); }
#fac-root.fac-h-right { right: var(--fac-ox, 22px); }
#fac-root.fac-h-left { left: var(--fac-ox, 22px); }
.admin-bar #fac-root.fac-v-top { top: calc(var(--fac-oy, 22px) + 32px); }
@media (max-width: 782px) { .admin-bar #fac-root.fac-v-top { top: calc(var(--fac-oy, 22px) + 46px); } }

/* ---------- Launcher ---------- */
#fac-root .fac-launcher {
	position: relative;
	display: grid; place-items: center;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--fac-primary) 0%, var(--fac-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--fac-primary-dark) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: transform .3s var(--fac-ease), box-shadow .3s var(--fac-ease);
}
#fac-root .fac-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 20px 40px -12px color-mix(in srgb, var(--fac-primary-dark) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18); }
#fac-root .fac-launcher:active { transform: scale(.97); }
#fac-root .fac-launcher:focus-visible { outline: 3px solid var(--fac-accent); outline-offset: 3px; }
#fac-root .fac-launcher-ico { grid-area: 1 / 1; width: 28px; height: 28px; transition: transform .35s var(--fac-ease), opacity .25s; }
#fac-root .fac-ico-chat { color: var(--fac-accent); }
#fac-root .fac-ico-close { opacity: 0; transform: rotate(-90deg) scale(.6); width: 22px; height: 22px; }
#fac-root.fac-open .fac-ico-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
#fac-root.fac-open .fac-ico-close { opacity: 1; transform: none; }
#fac-root .fac-dot {
	position: absolute; top: 3px; right: 3px;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--fac-accent); border: 2.5px solid #fff;
	animation: fac-pulse 2.4s infinite;
}
#fac-root.fac-open .fac-dot { display: none; }
@keyframes fac-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fac-accent) 70%, transparent); }
	70% { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Teaser ---------- */
#fac-root .fac-teaser {
	position: absolute;
	width: 284px;
	padding: 14px 16px 15px;
	background: #fff; color: var(--fac-ink2);
	border-radius: 20px;
	border: 1px solid rgba(30, 14, 36, .06);
	box-shadow: var(--fac-shadow);
	cursor: pointer;
	animation: fac-rise .45s var(--fac-ease);
}
#fac-root .fac-teaser-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 26px; }
#fac-root .fac-teaser-head .fac-avatar { width: 32px; height: 32px; padding: 7px; }
#fac-root .fac-teaser-head strong { display: block; font-family: Outfit, Figtree, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--fac-ink); }
#fac-root .fac-teaser-head small { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.3; color: var(--fac-muted); }
#fac-root .fac-teaser-text { display: block; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--fac-ink2); }
#fac-root .fac-teaser-x {
	position: absolute; top: 10px; right: 10px;
	width: 26px; height: 26px; padding: 7px;
	border-radius: 50%;
	background: transparent; color: var(--fac-muted);
	transition: background .2s, color .2s;
}
#fac-root .fac-teaser-x:hover { background: var(--fac-lav); color: var(--fac-primary-dark); }
#fac-root.fac-v-bottom .fac-teaser { bottom: 76px; }
#fac-root.fac-v-top .fac-teaser { top: 76px; }
#fac-root.fac-v-middle .fac-teaser { top: 50%; transform: translateY(-50%); }
#fac-root.fac-h-right .fac-teaser { right: 0; }
#fac-root.fac-h-left .fac-teaser { left: 0; }
#fac-root.fac-v-middle.fac-h-right .fac-teaser { right: 76px; }
#fac-root.fac-v-middle.fac-h-left .fac-teaser { left: 76px; }
#fac-root.fac-v-bottom.fac-h-right .fac-teaser { border-bottom-right-radius: 6px; }
#fac-root.fac-v-bottom.fac-h-left .fac-teaser { border-bottom-left-radius: 6px; }
#fac-root.fac-v-top.fac-h-right .fac-teaser { border-top-right-radius: 6px; }
#fac-root.fac-v-top.fac-h-left .fac-teaser { border-top-left-radius: 6px; }

/* ---------- Panel ---------- */
#fac-root .fac-panel {
	position: absolute;
	display: flex; flex-direction: column;
	width: 400px; max-width: calc(100vw - 2 * var(--fac-ox, 22px));
	height: min(660px, calc(100vh - var(--fac-oy, 22px) - 100px));
	background: var(--fac-bg);
	border-radius: var(--fac-radius);
	border: 1px solid rgba(30, 14, 36, .08);
	box-shadow: var(--fac-shadow);
	overflow: hidden;
	opacity: 0; transform: translateY(14px) scale(.98);
	transition: opacity .22s ease, transform .3s var(--fac-ease);
}
#fac-root.fac-v-bottom .fac-panel { bottom: 76px; }
#fac-root.fac-v-top .fac-panel { top: 76px; transform: translateY(-14px) scale(.98); }
#fac-root.fac-v-middle .fac-panel {
	top: 50%;
	height: min(660px, calc(100vh - 40px));
	margin-top: calc(min(660px, 100vh - 40px) / -2);
	max-width: calc(100vw - 2 * var(--fac-ox, 22px) - 76px);
	transform: translateX(14px) scale(.98);
}
#fac-root.fac-v-middle.fac-h-left .fac-panel { transform: translateX(-14px) scale(.98); }
#fac-root.fac-h-right .fac-panel { right: 0; transform-origin: bottom right; }
#fac-root.fac-h-left .fac-panel { left: 0; transform-origin: bottom left; }
#fac-root.fac-v-top.fac-h-right .fac-panel { transform-origin: top right; }
#fac-root.fac-v-top.fac-h-left .fac-panel { transform-origin: top left; }
#fac-root.fac-v-middle.fac-h-right .fac-panel { right: 76px; transform-origin: center right; }
#fac-root.fac-v-middle.fac-h-left .fac-panel { left: 76px; transform-origin: center left; }
#fac-root.fac-open .fac-panel { opacity: 1; transform: none; }

/* Header */
#fac-root .fac-head {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 12px 16px 18px;
	background-color: var(--fac-night);
	background-image:
		radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--fac-primary) 60%, transparent) 0%, transparent 62%),
		radial-gradient(60% 120% at 0% 100%, color-mix(in srgb, var(--fac-accent) 14%, transparent) 0%, transparent 70%);
	color: #F6F0F7;
	flex-shrink: 0;
}
#fac-root .fac-head::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--fac-accent), color-mix(in srgb, var(--fac-accent) 40%, var(--fac-primary)));
}
#fac-root .fac-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
#fac-root .fac-logo { display: block; height: 28px; width: auto; max-width: 104px; object-fit: contain; flex-shrink: 0; }
#fac-root .fac-logo-text { font-family: Outfit, sans-serif; font-weight: 700; font-size: 18px; color: #fff; }
#fac-root .fac-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-left: 12px; border-left: 1px solid rgba(246, 240, 247, .2); }
#fac-root .fac-id strong { font-family: Outfit, Figtree, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fac-root .fac-id span { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; color: #D6C9DA; white-space: nowrap; }
#fac-root .fac-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5FD39A; box-shadow: 0 0 0 3px rgba(95, 211, 154, .22); flex-shrink: 0; }
#fac-root .fac-head-actions { display: flex; gap: 2px; flex-shrink: 0; }
#fac-root .fac-icon-btn {
	width: 36px; height: 36px; padding: 9px;
	border-radius: 12px;
	background: transparent; color: #D6C9DA;
	transition: background .2s, color .2s;
}
#fac-root .fac-icon-btn:hover { background: rgba(246, 240, 247, .12); color: #fff; }

/* ---------- Messages ---------- */
#fac-root .fac-body {
	flex: 1; min-height: 0;
	overflow-y: auto; overscroll-behavior: contain;
	padding: 20px 16px 10px;
	display: flex; flex-direction: column; gap: 12px;
	scroll-behavior: smooth;
}
#fac-root .fac-body::-webkit-scrollbar { width: 6px; }
#fac-root .fac-body::-webkit-scrollbar-thumb { background: var(--fac-line); border-radius: 6px; }

#fac-root .fac-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; animation: fac-rise .3s var(--fac-ease); }
#fac-root .fac-user { justify-content: flex-end; }
#fac-root .fac-avatar {
	display: block;
	width: 28px; height: 28px; padding: 6px; border-radius: 50%; flex-shrink: 0;
	background: linear-gradient(145deg, var(--fac-primary), var(--fac-primary-dark));
	color: var(--fac-accent);
}
#fac-root .fac-bubble {
	max-width: 82%; min-width: 0;
	padding: 10px 14px;
	border-radius: 18px;
	font-size: 14.5px; line-height: 1.5;
	word-wrap: break-word; overflow-wrap: anywhere;
}
#fac-root .fac-bot .fac-bubble {
	background: #fff; color: var(--fac-ink);
	border: 1px solid var(--fac-line);
	border-bottom-left-radius: 6px;
	box-shadow: 0 6px 16px -12px rgba(30, 14, 36, .35);
}
#fac-root .fac-user .fac-bubble {
	background: linear-gradient(145deg, var(--fac-primary), color-mix(in srgb, var(--fac-primary) 70%, var(--fac-primary-dark)));
	color: #fff;
	border-bottom-right-radius: 6px;
	box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--fac-primary-dark) 90%, transparent);
}
#fac-root .fac-bubble p { margin: 0 0 6px; }
#fac-root .fac-bubble p:last-child { margin-bottom: 0; }
#fac-root .fac-bubble ul { margin: 4px 0 8px; padding-left: 18px; list-style: disc; }
#fac-root .fac-bubble li { margin: 3px 0; padding: 0; }
#fac-root .fac-bubble li::marker { color: var(--fac-primary); }
#fac-root .fac-bubble strong { font-weight: 700; color: inherit; }
#fac-root .fac-bubble em { font-style: italic; }
#fac-root .fac-bot .fac-bubble a { color: var(--fac-primary-dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--fac-accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
#fac-root .fac-user .fac-bubble a { color: #fff; text-decoration: underline; }

#fac-root .fac-typing .fac-bubble { display: flex; gap: 4px; padding: 14px 16px; }
#fac-root .fac-typing i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--fac-primary); opacity: .35; animation: fac-blink 1.2s infinite; }
#fac-root .fac-typing i:nth-child(2) { animation-delay: .15s; }
#fac-root .fac-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fac-blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes fac-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Quick replies */
#fac-root .fac-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 36px; animation: fac-rise .35s var(--fac-ease); }
#fac-root .fac-chips button {
	padding: 7px 13px;
	border: 1.5px solid color-mix(in srgb, var(--fac-primary) 28%, #fff);
	border-radius: 999px;
	background: #fff; color: var(--fac-primary-dark);
	font-size: 13px; font-weight: 600; line-height: 1.3;
	transition: border-color .2s, background .2s, transform .2s;
}
#fac-root .fac-chips button:hover { border-color: var(--fac-primary); background: var(--fac-lav); transform: translateY(-1px); }

/* Offer card */
#fac-root .fac-offer {
	margin-left: 36px;
	background: #fff;
	border-radius: 18px;
	border: 1px solid var(--fac-line);
	box-shadow: 0 12px 30px -20px rgba(30, 14, 36, .45);
	overflow: hidden;
	animation: fac-rise .35s var(--fac-ease);
}
#fac-root .fac-offer-top { display: flex; gap: 10px; align-items: center; padding: 14px 16px; background: var(--fac-lav); }
#fac-root .fac-offer-top svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--fac-primary); color: #fff; }
#fac-root .fac-offer-top small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fac-primary); }
#fac-root .fac-offer-top strong { display: block; font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--fac-ink); }
#fac-root .fac-offer ul { list-style: none; margin: 0; padding: 6px 16px; }
#fac-root .fac-offer li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--fac-line); font-size: 13px; }
#fac-root .fac-offer li:last-child { border-bottom: 0; }
#fac-root .fac-offer li b { white-space: nowrap; font-weight: 600; color: var(--fac-ink2); }
#fac-root .fac-offer-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 16px; padding: 10px 0; border-top: 2px solid var(--fac-primary); font-size: 13px; color: var(--fac-muted); }
#fac-root .fac-offer-total div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-items: baseline; }
#fac-root .fac-offer-total b { font-family: Outfit, sans-serif; font-size: 17px; color: var(--fac-primary-dark); }
#fac-root .fac-offer-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 16px 12px; font-size: 12px; color: var(--fac-muted); }
#fac-root .fac-offer-note svg { width: 14px; height: 14px; color: #1F6B3E; }
#fac-root .fac-offer-btn {
	display: block; margin: 0 16px 16px; padding: 11px;
	text-align: center; border-radius: 999px;
	background: var(--fac-primary); color: #fff;
	font-weight: 700; font-size: 14px; text-decoration: none;
	transition: background .2s;
}
#fac-root .fac-offer-btn:hover { background: var(--fac-primary-dark); color: #fff; }

#fac-root .fac-pill {
	align-self: center;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px;
	background: #E3F4EA; color: #1F6B3E;
	font-size: 12px; font-weight: 600;
	animation: fac-rise .3s var(--fac-ease);
}
#fac-root .fac-pill svg { width: 14px; height: 14px; }

/* ---------- Composer ---------- */
#fac-root .fac-form {
	display: flex; align-items: flex-end; gap: 8px;
	margin: 6px 12px 0; padding: 5px 5px 5px 16px;
	background: #fff;
	border: 1.5px solid var(--fac-line);
	border-radius: 22px;
	box-shadow: 0 6px 18px -14px rgba(30, 14, 36, .4);
	transition: border-color .2s, box-shadow .2s;
	flex-shrink: 0;
}
#fac-root .fac-form:focus-within { border-color: var(--fac-primary); box-shadow: 0 0 0 4px var(--fac-ring); }
#fac-root .fac-form textarea {
	display: block;
	flex: 1; min-width: 0;
	resize: none; overflow-y: auto;
	padding: 9px 0; min-height: 40px; max-height: 120px;
	background: transparent; color: var(--fac-ink);
	font-size: 15px; line-height: 1.45;
	white-space: pre-wrap;
}
#fac-root .fac-form textarea:focus,
#fac-root .fac-form textarea:focus-visible { outline: none; box-shadow: none; border: 0; }
#fac-root .fac-form textarea::placeholder { color: #9C93A2; opacity: 1; }
#fac-root .fac-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
#fac-root .fac-send {
	display: grid; place-items: center;
	width: 40px; height: 40px; padding: 10px; flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--fac-primary), var(--fac-primary-dark));
	color: #fff;
	transition: transform .2s, opacity .2s, filter .2s;
}
#fac-root .fac-send:hover { transform: scale(1.06); filter: brightness(1.08); }
#fac-root .fac-send:disabled { opacity: .4; cursor: default; transform: none; filter: none; }

#fac-root .fac-foot {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px 12px 12px; flex-shrink: 0;
}
#fac-root .fac-wa {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	background: #E3F4EA; color: #1F6B3E;
	font-size: 12px; font-weight: 700; line-height: 1.3; text-decoration: none;
	transition: background .2s;
}
#fac-root .fac-wa:hover { background: #D2EDDD; color: #1F6B3E; }
#fac-root .fac-wa svg { width: 15px; height: 15px; }
#fac-root .fac-foot small { font-size: 11px; line-height: 1.4; color: var(--fac-muted); text-align: center; }
#fac-root .fac-foot small a { color: var(--fac-muted); text-decoration: underline; }

/* Shortcode button (lives in page content, outside #fac-root) */
a.fac-shortcode-btn {
	display: inline-block; padding: 13px 26px; border-radius: 999px;
	background: #914C9E; color: #fff !important; font-weight: 700; text-decoration: none !important;
	transition: background .2s;
}
a.fac-shortcode-btn:hover { background: #5E2C69; }

/* ---------- Mobile: full screen ---------- */
@media (max-width: 520px) {
	#fac-root .fac-panel {
		position: fixed; inset: 0;
		width: 100%; height: 100%; height: 100dvh; max-width: none;
		margin: 0; border-radius: 0; border: 0;
		transform: translateY(14px);
	}
	#fac-root.fac-open .fac-panel { transform: none; }
	#fac-root.fac-open .fac-launcher { display: none; }
	#fac-root .fac-form textarea { font-size: 16px; }
	#fac-root .fac-teaser { width: min(284px, calc(100vw - 32px)); }
	#fac-root .fac-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	#fac-root *, #fac-root *::before, #fac-root *::after { animation: none !important; transition: none !important; }
}