: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: 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); }
.lsc-fab svg { width: 26px; height: 26px; fill: #fff; }
.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-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-whatsapp-fab svg { width: 28px; height: 28px; fill: #fff; }
.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; }
.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-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; }

.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-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); }