/* Hofplatz-Wissensbibliothek 1.7.11 – HP Chatbot UI Redesign.
   Reine Darstellung. Alles ist auf .hp-assistant begrenzt und gegen Theme-Button-Stile abgesichert.
   Farben: Markengrün #2F4F3A, Erdbraun #4F3B2A, Creme #F7F3EC, Salbei #E7EDE6. Schriften: Playfair Display / Open Sans. */

.hp-assistant{--hp-green:#2F4F3A;--hp-green-dark:#243d2d;--hp-brown:#4F3B2A;--hp-muted:#7b6a5a;--hp-cream:#F7F3EC;--hp-sage:#E7EDE6;--hp-line:#E7EDE6;--hp-line-strong:#D8DFD5;position:fixed;right:24px;bottom:22px;z-index:99990;font:14px/1.6 'Open Sans',Arial,sans-serif;color:var(--hp-brown);-webkit-font-smoothing:antialiased}
.hp-assistant,.hp-assistant *,.hp-assistant *::before,.hp-assistant *::after{box-sizing:border-box}
.hp-assistant button{all:unset;box-sizing:border-box;cursor:pointer;font-family:'Open Sans',Arial,sans-serif}
.hp-assistant :focus-visible{outline:2px solid var(--hp-green)!important;outline-offset:2px}
.hp-assistant svg{display:block;flex:none}

/* ---------- Geschlossen: Starter-Button ---------- */
.hp-assistant .hp-assistant-toggle{display:flex!important;align-items:center;gap:12px;position:relative;max-width:330px;padding:9px 14px 9px 9px;background:#fff!important;border:1px solid var(--hp-line)!important;border-radius:999px!important;box-shadow:0 12px 34px rgba(31,58,43,.2)!important;color:var(--hp-brown)!important;text-align:left;transition:transform .2s ease,box-shadow .2s ease}
.hp-assistant .hp-assistant-toggle:hover{background:#fff!important;transform:translateY(-2px);box-shadow:0 16px 40px rgba(31,58,43,.26)!important}
.hp-assistant .hp-assistant-toggle[hidden]{display:none!important}
.hp-assistant-avatar{width:62px;height:62px;flex:none;border:3px solid var(--hp-green);border-radius:50%;background:var(--hp-cream);overflow:hidden;display:grid;place-items:center}
.hp-assistant-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.hp-assistant-toggle-copy{display:flex;flex-direction:column;min-width:130px;line-height:1.3}
.hp-assistant .hp-assistant-toggle-copy strong{font:600 20px/1.2 'Playfair Display',Georgia,serif;color:var(--hp-brown)!important}
.hp-assistant .hp-assistant-toggle-copy span{font:13px/1.4 'Open Sans',Arial,sans-serif;color:var(--hp-brown)!important}
.hp-assistant-bubble{width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;border-radius:50%;background:var(--hp-green);color:#fff}
.hp-assistant-bubble svg{width:23px;height:23px}
.hp-assistant-badge{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;padding:1px 5px;border:2px solid #fff;border-radius:12px;background:#d94d3c;color:#fff;font:700 11px/15px 'Open Sans',Arial,sans-serif;text-align:center}

/* ---------- Chatfenster ---------- */
.hp-assistant-panel{position:absolute;right:0;bottom:96px;width:min(410px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:min(640px,calc(100dvh - 130px));min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--hp-line);border-radius:20px;box-shadow:0 24px 64px rgba(24,48,34,.28),0 2px 6px rgba(24,48,34,.08)}
.hp-assistant-panel[hidden]{display:none!important}

/* Kopfbereich */
.hp-assistant-panel header{flex:none;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 14px;background:linear-gradient(120deg,#2F4F3A 0%,#3b6048 100%)!important;color:#fff!important}
.hp-assistant-head-avatar{width:44px;height:44px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.92);background:var(--hp-cream);object-fit:cover}
.hp-assistant-head-copy{display:flex;flex:1;flex-direction:column;min-width:0}
.hp-assistant-panel header strong{font:600 17px/1.25 'Playfair Display',Georgia,serif;color:#fff!important;overflow-wrap:anywhere}
.hp-assistant-status{display:flex;align-items:center;gap:7px;margin-top:2px;font:12px/1.4 'Open Sans',Arial,sans-serif;color:#dfeadf!important}
.hp-assistant-status i{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:#8fe3a1;box-shadow:0 0 0 3px rgba(143,227,161,.25)}
.hp-assistant-training-bar{flex:none;padding:5px 14px;background:var(--hp-cream);border-bottom:1px solid var(--hp-line);color:var(--hp-muted);font:700 10.5px/1.3 'Open Sans',Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.hp-assistant .hp-assistant-close{display:grid!important;place-items:center;flex:none;width:34px;height:34px;border-radius:50%!important;background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;transition:background .15s ease}
.hp-assistant .hp-assistant-close:hover{background:rgba(255,255,255,.26)!important}
.hp-assistant .hp-assistant-close svg{width:18px;height:18px}

/* Nachrichtenbereich (scrollt unabhängig) */
.hp-assistant-messages{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-x:hidden;overflow-y:auto;padding:18px 14px 12px;background:#FBF9F4;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#c5d3c5 transparent}
.hp-assistant-bot-row{display:flex;align-items:flex-end;gap:8px;align-self:flex-start;max-width:100%;min-width:0}
.hp-assistant-message-avatar{display:block;flex:none;width:32px;height:32px;object-fit:cover;border-radius:50%;background:var(--hp-cream);border:1px solid var(--hp-line)}
.hp-assistant-msg{min-width:0;max-width:86%;margin:0;padding:11px 15px;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 'Open Sans',Arial,sans-serif}
.hp-assistant-bot-row .hp-assistant-msg{max-width:calc(100% - 40px);background:var(--hp-cream);color:var(--hp-brown);border:1px solid var(--hp-line);border-bottom-left-radius:6px;box-shadow:0 1px 3px rgba(47,79,58,.08)}
.hp-assistant-msg.user{align-self:flex-end;width:fit-content;background:var(--hp-green);color:#fff;border-bottom-right-radius:6px;box-shadow:0 2px 6px rgba(47,79,58,.22)}
.hp-assistant-msg.is-loading{color:var(--hp-muted);font-style:italic;animation:hp-pulse 1.5s ease-in-out infinite}
@keyframes hp-pulse{50%{opacity:.55}}

/* Link unter einer Antwort */
.hp-assistant .hp-assistant-link{align-self:flex-start;display:inline-flex;align-items:center;margin:-2px 0 2px 40px;padding:6px 14px;border:1px solid var(--hp-green);border-radius:999px;background:#fff;color:var(--hp-green)!important;font:600 12.5px/1.3 'Open Sans',Arial,sans-serif;text-decoration:none!important;transition:background .15s ease,color .15s ease}
.hp-assistant .hp-assistant-link:hover{background:var(--hp-green);color:#fff!important}

/* Antwortvorschläge */
.hp-assistant-suggestions{display:flex;flex-wrap:wrap;gap:6px;min-width:0;margin:0 0 4px 40px}
.hp-assistant .hp-assistant-suggestion{display:inline-flex;align-items:center;max-width:100%;padding:7px 13px;border:1px solid #cfdccf!important;border-radius:999px!important;background:#fff!important;color:var(--hp-green)!important;font:600 12.5px/1.35 'Open Sans',Arial,sans-serif!important;text-align:left;transition:background .15s ease,color .15s ease,border-color .15s ease}
.hp-assistant .hp-assistant-suggestion:hover{background:var(--hp-green)!important;color:#fff!important;border-color:var(--hp-green)!important}

/* Besucher-Bewertung (nur wenn kein Training) */
.hp-assistant-vote{align-self:flex-start;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 4px 40px;font:12px/1.4 'Open Sans',Arial,sans-serif;color:var(--hp-muted)}
.hp-assistant .hp-assistant-vote button{display:inline-flex;align-items:center;padding:4px 12px;border:1px solid var(--hp-line-strong)!important;border-radius:999px!important;background:#fff!important;color:var(--hp-green)!important;font:600 12px/1.3 'Open Sans',Arial,sans-serif!important;transition:background .15s ease,color .15s ease}
.hp-assistant .hp-assistant-vote button:hover{background:var(--hp-green)!important;color:#fff!important;border-color:var(--hp-green)!important}

/* ---------- Training (nur Administratoren) ---------- */
.hp-training-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;margin:2px 0 4px 40px;padding:12px 14px;border:1px solid var(--hp-line-strong);border-radius:14px;background:#fff;color:var(--hp-brown);font:12.5px/1.45 'Open Sans',Arial,sans-serif;box-shadow:0 1px 3px rgba(47,79,58,.06)}
.hp-training-tools strong{flex:1 0 100%;font:700 10.5px/1.3 'Open Sans',Arial,sans-serif!important;letter-spacing:.09em;text-transform:uppercase;color:var(--hp-muted)!important}
.hp-assistant .hp-training-tools button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--hp-green)!important;border-radius:999px!important;background:#fff!important;color:var(--hp-green)!important;font:600 12.5px/1.2 'Open Sans',Arial,sans-serif!important;transition:background .15s ease,color .15s ease}
.hp-assistant .hp-training-tools button:hover{background:var(--hp-green)!important;color:#fff!important}
.hp-assistant .hp-training-tools .hp-training-submit{background:var(--hp-green)!important;color:#fff!important}
.hp-assistant .hp-training-tools .hp-training-submit:hover{background:var(--hp-green-dark)!important}
.hp-assistant .hp-training-tools select,.hp-assistant .hp-training-tools textarea{flex:1 0 100%;width:100%;min-width:0;margin:0;padding:8px 10px;border:1px solid var(--hp-line-strong);border-radius:10px;background:#fff;color:var(--hp-brown);font:13px/1.5 'Open Sans',Arial,sans-serif;box-shadow:none}
.hp-assistant .hp-training-tools textarea{resize:vertical;min-height:70px}
.hp-assistant .hp-training-tools select:focus,.hp-assistant .hp-training-tools textarea:focus{border-color:var(--hp-green);box-shadow:0 0 0 3px rgba(47,79,58,.14);outline:0!important}
.hp-training-diagnostic{margin:0 0 2px 40px;padding:6px 10px;border:1px dashed #cdd8cc;border-radius:10px;background:#fff;color:var(--hp-muted);font:11px/1.45 'Open Sans',Arial,sans-serif;overflow-wrap:anywhere}

/* ---------- Schnellzugriffe ---------- */
.hp-assistant-quick{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%;min-width:0;padding:10px 12px 8px;background:#fff;border-top:1px solid var(--hp-line)}
.hp-assistant .hp-assistant-quick button{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:62px;margin:0;padding:6px 2px;border:1px solid var(--hp-line)!important;border-radius:14px!important;background:var(--hp-cream)!important;color:var(--hp-brown)!important;text-align:center;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}
.hp-assistant .hp-assistant-quick button:hover,.hp-assistant .hp-assistant-quick button:focus-visible{background:#fff!important;border-color:#b9cbb9!important;transform:translateY(-1px);box-shadow:0 6px 16px rgba(47,79,58,.14)!important}
.hp-q-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--hp-green);color:#fff}
.hp-q-ic svg{width:16px;height:16px}
.hp-q-label{max-width:100%;font:600 11px/1.2 'Open Sans',Arial,sans-serif;color:var(--hp-brown);white-space:nowrap}

/* ---------- Eingabebereich ---------- */
.hp-assistant-form{flex:none;margin:0;padding:6px 12px;background:#fff}
.hp-assistant-field{display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 16px;border:1px solid var(--hp-line-strong);border-radius:24px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.hp-assistant-field:focus-within{border-color:var(--hp-green);box-shadow:0 0 0 3px rgba(47,79,58,.14)}
.hp-assistant .hp-assistant-field textarea{flex:1;min-width:0;height:34px;min-height:34px;max-height:112px;margin:0;padding:7px 0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--hp-brown)!important;font:14px/1.5 'Open Sans',Arial,sans-serif;resize:none;overflow-y:auto}
.hp-assistant .hp-assistant-field textarea::placeholder{color:#9a8b7c;opacity:1}
.hp-assistant .hp-assistant-field button{display:grid!important;place-items:center;flex:none;width:38px;height:38px;border-radius:50%!important;background:var(--hp-green)!important;color:#fff!important;transition:background .15s ease,transform .15s ease}
.hp-assistant .hp-assistant-field button:hover{background:var(--hp-green-dark)!important;transform:translateY(-1px)}
.hp-assistant .hp-assistant-field button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.hp-assistant .hp-assistant-field button svg{width:18px;height:18px}
.hp-assistant-panel small{flex:none;display:block;padding:2px 16px 11px;background:#fff;text-align:center;color:#8a7c6e;font:10.5px/1.45 'Open Sans',Arial,sans-serif}

/* ---------- Bildschirmgrößen ---------- */
@media(max-width:420px){.hp-assistant-quick{grid-template-columns:repeat(3,minmax(0,1fr))}.hp-assistant .hp-assistant-quick button{height:58px}}
@media(max-width:480px){.hp-assistant{right:12px;bottom:12px}.hp-assistant .hp-assistant-toggle{padding:8px 12px 8px 8px}.hp-assistant-avatar{width:52px;height:52px}.hp-assistant-panel{bottom:86px;width:calc(100vw - 24px)}}
/* Smartphones: HP bleibt wie bisher ausgeblendet. Zum späteren Einschalten die Klasse hp-allow-mobile am Element .hp-assistant setzen
   (oder die folgende Zeile entfernen); das responsive Layout darunter ist bereits vorbereitet. */
@media(max-width:767px){.hp-assistant:not(.hp-allow-mobile){display:none!important}.hp-assistant.hp-allow-mobile{right:10px;bottom:10px}.hp-assistant.hp-allow-mobile .hp-assistant-panel{position:fixed;left:8px;right:8px;bottom:8px;width:auto;height:min(84dvh,720px)}}
@media(prefers-reduced-motion:reduce){.hp-assistant *,.hp-assistant *::before,.hp-assistant *::after{transition:none!important;animation:none!important}.hp-assistant-messages{scroll-behavior:auto}}