/* Bella V2 — Moldura de celular no browser de computador. * * O app é desenhado pra uma tela de celular: tudo dentro dele mede em relação * à largura da tela. Aberto num monitor, esticava de ponta a ponta e mudava de * proporção a cada resize da janela. Aqui a janela deixa de ser a tela: o * conteúdo passa a viver numa moldura de tamanho fixo, centralizada, com o * mesmo formato de um celular. * * COMO FUNCIONA (e por que não precisou mexer em modal/chat/toast/lightbox): * `transform` no faz do body o bloco-contêiner de TODO descendente * `position: fixed` — inclusive os overlays que o JS pendura em document.body. * Com `overflow: hidden` + `border-radius`, eles ficam presos e recortados * dentro da moldura, sem uma linha de CSS por overlay. * * Só entra em telas grandes o bastante nas DUAS dimensões: celular deitado * (largura ~930px, altura ~430px) não pega a moldura e segue tela cheia. */ @media (min-width: 700px) and (min-height: 640px) { :root { /* Formato de celular: ~420 x 900 (proporção de um iPhone Pro Max). * Em janela baixa a moldura encolhe junto, sempre com folga de 20px. */ --app-h: min(100dvh - 40px, 900px); --app-frame-w: 420px; --desk: oklch(0.845 0.024 74); } /* A "mesa" atrás da moldura. Background no impede que o papel craft * do body vaze pro canvas inteiro (propagação do background do root). */ html { height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--desk); background-image: radial-gradient(90% 70% at 50% 0%, color-mix(in oklab, var(--cream) 40%, transparent) 0%, transparent 72%); } body { flex: none; width: var(--app-frame-w); max-width: calc(100vw - 40px); height: var(--app-h); /* Cria o bloco-contêiner dos `position: fixed` (ver cabeçalho). */ transform: translateZ(0); overflow: hidden; border-radius: 30px; box-shadow: 0 0 0 1px oklch(0.24 0.03 35 / 0.10), 0 24px 60px oklch(0.24 0.03 35 / 0.22), 0 4px 12px oklch(0.24 0.03 35 / 0.10); } /* Auth/onboarding rolam DENTRO da moldura, não na página. */ body[data-authed="false"] { height: var(--app-h); min-height: 0; overflow-y: auto; overscroll-behavior: contain; } body[data-authed="false"]::-webkit-scrollbar { display: none; } /* Cursor de mouse: o app inteiro foi feito pra toque. */ .porta-tab, .subtab-pill, [data-action] { cursor: pointer; } }