.chat-toggle{

    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    cursor:pointer;

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

}

.chat-box{

    position:fixed;

    right:30px;

    bottom:100px;

    width:350px;

    height:500px;

    background:white;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    display:none;

    flex-direction:column;

}

.chat-header{

    background:#2563eb;

    color:white;

    padding:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-weight:bold;

}

.chat-body{

    flex:1;

    padding:15px;

    overflow-y:auto;

}

.bot-message{

    background:#f1f5f9;

    padding:10px;

    border-radius:8px;

    margin-bottom:10px;

}

.user-message{

    background:#2563eb;

    color:white;

    padding:10px;

    border-radius:8px;

    margin-bottom:10px;

    text-align:right;

}

.chat-footer{

    display:flex;

    padding:10px;

}

.chat-footer input{

    flex:1;

    padding:10px;

}

.chat-footer button{

    margin-left:10px;

}

.login-container{

    height:90vh;

    display:flex;

    justify-content:center;

    align-items:center;

}

.login-card{

    width:400px;

    background:white;

    padding:35px;

    border-radius:10px;

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

}

.login-card h2{

    margin-bottom:10px;

}

.login-card p{

    margin-bottom:20px;

}

.login-card input{

    width:100%;

    padding:12px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:6px;

}

.login-card button{

    width:100%;

    padding:12px;

    background:#2563eb;

    color:white;

    border:none;

    border-radius:6px;

    cursor:pointer;

}

.login-card button:hover{

    background:#1d4ed8;

}

#message{

    margin-top:15px;

    color:red;

}