/* JP-Assistent (dist/assistent.js): schwarzer Hilfe-Chat in einer Bildschirmecke – Portal und JP Studio.
   Ecke per Ziehen (Klassen jpa-c-br/bl/tr/tl); Abstände über Variablen, damit Handy-Leisten, Nachrichten und App sie anpassen. */
.jpa{--jpa-side:20px;--jpa-bottom:20px;--jpa-top:84px;position:fixed;right:var(--jpa-side);bottom:var(--jpa-bottom);z-index:2147482000;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit;pointer-events:none}
.jpa[hidden]{display:none}
.jpa>*{pointer-events:auto}
.jpa-launch{width:48px;height:48px;border-radius:50%;border:0;padding:0;margin:0;display:grid;place-items:center;background:#000;color:#fff;cursor:pointer;
  box-shadow:0 10px 28px #0000004d,0 2px 6px #00000033;transition:transform .2s ease,box-shadow .2s ease}
.jpa-launch:hover{transform:scale(1.06);box-shadow:0 14px 34px #00000059}
/* Dezent, solange der Chat zu ist; voll sichtbar beim Drüberfahren, Antippen, Ziehen und offen */
.jpa:not(.is-open):not(.jpa-drag) .jpa-launch{opacity:.78}
.jpa:not(.is-open) .jpa-launch:hover,.jpa:not(.is-open) .jpa-launch:focus-visible,.jpa:not(.is-open) .jpa-launch:active{opacity:1}
.jpa-launch{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s}
.jpa.jpa-drag .jpa-launch{transform:scale(1.1);box-shadow:0 18px 40px #00000066;cursor:grabbing}
.jpa.jpa-drag .jpa-teaser{display:none}
/* Ecken: unten rechts (Standard), unten links, oben rechts, oben links – oben öffnet das Fenster nach unten */
.jpa.jpa-c-bl,.jpa.jpa-c-tl{right:auto;left:var(--jpa-side);align-items:flex-start}
.jpa.jpa-c-tr,.jpa.jpa-c-tl{--jpa-edge:var(--jpa-top);bottom:auto;top:var(--jpa-top);flex-direction:column-reverse}
.jpa.jpa-c-tr .jpa-panel,.jpa.jpa-c-tl .jpa-panel{transform-origin:top right}
.jpa.jpa-c-bl .jpa-panel{transform-origin:bottom left}.jpa.jpa-c-tl .jpa-panel{transform-origin:top left}
.jpa.jpa-c-bl .jpa-teaser,.jpa.jpa-c-tl .jpa-teaser{align-items:flex-start}
.jpa.jpa-c-bl .jpa-teaser-x,.jpa.jpa-c-tl .jpa-teaser-x{right:auto;left:-8px}
.jpa.jpa-c-tr .jpa-teaser,.jpa.jpa-c-tl .jpa-teaser{padding-top:0;padding-bottom:14px}
.jpa-launch:focus-visible{outline:3px solid #d4a556;outline-offset:3px}
.jpa-launch svg{transition:opacity .2s,transform .2s}
.jpa-x{position:absolute;font-size:30px;line-height:1;opacity:0;transform:rotate(-90deg);transition:opacity .2s,transform .2s}
.jpa.is-open .jpa-launch svg{opacity:0;transform:rotate(90deg)}
.jpa.is-open .jpa-x{opacity:1;transform:none}
/* Hinweis-Nachrichten */
.jpa-teaser{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-top:14px;pointer-events:none}
.jpa-teaser>*{pointer-events:auto}   /* nur die Nachrichten und das × fangen Klicks ab, nicht die Lücken dazwischen */
.jpa-teaser[hidden]{display:none}
.jpa-bubble{border:0;margin:0;background:#000;color:#fff;border-radius:18px;padding:16px 22px;font-size:16px;font-weight:500;cursor:pointer;width:auto;min-height:0;
  box-shadow:0 8px 24px #0000002e;animation:jpa-pop .45s cubic-bezier(.2,1.3,.4,1) both}
.jpa-bubble+.jpa-bubble{animation-delay:.5s}
.jpa-bubble:hover{background:#1a1a1a}
.jpa-teaser-x{position:absolute;top:0;right:-8px;width:30px;height:30px;min-height:0;padding:0;margin:0;border-radius:50%;border:2px solid #fff;background:#2b2b2b;color:#fff;font-size:18px;line-height:1;
  display:grid;place-items:center;cursor:pointer;z-index:1}   /* immer sichtbar – früher am Desktop erst beim Darüberfahren */
@keyframes jpa-pop{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
/* Chatfenster */
.jpa-panel{width:min(390px,calc(100vw - 40px));height:min(620px,calc(100dvh - var(--jpa-edge,var(--jpa-bottom)) - 76px));background:#000;color:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 60px #00000066;animation:jpa-open .28s cubic-bezier(.2,.9,.3,1) both;transform-origin:bottom right}
.jpa-panel[hidden]{display:none}
@keyframes jpa-open{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.jpa-panel header{display:flex;align-items:center;gap:12px;padding:16px 14px 14px 18px;background:linear-gradient(180deg,#1b1b1b,#000);border-bottom:1px solid #ffffff14}
.jpa-panel header>div{flex:1;display:grid;min-width:0}
.jpa-panel header strong{font-size:16px}.jpa-panel header small{color:#9a9a9a;font-size:12px}
.jpa-avatar{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#2a4a8a,#0b1424);display:grid;place-items:center;flex:none;border:1px solid #ffffff22}
.jpa-avatar img{width:24px;height:auto}
.jpa-icon{width:34px;height:34px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:#cfcfcf;font-size:20px;cursor:pointer;flex:none}
.jpa-icon:hover{background:#ffffff14;color:#fff}
.jpa-log{flex:1;overflow:auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.jpa-msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.jpa-msg p{margin:0 0 6px}.jpa-msg p:last-child{margin:0}
.jpa-msg ul{margin:4px 0 6px;padding-left:18px}.jpa-msg li{margin:2px 0}
.jpa-msg.bot{align-self:flex-start;background:#1c1c1e;border-bottom-left-radius:6px}
.jpa-msg.me{align-self:flex-end;background:#fff;color:#000;border-bottom-right-radius:6px}
.jpa-msg.err{background:#3a1d1a;color:#ffd7cf}
.jpa-typing{display:flex;gap:5px;padding:14px 16px}
.jpa-typing i{width:7px;height:7px;border-radius:50%;background:#8a8a8a;animation:jpa-dot 1s infinite ease-in-out}
.jpa-typing i:nth-child(2){animation-delay:.15s}.jpa-typing i:nth-child(3){animation-delay:.3s}
@keyframes jpa-dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}
.jpa-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px}
.jpa-chips:empty{display:none}
.jpa-chips button{border:1px solid #3a3a3a;background:#111;color:#e8e8e8;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;width:auto;margin:0;min-height:0}
.jpa-chips button:hover{border-color:#d4a556;color:#fff}
.jpa-form{display:flex;align-items:flex-end;gap:8px;margin:4px 12px 8px;padding:6px 6px 6px 16px;border:1px solid #3a3a3a;border-radius:24px;background:#0d0d0d}
.jpa-form:focus-within{border-color:#8a8a8a}
.jpa-form textarea{flex:1;resize:none;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:14.5px;line-height:1.4;padding:8px 0;margin:0;min-height:0;max-height:120px;box-shadow:none}
.jpa-form textarea::placeholder{color:#7a7a7a}
.jpa-send{width:36px;height:36px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:#fff;color:#000;font-size:18px;font-weight:700;cursor:pointer;flex:none}
.jpa-send:hover{background:#d4a556}
.jpa-panel footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:0 16px 12px;font-size:11.5px;color:#8a8a8a}
.jpa-panel footer button{border:0;background:none;color:#d4a556;font-size:12px;padding:0;margin:0;cursor:pointer;width:auto;min-height:0;text-decoration:underline;text-underline-offset:2px}
/* Portal am Handy: über der unteren Leiste; als großes Fenster */
@media(max-width:900px){
  .jpa{--jpa-side:14px;--jpa-top:calc(76px + env(safe-area-inset-top,0px))}
  .jpa:not(.jpa-studio){--jpa-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* Nachrichten: der Knopf lag auf dem Senden-Pfeil der Eingabezeile – darum darüber */
  body:has(.messenger) .jpa:not(.jpa-studio):not(.is-open){--jpa-bottom:calc(156px + env(safe-area-inset-bottom,0px))}
  /* Studio-Startseite am Handy: über deren untere Leiste */
  body:has(.hm-bottomnav) .jpa{--jpa-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .jpa-launch{width:48px;height:48px}
}
@media(max-width:560px){
  .jpa.is-open[class]{left:0;right:0;top:0;bottom:0;padding:0;align-items:stretch;flex-direction:column}
  .jpa.is-open .jpa-panel{width:100%;height:100%;border-radius:0}
  .jpa.is-open .jpa-launch{position:fixed;right:14px;top:12px;width:40px;height:40px;opacity:0;pointer-events:none}
  .jpa-bubble{font-size:15px;padding:13px 18px}
}
/* Handy und Tablet: Unter 16 px Schrift zoomt das iPhone beim Antippen des Feldes von selbst hinein – das Fenster ragt dann seitlich hinaus. */
@media(hover:none),(max-width:900px){.jpa-form textarea{font-size:16px}}
/* Videoeditor: Zeitleiste unten – Knopf oben rechts, unter der Leiste über dem Video (Projekt · Prüfen · Kundenvorlage).
   Auf Höhe der Leiste (früher top:70px) lag er auf „Kundenvorlage“ bzw. „Duplizieren“/„Löschen“. */
.jpa.jpa-video{bottom:auto;top:124px;right:20px;left:auto}
.jpa.jpa-video .jpa-launch{width:46px;height:46px;order:-1}
.jpa.jpa-video .jpa-teaser{order:0}

/* Im Design-Editor bleibt die untere Zoom-/Seitenleiste frei. Die vier verschiebbaren Ecken bleiben erhalten.
   Die Leiste wird bei schmaler Arbeitsfläche zweizeilig (portal-studio.css) – assistent.js misst ihre Höhe (--jpa-foot),
   sonst lag der Knopf halb auf „Notizen“. */
body:has(.ed #docTitle) .jpa{--jpa-bottom:calc(var(--jpa-foot,50px) + 26px);--jpa-top:112px}
.wb-body .jpa{--jpa-top:112px}
.jpa-launch svg{width:23px;height:23px}

.jpa-video{--jpa-edge:124px}