/* Predefined Questions Container */
/*.predefined-questions-list {*/
/*    padding: 20px;*/
/*    background-color: #FFF;*/
/*    border-top: 1px solid #ddd;*/
/*    animation: fadeIn 0.3s ease-in;*/
/*    max-height: 100px;*/
/*    overflow-y: scroll;*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    bottom: 75px;*/
/*}*/

/*.predefined-questions-list.fade-out {*/
/*    opacity: 0;*/
/*    transform: translateY(-10px);*/
/*}*/
/*@keyframes fadeIn {*/
/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(10px);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/*!* Category Title *!*/
/*.category-title {*/
/*    font-size: 16px;*/
/*    font-weight: bold;*/
/*    margin-bottom: 10px;*/
/*    color: #333;*/
/*}*/

/*!* Group of questions under each category *!*/
/*.question-group {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 15px;*/
/*    margin-bottom: 20px;*/
/*}*/

/*!* Individual question button *!*/
/*.predefined-question {*/
/*    display: inline-block;*/
/*    background-color: #0078d4;*/
/*    color: #fff;*/
/*    border: none;*/
/*    padding: 10px 20px;*/
/*    border-radius: 25px;*/
/*    font-size: 14px;*/
/*    cursor: pointer;*/
/*    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
/*    transition: background-color 0.2s ease, box-shadow 0.2s ease;*/
/*}*/

/*.predefined-question:hover {*/
/*    background-color: #005a9e;*/
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
/*}*/

/* Fade-out animation for container */
.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.predefined-questions-container {
    position: relative;
    font-family: var(--wp--preset--font-family--body);
    display: none;

    * {
        font-family: var(--wp--preset--font-family--body);
    }

    &.show {
        display: block;
    }

    #predefined-questions-list {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;

        .question-category {
            position: relative;

            h2,h3,h4,h5,h6 {
                font-size: 10px;
                text-transform: uppercase;
                padding: 0 0 0 11px;
                margin: 0;
                color: #7E7E7E;
            }

            .question-group {
                display: flex;
                flex-direction: column;
                gap: 9px;
                margin-top: 9px;

                .predefined-question {
                    padding: 8px 10px;
                    align-items: center;
                    border-radius: 20px;
                    border: 1px solid #5246FF;
                    background: #fff;
                    font-size: 12px;
                    font-weight: 400;
                    transition: .34s cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    cursor: pointer;

                    &:hover {
                        background: #5246FF;
                        color: #fff;
                    }
                }
            }
        }
    }
}

.input-box {
    position: relative;

    .toggle-pq {
        position: absolute;
        right: 8px;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: fit-content;
        height: fit-content;
        cursor: pointer;
        transition: .34s cubic-bezier(0.215, 0.610, 0.355, 1.000);

        .toggle-pq-tooltip {
            position: absolute;
            left: -85px;
            top: -20px;
            font-size: 9px;
            background: #EDEDED;
            color: #000;
            padding: 4px;
            border-radius: 7px;
            width: fit-content;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: .34s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        &:hover {
            transform: scale(1.1, 1.1);

            .toggle-pq-tooltip {
                opacity: 1;
                visibility: visible;
                left: -80px;
                top: -25px;
            }
        }
    }
}

.theme-dark {

    .predefined-questions-container {

        .predefined-question {
            border: 1px solid #FFF!important;
            background: #222!important;
            color: #fff!important;

            &:hover {
                background: #fff!important;
                color: #222!important;
            }
        }
    }

    .input-box {

        .toggle-pq {

            svg {

                .ai-bg-pq {
                    fill: #484848;
                    stroke: #fff;
                }

                .ai-star-pq {
                    fill: #fff;
                }
            }

            .toggle-pq-tooltip {
                background: #222!important;
                color: white!important;
            }
        }
    }
}