:root {
    --chat--font-family: "Roboto", sans-serif;

    /* Send-Button Variables */
    --chat--color--primary: #187E91;
    --chat--color--primary-shade-50: var(--chat--color--dark-primary);
    --chat--color--primary--shade-100: #eaf7f9;
    --chat--color--dark-primary: #145561;
    --chat--color--secondary: #eaf7f9;
    --chat--color-secondary-shade-50: #1ca08a;
    --chat--color--secondary-20: #deeef4;
    --chat--color-white: #ffffff;
    --chat--color-light: #f2f4f8;
    --chat--color-light-shade-50: #e6e9f1;
    --chat--color-light-shade-100: var(--chat--body--background);
    --chat--color-medium: #d2d4d9;
    --chat--color-dark: #202020;
    --chat--color-disabled: var(--chat--color-white);
    --chat--color-typing: var(--chat--color--primary);

    --chat--spacing: 1rem;
    --chat--border-radius: 0.75rem;
    --chat--transition-duration: 0.15s;

    --chat--window--width: 100dvw;
    --chat--window--height: 100dvh;

    --chat--header-height: auto;
    --chat--header--padding: 1rem 1.25rem;
    --chat--header--background: var(--chat--color--secondary-20);
    --chat--header--color: var(--chat--color--dark-primary);
    --chat--header--border-top: none;
    --chat--header--border-bottom: 1px solid #cde3e8;
    --chat--heading--font-size: 2rem;
    --chat--subtitle--font-size: inherit;
    --chat--subtitle--line-height: 1.8;

    --chat--body--background: var(--chat--color--secondary);
    --chat--textarea--height: 50px;

    --chat--message--font-size: 1rem;
    --chat--message--padding: var(--chat--spacing);
    --chat--message--border-radius: var(--chat--border-radius);
    --chat--message-line-height: 1.8;
    --chat--message--bot--background: var(--chat--color-white);
    --chat--message--bot--color: var(--chat--color-dark);
    --chat--message--bot--border: none;
    --chat--message--user--background: var(--chat--color--primary);
    --chat--message--user--color: #ffffff;
    --chat--message--user--border: none;
    --chat--messages-list--padding: 1rem;
    --chat--message--pre--background: rgba(0, 0, 0, 0.05);
    --chat--footer--background: var(--chat--body--background);
    --chat--footer--padding: 0 1rem 1rem 1rem;

    --chat--input--background: transparent;
    --chat--input--send--button--background: var(--chat--color--primary);
    --chat--input--send--button--color: var(--chat--color-white);
    --chat--input--send--button--background-hover: var(--chat--color--dark-primary);;
    --chat--input--send--button--color-hover: var(--chat--color-white);

    --chat--toggle--background: #eb0051;
    --chat--toggle--hover--background: #DE004D;
    --chat--toggle--active--background: #DE004D;
    --chat--toggle--color: var(--chat--color-white);
    --chat--toggle--size: 65px;
    --theme: var(--chat--color--primary);
}

main.chat-layout {
    min-height: unset;
}

/* full screen mode */
.chat-layout {
    &:not(.chat-window .chat-layout) {
        min-height: 650px;
        max-height: 100dvh;
    }
    .chat-header {
        /*background-image: url(/gfx/all/ai_chat_icon.svg);*/
        background-image: url("/co2online/Multimedia/Icons/konturbasiert/ai_chat_icon.svg");
        background-position: var(--chat--message--padding);
        background-repeat: no-repeat;
        background-size: 100px auto;
        padding-left: 134px;
        padding-right: var(--chat--message--padding);
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        border-bottom: none;

        .chat-heading h1 {
            margin-bottom: 0;
            word-break: break-word;
        }

        p {
            margin-top: 0;
            color: var(--chat--color--dark-primary);
        }
    }

    .chat-body {

        .chat-messages-list {
            overflow-y: auto;
            margin-top: unset;

            .chat-message {
                width: fit-content;

                &.chat-message-from-user {
                    max-width: 80%;
                }

                a:hover {
                    text-decoration: none;
                }

                &.chat-message-from-user p {
                    color: var(--chat--message--user--color);
                }
            }
        }
    }
}

/* window mode */
.chat-window-wrapper {
    margin-right: 16px;
    margin-bottom: 16px;

    .chat-window {
        max-width: 600px;
        max-height: 800px;

        .chat-layout {
            padding-top: 0;

            .chat-header {
                background-size: 50px auto;
                padding: 16px 16px 16px 80px;

                h1 {
                    margin-top: unset;
                    font-size: 24px;
                }

                p {
                    margin-bottom: unset;
                    line-height: 1.2;
                }
            }

            .chat-footer .chat-inputs {
                padding: 8px;
                display: flex;
                align-items: center;

                textarea {
                    padding: 12px 8px;
                    border: none;
                    resize: none;
                    width: 100%;

                    &:focus {
                        border-color: var(--chat--color--primary);
                    }
                }
            }
        }
    }
    .chat-window-toggle {
        font-family: var(--chat--font-family);

        svg:has(path[d^="M12 3"]) {
            display: none;
        }
    }

    .chat-window-toggle:has(svg path[d^="M12 3"]) {
        position: relative;
        animation: shadow-ping 2s ease-out 1s 3;
        animation-fill-mode: forwards;

        &::before {
            content: "";
            display: block;
            /*background-image: url(/gfx/all/ai_chat_widget_icon.svg);*/
            background-image: url("/co2online/Multimedia/Icons/konturbasiert/ai_chat_widget_icon.svg");
            background-repeat: no-repeat;
            width: 40px;
            height: 36px;
        }
        &::after {
            content: "Chat starten!";
            position: absolute;
            bottom: 100%; /* Erscheint über dem Icon */
            left: 50%;
            transform: translateX(-50%);
            background: var(--chat--toggle--hover--background);
            color: var(--chat--color-white);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        &:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-10px);
        }
    }
}

@keyframes shadow-ping {
    0% {
        /* Start mit 60% Deckkraft */
        box-shadow: 0 0 0 0 rgba(235, 0, 81, 0.6);
    }
    50% {
        /* Ausdehnen auf 20px und komplett transparent werden */
        box-shadow: 0 0 0 15px rgba(235, 0, 81, 0);
    }
    100% {
        /* Bleibt unsichtbar bis zum nächsten Intervall */
        box-shadow: 0 0 0 0 rgba(235, 0, 81, 0);
    }
}


/*!* Input field *!*/
.chat-footer {
    padding: 0 var(--chat--message--padding) var(--chat--message--padding) var(--chat--message--padding);

    .chat-get-started-footer {
        display: none;
    }

    .chat-input {
        .chat-inputs {
            background: #ffffff;
            border-radius: 1rem;
            padding: 16px;
            /*border: 2px solid rgba(24, 126, 145, 0.2);*/
            /* box-shadow: 0 4px 15px 0 rgba(80, 130, 140, 0.28); */
            box-shadow: 0 0 15px 4px rgba(100, 150, 160, 0.15);
            position: relative;

            &::before {
                content: "";
                position: absolute;
                top: -40px;
                left: 0;
                height: 40px;
                width: 100%;
                pointer-events: none;
                z-index: 2;
                background: transparent;
                backdrop-filter: blur(1px);
                mask: linear-gradient(to top, white 0%, white 25%, white 50%, transparent 100%);

            }

            textarea::placeholder {
                color: #5f5f5f;
                font-style: italic;
            }

            .chat-inputs-controls {
                align-self: center;

                .chat-input-send-button {
                    border-radius: 50%;
                    border: none;
                    width: 40px;
                    height: 40px;
                    color: var(--chat--input--send--button--color);
                    background: var(--chat--input--send--button--background);
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    margin: 8px;

                    &:not[disabled]:hover {
                        color: var(--chat--input--send--button--color-hover);
                        background: var(--chat--input--send--button--background-hover);
                        cursor: pointer;
                    }

                    &[disabled] {
                        opacity: 40%;
                    }
                }

            }
        }
    }
}

.privacy-policy {
    background: var(--chat--color--secondary);
    margin-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    padding: 0 10px 10px 10px;
    font-size: 12px;
    color: #5f5f5f;
    text-align: center;

    a {
        color: #367E90;
        text-decoration: underline;
    }
}


@media (min-width: 768px) {
    .chat-layout:not(.chat-window .chat-layout) {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;

        .chat-header {
            background-position: 2rem;
            padding-left: 150px;
            padding-right: 2rem;
        }

        .chat-body {
            .chat-messages-list {
                padding: 2rem;
            }
        }

        .chat-footer {
            padding: 0 2rem 1.5rem 2rem;
        }
    }

    .chat-window-wrapper .chat-window-toggle {
        width: 80px;
        height: 80px;

        &:has(svg path[d^="M12 3"]) {
            &:before {
                width: 50px;
                height: 46px;
            }

            &:after {
                font-size: 16px;
            }
        }
    }



    .privacy-policy {
        background: var(--chat--color--secondary);
        margin-bottom: 8rem;
        width: 80%;
    }
}

@media (max-width: 535px) {
    .chat-layout:not(.chat-window .chat-layout) {
        .chat-header {
            background-position: center top 20px;
            padding-top: 100px;
            padding-left: var(--chat--message--padding);

            .chat-heading h1 {
                font-size: 1.75rem;
                margin: auto;
            }

            p {
                text-align: center;
            }
        }
    }
}