*{
    box-sizing:border-box;
}


html,body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    font-family:Arial,sans-serif;

    background:#f2f2f2;

}



/* =====================
   DESKTOP CHAT
===================== */


.chat-box{

    width:380px;

    height:550px;

    position:fixed;

    right:20px;
    bottom:20px;


    background:#fff;


    border-radius:15px;


    box-shadow:
    0 5px 25px rgba(0,0,0,.25);


    padding:12px;


    display:flex;

    flex-direction:column;


    overflow:hidden;

}



/* HEADER */


.chat-box h3{

    flex:none;


    margin:0 0 10px;


    padding:14px;


    background:#0088cc;


    color:white;


    border-radius:12px;


    text-align:center;


    font-size:18px;


}



/* CHAT AREA */


#chat{


    flex:1;


    overflow-y:auto;


    background:#f7f7f7;


    padding:12px;


    border-radius:12px;


    margin-bottom:10px;


}



/* MESSAGE */


#chat div{


    max-width:85%;


    padding:10px 12px;


    margin-bottom:10px;


    border-radius:12px;


    word-break:break-word;


    line-height:1.4;


    font-size:14px;


}



/* INPUT */


#message{


    flex:none;


    width:100%;


    height:48px;


    padding:12px;


    border:1px solid #ddd;


    border-radius:12px;


    outline:none;


    font-size:15px;


    margin-bottom:8px;


}



/* BUTTON */


#sendBtn{


    flex:none;


    width:100%;


    height:48px;


    background:#0088cc;


    color:#fff;


    border:none;


    border-radius:12px;


    font-size:16px;


    cursor:pointer;


}



#sendBtn:active{

    transform:scale(.98);

}



/* =====================
      MODE HP
===================== */


@media(max-width:600px){


body{

    background:white;

}



.chat-box{


    position:fixed;


    top:0;

    left:0;

    right:0;

    bottom:0;



    width:100%;


    height:100dvh;


    padding:10px;


    border-radius:0;


    box-shadow:none;


}



/* HEADER */


.chat-box h3{


    font-size:17px;


    padding:13px;


    border-radius:10px;


}



/* CHAT */


#chat{


    flex:1;


    min-height:0;


    margin-bottom:8px;


}



/* INPUT */


#message{


    height:52px;


    font-size:16px;


}



/* BUTTON */


#sendBtn{


    height:52px;


    font-size:16px;


}



/* aman untuk iphone/android notch */

.chat-box{

    padding-bottom:env(safe-area-inset-bottom);

}


}