/* ---------------------------------------------------------------------
     Assistent. Bewusst ohne Sprachmodell und ohne Netzverbindung: Der Chat
     laeuft vollstaendig im Browser, es geht kein Wort an einen Server.
     Ein Bot, der zu Nahrungsergaenzung frei formuliert, erzeugt frueher oder
     spaeter eine Heilaussage - und die haftet an der Person, die die Seite
     betreibt, nicht am Modell.
     Feste Antworten koennen das nicht.
     --------------------------------------------------------------------- */
  /* Der Rufer: keine Blase mit Fragezeichen, sondern die Figur der Seite,
     die etwas sagt. Wer sie sieht, weiss sofort, mit wem er es zu tun
     bekommt. Welche Figur das ist, steht in person.py - diese Datei teilen
     sich beide Auftritte und darf deshalb keinen Namen nennen. */
  /* Abstand zum Rand: Der Rufer stand mit 18px so dicht an der Ecke, dass er
     wie angeklebt wirkte. Jetzt sitzt er sichtbar im Bild - und die Figur
     schaut in die Seite hinein statt zum Rand (siehe RUHE in logik.js). */
  .rufer{position:fixed;right:48px;bottom:26px;z-index:71;border:0;background:none;padding:0;
    cursor:pointer;display:flex;flex-direction:column;align-items:flex-end;gap:16px;
    transition:opacity .25s ease,transform .25s ease}
  /* animation:none ist hier noetig, nicht Zierde: Die Auftritts-Animation
     laeuft mit fill-mode "both" und haelt danach opacity:1 fest. Ohne das
     Abschalten bliebe der Rufer beim Oeffnen des Assistenten sichtbar und
     stuende doppelt auf dem Bildschirm. */
  .rufer[data-weg="ja"]{opacity:0;transform:translateY(10px);pointer-events:none;animation:none}
  .rufer-figur{height:168px;width:auto;display:block;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.28));
    animation:wippen 4.5s ease-in-out infinite;transition:transform .25s ease}
  .rufer-blase{position:relative;max-width:196px;background:var(--card);color:var(--ink);
    border:1px solid var(--line);border-radius:16px;padding:9px 13px;
    font-size:12.5px;line-height:1.42;letter-spacing:-.01em;text-align:left;
    box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
  /* Der Zipfel der Sprechblase zeigt auf die Mitte der Figur. Gemessen, nicht
     geschaetzt: Die Figur ist rund 67px breit und rechtsbuendig, ihre Mitte
     liegt damit 34px links von der rechten Blasenkante - abzueglich der
     halben Zipfelbreite ergibt das 28px. Vorher stand hier 58px, der Zipfel
     zeigte 30px daneben ins Leere. */
  .rufer-blase::after{content:"";position:absolute;right:28px;bottom:-7px;width:12px;height:12px;
    background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transform:rotate(45deg)}
  .rufer-ki{order:3;font-size:9.5px;letter-spacing:.03em;color:var(--muted);background:var(--card);
    border:1px solid var(--line);border-radius:var(--pill,980px);padding:2px 8px;margin-top:-2px}
  @media(max-width:600px){.rufer-ki{font-size:9px;padding:2px 6px}}
  @keyframes wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  /* Auftritt: einmal beim Laden, damit man ihn bemerkt, ohne dass etwas blinkt. */
  @keyframes auftritt{
    0%{opacity:0;transform:translateY(26px) scale(.9)}
    60%{opacity:1;transform:translateY(-6px) scale(1.02)}
    100%{opacity:1;transform:none}
  }
  @keyframes blaseAuf{0%{opacity:0;transform:translateY(6px) scale(.94)}100%{opacity:1;transform:none}}
  .rufer{animation:auftritt .7s cubic-bezier(.2,.9,.3,1.2) both}
  .rufer-blase{animation:blaseAuf .45s ease both;animation-delay:.55s;transform-origin:80% 100%}
  /* Beim Zeigen wechselt er die Pose - das ist die billigste und
     glaubwuerdigste Art von Leben: eine Reaktion, keine Dauerschleife. */
  .rufer:hover .rufer-figur,.rufer:focus-visible .rufer-figur{transform:translateY(-7px) scale(1.05)}
  @media (prefers-reduced-motion: reduce){
    .rufer-figur{animation:none}
    .rufer,.rufer-blase{animation:none}
  }
  @media(max-width:600px){
    /* Auf dem Telefon ist kein Platz zum Einruecken - dort bleibt es eng. */
    .rufer{right:16px;bottom:12px}
    .rufer-figur{height:124px}
    .rufer-blase{max-width:150px;font-size:11.5px;padding:7px 11px}
  }

  .chat{position:fixed;right:20px;bottom:20px;z-index:70;padding:0;width:min(23rem,calc(100vw - 2.5rem));
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--card);border:1px solid var(--line);border-radius:20px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.35);
    opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:all .28s ease}
  .chat[data-offen="ja"]{opacity:1;transform:none;pointer-events:auto}
  @media(max-width:600px){.chat{right:12px;left:12px;width:auto;bottom:14px}}

  .chat-kopf{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .chat-kopf .av{width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:0 0 auto}
  .chat-kopf b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
  .chat-kopf span{display:block;font-size:11px;color:var(--muted)}
  .chat-zu{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:4px 6px;border-radius:8px}
  .chat-zu:hover{background:var(--bg);color:var(--ink)}

  .chat-kopf,.chat-chips,.chat-fuss{flex:0 0 auto}
  .chat-lauf{flex:1 1 auto;min-height:0;max-height:min(46vh,340px);overflow-y:auto;
    padding:16px;display:flex;flex-direction:column;gap:10px}
  .blase{max-width:85%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.55}
  .blase.bot{align-self:flex-start;background:var(--bg);color:var(--ink);border-bottom-left-radius:6px}
  .blase.ich{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
  .blase a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .blase.bot a{color:var(--link)}
  .tippt{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;background:var(--bg);border-radius:16px;border-bottom-left-radius:6px}
  .tippt i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;animation:hupf 1.1s infinite}
  .tippt i:nth-child(2){animation-delay:.15s}.tippt i:nth-child(3){animation-delay:.3s}
  @keyframes hupf{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

  .chat-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
  .chip{border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
    font:inherit;font-size:12px;padding:6px 12px;border-radius:var(--pill,980px);transition:background .15s ease}
  .chip:hover{background:var(--bg)}

  .chat-fuss{border-top:1px solid var(--line);padding:10px 12px 8px}
  .chat-zeile{display:flex;gap:8px}
  .chat-zeile input{flex:1;height:38px;border:1px solid var(--line);border-radius:var(--pill,980px);
    background:var(--card);color:var(--ink);font:inherit;font-size:13px;padding:0 14px;outline:none}
  .chat-zeile input:focus{border-color:var(--blue)}
  .chat-zeile button{width:38px;height:38px;flex:0 0 auto;border:0;border-radius:50%;background:var(--ink);color:var(--card);cursor:pointer;font-size:15px}
  .chat-belege{margin:6px 2px 0}
  .chat-belege summary{font-size:10.5px;color:var(--muted);cursor:pointer;list-style:none;text-align:center}
  .chat-belege summary::-webkit-details-marker{display:none}
  .chat-belege summary::after{content:" ▾"}
  .chat-belege[open] summary::after{content:" ▴"}
  .chat-belege ol{margin:8px 0 0;padding-left:20px;font-size:10.5px;line-height:1.5;color:var(--muted);
    max-height:150px;overflow-y:auto}
  .chat-belege li{margin-bottom:5px}
  .chat-hinweis{margin:7px 2px 0;font-size:10.5px;line-height:1.45;color:var(--muted);text-align:center}


  /* Figur im Assistenten. Die Pose wechselt mit dem Gespraechszustand:
     begruessen, zuhoeren, antworten, weiterreichen. */
  .chat-buehne{position:relative;height:126px;flex:0 0 auto;overflow:hidden;
    background:linear-gradient(170deg,#f6ecec 0%,#efdfe0 60%,#e6d1d4 100%);border-bottom:1px solid var(--line)}
  :root[data-theme="dark"] .chat-buehne{background:linear-gradient(170deg,#1a1c20,#26292f 60%,#2f343b)}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chat-buehne{background:linear-gradient(170deg,#1a1c20,#26292f 60%,#2f343b)}}
  .chat-buehne img{position:absolute;left:14px;bottom:4px;height:114px;width:auto;
    opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s ease,transform .3s ease;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
  .chat-buehne img[data-an="ja"]{opacity:1;transform:none;animation:atmen 5s ease-in-out infinite}
  @keyframes atmen{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.015)}}
  @media (prefers-reduced-motion: reduce){.chat-buehne img[data-an="ja"]{animation:none}}
  .chat-buehne .sprech{position:absolute;left:132px;right:44px;top:22px;
    background:var(--card);color:var(--ink);border-radius:14px;border-bottom-left-radius:5px;
    padding:9px 12px;font-size:12px;line-height:1.45;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
  .chat-buehne .zu{position:absolute;top:8px;right:8px;border:0;background:rgba(255,255,255,.75);
    color:var(--ink);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
  .chat-buehne .zu:hover{background:#fff}

  /* Belege innerhalb einer Produktantwort. Sie stehen aufklappbar statt
     mitten im Satz: Art. 10 Abs. 3 VO (EG) 1924/2006 verlangt, dass die
     zugelassene Angabe bei der Aussage steht - nicht, dass sie den Text
     unlesbar macht. */
  .antwort-belege{margin:10px 0 0}
  .antwort-belege summary{font-size:11px;color:var(--muted);cursor:pointer;list-style:none}
  .antwort-belege summary::-webkit-details-marker{display:none}
  .antwort-belege summary::after{content:" ▾"}
  .antwort-belege[open] summary::after{content:" ▴"}
  .antwort-belege ul{margin:7px 0 0;padding-left:16px;font-size:11px;line-height:1.5;color:var(--muted)}
  .antwort-belege li{margin-bottom:4px}

  /* -------------------------------------------------------------------
     Schlichter Rufer: ein Knopf mit Sprechblase statt einer Figur.
     Gebraucht auf Auftritten, fuer die noch keine eigenen Figuren
     vorliegen - ein fremdes Gesicht auf der eigenen Seite waere falsch.
     ------------------------------------------------------------------- */
  .rufer-schlicht{gap:12px}
  .rufer-zeichen{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
    background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);
    transition:transform .25s ease}
  .rufer-schlicht:hover .rufer-zeichen,
  .rufer-schlicht:focus-visible .rufer-zeichen{transform:translateY(-4px) scale(1.06)}
  /* Ohne Figur gibt es nichts zu wippen. */
  .rufer-schlicht .rufer-zeichen{animation:wippen 4.5s ease-in-out infinite}
  @media (prefers-reduced-motion: reduce){.rufer-schlicht .rufer-zeichen{animation:none}}
  /* Der Zipfel zeigt auf die Mitte des Knopfes: 58px breit, rechtsbuendig,
     Mitte also 29px von rechts, minus halbe Zipfelbreite. */
  .rufer-schlicht .rufer-blase::after{right:23px}
  @media(max-width:600px){.rufer-zeichen{width:50px;height:50px}
    .rufer-schlicht .rufer-blase::after{right:19px}}

  /* Die Buehne im Kasten braucht ohne Figur weniger Hoehe, und die
     Sprechblase darf die ganze Breite nutzen. */
  .chat-buehne.ohne-figur{height:auto;padding:16px 16px 18px}
  .chat-buehne.ohne-figur .sprech{position:static;left:auto;right:auto;top:auto;
    margin:0 34px 0 0;box-shadow:none;background:transparent;padding:0;
    font-size:12.5px;color:var(--ink)}