@charset "UTF-8";

:root {
    --menu-principal-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    --menu-principal-height: 56px;

    --margot-fundo: #f8f8f7;
    --margot-preto: #17171b;
    --margot-vermelho: #e12346;
    --margot-vermelho-escuro: #c91d3e;

    --margot-amarelo: #f4dc92;
    --margot-azul: #8fb2e8;
    --margot-roxo: #cfc4ef;
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
}


html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color:
        var(--margot-fundo);
}


/*
 * A Home mantém uma pequena tonalidade Margot,
 * mas está muito próxima do branco.
 *
 * Isto deixa os pontos do canvas destacarem-se.
 */
body:has(#gridCanvas) {
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(207, 196, 239, 0.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 5% 78%,
            rgba(244, 220, 146, 0.04),
            transparent 31%
        ),
        #fdfcf9;
}


/* =========================================================
   CANVAS
   ========================================================= */

#gridCanvas {
    position: fixed;

    top: 0;
    left: 0;

    display: block;

    width: 100vw;
    height: 100vh;

    pointer-events: none;
}


/* =========================================================
   IMAGENS
   ========================================================= */

img {
    width: 60px;
    height: 60px;

    border-radius: 50%;
}


/* =========================================================
   PESSOAS NO ECRÃ PRINCIPAL
   ========================================================= */

.foto {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    z-index: 10;

    transform:
        translate(-50%, -50%);

    transform-origin:
        center center;

    cursor:
        pointer;

    touch-action:
        manipulation;

    border:
        1.5px solid
        rgba(255, 255, 255, 0.90);

    background:
        #ecebed;

    box-shadow:
        0 5px 15px
        rgba(25, 22, 30, 0.09);

    will-change:
        transform,
        opacity;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.back-drop {
    position: relative;

    bottom: -100%;

    z-index: 900;

    width: 100vw;
    height: 100vh;

    background-color:
        rgba(0, 0, 0, 0.4);

    display: flex;

    flex-flow:
        column nowrap;

    justify-content:
        flex-end;

    align-items:
        center;
}


/* =========================================================
   MINI MENU
   ========================================================= */

.mini-menu {
    position:
        fixed !important;

    left:
        0;

    bottom:
        0;

    z-index:
        1000;

    width:
        100vw;

    height:
        72vh;

    overflow:
        hidden;

    border: none;

    border-bottom:
        0;

    /*
     * Curvas bastante maiores.
     * Volta a aproximar-se da personalidade
     * do mini-menu original.
     */
    border-radius:
        75px
        75px
        0
        0;

    background:
        rgba(255, 255, 255, 0.975);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 -1px 0
        rgba(255, 255, 255, 0.75),

        0 -8px 28px
        rgba(20, 18, 25, 0.11),

        0 -22px 55px
        rgba(20, 18, 25, 0.055);

    transform:
        translate3d(
            0,
            calc(
                100% +
                96px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            ),
            0
        );

    touch-action:
        none;

    display:
        flex;

    flex-flow:
        column nowrap;

    justify-content:
        flex-start;

    align-items:
        center;

    will-change:
        transform;

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;
}


.mini-menu[aria-hidden="true"] {
    pointer-events:
        none;
}


/* =========================================================
   BARRA DO MINI MENU
   ========================================================= */

.mini-menu > div#barra {
    width:
        114px;

    height:
        3px;

    margin-top:
        8px;

    border-radius:
        999px;

    background:
        rgba(23, 23, 27, 0.12);
}


/* =========================================================
   CABEÇALHO DO MINI MENU
   ========================================================= */

.mini-menu > header {
    position:
        relative;

    width:
        100%;

    margin-top:
        18px;

    display:
        flex;

    flex-flow:
        column nowrap;

    justify-content:
        space-evenly;

    align-items:
        center;
}


.mini-menu > header > a {
    color:
        #000000;

    text-decoration:
        none;

    display:
        flex;

    flex-flow:
        column nowrap;

    justify-content:
        space-evenly;

    align-items:
        center;
}


/* =========================================================
   FOTOGRAFIA MINI MENU
   ========================================================= */

.mini-menu > header > a > img {
    width:
        min(
            39vw,
            164px
        );

    height:
        min(
            39vw,
            164px
        );

    border:
        2px solid
        rgba(255, 255, 255, 0.96);

    border-radius:
        50%;

    object-fit:
        cover;

    background:
        #ecebed;

    box-shadow:
        0 9px 25px
        rgba(25, 22, 30, 0.11);
}


/* =========================================================
   NOME
   ========================================================= */

.mini-menu > header > h1 {
    margin:
        12px
        0
        0;

    color:
        var(--margot-preto);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:
        1.65rem;

    font-weight:
        750;

    line-height:
        1.04;

    letter-spacing:
        -0.035em;
}


.mini-menu > header > span {
    position:
        absolute;

    top:
        10px;

    left:
        90%;
}


/* =========================================================
   ELEMENTOS LEGADOS
   ========================================================= */

.mini-menu > div {
    width:
        70vw;

    height:
        70vw;

    border-radius:
        50%;

    background-color:
        red;

    display:
        flex;

    flex-flow:
        row nowrap;

    justify-content:
        center;

    align-items:
        center;
}


.mini-menu > div > p {
    color:
        #ffffff;

    font-size:
        3em;

    font-weight:
        bold;
}


/* =========================================================
   HEY — MINI MENU + PERFIL
   ========================================================= */

#enviar-hey,
#enviar-hey-perfil {
    width:
        auto;

    height:
        58px;

    min-width:
        148px;

    min-height:
        58px;

    margin:
        15px
        auto
        15px;

    padding:
        0
        32px;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--margot-vermelho);

    color:
        #fff7ee;

    box-shadow:
        0 10px 22px
        rgba(225, 35, 70, 0.22);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:
        21px;

    font-weight:
        760;

    letter-spacing:
        -0.035em;

    line-height:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    appearance:
        none;

    -webkit-appearance:
        none;

    cursor:
        pointer;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform
        160ms
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),
        background-color
        160ms
        ease,
        box-shadow
        160ms
        ease,
        opacity
        160ms
        ease;
}


#enviar-hey:active:not(:disabled),
#enviar-hey-perfil:active:not(:disabled) {
    transform:
        scale(0.94);

    background:
        var(--margot-vermelho-escuro);

    box-shadow:
        0 6px 15px
        rgba(225, 35, 70, 0.19);
}


#enviar-hey:focus-visible,
#enviar-hey-perfil:focus-visible {
    outline:
        3px solid
        rgba(225, 35, 70, 0.18);

    outline-offset:
        4px;
}


#enviar-hey:disabled,
#enviar-hey-perfil:disabled {
    opacity:
        0.45;

    cursor:
        default;
}


/*
 * No perfil, profile.css continua a ter
 * regras mais específicas para o Hey.
 */
.mini-menu.perfil-proprio #enviar-hey,
.mini-menu.perfil-proprio .mini-menu-mensagem {
    display:
        none !important;
}


/* =========================================================
   FORMULÁRIO DE MENSAGEM
   ========================================================= */

.mini-menu > form {
    width:
        min(
            calc(
                100% -
                30px
            ),
            540px
        );

    margin-top:
        10px;

    display:
        flex;

    flex-flow:
        row nowrap;

    justify-content:
        center;

    align-items:
        center;

    gap:
        7px;
}


/* =========================================================
   ANEXO
   ========================================================= */

.mini-menu form .mini-menu-anexo {
    flex:
        0
        0
        42px;

    width:
        42px;

    height:
        42px;

    border:
        0;

    border-radius:
        50%;

    background:
        #f0eff2;

    color:
        #29272d;

    font-size:
        24px;

    font-weight:
        500;

    line-height:
        42px;

    text-align:
        center;

    cursor:
        pointer;
}


.mini-menu form .mini-menu-anexo.selecionado {
    background:
        #e7f7ef;

    color:
        #168753;

    font-size:
        18px;
}


/* =========================================================
   INPUT DA MENSAGEM
   ========================================================= */

.mini-menu > form > input#mensagem {
    min-width:
        0;

    flex:
        1;

    width:
        auto;

    height:
        43px;

    margin:
        0;

    padding:
        0
        14px;

    border:
        1px solid
        #dddddf;

    border-radius:
        999px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--margot-preto);

    font-size:
        0.95rem;

    transition:
        border-color
        150ms
        ease,
        box-shadow
        150ms
        ease;
}


.mini-menu > form > input#mensagem:focus {
    border-color:
        rgba(225, 35, 70, 0.32);

    box-shadow:
        0 0 0 3px
        rgba(225, 35, 70, 0.06);
}


/* =========================================================
   ENVIAR MENSAGEM
   ========================================================= */

.mini-menu > form > input[type="submit"] {
    min-height:
        43px;

    padding:
        0
        16px;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--margot-vermelho);

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        750;

    cursor:
        pointer;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        background-color
        130ms
        ease,
        transform
        130ms
        ease;
}


.mini-menu > form > input[type="submit"]:active {
    background:
        var(--margot-vermelho-escuro);

    transform:
        scale(0.96);
}


/* =========================================================
   MENU PRINCIPAL
   ========================================================= */

#menuPrincipal {
    position:
        fixed !important;

    top:
        auto !important;

    right:
        5% !important;

    bottom:
        var(
            --menu-principal-bottom
        ) !important;

    left:
        5% !important;

    z-index:
        1100 !important;

    width:
        90% !important;

    height:
        var(
            --menu-principal-height
        ) !important;

    min-height:
        var(
            --menu-principal-height
        ) !important;

    max-height:
        var(
            --menu-principal-height
        ) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    opacity:
        1;

    transform:
        none !important;

    filter:
        none !important;

    perspective:
        none !important;

    isolation:
        auto !important;

    contain:
        none !important;

    transition:
        opacity
        300ms
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

    /*
     * Não usar will-change aqui.
     * Criava uma compositing layer que
     * impedia o backdrop-filter do filho
     * de desfocar corretamente o mapa.
     */
    will-change:
        auto;
}


body.margot-mini-menu-aberto #menuPrincipal {
    opacity:
        0;

    pointer-events:
        none;
}


/* =========================================================
   CONTEÚDO DO MENU PRINCIPAL
   ========================================================= */

#menuPrincipal > nav {
    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex;

    flex-flow:
        row nowrap;

    justify-content:
        center;

    align-items:
        center;
}


#menuPrincipal > nav > ul {
    width:
        95% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    max-height:
        100% !important;

    margin:
        0 !important;

    padding:
        8px
        10px;

    list-style:
        none;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    border-radius:
        35px;

    background-color:
        rgba(0, 0, 0, 0.1);

    -webkit-backdrop-filter:
        blur(2px);

    backdrop-filter:
        blur(2px);

    box-shadow:
        0 6px 24px
        rgba(0, 0, 0, 0.08),

        inset
        0 1px 0
        rgba(255, 255, 255, 0.1);

    display:
        flex;

    flex-flow:
        row nowrap;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        4px;
}


#menuPrincipal > nav > ul > li {
    min-width:
        0;

    flex:
        1 1 0;

    display:
        flex;

    flex-flow:
        row nowrap;

    justify-content:
        center;

    align-items:
        center;
}


#menuPrincipal > nav > ul > li > a,
#menuPrincipal .menu-principal-botao {
    position:
        relative;

    width:
        100%;

    min-width:
        0;

    height:
        40px;

    margin:
        0;

    padding:
        7px
        0;

    border:
        0;

    border-radius:
        35px;

    background:
        transparent;

    color:
        #000000;

    text-decoration:
        none;

    cursor:
        pointer;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


#menuPrincipal > nav > ul > li > a.active {
    background-color:
        rgba(255, 255, 255, 0.5);
}


#menuPrincipal > nav > ul > li > a:focus-visible,
#menuPrincipal .menu-principal-botao:focus-visible {
    outline:
        2px solid
        rgba(0, 100, 255, 0.75);

    outline-offset:
        2px;
}


#menuPrincipal > nav > ul > li > a > img {
    width:
        26px;

    height:
        26px;

    border-radius:
        50%;

    object-fit:
        contain;
}


/* =========================================================
   MODO INVISÍVEL
   ========================================================= */

#alternar-invisivel {
    transition:
        background-color
        160ms
        ease,
        color
        160ms
        ease,
        box-shadow
        160ms
        ease,
        transform
        120ms
        ease;
}


#alternar-invisivel:active {
    transform:
        scale(0.94);
}


.menu-invisivel-imagem {
    display:
        block;

    width:
        26px;

    height:
        26px;

    border-radius:
        0;

    object-fit:
        contain;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

    transition:
        opacity
        160ms
        ease,
        filter
        160ms
        ease;
}


.menu-invisivel-imagem-invisivel {
    display:
        none;
}


#alternar-invisivel[data-invisivel="true"]
.menu-invisivel-imagem-visivel,
html[data-margot-invisivel="true"]
#alternar-invisivel
.menu-invisivel-imagem-visivel {
    display:
        none;
}


#alternar-invisivel[data-invisivel="true"]
.menu-invisivel-imagem-invisivel,
html[data-margot-invisivel="true"]
#alternar-invisivel
.menu-invisivel-imagem-invisivel {
    display:
        block;
}


#alternar-invisivel[data-invisivel="true"],
html[data-margot-invisivel="true"]
#alternar-invisivel {
    background-color:
        rgba(24, 24, 28, 0.84);

    color:
        #ffffff;

    box-shadow:
        inset
        0 1px 1px
        rgba(255, 255, 255, 0.18),

        0 2px 8px
        rgba(0, 0, 0, 0.12);
}


#alternar-invisivel[data-invisivel="true"]
.menu-invisivel-imagem,
html[data-margot-invisivel="true"]
#alternar-invisivel
.menu-invisivel-imagem {
    filter:
        brightness(0)
        invert(1);
}


#alternar-invisivel[
    data-localizacao-desativada="true"
]:not(
    [data-invisivel="true"]
) {
    opacity:
        0.62;
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

.texto-apenas-leitor {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    margin:
        -1px !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        0 !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        )
        !important;

    white-space:
        nowrap !important;
}


/* =========================================================
   PWA / STANDALONE
   ========================================================= */

@media all and (display-mode: standalone) {

    html:has(#gridCanvas),
    html:has(#perfil),
    html:has(#mensagens-pagina) {
        width:
            100%;

        height:
            calc(
                100% +
                env(
                    safe-area-inset-top,
                    0px
                )
            );

        min-height:
            calc(
                100% +
                env(
                    safe-area-inset-top,
                    0px
                )
            );

        overflow:
            hidden
            !important;
    }


    body:has(#gridCanvas),
    body:has(#perfil),
    body:has(#mensagens-pagina) {
        position:
            relative !important;

        width:
            100%;

        height:
            100%;

        min-height:
            0 !important;

        overflow:
            hidden
            !important;
    }


    body:has(#gridCanvas) #gridCanvas {
        position:
            absolute
            !important;

        top:
            0;

        left:
            0;

        width:
            100vw
            !important;

        height:
            100%
            !important;
    }


    body:has(#gridCanvas) .mini-menu {
        position:
            absolute
            !important;
    }


    body:has(#perfil) #perfil,
    body:has(#mensagens-pagina)
    #mensagens-pagina {
        width:
            100%;

        height:
            100%;

        min-height:
            0 !important;

        overflow-x:
            hidden
            !important;

        overflow-y:
            auto
            !important;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior-y:
            contain;
    }

}


/* =========================================================
   NAVEGAÇÃO ENTRE PÁGINAS
   ========================================================= */

[data-margot-pagina] {
    width:
        100%;

    height:
        100%;
}


body.margot-a-navegar {
    overflow:
        hidden
        !important;
}


body.margot-a-navegar
> [data-margot-pagina] {
    position:
        fixed
        !important;

    inset:
        0;

    z-index:
        1050;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    background-color:
        #fdfcf9;

    will-change:
        transform,
        opacity;

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;
}


/* =========================================================
   TABLET / ECRÃS LARGOS
   ========================================================= */

@media (min-width: 768px) {

    #menuPrincipal {
        right:
            auto !important;

        left:
            50% !important;

        width:
            min(
                calc(
                    100% -
                    48px
                ),
                760px
            ) !important;

        transform:
            translateX(-50%)
            !important;
    }


    #menuPrincipal > nav > ul {
        width:
            100% !important;
    }


    .mini-menu {
        left:
            calc(
                50% -
                300px
            ) !important;

        width:
            600px;

        max-width:
            calc(
                100vw -
                48px
            );

        height:
            min(
                72vh,
                720px
            );

        border-radius:
            62px
            62px
            0
            0;
    }


    .mini-menu > div#barra {
        width:
            120px;
    }


    .mini-menu > header > a > img {
        width:
            172px;

        height:
            172px;
    }


    .mini-menu > header > h1 {
        font-size:
            1.78rem;
    }


    #enviar-hey,
    #enviar-hey-perfil {
        min-width:
            158px;

        height:
            60px;

        min-height:
            60px;

        padding:
            0
            34px;

        font-size:
            22px;
    }


    .mini-menu > form {
        width:
            min(
                calc(
                    100% -
                    48px
                ),
                520px
            );
    }


    .mini-menu > form > input#mensagem {
        flex:
            1;

        width:
            auto;
    }

}


/*
 * Mantida por compatibilidade com o CSS anterior.
 */
@media (min-width: 768px) and (max-width: 648px) {

    .mini-menu {
        right:
            24px !important;

        left:
            24px !important;

        width:
            auto;
    }

}