/* Die Figur von bot.gemeinsamki.de (figur.js): ein weicher Kiesel in GemeinsamKI-Violett mit zwei
   großen Augen. Gefühle entstehen nur aus den Augen (wie bei Cozmo/Vector): Lider in Körperfarbe und
   eine „Wangen“-Ellipse schneiden das Auge zu Sichel, Schlitz oder Halbmond. Dazu der Halbring mit
   umlaufendem Punkt aus dem Logo, Sprechbalken, Schlaf-z und Funken. Alles CSS-Transforms auf
   SVG-Elementen; figur.js setzt nur Klassen und die Variablen --lx/--ly (Blick), --tilt (Neigung),
   --lvl (Pegel beim Zuhören) und --b1…--b5 (Sprechbalken). Bei „Bewegung reduzieren“ steht alles
   still, nur die Stimmung wechselt noch (kurz überblendet). */
.gki-figur{
  --fg-body:#7b74f6; --fg-body-edge:#5d55e0; --fg-shine:rgba(255,255,255,.42); --fg-shade:rgba(20,10,80,.16);
  --fg-eye:#f7fbff; --fg-eye2:#d9d6ff; --fg-eye-glow:rgba(120,240,220,.55); --fg-hl:#ffffff; --fg-pupil:#2a2766; --fg-cheek:rgba(255,120,170,.42);
  --fg-ring:rgba(139,133,248,.55); --fg-dot:#8b85f8; --fg-glow:rgba(102,94,245,.35); --fg-glow2:rgba(72,229,194,.5);
  --fg-shadow:rgba(30,20,90,.22); --fg-spark:#ffd86b; --fg-zzz:#8d8aa5; --fg-bad:#ff7d8b;
  --lx:0; --ly:0; --tilt:0; --mx:0; --my:0; --mtilt:0; --lvl:0; --b1:3; --b2:3; --b3:3; --b4:3; --b5:3;
  --ease:cubic-bezier(.2,.8,.2,1); --bounce:cubic-bezier(.34,1.56,.64,1);
  display:block; width:100%; height:auto; overflow:visible; user-select:none; -webkit-user-select:none;
}
:root[data-theme="dark"] .gki-figur{--fg-shadow:rgba(0,0,0,.5); --fg-eye-glow:rgba(120,240,220,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gki-figur{--fg-shadow:rgba(0,0,0,.5); --fg-eye-glow:rgba(120,240,220,.7)}}

.gki-figur, .gki-figur *{stroke:none}
.gki-figur *{transform-box:fill-box}
.gki-figur .fg-root{transform-box:view-box; transform-origin:120px 200px; transform:rotate(calc((var(--tilt) + var(--mtilt)) * 1deg)); transition:transform .5s var(--ease)}

/* Schatten, Glühen, Ring */
.gki-figur .fg-shadow{fill:var(--fg-shadow); filter:blur(3px); transform-origin:50% 50%; transition:transform .5s var(--ease), opacity .5s}
.gki-figur .fg-glow{fill:var(--fg-glow); filter:blur(14px); opacity:.9; transform-origin:50% 50%; transform:scale(calc(1 + var(--lvl) * .28)); transition:transform .12s linear, fill .6s}
.gki-figur .fg-orbit{transform-box:view-box; transform-origin:120px 120px; animation:fgOrbit 18s linear infinite}
.gki-figur .fg-orbit-ring{fill:none; stroke:var(--fg-ring); stroke-width:1.2; stroke-dasharray:2 5; opacity:.55; transition:stroke .5s, opacity .5s}
.gki-figur .fg-orbit-dot circle{fill:var(--fg-dot); transition:fill .5s}
.gki-figur .fg-orbit-dot{transform-box:view-box; transform-origin:120px 120px}

/* Körper */
.gki-figur .fg-bounce{transform-box:view-box; transform-origin:120px 196px}
.gki-figur .fg-body-wrap{transform-box:view-box; transform-origin:120px 196px; animation:fgBreathe 4.2s ease-in-out infinite}
.gki-figur .fg-body{fill:var(--fg-body); stroke:var(--fg-body-edge); stroke-width:1.2; transition:fill .6s}
.gki-figur .fg-shine{fill:var(--fg-shine); transform:rotate(-22deg); filter:blur(1.2px)}
.gki-figur .fg-shade{fill:var(--fg-shade); filter:blur(5px)}
.gki-figur .fg-cheek{fill:var(--fg-cheek); opacity:0; transition:opacity .4s}

/* Gesicht: Blick = --lx/--ly (Zeiger) + --mx/--my (Stimmung), in Benutzereinheiten des SVG */
.gki-figur .fg-face{transform:translate(calc((var(--lx) + var(--mx)) * 1px), calc((var(--ly) + var(--my)) * 1px)); transition:transform .35s var(--ease)}
.gki-figur .fg-eye-l{--m:-1}
.gki-figur .fg-eye-r{--m:1}
.gki-figur .fg-blink{transform-origin:50% 50%; transition:transform .07s ease-in}
.gki-figur .fg-blink.blink{transform:scaleY(.06)}
.gki-figur .fg-eye-base{filter:drop-shadow(0 0 6px var(--fg-eye-glow)); transform-origin:50% 50%; transition:transform .35s var(--bounce)}
.gki-figur .fg-hl{fill:var(--fg-hl); opacity:.9}
/* Pupillen (Klasse fg-pupils am SVG): wandern mit dem Blick etwas stärker als das Auge (Parallaxe) */
.gki-figur .fg-pupil-g{display:none; transform:translate(calc((var(--lx) + var(--mx)) * .5px), calc((var(--ly) + var(--my)) * .5px)); transition:transform .35s var(--ease)}
.gki-figur.fg-pupils .fg-pupil-g{display:initial}
.gki-figur .fg-pupil{fill:var(--fg-pupil)}
.gki-figur .fg-pupil-hl{fill:#fff; opacity:.95}
.gki-figur .fg-lid{fill:var(--fg-body); transition:transform .32s var(--ease)}
.gki-figur .fg-lid-top{transform-origin:50% 100%}
.gki-figur .fg-lid-bot{transform-origin:50% 0%}
.gki-figur .fg-smile{fill:var(--fg-body); transform-origin:50% 50%; transition:transform .32s var(--bounce)}

/* Sprechbalken unter den Augen: nur beim Sprechen sichtbar */
.gki-figur .fg-voice{opacity:0; transition:opacity .25s}
.gki-figur .fg-voice rect{fill:var(--fg-eye); opacity:.9; transform-origin:50% 50%; transition:transform .08s linear}
.gki-figur .fg-voice .v1{transform:scaleY(calc(var(--b1) / 3))}
.gki-figur .fg-voice .v2{transform:scaleY(calc(var(--b2) / 3))}
.gki-figur .fg-voice .v3{transform:scaleY(calc(var(--b3) / 3))}
.gki-figur .fg-voice .v4{transform:scaleY(calc(var(--b4) / 3))}
.gki-figur .fg-voice .v5{transform:scaleY(calc(var(--b5) / 3))}

/* Schlaf und Funken */
.gki-figur .fg-zzz{opacity:0; transition:opacity .4s}
.gki-figur .fg-zzz text{fill:var(--fg-zzz); font:700 15px var(--font, system-ui, sans-serif); transform-origin:50% 50%}
.gki-figur .fg-sparks{opacity:0}
.gki-figur .fg-sparks path{fill:var(--fg-spark); transform-origin:50% 50%; transform:scale(0)}

/* ---------- Stimmungen ---------- */
/* idle: offene Augen, Blick wandert (figur.js), Atmen, Ring dreht langsam */
.gki-figur.mood-happy .fg-smile, .gki-figur.mood-success .fg-smile{transform:translateY(-20px)}
.gki-figur.mood-happy .fg-lid-top, .gki-figur.mood-success .fg-lid-top{transform:translateY(2px)}
.gki-figur.mood-happy .fg-bounce, .gki-figur.mood-success .fg-bounce{animation:fgBounce .7s var(--bounce) 1}
.gki-figur.mood-happy .fg-cheek, .gki-figur.mood-success .fg-cheek, .gki-figur.mood-love .fg-cheek, .gki-figur.mood-asking .fg-cheek{opacity:1}

.gki-figur.mood-listening{--fg-glow:var(--fg-glow2)}
.gki-figur.mood-listening .fg-eye-base{transform:scale(calc(1.06 + var(--lvl) * .08))}
.gki-figur.mood-listening .fg-orbit{animation-duration:9s}
.gki-figur.mood-listening .fg-orbit-ring{opacity:.9; stroke:var(--fg-glow2)}
.gki-figur.mood-listening .fg-orbit-dot circle{fill:#48e5c2}

.gki-figur.mood-thinking{--mx:7; --my:-6; --mtilt:-3}
.gki-figur.mood-thinking .fg-lid-top{transform:translateY(6px)}
.gki-figur.mood-thinking .fg-orbit{animation-duration:2.4s}
.gki-figur.mood-thinking .fg-orbit-ring{opacity:.85}

.gki-figur.mood-working{--my:2}
.gki-figur.mood-working .fg-lid-top{transform:rotate(calc(var(--m) * -7deg)) translateY(5px)}
.gki-figur.mood-working .fg-orbit{animation-duration:1.3s}
.gki-figur.mood-working .fg-orbit-ring{opacity:1}

.gki-figur.mood-speaking .fg-voice{opacity:1}
.gki-figur.mood-speaking .fg-face{animation:fgTalk 1.1s ease-in-out infinite}
.gki-figur.mood-speaking .fg-lid-top{transform:translateY(1px)}

.gki-figur.mood-asking{--my:-3; --mtilt:5}
.gki-figur.mood-asking .fg-eye-base{transform:scale(1.07)}
.gki-figur.mood-asking .fg-eye-r .fg-lid-top{transform:translateY(-2px)}
.gki-figur.mood-asking .fg-eye-l .fg-lid-top{transform:translateY(7px)}
.gki-figur.mood-asking .fg-orbit{animation-play-state:paused}

.gki-figur.mood-surprised .fg-eye-base{transform:scale(1.2)}
.gki-figur.mood-surprised .fg-bounce{animation:fgPop .45s var(--bounce) 1}
.gki-figur.mood-surprised{--my:-2}

.gki-figur.mood-sad, .gki-figur.mood-sorry{--my:5}
.gki-figur.mood-sorry{--mx:-5}
.gki-figur.mood-sad .fg-lid-top, .gki-figur.mood-sorry .fg-lid-top{transform:rotate(calc(var(--m) * 15deg)) translateY(8px)}
.gki-figur.mood-sad .fg-body-wrap, .gki-figur.mood-sorry .fg-body-wrap{animation-duration:6s}
.gki-figur.mood-sad .fg-orbit, .gki-figur.mood-sorry .fg-orbit{animation-duration:40s}
.gki-figur.mood-sad .fg-orbit-ring, .gki-figur.mood-sorry .fg-orbit-ring{opacity:.3}

.gki-figur.mood-confused{--mtilt:-6; --mx:3}
.gki-figur.mood-confused .fg-eye-l .fg-lid-top{transform:translateY(14px)}
.gki-figur.mood-confused .fg-eye-r .fg-eye-base{transform:scale(1.12)}

.gki-figur.mood-error{--mtilt:-4}
.gki-figur.mood-error .fg-eye-l .fg-lid-top{transform:translateY(12px)}
.gki-figur.mood-error .fg-eye-r .fg-lid-top{transform:translateY(4px)}
.gki-figur.mood-error .fg-orbit-ring{stroke:var(--fg-bad); opacity:.9}
.gki-figur.mood-error .fg-orbit-dot circle{fill:var(--fg-bad)}
.gki-figur.mood-error .fg-orbit{animation-play-state:paused}
.gki-figur.mood-error .fg-root{animation:fgShake .5s ease-in-out 1}

.gki-figur.mood-sleeping{--my:4}
.gki-figur.mood-sleeping .fg-lid-top{transform:translateY(33.5px)}
.gki-figur.mood-sleeping .fg-eye-base{filter:none}
.gki-figur.mood-sleeping .fg-body-wrap{animation-duration:7s}
.gki-figur.mood-sleeping .fg-orbit{animation-play-state:paused}
.gki-figur.mood-sleeping .fg-orbit-ring{opacity:.2}
.gki-figur.mood-sleeping .fg-glow{opacity:.35}
.gki-figur.mood-sleeping .fg-zzz{opacity:1}
.gki-figur.mood-sleeping .fg-zzz text{animation:fgZzz 3s ease-in-out infinite}
.gki-figur.mood-sleeping .fg-zzz text:nth-child(2){animation-delay:1s}
.gki-figur.mood-sleeping .fg-zzz text:nth-child(3){animation-delay:2s}

.gki-figur.mood-success .fg-sparks{opacity:1}
.gki-figur.mood-success .fg-sparks path{animation:fgSpark 1.4s var(--bounce) 1 both}
.gki-figur.mood-success .fg-sparks path:nth-child(2){animation-delay:.12s}
.gki-figur.mood-success .fg-sparks path:nth-child(3){animation-delay:.24s}
.gki-figur.mood-success .fg-sparks path:nth-child(4){animation-delay:.36s}
.gki-figur.mood-success .fg-orbit{animation-duration:3s}

.gki-figur.mood-love .fg-smile{transform:translateY(-22px)}
.gki-figur.mood-love .fg-lid-top{transform:translateY(4px)}
.gki-figur.mood-love{--mtilt:3}

@keyframes fgOrbit{to{transform:rotate(360deg)}}
@keyframes fgBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.028)}}
@keyframes fgBounce{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-14px) scale(.96,1.06)}60%{transform:translateY(0) scale(1.05,.95)}80%{transform:translateY(-4px) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes fgPop{0%{transform:scale(1)}40%{transform:scale(1.07,1.1)}100%{transform:scale(1)}}
@keyframes fgTalk{0%,100%{translate:0 0}50%{translate:0 1.6px}}
@keyframes fgShake{0%,100%{translate:0 0}20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:3px 0}}
@keyframes fgZzz{0%{opacity:0; transform:translate(0,6px) scale(.7)}30%{opacity:1}100%{opacity:0; transform:translate(10px,-22px) scale(1.2)}}
@keyframes fgSpark{0%{transform:scale(0) rotate(0)}40%{transform:scale(1.1) rotate(25deg)}100%{transform:scale(0) rotate(60deg)}}

@media (prefers-reduced-motion:reduce){
  .gki-figur .fg-orbit, .gki-figur .fg-body-wrap, .gki-figur .fg-bounce, .gki-figur .fg-face, .gki-figur .fg-root, .gki-figur .fg-zzz text, .gki-figur .fg-sparks path{animation:none !important}
  .gki-figur .fg-sparks path{transform:scale(1)}
  .gki-figur *{transition-duration:.15s !important}
}