:root {
	--lsc-accent: #0085CA;
	--lsc-radius: 16px;
	--lsc-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
	--lsc-bg: #ffffff;
	--lsc-text: #1f2430;
	--lsc-muted: #6b7280;
	--lsc-border: #e5e7eb;
	--lsc-bubble-visitor: #f3f4f6;
}

#lsc-widget-root {
	position: fixed;
	z-index: 999999;
	font-family: var(--lsc-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: var(--lsc-text);
}

.lsc-dark {
	--lsc-bg: #16181f;
	--lsc-text: #f3f4f6;
	--lsc-muted: #9ca3af;
	--lsc-border: #2b2f3a;
	--lsc-bubble-visitor: #232733;
}

.lsc-fab {
	position: fixed;
	bottom: 24px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--lsc-accent);
	box-shadow: var(--lsc-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	transition: transform 0.2s ease;
	z-index: 999999;
}
.lsc-fab:hover { transform: scale(1.06); }
/* High-specificity + !important on purpose: theme rules like
   `button svg { width: 1em }`, `svg { height: auto }` or
   `svg { fill: currentColor }` otherwise shrink the icon to a dot or
   paint it the same color as the button, making it invisible. */
#lsc-widget-root .lsc-fab svg {
	width: 26px !important;
	height: 26px !important;
	min-width: 26px;
	min-height: 26px;
	max-width: none !important;
	max-height: none !important;
	fill: #fff !important;
	display: block !important;
	flex-shrink: 0;
	pointer-events: none;
}
#lsc-widget-root .lsc-fab svg path { fill: #fff !important; }
#lsc-widget-root .lsc-fab img {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	display: block !important;
}
/* Some themes hide "empty-looking" buttons or restyle all <button>s;
   lock down the properties that would visually break the launcher. */
#lsc-widget-root .lsc-fab {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
	color: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	min-width: 0;
	font-size: 0;
}
.lsc-fab.lsc-pos-right { right: 24px; }
.lsc-fab.lsc-pos-left { left: 24px; }

.lsc-fab-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.lsc-fab-pulse {
	animation: lsc-fab-bounce 2s ease-in-out infinite;
}
@keyframes lsc-fab-bounce {
	0%, 100% { transform: translateY(0); box-shadow: var(--lsc-shadow); }
	15% { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 133, 202, 0.35); }
	30% { transform: translateY(0); }
	45% { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 133, 202, 0.25); }
	60% { transform: translateY(0); }
}

.lsc-proactive-bubble {
	position: fixed;
	bottom: 96px;
	max-width: 260px;
	background: var(--lsc-bg);
	color: var(--lsc-text);
	border-radius: 14px;
	box-shadow: var(--lsc-shadow);
	padding: 12px 32px 12px 16px;
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
	z-index: 999998;
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.lsc-proactive-bubble.lsc-visible { opacity: 1; transform: translateY(0) scale(1); }
.lsc-proactive-bubble.lsc-pos-right { right: 24px; }
.lsc-proactive-bubble.lsc-pos-left { left: 24px; }
.lsc-proactive-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	color: var(--lsc-muted);
	cursor: pointer;
	font-size: 11px;
	padding: 4px;
}

.lsc-whatsapp-fab {
	position: fixed;
	bottom: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: var(--lsc-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999998;
	text-decoration: none;
}
#lsc-widget-root .lsc-whatsapp-fab svg {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px;
	min-height: 28px;
	max-width: none !important;
	fill: #fff !important;
	display: block !important;
	flex-shrink: 0;
	pointer-events: none;
}
#lsc-widget-root .lsc-whatsapp-fab svg path { fill: #fff !important; }
.lsc-whatsapp-fab.lsc-pos-right { right: 24px; }
.lsc-whatsapp-fab.lsc-pos-left { left: 24px; }

.lsc-window {
	position: fixed;
	bottom: 100px;
	width: 370px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 140px);
	background: var(--lsc-bg);
	border-radius: var(--lsc-radius);
	box-shadow: var(--lsc-shadow);
	display: none;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--lsc-border);
}
.lsc-window.lsc-open { display: flex; }
.lsc-window.lsc-pos-right { right: 24px; }
.lsc-window.lsc-pos-left { left: 24px; }

.lsc-header {
	background: var(--lsc-accent);
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.lsc-header img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
}
.lsc-header-info { flex: 1; min-width: 0; }
.lsc-header-name { font-weight: 600; font-size: 14px; }
.lsc-header-status { font-size: 12px; opacity: 0.85; }
.lsc-header-actions { display: flex; gap: 8px; align-items: center; }
.lsc-header-actions button {
	background: rgba(255, 255, 255, 0.18);
	border: none;
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	cursor: pointer;
}
#lsc-end-chat-btn {
	width: auto;
	font-size: 11px;
	padding: 0 10px;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lsc-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--lsc-bg);
}

.lsc-msg { max-width: 80%; display: flex; flex-direction: column; gap: 4px; }
.lsc-msg-agent { align-self: flex-start; }
.lsc-msg-visitor { align-self: flex-end; }
.lsc-bubble {
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-break: break-word;
}
.lsc-msg-agent .lsc-bubble { background: var(--lsc-bubble-visitor); color: var(--lsc-text); border-bottom-left-radius: 4px; }
.lsc-msg-visitor .lsc-bubble { background: var(--lsc-accent); color: #fff; border-bottom-right-radius: 4px; }
.lsc-msg-meta { font-size: 11px; color: var(--lsc-muted); display: flex; gap: 4px; align-items: center; }
.lsc-msg-visitor .lsc-msg-meta { align-self: flex-end; }
.lsc-ticks { color: #9ca3af; letter-spacing: -2px; font-size: 12px; }
.lsc-ticks-seen { color: #34b7f1; }
.lsc-attachment-img { max-width: 100%; border-radius: 10px; display: block; margin-top: 4px; cursor: pointer; }
.lsc-attachment-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; text-decoration: underline; color: inherit; }

/* In-widget modal (replaces browser confirm) */
.lsc-widget-modal { padding: 12px; }
.lsc-widget-modal-card { background: var(--lsc-bg); border: 1px solid var(--lsc-border); border-radius: 14px; padding: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.lsc-widget-modal-title { font-size: 14px; font-weight: 700; color: var(--lsc-text); margin-bottom: 6px; }
.lsc-widget-modal-msg { font-size: 13px; color: var(--lsc-muted); line-height: 1.45; margin-bottom: 14px; }
.lsc-widget-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.lsc-widget-modal-cancel { background: none; border: 1px solid var(--lsc-border); border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--lsc-muted); }
.lsc-widget-modal-ok { background: var(--lsc-accent); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }

.lsc-typing { font-size: 12px; color: var(--lsc-muted); padding: 0 16px 8px; font-style: italic; }

.lsc-prechat-form {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lsc-prechat-form input,
.lsc-prechat-form textarea {
	border: 1px solid var(--lsc-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	background: var(--lsc-bg);
	color: var(--lsc-text);
	font-family: inherit;
}
.lsc-prechat-form button,
.lsc-send-btn,
.lsc-primary-btn {
	background: var(--lsc-accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
}
.lsc-prechat-form button + button { margin-top: 8px; }
.lsc-prechat-form button.lsc-secondary-btn {
	background: none;
	color: var(--lsc-muted);
	font-weight: 500;
	text-decoration: underline;
}

.lsc-footer {
	border-top: 1px solid var(--lsc-border);
	padding: 10px 12px;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	background: var(--lsc-bg);
}
.lsc-footer textarea {
	flex: 1;
	resize: none;
	border: 1px solid var(--lsc-border);
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	max-height: 90px;
	font-family: inherit;
	background: var(--lsc-bg);
	color: var(--lsc-text);
}
.lsc-icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	color: var(--lsc-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lsc-icon-btn:hover { background: var(--lsc-bubble-visitor); }

.lsc-consent-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--lsc-bg);
	border-top: 1px solid var(--lsc-border);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 1000000;
	font-size: 13px;
}
.lsc-consent-banner button { white-space: nowrap; }

.lsc-rating { display: flex; gap: 6px; padding: 14px; justify-content: center; }
.lsc-rating button { background: none; border: none; font-size: 22px; cursor: pointer; opacity: 0.4; color: #f59e0b; }
.lsc-rating button.lsc-selected, .lsc-rating button:hover { opacity: 1; }
.lsc-rating-card .lsc-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
	.lsc-window {
		width: calc(100vw - 20px);
		height: calc(100dvh - 90px);
		height: calc(100vh - 90px);
		max-width: calc(100vw - 20px);
		max-height: calc(100dvh - 90px);
		max-height: calc(100vh - 90px);
		top: auto;
		bottom: 10px;
		right: 10px !important;
		left: 10px !important;
		border-radius: 16px;
	}
	.lsc-fab { width: 54px; height: 54px; bottom: 16px; }
	.lsc-fab.lsc-pos-right { right: 16px; }
	.lsc-fab.lsc-pos-left { left: 16px; }
	.lsc-whatsapp-fab { width: 50px; height: 50px; bottom: 16px; }
	.lsc-whatsapp-fab.lsc-pos-right { right: 16px; }
	.lsc-whatsapp-fab.lsc-pos-left { left: 16px; }
	.lsc-consent-banner { flex-direction: column; align-items: stretch; text-align: center; }
	.lsc-consent-banner button { width: 100%; }
	.lsc-footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* ================= Widget templates ================= */
/* "modern" is the default look defined above; the rest are modifier
   classes applied to #lsc-widget-root based on the Settings > Widget
   Template choice, so they only need to override what differs. */

.lsc-template-minimal {
	--lsc-radius: 8px;
	--lsc-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
.lsc-template-minimal .lsc-fab { border-radius: 10px; }
.lsc-template-minimal .lsc-window { border-radius: 8px; border: 1px solid var(--lsc-border); }
.lsc-template-minimal .lsc-header { background: var(--lsc-bg); color: var(--lsc-text); border-bottom: 1px solid var(--lsc-border); }
.lsc-template-minimal .lsc-header-status { color: var(--lsc-muted); opacity: 1; }
.lsc-template-minimal .lsc-header-actions button { background: var(--lsc-bubble-visitor); color: var(--lsc-text); }
.lsc-template-minimal .lsc-msg-agent .lsc-bubble,
.lsc-template-minimal .lsc-msg-visitor .lsc-bubble { border-radius: 6px; }

.lsc-template-compact .lsc-window { width: 320px; height: 460px; bottom: 88px; }
.lsc-template-compact .lsc-fab { width: 50px; height: 50px; bottom: 18px; }
.lsc-template-compact .lsc-fab svg { width: 21px; height: 21px; }
.lsc-template-compact .lsc-header { padding: 12px 14px; }
.lsc-template-compact .lsc-body { padding: 12px; gap: 8px; }
.lsc-template-compact .lsc-bubble { padding: 8px 11px; font-size: 13px; }
.lsc-template-compact .lsc-footer { padding: 8px 10px; }

.lsc-template-dark {
	--lsc-bg: #16181f;
	--lsc-text: #f3f4f6;
	--lsc-muted: #9ca3af;
	--lsc-border: #2b2f3a;
	--lsc-bubble-visitor: #232733;
	--lsc-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.lsc-template-dark .lsc-header { box-shadow: 0 1px 0 rgba(255,255,255,0.06); }

/* Widget dark mode (global, applies to all templates) */
.lsc-widget-dark #lsc-widget-root {
	--lsc-bg: #1a1d26;
	--lsc-text: #e5e7eb;
	--lsc-muted: #9ca3af;
	--lsc-border: #2d3140;
	--lsc-bubble-visitor: #252836;
	--lsc-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lsc-widget-dark .lsc-bubble { border-color: #2d3140; }
.lsc-widget-dark .lsc-prechat-form input,
.lsc-widget-dark .lsc-prechat-form textarea { background: #252836; border-color: #2d3140; color: #e5e7eb; }
.lsc-widget-dark .lsc-widget-modal-card { background: #1a1d26; border-color: #2d3140; }
.lsc-widget-dark .lsc-widget-modal-cancel { background: #252836; border-color: #2d3140; color: #9ca3af; }