/* Truco.fun V67 — gaveta compacta e estável em partidas/calls no iOS e Android. */

/* A V66 usava a altura inteira da tela. Em menus exclusivos (partida e call),
   isso deixava uma área vazia enorme antes dos poucos itens existentes.
   A V67 deixa a gaveta crescer somente até o conteúdo e limita pela viewport. */
#mainMenu.main-menu.menu-portaled,
#mainMenu.main-menu.menu-portaled.main-menu-exclusive{
    justify-content:flex-start!important;
    align-content:flex-start!important;
}

#mainMenu.main-menu.menu-portaled > *,
#mainMenu.main-menu.menu-portaled > form{
    margin-top:0!important;
    margin-bottom:0!important;
}

#mainMenu.main-menu.menu-portaled .logout-form{
    margin-top:10px!important;
}

@media (max-width:799px){
    #mainMenu.main-menu.menu-portaled{
        position:fixed!important;
        top:max(8px,env(safe-area-inset-top,0px))!important;
        right:max(0px,env(safe-area-inset-right,0px))!important;
        bottom:auto!important;
        left:auto!important;

        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        align-content:flex-start!important;
        gap:7px!important;

        width:min(88vw,370px)!important;
        min-width:0!important;
        max-width:calc(100vw - 12px)!important;

        height:auto!important;
        min-height:0!important;
        max-height:calc(var(--v66-menu-viewport-height,100dvh) - 16px)!important;

        margin:0!important;
        padding:10px max(10px,env(safe-area-inset-right,0px))
            max(12px,env(safe-area-inset-bottom,0px)) 10px!important;

        border-radius:22px 0 0 22px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior:contain!important;
    }

    #mainMenu.main-menu.menu-portaled.main-menu-exclusive{
        height:auto!important;
        min-height:0!important;
        max-height:calc(var(--v66-menu-viewport-height,100dvh) - 16px)!important;
    }

    #mainMenu.main-menu.menu-portaled .menu-drawer-head{
        position:relative!important;
        inset:auto!important;
        order:0!important;
        flex:0 0 auto!important;
        margin:0!important;
    }

    #mainMenu.main-menu.menu-portaled .menu-profile{
        order:1!important;
        flex:0 0 auto!important;
        margin:0!important;
    }

    #mainMenu.main-menu.menu-portaled .menu-section-label{
        flex:0 0 auto!important;
        margin:0!important;
    }

    #mainMenu.main-menu.menu-portaled.is-open{
        transform:translate3d(0,0,0)!important;
    }

    .menu-backdrop{
        height:100dvh!important;
        min-height:100%!important;
    }
}

/* No PC/notebook o painel também fica alinhado pelo topo, sem empurrar
   os itens para a parte inferior quando a tela possui poucas ações. */
@media (min-width:800px){
    #mainMenu.main-menu.menu-portaled{
        height:auto!important;
        min-height:0!important;
        justify-content:flex-start!important;
        align-content:flex-start!important;
    }
}