*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}


body{
    background:#050505;
    color:white;
}


.contenedor{
    width:95%;
    max-width:900px;
    margin:20px auto;
    background:#111;
    padding:15px;
    border-radius:15px;
    border:2px solid #00ff66;
}


h2{
    text-align:center;
    color:#00ff66;
    margin-bottom:20px;
    font-size:26px;
}


.login{
    display:flex;
    gap:10px;
}


.login input{
    flex:1;
    padding:12px;
    border-radius:8px;
    border:0;
    font-size:16px;
}


.login button{
    padding:12px 25px;
    background:#00ff66;
    border:0;
    border-radius:8px;
    font-weight:bold;
}


#mensajes{
    height:400px;
    overflow-y:auto;
    background:#000;
    padding:15px;
    border-radius:12px;
    border:1px solid #00ff66;
}


/* MENSAJES */

.mensaje{

    background:#111;
    border-left:4px solid #00ff66;
    padding:10px;
    margin-bottom:10px;
    border-radius:8px;

}


.cabecera{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;

}


.usuario{

    color:#00ff66;
    font-weight:bold;
    font-size:16px;

}


.hora{

    color:#aaa;
    font-size:12px;

}


.texto{

    color:white;
    font-size:16px;
    line-height:1.4;

}


/* ENVIO */

.enviar{

    display:flex;
    gap:8px;
    margin-top:10px;

}


#emoji-btn{

    width:45px;
    height:42px;
    background:#00ff66;
    border:0;
    border-radius:8px;
    font-size:22px;

}


#mensaje{

    flex:1;
    height:42px;
    padding:10px;
    border-radius:8px;
    border:0;
    font-size:16px;

}


#enviar{

    background:#e60000;
    color:white;
    border:0;
    border-radius:8px;
    padding:0 20px;
    font-weight:bold;

}


@media(max-width:600px){

.cabecera{

    display:block;

}

.hora{

    display:block;
    margin-top:3px;

}

#mensajes{

    height:350px;

}

}