Stumblechat mobile bigger chat

With 2 different sizes.
換行
/* ==UserStyle==
@name           Stumblechat mobile bigger chat
@namespace      https://greasyfork.org/en/users/1244737
@version        1
@description    With 2 different sizes.
@author         robomoist
@license        MIT
@preprocessor   stylus
@var select chatSize "Chat height" ["Medium", "Big"]
@var select chatSizeW "Chat width" ["Medium", "Big"]
@var checkbox chatTextBigger "Chat text bigger" 0
@var checkbox chatTextNoShadow "Chat text outline" 1
@var checkbox chatCompact "Chat compact layout" 1
==/UserStyle== */

@-moz-document url-prefix("https://stumblechat.com/room/") {
    @media screen and (max-width: 652px) {
        :root {
            --heightChat: 60%;
            --heightUserlist: 57%;
            
            if chatSize == Big {
                --heightChat: 80%;
                --heightUserlist: 30%;
            }
        }
        #videolist, sc-videolist {
            height: var(--heightUserlist)!important;
        }
        sc-userlist, sc-chat {
            height: var(--heightChat);
            transition: 0.5s;
         }

        if chatTextBigger {
            .message, .message .nickname, #input>textarea { font-size: revert!important; }
        }
        if !chatTextNoShadow {
            span.message, textarea { text-shadow: none!important; }
        }


        sc-chat { width: 70%; }
        sc-userlist { width: 30%; }
        sc-userlist:hover { width: 50%; z-index: 3; }
        
        if chatSizeW == Big {
            sc-chat { width: 90%; }
            sc-userlist { width: 10%; }
        }


        #userlist { padding: 2px; }
        #userlist .bar {
            overflow: unset!important;
            overflow-x: visible!important;
            width: max-content!important;
        }
        .bar-item {
            margin-right: 0!important;
            width: max-content!important;
        }
        .bar-item.no-image { width: 30px!important; }
        
        
        if chatCompact {
            /* Just a copy of...
            @import url("https://update.greasyfork.org/scripts/484175/Stumblechat%20chat%20compact.user.css"); */
            .message .nickname ~ .content {
                margin-left: 2px;
                margin-right: 0.125;
            }
            .message .nickname ~ .content span { line-height: 1.5em; }
            .message .nickname {
                padding: 3px 4px!important;
                margin-bottom: 4px!important;
            }
 
            span.message {
                overflow-wrap: anywhere;
                white-space: break-spaces; 
                padding: 4px 1px;
            }
 
            .message .nickname,
            .content {
                display: inline!important;
            }
 
 
            #chat-content > .message.noavatar { min-height: 28px; }
            #chat-content > .message.common { min-height: 42px; }
            #chat-content > .message:not(.system) { padding-bottom: 4px; }
 
            .message .content {
                padding: 4px 3px!important;
                line-height: 2em!important;
                border-radius: unset!important;
            }
            .message .content:last-child { border-radius: 0 5px 5px 0!important; }
            .message .nickname + .content { border-radius: 5px 0 0 5px!important; }
            .message .nickname:nth-child(-n+2) + .content:last-child { border-radius: 5px!important; }
        }
        else {
            .message .nickname {
                line-height: 21px!important;
                height: 21px!important;
                padding: 1px 4px!important; 
            }
        }
    }
}