/* Nom-Nom-Assistent (seit v1.33.175, Karte t_f72e6668)
   ===========================================================================
   Overlay unten rechts: Figur + Sprechblase mit kontextbezogener Hilfe.
   Markup: templates/macros/nomnom_assistant.html (einmal in base.html)
   Steuerung: static/js/nomnom-assistant.js

   Grundsaetze
   -----------
   * `position: fixed` und pointer-events nur auf den sichtbaren Teilen —
     das Seitenlayout verschiebt sich NIE (kein Layout-Shift).
   * v1.33.182 (Bennet, 23.10.2026): Die Figur sitzt bewusst UEBER der Ecke —
     sie ragt `--nn-bleed-x` nach rechts und `--nn-bleed-y` nach unten aus dem
     Viewport (sichtbar angeschnitten). Der Ueberstand laeuft ueber negative
     Margins der Figur, damit die Sprechblase ihren normalen Randabstand
     behaelt und NICHT mitwandert.
   * Drei Zustaende ueber `data-state`: ready · open · minimized.
   * z-index 300: UNTER Menue-Drawer (400), Filter-Panel (420), Toasts (999)
     und den Vollbild-Overlays (1000 Lade-Overlay, 1200 Kochmodus) — der
     Assistent darf nie ueber Modals oder Bedienelementen liegen.
   * Alle Farben aus den Theme-Token (style.css) — hell und dunkel stimmen.
   * Bewegung nur beim Zustandswechsel (200–300 ms); kein Blinken, kein
     dauerhaftes Wackeln, `prefers-reduced-motion` schaltet alles ab.
   --------------------------------------------------------------------------- */

.nn {
  --nn-size: 176px;         /* Avatar-Kante (v1.33.179: doppelt so gross wie 88) */
  --nn-crop: 16px;          /* Fuesse/Beine unten bewusst angeschnitten */
  --nn-peek: 22px;          /* sichtbarer Muetzen-Rest im minimierten Zustand */
  --nn-hit: 44px;           /* Mindest-Trefferflaeche (A11y) */
  --nn-gap: 16px;           /* Abstand der Sprechblase zur rechten Kante (12–20 px) */
  --nn-bleed-x: 14px;       /* Figur ragt rechts ueber den Viewport (10–16 px) */
  --nn-bleed-y: 18px;       /* Figur ragt unten ueber den Viewport (14–20 px) */

  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 300;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Nur die Figur/Blase sollen Klicks abfangen, nicht die (unsichtbare)
     Flaeche des Flex-Containers dazwischen. */
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.nn > * { pointer-events: auto; }

/* ---------- Figur ---------- */
.nn-figure {
  position: relative;
  width: var(--nn-size);
  height: var(--nn-size);
  /* v1.33.179: Die Figur sitzt tiefer (siehe .nn-img transform) — der
     Ueberstand wird hier sauber abgeschnitten, damit die Fuesse/Beine leicht
     angeschnitten wirken und NICHTS in die Sprechblase oder die Trefferflaeche
     hineinragt.
     v1.33.182: Zusaetzlich haengt die GANZE Figur ueber die Ecke hinaus —
     rechts `--nn-bleed-x`, unten `--nn-bleed-y`. Negative Margins statt
     Container-Verschiebung: die Sprechblase bleibt an ihrem Platz und der
     Viewport-Rand schneidet die Figur ab (overflow des Fensters). Auf Geraeten
     mit Notch/Home-Indicator (env(safe-area-inset-*)) zieht der Ueberstand
     wieder zurueck, damit die Figur dort NICHT unter Bedienelementen liegt. */
  margin-right: calc(env(safe-area-inset-right, 0px) - var(--nn-bleed-x));
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) - var(--nn-bleed-y));
  overflow: hidden;
  transition: height 240ms ease, margin-bottom 240ms ease;
}

.nn-avatar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--nn-size);
  height: var(--nn-size);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 20px;
  transition: height 240ms ease, background-color 160ms ease;
}
.nn-avatar:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.nn-avatar:focus-visible {
  /* v1.33.182: `.nn-figure` hat `overflow: hidden` — ein AUSSEN liegender Ring
     wuerde komplett weggeschnitten. Der Fokus-Ring liegt deshalb innen und
     bleibt auch an der angeschnittenen Ecke sichtbar. */
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}

.nn-img {
  display: block;
  width: var(--nn-size);
  height: var(--nn-size);
  object-fit: contain;
  /* v1.33.179: Figur sitzt tiefer — unten werden --nn-crop px abgeschnitten.
     Die Alpha-BBox der 192-px-Vorlage endet bei y=176 (16 px transparente
     Schatten-Kante); bei 176 px Anzeige sind das 14,7 px. Deshalb bleibt
     14 px wirkungslos (nur Schatten weg) — 20 px schneiden die Fuesse sichtbar
     leicht an (mobil 16 px bei 144 px Anzeige, gleiches Verhaeltnis). */
  transform: translateY(var(--nn-crop));
  transition: transform 240ms ease;
  filter: drop-shadow(0 4px 10px rgba(60, 40, 25, 0.18));
  pointer-events: none;      /* Klick geht immer an den Button */
}

/* Aufmerksamkeits-Pille im Zustand "bereit" („Hallo! Wie kann ich helfen?"):
   statisch, ohne Animation, verschwindet beim Oeffnen/Minimieren.
   v1.33.182: Sie haengt direkt an `.nn` (frueher im Avatar-Button) — der
   Figurenrahmen hat `overflow: hidden` (Fuss-Anschnitt + Ueberstand) und hat
   die Pille vorher restlos weggeschnitten. Position deshalb relativ zur Figur
   gerechnet: links daneben, 22 % der Figurenhoehe ueber deren Unterkante.
   `width: max-content` verhindert das Zusammendruecken im schmalen Container;
   `max-width` haelt sie auf kleinen Displays im Bild. */
.nn-hint {
  position: absolute;
  right: calc(var(--nn-size) - var(--nn-bleed-x) + 8px);
  bottom: calc(var(--nn-size) * 0.22 - var(--nn-bleed-y)
               + env(safe-area-inset-bottom, 0px));
  width: max-content;
  padding: 5px 11px;
  border-radius: 14px;
  background: var(--bubble-bg, #fff8ee);
  border: 1px solid var(--bubble-border, #f0e0c8);
  color: var(--brand-dark, #a34a2b);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  max-width: calc(100vw - var(--nn-size) - (var(--nn-gap) * 2) - 10px);
  box-shadow: 0 4px 14px rgba(60, 40, 25, 0.12);
  /* Rein dekorativ (aria-hidden) — blockiert keine Klicks auf die Seite. */
  pointer-events: none;
}
.nn[data-state="open"] .nn-hint,
.nn[data-state="minimized"] .nn-hint { display: none; }

/* ---------- Zustand "minimiert" ----------
   Die Figur rutscht nach unten, nur die Muetze bleibt sichtbar. Die
   Trefferflaeche ist NICHT der sichtbare Rest, sondern ein --nn-hit hoher
   Button, der ueber den Rest hinausragt (>= 44 x 88 px). */
.nn[data-state="minimized"] .nn-figure {
  /* v1.33.182: im minimierten Zustand KEIN Ueberstand nach unten — sonst
     wuerde der Viewport die Muetze selbst abschneiden (nur 4 px waeren
     sichtbar). Die Figur sitzt dann buendig auf der Unterkante (bzw. auf dem
     Safe-Area-Rand) und zeigt genau `--nn-peek` px Muetze. */
  height: var(--nn-hit);
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.nn[data-state="minimized"] .nn-avatar { height: var(--nn-hit); border-radius: 12px 12px 0 0; }
/* Achtung (v1.33.179): Hier wird --nn-crop ABSICHTLICH nicht addiert — die
   Rechnung „Bildunterkante - (--nn-size - --nn-peek)" setzt die Bild-Oberkante
   exakt auf --nn-peek, sodass GENAU der Muetzen-Streifen sichtbar bleibt. */
.nn[data-state="minimized"] .nn-img {
  transform: translateY(calc(var(--nn-size) - var(--nn-peek)));
}

/* ---------- Sprechblase ---------- */
.nn-bubble {
  position: relative;
  width: 320px;                            /* Karte: 280–340 px Desktop */
  max-width: calc(100vw - 32px);           /* mobil: Bildschirm minus Rand */
  /* v1.33.182: Der Container steht jetzt buendig in der Ecke (die Figur haengt
     heraus) — die Blase holt sich ihren Randabstand selbst. */
  margin-right: calc(var(--nn-gap) + env(safe-area-inset-right, 0px));
  margin-bottom: 6px;
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e8dfd5);
  box-shadow: 0 10px 30px rgba(60, 40, 25, 0.16);
  color: var(--ink, #2b2320);
  animation: nn-bubble-in 220ms ease-out;
}
.nn-bubble[hidden] { display: none; }

/* Spitze zeigt zur Figur (unten rechts). */
.nn-arrow {
  position: absolute;
  right: 34px;
  bottom: -7px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: var(--surface, #fff);
  border-right: 1px solid var(--line, #e8dfd5);
  border-bottom: 1px solid var(--line, #e8dfd5);
}

@keyframes nn-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.nn-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.nn-name {
  font-weight: 700;
  color: var(--brand-dark, #a34a2b);
  font-size: 0.95rem;
}
.nn-ctx {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.76rem;
  color: var(--ink-soft, #6b5f57);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nn-min {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: -4px -4px -4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft, #6b5f57);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.nn-min:hover { background: var(--surface-hover, #faf6ef); color: var(--brand-dark, #a34a2b); }
.nn-min:focus-visible, .nn-opt:focus-visible, .nn-back:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.nn-text {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink, #2b2320);
}

.nn-opts { display: flex; flex-direction: column; gap: 6px; }
/* [hidden] muss hier explizit gewinnen — sonst hebt display:flex das
   UA-`display:none` auf und die Optionen blieben beim Tipp sichtbar. */
.nn-opts[hidden] { display: none; }

.nn-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;              /* Touch-Ziel */
  padding: 9px 12px;
  border: 1px solid var(--line, #e8dfd5);
  border-radius: 11px;
  background: var(--surface-soft, #faf8f4);
  color: var(--ink, #2b2320);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.nn-opt:hover { background: var(--brand-soft, #f7e8df); border-color: var(--brand-soft-border, #eccdb8); }
.nn-opt:first-child { background: var(--brand-soft, #f7e8df); border-color: var(--brand-soft-border, #eccdb8); color: var(--brand-dark, #a34a2b); }
.nn-opt:first-child:hover { background: color-mix(in srgb, var(--brand) 18%, var(--surface, #fff)); }
.nn-opt-ico { flex: 0 0 auto; font-size: 0.95rem; }

.nn-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  margin-top: 8px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--brand-dark, #a34a2b);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}
.nn-back[hidden] { display: none; }

/* Kurzes Hervorheben der angesprungenen Stelle (Briefing: „kann kurz und
   dezent hervorgehoben werden") — laeuft einmal, kein Dauer-Effekt. */
.nn-spot {
  animation: nn-spot-pulse 1.2s ease-out 1;
  border-radius: 10px;
}
@keyframes nn-spot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(194, 94, 58, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(194, 94, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 94, 58, 0); }
}

/* ---------- Waehrend offener Dialoge ausblenden ----------
   Filter-Panel (html.filter-open), Menue-Drawer (html.nav-open) und Kochmodus
   (body.cook-open) setzen diese Klassen selbst; weitere Overlays (Lade-Overlay,
   <dialog>, Cookie-Consent) meldet das JS per .nn--obscured. Die zuvor
   gewaehlte Einstellung bleibt dabei unberuehrt. */
html.filter-open .nn,
html.nav-open .nn,
body.cook-open .nn,
.nn--obscured { display: none; }

/* ---------- Schmale Displays ----------
   v1.33.179: mobil 144 px (Desktop 176 px) und ein etwas kleinerer Anschnitt,
   damit die Figur auf beiden Groessen gleich „beschnitten" wirkt. */
@media (max-width: 520px) {
  .nn {
    --nn-size: 144px;
    --nn-crop: 12px;
    --nn-gap: 14px;
    --nn-bleed-x: 12px;
    --nn-bleed-y: 16px;
  }
  .nn-bubble { width: calc(100vw - 32px); }
  .nn-hint { font-size: 0.78rem; padding: 4px 9px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .nn-figure, .nn-avatar, .nn-img, .nn-opt { transition: none; }
  .nn-bubble { animation: none; }
  .nn-spot { animation: none; box-shadow: 0 0 0 3px rgba(194, 94, 58, 0.5); }
}

/* ---------- v1.33.177 (Karte t_f8c09c57) ----------
   Menschlicher Ton: "Wusstest du schon ...?"-Zeile (gestrichelt, damit sie
   nicht wie eine vierte Antwort wirkt) und die stille "Später"-Zeile der
   Begruessung (kein Primaerknopf, aber volle Trefferflaeche). */
.nn-opt--tip {
  background: transparent;
  border-style: dashed;
  border-color: var(--line, #e8dfd5);
  color: var(--ink-soft, #6b5f57);
  font-weight: 500;
}
.nn-opt--tip:hover { background: var(--surface-soft, #faf8f4); color: var(--brand-dark, #a34a2b); }
.nn-opt--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft, #6b5f57);
  font-weight: 500;
}
.nn-opt--quiet:hover { background: var(--surface-hover, #faf6ef); border-color: transparent; }
/* Reihenfolge der Hervorhebung: der erste Knopf bleibt der Primaerknopf, die
   stille Zeile nie. */
.nn-opts .nn-opt--quiet:first-child { background: transparent; color: var(--ink-soft, #6b5f57); }

/* Kochmodus-Hinweis: steht AUSSERHALB von .nn (body.cook-open blendet nur .nn
   aus), liegt ueber dem Koch-Overlay (z-index 1300 > 1200) und verschwindet
   von selbst. Rein informativ, keine Bedienung, kein Klickziel. */
.nn-cookhint {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1300;
  margin: 0;
  padding: 10px 16px;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  background: var(--bubble-bg, #fff8ee);
  border: 1px solid var(--bubble-border, #f0e0c8);
  color: var(--ink, #2b2320);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 24px rgba(60, 40, 25, 0.18);
}
.nn-cookhint[hidden] { display: none !important; }

@media (max-width: 560px) {
  /* Die Ready-Pille "Hallo! Wie kann ich helfen?" ist laenger als "Hilfe?" —
     mobil kleiner, damit sie die Figur nicht ueberholt. */
  .nn-hint { font-size: 0.72rem; padding: 4px 9px; }
}