/* Leni — Chat der Bildungsakademie Ems. Aussehen in der Sprache der Seite:
   gefaste Platte (--chamfer-s aus dem Theme), Quantico versal, Figtree als Text,
   Cyan auf Anthrazit. Unten rechts; unten links bleibt frei.
   Die Klassen sind der Vertrag mit leni.js — nicht umbenennen. */
:root{
  --leni-akzent:#15BCDF;
  --leni-akzent-h:#3fd0ef;
  --leni-tief:#0a6273;
  --leni-tinte:#2b3033;
  --leni-dunkel:#1a1c1e;
  --leni-grund:#ffffff;
  --leni-fase:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  --leni-display:var(--display,"Quantico","Arial Narrow",Arial,sans-serif);
  --leni-text:var(--text,"Figtree",system-ui,sans-serif);
  --leni-dauer:.28s;
  --leni-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Knopf ----------
   Teilt sich die Ecke mit dem Theme: „Nach oben" (.hoch, 52px, erscheint als .hoch.da nach
   dem Scrollen) und auf dem Handy der Anruf-Leiste (.ruf, 69px). Leni steht auf Pfeilhöhe und
   rückt per :has() um die Pfeilbreite nach links, sobald der Pfeil da ist — transform, kein Layout. */
.leni-knopf{
  --leni-x:0px; --leni-y:0px;
  position:fixed; right:clamp(16px,3vw,32px); bottom:26px; z-index:9998;
  transform:translate(var(--leni-x), var(--leni-y));
  display:flex; align-items:center; gap:.8rem;
  padding:6px 1.15rem 6px 6px; border:0; background:none; cursor:pointer;
  color:#fff; text-align:left; font-family:var(--leni-text);
  filter:drop-shadow(0 14px 22px rgba(26,28,30,.32)) drop-shadow(0 2px 4px rgba(26,28,30,.18));
  transition:transform .25s var(--leni-ease), filter .25s var(--leni-ease),
             opacity var(--leni-dauer) var(--leni-ease), display var(--leni-dauer) allow-discrete;
}
.leni-knopf::before{ /* die gefaste Platte — clip-path würde den Schatten mitschneiden, darum ein Pseudo-Element */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--leni-tinte); clip-path:var(--leni-fase);
  transition:background .25s;
}
.leni-knopf:hover{--leni-y:-2px; filter:drop-shadow(0 18px 26px rgba(26,28,30,.36)) drop-shadow(0 2px 4px rgba(26,28,30,.18))}
.leni-knopf:hover::before{background:var(--leni-dunkel)}
.leni-knopf:hover .leni-gesicht{box-shadow:0 0 0 2px var(--leni-akzent-h), 0 0 0 5px rgba(21,188,223,.25)}
.leni-knopf:focus-visible{outline:3px solid var(--leni-akzent); outline-offset:4px}
.leni-knopf[hidden]{display:none}
/* Am Fuss tritt er ab — nicht weg-schalten (display:none), sondern ausblenden,
   damit die Bewegung ruhig bleibt und der Platz nicht springt. */
.leni-knopf.leni-weg{opacity:0; pointer-events:none; transform:translate(var(--leni-x), 10px)}
@starting-style{ .leni-knopf:not([hidden]){opacity:0; transform:translate(var(--leni-x), 8px)} }
body:has(.hoch.da) .leni-knopf{--leni-x:-66px}

.leni-knopf picture, .leni-kopf picture{display:contents}
.leni-gesicht{
  width:52px; height:52px; border-radius:50%; flex:none; display:block; object-fit:cover;
  box-shadow:0 0 0 2px var(--leni-akzent); background:#6b6f72;
  transition:box-shadow .25s;
}
.leni-monogramm{ /* ohne Portraet: der Anfangsbuchstabe im Akzentton */
  display:grid; place-items:center; background:var(--leni-akzent); color:var(--leni-dunkel);
  font-family:var(--leni-display); font-weight:700; font-size:1.5rem; line-height:1;
  box-shadow:0 0 0 2px var(--leni-akzent);
}
.leni-kopf .leni-monogramm{font-size:1.15rem}
.leni-knopf .leni-text{display:grid; line-height:1.2; gap:2px}
.leni-knopf b{
  font-family:var(--leni-display); font-weight:700; font-size:.95rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--leni-akzent);
}
.leni-knopf .leni-text span{font-size:.8rem; font-weight:500; color:#dfe2e4}
.leni-pfeil{width:16px; height:16px; flex:none; color:var(--leni-akzent); margin-left:.1rem}
.leni-ki{ /* kleine KI-Marke am Ring — nur wenn die Zeilen eingeklappt sind */
  display:none; position:absolute; right:-2px; bottom:-2px;
  font-family:var(--leni-display); font-weight:700; font-size:10px; letter-spacing:.06em;
  line-height:1; padding:3px 4px 2px; background:var(--leni-akzent); color:var(--leni-dunkel);
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
}

/* ---------- Fenster ---------- */
.leni-fenster{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:9999;
  width:min(23rem, calc(100vw - 2.5rem)); max-height:min(36rem, calc(100vh - 2.5rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--leni-grund); color:var(--leni-tinte); font-family:var(--leni-text);
  border-radius:3px; box-shadow:0 24px 54px rgba(26,28,30,.32), 0 2px 6px rgba(26,28,30,.14);
  transform-origin:100% 100%;
  transition:opacity var(--leni-dauer) var(--leni-ease), transform var(--leni-dauer) var(--leni-ease),
             display var(--leni-dauer) allow-discrete;
}
.leni-fenster[hidden]{display:none; opacity:0; transform:translateY(14px) scale(.96)}
@starting-style{ .leni-fenster:not([hidden]){opacity:0; transform:translateY(14px) scale(.96)} }

.leni-kopf{display:flex; align-items:center; gap:.75rem; padding:.75rem .85rem; background:var(--leni-tinte); color:#fff; position:relative}
.leni-kopf::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--leni-akzent)}
.leni-kopf .leni-gesicht{width:40px; height:40px}
.leni-kopf b{font-family:var(--leni-display); font-weight:700; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; display:block; line-height:1.15; color:#fff}
.leni-kopf small{font-size:.74rem; color:#dfe2e4; display:block}
.leni-zu{margin-left:auto; background:none; border:0; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; padding:.15rem .4rem; border-radius:2px}
.leni-zu:hover{color:var(--leni-akzent)}
.leni-zu:focus-visible{outline:2px solid var(--leni-akzent); outline-offset:2px}

.leni-lauf{flex:1; overflow-y:auto; padding:1rem .85rem; display:flex; flex-direction:column; gap:.6rem; background:#f7f6f8}
.leni-blase{max-width:86%; padding:.6rem .8rem; font-size:.93rem; line-height:1.5; white-space:pre-wrap}
.leni-blase.von-leni{background:#fff; border:1px solid rgba(43,48,51,.14); border-radius:2px 12px 12px 12px; align-self:flex-start}
.leni-blase.von-gast{background:var(--leni-tinte); color:#fff; border-radius:12px 2px 12px 12px; align-self:flex-end}

.leni-tippt{display:inline-flex; gap:4px; align-self:flex-start; padding:.7rem .8rem}
.leni-tippt i{width:6px; height:6px; border-radius:50%; background:var(--leni-tief); animation:leni-tipp 1.1s infinite}
.leni-tippt i:nth-child(2){animation-delay:.15s}
.leni-tippt i:nth-child(3){animation-delay:.3s}
@keyframes leni-tipp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.leni-fuss{display:flex; gap:.5rem; padding:.75rem .85rem .5rem; border-top:1px solid rgba(43,48,51,.14); background:#fff}
.leni-fuss input{flex:1; min-width:0; padding:.6rem .75rem; border:1px solid #c9cbcc; border-radius:2px; font:inherit; font-size:.93rem; color:var(--leni-tinte); background:#fff}
.leni-fuss input:focus-visible{outline:2px solid var(--leni-akzent); outline-offset:1px; border-color:var(--leni-akzent)}
.leni-fuss button{
  border:0; padding:.6rem 1rem; background:var(--leni-akzent); color:var(--leni-dunkel); cursor:pointer;
  font-family:var(--leni-display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:background .2s;
}
.leni-fuss button:hover{background:var(--leni-akzent-h)}
.leni-fuss button:disabled{opacity:.5; cursor:default}
.leni-fuss button:focus-visible{outline:3px solid var(--leni-tinte); outline-offset:2px}
.leni-recht{padding:0 .85rem .7rem; font-size:.72rem; line-height:1.4; color:#5a5f62; background:#fff}

/* ---------- Handy: nur der Kreis, Daumenbereich bleibt frei ---------- */
@media (max-width:640px){
  .leni-knopf{right:16px; bottom:84px; padding:0; gap:0; filter:drop-shadow(0 8px 16px rgba(26,28,30,.32))}
  body:has(.hoch.da) .leni-knopf{--leni-x:-62px}
  .leni-knopf::before{display:none}
  .leni-knopf .leni-text, .leni-pfeil{display:none}
  .leni-gesicht{width:56px; height:56px; box-shadow:0 0 0 3px var(--leni-akzent)}
  .leni-ki{display:block}
  .leni-fenster{right:.6rem; left:.6rem; bottom:.6rem; width:auto; max-height:calc(100vh - 1.2rem); max-height:calc(100dvh - 1.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .leni-knopf, .leni-knopf::before, .leni-fenster, .leni-gesicht, .leni-fuss button{transition:none}
  .leni-knopf:hover{--leni-y:0px}
  .leni-tippt i{animation:none; opacity:.6}
}