*{box-sizing:border-box}
:root{
  --green:#60c54e;
  --green-dark:#2f9837;
  --red:#ef4d57;
  --ink:#21302a;
  --muted:#6d7d76;
  --paper:#fffdfa;
  --line:#dce9df;
}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:
radial-gradient(circle at 10% 5%,#fff4f5 0,transparent 35%),
radial-gradient(circle at 90% 10%,#efffe9 0,transparent 35%),
#f6faf6}
body{min-height:100vh}
button{font:inherit}
.app{width:min(1040px,100%);margin:0 auto;padding:22px 18px 40px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:center;min-height:100vh}
.stage,.controls{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:0 14px 45px rgba(26,68,44,.10)}
.stage{padding:20px 22px 24px;overflow:hidden}
.title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.title h1{margin:0;font-size:clamp(25px,4vw,38px);letter-spacing:.02em}
.title p{margin:5px 0 0;color:var(--muted)}
.badge{background:#eff9ed;color:var(--green-dark);border:1px solid #bee2b7;border-radius:999px;padding:6px 11px;font-weight:700;font-size:13px}
.character-wrap{height:min(58vh,650px);min-height:360px;position:relative;display:flex;align-items:flex-end;justify-content:center;margin-top:8px}
#character{height:100%;max-width:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 12px 12px rgba(0,0,0,.08))}
.thinking{position:absolute;top:16px;right:14px;background:white;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-weight:700;box-shadow:0 5px 16px rgba(0,0,0,.07)}
.bubble{position:relative;margin-top:8px;padding:17px 19px;border:2px solid #cde6c9;border-radius:20px;background:#fff;min-height:100px;line-height:1.75}
.bubble:before{content:"";position:absolute;top:-15px;left:50%;width:26px;height:26px;background:#fff;border-left:2px solid #cde6c9;border-top:2px solid #cde6c9;transform:translateX(-50%) rotate(45deg)}
.speaker{font-size:13px;color:var(--green-dark);font-weight:800;margin-bottom:4px}
#answer{font-size:16px;white-space:pre-wrap}
.controls{padding:24px;display:flex;flex-direction:column;gap:13px}
.status{align-self:flex-start;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:800}
.status-off{background:#f0f1f1;color:#6d7471}
.status-on{background:#e7f8e4;color:#277c2d}
.status-talk{background:#fff0f1;color:#c73540}
.status-think{background:#fff8dd;color:#9b7314}
.status-speak{background:#edf6ff;color:#286ca4}
.btn{border:0;border-radius:16px;padding:16px 18px;font-weight:800;cursor:pointer;transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:not(:disabled):active{transform:scale(.98)}
.btn-start{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(63,160,56,.24)}
.btn-talk{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain;background:var(--red);color:#fff;font-size:18px;min-height:72px;box-shadow:0 8px 20px rgba(210,63,74,.22);touch-action:none}
.btn-talk.is-talking{transform:scale(.98);box-shadow:0 0 0 6px rgba(239,77,87,.16)}
.btn-stop{background:#edf1ee;color:#435049}
.help,.note{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.note{padding-top:12px;border-top:1px dashed var(--line)}
.mic{margin-right:6px}
#remoteAudio{display:none}

@media (max-width:820px){
  .app{grid-template-columns:1fr;align-items:start;padding:12px 12px 28px}
  .stage{padding:16px 15px 18px}
  .character-wrap{height:44vh;min-height:300px}
  .controls{padding:18px;position:static;box-shadow:0 12px 40px rgba(26,68,44,.18)}
  .title p{font-size:13px}
}
@media (max-height:700px) and (min-width:821px){
  .character-wrap{height:56vh;min-height:310px}
}