/*
 * Lanner Chat: styled to the Lanner Parish Council house style
 * (planning applications page): Roboto, #0a5900 green, #173802 ink borders,
 * sage #eef5ea panels, 20px card radius, 56px header tile, lucide chevrons.
 * Colour scheme: sage panel, Sid's replies in Lanner green, visitor's messages in blue.
 * Everything is scoped to #lanner-chat so the Astra button styles can't leak in.
 */

#lanner-chat {
	--lc-green: #0a5900;
	--lc-green-dark: #074000;
	--lc-ink: #173802;
	--lc-sage: #eef5ea;
	--lc-rule: #c4d9bc;          /* divider on sage, as on the meetings page cards */
	--lc-user: #0069d9;          /* visitor's messages: iMessage-style blue (5.2:1 with white text) */
	--lc-shadow: rgba(23, 56, 2, .08);
	--lc-link: var(--lpc-link-colour, #0a5900);
	--lc-link-weight: var(--lpc-link-weight, 400);
	--lc-link-underline: var(--lpc-link-underline, 1.5px);

	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99990;
	font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #000;
	text-align: left;
}

#lanner-chat *,
#lanner-chat *::before,
#lanner-chat *::after { box-sizing: border-box; }

#lanner-chat [hidden] { display: none !important; }

#lanner-chat .lc-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#lanner-chat .lc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Neutralise theme button styles (Astra pads, rounds and capitalises every <button>). */
#lanner-chat button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

#lanner-chat button:focus-visible,
#lanner-chat a:focus-visible,
#lanner-chat .lc-log:focus-visible {
	outline: 2px solid var(--lc-green);
	outline-offset: 2px;
}

#lanner-chat .lc-icon { width: 22px; height: 22px; flex: none; display: block; }

#lanner-chat a {
	color: var(--lc-link);
	font-weight: var(--lc-link-weight);
	text-decoration: underline;
	text-decoration-thickness: var(--lc-link-underline);
	text-underline-offset: 3px;
}
#lanner-chat a:hover { color: var(--lc-green-dark); }

/* ---------- Launcher (Sid) ---------- */

#lanner-chat .lc-launcher {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--lc-sage);
	border: 1px solid var(--lc-ink);
	box-shadow: 0 6px 20px rgba(23, 56, 2, .18);
	transition: transform .2s ease, box-shadow .2s ease;
}
#lanner-chat .lc-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 56, 2, .22); }
#lanner-chat .lc-launcher:focus-visible { outline: 3px solid var(--lc-green); outline-offset: 3px; }
#lanner-chat .lc-launcher .lc-pet { width: 54px; height: 54px; }
#lanner-chat[data-state="open"] .lc-launcher { box-shadow: 0 2px 8px var(--lc-shadow); }

#lanner-chat .lc-nudge {
	position: absolute;
	right: 86px;
	bottom: 20px;
	width: max-content;
	max-width: 220px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--lc-ink);
	border-radius: 16px 16px 4px 16px;
	box-shadow: 0 6px 20px rgba(23, 56, 2, .14);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lc-green);
	cursor: pointer;
	animation: lc-pop .35s ease-out both;
}

/* ---------- Panel (house card) ---------- */

#lanner-chat .lc-panel {
	position: absolute;
	right: 0;
	bottom: 88px;
	width: min(400px, calc(100vw - 32px));
	max-height: min(640px, calc(100vh - 136px));
	display: flex;
	flex-direction: column;
	background: var(--lc-sage);
	border: 1px solid var(--lc-ink);
	border-radius: 20px;
	box-shadow: 0 4px 6px var(--lc-shadow), 0 18px 40px rgba(23, 56, 2, .14);
	overflow: hidden;
	animation: lc-rise .22s ease-out both;
}

#lanner-chat .lc-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 22px 0;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--lc-rule);
	flex: none;
}

#lanner-chat .lc-tile {
	width: 56px;
	height: 56px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lc-sage);
	border-radius: 16px;
}
#lanner-chat .lc-tile .lc-pet { width: 46px; height: 46px; }
#lanner-chat .lc-panel:focus { outline: none; }

#lanner-chat .lc-head-text { flex: 1; min-width: 0; display: block; }

#lanner-chat .lc-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lc-green);
}

#lanner-chat .lc-sub { display: block; font-size: 14px; line-height: 1.4; color: var(--lc-ink); }

#lanner-chat .lc-icon-btn {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 12px;
	color: var(--lc-green);
	transition: background-color .15s ease, color .15s ease;
}
#lanner-chat .lc-icon-btn:hover,
#lanner-chat .lc-icon-btn:focus-visible { background: var(--lc-green); color: #fff; }
#lanner-chat .lc-icon-btn .lc-icon { width: 22px; height: 22px; }
#lanner-chat .lc-restart .lc-icon { width: 19px; height: 19px; }

/* ---------- Conversation ---------- */

#lanner-chat .lc-log {
	flex: 1 1 auto;
	min-height: 200px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}

#lanner-chat .lc-msg {
	max-width: 88%;
	padding: 12px 14px;
	border-radius: 16px;
	overflow-wrap: anywhere;
	animation: lc-in .2s ease-out both;
}
#lanner-chat .lc-msg p { margin: 0 0 8px; }
#lanner-chat .lc-msg strong { font-weight: 700; }
#lanner-chat .lc-msg > :last-child { margin-bottom: 0; }

#lanner-chat .lc-msg--bot {
	align-self: flex-start;
	background: var(--lc-green);
	color: #fff;
	border-bottom-left-radius: 6px;
}
#lanner-chat .lc-msg--bot:not(.lc-msg--error) a { color: #fff; }
#lanner-chat .lc-msg--bot:not(.lc-msg--error) a:hover { color: #e3f0dc; }
#lanner-chat .lc-msg--bot:not(.lc-msg--error) a:focus-visible { outline-color: #fff; }
#lanner-chat .lc-msg--bot:not(.lc-msg--error) .lc-list .lc-icon { color: #fff; }

#lanner-chat .lc-msg--user {
	align-self: flex-end;
	background: var(--lc-user);
	color: #fff;
	border-bottom-right-radius: 6px;
	white-space: pre-wrap;
}

#lanner-chat .lc-msg--error {
	align-self: flex-start;
	background: #fff;
	color: #000;
	border: 1px solid var(--lc-ink);
	border-bottom-left-radius: 6px;
}

/* House chevron bullets: 16px lucide chevron-right, 10px gap, 12px between items. */
#lanner-chat .lc-list { list-style: none; margin: 4px 0 8px; padding: 0; }
#lanner-chat .lc-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; }
#lanner-chat .lc-list li + li { margin-top: 12px; }
#lanner-chat .lc-list .lc-icon,
#lanner-chat .lc-suggest .lc-icon { width: 16px; height: 16px; margin-top: 4px; color: var(--lc-green); }

#lanner-chat .lc-suggest { align-self: stretch; margin-top: 4px; }
#lanner-chat .lc-suggest-title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--lc-green); }
#lanner-chat .lc-suggest ul { list-style: none; margin: 0; padding: 0; }
#lanner-chat .lc-suggest li { margin: 0; padding: 0; }
#lanner-chat .lc-suggest li + li { margin-top: 4px; }
#lanner-chat .lc-suggest button {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	min-height: 32px;
	padding: 4px 0;
	font-size: 15px;
	line-height: 1.5;
	color: #000;
	text-align: left;
}
#lanner-chat .lc-suggest button:hover span {
	text-decoration: underline;
	text-decoration-color: var(--lc-green);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* "Who should I report it to?" result buttons, inside Sid's green bubble. */
#lanner-chat .lc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#lanner-chat .lc-msg--bot a.lc-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 2px solid #fff;
	border-radius: 12px;
	background: #fff;
	color: var(--lc-green);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
#lanner-chat .lc-msg--bot a.lc-btn:hover { background: var(--lc-sage); color: var(--lc-green); }
#lanner-chat .lc-msg--bot a.lc-btn--outline { background: transparent; color: #fff; }
#lanner-chat .lc-msg--bot a.lc-btn--outline:hover { background: #fff; color: var(--lc-green); }
#lanner-chat .lc-msg--bot a.lc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#lanner-chat .lc-guide .lc-suggest-title:focus { outline: none; }

#lanner-chat .lc-typing {
	align-self: flex-start;
	display: inline-flex;
	gap: 5px;
	padding: 15px 16px;
	background: var(--lc-green);
	border-radius: 16px 16px 16px 6px;
}
#lanner-chat .lc-typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	opacity: .45;
	animation: lc-dot 1.2s ease-in-out infinite;
}
#lanner-chat .lc-typing i:nth-child(2) { animation-delay: .15s; }
#lanner-chat .lc-typing i:nth-child(3) { animation-delay: .3s; }

/* ---------- Input ---------- */

#lanner-chat .lc-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 0 22px;
	padding: 14px 0;
	border-top: 2px solid var(--lc-rule);
	flex: none;
}

#lanner-chat .lc-input,
#lanner-chat .lc-input:focus {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	max-height: 120px;
	margin: 0;
	padding: 11px 14px;
	resize: none;
	background: #fff;
	color: #000;
	border: 1px solid var(--lc-ink);
	border-radius: 14px;
	font: 15px/1.45 'Roboto', system-ui, sans-serif;
	box-shadow: none;
	outline: none;
}
#lanner-chat .lc-input:focus-visible { box-shadow: 0 0 0 2px var(--lc-green); }
#lanner-chat .lc-input::placeholder { color: #4d5e47; opacity: 1; }

#lanner-chat .lc-send {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: var(--lc-green);
	color: #fff;
	transition: background-color .15s ease;
}
#lanner-chat .lc-send:hover { background: var(--lc-green-dark); }
#lanner-chat .lc-send[aria-disabled="true"] { opacity: .55; cursor: default; }
#lanner-chat .lc-send .lc-icon { width: 20px; height: 20px; margin: 1px 1px 0 0; }

/* ---------- Footer ---------- */

#lanner-chat .lc-foot { padding: 0 22px 18px; flex: none; }
#lanner-chat .lc-note { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--lc-ink); }
#lanner-chat .lc-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; }
#lanner-chat .lc-contact a { display: inline-flex; align-items: center; gap: 6px; }
#lanner-chat .lc-contact .lc-icon { width: 16px; height: 16px; color: var(--lc-green); }

/* ---------- Sid (black Labrador): gentle bob, the odd blink, head tilt, ear flop, otter-tail thump and a jingling tag ---------- */

#lanner-chat .lc-pet { display: block; overflow: visible; }
#lanner-chat .lc-pet-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: lc-bob 4.8s ease-in-out infinite; }
#lanner-chat .lc-pet-head { transform-box: fill-box; transform-origin: 30% 85%; animation: lc-tilt 12s ease-in-out infinite; }
#lanner-chat .lc-pet-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: lc-blink 6s ease-in-out infinite; }
#lanner-chat .lc-pet-tail { transform-box: fill-box; transform-origin: 100% 100%; animation: lc-thump 4s ease-in-out infinite; }
#lanner-chat .lc-pet-ear { transform-box: fill-box; transform-origin: 60% 5%; animation: lc-ear 7s ease-in-out infinite; }
#lanner-chat .lc-pet-tag { transform-box: fill-box; transform-origin: 50% 0; animation: lc-jingle 4.8s ease-in-out infinite; }
#lanner-chat .lc-tile .lc-pet-bob { animation-delay: -2s; }
#lanner-chat .lc-tile .lc-pet-tail { animation-delay: -3.5s; }
#lanner-chat .lc-tile .lc-pet-lid { animation-delay: -3s; }

#lanner-chat .lc-launcher:hover .lc-pet-bob { animation: lc-hop .5s ease-out 1; }
#lanner-chat.lc-is-thinking .lc-tile .lc-pet-head { animation: lc-ponder 1.8s ease-in-out infinite; }
#lanner-chat.lc-is-happy .lc-tile .lc-pet-bob { animation: lc-hop .5s ease-out 1; }
#lanner-chat.lc-is-happy .lc-tile .lc-pet-tail { animation: lc-wag-burst .9s ease-in-out 1; }
#lanner-chat.lc-is-happy .lc-tile .lc-pet-ear { animation: lc-ear-flop .55s ease-out 2; }
#lanner-chat.lc-is-happy .lc-tile .lc-pet-tag,
#lanner-chat .lc-launcher:hover .lc-pet-tag { animation: lc-swing .55s ease-out 2; }
#lanner-chat .lc-launcher:hover .lc-pet-tail,
#lanner-chat .lc-launcher:focus-visible .lc-pet-tail { animation: lc-wag-fast .28s ease-in-out infinite alternate; }

@keyframes lc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes lc-blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes lc-tilt { 0%, 78%, 100% { transform: rotate(0); } 82%, 90% { transform: rotate(-9deg); } }
@keyframes lc-ponder { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } }
@keyframes lc-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(0); } 85% { transform: translateY(-1.5px); } 100% { transform: translateY(0); } }
/* A burst of four wags every 4 seconds, then rest. */
@keyframes lc-wag-burst { 0%, 100% { transform: rotate(0); } 17%, 50% { transform: rotate(28deg); } 33%, 67% { transform: rotate(-16deg); } 84% { transform: rotate(18deg); } }
@keyframes lc-wag-fast { from { transform: rotate(-16deg); } to { transform: rotate(28deg); } }
@keyframes lc-thump { 0%, 55%, 100% { transform: rotate(0); } 60%, 70%, 80% { transform: rotate(28deg); } 65%, 75% { transform: rotate(-8deg); } }
@keyframes lc-jingle { 0%, 45%, 65%, 100% { transform: rotate(0); } 52% { transform: rotate(8deg); } 58% { transform: rotate(-5deg); } }
@keyframes lc-swing { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(18deg); } 70% { transform: rotate(-10deg); } }
@keyframes lc-ear-flop { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-16deg); } 70% { transform: rotate(5deg); } }
@keyframes lc-ear { 0%, 85%, 100% { transform: rotate(0); } 89% { transform: rotate(-12deg); } 93% { transform: rotate(4deg); } }
@keyframes lc-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes lc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lc-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	#lanner-chat *,
	#lanner-chat *::before,
	#lanner-chat *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	#lanner-chat .lc-pet-lid { transform: scaleY(0); }
	#lanner-chat .lc-typing i { opacity: .7; }
}

/* ---------- Small screens: the panel becomes a bottom sheet ---------- */

@media (max-width: 600px) {
	#lanner-chat { right: 16px; bottom: 16px; }
	#lanner-chat .lc-launcher { width: 64px; height: 64px; }
	#lanner-chat .lc-launcher .lc-pet { width: 50px; height: 50px; }
	#lanner-chat .lc-nudge { right: 76px; bottom: 16px; }
	#lanner-chat[data-state="open"] { left: 8px; right: 8px; bottom: 8px; }
	#lanner-chat[data-state="open"] .lc-launcher { display: none; }
	#lanner-chat .lc-panel {
		position: relative;
		bottom: 0;
		width: 100%;
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
	}
	#lanner-chat .lc-head { margin: 16px 16px 0; }
	#lanner-chat .lc-log { padding: 14px 16px; }
	#lanner-chat .lc-form { margin: 0 16px; }
	#lanner-chat .lc-foot { padding: 0 16px 14px; }
	#lanner-chat .lc-input, #lanner-chat .lc-input:focus { font-size: 16px; } /* stops iOS zooming in */
}

@media print { #lanner-chat { display: none !important; } }
@media (forced-colors: active) {
	#lanner-chat .lc-launcher, #lanner-chat .lc-panel, #lanner-chat .lc-msg { border: 1px solid CanvasText; }
}