/* m2.css — Kergo character states + voice UI (owned by the M2 module). Loads after styles.css. */

/* ───────── Character: container ───────── */
.avatar.avatar--svg { background-image: none; overflow: hidden; position: relative; }
.avatar.avatar--svg .kg { display: block; width: 100%; height: 100%; }
.avatar--mini { width: 36px; height: 36px; box-shadow: none; margin-right: .1rem; flex: none; }
/* The mini face only earns its spot once the big one is hidden behind the conversation. */
#home:has(#stage:not([hidden])) .avatar--mini { display: none; }

/* Palette: warm paper, skin, teal sweater, sandy dog. Face features stay literal (skin doesn't change in dark mode). */
.kg-bg { fill: var(--bg-2); }
.kg-skin { fill: #e9c9a8; } .kg-skin-2 { fill: #e0b995; }
.kg-shine { fill: #fff; opacity: .38; }
.kg-sweater { fill: #2f7d6d; }
.kg-collar { fill: none; stroke: #27695c; stroke-width: 4; stroke-linecap: round; }
.kg-brow { fill: none; stroke: #3a3127; stroke-width: 3.2; stroke-linecap: round; opacity: .85; }
.kg-pupil { fill: #23211d; }
.kg-lens { fill: #fff; opacity: .16; }
.kg-glint { fill: #fff; opacity: 0; }
.kg-frame { fill: none; stroke: #23211d; stroke-width: 4.5; stroke-linecap: round; }
.kg-mouth path { fill: none; stroke: #23211d; stroke-width: 4; stroke-linecap: round; }
.kg-mouth-open { fill: #4a2a2a; }
.kg-fur, .kg-tail, .kg-ear { fill: #c79a66; }
.kg-tail { fill: none; stroke: #c79a66; stroke-width: 6; stroke-linecap: round; }
.kg-ear { fill: none; stroke: #9c7246; stroke-width: 5; stroke-linecap: round; }
.kg-ink { fill: #23211d; }
.kg-dog-collar { fill: none; stroke: #2f7d6d; stroke-width: 3; stroke-linecap: round; }
.kg-dots circle { fill: var(--ink-2); opacity: 0; }
.kg-ring { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; }

/* Every animated part transforms around its own box, so the same keyframes work at 36px and 160px. */
.kg-body, .kg-eyes, .kg-pupils, .kg-brow, .kg-mouth-open, .kg-tail, .kg-ear, .kg-glint, .kg-ring, .kg-dots circle, .kg-dog-head {
  transform-box: fill-box; transform-origin: center;
  transition: transform .35s ease, opacity .3s ease;
}
.kg-tail { transform-origin: 100% 0%; }
.kg-ear { transform-origin: 50% 100%; }
.kg-mouth path, .kg-mouth-open { transition: opacity .2s ease; }

/* ───────── Idle: slow breathing, the occasional blink ───────── */
.kg-body { animation: kg-breathe 4.6s ease-in-out infinite; }
.kg-eyes { animation: kg-blink 5.3s ease-in-out infinite; }
.kg-mouth-soft, .kg-mouth-hmm, .kg-mouth-open { opacity: 0; }
.kg-mouth-smile { opacity: 1; }
@keyframes kg-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes kg-blink { 0%, 93.5%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

/* ───────── Listening: attentive — ring pulses, dog's ears perk, brows lift ───────── */
[data-state="listening"] .kg-ring { opacity: .9; animation: kg-ring 1.5s ease-out infinite; }
[data-state="listening"] .kg-brow { transform: translateY(-2.5px); }
[data-state="listening"] .kg-pupils { transform: scale(1.12); }
[data-state="listening"] .kg-ear-l { transform: rotate(-22deg); }
[data-state="listening"] .kg-ear-r { transform: rotate(18deg); }
[data-state="listening"] .kg-dog-head { transform: rotate(-6deg); }
[data-state="listening"] .kg-mouth-smile { opacity: 0; }
[data-state="listening"] .kg-mouth-soft { opacity: 1; }
@keyframes kg-ring { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.06); opacity: 0; } }
.avatar[data-state="listening"] { animation: kg-halo 1.5s ease-out infinite; }
@keyframes kg-halo { 0% { box-shadow: 0 0 0 0 var(--ring); } 100% { box-shadow: 0 0 0 18px rgba(47,125,109,0); } }

/* ───────── Thinking: eyes up and to the side, one brow raised, thought dots ───────── */
[data-state="thinking"] .kg-pupils { transform: translate(2.5px, -3.5px); }
[data-state="thinking"] .kg-brow-r { transform: translateY(-3.5px) rotate(-6deg); }
[data-state="thinking"] .kg-mouth-smile { opacity: 0; }
[data-state="thinking"] .kg-mouth-hmm { opacity: 1; }
[data-state="thinking"] .kg-dots circle { animation: kg-dot 1.6s ease-in-out infinite; }
[data-state="thinking"] .kg-dots circle:nth-child(2) { animation-delay: .25s; }
[data-state="thinking"] .kg-dots circle:nth-child(3) { animation-delay: .5s; }
@keyframes kg-dot { 0%, 100% { opacity: .15; transform: translateY(1px); } 40% { opacity: .85; transform: translateY(-1.5px); } }

/* ───────── Speaking: the mouth moves ───────── */
[data-state="speaking"] .kg-mouth-smile { opacity: 0; }
[data-state="speaking"] .kg-mouth-open { opacity: 1; animation: kg-talk .62s ease-in-out infinite; }
[data-state="speaking"] .kg-brow { transform: translateY(-1px); }
@keyframes kg-talk {
  0% { transform: scaleY(.35) scaleX(.9); } 22% { transform: scaleY(1) scaleX(1); } 45% { transform: scaleY(.5) scaleX(1.05); }
  65% { transform: scaleY(.9) scaleX(.95); } 82% { transform: scaleY(.3) scaleX(1); } 100% { transform: scaleY(.35) scaleX(.9); }
}

/* ───────── Working on the long answer: glasses glint, dog wags, eyes down reading ───────── */
[data-state="working"] .kg-glint { opacity: .6; animation: kg-glint 2.8s ease-in-out infinite; }
[data-state="working"] .kg-pupils { transform: translateY(2px); }
[data-state="working"] .kg-tail { animation: kg-wag .5s ease-in-out infinite alternate; }
[data-state="working"] .kg-mouth-smile { opacity: 0; }
[data-state="working"] .kg-mouth-soft { opacity: 1; }
@keyframes kg-glint { 0%, 55% { transform: translateX(0); opacity: 0; } 60% { opacity: .6; } 100% { transform: translateX(100px); opacity: 0; } }
@keyframes kg-wag { from { transform: rotate(-26deg); } to { transform: rotate(22deg); } }

/* ───────── Reduced motion: states stay readable, nothing moves on its own ───────── */
@media (prefers-reduced-motion: reduce) {
  .kg-body, .kg-eyes, .kg-ring, .kg-dots circle, .kg-mouth-open, .kg-glint, .kg-tail, .avatar[data-state="listening"], .mic[data-state="listening"] { animation: none !important; }
  .kg-body, .kg-eyes, .kg-pupils, .kg-brow, .kg-mouth-open, .kg-tail, .kg-ear, .kg-glint, .kg-ring, .kg-dots circle, .kg-dog-head, .kg-mouth path { transition: none; }
  [data-state="listening"] .kg-ring { opacity: .8; }
  [data-state="thinking"] .kg-dots circle { opacity: .7; }
  [data-state="speaking"] .kg-mouth-open { transform: scaleY(.7); }
  [data-state="working"] .kg-glint { opacity: .5; transform: translateX(40px); }
  .avatar[data-state="listening"] { box-shadow: 0 0 0 10px var(--ring); }
}

/* ───────── Voice UI: the mic while listening ───────── */
.mic[data-state="listening"] { animation: kg-micpulse 1.5s ease-out infinite; }
@keyframes kg-micpulse { 0% { box-shadow: 0 0 0 0 var(--ring), 0 8px 24px var(--ring); } 100% { box-shadow: 0 0 0 22px rgba(47,125,109,0), 0 8px 24px var(--ring); } }
.mic[data-state="listening"] svg { animation: kg-micbeat 1.5s ease-in-out infinite; }
@keyframes kg-micbeat { 50% { transform: scale(1.08); } }
/* "Listening…" stays visible even when the conversation hides the dock note. */
.thread:not([hidden]) ~ .dock[data-voice="listening"] #type-label.dock-note { display: block; }
.dock[data-voice="listening"] #type-label { color: var(--accent); font-weight: 600; }
.ask textarea.is-listening { box-shadow: 0 0 0 4px var(--ring); }
.ask textarea.is-listening::placeholder { color: var(--accent); }