@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    src: url("/Fonts/Roboto-Light.ttf") format("opentype");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: url("/Fonts/Roboto-Regular.ttf") format("opentype");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: url("/Fonts/Roboto-Medium.ttf") format("opentype");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: url("/Fonts/Roboto-Bold.ttf") format("opentype");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 900;
    src: url("/Fonts/Roboto-Black.ttf") format("opentype");
}

#assistant-icon {
    width: 94px;
    position: fixed;
    bottom: 0;
    right: 1rem;
    z-index: 999;
}

    #assistant-icon img {
        max-width: 100%;
        filter: drop-shadow(4px 10px 10px rgba(0,0,0,0.5));
    }

        #assistant-icon img.speech-bubble {
            position: absolute;
            width: 55px;
            right: 0;
            top: -40px;
            display: none;
        }

    #assistant-icon:hover {
        cursor: help;
    }

        #assistant-icon:hover .speech-bubble {
            display: block;
        }

/*Breaking*/
/*.icon {
    position: absolute;
    width: 0;
    text-align: center;
    cursor: pointer;
    bottom: 0;
    transform: translateX(-50%);
    left: 50%;
}*/

.bar {
    position: absolute;
    transform: translate(-50%, -50%);
    /*align-items: center;*/
    top: -10px;
    background-color: #f98866;
    width: 10px;
    height: 12px;
    margin: 5px 0;
    border-radius: 10px;
    transition: 0.3s;
    animation: dope 1.5s ease-in-out 0s infinite;
}

    .bar:nth-child(1) {
        animation-delay: 0s;
    }

    .bar:nth-child(2) {
        animation-delay: 0.15s;
    }

    .bar:nth-child(3) {
        animation-delay: 0.3s;
    }

    .bar:nth-child(4) {
        animation-delay: 0.45s;
    }

@keyframes dope {
    0% {
        height: 12px;
    }

    50% {
        height: 24px;
    }

    100% {
        height: 12px;
    }
}

#chat-window {
    font-size: 16px;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 280px;
    height: 215px;
    background: #FFF;
    border-radius: 0 20px 20px 20px;
    padding: 1rem;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    z-index: 999999;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

    /* Auto-resize transition styles */
    #chat-window.chat-resizing {
        transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    }

    /* Responsive width adjustments */
    #chat-window.chat-expanded {
        width: 350px;
    }

    /* Ensure content flows properly during resize */
    #chat-window .chat-body {
        flex: 1;
        min-height: 0;
    }

    #chat-window .resizers .resizer {
        width: 36px;
        height: 36px;
        position: absolute;
        background-image: url(/img/ai-chat-assistant/resize.png);
        background-repeat: no-repeat;
        opacity: 0.25;
    }

        #chat-window .resizers .resizer:hover {
            opacity: 0.75;
        }

        #chat-window .resizers .resizer.top-left {
            left: 0;
            top: 0;
            cursor: nwse-resize;
            /*resizer cursor*/
        }

    #chat-window h1,
    #chat-window h2,
    #chat-window h3,
    #chat-window h4,
    #chat-window h5,
    #chat-window h6,
    #chat-window p,
    #chat-window ul,
    #chat-window ol {
        margin-bottom: 0;
    }

    #chat-window .chat-header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.75rem;
        box-shadow: 0 5px 10px white;
    }

        #chat-window .chat-header h6 {
            font-size: 0.9rem;
            color: #343434;
        }

        #chat-window .chat-header .icons {
            display: flex;
            align-items: center;
        }

            #chat-window .chat-header .icons i {
                transition: opacity 0.2s ease-in-out;
                cursor: pointer;
            }

                #chat-window .chat-header .icons i:hover {
                    opacity: 0.7;
                }

    #chat-window .chat-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 1.5rem;
        max-height: 1080px;
        overflow-y: auto;
        padding-right: 0.5rem;
        flex: 1;
        min-height: 0;
    }

        #chat-window .chat-body .message {
            display: flex;
            margin-bottom: 0.75rem;
        }

            #chat-window .chat-body .message .avatar {
                align-self: flex-start;
                margin-right: 0.5rem;
            }

            #chat-window .chat-body .message .message-text {
                font-size: 0.9rem;
                padding: 0.5rem;
                color: #343434;
                background: #f1f1f1;
                border-radius: 0.75rem;
                word-wrap: break-word;
                word-break: break-word;
                hyphens: auto;
                max-width: 100%;
                line-height: 1.4;
            }

                #chat-window .chat-body .message .message-text .chat-emoji {
                    font-size: 1.25rem;
                    line-height: 1rem;
                }

    #chat-window .chat-footer {
        margin-top: auto;
        flex-shrink: 0;
    }

        #chat-window .chat-footer .textarea-container {
            position: relative;
            border-radius: 0.75rem;
            border: 1px solid #888;
            width: 100%;
            height: inherit;
            padding: 0.5rem;
            display: flex;
        }

            #chat-window .chat-footer .textarea-container textarea {
                width: calc(100% - 30px);
                border: none;
                font-size: 0.8rem;
                resize: none;
                outline: none;
                position: relative;
                padding: 0;
            }

                #chat-window .chat-footer .textarea-container textarea::placeholder {
                    color: #c2c2c2;
                    opacity: 1;
                }

            #chat-window .chat-footer .textarea-container span {
                position: absolute;
                z-index: 99;
                top: 0;
                right: 0;
            }

            #chat-window .chat-footer .textarea-container span {
                width: 30px;
                height: 100%;
            }

                #chat-window .chat-footer .textarea-container span.send {
                    background: url(/img/ai-chat-assistant/send.png) no-repeat center;
                }

                #chat-window .chat-footer .textarea-container span.sending {
                    margin-left: -15px;
                    margin-top: 8px;
                }

                #chat-window .chat-footer .textarea-container span.send:hover {
                    background: #fafafa url(/img/ai-chat-assistant/send-2.png) no-repeat center;
                    border-radius: 0 0.75rem 0.75rem 0;
                    cursor: pointer;
                }

                #chat-window .chat-footer .textarea-container span.typing {
                    background: url(/Images/aiChatAssistant/typing.gif) no-repeat center;
                }

        #chat-window .chat-footer .invalid-text {
            font-size: 0.75rem;
            color: red;
        }
/*Help page*/
.left-sidebar {
    background: #EBEBF3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.2rem;
    padding-left: 22px;
}

    .left-sidebar a {
        color: #444E59;
        color: #343541;
        font-family: Roboto;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-align: left;
        text-decoration: none;
        margin-top: 15px;
        margin-bottom: 2rem;
    }

    .left-sidebar h6 {
        margin-bottom: 0;
        text-align: left !important;
        color: #646464;
        font-family: Roboto;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
    }

    .left-sidebar .logo {
        align-self: flex-start;
        margin-bottom: 30px;
    }

    .left-sidebar p {
        color: #646464;
        margin-bottom: 0;
        font-size: 0.9rem;
        line-height: normal;
        text-align: center;
    }

.wrap {
    max-width: 1022px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content {
    display: flex;
    justify-content: center;
    background: #F7F8FA;
    transition: padding ease-in-out 0.2s;
}

    .content .chat-body {
        justify-content: flex-start;
        padding-top: 2rem;
    }

        .content .chat-body .user-prompt {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 1rem;
            background: #EBEBF3;
            margin-bottom: 1rem;
        }

            .content .chat-body .user-prompt .avatar {
                margin-right: 1rem;
                align-self: flex-start;
            }

        .content .chat-body .ai-response {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 1rem;
            margin-bottom: 1rem;
        }

            .content .chat-body .ai-response .avatar {
                margin-right: 1rem;
                align-self: flex-start;
            }

            .content .chat-body .ai-response .message-content p {
                white-space: pre-wrap;
            }

            .content .chat-body .ai-response button {
                border: none;
            }

                .content .chat-body .ai-response button.copy-btn {
                    background: #eee;
                    display: inline-block;
                    border-radius: 0.5rem;
                    padding: 0.25rem 0.5rem;
                }

            .content .chat-body .ai-response .hidden-textarea {
                display: none;
            }

    .content .chat-welcome {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5%;
    }

        .content .chat-welcome h2 {
            text-transform: uppercase;
            margin: 3rem 1rem 0 0;
            color: #333E48;
            text-align: center;
            font-feature-settings: 'clig' off, 'liga' off;
            font-family: Roboto;
            font-size: 40px;
            font-style: normal;
            font-weight: 300;
            line-height: 60px;
            font-variant: small-caps;
            letter-spacing: -0.5px;
        }

        .content .chat-welcome .ai-image {
            width: 185px;
            margin-left: 1rem;
        }

footer {
    position: fixed;
    bottom: 0;
}

    footer #prompt-suggestions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 2rem;
        background: linear-gradient(180deg, rgba(247, 248, 250, 0) 0%, #F7F8FA 10%);
    }

    footer .accordion {
        margin-top: auto;
    }

        footer .accordion #prompt-heading {
            display: flex;
            justify-content: space-between;
            cursor: pointer;
        }

            footer .accordion #prompt-heading span {
                font-size: 0.8rem;
                font-style: italic;
                color: #888;
                display: flex;
                align-items: center;
                text-align: center;
            }

                footer .accordion #prompt-heading span img {
                    transition: all ease-in 0.25s;
                }

            footer .accordion #prompt-heading.collapsed p {
                display: none;
            }

            footer .accordion #prompt-heading.collapsed span {
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }

                footer .accordion #prompt-heading.collapsed span img {
                    transform: rotate(180deg);
                }

        footer .accordion .prompt-suggestions {
            padding: 0 0rem;
            margin-bottom: 1rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 1rem;
        }

            footer .accordion .prompt-suggestions .suggested-prompt {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.75rem;
                border-radius: 0.75rem;
                border: 1px solid #48474B;
                background: #F7F8FA;
            }

                footer .accordion .prompt-suggestions .suggested-prompt:hover {
                    background: #FFF;
                    cursor: pointer;
                    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
                }

                    footer .accordion .prompt-suggestions .suggested-prompt:hover p {
                        color: #141414;
                    }

                    footer .accordion .prompt-suggestions .suggested-prompt:hover .send-btn {
                        background: url(/img/aiChatAssistant/send-2.png) no-repeat center;
                    }

                footer .accordion .prompt-suggestions .suggested-prompt p {
                    color: #626262;
                    font-size: 0.875rem;
                    font-weight: 400;
                    line-height: 1.1rem;
                    font-family: Roboto;
                    padding-right: 10px;
                }

.selection-question p {
    text-align: left !important;
    color: #646464;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

footer .accordion .prompt-suggestions .suggested-prompt .send-btn {
    height: 100%;
    width: 30px;
    background: url(/img/aiChatAssistant/send.png) no-repeat center;
}

footer .prompt-container {
    display: flex;
    justify-content: center;
}

    footer .prompt-container .prompt {
        display: flex;
        align-items: center;
        border-radius: 0.75rem;
        border: 1px solid #CBCBCB;
        background: #FFF;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
        padding-top: 8px;
        padding-right: 1rem;
        padding-bottom: 8px;
        padding-left: 1rem;
    }

        footer .prompt-container .prompt textarea {
            width: 100%;
            border: none;
            resize: none;
            border-radius: 0.375rem;
            outline: 0;
            padding-right: 1.5rem;
        }

        footer .prompt-container .prompt .send-btn {
            width: 36px;
            height: 36px;
            background: url(/img/aiChatAssistant/send.png) no-repeat center;
            cursor: pointer;
        }

            footer .prompt-container .prompt .send-btn:hover {
                background: #fafafa url(/img/aiChatAssistant/send-2.png) no-repeat center;
                border-radius: 0 0.75rem 0.75rem 0;
                cursor: pointer;
            }

footer .invalid-text {
    font-size: 0.75rem;
    color: red;
}

footer .copyright {
    font-size: 0.75rem;
    color: #828282;
    text-align: center;
    padding: 0.75rem 0;
    background: #F7F8FA;
    font-family: Roboto;
}
/*Breaking*/
/*.loader {
    width: 24px;
    display: flex;
    justify-content: space-between;
    height: 24px;
}

    .loader span {
        width: 5px;
        height: 5px;
        border-radius: 3px;
        background: #343434;
        align-self: center;
    }

        .loader span:nth-child(1) {
            animation: opacitychange 1.1s ease-in-out 0.1s infinite;
        }

        .loader span:nth-child(2) {
            animation: opacitychange 1.1s ease-in-out 0.3s infinite;
        }

        .loader span:nth-child(3) {
            animation: opacitychange 1.1s ease-in-out 0.7s infinite;
        }

@keyframes opacitychange {
    0%, 100% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }
}*/

@media (max-width: 1399.98px) {
    .content .chat-welcome {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4%;
        height: 2px;
    }

        .content .chat-welcome .ai-image {
            width: 114px;
            margin-left: 1rem;
        }

        .content .chat-welcome h2 {
            text-transform: uppercase;
            margin: 3rem 1rem 0 0;
            color: #333E48;
            text-align: center;
            font-feature-settings: 'clig' off, 'liga' off;
            font-family: Roboto;
            font-size: 34px;
            font-style: normal;
            font-weight: 300;
            line-height: 60px;
            font-variant: small-caps;
            letter-spacing: -0.5px;
        }
}

/* Typing indicator dots animation */
.typing-indicator .typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
}

.typing-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #6b7280;
    animation: typing-pulse 1.4s ease-in-out infinite both;
}

.typing-indicator .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-indicator .dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes typing-pulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}