CSS - Ayuda con CSS

Hola buen día.

el día de hoy me encontré un detalle que no pedo con el ya que el CSS no es mi mejor practica pero me adapto a todo.

estoy incorporando un botón de WhatsApp desde el repositorio de GitHub, https://github.com/jerfeson/floating-whatsapp/tree/avatar
este me agrado por su simplicidad pero a la hora de personalizar y validar el código CSS en W3C me sale con que tiene un par de errores que no puedo solucionar

URI : TextArea
26 Error de análisis sintáctico [ : hover]
29 Error de análisis sintáctico [ : hover .floating-wpp-button]

Este es el código CSS el cual no eh modificado es el mismo del GitHub.

.floating-wpp {
position : fixed;
bottom : 15px;
left : 15px;
font-size : 14px;
transition : bottom .2s
}
.floating-wpp .floating-wpp-button {
position : relative;
border-radius : 50%;
box-shadow : 1px 1px 4px rgba(60, 60, 60, 0.4);
transition : box-shadow .2s;
cursor : pointer;
overflow : hidden
}
.floating-wpp .floating-wpp-button img, .floating-wpp .floating-wpp-button svg {
position : absolute;
width : 100%;
height : auto;
object-fit : cover;
top : 50%;
left : 50%;
transform : translate3d(-50%, -50%, 0);
border-radius : 50%
}
.floating-wpp : hover {
bottom : 17px
}
.floating-wpp : hover .floating-wpp-button {
box-shadow : 1px 2px 8px rgba(60, 60, 60, 0.4)
}
.floating-wpp .floating-wpp-popup {
border-radius : 6px;
background-color : #e5ddd5;
position : absolute;
overflow : hidden;
padding : 0;
box-shadow : 1px 2px 8px rgba(60, 60, 60, 0.25);
width : 0;
height : 0;
bottom : 0;
opacity : 0;
transition : bottom .1s ease-out, opacity .2s ease-out;
transform-origin : bottom
}
.floating-wpp .floating-wpp-popup.active {
padding : 0 12px 12px 12px;
width : 260px;
height : auto;
bottom : 82px;
opacity : 1
}
.floating-wpp .floating-wpp-popup .floating-wpp-message {
background-color : white;
padding : 8px;
border-radius : 0 5px 5px 5px;
box-shadow : 1px 1px 1px rgba(0, 0,0, 0.15);
opacity : 0;
transition : opacity .2s
}
.floating-wpp .floating-wpp-popup.active .floating-wpp-message {
opacity : 1;
transition-delay : .2s
}
.floating-wpp .floating-wpp-popup .floating-wpp-head {
text-align : right;
color : white;
margin : 0 -15px 10px -15px;
padding : 6px 12px;
display : flex;
justify-content : space-between;
cursor : pointer
}
.floating-wpp .floating-wpp-input-message {
background-color : white;
margin : 10px -15px -15px -15px;
padding : 0 15px;
display : flex;
align-items : center
}
.floating-wpp .floating-wpp-input-message textarea {
border : 1px solid #ccc;
border-radius : 4px;
box-shadow : none;
padding : 8px;
margin : 10px 0;
width : 100%;
max-width : 100%;
font-family : inherit;
font-size : inherit;
resize : none
}
.floating-wpp .floating-wpp-btn-send {
margin-left : 12px;
font-size : 0;
cursor : pointer
}
.floating-wpp-avatar {
vertical-align : middle;
width : 50px;
height : 50px;
border-radius : 50%;
margin : 10px 0 10px 10px
}
.floating-wpp-avatar-info {
color : white;
margin : 10px 80px 0 10px;
text-align : left
}
.floating-wpp-avatar-name {
font-weight : bold;
font-size : 16px
}

agradecería su apoyo para corregir este error de las líneas 26 y 29 se que muchos me indicaran que lo deje así pero les agradecería su apoyo para aprender mas sobre este error.

Hola buenas parece que para el atributo hover en w3c se debe poner todo junto sin separaciones

Hola, buen día te agradezco tu apoyo y si la verdad no había notado este detalle.
nuevamente muchas gracias por tu respuesta la cual es muy acertada y concreta.

hasta pronto.