/*======================================================*
* CHAT
* Mishkaty
* Version 8.7
* Cairo Font
* Green Lesson Question
*======================================================*/


/*======================================================*
* CHAT AREA
*======================================================*/

#oab-chat{

    position:relative;

    width:100%;
    height:100%;

    padding:0;

    background-color:#FFFDE9;

    background-image:url("../images/oab-pattern.png");
    background-repeat:repeat;
    background-size:300px;
    background-position:center top;

    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:none;
    -ms-overflow-style:none;

    scroll-padding-top:96px;

    box-sizing:border-box;

    font-family:
        "Cairo",
        sans-serif;

}


#oab-chat::-webkit-scrollbar{

    display:none;

}


/*======================================================*
* CHAT CONTAINER
*======================================================*/

#oab-chat .oab-chat-container{

    width:100%;

    max-width:1480px;

    margin:0 auto;

    box-sizing:border-box;

}


/*======================================================*
* MESSAGES
*======================================================*/

#oab-chat #oab-messages{

    position:relative;

    z-index:1;

    width:100%;

    display:flex;
    flex-direction:column;

    gap:16px;

    margin:0;

    padding-top:96px;
    padding-bottom:16px;

    box-sizing:border-box;

}


/*======================================================*
* MESSAGE
*======================================================*/

#oab-chat .oab-message{

    width:100%;

    display:flex;

    box-sizing:border-box;

    animation:oabFade .25s ease;

}


/*======================================================*
* ASSISTANT
*======================================================*/

#oab-chat .oab-message.ai{

    justify-content:flex-start;

}


/*======================================================*
* USER
*======================================================*/

#oab-chat .oab-message.user{

    justify-content:flex-end;

}


/*======================================================*
* BUBBLE
*======================================================*/

#oab-chat .oab-bubble{

    position:relative;

    z-index:2;

    width:auto;
    max-width:78%;

    padding:12px 16px;

    border-radius:20px;

    font-family:
        "Cairo",
        sans-serif !important;

    font-size:16px;

    font-weight:500;

    line-height:1.7;

    word-break:normal;
    overflow-wrap:anywhere;
    white-space:normal;

    box-sizing:border-box;

    box-shadow:
        0 4px 14px
        rgba(0,0,0,.07);

}


/*======================================================*
* ASSISTANT BUBBLE
*======================================================*/

#oab-chat .oab-message.ai .oab-bubble{

    background:#FFFFFF;

    color:#23364A;

    border:
        1px solid
        rgba(23,130,69,.08);

    border-radius:
        20px 20px 20px 7px;

}


/*======================================================*
* USER BUBBLE
*======================================================*/

#oab-chat .oab-message.user .oab-bubble{

    background:#178245;

    color:#FFFFFF;

    border-radius:
        20px 20px 7px 20px;

}


/*======================================================*
* CAIRO FONT
*======================================================*/

#oab-chat,
#oab-chat *,
#oab-chat button,
#oab-chat input,
#oab-chat textarea,
#oab-chat select{

    font-family:
        "Cairo",
        sans-serif !important;

}


/*======================================================*
* ANIMATION
*======================================================*/

@keyframes oabFade{

    from{

        opacity:0;

        transform:
            translateY(8px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/*======================================================*
* LESSON QUESTION
*======================================================*/

#oab-choice-question{

    width:min(
        900px,
        calc(100% - 24px)
    ) !important;

    margin:
        0 auto 18px !important;

    box-sizing:border-box;

}


/*======================================================*
* QUESTION BOX
* أخضر + كتابة بيضاء
*======================================================*/

#oab-choice-question > div:first-child{

    background:#178245 !important;

    color:#FFFFFF !important;

    border:0 !important;

    box-shadow:
        0 5px 16px
        rgba(23,130,69,.18) !important;

}


/*======================================================*
* QUESTION TEXT
*======================================================*/

#oab-choice-question > div:first-child,
#oab-choice-question > div:first-child *{

    color:#FFFFFF !important;

    font-family:
        "Cairo",
        sans-serif !important;

}


/*======================================================*
* CHOICE ANSWERS
* DESKTOP / LAPTOP
*======================================================*/

#oab-choice-question > div:last-child{

    display:grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    gap:10px !important;

}


/*======================================================*
* CHOICE BUTTON
*======================================================*/

#oab-choice-question > div:last-child button{

    width:100% !important;

    min-width:0 !important;

    min-height:58px !important;

    padding:10px 16px !important;

    box-sizing:border-box !important;

    background:#FFFFFF !important;

    color:#178245 !important;

    border:
        2px solid
        #178245 !important;

    font-family:
        "Cairo",
        sans-serif !important;

    font-size:17px !important;

    font-weight:700 !important;

    line-height:1.6 !important;

    white-space:normal !important;

    overflow-wrap:anywhere !important;

    word-break:normal !important;

    text-align:center !important;

}


/*======================================================*
* LARGE DESKTOP
*======================================================*/

@media (min-width:1600px){

    #oab-chat .oab-chat-container{

        max-width:1480px;

    }


    #oab-chat .oab-bubble{

        max-width:78%;

        padding:12px 16px;

        font-size:16px;

        line-height:1.7;

    }

}


/*======================================================*
* LAPTOP / NORMAL DESKTOP
*======================================================*/

@media (min-width:769px) and (max-width:1599px){

    #oab-chat .oab-chat-container{

        max-width:1180px;

    }


    #oab-chat .oab-bubble{

        max-width:78%;

        padding:12px 16px;

        font-size:16px;

        line-height:1.7;

    }

}


/*======================================================*
* MOBILE
* كل إجابة في سطر مستقل
*======================================================*/

@media (max-width:768px){

    #oab-chat{

        background-size:240px;

        scroll-padding-top:57px;

    }


    #oab-chat .oab-chat-container{

        width:100%;

        max-width:100%;

    }


    #oab-chat #oab-messages{

        gap:12px;

        padding-top:57px;
        padding-bottom:12px;

    }


    #oab-chat .oab-bubble{

        max-width:94%;

        padding:11px 13px;

        font-size:16px;

        line-height:1.7;

        border-radius:18px;

        box-shadow:
            0 3px 10px
            rgba(0,0,0,.07);

    }


    #oab-chat .oab-message.ai .oab-bubble{

        border-radius:
            18px 18px 18px 6px;

    }


    #oab-chat .oab-message.user .oab-bubble{

        border-radius:
            18px 18px 6px 18px;

    }


    #oab-choice-question > div:last-child{

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:10px !important;

    }

}


/*======================================================*
* SMALL MOBILE
*======================================================*/

@media (max-width:420px){

    #oab-chat .oab-bubble{

        max-width:94%;

        padding:11px 13px;

        font-size:16px;

        line-height:1.7;

    }

}