#eau-mensajero {
position: fixed;
bottom: 0;
right: 50px;
width: 100%;
max-height: 450px; max-width: 300px;
border: 1px solid #CCC;
background: #F9F9F9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 0 0;
overflow: hidden;
z-index: 9999;
font-family: Arial, sans-serif;
}
#mensajero-header {
background: #666;
color: #FFF;
padding: 8px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px 5px 0 0;
}
#mensajero-cuerpo {
display: block;
padding: 10px;
height: 400px; overflow-y: auto;
background: #FFF;
border: 1px solid #CCC;
border-top: none;
transition: max-height 0.3s;
border-radius: 0 0 5px 5px;
}
#eau-mensajero.minimizado #mensajero-cuerpo {
display: none;
}
#mensajero-minimizar {
background: #F0F0F0 !important;
color: black !important;
font-family: Arial, sans-serif;
padding: 1px 6px !important;
} #mensajero-mensajes {
height: 300px; overflow-y: auto;
margin-bottom: 10px;
border: 1px solid #CCC;
padding: 5px;
background: #F9F9F9;
border-radius: 5px;
}
#mensajero-mensajes strong {
font-weight: bold !important;
}
.mensaje {
margin-bottom: 10px;
display: flex;
align-items: flex-start;
}
.mensaje img.avatar {
border-radius: 50%;
width: 40px;
height: 40px;
margin-right: 10px;
}
.mensaje .contenido {
background: #FFF;
padding: 8px 12px;
border-radius: 5px;
max-width: 80%;
border: 1px solid #CCC;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}
#mensajero-input {
width: 268px;
padding-top: 10px !important;
padding: 5px;
border: 1px solid #CCC;
border-radius: 5px;
background: #FFF;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
color: #333;
resize: none;
}
#mensajero-enviar {
width: 70px;
padding: 5px;
background: #666;
color: #FFF;
border: 1px solid #555;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
transition: background 0.3s;
}
#mensajero-enviar:hover {
background: #555;
}  #mensajero-emoticonos {
display: flex !important;
gap: 10px;
visibility: visible !important;
opacity: 1 !important;
}
#mensajero-emoticonos img {
width: 25px !important;
height: 25px !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
#mensajero-emoticonos img:hover {
transform: scale(1.2);
} .emoticono {
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0 2px;
} @media screen and (max-width: 768px) {
#eau-mensajero {
display: none;
}
}