/* ══ Redesign "Design perfekt" Etappe 4 – Stellio-Figur ═══════════════════════
   Nur in app.html (nach icons.css). Animiert werden nur transform und opacity,
   alles innerhalb prefers-reduced-motion: no-preference. Ohne Bewegung bleibt
   die ruhige Pose stehen (Pixel unsichtbar, Blaeschen mit fester Deckkraft). */
.mascot { display: inline-block; width: var(--m-size); height: var(--m-size); flex-shrink: 0; line-height: 0; }
.mascot svg { overflow: visible; display: block; }
.mascot [class^="m-"], .mascot [class*=" m-"] { transform-box: fill-box; transform-origin: center; }
.mascot .m-px { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Schweben (Leandro 12.10.2026): ganze Figur sanft auf und ab. Laeuft auf dem aeusseren
     .mascot, die Teil-Animationen (denkt-Pixel, Stift, Augen) auf Elementen im SVG - keine Kollision. */
  .mascot { animation: m-float 3.6s ease-in-out infinite; will-change: transform; }
  /* denkt: Pixel-Zerfall – Figur loest sich kurz in Pixel auf und setzt sich wieder zusammen */
  .mascot--denkt .m-body { animation: m-dissolve 2.6s var(--ease-out) infinite; }
  .mascot--denkt .m-px { animation: m-pixel 2.6s var(--ease-out) infinite; }
  .mascot--denkt .m-bubbles circle { animation: m-bubble 1.3s ease-in-out infinite; opacity: .25; }
  .mascot--denkt .m-b2 { animation-delay: .2s; } .mascot--denkt .m-b3 { animation-delay: .4s; }
  .mascot--schreibt .m-pen { animation: m-pen .9s ease-in-out infinite; }
  .mascot--schreibt .m-lines line { stroke-dasharray: 30; stroke-dashoffset: 30; animation: m-line 2.7s linear infinite; }
  .mascot--schreibt .m-l2 { animation-delay: .9s; } .mascot--schreibt .m-l3 { animation-delay: 1.8s; }
  .mascot--freut .m-body, .mascot--freut .m-arm-l, .mascot--freut .m-arm-r { animation: m-jump var(--dur-celebrate) var(--ease-spring) 1 both; }
  .mascot--freut .m-stars path { animation: m-pop 400ms var(--ease-spring) both; }
  .mascot--freut .m-s2 { animation-delay: 120ms; } .mascot--freut .m-s3 { animation-delay: 240ms; }
  .mascot--wartet .m-eyes, .mascot--normal .m-eyes { animation: m-blink 5s ease-in-out infinite; }
  .mascot--winkt .m-arm-r { animation: m-wave 1.2s ease-in-out 2; transform-origin: 0% 100%; }
  .mascot--zeigt .m-arm-r { animation: m-nod 1.6s ease-in-out 2; }
}
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes m-dissolve { 0%, 34% { opacity: 1; transform: none; } 40%, 70% { opacity: 0; transform: scale(.94); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes m-pixel {
  0%, 32% { opacity: 0; transform: none; }
  38% { opacity: 1; transform: none; }
  54% { opacity: .9; transform: translate(var(--dx), var(--dy)) scale(.55); }
  70% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: none; }
}
@keyframes m-bubble { 0%,100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes m-pen { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes m-line { 0% { stroke-dashoffset: 30; } 33%,100% { stroke-dashoffset: 0; } }
@keyframes m-jump { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-6px) scale(1.06); } 100% { transform: none; } }
@keyframes m-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes m-blink { 0%,94%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes m-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }
@keyframes m-nod { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Groessen: schreibt max 96 Desktop / 72 Handy (EK2c) */
@media (max-width: 760px) { .wait-card .mascot { --m-size: 72px !important; } }
.typing-indicator .mascot { margin: -4px 0; }
.wait-card .mascot { margin-bottom: 8px; }
.wait-card.is-inline .mascot { margin: 0; }

/* Sprechende Figur (StellioMascot.say): Figur + Sprechblase */
.mascot-say { display: flex; align-items: flex-end; gap: 8px; margin: 10px 0; }
.mascot-say.is-floating { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 160; max-width: min(420px, calc(100vw - 32px)); }
.mascot-say-bubble { background: var(--tone-card); box-shadow: var(--shadow-card); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; color: var(--text); }

/* Erfolg (Etappe 7): Figur statt Haken/Pokal */
.celebrate-icon .mascot { display: block; margin: 0 auto; }
.celebrate-icon:has(.mascot) { background: none; width: auto; height: auto; }
#celebrate-title .sticker { vertical-align: -6px; }
/* Leerzustaende mit Figur */
.load-state > .mascot, .empty-state-icon .mascot { display: block; margin: 0 auto 8px; }
.empty-state-icon:has(.mascot) { background: none; width: auto; height: auto; }
/* "Frag Stellio" (Freigabe 12.10.2026): blaue Pille wie auf main, die Figur ersetzt nur das Icon -
   gleiche Groesse, kein weisser Kreis. Auf Blau als helle Figur, damit sie sich abhebt. */
.sh-fab .sh-fab-figure { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  --mascot-hi: #FFFFFF; --mascot-lo: #DCE8FF; --mascot-fold: #BFD3FF; --mascot-shadow: transparent; --on-accent: #2563EB; --mascot-ink: #0B1B3F; }
.sh-fab .sh-fab-figure .mascot { --m-size: 26px !important; }
.sh-fab .sh-fab-figure svg { width: 100%; height: 100%; }
@media (max-width: 640px) { .sh-fab .sh-fab-figure, .sh-fab .sh-fab-figure .mascot { width: 30px; height: 30px; --m-size: 30px !important; } }
.sh-fab:not(.is-open) .sh-fab-icon { display: none; }
.sh-fab.is-open .sh-fab-figure { display: none; }