/* Lexiata Lia — chat widget
   All elements are position:fixed, so nothing here can shift page layout (CLS = 0). */

.lex-lia-root {
	--lex-lia-accent: #2d9efd;
	--lex-lia-accent2: #6366f1;
	--lex-lia-bg: #0d1117;
	--lex-lia-surface: #161b22;
	--lex-lia-border: rgba(255, 255, 255, 0.1);
	--lex-lia-text: #e6edf3;
	--lex-lia-muted: #8b949e;
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	z-index: 999999 !important;
	font-family: "Inter", "Noto Sans Sinhala", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	line-height: 1.55 !important;
}

.lex-lia-root *,
.lex-lia-root *::before,
.lex-lia-root *::after {
	box-sizing: border-box !important;
}

/* Launcher */
.lex-lia-root .lex-lia-launcher {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 10px !important;
}

.lex-lia-root .lex-lia-toggle {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 58px !important;
	height: 58px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--lex-lia-accent) 0%, var(--lex-lia-accent2) 100%) !important;
	color: #fff !important;
	cursor: pointer !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease !important;
	flex: 0 0 auto !important;
}

/* Unread badge */
.lex-lia-root .lex-lia-badge {
	position: absolute !important;
	top: -2px !important;
	right: -2px !important;
	min-width: 20px !important;
	height: 20px !important;
	padding: 0 5px !important;
	border-radius: 10px !important;
	background: #e5484d !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
	text-align: center !important;
	box-shadow: 0 0 0 2px var(--lex-lia-bg) !important;
	animation: lex-lia-pop 0.35s ease-out !important;
}

@keyframes lex-lia-pop {
	0%   { transform: scale(0); }
	70%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* Teaser bubble */
.lex-lia-root .lex-lia-teaser {
	display: none !important;
	align-items: center !important;
	gap: 8px !important;
	max-width: 200px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--lex-lia-border) !important;
	border-radius: 14px !important;
	background: var(--lex-lia-surface) !important;
	color: var(--lex-lia-text) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	cursor: pointer !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
	animation: lex-lia-teaser-in 0.35s ease-out !important;
}

.lex-lia-root.lex-lia-teasing .lex-lia-teaser {
	display: flex !important;
}

.lex-lia-root.lex-lia-open .lex-lia-teaser {
	display: none !important;
}

.lex-lia-root .lex-lia-teaser-x {
	margin-left: auto !important;
	padding: 0 2px !important;
	color: var(--lex-lia-muted) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	flex: 0 0 auto !important;
}

.lex-lia-root .lex-lia-teaser-x:hover {
	color: var(--lex-lia-text) !important;
}

@keyframes lex-lia-teaser-in {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}

.lex-lia-root .lex-lia-toggle:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

.lex-lia-root .lex-lia-toggle:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px !important;
}

.lex-lia-root .lex-lia-toggle svg {
	width: 26px !important;
	height: 26px !important;
	fill: currentColor !important;
	pointer-events: none !important;
}

/* Panel */
.lex-lia-root .lex-lia-panel {
	display: none !important;
	flex-direction: column !important;
	width: min(380px, calc(100vw - 32px)) !important;
	height: min(560px, calc(100vh - 120px)) !important;
	margin-bottom: 12px !important;
	border: 1px solid var(--lex-lia-border) !important;
	border-radius: 16px !important;
	background: var(--lex-lia-bg) !important;
	color: var(--lex-lia-text) !important;
	overflow: hidden !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

.lex-lia-root.lex-lia-open .lex-lia-panel {
	display: flex !important;
}

.lex-lia-root .lex-lia-head {
	display: flex !important;
	align-items: center !important;
	gap: 11px !important;
	padding: 13px 16px !important;
	border-bottom: 1px solid var(--lex-lia-border) !important;
	background: var(--lex-lia-surface) !important;
}

.lex-lia-root .lex-lia-avatar {
	display: grid !important;
	place-items: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: var(--lex-lia-accent) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	flex: 0 0 auto !important;
}

.lex-lia-root .lex-lia-avatar-img {
	background: transparent !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.lex-lia-root .lex-lia-avatar-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
}

.lex-lia-root .lex-lia-title {
	margin: 0 !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	color: var(--lex-lia-text) !important;
}

.lex-lia-root .lex-lia-sub {
	margin: 0 !important;
	font-size: 11px !important;
	color: var(--lex-lia-muted) !important;
}

.lex-lia-root .lex-lia-close {
	margin-left: auto !important;
	padding: 4px 8px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--lex-lia-muted) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

.lex-lia-root .lex-lia-close:hover {
	color: var(--lex-lia-text) !important;
}

.lex-lia-root .lex-lia-sub {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
}

.lex-lia-root .lex-lia-dot {
	position: relative !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: #3fb950 !important;
	flex: 0 0 auto !important;
	display: block !important;
}

.lex-lia-root .lex-lia-dot::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 50% !important;
	background: #3fb950 !important;
	animation: lex-lia-wave 2s ease-out infinite !important;
}

@keyframes lex-lia-wave {
	0%   { transform: scale(1);   opacity: 0.7; }
	70%  { transform: scale(3.2); opacity: 0; }
	100% { transform: scale(3.2); opacity: 0; }
}

.lex-lia-root .lex-lia-note {
	padding: 8px 12px 10px !important;
	background: var(--lex-lia-surface) !important;
	border-top: 1px solid var(--lex-lia-border) !important;
	color: var(--lex-lia-muted) !important;
	font-size: 10.5px !important;
	text-align: center !important;
	line-height: 1.4 !important;
}

.lex-lia-root .lex-lia-ts {
	padding: 10px 12px 0 !important;
	background: var(--lex-lia-surface) !important;
}

/* Messages */
.lex-lia-root .lex-lia-log {
	flex: 1 1 auto !important;
	padding: 16px !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.lex-lia-root .lex-lia-msg {
	max-width: 85% !important;
	padding: 10px 13px !important;
	border-radius: 14px !important;
	font-size: 14px !important;
	white-space: pre-wrap !important;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
}

.lex-lia-root .lex-lia-msg.lex-lia-bot {
	align-self: flex-start !important;
	background: var(--lex-lia-surface) !important;
	border: 1px solid var(--lex-lia-border) !important;
	border-bottom-left-radius: 4px !important;
	color: var(--lex-lia-text) !important;
}

.lex-lia-root .lex-lia-msg.lex-lia-me {
	align-self: flex-end !important;
	background: var(--lex-lia-accent) !important;
	border-bottom-right-radius: 4px !important;
	color: #fff !important;
}

.lex-lia-root .lex-lia-msg.lex-lia-err {
	align-self: flex-start !important;
	background: rgba(214, 54, 56, 0.12) !important;
	border: 1px solid rgba(214, 54, 56, 0.4) !important;
	color: #ff9b9d !important;
}

.lex-lia-root .lex-lia-link {
	color: var(--lex-lia-accent) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	word-break: break-all !important;
}

.lex-lia-root .lex-lia-msg.lex-lia-me .lex-lia-link {
	color: #fff !important;
}

.lex-lia-root .lex-lia-link:hover {
	opacity: 0.85 !important;
}

.lex-lia-root .lex-lia-wa {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 2px 0 !important;
	padding: 5px 11px 5px 8px !important;
	border-radius: 999px !important;
	background: #25d366 !important;
	color: #06301a !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
}

.lex-lia-root .lex-lia-wa:hover {
	filter: brightness(1.08) !important;
	color: #06301a !important;
}

.lex-lia-root .lex-lia-wa-ico {
	display: inline-flex !important;
	flex: 0 0 auto !important;
}

.lex-lia-root .lex-lia-wa-ico svg {
	width: 16px !important;
	height: 16px !important;
	fill: #06301a !important;
	display: block !important;
}

/* Slim scrollbars — the default Windows arrows look broken inside the panel */
.lex-lia-root .lex-lia-log,
.lex-lia-root .lex-lia-input {
	scrollbar-width: thin !important;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
}

.lex-lia-root .lex-lia-log::-webkit-scrollbar,
.lex-lia-root .lex-lia-input::-webkit-scrollbar {
	width: 6px !important;
}

.lex-lia-root .lex-lia-log::-webkit-scrollbar-track,
.lex-lia-root .lex-lia-input::-webkit-scrollbar-track {
	background: transparent !important;
}

.lex-lia-root .lex-lia-log::-webkit-scrollbar-thumb,
.lex-lia-root .lex-lia-input::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18) !important;
	border-radius: 3px !important;
}

.lex-lia-root .lex-lia-log::-webkit-scrollbar-button,
.lex-lia-root .lex-lia-input::-webkit-scrollbar-button {
	display: none !important;
	height: 0 !important;
}

/* Typing dots */
.lex-lia-root .lex-lia-typing {
	display: inline-flex !important;
	gap: 4px !important;
	align-items: center !important;
}

.lex-lia-root .lex-lia-typing i {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--lex-lia-muted) !important;
	animation: lex-lia-blink 1.2s infinite ease-in-out !important;
}

.lex-lia-root .lex-lia-typing i:nth-child(2) { animation-delay: 0.18s !important; }
.lex-lia-root .lex-lia-typing i:nth-child(3) { animation-delay: 0.36s !important; }

@keyframes lex-lia-blink {
	0%, 80%, 100% { opacity: 0.25; }
	40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.lex-lia-root .lex-lia-typing i { animation: none !important; }
	.lex-lia-root .lex-lia-dot::after { animation: none !important; opacity: 0 !important; }
	.lex-lia-root .lex-lia-toggle { transition: none !important; }
	.lex-lia-root .lex-lia-badge,
	.lex-lia-root .lex-lia-teaser { animation: none !important; }
}

/* Composer */
.lex-lia-root .lex-lia-foot {
	display: flex !important;
	gap: 8px !important;
	align-items: flex-end !important;
	padding: 12px !important;
	border-top: 1px solid var(--lex-lia-border) !important;
	background: var(--lex-lia-surface) !important;
}

.lex-lia-root .lex-lia-input {
	flex: 1 1 auto !important;
	max-height: 110px !important;
	min-height: 40px !important;
	padding: 10px 12px !important;
	border: 1px solid var(--lex-lia-border) !important;
	border-radius: 10px !important;
	background: var(--lex-lia-bg) !important;
	color: var(--lex-lia-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	resize: none !important;
	outline: none !important;
	overflow-y: auto !important;
}

.lex-lia-root .lex-lia-input:focus {
	border-color: var(--lex-lia-accent) !important;
}

.lex-lia-root .lex-lia-input::placeholder {
	color: var(--lex-lia-muted) !important;
}

.lex-lia-root .lex-lia-send {
	flex: 0 0 auto !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--lex-lia-accent) !important;
	color: #fff !important;
	cursor: pointer !important;
	display: grid !important;
	place-items: center !important;
}

.lex-lia-root .lex-lia-send[disabled] {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

.lex-lia-root .lex-lia-send svg {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor !important;
	pointer-events: none !important;
}

@media (max-width: 600px) {
	.lex-lia-root {
		right: 14px !important;
		bottom: 14px !important;
	}

	.lex-lia-root .lex-lia-teaser {
		max-width: 150px !important;
		font-size: 12px !important;
	}

	/*
	 * Go full screen on phones. A floating card sized in vh collapses when the
	 * on-screen keyboard opens, because Android does not shrink vh — the panel
	 * ends up behind the keyboard with the message list squashed to nothing.
	 * --lex-lia-vh is written from visualViewport, which does track the keyboard.
	 */
	.lex-lia-root.lex-lia-open {
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
	}

	.lex-lia-root.lex-lia-open .lex-lia-panel {
		position: fixed !important;
		left: 10px !important;
		right: 10px !important;
		top: calc(var(--lex-lia-top, 0px) + 10px) !important;
		width: auto !important;
		height: calc(var(--lex-lia-vh, 100dvh) - 20px) !important;
		max-height: none !important;
		margin: 0 !important;
		border: 1px solid var(--lex-lia-border) !important;
		border-radius: 18px !important;
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
	}

	.lex-lia-root.lex-lia-open .lex-lia-launcher {
		display: none !important;
	}

	/* Never smaller than 16px, or iOS zooms the whole page on focus. */
	.lex-lia-root .lex-lia-input {
		font-size: 16px !important;
	}

	.lex-lia-root .lex-lia-head {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
}