/**
 * Enfluentia AI Lead Engine — Chat Widget Stylesheet
 *
 * Designed for maximum performance on shared hosting:
 *  - No external font loads
 *  - CSS custom properties for easy theming
 *  - GPU-composited animations (transform / opacity only)
 *  - Full WCAG 2.1 AA keyboard & screen-reader accessibility
 *
 * @package Enfluentia_AI_Lead_Engine
 * @since   1.0.0
 */

/* =========================================================================
   Custom properties (overridden by inline styles from PHP)
   ========================================================================= */
#enfluentia-widget {
	--enf-primary        : #6c63ff;
	--enf-primary-dark   : #574fd6;
	--enf-text-on-primary: #ffffff;
	--enf-bg             : #ffffff;
	--enf-bg-user        : var(--enf-primary);
	--enf-bg-bot         : #f3f4f6;
	--enf-text           : #111827;
	--enf-text-muted     : #6b7280;
	--enf-border         : #e5e7eb;
	--enf-radius         : 16px;
	--enf-shadow         : 0 12px 40px rgba(0, 0, 0, .18);
	--enf-font           : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                       Helvetica, Arial, sans-serif;
	--enf-z              : 999999;
}

/* =========================================================================
   Host element
   ========================================================================= */
#enfluentia-widget {
	bottom   : 24px;
	font-family: var(--enf-font);
	position : fixed;
	right    : 24px;
	z-index  : var(--enf-z);
}

#enfluentia-widget[data-position="bottom-left"] {
	left  : 24px;
	right : auto;
}

/* =========================================================================
   Toggle button
   ========================================================================= */
#enfluentia-toggle {
	align-items     : center;
	background      : var(--enf-primary);
	border          : none;
	border-radius   : 50%;
	box-shadow      : 0 4px 16px rgba(108, 99, 255, .45);
	color           : var(--enf-text-on-primary);
	cursor          : pointer;
	display         : flex;
	height          : 60px;
	justify-content : center;
	outline         : none;
	position        : relative;
	transition      : transform .2s, box-shadow .2s, background .2s;
	width           : 60px;
}

#enfluentia-toggle:hover {
	background   : var(--enf-primary-dark);
	box-shadow   : 0 6px 20px rgba(108, 99, 255, .6);
	transform    : scale(1.08);
}

#enfluentia-toggle:focus-visible {
	outline       : 3px solid var(--enf-primary);
	outline-offset: 3px;
}

/* Icon transitions */
.enfluentia-toggle-icon {
	left       : 50%;
	position   : absolute;
	top        : 50%;
	transform  : translate(-50%, -50%) scale(1);
	transition : opacity .2s, transform .2s;
}

.enfluentia-icon-close {
	opacity   : 0;
	transform : translate(-50%, -50%) scale(.6) rotate(90deg);
}

/* When chat is open */
#enfluentia-toggle[aria-expanded="true"] .enfluentia-icon-open {
	opacity   : 0;
	transform : translate(-50%, -50%) scale(.6) rotate(-90deg);
}

#enfluentia-toggle[aria-expanded="true"] .enfluentia-icon-close {
	opacity   : 1;
	transform : translate(-50%, -50%) scale(1) rotate(0);
}

/* Notification badge */
.enfluentia-notification-badge {
	background    : #ef4444;
	border        : 2px solid #fff;
	border-radius : 50%;
	display       : none;
	height        : 16px;
	position      : absolute;
	right         : 2px;
	top           : 2px;
	width         : 16px;
}

.enfluentia-notification-badge.is-visible {
	display: block;
}

/* =========================================================================
   Chat popup
   ========================================================================= */
.enfluentia-popup {
	background     : var(--enf-bg);
	border-radius  : var(--enf-radius);
	bottom         : 80px;
	box-shadow     : var(--enf-shadow);
	display        : flex;
	flex-direction : column;
	height         : 540px;
	max-height     : calc(100vh - 120px);
	opacity        : 0;
	overflow       : hidden;
	pointer-events : none;
	position       : absolute;
	right          : 0;
	transform      : translateY(16px) scale(.97);
	transform-origin: bottom right;
	transition     : opacity .22s ease, transform .22s ease;
	width          : 380px;
}

#enfluentia-widget[data-position="bottom-left"] .enfluentia-popup {
	left             : 0;
	right            : auto;
	transform-origin : bottom left;
}

.enfluentia-popup.is-open {
	opacity        : 1;
	pointer-events : all;
	transform      : translateY(0) scale(1);
}

/* =========================================================================
   Header
   ========================================================================= */
.enfluentia-header {
	align-items      : center;
	background       : var(--enf-primary);
	color            : var(--enf-text-on-primary);
	display          : flex;
	flex-shrink      : 0;
	gap              : 12px;
	padding          : 14px 16px;
}

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

.enfluentia-header-avatar img {
	border-radius : 50%;
	height        : 40px;
	object-fit    : cover;
	width         : 40px;
}

.enfluentia-avatar-initial {
	align-items       : center;
	background        : rgba(255, 255, 255, .25);
	border-radius     : 50%;
	color             : #fff;
	display           : flex;
	font-size         : 16px;
	font-weight       : 700;
	height            : 40px;
	justify-content   : center;
	width             : 40px;
}

.enfluentia-status-dot {
	background    : #4ade80;
	border        : 2px solid var(--enf-primary);
	border-radius : 50%;
	bottom        : 1px;
	height        : 10px;
	position      : absolute;
	right         : 1px;
	width         : 10px;
}

.enfluentia-header-info {
	display        : flex;
	flex           : 1;
	flex-direction : column;
	min-width      : 0;
}

.enfluentia-bot-name {
	font-size   : 15px;
	font-weight : 700;
	overflow    : hidden;
	text-overflow: ellipsis;
	white-space : nowrap;
}

.enfluentia-header-status {
	font-size : 11px;
	opacity   : .8;
}

.enfluentia-close-btn {
	align-items     : center;
	background      : transparent;
	border          : none;
	border-radius   : 4px;
	color           : rgba(255, 255, 255, .8);
	cursor          : pointer;
	display         : flex;
	flex-shrink     : 0;
	height          : 32px;
	justify-content : center;
	padding         : 0;
	transition      : background .15s, color .15s;
	width           : 32px;
}

.enfluentia-close-btn:hover {
	background : rgba(255, 255, 255, .15);
	color      : #fff;
}

/* =========================================================================
   Messages area
   ========================================================================= */
.enfluentia-messages {
	flex         : 1;
	overflow-y   : auto;
	padding      : 16px;
	scroll-behavior: smooth;
}

/* Scrollbar styling */
.enfluentia-messages::-webkit-scrollbar { width: 4px; }
.enfluentia-messages::-webkit-scrollbar-track { background: transparent; }
.enfluentia-messages::-webkit-scrollbar-thumb {
	background    : var(--enf-border);
	border-radius : 2px;
}

/* Message row */
.enfluentia-message {
	display        : flex;
	gap            : 8px;
	margin-bottom  : 12px;
	max-width      : 100%;
	animation      : enfBubbleIn .2s ease;
}

@keyframes enfBubbleIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.enfluentia-message--bot {
	align-items : flex-end;
	flex-direction: row;
}

.enfluentia-message--user {
	flex-direction: row-reverse;
}

/* Bubble */
.enfluentia-bubble {
	border-radius : 18px;
	font-size     : 14px;
	line-height   : 1.55;
	max-width     : 78%;
	padding       : 10px 14px;
	position      : relative;
	word-break    : break-word;
}

.enfluentia-message--bot .enfluentia-bubble {
	background        : var(--enf-bg-bot);
	border-bottom-left-radius: 4px;
	color             : var(--enf-text);
}

.enfluentia-message--user .enfluentia-bubble {
	background          : var(--enf-bg-user);
	border-bottom-right-radius: 4px;
	color               : var(--enf-text-on-primary);
}

/* Mini avatar beside bot bubble */
.enfluentia-mini-avatar {
	align-items     : center;
	background      : var(--enf-primary);
	border-radius   : 50%;
	color           : #fff;
	display         : flex;
	flex-shrink     : 0;
	font-size       : 10px;
	font-weight     : 700;
	height          : 26px;
	justify-content : center;
	margin-bottom   : 2px;
	width           : 26px;
}

/* Timestamp */
.enfluentia-timestamp {
	color     : var(--enf-text-muted);
	display   : block;
	font-size : 10px;
	margin-top: 4px;
	text-align: right;
}

.enfluentia-message--bot .enfluentia-timestamp {
	text-align: left;
}

/* =========================================================================
   Typing indicator
   ========================================================================= */
.enfluentia-typing {
	display    : none;
	padding    : 0 16px 12px;
}

.enfluentia-typing.is-visible {
	display: block;
}

.enfluentia-typing-bubble {
	align-items     : center;
	background      : var(--enf-bg-bot);
	border-radius   : 18px 18px 18px 4px;
	display         : inline-flex;
	gap             : 4px;
	padding         : 10px 14px;
}

.enfluentia-typing-bubble span {
	animation     : enfTypingDot 1.2s infinite;
	background    : var(--enf-text-muted);
	border-radius : 50%;
	height        : 6px;
	width         : 6px;
}

.enfluentia-typing-bubble span:nth-child(2) { animation-delay: .2s; }
.enfluentia-typing-bubble span:nth-child(3) { animation-delay: .4s; }

@keyframes enfTypingDot {
	0%, 60%, 100% { transform: none; opacity: .5; }
	30%           { transform: translateY(-6px); opacity: 1; }
}

/* =========================================================================
   Lead capture form
   ========================================================================= */
.enfluentia-lead-form-wrap {
	background   : var(--enf-bg);
	border-top   : 1px solid var(--enf-border);
	display      : none;
	flex-shrink  : 0;
	overflow-y   : auto;
	padding      : 20px;
}

.enfluentia-lead-form-wrap.is-visible {
	display: block;
}

.enfluentia-lead-form-title {
	color       : var(--enf-text);
	font-size   : 13px;
	font-weight : 600;
	line-height : 1.5;
	margin      : 0 0 16px;
}

.enfluentia-field-wrap {
	margin-bottom: 12px;
}

.enfluentia-field-label {
	color       : var(--enf-text-muted);
	display     : block;
	font-size   : 11px;
	font-weight : 600;
	letter-spacing: .5px;
	margin-bottom : 4px;
	text-transform: uppercase;
}

.enfluentia-field {
	background    : var(--enf-bg);
	border        : 1.5px solid var(--enf-border);
	border-radius : 8px;
	color         : var(--enf-text);
	font-family   : var(--enf-font);
	font-size     : 14px;
	padding       : 9px 12px;
	transition    : border-color .15s;
	width         : 100%;
}

.enfluentia-field:focus {
	border-color : var(--enf-primary);
	outline      : none;
}

.enfluentia-field-error {
	color     : #ef4444;
	display   : block;
	font-size : 11px;
	margin-top: 3px;
}

.enfluentia-lead-submit {
	background    : var(--enf-primary);
	border        : none;
	border-radius : 8px;
	color         : var(--enf-text-on-primary);
	cursor        : pointer;
	font-family   : var(--enf-font);
	font-size     : 14px;
	font-weight   : 600;
	margin-top    : 4px;
	padding       : 11px;
	transition    : background .15s, transform .1s;
	width         : 100%;
}

.enfluentia-lead-submit:hover {
	background : var(--enf-primary-dark);
}

.enfluentia-lead-submit:active {
	transform: scale(.98);
}

.enfluentia-lead-submit:disabled {
	opacity: .65;
	cursor : not-allowed;
}

/* =========================================================================
   Input / footer
   ========================================================================= */
.enfluentia-footer {
	border-top  : 1px solid var(--enf-border);
	flex-shrink : 0;
	padding     : 10px 12px 6px;
}

.enfluentia-input-wrap {
	align-items : flex-end;
	display     : flex;
	gap         : 8px;
}

.enfluentia-input {
	background   : var(--enf-bg-bot);
	border       : 1.5px solid transparent;
	border-radius: 12px;
	color        : var(--enf-text);
	flex         : 1;
	font-family  : var(--enf-font);
	font-size    : 14px;
	line-height  : 1.5;
	max-height   : 100px;
	overflow-y   : auto;
	padding      : 10px 12px;
	resize       : none;
	transition   : border-color .15s;
}

.enfluentia-input:focus {
	border-color : var(--enf-primary);
	outline      : none;
}

.enfluentia-input::placeholder {
	color: var(--enf-text-muted);
}

.enfluentia-send-btn {
	align-items     : center;
	background      : var(--enf-primary);
	border          : none;
	border-radius   : 10px;
	color           : var(--enf-text-on-primary);
	cursor          : pointer;
	display         : flex;
	flex-shrink     : 0;
	height          : 40px;
	justify-content : center;
	transition      : background .15s, transform .1s;
	width           : 40px;
}

.enfluentia-send-btn:hover {
	background : var(--enf-primary-dark);
}

.enfluentia-send-btn:active {
	transform: scale(.93);
}

.enfluentia-send-btn:disabled {
	opacity: .55;
	cursor : not-allowed;
}

.enfluentia-powered-by {
	color     : var(--enf-text-muted);
	font-size : 10px;
	margin    : 6px 0 2px;
	text-align: center;
}

/* =========================================================================
   Mobile optimisations
   ========================================================================= */
@media (max-width: 480px) {
	#enfluentia-widget {
		bottom : 16px;
		right  : 16px;
	}

	#enfluentia-widget[data-position="bottom-left"] {
		left  : 16px;
		right : auto;
	}

	.enfluentia-popup {
		border-radius : var(--enf-radius) var(--enf-radius) 0 0;
		bottom        : 0;
		height        : 88vh;
		left          : 0;
		max-height    : none;
		position      : fixed;
		right         : 0;
		width         : 100%;
	}

	#enfluentia-widget[data-position="bottom-left"] .enfluentia-popup {
		left  : 0;
		right : 0;
	}

	.enfluentia-popup.is-open {
		transform: translateY(0);
	}

	.enfluentia-popup:not(.is-open) {
		transform: translateY(100%);
	}
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.enfluentia-popup,
	.enfluentia-toggle-icon,
	.enfluentia-message,
	#enfluentia-toggle {
		transition : none !important;
		animation  : none !important;
	}
}