/* ==========================================================================
   Chat-Assistent — Widget unten rechts. Eigene Farben (unabhängig von
   body.hell), keine externen Ressourcen. Zum Abschalten: CHAT_AKTIV = False
   in build.py und python3 seiten.py.
   ========================================================================== */
.ptc{
  --c-bg:#15180F;--c-kopf:#0D0F0C;--c-karte:#232819;--c-linie:#333828;
  --c-text:#F4F5EF;--c-grau:#B9BFAE;--c-lime:#C8D86A;--c-lime-h:#D6E67A;--c-ink:#14170F;
  --c-blau:#8BA8AC;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.5;color:var(--c-text);
}
.ptc *{box-sizing:border-box}

/* --- Startknopf ---------------------------------------------------------- */
.ptc-start{
  position:fixed;right:22px;bottom:22px;z-index:140;
  display:flex;align-items:center;gap:10px;
  padding:13px 20px 13px 16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--c-lime);color:var(--c-ink);font:inherit;font-weight:800;font-size:15px;
  box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .15s,background .15s;
}
.ptc-start:hover{background:var(--c-lime-h);transform:translateY(-2px)}
.ptc-start svg{width:22px;height:22px;flex:none}
.ptc-start:focus-visible,.ptc-btn:focus-visible,.ptc-chip:focus-visible,
.ptc-eingabe textarea:focus-visible{outline:3px solid var(--c-lime);outline-offset:2px}
.ptc[data-offen="ja"] .ptc-start{display:none}

/* --- Fenster ------------------------------------------------------------- */
.ptc-fenster{
  position:fixed;right:22px;bottom:22px;z-index:160;max-width:calc(100vw - 16px);
  width:392px;height:min(640px,calc(100vh - 44px));height:min(640px,calc(100dvh - 44px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--c-bg);border:1px solid var(--c-linie);border-radius:14px;
  box-shadow:0 16px 60px rgba(0,0,0,.6);
}
.ptc[data-offen="ja"] .ptc-fenster{display:flex}

.ptc-kopf{
  display:flex;align-items:center;gap:10px;padding:13px 12px 13px 16px;
  background:var(--c-kopf);border-bottom:1px solid var(--c-linie);flex:none;
}
.ptc-titel{flex:1;min-width:0}
.ptc-titel b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.ptc-titel > span{display:block;font-size:12.5px;color:var(--c-grau);line-height:1.3}
.ptc-ki{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;vertical-align:1px;
  background:var(--c-lime);color:var(--c-ink);font-size:11px;font-weight:800;letter-spacing:.04em;
}
.ptc-btn{
  flex:none;width:38px;height:38px;border:0;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;background:transparent;color:var(--c-grau);
}
.ptc-btn:hover{background:var(--c-karte);color:var(--c-text)}
.ptc-btn svg{width:20px;height:20px}

/* --- Nachrichten --------------------------------------------------------- */
.ptc-verlauf{
  flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;
  display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;
}
.ptc-msg{
  max-width:88%;padding:10px 14px;border-radius:16px;word-wrap:break-word;overflow-wrap:anywhere;
}
.ptc-msg p{margin:0 0 8px;max-width:none}
.ptc-msg p:last-child,.ptc-msg ul:last-child{margin-bottom:0}
.ptc-msg ul{margin:0 0 8px;padding-left:20px}
.ptc-msg li{margin:2px 0}
.ptc-msg strong{color:inherit;font-weight:800}
.ptc-bot{align-self:flex-start;background:var(--c-karte);border-bottom-left-radius:5px}
.ptc-bot a{color:var(--c-lime);text-decoration:underline;text-underline-offset:2px}
.ptc-user{align-self:flex-end;background:var(--c-lime);color:var(--c-ink);border-bottom-right-radius:5px;
  white-space:pre-wrap}
.ptc-fehler{border:1px solid #6b4a3a}

/* Datenschutzkarte vor dem ersten Senden */
.ptc-hinweis{
  align-self:stretch;padding:13px 14px;border:1px solid var(--c-linie);border-radius:12px;
  background:var(--c-kopf);font-size:13.5px;color:var(--c-grau);
}
.ptc-hinweis a{color:var(--c-lime);text-decoration:underline}
.ptc-hinweis .ptc-ok{
  display:block;width:100%;margin-top:11px;padding:11px 14px;border:0;border-radius:8px;cursor:pointer;
  background:var(--c-lime);color:var(--c-ink);font:inherit;font-weight:800;
}
.ptc-hinweis .ptc-ok:hover{background:var(--c-lime-h)}

/* Schnellfragen */
.ptc-chips{display:flex;flex-wrap:wrap;gap:8px;align-self:stretch;margin-top:2px}
.ptc-chip{
  padding:8px 13px;border:1px solid var(--c-linie);border-radius:999px;cursor:pointer;
  background:transparent;color:var(--c-text);font:inherit;font-size:14px;text-align:left;
}
.ptc-chip:hover{border-color:var(--c-lime);color:var(--c-lime)}

/* Kontaktknöpfe in Fehlermeldungen */
.ptc-wege{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ptc-wege a{
  padding:8px 14px;border-radius:8px;font-weight:800;font-size:14px;text-decoration:none!important;
  background:var(--c-blau);color:#0E1A1B!important;
}
.ptc-wege a+a{background:transparent;color:var(--c-text)!important;border:1px solid var(--c-linie)}

/* Schreibt-Anzeige */
.ptc-punkte{display:inline-flex;gap:5px;padding:4px 2px}
.ptc-punkte i{width:7px;height:7px;border-radius:50%;background:var(--c-grau);opacity:.5;
  animation:ptc-huepf 1.1s infinite ease-in-out}
.ptc-punkte i:nth-child(2){animation-delay:.15s}
.ptc-punkte i:nth-child(3){animation-delay:.3s}
@keyframes ptc-huepf{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

/* --- Eingabe ------------------------------------------------------------- */
.ptc-eingabe{
  flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px 6px;
  border-top:1px solid var(--c-linie);background:var(--c-bg);
}
.ptc-eingabe textarea{
  flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;padding:11px 13px;
  border:1px solid var(--c-linie);border-radius:10px;background:var(--c-kopf);color:var(--c-text);
  font:inherit;font-size:16px;line-height:1.35; /* 16px verhindert Zoom auf iOS */
}
.ptc-eingabe textarea::placeholder{color:#8A9180}
.ptc-eingabe textarea:disabled{opacity:.5}
.ptc-senden{
  flex:none;width:44px;height:44px;border:0;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;background:var(--c-lime);color:var(--c-ink);
}
.ptc-senden:hover{background:var(--c-lime-h)}
.ptc-senden:disabled{opacity:.4;cursor:default}
.ptc-senden svg{width:20px;height:20px}
.ptc-fuss{
  flex:none;padding:0 14px 10px;font-size:12px;color:#8A9180;line-height:1.4;
  background:var(--c-bg);
}
.ptc-fuss a{color:var(--c-grau);text-decoration:underline}
.ptc[data-gesperrt="ja"] .ptc-eingabe,.ptc[data-gesperrt="ja"] .ptc-chips{display:none}

/* --- Handy: Vollbild, über der festen Leiste ---------------------------- */
@media(max-width:820px){
  .ptc-start{right:14px;bottom:calc(84px + env(safe-area-inset-bottom));padding:14px}
  .ptc-start span{display:none}
}
@media(max-width:600px){
  .ptc-fenster{
    top:0;left:0;right:0;bottom:0;width:auto;max-width:none;height:auto;
    border:0;border-radius:0;touch-action:pan-y;
  }
  /* Seite dahinter festhalten, solange der Chat offen ist */
  html.ptc-offen,html.ptc-offen body{overflow:hidden;overscroll-behavior:none}
  .ptc-kopf{padding-top:calc(13px + env(safe-area-inset-top))}
  .ptc-fuss{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){
  .ptc-verlauf{scroll-behavior:auto}
  .ptc-punkte i{animation:none;opacity:.7}
  .ptc-start{transition:none}
}
@media print{.ptc{display:none}}