:root {
  --bg: #f6f7f9; --panel: #ffffff; --text: #16181d; --muted: #6b7280; --line: #e3e5e9;
  --me: #2f6fed; --me-text: #fff; --bot: #ffffff; --err: #c2410c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111318; --panel: #1a1d24; --text: #eceef2; --muted: #9aa1ad; --line: #2a2e37; --bot: #1f232b; --err: #fb923c; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
h1 { font-size: 17px; margin: 0; flex: 1; }
select, input, textarea, button { font: inherit; color: inherit; }
select { background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; max-width: 45vw; }
button { border: 0; border-radius: 10px; padding: 8px 14px; background: var(--me); color: var(--me-text); cursor: pointer; }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
button.danger { color: var(--err); }
#options, #pairing { padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#pairing { flex-direction: column; align-items: stretch; }
#pairing h2 { margin: 0; font-size: 17px; }
#pairing p { margin: 0; color: var(--muted); }
[hidden] { display: none !important; }
input { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--bg); }
main { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; }
.me { align-self: flex-end; background: var(--me); color: var(--me-text); border-bottom-right-radius: 4px; }
.bot { align-self: flex-start; background: var(--bot); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bot.working { color: var(--muted); font-style: italic; }
.bot.error { color: var(--err); }
.empty { color: var(--muted); text-align: center; margin: auto; }
footer { display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); align-items: flex-end; }
textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 18px; padding: 8px 14px; background: var(--bg); max-height: 30vh; }
#mic, #send { border-radius: 50%; width: 42px; height: 42px; padding: 0; flex: none; }
#mic.listening { background: #dc2626; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }

/* ---- Pipo, the pet ---- */
#stage { display: flex; flex-direction: column; align-items: center; padding: 8px 0 0; background: var(--bg); }
#pet { width: 120px; height: 120px; overflow: visible; }
#mood { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
#pet .blob { fill: #7cc4a4; }
#pet .leaf { fill: #4f9e78; transform-origin: 60px 22px; }
#pet .stem { stroke: #4f9e78; stroke-width: 3; fill: none; }
#pet .eye { fill: #1d2b26; transform-box: fill-box; transform-origin: center; animation: blink 4s infinite; }
#pet .glint { fill: #fff; }
#pet .cheek { fill: #f29c9c; opacity: .55; }
#pet .mouth { stroke: #1d2b26; stroke-width: 3; fill: none; stroke-linecap: round; }
#pet .mouth-open { fill: #1d2b26; opacity: 0; transform-box: fill-box; transform-origin: center; }
#pet .shadow { fill: #000; opacity: .12; transform-origin: 60px 108px; }
#pet .body { transform-origin: 60px 104px; }
#pet .dots circle { fill: var(--muted); opacity: 0; }

#pet.idle .body { animation: bob 3s ease-in-out infinite; }
#pet.idle .shadow { animation: shadow 3s ease-in-out infinite; }
#pet.idle .leaf { animation: sway 3s ease-in-out infinite; }

#pet.listening .body { animation: lean 1.2s ease-in-out infinite; }
#pet.listening .eye { animation: none; transform: scale(1.2); }
#pet.listening .leaf { animation: perk .6s ease-in-out infinite alternate; }

#pet.thinking .body { animation: bob 1.6s ease-in-out infinite; }
#pet.thinking .eyes { animation: look 2.4s ease-in-out infinite; }
#pet.thinking .mouth { d: path("M54 86 L66 86"); }
#pet.thinking .dots circle { animation: dot 1.5s infinite; }
#pet.thinking .dots circle:nth-child(2) { animation-delay: .25s; }
#pet.thinking .dots circle:nth-child(3) { animation-delay: .5s; }

#pet.talking .body { animation: bob 1s ease-in-out infinite; }
#pet.talking .mouth { opacity: 0; }
#pet.talking .mouth-open { animation: talk .28s ease-in-out infinite alternate; }

#pet.happy .body { animation: hop .5s ease-out 3; }
#pet.happy .eye { animation: none; transform: scaleY(.35); }
#pet.happy .mouth { d: path("M50 82 Q60 94 70 82"); }

#pet.sad .body { animation: none; transform: translateY(4px) scaleY(.95); }
#pet.sad .leaf { transform: rotate(40deg); }
#pet.sad .mouth { d: path("M52 88 Q60 82 68 88"); }

@keyframes bob { 50% { transform: translateY(-5px) scale(1.02, .98); } }
@keyframes shadow { 50% { transform: scaleX(.85); } }
@keyframes sway { 50% { transform: rotate(-12deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes lean { 50% { transform: rotate(-4deg) translateY(-3px); } }
@keyframes perk { to { transform: rotate(-25deg) scale(1.15); } }
@keyframes look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px) translateY(-2px); } 65% { transform: translateX(4px) translateY(-2px); } }
@keyframes dot { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes talk { from { opacity: 1; transform: scaleY(.3); } to { opacity: 1; transform: scaleY(1.2); } }
@keyframes hop { 40% { transform: translateY(-16px) scale(.95, 1.05); } 70% { transform: translateY(0) scale(1.06, .94); } }
@media (prefers-reduced-motion: reduce) { #pet * { animation: none !important; } }