/* Leechy, the help chat in the bottom-right corner of every page (site/assets/leecho.js, api/leecho.py). */
.leecho-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 6px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 15px/1 var(--display); color: var(--text, #fff); background: var(--ink-2, #14121c);
  box-shadow: inset 0 0 0 1px var(--line-2, rgba(255,255,255,.14)), 0 16px 38px -14px rgba(47, 181, 255, .55);
  transition: transform .25s var(--spring, ease), box-shadow .25s ease;
}
.leecho-btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(47, 181, 255, .5), 0 20px 44px -14px rgba(140, 92, 245, .7); }
.leecho-btn:focus-visible, .leecho-panel button:focus-visible, .leecho-panel textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.leecho-face { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #23203a, #0b0b12 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.leecho-face svg { width: 34px; height: 34px; transform-origin: 60% 70%; animation: leecho-peek 5s ease-in-out infinite; }
.leecho-btn:hover .leecho-face svg { animation: leecho-wiggle .6s ease-in-out; }
.leecho-face .pupil { animation: leecho-look 5s ease-in-out infinite; }
@keyframes leecho-peek { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-2px) rotate(-6deg); } 86% { transform: translateY(0) rotate(4deg); } }
@keyframes leecho-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 65% { transform: rotate(8deg); } }
@keyframes leecho-look { 0%, 40%, 100% { transform: translate(0, 0); } 50%, 65% { transform: translate(-2.2px, -1px); } }
.leecho-btn[aria-expanded="true"] { display: none; }
.leecho-btn.alive .leecho-face .pupil, .leecho-btn.alive:hover .leecho-face svg { animation: none; }
.leecho-face { transition: transform .18s cubic-bezier(.2, 1.4, .4, 1); will-change: transform; }
.leecho-face .pupil { transition: transform .12s ease-out; transform-box: fill-box; }
.leecho-face .mouth, .leecho-face .tooth { transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
.leecho-btn.bite .leecho-face svg, .leecho-btn.alive.bite:hover .leecho-face svg { animation: leecho-chomp .5s ease-in-out; }
.leecho-btn.bite .leecho-face .mouth, .leecho-btn.bite .leecho-face .tooth { animation: leecho-jaw .5s ease-in-out; }
@keyframes leecho-chomp { 0%, 100% { transform: translate(0, 0) rotate(0) scale(1); } 22% { transform: translate(-6px, -5px) rotate(-14deg) scale(1.18); }
  42% { transform: translate(0, 0) rotate(0) scale(.94); } 62% { transform: translate(-4px, -3px) rotate(-9deg) scale(1.12); } 80% { transform: scale(.98); } }
@keyframes leecho-jaw { 0%, 100% { transform: scaleX(0); } 20%, 30% { transform: scaleX(1); } 42% { transform: scaleX(0); }
  56%, 62% { transform: scaleX(.8); } 74% { transform: scaleX(0); } }
.leecho-swarm { position: fixed; inset: 0; z-index: 59; pointer-events: none; }
.leecho-mini { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; filter: drop-shadow(0 3px 6px rgba(47, 181, 255, .35)); }
.leecho-mini svg { width: 100%; height: 100%; display: block; }
@media (max-width: 480px) { .leecho-label { display: none; } .leecho-btn { padding: 6px; } }

.leecho-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 61; display: flex; flex-direction: column;
  width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100vh - 96px));
  border-radius: 20px; overflow: hidden; background: var(--ink-2); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px -20px rgba(0, 0, 0, .85);
  font: 500 14.5px/1.5 var(--body);
}
.leecho-panel[hidden] { display: none; }
.leecho-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.leecho-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #23203a, #0b0b12 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.leecho-avatar svg { width: 27px; height: 27px; }
.leecho-who { display: flex; flex-direction: column; gap: 3px; }
.leecho-head b { font: 800 16px/1 var(--display); }
.leecho-head span { color: var(--muted); font-size: 12.5px; }
.leecho-head .x { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer;
  color: var(--muted); background: transparent; font: 700 20px/1 var(--body); }
.leecho-head .x:hover { color: var(--text); background: rgba(255, 255, 255, .07); }

.leecho-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.leecho-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; overflow-wrap: anywhere; }
.leecho-msg p { margin: 0 0 6px; } .leecho-msg p:last-child { margin: 0; }
.leecho-msg ol, .leecho-msg ul { margin: 4px 0; padding-left: 20px; }
.leecho-msg a { color: inherit; }
.leecho-msg.bot { align-self: flex-start; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.leecho-msg.me { align-self: flex-end; background: rgba(255, 107, 181, .18); box-shadow: inset 0 0 0 1px rgba(255, 107, 181, .3); }
.leecho-msg.wait { color: var(--muted); }
.leecho-msg.err { color: #ffb4a8; }

.leecho-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.leecho-chips button { max-width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 12px; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 700 13.5px/1.35 var(--body); }
.leecho-chips button:hover { background: rgba(255, 255, 255, .1); }

.leecho-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.leecho-form textarea { flex: 1; min-height: 40px; max-height: 96px; resize: none; padding: 9px 11px; border: 0; border-radius: 12px;
  color: var(--text); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 14.5px/1.4 var(--body); }
.leecho-form button { align-self: flex-end; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer;
  color: #fff; background: var(--accent); font: 800 14px/1 var(--display); }
.leecho-form button:disabled { opacity: .5; cursor: default; }
.leecho-fine { margin: 0; padding: 0 14px 10px; color: var(--faint); font-size: 11.5px; }
.leecho-fine a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .leecho-btn, .leecho-face svg, .leecho-face .pupil { transition: none; animation: none !important; } }