:root,
ti-chat {
    /* Overwrites*/

    --ti-chat-custom-box-shadow: none;
    /* Im Modal soll der Chatbot selbst keinen Schatten haben*/
}

#ti-chatbot-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: var(--ti-popup-button-size);
    height: var(--ti-popup-button-size);
    font-size: var(--ti-popup-button-fontsize);

    border: none;
    appearance: none;

    background-image: var(--ti-popup-background-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: var(--ti-popup-button-color);
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));

    line-height: 1;

    border-radius: 50%;
    overflow: clip;
    cursor: pointer;
    i {
        color: var(--ti-popup-button-color);
    }
}
#ti-chatbot-toggle:focus,
#ti-chatbot-toggle:hover {
    background-image: var(--ti-popup-background-img-light);
}

#ti-chatbot-modal {
    display: none;
    position: fixed;
    bottom: calc(
        var(--ti-popup-button-bottom) + var(--ti-popup-button-size) + 0.5rem
    );
    right: 0.5rem;
    width: 90%;
    height: auto;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    font-size: var(--ti-chat-fontsize, 16px);
    max-height: calc(
        100% -
            calc(
                var(--ti-popup-button-bottom) + var(--ti-popup-button-size) +
                    0.5rem
            )
    );

    border-radius: 0.75rem;
    box-shadow: var(--ti-popup-modal-shadow);
    background-color: var(--ti-chat-surface);
    overflow: hidden;
    .ti-chatbot-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        margin: 0.5rem 0.5rem 0 0.5rem;
        .ti-chatbot-header-image {
            height: var(--ti-popup-header-height);
        }
        .ti-chatbot-header-title {
            padding-bottom: 0 !important;
        }
    }
    .ti-chatbot-modal-footer {
        font-size: var(--ti-popup-modal-footer-fontsize, 12px);
        padding: 0 1rem 0.5rem 1rem;
        text-align: center;
    }
}
@media (min-width: 768px) {
    #ti-chatbot-modal {
        width: var(--ti-popup-modal-width, 40%);
    }
}
#ti-chatbot-close {
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 200%;
    background: var(--ti-chat-surface);
}

/* Sticky Popup-Button*/

#ti-chatbot-toggle {
    right: var(--ti-popup-button-right);
    bottom: var(--ti-popup-button-bottom);
    position: fixed;
    z-index: 1030;
}

#ti-chatbot-preview-close {
    padding: 0;
    z-index: 200;
}
.slide-in-right {
    transition: all 500ms ease !important;

    transform: translateX(
        calc(var(--ti-popup-button-right) + var(--ti-popup-button-size) * 2)
    );
}
.slide-in-right.slide-triggered {
    transform: translateX(0);
}
.ti-chat-preview {
    display: none;
    position: fixed;
    bottom: calc(
        var(--ti-popup-button-bottom) + var(--ti-popup-button-size) + 0.5rem
    );
    right: var(--ti-popup-button-right);
    width: 15rem;
    height: auto;
    background-color: var(--ti-chat-surface);
    border-radius: 0.75rem;
    box-shadow: var(--ti-popup-modal-shadow);
    z-index: 100;

    padding: 0.75rem 1rem 1.5rem 1rem;
    font-size: 16px;
    .ti-chatbot-header {
        margin-bottom: 0.5rem;
    }
}
#ti-chatbot-preview-close {
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 200%;
    background: var(--ti-chat-surface);
}

/* Shaker-Animation*/
.shaker {
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: 1;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -4px) rotate(-2deg);
    }
    20% {
        transform: translate(-5px, 0px) rotate(2deg);
    }
    30% {
        transform: translate(5px, 4px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(2deg);
    }
    50% {
        transform: translate(-1px, 4px) rotate(-2deg);
    }
    60% {
        transform: translate(-5px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(5px, 1px) rotate(-2deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(2deg);
    }
    90% {
        transform: translate(1px, 4px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -4px) rotate(-2deg);
    }
}