Whatsapp responsiveness by NaN-NaN-sempai

/* ==UserStyle==
@name           web.whatsapp.com
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("web.whatsapp.com") {
    body[data-wmcoo_region="right"] {
        .two {
            flex-direction: row-reverse;
        }
    }
    
    #app .two  {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        top: 0;
        
        ._aigw {
            overflow: hidden;
            
            ._ak8n {
                border-bottom: 2px solid #202c33;
            }
        }
    
        ._ak9y {
            scrollbar-width: none;
        }
    }
    
    ._aiwn header.xn6708d:has(._ajv7 .xurb0ha[aria-label=Conversas][aria-selected=true]) {  
        transition: width .5s, padding .5s, background .5s;
        & * {
            transition: opacity .4s;
        }
        
        &:not(:hover) {
            background: #202c33;
            width: 0px;
            padding: 0;
            
            & * {
                opacity: 0;
            }
        }
    }
}
body:has(.two ._aigw:hover):has(._ajv7 .xurb0ha[aria-label=Conversas][aria-selected=true]) ._aiwn header.xn6708d {
    width: 12px !important;
}
body:has(._ajv7 .xurb0ha[aria-label=Conversas][aria-selected=false]) .two ._aigw  {
    flex: 0 0 45%;
    
    .xj8l9r2 {
        opacity: 1;
    }
}

.app-wrapper-web ._aigs:not(._as6h) {   
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-shadow: none;
}

@media (max-width: 880px) {
    .x1o095ql {
        width: auto;
    }
    ._aigs {
        min-width: 100vw;
    }
    
    
}

@media screen and (max-width: 900px) {
    .two ._ak1r .xh9ts4v.x1k6rcq7.x6prxxf {
        overflow: hidden;
    }
    .two ._aigw {
        flex: 0 0 76px;
        transition: flex .5s;
        
        ._ak72:has(._ahlk .x7h3shv) {
            outline: 2px solid #00a884;
            background: #00a88426;
            outline-offset: -4px;
            
            border-radius: 20px;
            
            transition: background .2s, outline .2s;
            
            &:hover {
                
                background: #96b7b026;
                outline: 2px solid #42d2b35e;
            }
        }
        
        
            
        .xj8l9r2 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 0px;
            opacity: 0;
            transition: opacity .5s;
        }
        
        &:hover {
            flex: 0 0 45%;
            
            ._ak8l ._ak8j, .xj8l9r2 {
                opacity: 1;
            }
            
            ._ak8l ._ak8j {
                ._ahlk.false , ._ahlk._ahln {
                    display: inline-block;
                }
            }
        }
        ._ak8h .x150wa6m {
            transition: right .2s;
        }
        &:not(:hover) {
            ._ak8h .x150wa6m {
                right: 33px;
            }
            
            ._ak8o ._ak8i {
                overflow: visible;
                position: relative;
                left: -7px;
            }
            
            ._ak8l ._ak8j {
                position: relative;
                left: -1px;
                
                ._ahlk .x1rg5ohu {
                    position: relative;
                    left: -32px;
                    top: -10px;
                    font-size: 9px;
                    
                    outline: 2px solid #00a884AA; 
                    border: 2px solid #111b21;
                }
                
                ._ahlk.false , ._ahlk._ahln {
                    width: 0;
                    height: 0;
                    display: block;
                    opacity: 0;
                    
                    transition: width .1s, height .1s, opacity .1s;
                }
            }
        }
    }
    
    ._ak9p .x1pi30zi {
        display: none;
    }
}