/* ========================================================================== Toast Notifications -------------------------------------------------------------------------- Um aviso passageiro precisa ser visto e desaparecer. No celular ele estava fazendo o contrário: nascia no rodapé, em cima da bottom navigation (#mobile-bottom-nav, z-index 45), com largura total e texto sem limite — uma mensagem de três linhas engolia o menu por dez segundos. Duas decisões resolvem isso: 1. Abaixo de 1024px o aviso vai para o **topo**. É o mesmo ponto de corte da bottom navigation (`lg:hidden`), então em qualquer tela onde a barra existe o aviso está longe dela — e longe do polegar, que navega embaixo. Nada de `calc()` em cima de `--mobile-nav-h`: não competir pelo espaço é mais robusto que negociá-lo. 2. O corpo é limitado a 2 linhas. Quem quiser o texto inteiro toca no aviso, que expande e para de contar o tempo. Mensagem que não cabe em 2 linhas normalmente não deveria ser um toast — deveria ser um aviso fixo na tela ou um diálogo. As cores vivem aqui, com variantes `.dark` (o Tailwind do projeto usa `darkMode: 'class'` no ), e não mais adivinhadas em JavaScript a partir das classes do . ========================================================================== */ #toast-container { position: fixed; z-index: 9999; display: flex; pointer-events: none; /* Só os avisos recebem toque; o container é vão. */ /* Topo, centralizado — o padrão do celular e de telas médias. */ top: calc(env(safe-area-inset-top, 0px) + var(--impersonate-banner-h, 0px) + 0.75rem); left: 0; right: 0; margin-inline: auto; padding-inline: 0.75rem; width: 100%; max-width: 30rem; flex-direction: column; gap: 0.5rem; } /* Desktop: canto inferior direito, onde já estava e onde não atrapalha nada. */ @media (min-width: 1024px) { #toast-container { top: auto; bottom: 1rem; left: auto; right: 1rem; margin-inline: 0; padding-inline: 0; max-width: 26rem; /* O mais novo entra por baixo, empurrando os antigos para cima: o olhar volta sempre para a mesma altura, junto ao canto. */ flex-direction: column-reverse; } } /* ===================== O aviso ===================== */ .toast { pointer-events: auto; position: relative; overflow: hidden; border-radius: 0.75rem; border: 1px solid transparent; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15), 0 4px 10px -6px rgb(0 0 0 / 0.2); cursor: pointer; touch-action: pan-y; will-change: transform, opacity; /* Entrada: vem de cima no celular, da direita no desktop (ver abaixo). */ transform: translateY(-120%); opacity: 0; transition: transform 0.28s cubic-bezier(0.21, 1.02, 0.73, 1), opacity 0.28s ease-out; } .toast.show { transform: translateY(0); opacity: 1; } /* Saída: a classe é aplicada antes de remover do DOM. */ .toast.toast--leaving { transform: translateY(-120%); opacity: 0; } @media (min-width: 1024px) { .toast, .toast.toast--leaving { transform: translateX(120%); } .toast.show { transform: translateX(0); } } /* Enquanto o dedo arrasta, o deslocamento é controlado pelo JS e a transição precisa sair da frente — senão o aviso persegue o dedo com atraso. */ .toast.toast--dragging { transition: none; cursor: grabbing; } .toast__inner { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.75rem 0.75rem 0.875rem; } .toast__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; } .toast__content { flex: 1 1 auto; min-width: 0; /* Sem isto o flex item não deixa o texto truncar. */ } .toast__message { font-size: 0.875rem; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; /* Duas linhas e ponto. A terceira linha é o começo do parágrafo que transformava o aviso em um bloco de leitura obrigatória. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .toast--expanded .toast__message { -webkit-line-clamp: unset; line-clamp: unset; display: block; } /* Só aparece quando o texto realmente não coube (o JS mede e marca). */ .toast__more { display: none; margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; opacity: 0.75; text-decoration: underline; text-underline-offset: 2px; } .toast--clamped .toast__more { display: block; } .toast--expanded .toast__more { display: none; } /* Ação no lugar de instrução: "Abra a fila para revisar" vira um botão. Contorno em `currentColor` em vez de fundo sólido: funciona em qualquer um dos quatro tipos, nos dois temas, sem uma paleta própria para cada caso. */ .toast__action { display: inline-flex; align-items: center; min-height: 2rem; margin-top: 0.5rem; padding: 0.25rem 0.75rem; border: 1px solid currentColor; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: inherit; background: transparent; cursor: pointer; transition: background-color 0.15s ease; } /* 12% da cor do texto como fundo: destaca sem inverter nada. Onde `color-mix` não existe, a declaração é ignorada e o botão fica só com o contorno — que já é suficiente para ele parecer clicável. */ .toast__action:hover, .toast__action:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); } /* Alvo de toque de 44px, como manda a diretriz de acessibilidade — antes era um