/* Datei:httpdocs/css/chat-widget.css */
/* Angepasst an HGK-Webseite:Roboto, HGK-Blau #003366, Grüner Bot-Button */ /* Root */
.hgk-chat-root{position:fixed;bottom:16px;right:16px;font-family:'Roboto', Arial, sans-serif;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:12px}/* Panel */
.hgk-chat-panel{width:420px;max-width:95vw;max-height:600px;background:#ffffff;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.15);display:none;flex-direction:column;overflow:hidden;border:1px solid #e5e7eb;order:1}.hgk-chat-root--open .hgk-chat-panel{display:flex}/* Toggle-Button immer unten */
.hgk-chat-toggle{order:2}/* Toggle-Button - HGK-Rot, GRÖSSER */
.hgk-chat-toggle{width:72px;height:72px;border-radius:50%;border:none;background:#dd0921;color:#ffffff;cursor:pointer;box-shadow:0 4px 16px rgba(221, 9, 33, 0.4);display:flex;align-items:center;justify-content:center;transition:width 0.3s ease, height 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;position:relative;overflow:visible}/* Kleinerer Toggle-Button wenn Chat geöffnet (Schließen-Button) */
.hgk-chat-root--open .hgk-chat-toggle{width:44px;height:44px}.hgk-chat-toggle:hover{transform:scale(1.05);background:#b8071b;box-shadow:0 6px 24px rgba(221, 9, 33, 0.5)}.hgk-chat-toggle:active{transform:scale(0.95)}/* Puls-Animation für Aufmerksamkeit */
.hgk-chat-toggle::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:#dd0921;animation:hgk-pulse 2s ease-in-out infinite;z-index:-1}@keyframes hgk-pulse{0%, 100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.2);opacity:0}}/* Bot-Icon im Button - groß */
.hgk-chat-toggle svg.hgk-chat-icon-open{width:42px;height:42px;fill:currentColor;transition:transform 0.3s ease, opacity 0.3s ease}/* Schließen-Icon - deutlich kleiner */
.hgk-chat-toggle svg.hgk-chat-icon-close{width:22px;height:22px;fill:currentColor;transition:transform 0.3s ease, opacity 0.3s ease}/* Icon-Wechsel:Bot-Icon vs. X */
.hgk-chat-icon-open{display:block}.hgk-chat-icon-close{display:none}/* Wenn Chat offen ist:X-Icon zeigen, Bot-Icon verstecken */
.hgk-chat-root--open .hgk-chat-icon-open{display:none}.hgk-chat-root--open .hgk-chat-icon-close{display:block}/* Wenn Chat offen ist:Puls stoppen */
.hgk-chat-root--open .hgk-chat-toggle::before{animation:none;opacity:0}/* Label "Frag HGK" über dem Button - HGK-Rot mit weißer Schrift */
.hgk-chat-toggle::after{content:'Frag HGK' !important;position:absolute;left:50%;bottom:calc(100% + 12px);/* 12px über dem Button */ transform:translateX(-50%);background:#dd0921;color:#ffffff !important;padding:12px 22px;/* Mehr Padding für größere Box */ border-radius:20px;/* Rundere Ecken */ font-size:15px !important;font-weight:700;font-family:'Roboto', Arial, sans-serif !important;line-height:1 !important;/* Enger, damit Text zentriert */ white-space:nowrap;box-shadow:0 4px 12px rgba(221, 9, 33, 0.4);opacity:1;visibility:visible !important;display:flex !important;align-items:center;justify-content:center;transition:opacity 0.2s ease, transform 0.2s ease;z-index:10000;pointer-events:none}/* Label ausblenden wenn Chat geöffnet */
.hgk-chat-root--open .hgk-chat-toggle::after{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(4px)}/* Hop-Animation für Aufmerksamkeit, nur wenn geschlossen */
@keyframes hgk-hop{0%, 90%, 100%{transform:translateY(0)}94%{transform:translateY(-8px)}96%{transform:translateY(0)}}.hgk-chat-root:not(.hgk-chat-root--open) .hgk-chat-toggle{animation:hgk-hop 4s ease-in-out infinite}/* Header - HGK-Blau */
.hgk-chat-header{padding:12px 16px;background:#002e68;color:#ffffff;font-size:15px;font-weight:700}.hgk-chat-header-note{font-size:11px;margin-top:4px;opacity:0.85;font-weight:400}/* Messages */
.hgk-chat-messages{flex:1;padding:12px 14px;overflow-y:auto;background:#f5f5f5}/* Scrollbar-Styling */
.hgk-chat-messages::-webkit-scrollbar{width:6px}.hgk-chat-messages::-webkit-scrollbar-track{background:#e5e5e5;border-radius:3px}.hgk-chat-messages::-webkit-scrollbar-thumb{background:#002e68;border-radius:3px}.hgk-chat-message{margin-bottom:12px;max-width:100%}.hgk-chat-message--user{text-align:right}.hgk-chat-message--bot{text-align:left}.hgk-chat-bubble{display:inline-block;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap;max-width:85%}/* User-Bubble - HGK-Blau */
.hgk-chat-message--user .hgk-chat-bubble{background:#002e68;color:#ffffff;border-bottom-right-radius:4px}/* Bot-Bubble - Weiß */
.hgk-chat-message--bot .hgk-chat-bubble{background:#ffffff;color:#1d1d1d;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.08)}/* Meta-Info */
.hgk-chat-meta{font-size:10px;color:#6b7280;margin-top:4px}/* Footer */
.hgk-chat-footer{padding:10px 12px;border-top:1px solid #e5e7eb;background:#fafafa;display:flex;gap:8px}.hgk-chat-input{flex:1;font-family:'Roboto', Arial, sans-serif;font-size:14px;resize:none;border-radius:8px;border:1px solid #d1d5db;padding:8px 12px;transition:border-color 0.2s ease, box-shadow 0.2s ease}.hgk-chat-input:focus{outline:none;border-color:#002e68;box-shadow:0 0 0 2px rgba(0, 46, 104, 0.2)}/* Input-Container mit Zeichenzähler */
.hgk-chat-input-container{flex:1;display:flex;flex-direction:column;gap:2px}.hgk-chat-input-container .hgk-chat-input{flex:1}/* Zeichenzähler */
.hgk-chat-char-count{font-size:10px;color:#9ca3af;text-align:right;padding-right:4px;transition:color 0.2s ease}.hgk-chat-char-count--warning{color:#f59e0b;font-weight:500}.hgk-chat-char-count--limit{color:#ef4444;font-weight:600}/* Senden-Button - Grün */
.hgk-chat-send{padding:8px 16px;border-radius:8px;border:none;background:#dd0921;color:#ffffff;font-family:'Roboto', Arial, sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s ease}.hgk-chat-send:hover{background:#b8071b}.hgk-chat-send:disabled{background:#9ca3af;cursor:not-allowed}/* Quellenliste - HGK-Blau Akzent */
.hgk-chat-sources{margin-top:10px;padding:10px 12px;border-radius:8px;background:#ebf1f2;border-left:3px solid #002e68;font-size:12px;color:#4b5563}.hgk-chat-sources-title{font-weight:700;text-transform:uppercase;letter-spacing:0.05em;font-size:10px;color:#002e68;margin-bottom:6px}.hgk-chat-sources-list{list-style:none;margin:0;padding:0}.hgk-chat-sources-item{margin-bottom:6px}/* Links - HGK-Blau */
.hgk-chat-source-link{color:#002e68;text-decoration:none;font-weight:500}.hgk-chat-source-link:hover{color:#dd0921;text-decoration:underline}.hgk-chat-source-snippet{font-size:11px;color:#6b7280;margin-top:2px}/* Fallback-Box */
.hgk-chat-fallback-box{margin-top:8px;padding:8px 10px;border-radius:8px;background:#fef3c7;border:1px solid #fbbf24}.hgk-chat-fallback-text{font-size:11px;margin-bottom:4px}.hgk-chat-fallback-btn{display:inline-block;padding:6px 12px;font-size:12px;font-weight:600;border-radius:6px;background:#dd0921;color:#ffffff;text-decoration:none;transition:background 0.2s ease}.hgk-chat-fallback-btn:hover{background:#b8071b}/* Typing Indicator (3 animierte Punkte) */
.hgk-chat-typing{display:flex;align-items:center;gap:5px;padding:14px 18px;background:#ffffff;border-radius:12px;border-bottom-left-radius:4px;width:fit-content;box-shadow:0 1px 3px rgba(0, 0, 0, 0.08)}.hgk-chat-typing-dot{width:8px;height:8px;background:#9ca3af;border-radius:50%;animation:hgk-typing-bounce 1.4s ease-in-out infinite}.hgk-chat-typing-dot:nth-child(1){animation-delay:0s}.hgk-chat-typing-dot:nth-child(2){animation-delay:0.2s}.hgk-chat-typing-dot:nth-child(3){animation-delay:0.4s}@keyframes hgk-typing-bounce{0%, 60%, 100%{transform:translateY(0);background:#9ca3af}30%{transform:translateY(-8px);background:#dd0921}}/* Links in Bot-Nachrichten */
.hgk-chat-bubble a{color:#002e68;text-decoration:underline}.hgk-chat-bubble a:hover{color:#dd0921}/* Formatierte Bot-Antworten */ /* Absätze */
.hgk-chat-p{margin:0 0 8px 0}.hgk-chat-p:last-child{margin-bottom:0}/* Überschriften in Antworten */
.hgk-chat-h3{font-size:15px;font-weight:700;color:#002e68;margin:12px 0 6px 0}.hgk-chat-h3:first-child{margin-top:0}.hgk-chat-h4{font-size:14px;font-weight:600;color:#1d1d1d;margin:10px 0 4px 0}.hgk-chat-h4:first-child{margin-top:0}/* Listen (ul/ol) */
.hgk-chat-list{margin:8px 0;padding-left:20px;list-style-position:outside}.hgk-chat-bubble ul.hgk-chat-list{list-style-type:disc}.hgk-chat-bubble ol.hgk-chat-list{list-style-type:decimal}.hgk-chat-list li{margin-bottom:4px;line-height:1.4}.hgk-chat-list li:last-child{margin-bottom:0}/* Verschachtelte Listen */
.hgk-chat-list .hgk-chat-list{margin:4px 0}/* Fett und Kursiv */
.hgk-chat-bubble strong{font-weight:700}.hgk-chat-bubble em{font-style:italic}/* Horizontale Linie (Trenner) */
.hgk-chat-hr{border:none;border-top:1px solid #e5e7eb;margin:12px 0 8px 0}/* Kursiver Text nach horizontaler Linie = kleiner Hinweis */
.hgk-chat-hr + .hgk-chat-p em,
.hgk-chat-bubble .hgk-chat-p:last-child em:only-child{font-size:11px;color:#6b7280;line-height:1.4}/* Hinweis-Absatz (kursiv am Ende) kleiner */
.hgk-chat-bubble .hgk-chat-p em{font-size:12px;color:#6b7280}/* Zeilenumbrüche zwischen Blöcken reduzieren */
.hgk-chat-bubble br + br{display:none}/* Hinweis für wiederhergestellten Gesprächsverlauf */
.hgk-chat-history-notice{text-align:center;padding:8px 12px;margin:8px 16px 12px;background:linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 100%);border:1px solid #bae6fd;border-radius:8px;font-size:12px;color:#0369a1;font-weight:500}/* Confidence-Anzeige (Ampel) */
.hgk-chat-confidence{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;background:#f8fafc;border-radius:6px;font-size:11px}.hgk-chat-confidence-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.hgk-chat-confidence-dot--high{background:#278b34;box-shadow:0 0 4px rgba(39, 139, 52, 0.5)}.hgk-chat-confidence-dot--medium{background:#f59e0b;box-shadow:0 0 4px rgba(245, 158, 11, 0.5)}.hgk-chat-confidence-dot--low{background:#ef4444;box-shadow:0 0 4px rgba(239, 68, 68, 0.5)}.hgk-chat-confidence-text{color:#64748b;font-weight:500}/* "Antwort verbessern" Button */
.hgk-chat-refine-wrapper{margin-top:8px;text-align:right}.hgk-chat-refine-btn{background:#dd0921;border:none;border-radius:12px;padding:4px 10px;font-size:11px;color:#ffffff;cursor:pointer;transition:all 0.2s ease;font-family:inherit;font-weight:500;display:inline-flex;align-items:center;gap:4px}.hgk-chat-refine-btn:hover{background:#b8071b;transform:translateY(-1px)}.hgk-chat-refine-btn:active{background:#9a0617;transform:translateY(0)}.hgk-chat-refine-icon{width:12px;height:12px;fill:#ffffff;flex-shrink:0}/* Hinweis bei verbesserter Antwort */
.hgk-chat-refined-note{margin-top:8px;padding:6px 10px;background:#fef3c7;border-radius:6px;font-size:11px;color:#92400e;font-style:italic}/* ==================== VORSCHLÄGE ==================== */ .hgk-chat-suggestions{padding:8px 12px;background:#f8fafc;border-top:1px solid #e2e8f0}.hgk-chat-suggestions-title{font-size:11px;color:#64748b;margin-bottom:6px;font-weight:500}.hgk-chat-suggestions-list{display:flex;flex-wrap:wrap;gap:6px}.hgk-chat-suggestion-btn{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:5px 12px;font-size:11px;color:#334155;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.hgk-chat-suggestion-btn:hover{background:#dd0921;border-color:#dd0921;color:#ffffff}/* ==================== LOGIN-BUTTON ==================== */ .hgk-chat-login-wrapper{margin-top:12px;text-align:center}.hgk-chat-login-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:#dd0921;color:#ffffff !important;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(221, 9, 33, 0.3)}.hgk-chat-login-btn:hover{background:#b8071b;transform:translateY(-1px);box-shadow:0 4px 12px rgba(221, 9, 33, 0.4);color:#ffffff !important;text-decoration:none}.hgk-chat-login-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(221, 9, 33, 0.3)}.hgk-chat-login-icon{width:18px;height:18px;fill:currentColor;flex-shrink:0}/* ==================== FEEDBACK-BUTTONS ==================== */ .hgk-chat-feedback{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #f1f5f9}.hgk-chat-feedback-label{font-size:11px;color:#94a3b8}.hgk-chat-feedback-btn{background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 8px;font-size:14px;cursor:pointer;transition:all 0.15s ease;line-height:1}.hgk-chat-feedback-btn:hover{transform:scale(1.1)}.hgk-chat-feedback-btn--up:hover{background:#dcfce7;border-color:#278b34}.hgk-chat-feedback-btn--down:hover{background:#fee2e2;border-color:#ef4444}.hgk-chat-feedback-thanks{font-size:11px;color:#278b34;font-weight:500}.hgk-chat-feedback-error{font-size:11px;color:#ef4444}/* ==================== RESPONSIVE STYLES ==================== */ /* Tablets und kleine Desktops */
@media (max-width:768px){.hgk-chat-root{bottom:12px;right:12px}.hgk-chat-panel{width:360px;max-height:500px}.hgk-chat-toggle{width:64px;height:64px}.hgk-chat-root--open .hgk-chat-toggle{width:40px;height:40px}.hgk-chat-toggle svg.hgk-chat-icon-open{width:36px;height:36px}.hgk-chat-toggle::after{padding:8px 16px;font-size:13px}}/* Smartphones */
@media (max-width:480px){.hgk-chat-root{bottom:12px;right:12px;left:auto;align-items:flex-end}/* Chat-Panel auf Smartphones */ .hgk-chat-panel{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100vh - 100px);border-radius:12px;margin:0}/* Toggle-Button */ .hgk-chat-toggle{width:60px;height:60px}.hgk-chat-root--open .hgk-chat-toggle{width:40px;height:40px}.hgk-chat-toggle svg.hgk-chat-icon-open{width:32px;height:32px}.hgk-chat-toggle svg.hgk-chat-icon-close{width:20px;height:20px}/* Label "Frag HGK" auf Mobil ausblenden */ .hgk-chat-toggle::after{display:none}/* Header */ .hgk-chat-header{padding:14px 16px;font-size:16px}/* Messages:mehr Platz */ .hgk-chat-messages{padding:10px 12px}/* Eingabebereich */ .hgk-chat-footer{padding:10px 12px;gap:8px}.hgk-chat-input{font-size:16px;/* verhindert iOS Zoom */ padding:10px 12px}.hgk-chat-send{padding:10px 16px;font-size:14px}/* Quellen:kompakter */ .hgk-chat-sources{padding:8px 10px}.hgk-chat-sources-title{font-size:11px}}/* Sehr kleine Smartphones */
@media (max-width:360px){.hgk-chat-toggle{width:54px;height:54px}.hgk-chat-toggle svg.hgk-chat-icon-open{width:28px;height:28px}.hgk-chat-bubble{padding:10px 12px;font-size:13px}}