/* =============================================
   FlowBot v1.2.0 — Frontend CSS
   Modern, Premium, Responsive Design
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── CSS Variables ─── */
:root {
	--fb-radius-lg: 24px;
	--fb-radius-md: 16px;
	--fb-radius-sm: 12px;
	--fb-radius-pill: 50px;
	--fb-shadow-soft: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
	--fb-shadow-deep: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
	--fb-transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	--fb-transition-fast: 0.2s ease;
}

/* ─── Root Container ─── */
#flowbot-widget-root {
	position: fixed;
	z-index: 999999;
	bottom: var(--flowbot-mb, 24px);
	pointer-events: none;
}

#flowbot-widget-root * {
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
}

#flowbot-widget-root b,
#flowbot-widget-root strong { font-weight: 700 !important; }

#flowbot-widget-root.flowbot-pos-right { right: var(--flowbot-ms, 24px); }
#flowbot-widget-root.flowbot-pos-left  { left:  var(--flowbot-ms, 24px); }

/* ─── Launcher Button ─── */
.flowbot-launcher {
	position: absolute;
	bottom: 0;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--flowbot-button-color, var(--flowbot-color, #635BFF));
	color: var(--flowbot-text-color, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(99,91,255,0.45), 0 2px 8px rgba(0,0,0,0.1);
	cursor: pointer;
	pointer-events: auto;
	transition: transform var(--fb-transition), box-shadow var(--fb-transition-fast);
	background-size: cover;
	background-position: center;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.flowbot-pos-right .flowbot-launcher { right: 0; }
.flowbot-pos-left  .flowbot-launcher { left: 0; }

.flowbot-launcher:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 28px rgba(99,91,255,0.5), 0 4px 12px rgba(0,0,0,0.12);
}

.flowbot-launcher:active { transform: scale(0.95); }

/* Pulse ring animation on launcher */
.flowbot-launcher::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--flowbot-button-color, var(--flowbot-color, #635BFF));
	opacity: 0;
	animation: fbPulseRing 2.5s ease-out infinite;
}

@keyframes fbPulseRing {
	0%   { opacity: 0.6; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.5); }
}

.flowbot-launcher.open::before { animation: none; opacity: 0; }

.flowbot-launcher svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
	transition: opacity 0.25s ease, transform 0.3s ease;
	position: absolute;
}

.flowbot-launcher.open .flowbot-icon-chat,
.flowbot-launcher:not(.open) .flowbot-icon-close {
	opacity: 0;
	transform: scale(0.4) rotate(-60deg);
	pointer-events: none;
}

.flowbot-launcher:not(.open) .flowbot-icon-chat,
.flowbot-launcher.open .flowbot-icon-close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* Drag state */
.flowbot-launcher.dragging {
	cursor: grabbing;
	transform: scale(1.1);
	box-shadow: 0 12px 40px rgba(99,91,255,0.55);
}

/* Avatar mode: hide close-only icon by default; show on open */
.flowbot-launcher .flowbot-icon-close-only {
	opacity: 0;
	transform: scale(0.4) rotate(-60deg);
	pointer-events: none;
}
.flowbot-launcher.open .flowbot-icon-close-only {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* ─── Chat Window ─── */
.flowbot-window {
	position: absolute;
	bottom: 80px;
	width: 380px;
	height: 580px;
	max-height: calc(100vh - 110px);
	background: rgba(255,255,255, var(--flowbot-bg-opacity, 0.96));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: var(--fb-radius-lg);
	box-shadow: var(--fb-shadow-deep);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: auto;

	opacity: 0;
	visibility: hidden;
	transform: translateY(24px) scale(0.97);
	transform-origin: bottom right;
	transition: opacity 0.35s ease, transform 0.35s var(--fb-transition), visibility 0.35s;
}

.flowbot-pos-right .flowbot-window { right: 0; transform-origin: bottom right; }
.flowbot-pos-left  .flowbot-window { left: 0;  transform-origin: bottom left; }

.flowbot-window.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* ─── Header ─── */
.flowbot-header {
	background: linear-gradient(135deg, var(--flowbot-color, #635BFF) 0%, color-mix(in srgb, var(--flowbot-color, #635BFF) 70%, #000) 100%);
	color: var(--flowbot-text-color, #ffffff);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 10;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.flowbot-header::after {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
}

.flowbot-header-avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.flowbot-header img.flowbot-header-avatar,
.flowbot-header-avatar-placeholder {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Online indicator dot */
.flowbot-online-dot {
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22c55e;
	border: 2px solid white;
	animation: fbDotPulse 2s ease-in-out infinite;
}

@keyframes fbDotPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.6; }
}

.flowbot-header-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.flowbot-header-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.2px;
}

.flowbot-header-status {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.8;
	letter-spacing: 0.2px;
}

/* ─── Chat Body ─── */
.flowbot-body {
	flex: 1;
	padding: 20px 16px;
	overflow-y: auto;
	background: #f8f8fd;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}

.flowbot-body::-webkit-scrollbar { width: 4px; }
.flowbot-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 10px; }
.flowbot-body::-webkit-scrollbar-track { background: transparent; }

/* ─── Privacy Banner (top of body) ─── */
.flowbot-privacy-banner {
	background: linear-gradient(135deg, #f0efff, #e8f4ff);
	border: 1px solid rgba(99,91,255,0.15);
	border-radius: var(--fb-radius-sm);
	padding: 10px 14px;
	font-size: 11.5px;
	color: #555;
	line-height: 1.5;
	text-align: center;
	animation: fbFadeIn 0.5s ease;
}

.flowbot-privacy-banner a {
	color: var(--flowbot-color, #635BFF);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px dashed var(--flowbot-color, #635BFF);
	transition: opacity 0.2s;
}
.flowbot-privacy-banner a:hover { opacity: 0.75; }

/* ─── Footer ─── */
.flowbot-footer {
	text-align: center;
	padding: 9px 12px;
	font-size: 10px;
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(6px);
	border-top: 1px solid rgba(0,0,0,0.06);
	z-index: 10;
	flex-shrink: 0;
}

.flowbot-footer a {
	color: #aaa;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 9px;
	transition: color 0.2s;
}
.flowbot-footer a:hover { color: var(--flowbot-color, #635BFF); }

/* ─── Messages ─── */
.flowbot-msg {
	display: flex;
	flex-direction: column;
	max-width: 82%;
	animation: fbPopIn 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.flowbot-msg-bot  { align-self: flex-start; }
.flowbot-msg-user { align-self: flex-end; }

.flowbot-bubble {
	padding: 12px 16px;
	border-radius: var(--fb-radius-md);
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
}

.flowbot-msg-bot .flowbot-bubble {
	background: #ffffff;
	color: #1a1a2e;
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.04);
}

.flowbot-msg-user .flowbot-bubble {
	background: var(--flowbot-color, #635BFF);
	color: var(--flowbot-text-color, #ffffff);
	border-bottom-right-radius: 4px;
	box-shadow: 0 4px 14px rgba(99,91,255,0.3);
}

/* Links inside bot bubbles */
.flowbot-bubble a {
	color: var(--flowbot-color, #635BFF);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	opacity: 0.9;
	transition: opacity 0.2s;
}
.flowbot-msg-user .flowbot-bubble a {
	color: rgba(255,255,255,0.9);
	border-bottom-color: rgba(255,255,255,0.6);
}
.flowbot-bubble a:hover { opacity: 1; }

/* ─── Message Timestamp ─── */
.flowbot-msg-time {
	font-size: 10px;
	color: #aaa;
	margin-top: 3px;
	padding: 0 4px;
}
.flowbot-msg-bot  .flowbot-msg-time { align-self: flex-start; }
.flowbot-msg-user .flowbot-msg-time { align-self: flex-end; }

/* ─── Actions ─── */
.flowbot-actions {
	animation: fbFadeInUp 0.4s ease both;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 2px;
	align-self: stretch;
}

/* ─── YES/NO Buttons ─── */
.flowbot-yesno-wrap {
	display: flex;
	gap: 10px;
}

.flowbot-yesno-wrap .flowbot-btn-outline {
	flex: 1;
}

/* ─── Modern Pill Form ─── */
.flowbot-form-modern {
	display: flex;
	width: 100%;
}

.flowbot-input-pill {
	display: flex;
	align-items: center;
	width: 100%;
	background: #ffffff;
	border: 1.5px solid rgba(0,0,0,0.09);
	border-radius: var(--fb-radius-pill);
	padding: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.flowbot-input-pill:focus-within {
	border-color: var(--flowbot-button-color, var(--flowbot-color, #635BFF));
	box-shadow: 0 0 0 3px rgba(99,91,255,0.12);
}

input.flowbot-input-text-modern {
	flex: 1;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	min-width: 0;
	color: #1a1a2e;
}

input.flowbot-input-text-modern::placeholder { color: #aaa; }

.flowbot-btn-send-modern {
	background: var(--flowbot-button-color, var(--flowbot-color, #635BFF)) !important;
	color: #fff !important;
	border: none !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	flex-shrink: 0;
	margin-right: 2px !important;
	box-shadow: 0 2px 8px rgba(99,91,255,0.3);
}

.flowbot-btn-send-modern:hover {
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(99,91,255,0.4);
}

/* ─── Choice / Action Buttons ─── */
#flowbot-widget-root button.flowbot-btn {
	background: var(--flowbot-color, #635BFF) !important;
	color: var(--flowbot-text-color, #ffffff) !important;
	border: none !important;
	padding: 11px 20px;
	border-radius: var(--fb-radius-pill) !important;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
	box-shadow: 0 3px 12px rgba(99,91,255,0.25);
	width: 100%;
}

#flowbot-widget-root button.flowbot-btn:hover {
	filter: brightness(1.08);
	box-shadow: 0 5px 18px rgba(99,91,255,0.35);
}
#flowbot-widget-root button.flowbot-btn:active { transform: scale(0.97); }

#flowbot-widget-root button.flowbot-btn-outline {
	background: #ffffff !important;
	color: var(--flowbot-color, #635BFF) !important;
	border: 1.5px solid var(--flowbot-color, #635BFF) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
	font-weight: 600;
	transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
#flowbot-widget-root button.flowbot-btn-outline:hover {
	background: var(--flowbot-color, #635BFF) !important;
	color: var(--flowbot-text-color, #ffffff) !important;
	box-shadow: 0 4px 14px rgba(99,91,255,0.3) !important;
}
#flowbot-widget-root button.flowbot-btn-outline:active { transform: scale(0.97); }

/* Link button */
#flowbot-widget-root a.flowbot-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--flowbot-color, #635BFF) !important;
	color: var(--flowbot-text-color, #ffffff) !important;
	text-decoration: none;
	padding: 11px 20px;
	border-radius: var(--fb-radius-pill);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 3px 12px rgba(99,91,255,0.25);
	transition: filter 0.2s, box-shadow 0.2s;
}
#flowbot-widget-root a.flowbot-btn:hover {
	filter: brightness(1.08);
	box-shadow: 0 5px 18px rgba(99,91,255,0.35);
}

/* ─── WhatsApp CTA Button ─── */
.flowbot-whatsapp-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #25d366 !important;
	color: #ffffff !important;
	border: none !important;
	padding: 13px 20px;
	border-radius: var(--fb-radius-pill) !important;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(37,211,102,0.4) !important;
	transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
	width: 100%;
	animation: fbWABounce 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.flowbot-whatsapp-btn:hover {
	filter: brightness(1.06);
	box-shadow: 0 6px 22px rgba(37,211,102,0.5) !important;
	transform: translateY(-1px);
}
.flowbot-whatsapp-btn svg { flex-shrink: 0; }

@keyframes fbWABounce {
	from { opacity: 0; transform: scale(0.8) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Typing Indicator ─── */
.flowbot-typing {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 2px;
}

.flowbot-dot {
	width: 7px;
	height: 7px;
	background: #c5c5d2;
	border-radius: 50%;
	animation: fbBlink 1.4s infinite both;
}
.flowbot-dot:nth-child(1) { animation-delay: 0s; }
.flowbot-dot:nth-child(2) { animation-delay: 0.22s; }
.flowbot-dot:nth-child(3) { animation-delay: 0.44s; }

/* ─── Date Input Styling ─── */
input[type="date"].flowbot-input-text-modern {
	color: #555;
}

/* ─── Animations ─── */
@keyframes fbPopIn {
	0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fbFadeInUp {
	0%   { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fbFadeIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fbBlink {
	0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
	40%            { opacity: 1;    transform: scale(1.15); }
}

/* ─── Responsive — Mobile ─── */
@media (max-width: 600px) {
	#flowbot-widget-root {
		/* On mobile, root takes full screen for the window */
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
	}

	.flowbot-window {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		height: 92vh !important;
		max-height: 92vh !important;
		border-radius: 24px 24px 0 0 !important;
		border-bottom: none;
		transform: translateY(100%) scale(1) !important;
		transform-origin: bottom center !important;
	}

	.flowbot-window.open {
		transform: translateY(0) scale(1) !important;
	}

	.flowbot-launcher {
		position: fixed !important;
		bottom: var(--flowbot-mb, 20px) !important;
		right: var(--flowbot-ms, 20px);
		/* Will be overridden by drag JS on mobile */
	}

	.flowbot-pos-left .flowbot-launcher {
		right: auto !important;
		left: var(--flowbot-ms, 20px);
	}

	/* Mobile: hide launcher when chat is open */
	.flowbot-launcher.open {
		transform: scale(0) !important;
		opacity: 0;
		pointer-events: none;
	}

	/* Mobile close button inside header */
	.flowbot-header-close {
		display: flex !important;
	}

	.flowbot-body {
		padding: 16px 14px;
	}
}

@media (min-width: 601px) {
	/* Desktop: close button inside header hidden (use launcher) */
	.flowbot-header-close {
		display: none !important;
	}
}

/* Header close button */
.flowbot-header-close {
	margin-left: auto;
	background: rgba(255,255,255,0.18);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: white;
	transition: background 0.2s;
	flex-shrink: 0;
}
.flowbot-header-close:hover { background: rgba(255,255,255,0.28); }
.flowbot-header-close svg { fill: white; width: 18px; height: 18px; }