/*======================================================*
* INPUT
* Ostad Abjad AI
* Version 8.0
*======================================================*/


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

#oab-input{

    width:100%;

    padding:12px 16px 16px;

    background:#FFFDE9;

    flex-shrink:0;

    box-sizing:border-box;

}


/*======================================================*
* CARD
*======================================================*/

.oab-input-card{

    width:100%;

    max-width:1180px;

    margin:0 auto;

    background:#FFFFFF;

    border:1px solid #DDD7BC;

    border-radius:22px;

    overflow:hidden;

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

    transition:.2s ease;

}


.oab-input-card:focus-within{

    border-color:#178245;

    box-shadow:
        0 0 0 3px rgba(23,130,69,.08);

}


/*======================================================*
* TEXTAREA
*======================================================*/

#oab-message{

    display:block;

    width:100%;

    min-height:72px;
    max-height:160px;

    border:none;
    outline:none;
    resize:none;

    overflow-y:auto;

    padding:14px 18px;

    background:#FFFEF8;

    color:#23364A;

    font-family:inherit;

    font-size:17px;

    line-height:1.6;

    letter-spacing:0;

    caret-color:#178245;

    box-sizing:border-box;

}


#oab-message::placeholder{

    color:#969696;

}


/*======================================================*
* TOOLBAR
*======================================================*/

.oab-toolbar{

    min-height:58px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 12px;

    border-top:1px solid #CFE8C8;

    background:#EAF7E6;

    box-sizing:border-box;

}


.oab-toolbar-spacer{

    flex:1;

}


/*======================================================*
* TOOLS
*======================================================*/

.oab-tool{

    width:42px;
    height:42px;

    flex:0 0 42px;

    border:none;

    border-radius:50%;

    display:flex;

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

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease;

}


#oab-attach{

    background:#9C27B0;

}


#oab-camera{

    background:#2196F3;

}


#oab-mic{

    background:#4CAF50;

}


.oab-tool svg{

    width:20px;
    height:20px;

    stroke:#FFFFFF;

    stroke-width:2.3;

}


#oab-attach:hover{

    background:#8E24AA;

    transform:translateY(-2px);

}


#oab-camera:hover{

    background:#1E88E5;

    transform:translateY(-2px);

}


#oab-mic:hover{

    background:#43A047;

    transform:translateY(-2px);

}


/*======================================================*
* SEND
*======================================================*/

#oab-send{

    width:42px !important;
    height:42px !important;

    flex:0 0 42px;

    border:none;

    border-radius:50%;

    background:#178245;

    display:flex;

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

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease;

}


#oab-send svg{

    width:20px;
    height:20px;

    stroke:#FFFFFF;

    stroke-width:2.5;

}


#oab-send:hover{

    background:#136B39;

    transform:scale(1.06);

}


/*======================================================*
* FONT AWESOME
*======================================================*/

.oab-tool i{

    color:#FFFFFF;

    font-size:19px;

}


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

@media (max-width:768px){

    #oab-input{

        padding:8px 10px 12px;

    }


    .oab-input-card{

        max-width:100%;

        border-radius:20px;

    }


    #oab-message{

        min-height:86px;
        max-height:150px;

        padding:14px 15px;

        font-size:16px;

        line-height:1.55;

    }


    .oab-toolbar{

        min-height:56px;

        gap:7px;

        padding:7px 10px;

    }


    .oab-tool,
    #oab-send{

        width:40px !important;
        height:40px !important;

        flex-basis:40px;

    }


    .oab-tool svg,
    #oab-send svg{

        width:19px;
        height:19px;

    }

}


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

@media (max-width:420px){

    #oab-input{

        padding:7px 8px 10px;

    }


    #oab-message{

        min-height:82px;

        font-size:15px;

    }


    .oab-toolbar{

        gap:6px;

        padding:7px 8px;

    }


    .oab-tool,
    #oab-send{

        width:38px !important;
        height:38px !important;

        flex-basis:38px;

    }

}