@media (max-width: 960px) {
    #transCorpo {
        flex-direction: column;
    }
    #transVideoArea {
        min-height: 40vh;
        max-height: 50vh;
    }
    #transLateral {
        width: 100%;
        min-width: 0;
        max-height: none;
        height: auto;
        border-left: none;
        border-top: 1px solid #222736;
    }
    #transListaPessoas {
        max-height: 160px;
    }
}

@media (max-width: 720px) {
    #homeWrap {
        padding: 24px 14px;
    }
    #homeMain {
        gap: 28px;
    }
    .homeLogoSvg {
        width: 54px;
        height: 54px;
    }
    #homeTitle {
        font-size: 28px;
    }
    #homeSubtitle {
        font-size: 14px;
    }
    .homeForm {
        padding: 20px;
        gap: 18px;
    }
    .homeInput {
        font-size: 14px;
        padding: 13px 14px;
    }
    .homeBtn {
        padding: 13px 18px;
        font-size: 14px;
    }
    #homeInfo {
        padding: 16px;
    }
    .homeInfoItem {
        font-size: 13px;
    }
    #homeLogo {
        gap: 10px;
    }

    #transTopo, #viewTopo {
        height: auto;
        min-height: 56px;
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 10px;
    }
    #transTopoEsq, #transTopoDir, #viewTopoEsq, #viewTopoDir {
        gap: 10px;
    }
    #transTopoTitulo, #viewTopoTitulo {
        display: none;
    }
    .transLogoSvg, .viewLogoSvg {
        width: 30px;
        height: 30px;
    }
    #transSalaCod, #viewSalaCod {
        font-size: 12px;
        padding: 6px 10px;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #transSalaCod span, #viewSalaCod span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
        display: inline-block;
        vertical-align: middle;
    }
    #transAoVivo, #viewAoVivo {
        font-size: 11px;
        padding: 6px 10px;
    }
    #transViewers {
        font-size: 12px;
        padding: 6px 10px;
    }
    #transSairBtn, #viewVoltarBtn {
        padding: 7px 12px;
        font-size: 12px;
    }

    #transVideoArea {
        min-height: 32vh;
    }
    .transPlaceholderIco {
        width: 72px;
        height: 72px;
    }
    #transPlaceholderTxt {
        font-size: 15px;
        padding: 0 20px;
    }
    #transLateral {
        padding: 18px;
        gap: 18px;
    }
    .transBtn {
        padding: 12px 16px;
    }
    #transConviteLinha {
        flex-direction: column;
        gap: 10px;
    }
    .transBtnGhost {
        width: 100%;
    }

    #viewControles {
        bottom: 16px;
        padding: 8px 12px 8px 14px;
        gap: 10px;
        border-radius: 12px;
    }
    .viewCtrlBtn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
    }
    .viewCtrlIco {
        width: 18px;
        height: 18px;
    }
    #viewStatusTxt {
        display: none;
    }
    .viewPlaceholderIco {
        width: 72px;
        height: 72px;
    }
    #viewPlaceholderTxt {
        font-size: 17px;
    }
    #viewPlaceholderSub {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    #transViewers {
        display: none;
    }
    #transListaPessoas {
        max-height: 130px;
    }
    #homeTabs {
        flex-direction: column;
    }
    .homeTab {
        padding: 14px 16px;
        border-bottom: 1px solid #222736;
    }
    .homeTab.homeTabActive {
        border-bottom-width: 1px;
    }
}