/* cliexa AI Chatbot — Siri-style full-screen UI. Matches cliexa-assistant-mockup.html. Scoped. */

#cliexa-chatbot-root {
	--cx-navy: #0a1f3c; --cx-navy-deep: #061428;
	--cx-blue: #1877d4; --cx-blue-lt: #3a9bf0; --cx-cyan: #2dd4e0; --cx-violet: #6a5cff;
	--cx-ink: #0c2340; --cx-slate: #5b6b82; --cx-mist: #eef4fb; --cx-white: #fff;
	--cx-grad: linear-gradient(135deg, #1877d4 0%, #2dd4e0 100%);
	/* legacy aliases for reused component rules */
	--cliexa-cb-primary: #1877d4; --cliexa-cb-primary-dark: #0e3567; --cliexa-cb-accent: #2dd4e0;
	--cliexa-cb-text: #0c2340; --cliexa-cb-muted: #5b6b82; --cliexa-cb-border: #d7e2ee; --cliexa-cb-error: #b3261e; --cliexa-cb-card: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#cliexa-chatbot-root *, #cliexa-chatbot-root *::before, #cliexa-chatbot-root *::after { box-sizing: border-box; }

/* Host page blur/dim while open */
.cliexa-cb-hostblur { filter: blur(14px) brightness(.9) !important; pointer-events: none !important; transition: filter .5s ease; }
html.cliexa-cb-lock { overflow: hidden !important; }

/* ------------------------------ Orb ---------------------------------- */
/* !important throughout so a host WordPress theme's button styles can't turn the orb
   into a colored box / square. It must always be a white circle with the cliexa logo. */
.cliexa-cb-orb {
	position: fixed !important; right: 30px !important; bottom: 30px !important; z-index: 2147483000 !important;
	width: 62px !important; height: 62px !important; min-width: 0 !important; min-height: 0 !important;
	border-radius: 50% !important; cursor: pointer; border: none !important; padding: 6px !important; margin: 0 !important;
	overflow: hidden !important; background: #fff !important; background-image: none !important; color: inherit !important;
	display: grid !important; place-items: center !important;
	box-shadow: 0 8px 26px -4px rgba(24,119,212,.55), 0 0 22px 3px rgba(58,155,240,.45), 0 0 0 0 rgba(45,212,224,.5) !important;
	animation: cx-orbpulse 3.2s ease-in-out infinite; transition: transform .25s ease;
}
.cliexa-cb-orb:hover { transform: scale(1.08); }
.cliexa-cb-orb-mark { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; display: block !important; pointer-events: none; }
.cliexa-cb-orb-tip {
	position: fixed; right: 104px; bottom: 46px; z-index: 2147483000; white-space: nowrap;
	background: var(--cx-ink); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px;
	opacity: 0; transform: translateX(8px); transition: all .25s ease; pointer-events: none;
}
.cliexa-cb-orb:hover ~ .cliexa-cb-orb-tip, .cliexa-cb-orb:hover .cliexa-cb-orb-tip { opacity: 1; transform: translateX(0); }
.cliexa-cb-orb.cliexa-cb-hidden { opacity: 0; pointer-events: none; }

/* Proactive nudge bubble above the orb ("Hi 👋 Ask me anything"). !important so a host
   theme can't restyle the bubble/close button into a colored box. */
.cliexa-cb-teaser {
	position: fixed !important; right: 30px !important; bottom: 104px !important; z-index: 2147483000 !important;
	margin: 0 !important; padding: 0 !important; transform-origin: bottom right;
	opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none;
	transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.cliexa-cb-teaser.cliexa-cb-teaser-show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cliexa-cb-teaser-msg {
	display: block !important; font-family: inherit; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important;
	color: var(--cx-ink) !important; background: #fff !important; background-image: none !important; border: none !important;
	cursor: pointer; text-align: left !important; white-space: nowrap !important; margin: 0 !important; padding: 11px 16px !important;
	border-radius: 14px !important; position: relative;
	box-shadow: 0 12px 30px -8px rgba(24,119,212,.45), 0 0 0 1px rgba(24,119,212,.08) !important;
}
.cliexa-cb-teaser-msg::after {
	content: ''; position: absolute; right: 22px; bottom: -5px; width: 11px; height: 11px; background: #fff;
	transform: rotate(45deg); box-shadow: 3px 3px 5px -3px rgba(24,119,212,.3);
}
.cliexa-cb-teaser-x {
	position: absolute !important; top: -9px !important; right: -9px !important; width: 22px !important; height: 22px !important;
	min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important;
	border-radius: 50% !important; cursor: pointer; background: var(--cx-ink) !important; background-image: none !important;
	color: #fff !important; font-size: 15px !important; line-height: 1 !important; display: grid !important; place-items: center !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.cliexa-cb-teaser-x:hover { transform: scale(1.1); }
.cliexa-cb-teaser-show .cliexa-cb-teaser-msg { animation: cx-teaserpop .55s ease both; }
@keyframes cx-teaserpop { 0% { transform: scale(.92); } 55% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes cx-orbpulse {
	0%, 100% { box-shadow: 0 8px 26px -4px rgba(24,119,212,.55), 0 0 22px 3px rgba(58,155,240,.45), 0 0 0 0 rgba(45,212,224,.5); }
	50%      { box-shadow: 0 8px 30px -4px rgba(24,119,212,.7), 0 0 26px 5px rgba(58,155,240,.6), 0 0 0 15px rgba(45,212,224,0); }
}

/* ---------------------------- Overlay -------------------------------- */
/* Overlay stays in the DOM and fades/scales for a smooth Siri-style open/close. */
.cliexa-cb-overlay {
	position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: flex-start; justify-content: center;
	padding: 7vh 16px 16px; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s ease;
}
.cliexa-cb-overlay.cliexa-cb-open { opacity: 1; visibility: visible; }
.cliexa-cb-backdrop {
	position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(120% 120% at 50% 40%, rgba(6,20,40,.55), rgba(6,20,40,.82));
	backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.cliexa-cb-top { position: absolute; top: 26px; right: 30px; z-index: 3; display: flex; gap: 8px; }
.cliexa-cb-topbtn {
	background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff;
	border-radius: 999px; padding: 8px 15px; font-size: 13px; font-family: inherit; cursor: pointer;
	backdrop-filter: blur(6px); transition: background .2s ease;
}
.cliexa-cb-topbtn:hover { background: rgba(255,255,255,.2); }
.cliexa-cb-x { width: 42px; height: 42px; padding: 0; border-radius: 50%; font-size: 20px; }

.cliexa-cb-stage {
	position: relative; z-index: 2; width: min(680px, 90vw); height: min(86vh, 820px); max-height: 92vh; text-align: center;
	display: flex; flex-direction: column;
	transform: translateY(18px) scale(.97); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
/* Conversation tools (Export / Clear) sit just above the messages, right-aligned. */
.cliexa-cb-convtools { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.cliexa-cb-overlay.cliexa-cb-open .cliexa-cb-stage { transform: none; }
.cliexa-cb-greet { color: rgba(255,255,255,.72); font-size: 15px; font-weight: 500; margin-bottom: 8px; letter-spacing: .3px; }
.cliexa-cb-greet b { color: #fff; font-weight: 700; }
.cliexa-cb-hero { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; margin-bottom: 34px; }
.cliexa-cb-hero-c { background: linear-gradient(120deg, var(--cx-cyan), var(--cx-blue-lt), var(--cx-violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Full cliexa wordmark inline in the hero line (the long logo, not the c-mark). */
.cliexa-cb-hero-wm { height: 1.05em !important; width: auto !important; max-width: none !important; vertical-align: -0.16em; display: inline-block; margin: 0 .1em; }

/* -------------------------- Search bar ------------------------------- */
@property --cx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cliexa-cb-searchwrap { position: relative; padding: 3px; border-radius: 999px; flex: 0 0 auto; margin-top: 10px; }
.cliexa-cb-searchwrap::before {
	content: ""; position: absolute; inset: -6px; border-radius: 999px; z-index: 0;
	background: conic-gradient(from var(--cx-ang), var(--cx-cyan), var(--cx-blue-lt), var(--cx-violet), var(--cx-cyan));
	filter: blur(16px); opacity: .55; animation: cx-spin 6s linear infinite;
}
.cliexa-cb-searchwrap::after {
	content: ""; position: absolute; inset: 0; border-radius: 999px; z-index: 0; padding: 2.5px;
	background: conic-gradient(from var(--cx-ang), var(--cx-cyan), var(--cx-blue-lt), var(--cx-violet), var(--cx-cyan));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
	animation: cx-spin 6s linear infinite;
}
@keyframes cx-spin { to { --cx-ang: 360deg; } }
@supports not (background: conic-gradient(from var(--cx-ang), #000, #000)) {
	.cliexa-cb-searchwrap::before { background: linear-gradient(120deg, var(--cx-cyan), var(--cx-violet)); animation: cx-ringpulse 3s ease-in-out infinite; }
	.cliexa-cb-searchwrap::after { display: none; }
}
@keyframes cx-ringpulse { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
.cliexa-cb-ring { display: none; }

.cliexa-cb-bar {
	position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
	background: rgba(10,25,48,.92) !important; background-image: none !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.14) !important; border-radius: 999px !important; padding: 11px 12px 11px 20px;
}
.cliexa-cb-bar-icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--cx-cyan); display: block; animation: cx-breathe 2.6s ease-in-out infinite; }
.cliexa-cb-bar-icon svg { width: 22px; height: 22px; display: block; }
.cliexa-cb-input { flex: 1; background: transparent; border: none; outline: none; resize: none; color: #fff; font-size: 16.5px; font-family: inherit; line-height: 1.4; max-height: 84px; padding: 0; }
.cliexa-cb-input::placeholder { color: rgba(255,255,255,.5); }
.cliexa-cb-send { width: 36px !important; height: 36px !important; min-width: 0 !important; flex: 0 0 36px; border: none !important; border-radius: 50% !important; cursor: pointer; background: linear-gradient(135deg, var(--cx-blue), var(--cx-cyan)) !important; padding: 0 !important; display: grid; place-items: center; color: #fff !important; transition: transform .2s ease; }
.cliexa-cb-send svg { width: 17px; height: 17px; }
.cliexa-cb-send:hover:not(:disabled) { transform: scale(1.08); }
.cliexa-cb-send:disabled { opacity: .55; cursor: default; }
.cliexa-cb-charcount { display: none; font-size: 10.5px; color: rgba(255,255,255,.55); text-align: right; padding: 6px 14px 0; }
.cliexa-cb-charcount.cliexa-cb-charcount-on { display: block; }
.cliexa-cb-charcount.cliexa-cb-charcount-max { color: #ff9a90; font-weight: 700; }

/* ------------------------- Starter chips ----------------------------- */
.cliexa-cb-starters { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; flex: 0 0 auto; }
.cliexa-cb-starter {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.9);
	font-size: 13.5px; font-weight: 500; font-family: inherit; padding: 9px 16px; border-radius: 999px; cursor: pointer;
	backdrop-filter: blur(6px); transition: all .2s ease;
}
.cliexa-cb-starter:hover { background: rgba(45,212,224,.18); border-color: rgba(45,212,224,.5); color: #fff; }

/* --------------------------- Answer area ----------------------------- */
.cliexa-cb-messages { text-align: left; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px; }
/* No visible scrollbar — content still scrolls (wheel/trackpad), just cleaner/natural. */
.cliexa-cb-messages { scrollbar-width: none; -ms-overflow-style: none; }
.cliexa-cb-messages::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cliexa-cb-msg { max-width: 100%; font-size: 15px; line-height: 1.6; animation: cx-msgin .3s ease both; word-wrap: break-word; }
.cliexa-cb-msg-user {
	align-self: flex-end; max-width: 88%; color: #fff; font-weight: 500; padding: 11px 16px; border-radius: 16px 16px 4px 16px;
	background: linear-gradient(135deg, rgba(24,119,212,.35), rgba(45,212,224,.25)); border: 1px solid rgba(255,255,255,.16);
}
.cliexa-cb-msg-bot {
	align-self: stretch; position: relative; margin-left: 46px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.92);
	padding: 15px 18px; border-radius: 4px 16px 16px 16px;
}
.cliexa-cb-msg-bot::before {
	content: ''; position: absolute; left: -46px; top: 2px; width: 34px; height: 34px; border-radius: 50%;
	background: #fff var(--cx-logo, none) center / 74% no-repeat;
	box-shadow: 0 4px 14px -4px rgba(45,212,224,.6);
}
.cliexa-cb-msg-bot.cliexa-cb-safety { border-color: rgba(233,196,106,.5); background: rgba(80,60,15,.4); }
.cliexa-cb-msg-error { align-self: stretch; margin-left: 46px; background: rgba(120,30,26,.5); color: #ffd9d5; border: 1px solid rgba(245,120,110,.4); padding: 12px 15px; border-radius: 12px; }

/* Markdown-lite on the dark card */
.cliexa-cb-msg-bot h2 { font-size: 17px !important; line-height: 1.3 !important; color: #fff; margin: 4px 0 8px; }
.cliexa-cb-msg-bot h3 { font-size: 13px !important; line-height: 1.3 !important; color: #bfe6ee; margin: 12px 0 3px; text-transform: uppercase; letter-spacing: .03em; }
.cliexa-cb-msg-bot p { margin: 0 0 10px; }
.cliexa-cb-msg-bot p:last-child { margin-bottom: 0; }
.cliexa-cb-msg-bot ul, .cliexa-cb-msg-bot ol { margin: 8px 0; padding-left: 20px; }
.cliexa-cb-msg-bot li { margin: 4px 0; }
.cliexa-cb-msg-bot strong, .cliexa-cb-msg-bot b { font-weight: 700; color: #fff; }
.cliexa-cb-msg-bot em { color: rgba(255,255,255,.7); }
.cliexa-cb-msg-bot .metric { color: var(--cx-cyan); font-weight: 700; }
.cliexa-cb-msg-bot hr { border: none; border-top: 1px solid rgba(255,255,255,.14); margin: 12px 0; }
/* Module links use the widget's own font + a consistent brand CYAN - all !important and with
   :visited covered, because the host WordPress theme's <a> color (a tan/gold accent) was leaking
   through and turning cliexaProtocols / cliexaAI / cliexaARCH a muddy tan. */
.cliexa-cb-msg-bot a, .cliexa-cb-msg-bot a:visited,
.cliexa-cb-productlink, .cliexa-cb-productlink:visited {
	font-family: inherit !important; color: #5ad1e6 !important; font-weight: 600 !important;
	text-decoration: underline !important; text-underline-offset: 2px !important; background: none !important;
}
.cliexa-cb-msg-bot a:hover, .cliexa-cb-productlink:hover { color: #8be6f2 !important; }
.cliexa-cb-msg-bot table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.cliexa-cb-msg-bot th, .cliexa-cb-msg-bot td { border: 1px solid rgba(255,255,255,.16); padding: 7px 10px; text-align: left; }
.cliexa-cb-msg-bot th { background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }
.cliexa-cb-msg-bot pre { background: #05101f; color: #d6eef2; padding: 9px 11px; border-radius: 10px; overflow-x: auto; font-size: 12px; }

/* Report inline + actions (Download report / Print / PDF / Copy / Regenerate) */
.cliexa-cb-msg-bot.cliexa-cb-report { border-top: 3px solid var(--cx-cyan); }
.cliexa-cb-report-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.cliexa-cb-action {
	display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--cx-blue), var(--cx-cyan));
	color: #fff; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600;
	padding: 10px 18px; box-shadow: 0 6px 18px -6px rgba(24,119,212,.8); transition: transform .2s ease;
}
.cliexa-cb-action:hover { transform: translateY(-1px); }
.cliexa-cb-action svg { width: 15px; height: 15px; }
.cliexa-cb-action-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); box-shadow: none; color: #eaf2fb; }
.cliexa-cb-action-ghost:hover { background: rgba(255,255,255,.16); }

/* Suggestion chips / continue / section label / CTAs */
.cliexa-cb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 46px; }
.cliexa-cb-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.9); cursor: pointer; font-size: 12.5px; font-family: inherit; padding: 8px 14px; border-radius: 999px; transition: all .2s ease; }
.cliexa-cb-chip:hover { background: rgba(45,212,224,.18); border-color: rgba(45,212,224,.5); color: #fff; }
.cliexa-cb-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); margin: 4px 0 0 46px; }
/* Clickable Impact-Area chips shown under the "which Impact Area?" question. */
.cliexa-cb-impact-chips { margin-top: 12px; }
.cliexa-cb-ctarow { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 46px; }
.cliexa-cb-cta { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #eaf2fb; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 999px; transition: all .2s ease; }
.cliexa-cb-cta:hover { background: rgba(45,212,224,.18); border-color: rgba(45,212,224,.5); }
.cliexa-cb-cta-primary { background: linear-gradient(135deg, var(--cx-blue), var(--cx-cyan)); color: #fff; border: none; }

/* Typing dots + footer */
.cliexa-cb-typing { display: inline-flex; gap: 6px; align-items: center; padding: 4px 0; }
.cliexa-cb-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--cx-cyan); animation: cx-blink 1.2s infinite ease-in-out; }
.cliexa-cb-typing span:nth-child(2) { animation-delay: .2s; }
.cliexa-cb-typing span:nth-child(3) { animation-delay: .4s; }
.cliexa-cb-typinglabel { margin-left: 8px; font-size: 11.5px; color: rgba(255,255,255,.6); font-style: italic; }
.cliexa-cb-foot { flex: 0 0 auto; margin-top: 12px; color: rgba(255,255,255,.45); font-size: 12.5px; letter-spacing: .3px; text-align: center; }
.cliexa-cb-foot b { color: rgba(255,255,255,.7); font-weight: 600; }

/* Feedback */
.cliexa-cb-feedback { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.cliexa-cb-feedback-q { font-size: 11.5px; color: rgba(255,255,255,.6); }
.cliexa-cb-feedback-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 8px; transition: background .12s ease; }
.cliexa-cb-feedback-btn:hover { background: rgba(255,255,255,.2); }
.cliexa-cb-feedback-human { background: transparent; border: none; cursor: pointer; padding: 0 2px; color: #5ad1e6; font-size: 11.5px; font-weight: 600; text-decoration: underline; }

/* ---------- Inline action cards (lead form / follow-up / scheduler) on the dark stage ----------
   These share .cliexa-cb-leadcard and are styled in the widget's DARK design language (dark surface,
   cyan accent, pill CTAs) so they read the same as the human-check card and bot bubbles. */
.cliexa-cb-leadcard { align-self: stretch; margin-left: 46px; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.16); border-top: 3px solid var(--cx-cyan); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.cliexa-cb-leadcard-title { font-weight: 700; color: #fff; font-size: 15px; }
.cliexa-cb-leadcard-note { font-size: 11.5px; color: rgba(255,255,255,.6); }
.cliexa-cb-leadbody { display: flex; flex-direction: column; gap: 9px; }
/* Dark fields: bg distinct from the card (so all four boxes are findable), light text, visible border. */
.cliexa-cb-leadinput { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 9px; padding: 10px 11px; font-size: 14px; font-family: inherit; color: #fff; }
.cliexa-cb-leadinput::placeholder { color: rgba(255,255,255,.5); }
.cliexa-cb-leadinput:focus { outline: 2px solid var(--cx-cyan); outline-offset: -1px; border-color: transparent; }
.cliexa-cb-leadinput-err { border-color: #ff7a85; box-shadow: 0 0 0 1px #ff7a85; }
.cliexa-cb-leadinput-err::placeholder { color: #ff9aa2; opacity: .85; }
.cliexa-cb-leadmsg { font-size: 11.5px; color: rgba(255,255,255,.6); }
.cliexa-cb-leadmsg.err { color: #ff8a93; }
/* Chrome autofill: paint the dark field (inset shadow) instead of the default white flash. */
.cliexa-cb-leadinput:-webkit-autofill,
.cliexa-cb-leadinput:-webkit-autofill:hover,
.cliexa-cb-leadinput:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #15263f inset !important; box-shadow: 0 0 0 1000px #15263f inset !important;
	-webkit-text-fill-color: #fff !important; caret-color: #fff;
}
/* Buttons inside the cards: widget dark translucent pill; primary Send = the SAME gradient CTA
   family as the "Talk to a cliexa expert" pill above the form. */
.cliexa-cb-leadcard .cliexa-cb-cta { border: 1px solid rgba(255,255,255,.2) !important; background: rgba(255,255,255,.08) !important; color: #eaf2fb !important; }
.cliexa-cb-leadcard .cliexa-cb-cta:hover { background: rgba(45,212,224,.18) !important; border-color: rgba(45,212,224,.5) !important; color: #fff !important; }
.cliexa-cb-leadcard .cliexa-cb-cta-primary { background: linear-gradient(135deg, var(--cx-blue), var(--cx-cyan)) !important; color: #fff !important; border: none !important; }
.cliexa-cb-leadcard .cliexa-cb-cta-primary:disabled { opacity: .65 !important; cursor: default; }
.cliexa-cb-followup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cliexa-cb-followup-close { background: transparent; border: none; color: rgba(255,255,255,.6); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.cliexa-cb-followup-row { display: flex; align-items: center; gap: 12px; }
.cliexa-cb-followup-skip { background: transparent; border: none; color: rgba(255,255,255,.6); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 4px; }
.cliexa-cb-sched-frame { width: 100%; height: 58vh; border: 0; border-radius: 10px; background: #fff; margin-top: 4px; }
.cliexa-cb-sched-open { font-size: 11.5px; color: #5ad1e6; text-decoration: underline; margin-top: 6px; }
.cliexa-cb-exportcard .cliexa-cb-export-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cliexa-cb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Press & Hold human check (light panel) */
/* Human-check card — an INLINE message-column card in the widget's own design language
   (dark surface, cyan/blue accent, pill radii), never a modal/overlay. */
.cliexa-cb-captcha { align-self: stretch; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; padding: 15px 17px; margin: 2px 0; }
.cliexa-cb-captcha-title { font-weight: 700; color: #fff; font-size: 14px; line-height: 1.4; }
.cliexa-cb-captcha-sub { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.4; }
/* Entry human-check: center the card in the MIDDLE of the panel (both axes). Scoped to the
   on-open gate only — inline lead-card / bubble gates keep their in-flow left alignment. */
.cliexa-cb-gatewrap { display: flex; align-items: center; justify-content: center; }
.cliexa-cb-gatewrap .cliexa-cb-captcha { align-self: center; width: auto; max-width: 340px; align-items: center; text-align: center; }
/* Hold button: a gradient pill in the send/CTA family. The gradient FILL sweeps in (scaleX from
   left) as the hold progresses; the resting pill is a dim tint so the fill reads as progress. */
.cliexa-cb-holdbtn { position: relative; overflow: hidden; min-width: 220px; padding: 13px 26px; border-radius: 999px; border: none; background: rgba(45,212,224,.16); cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cliexa-cb-holdbtn-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--cx-grad); z-index: 0; }
.cliexa-cb-holdbtn-label { position: relative; z-index: 1; font-size: 14px; font-weight: 700; color: #eaf6ff; }
.cliexa-cb-holdbtn-wait .cliexa-cb-holdbtn-label { opacity: .6; }
.cliexa-cb-holdbtn-done .cliexa-cb-holdbtn-fill { transform: scaleX(1); }
.cliexa-cb-holdbtn-done .cliexa-cb-holdbtn-label { color: #fff; }
/* Decorative motion (glow / drain-ease / retry-shift / success-fade) — ONLY when motion is OK.
   The fill's scaleX advance is JS-driven and stays under reduced-motion (functional progress). */
@media (prefers-reduced-motion: no-preference) {
	.cliexa-cb-captcha { transition: border-color .25s ease, opacity .25s ease; }
	.cliexa-cb-holdbtn { transition: box-shadow .2s ease; }
	.cliexa-cb-holdbtn-holding { box-shadow: 0 0 0 4px rgba(45,212,224,.30); }
	.cliexa-cb-holdbtn-draining .cliexa-cb-holdbtn-fill { transition: transform .2s ease; }
	.cliexa-cb-captcha-retry { border-color: #e0902f; }
	.cliexa-cb-captcha-out { opacity: 0; }
}

/* Charts + branded diagrams (light insets in the dark card) */
.cliexa-cb-chart { margin: 10px 0; padding: 12px; background: #f3f8fb; border: 1px solid #d7e2ee; border-radius: 12px; color: var(--cx-ink); }
.cliexa-cb-chart-title { font-size: 12.5px; font-weight: 700; color: var(--cx-blue); margin-bottom: 8px; }
/* Horizontal-bar chart rows (were previously unstyled on screen → rendered as a bare list). */
.cliexa-cb-chart-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.cliexa-cb-chart-label { flex: 0 0 42%; font-size: 12px; color: var(--cx-ink); line-height: 1.2; }
.cliexa-cb-chart-track { flex: 1 1 auto; min-width: 40px; height: 15px; background: #e3ecf5; border-radius: 8px; overflow: hidden; }
.cliexa-cb-chart-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--cx-blue), var(--cx-cyan)); }
.cliexa-cb-chart-val { flex: 0 0 auto; min-width: 22px; text-align: right; font-size: 12px; font-weight: 700; color: var(--cx-blue); }
.cliexa-cb-chart-row-list { gap: 8px; }
.cliexa-cb-chart-row-list .cliexa-cb-chart-label { flex: 1 1 auto; }
.cliexa-cb-svg { width: 100%; height: auto; display: block; }
.cliexa-cb-svg-val { font-size: 8px; fill: var(--cx-ink); font-weight: 700; }
.cliexa-cb-svg-lab { font-size: 8px; fill: var(--cx-slate); }
.cliexa-cb-diag-lab { font-size: 8.5px; fill: var(--cx-blue); font-weight: 600; }
.cliexa-cb-diag-lab.hl { fill: #fff; }
.cliexa-cb-arch { background: #f5f9fd; border: 1px solid #d7e2ee; border-radius: 12px; padding: 6px; margin: 10px 0; }
.cliexa-cb-arch-flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 2px 4px; }
.cliexa-cb-arch-col { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; }
.cliexa-cb-arch-arrow { color: var(--cx-cyan); font-size: 18px; font-weight: 700; line-height: 1; flex: 0 0 auto; }
.cliexa-cb-arch-arrow::after { content: '↓'; }
.cliexa-cb-arch-node { background: #fff; border: 1px solid #d7e2ee; border-radius: 10px; padding: 8px 8px 6px; width: 108px; text-align: center; box-shadow: 0 2px 8px rgba(13,40,80,.08); }
.cliexa-cb-arch-node.hub { border: 2px solid var(--cx-blue); box-shadow: 0 4px 16px rgba(24,119,212,.22); }
.cliexa-cb-arch-icon { width: 46px; height: 46px; object-fit: contain; display: block; margin: 0 auto 5px; }
.cliexa-cb-arch-label { font-size: 11px; font-weight: 700; color: var(--cx-blue); line-height: 1.15; }
.cliexa-cb-arch-cap { font-size: 9.5px; color: var(--cx-slate); margin-top: 2px; line-height: 1.15; }

/* Focus rings */
#cliexa-chatbot-root button:focus-visible, #cliexa-chatbot-root a:focus-visible,
#cliexa-chatbot-root textarea:focus-visible, #cliexa-chatbot-root input:focus-visible { outline: 2px solid var(--cx-cyan); outline-offset: 2px; }
/* The search input's focus indicator IS the glowing pill — never draw a box on it, and the
   host theme must not force a white background or dark text onto it. */
.cliexa-cb-input, .cliexa-cb-input:focus, .cliexa-cb-input:focus-visible {
	background: transparent !important; background-image: none !important; color: #fff !important;
	outline: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important;
	-webkit-appearance: none !important; appearance: none !important;
}
.cliexa-cb-input::placeholder { color: rgba(255,255,255,.5) !important; }

/* Motion */
@keyframes cx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cx-msgin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cx-blink { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
@keyframes cx-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }

/* Mobile */
@media (max-width: 560px) {
	.cliexa-cb-orb { right: 16px; bottom: 16px; }
	.cliexa-cb-teaser { right: 16px !important; bottom: 90px !important; }
	.cliexa-cb-teaser-msg { font-size: 13px !important; }
	.cliexa-cb-stage { width: 94vw; height: 90vh; }
	.cliexa-cb-hero { font-size: 23px; }
	.cliexa-cb-input { font-size: 16px; }
	.cliexa-cb-starter { flex: 1 1 100%; text-align: center; }
	.cliexa-cb-top { top: 12px; right: 12px; }
	/* Push the greeting/hero below the top controls so "Hi there - how can I help?" no longer
	   crowds/overlaps the Export, Clear, and Close buttons on narrow screens. */
	.cliexa-cb-overlay { padding-top: 64px; }
	.cliexa-cb-topbtn { padding: 7px 12px; font-size: 12.5px; }
	.cliexa-cb-x { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
	.cliexa-cb-orb, .cliexa-cb-searchwrap::before, .cliexa-cb-searchwrap::after, .cliexa-cb-bar-icon,
	.cliexa-cb-typing span, .cliexa-cb-msg, .cliexa-cb-stage, .cliexa-cb-backdrop, .cliexa-cb-send, .cliexa-cb-action, .cliexa-cb-starter {
		animation: none !important; transition: none !important;
	}
}

/* ===== Host-theme armor: WordPress themes often style button/input/textarea with
   !important. Re-assert every widget control here so it can never be repainted. ===== */
#cliexa-chatbot-root button { font-family: inherit !important; cursor: pointer; letter-spacing: normal !important; text-transform: none !important; }
.cliexa-cb-topbtn { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 999px !important; }
.cliexa-cb-x { border-radius: 50% !important; }
.cliexa-cb-starter, .cliexa-cb-chip { background: rgba(255,255,255,.08) !important; color: #e6eef8 !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 999px !important; }
.cliexa-cb-starter:hover, .cliexa-cb-chip:hover { background: rgba(45,212,224,.18) !important; border-color: rgba(45,212,224,.5) !important; color: #fff !important; }
.cliexa-cb-cta { background: rgba(255,255,255,.08) !important; color: #eaf2fb !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 999px !important; }
.cliexa-cb-cta-primary { background: linear-gradient(135deg, #1877d4, #2dd4e0) !important; color: #fff !important; border: none !important; }
/* The always-on "Talk to a cliexa expert" CTA - bolder/bigger than the other options. */
.cliexa-cb-cta-expert { font-weight: 800 !important; font-size: 13.5px !important; padding: 11px 20px !important; box-shadow: 0 8px 22px -6px rgba(24,119,212,.75) !important; }
.cliexa-cb-cta-expert:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cliexa-cb-action { background: linear-gradient(135deg, #1877d4, #2dd4e0) !important; color: #fff !important; border: none !important; border-radius: 999px !important; }
.cliexa-cb-action-ghost { background: rgba(255,255,255,.08) !important; color: #eaf2fb !important; border: 1px solid rgba(255,255,255,.2) !important; }
.cliexa-cb-feedback-btn { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 8px !important; color: #fff !important; }
/* Light action cards (forms): keep legible inputs + the gradient send on any theme. */
.cliexa-cb-leadcard { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.16) !important; border-top: 3px solid #2dd4e0 !important; border-radius: 14px !important; }
.cliexa-cb-leadcard-title { color: #fff !important; }
.cliexa-cb-leadinput { background: rgba(255,255,255,.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 9px !important; -webkit-appearance: none !important; appearance: none !important; }
.cliexa-cb-leadinput::placeholder { color: rgba(255,255,255,.5) !important; }
.cliexa-cb-leadinput:-webkit-autofill, .cliexa-cb-leadinput:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #15263f inset !important; box-shadow: 0 0 0 1000px #15263f inset !important; -webkit-text-fill-color: #fff !important; }
.cliexa-cb-leadcard .cliexa-cb-cta-primary { background: linear-gradient(135deg, #1877d4, #2dd4e0) !important; color: #fff !important; }
.cliexa-cb-captcha { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 14px !important; }
.cliexa-cb-holdbtn { background: rgba(45,212,224,.16) !important; border: none !important; border-radius: 999px !important; }
.cliexa-cb-holdbtn-fill { background: linear-gradient(135deg, #1877d4, #2dd4e0) !important; }
.cliexa-cb-holdbtn-label { color: #eaf6ff !important; }
.cliexa-cb-holdbtn-done .cliexa-cb-holdbtn-label { color: #fff !important; }

/* Fix: some host themes style button:hover with !important and repaint OUR buttons to an
   invisible state (e.g. white text on a white hover background), so "Export" etc. vanish on
   hover. Re-assert hover colors/backgrounds with !important so controls always stay visible. */
.cliexa-cb-topbtn:hover, #cliexa-chatbot-root .cliexa-cb-topbtn:hover { background: rgba(255,255,255,.24) !important; color: #fff !important; opacity: 1 !important; }
.cliexa-cb-cta:hover { background: rgba(45,212,224,.18) !important; border-color: rgba(45,212,224,.5) !important; color: #fff !important; opacity: 1 !important; }
.cliexa-cb-cta-primary:hover, .cliexa-cb-cta-expert:hover { color: #fff !important; opacity: 1 !important; filter: brightness(1.06); }
.cliexa-cb-action:hover { color: #fff !important; opacity: 1 !important; }
.cliexa-cb-action-ghost:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; opacity: 1 !important; }
.cliexa-cb-send:hover:not(:disabled) { color: #fff !important; opacity: 1 !important; }

/* Standardize action-button sizing so Send, Export, Clear, PDF Download, etc. read as one
   family (consistent 36px control height; the circular Send + Close keep their own dimensions). */
.cliexa-cb-topbtn, .cliexa-cb-action, .cliexa-cb-cta { min-height: 36px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.cliexa-cb-topbtn { padding: 0 16px !important; font-size: 13px !important; line-height: 1 !important; }
.cliexa-cb-x { padding: 0 !important; width: 40px !important; height: 40px !important; min-height: 40px !important; }