/* Live Chat Connect — visitor widget. Scoped under #lcc-root to avoid theme
   collisions; everything overrides via the --lcc-accent custom property. */

.lcc-root {
	--lcc-accent: #2563eb;
	--lcc-ink: #0f172a;
	--lcc-muted: #64748b;
	--lcc-line: #e2e8f0;
	--lcc-bg: #ffffff;
	position: fixed;
	bottom: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--lcc-ink);
}
.lcc-root.lcc-right { right: 20px; }
.lcc-root.lcc-left { left: 20px; }
.lcc-root * { box-sizing: border-box; }

/* Launcher bubble */
.lcc-launcher {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--lcc-accent);
	color: #fff;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	position: relative;
	margin-left: auto;
}
.lcc-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.34); }
.lcc-launcher svg { width: 28px; height: 28px; }
.lcc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}
.lcc-badge.is-shown { display: flex; }

/* Panel */
.lcc-panel {
	position: absolute;
	bottom: 76px;
	width: 360px;
	max-width: calc(100vw - 40px);
	height: 520px;
	max-height: calc(100vh - 120px);
	background: var(--lcc-bg);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
	display: none;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.lcc-root.lcc-right .lcc-panel { right: 0; }
.lcc-root.lcc-left .lcc-panel { left: 0; }
.lcc-root.is-open .lcc-panel { display: flex; opacity: 1; transform: translateY(0) scale(1); }

/* Header */
.lcc-header {
	background: var(--lcc-accent);
	color: #fff;
	padding: 18px 18px 16px;
}
.lcc-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.lcc-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; opacity: 0.92; }
.lcc-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.lcc-status.is-online .lcc-dot { background: #22c55e; }
.lcc-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(255, 255, 255, 0.18);
	border: 0;
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}
.lcc-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Messages */
.lcc-body { flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.lcc-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; word-wrap: break-word; white-space: pre-wrap; }
.lcc-msg time { display: block; font-size: 10.5px; opacity: 0.6; margin-top: 3px; }
.lcc-msg-visitor { align-self: flex-end; background: var(--lcc-accent); color: #fff; border-bottom-right-radius: 4px; }
.lcc-msg-agent, .lcc-msg-system { align-self: flex-start; background: #fff; border: 1px solid var(--lcc-line); border-bottom-left-radius: 4px; }
.lcc-msg-system { background: #eef2ff; border-color: #e0e7ff; color: #3730a3; }
.lcc-author { display: block; font-size: 11px; font-weight: 700; opacity: 0.75; margin-bottom: 2px; }

/* Live meta bar (agent typing / seen) */
.lcc-livemeta { min-height: 0; padding: 0 16px; background: #f8fafc; font-size: 11.5px; color: var(--lcc-muted); }
.lcc-livemeta.is-typing { padding: 4px 16px 8px; }
.lcc-livemeta.is-seen { padding: 2px 16px 8px; text-align: right; font-weight: 600; }
.lcc-typing { display: inline-flex; gap: 3px; align-items: center; }
.lcc-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa4b2; display: inline-block; animation: lcc-bounce 1.2s infinite ease-in-out; }
.lcc-typing span:nth-child(2) { animation-delay: 0.15s; }
.lcc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lcc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Footer / composer */
.lcc-foot { border-top: 1px solid var(--lcc-line); padding: 10px; background: #fff; }
.lcc-form { display: flex; gap: 8px; align-items: flex-end; }
.lcc-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--lcc-line);
	border-radius: 10px;
	padding: 9px 11px;
	font: inherit;
	max-height: 96px;
	outline: none;
}
.lcc-input:focus { border-color: var(--lcc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcc-accent) 18%, transparent); }
.lcc-send {
	background: var(--lcc-accent);
	color: #fff;
	border: 0;
	border-radius: 10px;
	width: 42px;
	height: 40px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.lcc-send svg { width: 20px; height: 20px; }
.lcc-send:disabled { opacity: 0.5; cursor: default; }

/* Pre-chat form */
.lcc-prechat { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.lcc-prechat p { margin: 0; color: var(--lcc-muted); }
.lcc-field { display: flex; flex-direction: column; gap: 5px; }
.lcc-field label { font-size: 12px; font-weight: 600; color: var(--lcc-ink); }
.lcc-field input {
	border: 1px solid var(--lcc-line);
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	outline: none;
}
.lcc-field input:focus { border-color: var(--lcc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcc-accent) 18%, transparent); }
.lcc-btn {
	background: var(--lcc-accent);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 11px 16px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.lcc-btn:hover { filter: brightness(1.05); }
.lcc-err { color: #dc2626; font-size: 12.5px; margin: 0; min-height: 16px; }
.lcc-branding { text-align: center; font-size: 11px; color: var(--lcc-muted); padding: 6px; }

/* Honeypot — hidden with display:none so browser autofill / password managers
   leave it alone (off-screen fields still get autofilled, which produced false
   "Could not start chat" rejections). Naive bots still see it in the DOM. */
.lcc-hp {
	display: none !important;
}

/* Closed state + rating */
.lcc-foot-rate, .lcc-foot-thanks { padding: 16px 18px; text-align: center; }
.lcc-ended { margin: 0 0 4px; font-size: 12.5px; color: var(--lcc-muted); }
.lcc-rate-prompt { margin: 0 0 8px; font-weight: 700; color: var(--lcc-ink); }
.lcc-rate-thanks { margin: 0 0 8px; font-weight: 700; color: var(--lcc-ink); }
.lcc-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; }
.lcc-star {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: #d1d5db;
	padding: 0 2px;
	transition: color 0.1s ease, transform 0.1s ease;
}
.lcc-star.is-on { color: #f59e0b; }
.lcc-foot-rate .lcc-star:hover { transform: scale(1.15); }
.lcc-stars-readonly .lcc-star { font-size: 22px; cursor: default; }
.lcc-rate-comment {
	width: 100%;
	border: 1px solid var(--lcc-line);
	border-radius: 10px;
	padding: 9px 11px;
	font: inherit;
	resize: none;
	margin-bottom: 10px;
	outline: none;
}
.lcc-rate-comment:focus { border-color: var(--lcc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcc-accent) 18%, transparent); }
.lcc-foot-rate .lcc-btn { width: 100%; margin-bottom: 8px; }
.lcc-newchat {
	width: 100%;
	background: transparent;
	color: var(--lcc-accent);
	border: 1px solid var(--lcc-line);
	border-radius: 10px;
	padding: 10px 14px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.lcc-newchat:hover { background: #f8fafc; }

@media (max-width: 480px) {
	/* Full-screen chat on phones: the panel fills the viewport and the message
	   thread (.lcc-body, flex:1 + overflow-y:auto) scrolls inside it. dvw/dvh
	   track the visible area so mobile browser chrome / the on-screen keyboard
	   don't clip it. */
	.lcc-root.is-open .lcc-panel {
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		width: 100vw;
		width: 100dvw;
		height: 100vh;
		height: 100dvh;
		max-width: none;
		max-height: none;
		border-radius: 0;
		transform: none;
	}
	/* Hide the launcher while the full-screen panel is open. */
	.lcc-root.is-open .lcc-launcher { display: none; }

	.lcc-root.lcc-right { right: 12px; }
	.lcc-root.lcc-left { left: 12px; }
}