.block-aichat {
    --l-color-chat-bg: #F3F4F5;
    --l-color-chat-head: #171C21;

    margin: 0;
    padding: var(--spacing-top) 0 var(--spacing-bottom) 0;
    position: relative;
    background: var(--bgcolor);
    overflow: clip;

    .container {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .text {
        h1 {
            margin-bottom: 16px;

            &.h1 {
                font-size: 44px;
                line-height: 1.2;
            }

            &.h2 {
                font-size: 32px;
                line-height: 1.3;
            }

            &.h3 {
                font-size: 28px;
                line-height: 1.3;
            }

            &.h4 {
                font-size: 24px;
                line-height: 1.4;
            }
        }

        nav{
            margin-block: 32px;
            display: flex;
            flex-direction: column;
            gap: 16px;

            .btn {
                align-self: flex-start;

                &:nth-of-type(2) {
                    color:  #CA4A2B;
                    background: transparent;
                    border: 2px solid #CA4A2B;
                }

                &::after {
                    content: none;
                }
            }


        }
    }

    .chatbox {
        transform: translateX(-20px);
        border-radius: 0;
        width: calc(100% + 40px);
        padding: 20px;

        background: var(--l-color-chat-bg);

        h2 {
            font-family: var(--font-buenos);
            font-weight: 700;
            color: var(--l-color-chat-head);
            margin: 0;
            text-align: center;
            margin-bottom: 1em;

            &.h1 {
                font-size: 44px;
                line-height: 1.2;
            }

            &.h2 {
                font-size: 32px;
                line-height: 1.3;
            }

            &.h3 {
                font-size: 28px;
                line-height: 1.3;
            }

            &.h4 {
                font-size: 24px;
                line-height: 1.4;
            }
        }

        .chatcontainer {
            max-height: 70vh;
            overflow: hidden;
            border-radius: 0 0 12px 12px;
            background: #fff;

            .mwai-body {
                background: #fff;
                position: relative;
                max-height: 70vh;
                padding: 12px;
                border-radius: 12px;

            }

            .mwai-conversation {
                padding-right: 12px;
                margin-bottom: 12px;
                scrollbar-width: unset;
                scrollbar-color: unset;

                 &::-webkit-scrollbar {
                    width: 8px;
                }
                    
                &::-webkit-scrollbar-track {
                    background: transparent;
                    margin-right: 2px;
                }
                
                &::-webkit-scrollbar-thumb {
                    background-color: rgba(0, 0, 0, 0.2);
                    border-radius: 4px;
                }
                
                &::-webkit-scrollbar-thumb:hover {
                    background-color: rgba(0, 0, 0, 0.2);
                }
            }

            .mwai-input {
                background: none;
                border: 1px solid #e3E5E7;
                border-radius: 12px;
                padding: 0;
                padding-bottom: 0 !important;
                margin-bottom: 0;
                overflow: clip;

                .mwai-input-text {
                    padding: 8px 12px;
                }

                .mwai-input-submit {
                    padding: 0 16px;
                    width: auto;
                    min-width: fit-content;
                    border-radius: 0;
                    margin-top: 0;
                    font-size: 16px;
                }

            }

            .mwai-chatgpt-theme .mwai-reply {
        &.mwai-ai {
            padding: 24px 12px;

            &:first-child {
                display: none;
            }
        }

        &.mwai-user {
            background: #DDE7FA;
            padding: 12px;
            border-radius: 12px;
            margin-left: auto;
            display: block;
            max-width: 70%;
            width: fit-content;
        }

        &.mwai-error {
            border: 0 !important;
            padding: 12px;

            .mwai-text {
                color: #ca4a2b;
            }

            .mwai-reply-actions {
                display: none;
            }
        }

        .mwai-name {
            display: none;
        }




        .mwai-text {
            * {
                font-size: clamp(16px,1.6vw,16px);
            }
        }


        p, h3, ul, ol {
            margin: 0 0 1em 0;
        }

        ul, ol {
            padding: 0 0 0 2em;

            li {
                list-style: disc;
            }
        }

        ol {
            padding: 0 0 0 1em;

            li {
                text-indent: -1.3em;
                padding-left: 1.5em;

                &::marker {
                    content: none;
                }
            }
        }

        hr {
            height: 1px;
            background: #eee;
            border: 0;
            margin: 1em 0;
        }

        a {
            font-family: var(--font-avenir);
            color: #CA4A2B;
            font-weight: 600;
        }





            }
        }

        &[data-style="dark"] {
            --l-color-chat-bg: #171C21;
            --l-color-chat-head: #F8FBFF;
        }

    }
   

    .btn {
        --color: #FFFCFB;

        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #CA4A2B;
        color: var(--color);
        padding: 8px 16px;
        font-family: var(--font-avenir);
        border-radius: 12px;
        font-size: clamp(16px,1.8vw,18px);

        &::after {
            content: '';
            mask-image: var(--icon-playcircle);
            mask-size: cover;
            background-color: var(--color);
            width: 24px;
            aspect-ratio: 1;
            display: block;
        }
    }

    @media screen and (min-width: 748px) {
        .chatbox {
            transform: none;
            padding: 60px;
            border-radius: 12px;
            width: 100%;
        }


        &:has(.text) {

            .chatbox {
                padding: 32px;

                .chatcontainer {
                    max-height: unset;

                    .mwai-body {
                        height: 250px;
                    }
                }
            }


            .container {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 64px;
            }
        }
    }

    @media screen and (min-width: 1100px) {

    }

}