/* Keine festen Bildpfade mehr – alle Icons via CSS-Variablen oder inline im Template.
   Dadurch keine 404 durch relative Pfade aus der CSS-Datei. */

/* Variablen pro Instanz */
.mod-chatbot { --chat-btn-bg:#004563; --chat-header-bg:#004563; --chat-user-bg:#004563; --chat-user-text:#fff; --chat-bot-bg:#fff; --chat-bot-text:#000; --chat-window-bg:#efefef; }

/* Floating button */
#chatButton.chat-btn {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
    background: var(--chat-btn-bg); border: none; color: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center; gap:8px;
    transition: transform 0.2s; font-weight: 600;
}
#chatButton.chat-btn:hover { transform: scale(1.1); }

/* Button als Icon (optional) */
.mod-chatbot.has-button-icon #chatButton.chat-btn{ font-size:0; }
.mod-chatbot.has-button-icon #chatButton .chat-icon{
    width:60px; height:60px; display:inline-block;
    background-image: var(--chat-button-icon);
    background-repeat:no-repeat; background-position:center; background-size:contain;
}
.mod-chatbot.has-button-icon #chatButton .chat-btn-label{ font-size:14px; margin-left:6px; }

/* Window */
#chatWindow.chat-window {
    position: fixed; bottom: 80px; right: 20px; width: 400px; height: 550px;
    background: var(--chat-window-bg); border-radius: 12px; display: flex; flex-direction: column;
    z-index: 9998; box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    overflow: hidden; font-family: Arial, sans-serif;
    opacity: 0; transform: scale(0.8); pointer-events: none; transition: all 0.25s ease;
}
#chatWindow.chat-window.open { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Header */
#chatHeader.chat-header { background:var(--chat-header-bg); color:#fff; padding:14px; font-weight:bold; font-size:16px; display:flex; align-items:center; gap:10px; }
#chatHeader .header-avatar { width:34px; height:34px; border-radius:50%; background-color:#efefef; background-image:none; background-repeat:no-repeat; background-position:center; background-size:contain; }

/* Messages */
#chatMessages.chat-messages { flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:12px; background:var(--chat-window-bg); }
.message { display:flex; align-items:flex-start; gap:8px; }
.message.user { flex-direction: row-reverse; }
.message .avatar { width:34px; height:34px; border-radius:50%; background-size:cover; }

/* User-Avatar: Standard (Mask, lokale Data-URL – keine Netz-Requests) */
.message.user .avatar {
    background: var(--chat-user-bg);
    -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMiAyYTcgNyAwIDEgMCAwIDE0IDcgNyAwIDAgMCAwLTE0bTAgMTRjLTQuNDEgMC04IDMuNTktOCA4aDE2YzAtNC40MS0zLjU5LTgtOC04eiIvPjwvc3ZnPg==") no-repeat center/contain;
            mask:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMiAyYTcgNyAwIDEgMCAwIDE0IDcgNyAwIDAgMCAwLTE0bTAgMTRjLTQuNDEgMC04IDMuNTktOCA4aDE2YzAtNC40MS0zLjU5LTgtOC04eiIvPjwvc3ZnPg==") no-repeat center/contain;
}
/* User-Avatar als Bild, wenn gesetzt */
.mod-chatbot.has-user-icon .message.user .avatar{
    background-color:transparent !important;
    -webkit-mask:none !important; mask:none !important;
    background-image: var(--chat-user-avatar) !important;
    background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important;
}

/* Bot-Avatar */
.message.bot .avatar { background-color:#efefef; background-image:none; background-repeat:no-repeat; background-position:center; background-size:contain; }
.mod-chatbot.has-bot-icon .message.bot .avatar{ background-color:transparent; background-image: var(--chat-bot-avatar); }

/* Bubbles */
.message .bubble { max-width:70%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.4; word-wrap:break-word; white-space:pre-wrap; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.message.user .bubble { background: var(--chat-user-bg); color: var(--chat-user-text); border-bottom-right-radius:4px; }
.message.bot .bubble { background: var(--chat-bot-bg); color: var(--chat-bot-text); border-bottom-left-radius:4px; }

/* Input */
#chatInput.chat-input { display:flex; padding:10px; border-top:1px solid #ddd; background:#f9f9f9; }
#chatInput input { flex:1; padding:10px 14px; border-radius:20px; border:1px solid #ccc; outline:none; font-size:14px; }
#chatInput button { margin-left:8px; padding:10px 14px; border-radius:50%; border:none; background: var(--chat-header-bg); color:#fff; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.2); }

@media (max-width: 480px) { #chatWindow.chat-window { width: calc(100% - 40px); height: 70vh; right: 20px; } }