/* Segue o dispositivo, incluindo mudanças de tema com a app aberta. */
:root {
    color-scheme: light dark;
    --surface: #fff;
    --surface-soft: #f3f3f7;
    --text: #17171b;
    --text-muted: #767680;
    --line: #17171b18;
}

.perfil-mensagem {
    width: 44px;
    height: 44px;
    padding: 11px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    text-decoration: none;
    font-weight: 600;
}

.perfil-acoes {
    flex-wrap: wrap;
}

@media (prefers-color-scheme: dark) {
    :root {
        --surface: #19191e;
        --surface-soft: #25252d;
        --text: #f5f5f7;
        --text-muted: #b2b2bd;
        --line: #ffffff24;
        --margot-fundo: #000;
        --perfil-fundo: #000;
        --perfil-preto: #f5f5f7;
        --perfil-texto: #e1e1e7;
        --perfil-suave: #b2b2bd;
        --perfil-linha: #ffffff24;
        --perfil-roxo-suave: #332b45;
        --perfil-amarelo-suave: #373225;
        --hoje-preto: #f5f5f7;
        --hoje-texto: #e1e1e7;
        --hoje-suave: #b2b2bd;
        --margot-preto: #f5f5f7;
    }

    html,
    body,
    body:has(#gridCanvas),
    body:has(#chat-pagina),
    body:has(#perfil),
    body:has(#mensagens-pagina),
    .chat-pagina,
    .mensagens-pagina,
    #perfil {
        background: var(--margot-fundo);
        color: var(--text);
    }

    .mini-menu,
    .heys-painel,
    .heys-aviso,
    .hey-aviso,
    .mensagem-aviso,
    .acoes-perfil-caixa,
    .conversa-acoes-caixa,
    .conversas-vazio,
    .perfil-identidade,
    .perfil-cartao,
    .perfil-seccao,
    .hoje-editor-sheet,
    .perfil-hoje-balao,
    .hoje-painel,
    .chat-sheet,
    .chat-compositor,
    .chat-form,
    .chat-media-preview,
    .chat-reply-preview,
    .chat-recording,
    .chat-quote {
        background: var(--surface);
        color: var(--text);
        border-color: var(--line);
    }

    .chat-cabecalho {
        background: var(--margot-fundo);
        border-color: var(--line);
    }

    .chat-pessoa strong,
    .chat-pessoa small,
    .mini-menu h1,
    .perfil-identidade h1,
    .mensagens-cabecalho h1,
    .conversa-conteudo strong,
    .heys-cabecalho,
    .perfil-conteudo h2,
    .perfil-conteudo p,
    .perfil-sobre p,
    .perfil-gosto-nome,
    .hoje-editor-intro strong,
    .hoje-opcao-roupa-texto strong,
    .hoje-peca-label,
    .hoje-cor-label,
    .chat-sheet button {
        color: var(--text);
    }

    .chat-mensagem.recebida .chat-balao,
    .conversa-item,
    .heys-item,
    .chat-reacao,
    .chat-sheet button,
    .conversa-acao,
    .conversa-acao-cancelar,
    .hoje-chip,
    .perfil-gosto,
    .perfil-interesse {
        background: var(--surface-soft);
        color: var(--text);
        border-color: var(--line);
    }

    .chat-mensagem.minha .chat-balao {
        color: #fff;
    }

    .chat-mensagem footer,
    .conversa-resumo,
    .conversa-meta,
    .chat-pessoa small,
    .mini-menu p {
        color: var(--text-muted);
    }

    .chat-mensagem.minha footer {
        color: #ffffffe0;
    }

    input:not([type='submit']):not([type='button']):not([type='range']):not([type='checkbox']),
    textarea,
    select {
        background-color: var(--surface-soft);
        color: var(--text);
        border-color: var(--line);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted);
    }

    #chat-texto,
    body .mini-menu .mini-compose-input #mensagem {
        background: transparent;
        color: var(--text);
        border-color: var(--line);
    }

    .foto,
    .mini-menu > header > a > img {
        border-color: #414149;
        background: #242429;
    }

    .perfil-idade {
        color: #f4dc92;
    }

    .hoje-opcao-roupa,
    .hoje-peca,
    .hoje-cor,
    .hoje-roupa-selecionada-item,
    .hoje-editor-fechar,
    .hoje-editor-voltar,
    #hoje-nota-input {
        background: var(--surface-soft);
        color: var(--text);
        border-color: var(--line);
    }

    .hoje-roupa-ajuda,
    .hoje-editor-intro span,
    #hoje-roupa-resumo {
        color: var(--text-muted);
    }

    #menuPrincipal > nav {
        background: transparent;
    }

    #menuPrincipal > nav > ul {
        background-color: #171719e6;
        border-color: #ffffff18;
    }

    #menuPrincipal > nav > ul > li > a.active {
        background-color: #ffffff16;
    }

    .heys-abrir {
        background: #171719;
        color: #fff;
        border-color: #ffffff18;
        box-shadow: none;
    }

    .hey-item-frase,
    .hey-aviso-corpo strong,
    .hey-aviso-enviado .hey-aviso-corpo strong {
        color: var(--text);
    }

    .hey-aviso-corpo p,
    .hey-item-data,
    .heys-cabecalho p,
    .heys-estado,
    .heys-separadores button,
    .hey-item-limpar {
        color: var(--text-muted);
    }

    .hey-item {
        border-color: var(--line);
    }

    .heys-fechar,
    .heys-separadores {
        background: var(--surface-soft);
        color: var(--text);
    }

    .heys-separadores button.ativo,
    .hey-aviso-link:hover,
    .hey-item-limpar:active {
        background: #35353e;
        color: var(--text);
    }

    .hey-aviso {
        background: #25252d;
        box-shadow: 0 8px 28px #0006, inset 0 0 0 1px #ffffff24;
    }

    .heys-limpar-todos {
        color: #ff929f;
    }

    .heys-contador {
        border-color: var(--surface);
    }

    #menuPrincipal img,
    .menu-invisivel-imagem {
        filter: brightness(0) invert(1);
    }

    .perfil-fundo,
    .mensagens-fundo {
        opacity: 0.18;
    }

    .perfil-identidade-mancha {
        opacity: 0.16;
    }

    .chat-erro,
    .heys-estado-erro {
        color: #ff929f;
    }

    .chat-sheet input {
        background: var(--surface-soft);
        color: var(--text);
    }
}

.perfil-mensagem svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
    html,
    body,
    .chat-pagina,
    .mensagens-pagina,
    #perfil,
    .mini-menu,
    .chat-cabecalho,
    .chat-compositor,
    .chat-form,
    .perfil-identidade,
    .perfil-cartao,
    .perfil-seccao,
    .perfil-gosto,
    .chat-mensagem.recebida .chat-balao,
    #menuPrincipal > nav > ul,
    #menuPrincipal a,
    .heys-abrir {
        transition:
            background-color 320ms ease,
            color 320ms ease,
            border-color 320ms ease,
            box-shadow 320ms ease,
            transform 180ms ease,
            opacity 240ms ease;
    }

    #menuPrincipal img,
    .menu-invisivel-imagem {
        transition: filter 320ms ease;
    }
}

/* A idade e as ações conservam espaço; os Daylies têm uma linha própria. */
#perfil .perfil-identidade-rodape {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

#perfil .perfil-identidade-rodape > .perfil-idade {
    grid-row: 1;
    justify-self: start;
}

#perfil .perfil-identidade-rodape > .perfil-acoes {
    grid-row: 2;
    justify-self: end;
    max-width: 100%;
}

#perfil .perfil-identidade-rodape > [data-daylies-profile] {
    grid-row: 3;
    justify-self: end;
    max-width: 100%;
}

#perfil .perfil-identidade-rodape > [data-daylies-profile][hidden] {
    display: none !important;
}

@media (min-width: 480px) {
    #perfil .perfil-identidade-rodape {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #perfil .perfil-identidade-rodape > .perfil-acoes {
        grid-column: 2;
        grid-row: 1;
    }

    #perfil .perfil-identidade-rodape > [data-daylies-profile] {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Avisos compactos, com a fotografia e o título em destaque. */
.mensagem-aviso,
.hey-aviso.hey-aviso-recebido {
    width: min(100%, 340px);
    min-height: 68px;
    padding: 9px 12px;
    gap: 10px;
    border-radius: 20px;
}

.mensagem-aviso .mensagem-aviso-foto,
.hey-aviso-recebido .hey-aviso-foto {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    object-fit: cover;
}

.mensagem-aviso .mensagem-aviso-corpo strong,
.hey-aviso-recebido .hey-aviso-corpo strong {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mensagem-aviso .mensagem-aviso-corpo > span,
.hey-aviso-recebido .hey-aviso-corpo p {
    font-size: 13px;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
    .mini-menu,
    .hoje-editor-sheet {
        box-shadow: 0 -1px 0 var(--surface), 0 -12px 36px #0006;
    }

    .mini-menu > div#barra,
    .hoje-editor-barra {
        background: #6d6d78;
    }

    .mais-opcoes,
    .definicoes-pagina,
    .definicoes-pagina li > a,
    .form-denuncia label {
        color: var(--text);
    }

    .mais-opcoes:active,
    .definicoes-pagina li > a:active,
    .definicoes-logout button:active {
        background: var(--surface-soft);
    }

    .definicoes-pagina ul,
    .reminder-settings,
    #mini-menu-hoje,
    .perfil-hoje-balao,
    .hoje-cores-area {
        background: var(--surface);
        color: var(--text);
        border-color: var(--line);
        box-shadow: none;
    }

    .definicoes-pagina li + li,
    .hoje-cores-cabecalho {
        border-color: var(--line);
    }

    .definicoes-pagina li > a img {
        filter: brightness(0) invert(1);
    }

    .definicoes-logout button,
    .acao-perfil-perigosa strong,
    .hoje-editor-erro,
    #hoje-apagar {
        color: #ff929f;
    }

    .definicoes-logout button span {
        background: #ff929f18;
    }

    #mini-menu-hoje::before,
    #mini-menu-hoje::after,
    .perfil-hoje-balao::before,
    .perfil-hoje-balao::after {
        background: var(--surface);
        border-color: var(--line);
        box-shadow: none;
    }

    #mini-menu-hoje [data-hoje-nota],
    .perfil-hoje-balao [data-hoje-nota],
    .hoje-cores-area .hoje-cores-titulos h3 {
        color: var(--text);
    }

    .mini-menu-hoje-topo,
    .perfil-hoje-topo,
    .hoje-cores-titulos > span,
    .acao-perfil span,
    .form-denuncia label span,
    .hoje-opcao-roupa.tem-roupa #hoje-roupa-resumo {
        color: var(--text-muted);
    }

    .perfil-editar,
    #perfil .perfil-conectar:not(.ligado):not(.a-espera),
    .acao-perfil,
    .acao-perfil-cancelar,
    .acoes-perfil-fechar,
    .acoes-perfil-voltar,
    .hoje-opcao-roupa,
    .hoje-peca,
    .hoje-cor,
    .hoje-roupa-selecionada-item,
    .hoje-cores-peca-preview,
    #hoje-apagar {
        background: var(--surface-soft);
        border-color: var(--line);
        box-shadow: none;
    }

    .perfil-editar,
    #perfil .perfil-conectar:not(.ligado):not(.a-espera),
    .acao-perfil,
    .acao-perfil-cancelar,
    .acoes-perfil-fechar,
    .acoes-perfil-voltar {
        color: var(--text);
    }

    .form-denuncia select,
    .form-denuncia textarea {
        background: var(--surface-soft);
        border-color: var(--line);
        color: var(--text);
    }

    .hoje-peca.selecionada,
    .hoje-cor.selecionada {
        background: #482833;
        border-color: #ff8198;
        box-shadow: none;
    }

    #hoje-nota-input:focus {
        background: var(--surface-soft);
        color: var(--text);
        border-color: #ff8198;
        box-shadow: 0 0 0 3px #ff819826;
    }

    .hoje-cor-amostra {
        background: #656570 !important;
        box-shadow: none;
    }

    .hoje-cor.selecionada .hoje-cor-amostra {
        box-shadow: 0 0 0 2px #482833, 0 0 0 4px #ff8198;
    }

    .daylie-entry span {
        color: #baa9ff;
    }

    .mensagens-badge {
        border-color: var(--surface);
    }

    /* Os estilos antigos dos avisos usam !important nestes textos. */
    .mensagem-aviso,
    .hey-aviso,
    .hey-aviso-link,
    .hey-aviso-link:hover,
    .mensagem-aviso-corpo strong,
    .hey-aviso-corpo strong {
        color: var(--text) !important;
    }

    .mensagem-aviso-corpo > span,
    .hey-aviso-corpo p {
        color: var(--text-muted) !important;
    }

    .mensagem-aviso,
    .hey-aviso,
    .hey-aviso-link:hover {
        background: var(--surface-soft);
        border-color: var(--line);
        box-shadow: 0 8px 28px #0006;
    }
}
/* Estabilização do lançamento: fundos mudam imediatamente, sem flashes claros. */
html,
body,
.chat-pagina,
.mensagens-pagina,
#perfil,
.chat-cabecalho,
.chat-compositor,
.chat-form,
.chat-mensagem.recebida .chat-balao {
    transition: none;
}

#create-account-form input,
#create-account-form select,
#create-account-form textarea {
    color: var(--text);
}

#create-account-form textarea {
    background-color: var(--surface);
}

/* Os painéis não precisam de desfocar um canvas animado por baixo. */
@media (prefers-color-scheme: dark) {
    #create-account-form > #introducao {
        background: radial-gradient(circle at 16% 12%, #21172d, transparent 50%), #101014;
        color: var(--text);
    }

    #create-account-form > #introducao > h1,
    #create-account-form > #introducao > nav.anterior-proximo a.registar,
    #create-account-form label,
    #create-account-form nav.anterior-proximo > .anterior {
        color: var(--text);
    }

    #create-account-form nav.anterior-proximo > .proximo {
        background: var(--surface-soft);
        color: #ff8da2;
    }

    #create-account-form input[type='text'],
    #create-account-form input[type='email'],
    #create-account-form input[type='tel'],
    #create-account-form input[type='number'],
    #create-account-form input[type='password'],
    #create-account-form select,
    #create-account-form textarea,
    #nascimento nav.campos-nascimento input,
    #nascimento nav.campos-nascimento select,
    #sexo select,
    #recomendacoes,
    #meus-gostos .meu-hobbie,
    .objetivo-opcao span,
    .perfil-foto-adicionar {
        background: var(--surface-soft);
        color: var(--text);
        border-color: #62626d;
    }

    #create-account-form input::placeholder,
    #create-account-form textarea::placeholder {
        color: var(--text-muted);
        opacity: 1;
    }

    #create-account-form input:-webkit-autofill {
        -webkit-text-fill-color: var(--text);
        box-shadow: 0 0 0 1000px var(--surface-soft) inset;
        caret-color: var(--text);
    }

    #recomendacoes li:hover {
        background: #393943;
    }

    .objetivo-opcao input:checked + span {
        background: #9f1936;
        color: #fff;
        border-color: #ff8da2;
    }

    .objetivo-explicacao,
    .perfil-fotos-ajuda,
    #create-account-form > #introducao > .margot-intro-texto,
    #create-account-form > #introducao > .margot-intro-privacidade {
        color: var(--text-muted);
    }

    .margot-demo-cenario {
        background: #1c1c25;
        border-color: var(--line);
    }

    .margot-demo-telemovel {
        background: #30303b;
        color: var(--text);
        border-color: #777785;
    }

    .margot-demo-telemovel strong {
        color: var(--text);
    }

    .margot-demo-pessoa {
        border-color: #30303b;
    }

    .mini-menu,
    .hoje-editor-sheet,
    .acoes-perfil-caixa,
    #menuPrincipal > nav > ul,
    .mensagem-aviso,
    .hey-aviso {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mini-menu {
        background: #19191e;
        border-color: #35353d;
    }

    .mini-menu > header > h1,
    .mini-menu .mini-menu-perfil,
    #chat-pagina .chat-pessoa strong,
    #chat-pagina #chat-texto,
    #perfil .perfil-nome,
    .hoje-editor-sheet h2 {
        color: var(--text);
    }

    #chat-pagina #chat-texto::placeholder,
    .mini-menu #mensagem::placeholder {
        color: #b2b2bd;
        opacity: 1;
    }

    .mini-menu .mini-compose-input,
    .mini-menu .mini-compose-preview,
    .mini-menu .mini-compose-recording {
        background: var(--surface-soft);
        border-color: #62626d;
        color: var(--text);
    }

    .mini-menu .mini-compose-input [data-camera-open],
    .mini-menu .mini-compose-input [data-microphone] {
        color: #fff;
    }

    .chat-form:focus-within {
        border-color: #baa9ff;
    }
}

@media (prefers-color-scheme: dark) {
    #create-account-form > #editar-perfil,
    .editar-perfil-lista,
    .editar-area,
    .permissao-cartao,
    #palavra-passe .aceitacao-legal,
    .account-confirmation .account-confirmation-spam {
        background: var(--surface);
        color: var(--text);
        border-color: var(--line);
    }

    .editar-area:hover,
    .editar-area:focus-visible,
    .editar-perfil-fechar,
    .editar-area-icone,
    .permissao-icone {
        background: var(--surface-soft);
        color: var(--text);
    }

    .editar-perfil-cabecalho p,
    .editar-area-texto small,
    .permissoes-explicacao,
    .permissao-conteudo p,
    .permissao-estado,
    .account-confirmation p {
        color: var(--text-muted);
    }

    .permissao-cartao[data-ativa='true'] {
        background: #172a20;
        border-color: #448563;
    }

    #palavra-passe .aceitacao-legal-opcao span {
        color: var(--text);
    }

    #palavra-passe .aceitacao-legal-opcao a,
    .account-confirmation-edit summary,
    .account-confirmation .account-confirmation-error {
        color: #ff8da2;
    }

    .account-confirmation-edit input[type="email"] {
        background: var(--surface-soft);
        color: var(--text);
        border-color: #62626d;
    }
}

@media (prefers-color-scheme: dark) {
    #create-account-form #gostos .gostos-ajuda,
    #create-account-form #gostos [data-sugestoes-estado],
    .perfil-fotos-explicacao,
    .margot-demo-telemovel span {
        color: var(--text-muted);
    }

    #create-account-form #gostos .gosto-sugestao {
        background: var(--surface-soft);
        color: var(--text);
        border-color: #62626d;
    }

    #create-account-form #gostos .gosto-sugestao[aria-pressed='true'],
    #create-account-form #gostos #meus-gostos .meu-hobbie {
        background: #9f1936;
        color: #fff;
        border-color: #ff8da2;
    }

    #create-account-form #gostos [data-gostos-aviso] {
        color: #ff8da2;
    }
}

@media (prefers-color-scheme: dark) {
    body.margot-auth-login > aside,
    body.margot-auth-login > aside > a#registar {
        background: var(--surface);
        color: var(--text-muted);
        border-color: var(--line);
    }

    body.margot-auth-login > aside > a#esqueci-palavra-passe,
    .account-confirmation .account-confirmation-detail {
        color: var(--text-muted);
    }

    body.margot-auth-login > aside > a:hover,
    body.margot-auth-login > aside > a:focus-visible {
        background: var(--surface-soft);
    }

    body.margot-auth-login #login-erro,
    body.margot-auth-login > aside > a#registar > span {
        color: #ff8da2;
    }

    body.margot-auth-login main > form > p > input:focus {
        border-bottom-color: #ff8da2;
    }
}

/* Modo invisível: contraste no tema escuro */
@media (prefers-color-scheme: dark) {
    html #menuPrincipal #alternar-invisivel[data-invisivel="true"],
    html[data-margot-invisivel="true"] #menuPrincipal #alternar-invisivel {
        background: #d1d1d6;
        color: #16161a;
        opacity: 1;
        box-shadow: inset 0 0 0 1px #f2f2f7;
    }

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