/* ===========================================================================
   Neo-Figur — gemeinsame Komponente (Website + App). Quelle: static/neo/neo.css
   Markup:  <span class="neo neo--md" data-neo="gefunden"><img src=".../neo-gefunden.svg" alt="…" width="48" height="48"></span>
   Groesse ueber Klasse (xs 24 · sm 32 · md 48 · lg 96 · xl bis 240) oder --neo-size.
   Unter 40 px immer die kleine Variante (neo-klein) verwenden — ohne Schatten.
   Zustandswechsel ohne JS: .neo-seq mit zwei Ebenen (.neo-a -> .neo-b), bei reduzierter Bewegung sofort Endzustand.
   Die Figur ist austauschbar (3D-PNG/WebP/Video): nur Dateien in neo/ ersetzen, Klassen bleiben.
   =========================================================================== */
.neo{--neo-size:48px;position:relative;display:inline-block;flex:none;width:var(--neo-size);height:var(--neo-size);line-height:0;vertical-align:middle}
.neo>img,.neo>video,.neo>picture>img{width:100%;height:100%;object-fit:contain;display:block}
.neo--xs{--neo-size:24px}
.neo--sm{--neo-size:32px}
.neo--md{--neo-size:48px}
.neo--lg{--neo-size:96px}
.neo--xl{--neo-size:clamp(150px,20vw,240px)}
/* Kreis-Plakette fuer Chat-Kopfzeilen (klein, ruhiger Hintergrund) */
.neo--badge{border-radius:10px;background:var(--b50,#f2f4ff);box-shadow:inset 0 0 0 1px rgba(81,112,255,.18);padding:3px}
.neo--badge>img{width:100%;height:100%}

/* Zustandsfolge: erst A (z. B. arbeitet), dann B (z. B. gefunden) */
.neo-seq>.neo-a,.neo-seq>.neo-b{position:absolute;inset:0}
.neo-seq>.neo-b{opacity:0}
.neo-seq>.neo-a{animation:neoOut .3s ease 2.6s forwards}
.neo-seq>.neo-b{animation:neoIn .35s cubic-bezier(.22,1,.36,1) 2.6s forwards}
@keyframes neoOut{to{opacity:0}}
@keyframes neoIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* Sprechblase */
.neo-say{position:relative;display:inline-block;background:var(--n0,#fff);color:var(--ink,#0a0d14);border-radius:14px 14px 14px 4px;
  padding:10px 14px;font-size:15px;line-height:1.4;font-weight:560;box-shadow:0 0 0 1px rgba(10,13,20,.06),0 2px 4px rgba(10,13,20,.04),0 16px 40px -12px rgba(10,13,20,.16)}
.neo-say small{display:block;font-size:12px;font-weight:500;color:var(--muted,#667085);margin-top:2px}

/* Kennzeichnung "Neo · KI-Assistent" */
.neo-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:560;color:var(--ink,#0a0d14)}
.neo-tag small{font-weight:500;color:var(--muted,#667085);font-size:12px}

@media (prefers-reduced-motion:reduce){
  .neo-seq>.neo-a{opacity:0!important;animation:none!important}
  .neo-seq>.neo-b{opacity:1!important;animation:none!important;transform:none!important}
}

/* Avatar an Neos Nachrichten (App-Chat, Builder): Element mit .neo-msg bekommt links die kleine Figur.
   Beim Austausch der Figur hier den Dateinamen mitziehen (wie in neo.json). */
.neo-msg{position:relative}
.neo-msg::before{content:"";position:absolute;left:-40px;top:0;width:30px;height:30px;background:url("neo-klein.svg") center/contain no-repeat}

/* Denk-Anzeige: kleine Figur im Zustand "arbeitet", nach Abschluss (.done) "fertig" (App: ersetzt die alten KI-Orbs) */
.neo-think{display:inline-block;flex:none;width:24px;height:24px;background:url("neo-arbeitet.svg") center/contain no-repeat}
.neo-think.done{background-image:url("neo-fertig.svg")}