/* ==========================
   Mobile Responsive
========================== */

@media screen and (max-width:768px){

    body{
        height:auto;
        display:block;
    }

    .app-container{
        width:100%;
        height:100vh;
        gap:0;
    }

    .sidebar{
        display:none;
    }

    .container{
        width:100%;
        max-width:100%;
        height:100vh;
        border-radius:0;
    }

    .header{
        padding:15px;
    }

    .header h1{
        font-size:24px;
    }

    #modeSelect{
        width:100%;
        margin-top:12px;
    }

    .chat-area{
        padding:15px;
    }

    .message{
        max-width:90%;
        font-size:15px;
    }

    .input-area{
        padding:12px;
    }

    .input-container{
        gap:8px;
    }

    button{
        width:45px;
        height:45px;
        font-size:18px;
    }

}