#aidn{
    position:fixed;
    right:60px;
    bottom:-40px;
    z-index:9999;
    box-sizing:border-box;
    padding:8px 12px;
    img{
        height:16px
    }
}
.aidn_foot{
    box-sizing:border-box;
    float:right;
    margin:6px 32px 0 10px;
    padding:5px 9px;
    img{
        height:14px
    }
}
#aidn,.aidn_foot{
    border-radius:16px;
    color:#fff;
    cursor:pointer;
    transition:bottom 1s,transform .5s;
    background:linear-gradient(270deg, #0a76be, #19c2ab, #1d0bc2);
    background-size:600% 600%;
    animation:aidn_anim 10s ease infinite
}
#aidn:hover,.aidn_foot{
    transform:scale(1.1)
}
@keyframes aidn_anim{
    0%{
        background-position:0% 50%
    }
    50%{
        background-position:100% 50%
    }
    100%{
        background-position:0% 50%
    }
}
[data-login='1'] #aidn{
    bottom:10px;
}

#jlabel_ai, #ai_note{
    background:#DCE6F0;
    color:#000
}

.ai_note{
    position:relative;
    min-width:640px;
    min-height:480px;
    background:#DCE6F0;
    *{
        box-sizing:border-box
    }
    .ai_head{
        font-size:14pt;
        letter-spacing:-1px;
        font-weight:bold;
        padding:12px 16px
    }
    .ai_log{
        position:absolute;
        top:50px;
        left:20px;
        right:20px;
        bottom:100px;
        overflow:auto;
        padding-bottom:40px;
    }
    .ai_foot{
        position:absolute;
        left:16px;
        right:16px;
        bottom:16px;
        textarea{
            display:block;
            width:100%;
            height:60px;
            padding:8px 10px 0 10px
        }
        input{
            width:100%;
            border-radius:0 0 20px 20px
        }
    }
}

.ai_gen{
    background:#DCE6F0;
    color:#000;
    position:relative;
    *{
        box-sizing:border-box
    }
    .ai_log{
        padding:10px 10px 110px 10px
    }
    #jFoot{
        padding:16px;
        background:#DCE6F0;
        color:#000;
        textarea{
            display:block;
            width:100%;
            height:60px;
            padding:8px 10px 0 10px
        }
        input{
            width:100%;
            border-radius:0 0 20px 20px
        }
    }
}

.ai_log{
    font-size:11pt !important;
    line-height:120% !important;
    > div,> pre{
        padding:12px 16px;
        text-wrap:wrap
    }
    .ai_ask{
        border-radius:20px 20px 0 0;
        background:#D4D4FF;
        text-align:right
    }
    .ai_resp,.ai_load{
        margin:0 0 20px 0;
        border-radius:0 0 20px 20px;
        background:#fff;
        i{
            color:gray
        }
    }
    .ai_load{
        div{
            display:inline-block;
            height:8px;
            width:8px;
            border-radius:8px;
            background:#000;
            margin:0 8px 0 0;
            opacity:.2;
            &:nth-child(1){
                animation:ai_load 2s ease infinite
            }
            &:nth-child(2){
                animation:ai_load 2s ease infinite;
                animation-delay:.3s
            }
            &:nth-child(3){
                animation:ai_load 2s ease infinite;
                animation-delay:.6s
            }
        }
    }
    .ai_code{
        margin:0;
        padding:12px 16px;
        background:lightgray
    }
    .ai_error{
        margin:0 0 20px 0;
        border-radius:0 0 20px 20px;
        background:#cc0000;
        color:#fff
    }
    .ai_green{
        margin:0 0 20px 0;
        border-radius:0 0 20px 20px;
        background:#DCFFDC
    }
}
@keyframes ai_load{
    0%{
        opacity:.2
    }
    33%{
        opacity:.4
    }
    66%{
        opacity:.6
    }
    100%{
        opacity:.4
    }
}

.ai_rec{
    position:absolute;
    top:0;
    right:0;
    font-size:0;
    padding:0;
    background:silver;
    box-shadow:0 0 0 rgba(0,0,0,0);
    border:0px solid #000;
    border-radius:50%;
    cursor:pointer;
    transition:all .5s
}
.ai_rec:hover{
    font-size:14pt;
    padding:12px;
    background:lime;
    box-shadow:8px 8px 8px rgba(0,0,0,.5);
    border:2px solid #000;
}
.ai_foot:hover .ai_rec, #jFoot:hover .ai_rec{
    top:-20px;
    font-size:12pt;
    padding:8px;
    background:silver;
    box-shadow:16px 16px 16px rgba(0,0,0,.5);
    border:1px solid #000;
}

/*css for V3 AI*/
    /*will need to check after if the css above has any similarities that we can use instead*/

.ai_v3_body_light {
    background: #DCE6F0;
}
.ai_v3_body_dark {
    background: #2C3E50;
}

.ai_v3_header {
    font-size: 14pt;
    letter-spacing: -1px;
    font-weight: bold;
}

ai_v3_request {
    font-size: 11pt !important;
    line-height: 120% !important;
    padding: 12px 16px;
    word-wrap: break-word;
    white-space: normal;
}