.fca-root * { box-sizing: border-box; }
/* Mobile/touch browsers paint their own translucent tap-highlight overlay on any clickable
   element by default -- completely separate from :hover/:focus CSS, and invisible on desktop
   with a mouse, which is why this can look like "a color shows on hover" specifically on phones
   or touch-emulated devices even though nothing in this stylesheet declares such a color.
   Resetting it here, once, for the whole widget covers the launcher and every button inside it. */
.fca-root, .fca-root * { -webkit-tap-highlight-color: transparent; }
.fca-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fca-primary: #5B4CF0;
	--fca-text: #ffffff;
	--fca-bg: #ffffff;
	--fca-bg-body: #f7f7fb;
	--fca-msg-bot-bg: #ffffff;
	--fca-msg-bot-text: #222222;
	--fca-border: #ececec;
	--fca-muted: #888;

	/* Header icon buttons: sound / theme (light-dark) / minimize / close.
	   Colors default to "inherit" so they keep matching the header text color
	   unless the dashboard explicitly overrides them. */
	--fca-icon-size: 26px;
	--fca-icon-color: inherit;
	--fca-icon-hover-color: inherit;

	/* Welcome-block quick-action buttons. Bg/text colors default to the existing
	   theme variables so light/dark/glass modes keep working automatically unless
	   the dashboard sets an explicit override. */
	--fca-qa-bg: var(--fca-msg-bot-bg);
	--fca-qa-bg-hover: var(--fca-qa-bg);
	--fca-qa-icon-size: 32px;
	--fca-qa-text-size: 13px;
	--fca-qa-text-color: var(--fca-msg-bot-text);
	--fca-qa-text-hover-color: var(--fca-qa-text-color);
	--fca-qa-padding-y: 9px;
	--fca-qa-padding-x: 12px;

	/* Header bot name / welcome subtitle font sizes */
	--fca-header-name-size: 14px;
	--fca-welcome-sub-size: 12px;

	/* File-upload (attachment) icon background + size */
	--fca-attach-bg: transparent;
	--fca-attach-size: 36px;
}
.fca-root[data-theme="dark"] {
	--fca-bg: #1c1d24; --fca-bg-body: #15161b; --fca-msg-bot-bg: #262832;
	--fca-msg-bot-text: #eaeaf0; --fca-border: #33343f; --fca-muted: #9a9aa5;
}
.fca-root[data-theme="glass"] {
	--fca-bg: rgba(30,30,40,0.55); --fca-bg-body: rgba(20,20,28,0.35);
	--fca-msg-bot-bg: rgba(255,255,255,0.12); --fca-msg-bot-text: #fff;
	--fca-border: rgba(255,255,255,0.18); --fca-muted: #cfcfe0;
}

.fca-bubble-root { position: fixed; z-index: 999999; bottom: 24px; }
.fca-position-bottom-right { right: 24px; }
.fca-position-bottom-left { left: 24px; }

.fca-root .fca-launcher {
	width: 60px; height: 60px; border-radius: 50%;
	background: var(--fca-primary); color: var(--fca-text);
	display: flex; align-items: center; justify-content: center;
	cursor: grab; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	font-size: 26px; border: none; position: relative;
	padding: 0; flex-shrink: 0; -webkit-appearance: none; appearance: none;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1);
	animation: fca-float 3s ease-in-out infinite;
}
/* Clips the icon image to a perfect circle that always fits the bubble, without clipping the badge. */
.fca-launcher-icon {
	width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.fca-launcher-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.fca-launcher:hover { transform: scale(1.08); }
/* Defensive fix: some themes ship a global button:hover rule (background-color + color) that
   matches every <button> on the page, including this one -- the launcher's own CSS above only
   ever declares its resting-state background, so nothing here was re-asserting it specifically
   on hover/focus, letting a theme's rule visually paint over the bubble's real color the moment
   it's hovered. Re-declaring the same background/color/shadow here, with !important, guarantees
   the launcher always looks like itself regardless of what the active theme does to buttons. */
.fca-launcher:hover, .fca-launcher:focus {
	background: var(--fca-primary) !important;
	color: var(--fca-text) !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}
/* Some themes also apply a generic hover dimming/tint to every <img> on the page (a common
   "hover to preview" pattern), which would visually make the bubble's icon look like it's
   changing color even though the button's own background is already locked down above. This
   neutralizes that specifically for the icon image, without touching how images look anywhere
   else on the site. */
.fca-launcher:hover .fca-launcher-icon img, .fca-launcher:focus .fca-launcher-icon img {
	opacity: 1 !important;
	filter: none !important;
}
.fca-launcher:active { cursor: grabbing; animation: none; }
.fca-launcher.fca-dragging { animation: none; transition: none; }
@keyframes fca-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.fca-badge {
	position: absolute; top: -4px; right: -4px; background: #ff4d4f; color: #fff;
	font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; animation: fca-pop .3s ease; border: 2px solid #fff;
}
@keyframes fca-pop { from { transform: scale(0); } to { transform: scale(1); } }

.fca-window {
	display: none; flex-direction: column;
	width: 360px; max-width: 92vw; height: 500px; max-height: 74vh;
	background: var(--fca-bg); color: var(--fca-msg-bot-text);
	border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.28);
	position: absolute; bottom: 76px; right: 0;
	opacity: 0; transform: translateY(16px) scale(.97);
	transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), height .25s ease;
}
.fca-root[data-theme="glass"] .fca-window { backdrop-filter: blur(18px); }
.fca-position-bottom-left .fca-window { right: auto; left: 0; }
.fca-window.fca-open { display: flex; opacity: 1; transform: translateY(0) scale(1); }
.fca-window.fca-minimized { height: 68px !important; }
.fca-window.fca-minimized .fca-progress, .fca-window.fca-minimized .fca-body,
.fca-window.fca-minimized .fca-footer { display: none; }

.fca-embed .fca-window {
	position: static; display: flex; width: 100%; max-width: 440px; height: 540px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12); border: 1px solid var(--fca-border);
	opacity: 1; transform: none;
}

/* Header: avatar + name + status, matching the mockup */
.fca-header {
	background: var(--fca-primary); color: var(--fca-text);
	padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
	flex-shrink: 0;
}
.fca-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fca-avatar {
	width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.2);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.fca-header-text { min-width: 0; }
.fca-header-name { font-weight: 600; font-size: var(--fca-header-name-size); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fca-header-status { font-size: 11px; opacity: 0.85; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.fca-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; }
.fca-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fca-root .fca-icon-btn {
	cursor: pointer; opacity: 0.9; background: none !important; border: none; color: var(--fca-icon-color);
	padding: 4px; line-height: 1; border-radius: 4px; width: var(--fca-icon-size); height: var(--fca-icon-size);
	display: flex; align-items: center; justify-content: center; transition: color .15s ease;
}
.fca-root .fca-icon-btn:hover, .fca-root .fca-icon-btn:focus {
	opacity: 1; color: var(--fca-icon-hover-color) !important; background: none !important; text-decoration: none !important;
}
.fca-root .fca-icon-btn svg { width: calc(var(--fca-icon-size) * 0.6); height: calc(var(--fca-icon-size) * 0.6); flex-shrink: 0; }
.fca-root .fca-icon-btn:focus-visible, .fca-root .fca-option-btn:focus-visible, .fca-root .fca-launcher:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fca-progress { height: 3px; background: rgba(0,0,0,0.08); flex-shrink: 0; }
.fca-progress-bar { height: 100%; background: var(--fca-primary); transition: width .35s ease; }
.fca-progress-label { font-size: 10px; text-align: right; padding: 3px 10px 0; color: var(--fca-muted); flex-shrink: 0; }

.fca-body { flex: 1; overflow-y: auto; padding: 0 0 14px; background: var(--fca-bg-body); scroll-behavior: smooth; display: flex; flex-direction: column; }

/* Welcome/intro block: sticky/pinned to the top of the chat body */
.fca-welcome {
	background: var(--fca-bg-body); padding: 14px 14px 10px; border-bottom: 1px solid var(--fca-border);
}
.fca-welcome-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.fca-welcome-sub { font-size: var(--fca-welcome-sub-size); color: var(--fca-muted); margin-bottom: 10px; }
.fca-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fca-root .fca-quick-btn {
	display: flex; align-items: center; gap: 10px; padding: var(--fca-qa-padding-y) var(--fca-qa-padding-x); border-radius: 12px;
	border: 1px solid var(--fca-border); background: var(--fca-qa-bg); color: var(--fca-qa-text-color);
	font-size: var(--fca-qa-text-size); font-weight: 600; cursor: pointer; text-align: left;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
	text-decoration: none;
}
.fca-root .fca-quick-btn:hover, .fca-root .fca-quick-btn:focus {
	transform: translateY(-1px); border-color: var(--fca-primary); box-shadow: 0 4px 10px rgba(0,0,0,0.06);
	background: var(--fca-qa-bg-hover) !important; color: var(--fca-qa-text-hover-color) !important;
}
.fca-root .fca-quick-btn .fca-qi-label { line-height: 1.25; }

/* Icon tiles: a fixed-size colored circle with a white SVG icon inside -- renders identically
   on every browser/OS, unlike raw emoji which can show as inconsistent glyphs or "missing
   character" boxes depending on the visitor's system. */
.fca-qi {
	width: var(--fca-qa-icon-size); height: var(--fca-qa-icon-size); border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.fca-qi svg { width: calc(var(--fca-qa-icon-size) * 0.53); height: calc(var(--fca-qa-icon-size) * 0.53); display: block; }
.fca-qi-orange { background: #FF9142; }
.fca-qi-red    { background: #FF6B6B; }
.fca-qi-blue   { background: #4C8DFF; }
.fca-qi-green  { background: #25D366; }
.fca-qi-purple { background: #9B6BFF; }
.fca-qi-teal   { background: #17C2B4; }

/* Small inline icon used inside the handoff/social pill buttons (e.g. "Chat on WhatsApp"). */
.fca-btn-icon { display: inline-flex; vertical-align: -3px; margin-right: 2px; }
.fca-btn-icon svg { width: 14px; height: 14px; }

.fca-messages { padding: 12px 14px 0; flex: 1; }

.fca-msg {
	max-width: 85%; margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4;
	animation: fca-msg-in .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes fca-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fca-msg-bot { background: var(--fca-msg-bot-bg); color: var(--fca-msg-bot-text); border: 1px solid var(--fca-border); border-bottom-left-radius: 3px; }
.fca-msg-agent { border-color: var(--fca-primary); }
.fca-agent-label {
	display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
	color: var(--fca-primary); margin-bottom: 3px;
}
.fca-msg-user { background: var(--fca-primary); color: var(--fca-text); margin-left: auto; border-bottom-right-radius: 3px; }
.fca-msg-time { font-size: 10px; color: var(--fca-muted); margin: -6px 0 10px; }
.fca-msg-time.fca-time-user { text-align: right; }

.fca-typing { display: flex; gap: 4px; padding: 10px 14px; width: fit-content; background: var(--fca-msg-bot-bg); border: 1px solid var(--fca-border); border-radius: 14px; margin-bottom: 10px; }
.fca-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--fca-muted); animation: fca-blink 1.2s infinite ease-in-out; }
.fca-typing span:nth-child(2) { animation-delay: .2s; }
.fca-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes fca-blink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

.fca-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.fca-root .fca-option-btn {
	background: transparent; border: 1.5px solid var(--fca-primary); color: var(--fca-primary);
	padding: 7px 12px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.fca-root[data-theme="dark"] .fca-option-btn, .fca-root[data-theme="glass"] .fca-option-btn { color: #fff; }
.fca-root .fca-option-btn:hover, .fca-root .fca-option-btn:focus { background: var(--fca-primary) !important; color: var(--fca-text) !important; transform: translateY(-1px); }
.fca-root .fca-option-btn-whatsapp {
	background: #25D366; border-color: #25D366; color: #fff; font-weight: 600;
}
.fca-root .fca-option-btn-whatsapp:hover, .fca-root .fca-option-btn-whatsapp:focus { background: #1ebe57 !important; border-color: #1ebe57; color: #fff !important; }
.fca-root .fca-option-btn-primary {
	background: var(--fca-primary); border-color: var(--fca-primary); color: var(--fca-text); font-weight: 600;
}

.fca-footer { border-top: 1px solid var(--fca-border); padding: 10px; display: flex; gap: 8px; background: var(--fca-bg); flex-shrink: 0; }
.fca-root .fca-footer input {
	flex: 1; border: 1px solid var(--fca-border); border-radius: 20px; padding: 9px 14px; font-size: 14px; outline: none;
	background: var(--fca-bg-body); color: var(--fca-msg-bot-text);
}
.fca-root .fca-footer button { background: var(--fca-primary) !important; color: var(--fca-text) !important; border: none; border-radius: 20px; width: 36px; height: 36px; cursor: pointer; font-size: 14px; display:flex; align-items:center; justify-content:center; }
.fca-root .fca-footer button:hover, .fca-root .fca-footer button:focus { background: var(--fca-primary) !important; color: var(--fca-text) !important; opacity: 0.9; }
.fca-root .fca-footer button.fca-attach-btn {
	background: var(--fca-attach-bg) !important; color: var(--fca-msg-bot-text) !important;
	width: var(--fca-attach-size); height: var(--fca-attach-size);
	font-size: calc(var(--fca-attach-size) * 0.5) !important; flex-shrink: 0; border-radius: 4px;
}
.fca-root .fca-footer button.fca-attach-btn:hover, .fca-root .fca-footer button.fca-attach-btn:focus {
	opacity: 0.7; background: var(--fca-attach-bg) !important; color: var(--fca-msg-bot-text) !important;
}

.fca-msg-image {
	max-width: 100%; max-height: 220px; border-radius: 10px; display: block; margin-top: 4px; cursor: pointer;
}

.fca-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fca-f-appt-note { font-size: 12px; color: var(--fca-muted); margin: 2px 0 -2px; }
.fca-f-label { font-size: 12px; font-weight: 600; color: var(--fca-msg-bot-text); margin: 4px 0 -3px; }
.fca-f-req { color: #D93025; }

.fca-slot-picker { display: flex; flex-direction: column; gap: 8px; }
.fca-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fca-root .fca-slot-pill {
	background: transparent; border: 1.5px solid var(--fca-primary); color: var(--fca-primary);
	padding: 6px 10px; border-radius: 16px; font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.fca-root[data-theme="dark"] .fca-slot-pill, .fca-root[data-theme="glass"] .fca-slot-pill { color: #fff; }
.fca-root .fca-slot-pill:hover, .fca-root .fca-slot-pill:focus { background: var(--fca-primary) !important; color: var(--fca-text) !important; }
.fca-root .fca-slot-pill.fca-slot-selected { background: var(--fca-primary) !important; color: var(--fca-text) !important; font-weight: 600; }
.fca-slot-loading, .fca-slot-empty { font-size: 12px; color: var(--fca-muted); padding: 4px 0; }
.fca-root .fca-form input, .fca-root .fca-form textarea, .fca-root .fca-form select {
	border: 1px solid var(--fca-border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit;
	outline: none; background: var(--fca-bg-body); color: var(--fca-msg-bot-text);
}
.fca-root .fca-form button { align-self: flex-start; }

@media (max-width: 480px) {
	/* The window is normally position:absolute relative to .fca-bubble-root, which is
	   itself only as wide as the 60px launcher button pinned to a screen edge. Using
	   left/right percentages against that tiny box (instead of the real viewport) is
	   what was pushing the window off-screen and clipping it on phones. Switching to
	   position:fixed anchors it to the actual viewport instead, so it always fits. */
	.fca-bubble-root .fca-window {
		position: fixed;
		width: auto;
		max-width: none;
		height: calc(100vh - 104px);
		height: calc(100dvh - 104px);
		max-height: 640px;
		top: auto;
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
		left: 3vw;
		right: 3vw;
	}
	.fca-position-bottom-left .fca-window,
	.fca-position-bottom-right .fca-window {
		left: 3vw;
		right: 3vw;
	}
	.fca-quick-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) and (max-height: 560px) {
	/* Short/landscape phones: the launcher + its offset eat up more of the available
	   height proportionally, so pull the window down closer to the bottom edge and
	   let it use nearly the full viewport height instead of clipping. */
	.fca-bubble-root .fca-window {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		height: calc(100vh - 24px);
		height: calc(100dvh - 24px);
	}
}