/**
 * HeyAvatar — geteilte Styles für die sprechende Figur und ihre
 * Merkmalsauswahl. Gehört zu avatar.js:
 *
 *   <link rel="stylesheet" href="../_shared/avatar.css" />
 *   <script src="../_shared/avatar.js"></script>
 *
 * Look wie der Rest der Plattform: keine Borders, keine Shadows, Abgrenzung
 * allein über Flächen. Farbakzent ist die Kursfarbe (--pal-accent).
 * Touch-Ziele mindestens 56 px — die Apps laufen auf Kinderhänden.
 */

/* ── Figur ───────────────────────────────────────────────────────────────── */

.hey-av { display: block; margin: 0 auto; }
/* Ecken IMMER abrunden: Das Clay-Monster bringt eine eckige Hintergrundfläche
   mit — ohne Radius steht überall ein hartes Rechteck (Werkstatt-Vorschau,
   Monster-Eck, Sprachspeicher). Relativ, damit er in jeder Größe stimmt. */
.hey-av-figur {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 16%; overflow: hidden;
}
.hey-av-svg { display: block; width: 100%; height: 100%; }

/* Der gesprochene Text steht immer auch da. Unter ~120 px Figurgröße wäre er
   unlesbar — dann bleibt er nur für Screenreader stehen (.is-klein). */
.hey-av-text {
  margin: 10px 0 0; font-size: 15px; line-height: 1.55; text-align: center;
  overflow-wrap: break-word; min-height: 0;
}
.hey-av-text:empty { display: none; }
.hey-av-text.is-sr,
.hey-av.is-klein .hey-av-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Merkmalsauswahl ─────────────────────────────────────────────────────── */

.hey-avw { display: flex; flex-direction: column; gap: 12px; }
.hey-avw-grp { min-width: 0; }
.hey-avw-lab {
  font-size: 9.5px; font-weight: 700; opacity: 0.45;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 7px;
}
/* Raster statt Flex-Umbruch: So bleiben alle Auswahlflächen gleich groß —
   kein einzelner, über die ganze Breite gezogener Rest in der letzten Zeile. */
.hey-avw-row {
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}
.hey-avw-row.zwei { grid-template-columns: repeat(2, 1fr); }

.hey-avw-pill {
  min-width: 0; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 6px 8px; border: none; border-radius: 14px;
  font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1.2;
  color: inherit; cursor: pointer; overflow-wrap: break-word;
  transition: background 0.15s, color 0.15s;
}
body.theme-light .hey-avw-pill { background: rgba(15, 23, 42, 0.055); }
body.theme-dark  .hey-avw-pill { background: rgba(255, 255, 255, 0.07); }
body.theme-light .hey-avw-pill:hover { background: rgba(15, 23, 42, 0.09); }
body.theme-dark  .hey-avw-pill:hover { background: rgba(255, 255, 255, 0.11); }
/* Ausgewählt: dieselbe gedämpfte Akzentfläche wie die Listen-Items der App. */
body.theme-light .hey-avw-pill.on { background: color-mix(in srgb, var(--pal-accent) 16%, transparent); }
body.theme-dark  .hey-avw-pill.on { background: color-mix(in srgb, var(--pal-accent) 30%, transparent); }
.hey-avw-pill.on { color: var(--pal-accent); }
body.theme-dark .hey-avw-pill.on { color: var(--pal-subtle, #b2aff4); }
.hey-avw-pill:focus-visible { outline: 2px solid var(--pal-accent); outline-offset: 2px; }

/* Farbwahl: ein kleiner Kreis in neutraler Fläche (Farbwähler-Kreise sind
   die einzige erlaubte Ausnahme von der Linien-Regel). */
.hey-avw-dot { width: 22px; height: 22px; border-radius: 50%; display: block; }
.hey-avw-farbe.on .hey-avw-dot { width: 26px; height: 26px; }

/* Frisur: winzige Vorschau statt Wort allein. */
.hey-avw-frisur { min-height: 76px; padding: 6px 4px; }
.hey-avw-vor { width: 40px; height: 40px; display: block; }
.hey-avw-vor svg { display: block; width: 100%; height: 100%; }
.hey-avw-nam { font-size: 10.5px; font-weight: 650; opacity: 0.72; }
.hey-avw-pill.on .hey-avw-nam { opacity: 1; }

.hey-avw-txt { font-size: 14px; }

.hey-avw-hinweis { font-size: 12px; line-height: 1.5; opacity: 0.55; margin: 2px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .hey-avw-pill { transition: none; }
}