/**
 * Chatbot Overlay Styles - Grüne RLP (v4.1 - Ultra Force Position)
 * Autor: Martin Schmidt
 */

@font-face {
    font-family: 'GrueneType Neue';
    src: url('fonts/GrueneTypeNeue-Bold.woff2') format('woff2'); 
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --gruene-brand: #004225;
    --gruene-light: #4c9a2a;
    --gruene-yellow: #ffec00;
    --chat-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

/* Haupt-Wrapper MUSS ganz oben rechts fixiert sein */
#gruene-chat-wrapper {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: auto !important;
    height: auto !important;
    z-index: 999999999 !important; /* Extrem hoch */
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    font-family: "GrueneType Neue", Arial, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Der gelbe Launcher Button */
#chat-trigger-button {
    all: unset !important; /* Löscht alle Theme-Styles */
    position: relative !important;
    width: 75px !important;
    height: 75px !important;
    background: var(--gruene-yellow) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Maske für das Banner */
#chat-banner-mask {
    position: relative !important;
    overflow: hidden !important;
    height: 60px !important;
    padding-left: 50px !important;
    margin-left: -50px !important;
    margin-right: -37px !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: none !important;
}

#chat-teaser-banner {
    background: var(--gruene-brand) !important;
    color: white !important;
    padding: 12px 55px 12px 30px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 20px !important;
    transform: skewX(-12deg) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}

#chat-teaser-banner span { display: block !important; transform: skewX(12deg) !important; }
#chat-teaser-banner.is-active { transform: translateX(105%) skewX(-12deg) !important; opacity: 0 !important; }

/* Chat Fenster XXL */
#chat-window-container {
    position: absolute !important;
    bottom: 95px !important;
    right: 0 !important;
    width: 735px !important; 
    height: calc(90vh - 120px) !important; 
    max-height: 1100px !important;
    max-width: 85vw !important;
    background: white !important;
    border-radius: 25px !important;
    box-shadow: var(--chat-shadow) !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.2) !important;
    transform-origin: bottom right !important;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
    z-index: 80 !important;
}

#chat-window-container.is-visible { opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; }

/* Icons */
.btn-icon { position: absolute !important; width: 45px !important; height: 45px !important; color: var(--gruene-brand) !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#icon-close-main { opacity: 0 !important; transform: scale(0) !important; }
#chat-trigger-button.is-active #icon-sunflower { opacity: 0 !important; transform: scale(0) !important; }
#chat-trigger-button.is-active #icon-close-main { opacity: 1 !important; transform: scale(1) !important; }

/* Mobile */
@media (max-width: 480px) {
    #gruene-chat-wrapper { bottom: 15px !important; right: 15px !important; }
    #chat-window-container { 
        width: 98vw !important; 
        left: auto !important;
        right: -5px !important;
        height: 75vh !important;
        max-height: 75vh !important;
        bottom: 80px !important;
    }
    #chat-banner-mask { display: none !important; }
}

.chat-header { background: var(--gruene-brand) !important; color: white !important; padding: 15px 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
#chat-iframe { width: 100% !important; height: calc(100% - 55px) !important; border: none !important; }