/* Leerpad Learning Assistant — chat overlay */
.lpa-launcher {
	position: fixed; right: 18px; bottom: 18px; z-index: 90;
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--lpa-accent, var(--lp-accent-2, #5b3f8f)); color: #fff; border: 0; border-radius: 999px;
	padding: .7rem 1.2rem; font-size: 1rem; font-weight: 600; cursor: pointer;
	box-shadow: 0 6px 18px rgba(20, 20, 40, .28);
}
.lpa-launcher:hover { filter: brightness(1.08); }
.lpa-pulse { animation: lpa-pulse 2s ease-out 3; }
@keyframes lpa-pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 63, 143, .5); } 70% { box-shadow: 0 0 0 16px rgba(91, 63, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 63, 143, 0); } }

.lpa-panel {
	position: fixed; right: 18px; bottom: 84px; z-index: 91;
	width: min(400px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px));
	background: #fff; border-radius: 14px; box-shadow: 0 16px 48px rgba(15, 20, 40, .3);
	display: flex; flex-direction: column; overflow: hidden;
}
.lpa-head {
	background: #1f2733; color: #fff; padding: .8rem 1rem; font-size: 1rem;
	display: flex; align-items: center; gap: .5rem;
}
.lpa-close { margin-left: auto; background: none; border: 0; color: #97a1af; font-size: 1.3rem; cursor: pointer; }
.lpa-close:hover { color: #fff; }

.lpa-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: #f6f7fa; }
.lpa-msg { max-width: 88%; border-radius: 12px; padding: .6rem .9rem; font-size: .93rem; line-height: 1.5; }
.lpa-narrator { background: #fff; border: 1px solid #e5e8ee; align-self: flex-start; display: flex; gap: .5rem; }
.lpa-avatar { flex: 0 0 auto; }
.lpa-user { background: var(--lpa-accent, var(--lp-accent-2, #5b3f8f)); color: #fff; align-self: flex-end; }
.lpa-content { background: #fff; border: 1px solid #e5e8ee; border-left: 3px solid var(--lpa-accent, var(--lp-accent-2, #5b3f8f)); align-self: stretch; max-width: 100%; }
.lpa-content h2, .lpa-content h3 { font-size: 1.02rem; margin: .2rem 0 .5rem; }
.lpa-content img { max-width: 100%; height: auto; border-radius: 6px; }
.lpa-wait em { color: #7a828c; }

.lpa-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem 1rem; background: #fff; border-top: 1px solid #eceff3; }
.lpa-chip {
	border: 1px solid var(--lpa-accent, var(--lp-accent-2, #5b3f8f)); color: var(--lpa-accent, var(--lp-accent-2, #5b3f8f));
	background: #fff; border-radius: 999px; padding: .4rem 1rem; font-size: .88rem; font-weight: 600;
	cursor: pointer; text-decoration: none;
}
.lpa-chip:hover { background: #f3effa; }
.lpa-chip.lpa-primary { background: var(--lpa-accent, var(--lp-accent-2, #5b3f8f)); color: #fff; }
.lpa-chip.lpa-primary:hover { filter: brightness(1.08); }

.lpa-ask { display: flex; gap: .5rem; padding: .6rem 1rem .8rem; background: #fff; }
.lpa-ask input { flex: 1; border: 1px solid #dfe3ea; border-radius: 999px; padding: .45rem .9rem; font-size: .9rem; }

@media (max-width: 600px) {
	.lpa-panel { right: 10px; bottom: 76px; }
}
@media print { .lpa-launcher, .lpa-panel { display: none; } }

/* Bo — mascot character */
.lpa-face, .lpa-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lpm-svg { width: 1.9em; height: 1.9em; overflow: visible; }
.lpa-avatar .lpm-svg { width: 1.7em; height: 1.7em; }
.lpa-head .lpm-svg { width: 1.6em; height: 1.6em; }

/* idle blink */
.lpm-eyes { transform-box: fill-box; transform-origin: center; animation: lpm-blink 5.5s infinite; }
@keyframes lpm-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }

/* head gently breathes; ears perk on hover */
.lpm-head { transform-box: fill-box; transform-origin: 50% 90%; animation: lpm-breathe 4s ease-in-out infinite; }
@keyframes lpm-breathe { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-.4px); } }
.lpm-ear { transform-box: fill-box; transform-origin: top center; transition: transform .25s; }
.lpa-launcher:hover .lpm-ear-l, .lpa-avatar:hover .lpm-ear-l { transform: rotate(-10deg); }
.lpa-launcher:hover .lpm-ear-r, .lpa-avatar:hover .lpm-ear-r { transform: rotate(10deg); }

/* little hop when Bo speaks */
.lpm-speak { animation: lpm-hop .55s ease; }
@keyframes lpm-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 55% { transform: translateY(0); } 70% { transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
	.lpm-eyes, .lpm-head, .lpm-speak, .lpa-pulse { animation: none; }
}

/* Themable mascot fills — override the --lpm-* variables per site (Leerpad → Settings) */
.lpm-c-fur { fill: var(--lpm-fur, #F0CE97); }
.lpm-c-shade { fill: var(--lpm-shade, #E4BC80); }
.lpm-c-ear { fill: var(--lpm-ear, #B9722F); }
.lpm-c-muzzle { fill: var(--lpm-muzzle, #FAE6C4); }
.lpm-c-band { fill: var(--lpm-band, var(--lpa-accent, #5b3f8f)); }
.lpm-c-band-dot { fill: var(--lpm-band-dot, #7a5bb0); }
.lpm-c-ink { fill: #3a2b24; }
.lpm-c-ink-stroke { stroke: #3a2b24; }

/* Custom client mascot image (replaces the built-in character) */
.lpm-img { width: 2em; height: 2em; object-fit: contain; border-radius: 50%; }
.lpa-avatar .lpm-img { width: 1.7em; height: 1.7em; }