@media only screen and (max-width: 600px) {
    #room-window-root{
        width:var(--full-width);
        height:var(--full-height);
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    #room-title{
        width:100vw;
        height:10vh;
        border-style:solid;
        border-color:black;
        border-width:2px;
        border-bottom-width: 0px;
    }

    #room-name {
        font-size: 2.5vh;
        font-weight: bold;
    }

    #room-address {
        font-size: 1.7vh;
        overflow-wrap:break-word;
    }

    #room-top-menu{
        width:100vw;
        height:10vh;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
        border-style:solid;
        border-color:black;
        border-width:2px;
        border-bottom-width: 0px;
    }

    .room-top-menu-button{
        height:12vw;
        width:12vw;
        font-size: 8vw;
        border-width:2px;
        margin-left:3vw;
        margin-right:3vw;
        border-style:solid;
        border-color:black;
        border-radius: 6vw;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; 
    }

    #room-chat-list{
        width:100vw;
        height:80vh;
        border-style:solid;
        border-color:black;
        border-width:2px;
        border-bottom-width: 0px;
        overflow-y: scroll;
    }

    #room-chat-list::-webkit-scrollbar{
        display:none;
    }

    #upload-progress-container {
        width: 100vw;
        padding: 0.5vh 2vw;
        border-style: solid;
        border-color: black;
        border-width: 2px;
        border-bottom-width: 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2vw;
    }

    #upload-progress-bar-track {
        flex: 1;
        height: 1.5vh;
        background-color: #1a1a1a;
        border-radius: 0.75vh;
        overflow: hidden;
    }

    #upload-progress-bar-fill {
        height: 100%;
        width: 0%;
        background-color: var(--accent, #4a9eff);
        border-radius: 0.75vh;
        transition: width 0.2s ease;
    }

    #upload-progress-text {
        font-size: 1.5vh;
        color: var(--text-secondary, #a0a0a0);
        white-space: nowrap;
        min-width: 25vw;
        text-align: right;
    }

    #room-message-form{
        width:100vw;
        height:10vh;

        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; 

        border-style:solid;
        border-color:black;
        border-width:2px;
    }

    #room-text-message-input{
        width:70vw;
        height:90%;
        font-size:3vh;
    }

    #room-send-message-button{
        height:12vw;
        width:12vw;
        font-size: 8vw;
        border-width:2px;
        margin-left:3vw;
        margin-right:3vw;
        border-style:solid;
        border-color:black;
        border-radius: 6vw;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; 
    }

    #room-send-message-button:hover {
        background-color: gray;
    }
    
    #room-send-file-button {
        height:12vw;
        width:12vw;
        font-size: 8vw;
        border-width:2px;
        margin-left:3vw;
        margin-right:3vw;
        border-style:solid;
        border-color:black;
        border-radius: 6vw;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; 
    }

    #room-send-file-button:hover {
        background-color: gray;
    }
}