/* Chat-Assistent (assets/js/chat/chat.js). Eigene Gestaltung im Stil der Seite, nicht
   die von ElevenLabs. Farbe und Seite setzt die Verwaltung in assistent.css:
   --chat-farbe, --chat-farbe-dunkel, --chat-seite-links (0/1). */

#chat-assistent{
  --chat-farbe:var(--blau);
  --chat-farbe-dunkel:var(--blau-tief);
  /* Über der klebenden Kopfzeile (60), unter dem Menü (70) */
  position:fixed;z-index:65;bottom:20px;right:20px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
#chat-assistent.links{right:auto;left:20px;align-items:flex-start}
#chat-assistent[hidden]{display:none}

/* --- Knopf ------------------------------------------------------------ */
.chat-knopf{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:6px 18px 6px 6px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--chat-farbe);color:#fff;
  font:inherit;font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  box-shadow:0 2px 4px rgba(20,30,40,.12),0 12px 30px color-mix(in srgb,var(--chat-farbe) 40%,transparent);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.chat-knopf:hover{background:var(--chat-farbe-dunkel);transform:translateY(-2px)}
.chat-knopf:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--chat-farbe)}
.chat-knopf__bild{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
}
.chat-knopf__bild svg{width:22px;height:22px}
.chat-knopf__bild img{width:100%;height:100%;object-fit:cover;display:block}
.ist-offen .chat-knopf{background:var(--dunkel)}

/* --- Fenster ---------------------------------------------------------- */
.chat-fenster{
  width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);
  box-shadow:0 2px 4px rgba(20,30,40,.07),0 24px 60px rgba(20,30,40,.22);
  order:-1;
}
.chat-fenster[hidden]{display:none}

.chat-kopf{
  display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;
  background:linear-gradient(135deg,var(--chat-farbe),var(--chat-farbe-dunkel));color:#fff;
}
.chat-kopf__bild{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(255,255,255,.25);
}
.chat-kopf__bild img{width:100%;height:100%;object-fit:cover}
.chat-kopf__bild img[src$=".svg"]{width:72%;height:72%;object-fit:contain}
.chat-kopf__text{display:grid;gap:1px;min-width:0;margin-right:auto}
.chat-kopf__text strong{font-size:1rem;line-height:1.25}
.chat-status{font-size:.8rem;opacity:.85;display:flex;align-items:center;gap:6px}
.chat-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.chat-zu{
  width:40px;height:40px;flex:0 0 auto;border:0;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;
}
.chat-zu:hover{background:rgba(255,255,255,.22)}
.chat-zu svg{width:20px;height:20px}

.chat-verlauf{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px;display:flex;flex-direction:column;gap:10px;
  background:var(--flaeche);
}

/* Vor dem Gespräch */
.chat-start{margin:auto 0;display:grid;gap:12px;text-align:left}
.chat-start__lead{margin:0;font-size:1rem;line-height:1.5;color:var(--dunkel);font-weight:600}
.chat-start__bedingungen{margin:0;font-size:.8rem;line-height:1.5;color:var(--text-leise)}
.chat-start__bedingungen:empty{display:none}
.chat-start__link{font-size:.8rem;color:var(--text-leise)}
.chat-los{
  justify-self:start;border:0;border-radius:10px;cursor:pointer;padding:12px 18px;
  background:var(--chat-farbe);color:#fff;font:inherit;font-weight:600;font-size:.94rem;
}
.chat-los:hover{background:var(--chat-farbe-dunkel)}
.chat-los:disabled{opacity:.7;cursor:progress}
.chat-los--neu{align-self:center;margin-top:6px}

/* Nachrichten */
.chat-blase{
  max-width:85%;padding:10px 14px;border-radius:16px;
  font-size:.94rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;
}
.chat-blase--agent{align-self:flex-start;background:#fff;color:var(--text);border:1px solid var(--linie);border-bottom-left-radius:5px}
.chat-blase--ich{align-self:flex-end;background:var(--chat-farbe);color:#fff;border-bottom-right-radius:5px}
.chat-blase a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.chat-hinweis{align-self:center;max-width:90%;text-align:center;font-size:.8rem;color:var(--text-leise)}
.chat-hinweis a{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--blau-dunkel)}
.chat-hinweis svg{width:15px;height:15px}

.chat-tippt{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;background:#fff;border:1px solid var(--linie);border-radius:16px;border-bottom-left-radius:5px}
.chat-tippt[hidden]{display:none}
.chat-tippt span{width:7px;height:7px;border-radius:50%;background:var(--text-leise);opacity:.35;animation:chat-tippt 1.2s infinite ease-in-out}
.chat-tippt span:nth-child(2){animation-delay:.15s}
.chat-tippt span:nth-child(3){animation-delay:.3s}
@keyframes chat-tippt{40%{opacity:1;transform:translateY(-2px)}}

/* Eingabe */
.chat-fuss{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--linie);background:#fff}
.chat-fuss[hidden]{display:none}
.chat-eingabe{
  flex:1;resize:none;max-height:7.5em;min-height:44px;
  padding:11px 14px;border:1px solid var(--linie);border-radius:12px;
  font:inherit;font-size:.95rem;line-height:1.4;color:var(--text);background:var(--flaeche);
}
.chat-eingabe:focus{outline:none;border-color:var(--chat-farbe);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--chat-farbe) 18%,transparent)}
.chat-senden{
  width:44px;height:44px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--chat-farbe);color:#fff;
}
.chat-senden:hover{background:var(--chat-farbe-dunkel)}
.chat-senden svg{width:20px;height:20px}

@media (prefers-reduced-motion:reduce){
  .chat-knopf{transition:none}
  .chat-knopf:hover{transform:none}
  .chat-tippt span{animation:none;opacity:.6}
}

/* --- Handy: runder Knopf über der Aktionsleiste, Fenster als Blatt ----- */
@media (max-width:759px){
  #chat-assistent{bottom:calc(84px + env(safe-area-inset-bottom));right:14px}
  #chat-assistent.links{left:14px}
  .chat-knopf{padding:6px}
  .chat-knopf__text{display:none}
  .chat-knopf__bild{width:44px;height:44px}
  .ist-offen .chat-knopf{display:none}
  .chat-fenster{
    position:fixed;inset:0;width:auto;height:auto;border:0;border-radius:0;
    height:100dvh;
  }
  .chat-kopf{padding-top:calc(14px + env(safe-area-inset-top))}
  .chat-fuss{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  html.chat-offen,html.chat-offen body{overflow:hidden}
}