/*======================================================
 * VOICE CHAT
 * Version 1.3
 * Ostad Abjad
 * دردش مع أبجد
 *======================================================*/


/*======================================================
 * PAGE
 *======================================================*/

#oab-voice-chat-page {

    width:100%;
    height:100%;

    min-height:0;

    box-sizing:border-box;

    direction:rtl;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #fffef8 55%,
            #fffbea 100%
        );

}


/*======================================================
 * MAIN SHELL
 *======================================================*/

.oab-voice-chat-shell {

    width:100%;
    height:100%;

    min-height:0;

    display:flex;

    flex-direction:column;

    box-sizing:border-box;

    padding:12px 18px 10px;

    text-align:center;

    overflow:hidden;

}


/*======================================================
 * CONVERSATION AREA
 *======================================================*/

.oab-voice-chat-transcript {

    order:1;

    width:min(900px, 100%);

    flex:1 1 auto;

    min-height:0;

    margin:0 auto 12px;

    padding:6px 4px 14px;

    box-sizing:border-box;

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

    scrollbar-width:none;

    -ms-overflow-style:none;

    scroll-behavior:smooth;

}


.oab-voice-chat-transcript::-webkit-scrollbar {

    width:0;
    height:0;

    display:none;

}


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

.oab-voice-welcome-message {

    width:100%;

    margin-bottom:12px;

    padding:16px 22px;

    box-sizing:border-box;

    background:#ffffff;

    border:2px solid #f1df9f;

    border-radius:22px;

    color:#526158;

    font-size:clamp(16px, 1.8vw, 20px);

    font-weight:700;

    line-height:1.8;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.06);

}


/*======================================================
 * MAIN MICROPHONE
 *======================================================*/

.oab-voice-main-mic {

    order:2;

    position:relative;

    width:104px;
    height:104px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    margin:0 auto 12px;

    padding:0;

    border:6px solid #ffffff;

    border-radius:50%;

    background:#178b4b;

    cursor:pointer;

    box-shadow:
        0 0 0 4px #dff3e6,
        0 10px 26px rgba(23,139,75,.24);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.oab-voice-main-mic:hover {

    transform:scale(1.04);

    box-shadow:
        0 0 0 5px #dff3e6,
        0 14px 30px rgba(23,139,75,.28);

}


.oab-voice-main-mic:active {

    transform:scale(.96);

}


/*======================================================
 * MICROPHONE / STOP ICON
 *======================================================*/

.oab-voice-main-mic-icon {

    display:block;

    color:#ffffff;

    font-size:50px;

    line-height:1;

}


/*======================================================
 * LISTENING STATE
 *======================================================*/

.oab-voice-main-mic.is-listening {

    box-shadow:
        0 0 0 8px rgba(23,139,75,.15),
        0 0 0 16px rgba(23,139,75,.08),
        0 12px 28px rgba(23,139,75,.28);

}


/*======================================================
 * BACK BAR
 *======================================================*/

.oab-voice-chat-back {

    order:3;

    width:100%;

    flex:0 0 auto;

    margin:0;

    padding:10px 16px;

    box-sizing:border-box;

    border:0;
    border-radius:0;

    background:#178b4b;

    color:#ffffff;

    font-family:inherit;
    font-size:16px;
    font-weight:800;

    line-height:1.4;

    text-align:center;

    cursor:pointer;

    box-shadow:none;

}


.oab-voice-chat-back:hover {

    background:#137a41;

    color:#ffffff;

}


.oab-voice-chat-back:active {

    transform:none;

}


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

@media (max-width:600px) {

    .oab-voice-chat-shell {

        padding:
            10px
            10px
            8px;

    }


    .oab-voice-chat-transcript {

        width:100%;

        margin-bottom:10px;

        padding:
            4px
            2px
            10px;

    }


    .oab-voice-welcome-message {

        padding:13px 15px;

        border-radius:18px;

        font-size:16px;

        line-height:1.7;

    }


    .oab-voice-main-mic {

        width:92px;
        height:92px;

        margin-bottom:12px;

        border-width:5px;

    }


    .oab-voice-main-mic-icon {

        font-size:44px;

    }


    .oab-voice-chat-back {

        font-size:16px;

    }

}


/*======================================================
 * SHORT LAPTOP
 *======================================================*/

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

    .oab-voice-chat-shell {

        padding:
            8px
            16px
            6px;

    }


    .oab-voice-chat-transcript {

        margin-bottom:8px;

        padding-bottom:8px;

    }


    .oab-voice-welcome-message {

        padding:12px 18px;

        margin-bottom:10px;

        line-height:1.6;

    }


    .oab-voice-main-mic {

        width:84px;
        height:84px;

        margin-bottom:12px;

        border-width:5px;

    }


    .oab-voice-main-mic-icon {

        font-size:40px;

    }

}

/*======================================================
 * STOP ICON - DESKTOP CENTER FIX
 *======================================================*/

@media (min-width:601px) {

    .oab-voice-main-mic-icon {
        transform: translateY(-3px);
    }

}

/*======================================================
 * HEADER SPACE FIX
 *======================================================*/

/* الكمبيوتر والتابلت */
body.oab-header-active #oab-voice-chat-page{

    padding-top:60px;

    box-sizing:border-box;

}


/* الهاتف */
@media (max-width:768px){

    body.oab-header-active #oab-voice-chat-page{

        padding-top:52px;

    }

}