@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;
    inset: 0;
    display: block;
    width: 100%;
    height: 100dvh;
    pointer-events: none;
}

/* IMAGENS */
.foto {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

img {
    max-width: 100%;
}

/* 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.9);
    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;
    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(0.2, 0.8, 0.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 tem regras mais específicas para o Hey. */
.mini-menu.perfil-proprio #enviar-hey,
.mini-menu.perfil-proprio .mini-menu-mensagem {
    display: none !important;
}

/* 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(0.2, 0.8, 0.2, 1);
    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%;
}

/* Só o conteúdo anima; o menu e as dimensões do WebView mantêm-se estáveis. */
body.margot-a-navegar > [data-margot-pagina] {
    will-change: 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 .mini-compose-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;
    }
}