:root { --bg1:#fbf3e4; --bg2:#f1dfc2; --ink:#3f2e24; --brown:#604536; --accent:#ff8a65; --ok:#4caf7a; --warn:#e8a33a; --ng:#c9564a; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; font-family:"Hiragino Maru Gothic ProN","Rounded Mplus 1c","BIZ UDPGothic",system-ui,sans-serif; color:var(--ink); }
body { background:linear-gradient(180deg,var(--bg1),var(--bg2)); display:flex; flex-direction:column; height:100dvh; }
#room { position:fixed; inset:0; z-index:-1; pointer-events:none; }
#room .window { position:absolute; top:7%; right:8%; width:120px; height:110px; border:8px solid #e5cfa9; border-radius:14px; background:linear-gradient(180deg,#cfe8f7,#eaf6fb); }
#room .rug { position:absolute; bottom:12%; left:50%; width:min(90vw,560px); height:70px; transform:translateX(-50%); border-radius:50%; background:#ecd3ae; box-shadow:inset 0 0 0 10px #e4c79c; }
#top { display:flex; justify-content:center; padding:max(10px,env(safe-area-inset-top)) 12px 0; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:#fffaf1; border:1px solid #e3cfae; font-size:14px; }
.chip .dot { width:10px; height:10px; border-radius:50%; background:#bbb; }
.chip[data-brain="nano-api"] .dot { background:var(--ok); box-shadow:0 0 0 4px #4caf7a33; }
.chip[data-brain="nano-llm"] .dot { background:var(--warn); }
.chip[data-brain="offline"] .dot { background:var(--ng); }
#stage { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:0; padding:0 12px; }
#charWrap { position:relative; width:min(88vw,46vh,440px); aspect-ratio:440/540; cursor:pointer; touch-action:manipulation; }
#ponta { width:100%; height:100%; overflow:visible; }
.bubble { position:relative; max-width:min(92vw,520px); margin:10px auto 6px; padding:14px 18px; background:#fff; border-radius:22px; border:2px solid #e3cfae; font-size:clamp(18px,4.6vw,24px); line-height:1.55; box-shadow:0 6px 18px #6045361a; animation:pop .25s ease-out; }
.bubble::after { content:""; position:absolute; left:50%; bottom:-12px; margin-left:-10px; border:10px solid transparent; border-top-color:#fff; border-bottom:0; }
.bubble.heard { background:#fff6e6; font-size:clamp(15px,3.8vw,19px); color:#7a6656; }
@keyframes pop { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }
.choices { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:6px 0; }
.choices button { min-height:56px; min-width:110px; padding:8px 20px; font-size:22px; border-radius:18px; border:3px solid #f0a92a; background:#fff8e1; color:var(--ink); font-family:inherit; }
#controls { display:flex; align-items:center; justify-content:center; gap:22px; padding:10px 12px max(14px,env(safe-area-inset-bottom)); }
#micBtn { width:96px; height:96px; border-radius:50%; border:0; background:var(--accent); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:inherit; font-size:15px; box-shadow:0 6px 0 #d9623f,0 10px 22px #d9623f55; }
#micBtn svg { width:40px; height:40px; }
#micBtn:active { transform:translateY(4px); box-shadow:0 2px 0 #d9623f; }
#micBtn[data-on="1"] { background:#e2513a; animation:micpulse 1.1s infinite; }
#micBtn:disabled { background:#c9b8a8; box-shadow:0 6px 0 #a8968a; }
@keyframes micpulse { 0%,100% { box-shadow:0 6px 0 #b8402c,0 0 0 0 #ff8a6588; } 50% { box-shadow:0 6px 0 #b8402c,0 0 0 18px #ff8a6500; } }
.side { width:52px; height:52px; border-radius:50%; border:2px solid #e3cfae; background:#fffaf1; color:var(--brown); display:flex; align-items:center; justify-content:center; }
.side svg { width:26px; height:26px; }
#kbForm { display:flex; gap:8px; padding:0 12px 12px; justify-content:center; }
#kbForm[hidden] { display:none; }
#kbForm input { flex:1; max-width:420px; font-size:18px; padding:12px 14px; border-radius:14px; border:2px solid #e3cfae; font-family:inherit; }
#kbForm button { font-size:18px; padding:0 18px; border-radius:14px; border:0; background:var(--brown); color:#fff; font-family:inherit; }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#fbf3e4ee; z-index:10; padding:20px; }
.overlay[hidden] { display:none; }
.card { background:#fff; border-radius:24px; padding:28px 24px; max-width:420px; text-align:center; box-shadow:0 10px 30px #60453622; }
.card h1 { margin:0 0 8px; font-size:28px; }
.card .big { margin:16px 0 8px; font-size:22px; padding:16px 28px; border-radius:18px; border:0; background:var(--accent); color:#fff; font-family:inherit; box-shadow:0 5px 0 #d9623f; }
.note { font-size:13px; color:#7a6656; line-height:1.6; }
dialog { border:0; border-radius:18px; max-width:min(92vw,520px); color:var(--ink); line-height:1.6; }
dialog pre { white-space:pre-wrap; font-size:12px; background:#f6efe4; padding:8px; border-radius:8px; }
dialog button { font-size:16px; padding:8px 18px; border-radius:12px; border:0; background:var(--brown); color:#fff; }
#zzz { position:absolute; right:12%; top:6%; font-size:34px; font-weight:700; color:#8fb7e0; opacity:0; }
#zzz span { font-size:.7em; margin-left:2px; }
[data-sleep="1"] #zzz { animation:zzz 2.4s infinite; }
@keyframes zzz { 0% { opacity:0; transform:translate(0,10px); } 30% { opacity:1; } 100% { opacity:0; transform:translate(16px,-26px); } }
@media (max-height:620px) { #micBtn { width:78px; height:78px; } .bubble { font-size:18px; padding:10px 14px; } }

/* ---- ぽんたの動き(motion は tcode の motionFor / idleAction が決める) ---- */
#ponta g, #ponta ellipse, #ponta circle { transform-box:fill-box; }
#bob { transform-origin:50% 100%; animation:breathe 3.2s ease-in-out infinite; }
#head { transform-origin:50% 90%; transition:transform .35s ease; }
.arm { transition:transform .35s ease; }
#armL { transform-origin:55% 6%; } #armR { transform-origin:45% 6%; }
#earL { transform-origin:80% 90%; transition:transform .3s; } #earR { transform-origin:20% 90%; transition:transform .3s; }
#leaf { transform-origin:50% 100%; animation:leaf 4s ease-in-out infinite; }
.eye { transform-origin:50% 50%; transition:transform .08s; }
.look { transition:transform .35s ease; }
#smileEyes, #sleepEyes, #mouthOpen, #mouthO { display:none; }
.cheek { opacity:.35; transition:opacity .4s; }
#chest .ic { display:none; }
[data-icon="drop"] #ic-drop, [data-icon="heart"] #ic-heart, [data-icon="question"] #ic-question, [data-icon="dots"] #ic-dots,
[data-icon="rain"] #ic-rain, [data-icon="spark"] #ic-spark, [data-icon="mic"] #ic-mic { display:inline; }
#ic-heart { transform-origin:50% 50%; animation:beat 1s ease-in-out infinite; }
#ic-dots circle { animation:dot 1s infinite; } #ic-dots .d2 { animation-delay:.15s; } #ic-dots .d3 { animation-delay:.3s; }
#ic-spark { transform-origin:50% 50%; animation:spin 2.4s linear infinite; }
#bellyLight { transition:opacity .3s, fill .3s; } #bellyGlow { opacity:0; transition:opacity .3s; }

@keyframes breathe { 0%,100% { transform:scale(1,1); } 50% { transform:scale(1.012,.99); } }
@keyframes leaf { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(7deg); } }
@keyframes beat { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
@keyframes dot { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(-5px); } }
@keyframes spin { to { transform:rotate(360deg); } }

/* 気持ち */
[data-emotion="happy"] .cheek { opacity:.95; }
[data-emotion="happy"] #earL { transform:rotate(-8deg); } [data-emotion="happy"] #earR { transform:rotate(8deg); }
[data-emotion="sad"] #earL { transform:rotate(22deg); } [data-emotion="sad"] #earR { transform:rotate(-22deg); }
[data-emotion="sad"] .look { transform:translateY(5px); }
[data-emotion="surprised"] .eye { transform:scale(1.12); }
[data-emotion="surprised"] #mouthClosed { display:none; } [data-emotion="surprised"] #mouthO { display:inline; }
[data-emotion="thinking"] .look { transform:translate(6px,-7px); }

/* 口パク(話している間 app.js が data-mouth を切り替える) */
[data-mouth="open"] #mouthClosed, [data-mouth="open"] #mouthO { display:none !important; }
[data-mouth="open"] #mouthOpen { display:inline !important; }

/* まばたき・ニコ目・ねむり */
[data-blink="1"] .eye { transform:scaleY(.08); }
[data-motion="cheer"] #eyes { display:none; } [data-motion="cheer"] #smileEyes { display:inline; }
[data-sleep="1"] #eyes { display:none; } [data-sleep="1"] #sleepEyes { display:inline; }
[data-sleep="1"] #bob { animation:breathe 5s ease-in-out infinite; }
[data-sleep="1"] #head { transform:rotate(-8deg) translateY(6px); }

/* 聞いている: 耳がぴんと立ち、おなかが光る */
[data-listen="1"] #earL { transform:rotate(-14deg) translateY(-6px); } [data-listen="1"] #earR { transform:rotate(14deg) translateY(-6px); }
[data-listen="1"] #bellyLight { fill:#FF9E7A; animation:glow 1s ease-in-out infinite; } [data-listen="1"] #bellyGlow { opacity:1; }
[data-listen="1"] #camLed { fill:#FF7A5C; }
@keyframes glow { 0%,100% { opacity:.55; } 50% { opacity:1; } }
/* 考え中: 胸のバーが順に光る */
[data-think="1"] #bar circle { animation:barlight 1.2s infinite; fill:#FFD873; }
#bar .b2 { animation-delay:.15s !important; } #bar .b3 { animation-delay:.3s !important; } #bar .b4 { animation-delay:.45s !important; } #bar .b5 { animation-delay:.6s !important; }
@keyframes barlight { 0%,100% { opacity:.25; } 40% { opacity:1; } }
.brain-ok #camLed { fill:#7CCB8F; }

/* からだの動き */
[data-motion="sway"] #bob { animation:sway 1.6s ease-in-out 2; }
@keyframes sway { 0%,100% { transform:rotate(0); } 30% { transform:rotate(-3deg); } 70% { transform:rotate(3deg); } }
[data-motion="cheer"] #armL { animation:armUpL 1.6s ease-in-out; } [data-motion="cheer"] #armR { animation:armUpR 1.6s ease-in-out; }
[data-motion="cheer"] #bob { animation:hop .5s ease-out 3; }
@keyframes armUpL { 0%,100% { transform:rotate(0); } 20%,80% { transform:rotate(135deg); } 50% { transform:rotate(115deg); } }
@keyframes armUpR { 0%,100% { transform:rotate(0); } 20%,80% { transform:rotate(-135deg); } 50% { transform:rotate(-115deg); } }
@keyframes hop { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-22px); } }
[data-motion="jump"] #bob { animation:jump .7s cubic-bezier(.3,1.6,.5,1); } [data-motion="jump"] #armL { transform:rotate(60deg); } [data-motion="jump"] #armR { transform:rotate(-60deg); }
@keyframes jump { 0% { transform:translateY(0) scale(1,1); } 15% { transform:translateY(4px) scale(1.06,.92); } 45% { transform:translateY(-46px) scale(.96,1.05); } 100% { transform:translateY(0); } }
[data-motion="droop"] #head { transform:rotate(4deg) translateY(10px); } [data-motion="droop"] #armL { transform:rotate(-6deg); } [data-motion="droop"] #armR { transform:rotate(6deg); }
[data-motion="think"] #head { transform:rotate(-7deg); } [data-motion="think"] #armR { transform:rotate(-150deg); }
[data-motion="tilt"] #head { animation:tilt 1.8s ease-in-out; } [data-motion="tilt"] #armL { transform:rotate(30deg); }
@keyframes tilt { 0%,100% { transform:rotate(0); } 25%,75% { transform:rotate(13deg); } }
[data-motion="nod"] #head { animation:nod .55s ease-in-out 2; }
@keyframes nod { 0%,100% { transform:rotate(0); } 50% { transform:translateY(9px) rotate(0); } }
[data-motion="wave"] #armR { animation:wave 1.6s ease-in-out; }
@keyframes wave { 0%,100% { transform:rotate(0); } 20%,60% { transform:rotate(-150deg); } 40%,80% { transform:rotate(-120deg); } }
[data-motion="look"] .look { animation:look 2.4s ease-in-out; }
@keyframes look { 0%,100% { transform:translate(0,0); } 25%,40% { transform:translate(-8px,0); } 60%,80% { transform:translate(8px,0); } }
[data-motion="yawn"] #mouthClosed { display:none; } [data-motion="yawn"] #mouthO { display:inline; animation:yawn 2s ease-in-out; transform-origin:50% 30%; }
[data-motion="yawn"] .eye { transform:scaleY(.3); } [data-motion="yawn"] #armL { transform:rotate(150deg); } [data-motion="yawn"] #armR { transform:rotate(-150deg); }
@keyframes yawn { 0%,100% { transform:scale(1); } 50% { transform:scale(1.5,1.9); } }
[data-motion="poke"] #bob { animation:poke .5s ease-out; } [data-motion="poke"] #eyes { display:none; } [data-motion="poke"] #smileEyes { display:inline; }
@keyframes poke { 0%,100% { transform:scale(1); } 30% { transform:scale(1.07,.93); } 60% { transform:scale(.97,1.03); } }
@media (prefers-reduced-motion:reduce) { #bob, #leaf { animation:none !important; } }

.bubble[hidden], .choices[hidden], [hidden] { display:none !important; }