@charset "UTF-8";

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

* {
    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: #ffffff;
}

#gridCanvas {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.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;
    will-change: transform, opacity;
}

.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 {
    position: fixed !important;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100vw;
    height: 72vh;
    border-radius: 75px 75px 0 0;
    background-color: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 6px 18px rgba(0, 0, 0, 0.2),
        0 14px 32px rgba(0, 0, 0, 0.3);
    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;
}

.mini-menu > div#barra {
    width: 30vw;
    height: 3.5px;
    margin-top: 3px;
    border-radius: 35px;
    background-color: #e4e4e4;
}

.mini-menu > header {
    position: relative;
    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;
}

.mini-menu > header > a > img {
    width: 35vw;
    height: 35vw;
    border-radius: 50%;
}

.mini-menu > header > h1 {
    font-size: 1.5em;
}

.mini-menu > header > span {
    position: absolute;
    top: 10px;
    left: 90%;
}

.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: 168px;
    height: 168px;
    min-width: 168px;
    min-height: 168px;

    margin: 10px auto 18px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #e12346;
    color: #fff7ee;

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

    font-size: 2.48rem;
    font-weight: 750;
    letter-spacing: -0.07em;
    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,
        opacity 160ms ease;
}

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

#enviar-hey:focus-visible,
#enviar-hey-perfil:focus-visible {
    outline: 3px solid rgba(182, 0, 32, 0.22);
    outline-offset: 5px;
}

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

.mini-menu.perfil-proprio #enviar-hey,
.mini-menu.perfil-proprio .mini-menu-mensagem {
    display: none !important;
}

.mini-menu > form {
    width: 100%;
    margin-top: 25px;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.mini-menu > form > input#mensagem {
    width: 65%;

    margin-right: 5px;
    padding: 10px;

    border: 1px solid #dddddd;
    border-radius: 35px;

    font-size: 1em;
}

.mini-menu > form > input[type="submit"] {
    padding: 10px;

    border: none;
    border-radius: 35px;

    background-color: rgb(0, 136, 255);
    color: #ffffff;

    font-size: 0.85em;
    font-weight: bold;
}

/* 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);

    /*
     * IMPORTANTE:
     * 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;
}

body.margot-mini-menu-aberto #menuPrincipal {
    opacity: 0;
    pointer-events: none;
}

/*
 * Quando o mini-menu sobe,
 * o menu principal desaparece suavemente.
 *
 * A classe é retirada quando o mini-menu fecha,
 * portanto o menu reaparece também em 300 ms.
 */

body.margot-mini-menu-aberto #menuPrincipal {
    opacity: 0;
    pointer-events: none;
}

#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;
}

/* Botão de 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;
}

.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 no iOS:
 * - a Home mantém o ecrã fixo controlado pelo canvas;
 * - Perfil e Mensagens fazem scroll apenas no main;
 * - o menu continua fixed nas três páginas.
 */

@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;
    }
}

[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: #ffffff;

    will-change:
        transform,
        opacity;

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;
}

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

@media (min-width: 768px) {

    /*
     * Menu principal
     *
     * No iPhone continua a ocupar 90%.
     * Em iPad deixa de crescer indefinidamente.
     */
    #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 de uma pessoa.
     *
     * Em iPhone continua bottom-sheet a 100%.
     * Num tablet passa a ser um painel centrado.
     *
     * Não usamos transform para o centrar porque
     * o JS já utiliza transform para abrir/fechar.
     */
    .mini-menu {
        left:
            calc(
                50% -
                300px
            ) !important;

        width: 600px;

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

        height:
            min(
                72vh,
                720px
            );

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

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

    .mini-menu > header > a > img {
        width: 150px;
        height: 150px;
    }

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

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


/*
 * Para larguras entre 768 e 648-ish o cálculo de 300px
 * continuaria seguro, mas mantemos esta regra para o
 * painel nunca tocar nas margens.
 */
@media (min-width: 768px) and (max-width: 648px) {
    .mini-menu {
        right: 24px !important;
        left: 24px !important;
        width: auto;
    }
}