body{
    background:#f4f6fb;
    min-height:100vh;
}

.auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.auth-card{
    width:100%;
    max-width:420px;
    border:none;
    border-radius:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.brand{
    font-size:28px;
    font-weight:700;
    color:#0d6efd;
}

.chat-navbar{
    box-shadow:0 2px 15px rgba(0,0,0,.08);
}

.chat-container{
    max-width:1000px;
    margin:auto;
    padding:15px;
}

.chat-box{
    height:65vh;
    overflow-y:auto;
    background:white;
    border-radius:20px;
    padding:15px;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.message-row{
    margin-bottom:12px;
}

.msg-self{
    text-align:right;
}

.msg-bubble{
    display:inline-block;
    max-width:85%;
    padding:12px 15px;
    border-radius:18px;
    word-wrap:break-word;
}

.msg-me{
    background:#0d6efd;
    color:white;
}

.msg-other{
    background:#e9ecef;
    color:#212529;
}

.chat-input{
    background:white;
    border-radius:20px;
    padding:10px;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.user-card{
    border:none;
    border-radius:16px;
    margin-bottom:10px;
}

.online-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#28a745;
    display:inline-block;
}

@media(max-width:768px){

.chat-box{
    height:60vh;
}

.msg-bubble{
    max-width:95%;
}

}