/* 2Minds - Der Begleiter, Gestaltung.
 *
 * Ruhig, gross, ohne Zappeln. Das Gesicht darf freundlich sein, aber nie so
 * tun, als waere es ein Mensch - siehe die Begruendung im Kopf von avatar.js.
 */

.av {
  display: flex;
  flex-direction: column;
  gap: var(--luft-liste);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: var(--luft-block);
  box-shadow: var(--schatten);
}

/* ------------------------------------------------------------- Kopfbereich */

.av-kopfbereich {
  display: flex;
  align-items: center;
  gap: var(--luft-liste);
  padding-bottom: var(--luft-liste);
  border-bottom: 1px solid var(--rand);
}

.av-gesicht {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  color: var(--akzent);
}
.av-gesicht svg { width: 100%; height: 100%; display: block; }
.av-kopf { fill: var(--akzent-sanft); stroke: currentColor; stroke-width: 3; }
.av-auge { fill: currentColor; transition: r var(--dauer) var(--kurve), cy var(--dauer) var(--kurve); }
.av-mund { stroke: currentColor; transition: d var(--dauer) var(--kurve); }

/* Vier Zustaende, mehr nicht. Ein Gesicht mit zwanzig Regungen wird zur
   Nebenbeschaeftigung; hier soll es nur sagen: ich bin da, ich denke, ich
   spreche, das nehme ich ernst. */
.av-gesicht[data-lage="denkt"] .av-auge { r: 3.5; }
.av-gesicht[data-lage="spricht"] .av-mund { d: path("M42 74 Q60 92 78 74"); }
.av-gesicht[data-lage="ernst"] .av-mund { d: path("M42 80 Q60 76 78 80"); }
.av-gesicht[data-lage="ernst"] .av-kopf { fill: color-mix(in srgb, var(--hinweis) 12%, var(--flaeche)); }

/* Ein sehr langsames Atmen. Es zeigt "da bin ich", ohne Aufmerksamkeit zu
   ziehen - und wer Bewegung abgestellt hat, bekommt gar keine (marke.css). */
@keyframes av-atmen {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.av-gesicht { animation: av-atmen 5.5s var(--kurve) infinite; }

.av-name { display: flex; flex-direction: column; gap: 2px; }
.av-name strong { font-size: var(--fs-lg); }
.av-was { font-size: var(--fs-sm); color: var(--text-still); }

/* ---------------------------------------------------------------- Verlauf */

.av-verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--luft-liste);
  min-height: 220px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: var(--luft-haar);
  /* Das Rollen bleibt in dieser Liste, statt die Seite darunter mitzunehmen. */
  overscroll-behavior: contain;
}

.av-blase {
  max-width: 85%;
  padding: var(--luft-liste) var(--luft-block);
  border-radius: var(--radius);
  line-height: 1.55;
}
.av-blase p + p { margin-top: var(--luft-eng); }

.av-er {
  align-self: flex-start;
  background: var(--akzent-sanft);
  border-bottom-left-radius: var(--radius-klein);
}
.av-ich {
  align-self: flex-end;
  background: var(--flaeche-tief);
  border-bottom-right-radius: var(--radius-klein);
}

/* Die Krisenantwort hebt sich ab - aber ruhig, nicht alarmierend. Ein
   knallroter Kasten in dem Moment, in dem jemand schreibt, dass er nicht mehr
   kann, waere das Gegenteil von Hilfe. */
.av-art-krise {
  background: color-mix(in srgb, var(--hinweis) 10%, var(--flaeche));
  border: 1px solid color-mix(in srgb, var(--hinweis) 35%, var(--rand));
  max-width: 100%;
}
.av-art-krise p:first-child { font-weight: 600; }
.av-notfall { margin-top: var(--luft-liste); }

.av-art-was-ich-bin,
.av-art-unpruefbar,
.av-art-kein-rat {
  border: 1px solid var(--rand);
}

/* ---------------------------------------------------------------- Eingabe */

.av-zeile {
  display: flex;
  gap: var(--luft-eng);
  align-items: flex-end;
}
.av-feld {
  flex: 1;
  min-height: var(--ziel-min);
  max-height: 140px;
  padding: 12px var(--luft-liste);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: none;
}
.av-feld::placeholder { color: var(--text-still); }
.av-senden { flex: 0 0 auto; }

.av-schalter { display: flex; gap: var(--luft-eng); flex-wrap: wrap; }
.av-schalter .knopf { font-size: var(--fs-sm); min-height: 44px; padding: 0 var(--luft-liste); }
.av-schalter .knopf.an {
  background: var(--akzent-sanft);
  border-color: var(--akzent);
  color: var(--akzent);
}

.av-hinweis { margin: 0; }

/* ----------------------------------------------------------------- Handy */

@media screen and (max-width: 560px) {
  .av { padding: var(--luft-liste); border-radius: var(--radius); }
  .av-blase { max-width: 92%; }
  .av-verlauf { max-height: 50vh; }
  /* Senden unter das Feld: nebeneinander bleiben bei 320 px weder Feld noch
     Knopf brauchbar breit. */
  .av-zeile { flex-direction: column; align-items: stretch; }
  .av-senden { width: 100%; }
}

/* ---------------------------------------------------------------- Mo, 3D */

/* Der Behaelter bekommt eine feste Groesse. Ohne sie hat das Zeichenfeld beim
   ersten Bild die Hoehe null, und Three.js rechnet dann mit einem
   Seitenverhaeltnis von unendlich - Mo waere unsichtbar oder verzerrt, und
   zwar nur beim ersten Laden. Genau die Sorte Fehler, die man einmal sieht
   und danach nie wieder nachstellen kann. */
.av-gesicht {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
}
.av-gesicht canvas { display: block; width: 100%; height: 100%; }

/* Die 3D-Fassung braucht die Atem-Animation der Zeichnung nicht - sie atmet
   im Modell. Zwei Animationen uebereinander waeren ein Zittern. */
.av-gesicht[data-fassung="3d"] { animation: none; }

@media screen and (max-width: 560px) {
  .av-gesicht { width: 76px; height: 76px; }
}