/* =============================================================
AfroChip — A CONVERSA COM O APOIO
A bolinha do canto inferior direito e a janela que ela abre.
Serve `resources/views/site/partials/apoio-chat.blade.php` e
`public/js/apoio.js`, e mais nada.
===========================================================
PORQUE É QUE ISTO NÃO ENTROU NA `apoio.css`, QUE JÁ EXISTE.
A `apoio.css` tem uma regra escrita no próprio cabeçalho: só
entram lá classes que vivem nas quatro PÁGINAS de apoio — como
funciona, perguntas, compatibilidade e empresas. Isto não é
uma página: é uma peça fixa que aparece em todas elas.
Há uma segunda razão, e é a que pesou: as duas peças estão a
ser feitas ao mesmo tempo por lados diferentes, e neste
projecto já se perdeu trabalho com dois lados a guardar por
cima um do outro no mesmo ficheiro. Ficheiro próprio, mesmo
nome do bloco e do script, e ninguém pisa ninguém.
===========================================================
===========================================================
SEM `com-js` NÃO SE VÊ NADA. É A REGRA DO MOLDE.
O site inteiro funciona com o JavaScript desligado; uma
conversa ao vivo não pode. O bloco sai no HTML mas só aparece
quando o ganha a classe `com-js` — quem não tem script
continua a ver o botão de baixo, que leva ao WhatsApp, ao
email ou às perguntas sem uma linha de JavaScript.
===========================================================
===========================================================
AS TRÊS MEDIDAS DO CANTO, E NENHUMA É GOSTO.
1. A bolinha tem 56 px, como a de baixo. O mínimo para um alvo
de dedo é 44; e as duas com o mesmo tamanho lêem-se como um
par, não como duas coisas que calharam no mesmo canto.
2. `--apoio-fundo` é a altura a que vive a bolinha, e é UMA
variável porque a janela se mede a partir dela. Escrito em
dois sítios, o dia em que a barra de acção mudasse de
altura deixava a janela a flutuar em cima do nada.
3. A janela leva `z-index: 56`, um ACIMA da barra de acção,
e a bolinha fica nos 54 com a de baixo. É de propósito e é
o contrário da regra da bolinha: uma barra de pagamento por
cima da caixa de escrita é o cliente a escrever às cegas.
Fechada, a janela não existe; aberta, manda ela. E não se
cruzam: quando a barra aparece, a janela sobe com ela.
===========================================================
============================================================= */
/* -------------------------------------------------------------
O CONTENTOR
Não ocupa espaço nenhum: os dois filhos são `fixed`. Existe
para segurar as variáveis de posição, que a bolinha e a janela
herdam, e para o selector de irmão adjacente da barra de acção
as poder mudar às duas de uma vez.
------------------------------------------------------------- */
.apoio-chat {
/* Onde vive a bolinha, medida a partir do fundo do ecrã. A de
baixo está a 16 px e tem 56 de lado; 12 de intervalo.
ATENÇÃO AO NÚMERO 56: a `contacto.css` engorda a bolinha de
baixo para 60 px abaixo dos 560 px de largura, para o dedo
ter mais alvo no telemóvel. Esta folha faz o mesmo à sua, e
por isso o fundo muda nessa largura — está lá em baixo, e as
duas medidas têm de andar juntas. */
--apoio-fundo: calc(84px + env(safe-area-inset-bottom, 0px));
/* A altura da bolinha mais o intervalo até à janela. Sai daqui
e não de dentro do `calc` para não haver dois sítios a
saber de quanto é a bolinha. */
--apoio-salto: 68px;
/* Quanto do ecrã o teclado do telemóvel está a tapar. Quem o
mede é o `apoio.js`, pela `visualViewport`. Fica a zero em
computador e em qualquer navegador que não a tenha. */
--apoio-teclado: 0px;
/* Onde começa a janela: por cima da bolinha, e mais o que o
teclado tapar. */
--apoio-vao: calc(var(--apoio-fundo) + var(--apoio-salto) + var(--apoio-teclado));
display: none;
}
.com-js .apoio-chat { display: block; }
/* -------------------------------------------------------------
A BOLINHA
NÃO é igual à de baixo, e isso é o ponto.
Nasceu branca, do tamanho da outra e com o mesmo fio — duas
bolinhas gémeas, uma por cima da outra, num fundo creme. O
resultado foi o dono abrir o site e dizer que o chat "não
tinha sido colocado". Estava lá, e funcionava: ninguém a via.
Um botão de apoio ao vivo não é decoração no canto — é a saída
de quem está encravado a meio de uma compra. Por isso leva o
amarelo da marca, é maior do que a outra, e a de baixo fica a
ser a discreta. A hierarquia agora vê-se: falar com alguém
primeiro, o resto a seguir.
------------------------------------------------------------- */
.apoio-botao {
position: fixed;
right: 16px;
bottom: var(--apoio-fundo);
z-index: 54;
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
padding: 0;
/* O mesmo fio da de baixo. A `estilo.css` dá-lhe .12 e a
`contacto.css` escurece-o para .18 — se as duas bolinhas
estão lado a lado, não podem ter contornos diferentes. */
border: 1px solid rgba(18, 18, 18, .18);
border-radius: 50%;
/* Amarelo de marca, cheio. A tinta por cima nunca é branca —
sobre este amarelo não se lê, e a regra está no tema. */
background: var(--amarelo);
color: var(--tinta);
/* Uma sombra acima da da outra bolinha: é o que a levanta da
página em vez de a deixar encostada ao fundo. */
box-shadow: var(--sombra-4);
cursor: pointer;
/* Sem o quadrado cinzento do toque no Android. A de baixo já o
tira, e uma a piscar ao lado da outra que não pisca dava a
entender que são coisas diferentes. */
-webkit-tap-highlight-color: transparent;
transition: transform .28s var(--suave), box-shadow .28s var(--suave), bottom .5s var(--saida);
}
.apoio-botao__icone { width: 30px; height: 30px; display: block; }
.apoio-botao:hover { transform: translateY(-2px); box-shadow: var(--sombra-4); }
.apoio-botao:focus-visible {
outline: 2px solid var(--tinta); outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(255, 212, 0, .32);
}
/* ABERTA, INVERTE-SE.
Fechada é amarela para se ver. Aberta, a janela já ocupa o
canto e leva o amarelo dela — duas superfícies amarelas
encostadas lêem-se como uma mancha só, e deixava de se
perceber onde é que se carrega para fechar.
Em tinta, a bolinha destaca-se contra a janela e o gesto de
fechar fica óbvio. */
.apoio-botao[aria-expanded="true"] {
background: var(--tinta);
color: var(--branco);
border-color: var(--tinta);
}
/* -------------------------------------------------------------
QUANTAS RESPOSTAS CHEGARAM COM A JANELA FECHADA
Em tinta e não em vermelho. O `--alerta` é a única cor fora da
paleta e existe para dizer que alguma coisa correu mal; uma
resposta do apoio é a melhor notícia do ecrã.
------------------------------------------------------------- */
.apoio-botao__conta {
position: absolute;
top: -2px; right: -2px;
min-width: 20px; height: 20px;
padding: 0 5px;
box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--rmax);
border: 2px solid var(--branco);
background: var(--tinta);
color: var(--tinta-inv);
font-family: var(--sans);
font-size: .72rem; font-weight: 600; line-height: 1;
}
.apoio-botao__conta[hidden] { display: none; }
/* -------------------------------------------------------------
A JANELA
Em computador é um painel encostado ao canto. No telemóvel
estica em largura mas NUNCA em altura: um chat que toma o ecrã
todo é um chat de que se sai a fechar a página, e a página é
uma loja.
------------------------------------------------------------- */
.apoio-janela {
position: fixed;
left: 12px;
right: 12px;
bottom: var(--apoio-vao);
z-index: 56;
display: flex;
flex-direction: column;
overflow: hidden;
/* Duas linhas para a mesma coisa, e a segunda é que interessa:
`dvh` acompanha a barra do navegador do telemóvel a esconder-se
e a aparecer. A primeira é para quem não a tem. */
max-height: min(560px, calc(100vh - var(--apoio-vao) - 16px));
max-height: min(560px, calc(100dvh - var(--apoio-vao) - 16px));
height: 68vh;
height: 68dvh;
border: 1px solid var(--linha);
border-radius: var(--r3);
background: var(--branco);
box-shadow: var(--sombra-4);
color: var(--tinta);
font-family: var(--sans);
transform-origin: 100% 100%;
transition: opacity .22s var(--suave), transform .28s var(--saida);
}
.apoio-janela[hidden] { display: none; }
/* Fechada por dentro: o `hidden` sai primeiro, a classe entra a
seguir, e a janela cresce do canto de onde foi chamada. */
.apoio-janela:not(.esta-aberta) {
opacity: 0;
transform: translateY(10px) scale(.98);
pointer-events: none;
}
.apoio-janela.esta-aberta { opacity: 1; transform: none; }
/* ABAIXO DOS 560 A BOLINHA ENGORDA, E NÃO É POR GOSTO.
A `contacto.css` faz o mesmo à de baixo — 60 px em vez de 56 —
porque num telemóvel o alvo do dedo agradece uns pixéis a
mais. As duas TÊM de crescer juntas: uma de 56 por cima de uma
de 60 lê-se como um engano, e foi assim que isto apareceu no
ecrã da primeira vez. O fundo sobe 4 px pela mesma conta. */
@media (max-width: 560px) {
.apoio-botao { width: 64px; height: 64px; }
.apoio-botao__icone { width: 30px; height: 30px; }
.apoio-chat {
--apoio-fundo: calc(88px + env(safe-area-inset-bottom, 0px));
--apoio-salto: 72px;
}
}
@media (min-width: 560px) {
.apoio-janela { left: auto; right: 16px; width: 384px; }
}
@media (min-width: 900px) {
.apoio-botao { right: 24px; }
.apoio-janela { right: 24px; }
.apoio-chat { --apoio-fundo: 92px; }
}
/* A barra de acção do telemóvel leva ao pagamento e ganha sempre
o fundo do ecrã. Irmão adjacente e não `:has()`, pela mesma
razão escrita na `estilo.css`: o `:has()` não chega a metade
dos telemóveis que compram aqui. Sobe a bolinha e a janela de
uma vez, porque as duas se medem pela mesma variável. */
.barra-accao.esta-visivel ~ .apoio-chat {
--apoio-fundo: calc(152px + env(safe-area-inset-bottom, 0px));
}
/* A mesma subida, com a bolinha grande. Depois da regra de cima
e com a mesma força, senão perdia — e a janela ficava por cima
do botão de pagar. */
@media (max-width: 560px) {
.barra-accao.esta-visivel ~ .apoio-chat {
--apoio-fundo: calc(156px + env(safe-area-inset-bottom, 0px));
}
}
/* -------------------------------------------------------------
O TOPO DA JANELA
Em `--sans` e não na serifada da marca. Os títulos do site são
Fraunces porque são texto de leitura; isto é uma barra de
ferramentas de 380 px, e a serifada em corpo pequeno dentro de
uma caixa desta largura lê-se pior e pesa mais.
------------------------------------------------------------- */
.apoio-janela__topo {
flex: 0 0 auto;
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 14px 12px 16px;
border-bottom: 1px solid var(--linha);
background: var(--branco);
}
.apoio-janela__quem { flex: 1 1 auto; min-width: 0; }
.apoio-janela__titulo {
margin: 0;
font-family: var(--sans);
font-size: 1rem; font-weight: 600; line-height: 1.25;
letter-spacing: -.01em;
color: var(--tinta);
}
.apoio-janela__nota {
margin: 3px 0 0;
font-size: .82rem; line-height: 1.35;
color: var(--tinta-3);
}
.apoio-fechar {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
margin: -4px -4px 0 0;
padding: 0;
border: 0;
border-radius: var(--r2);
background: transparent;
color: var(--tinta-2);
cursor: pointer;
transition: background .18s var(--suave), color .18s var(--suave);
}
.apoio-fechar svg { width: 20px; height: 20px; display: block; }
.apoio-fechar:hover { background: var(--papel-2); color: var(--tinta); }
.apoio-fechar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* -------------------------------------------------------------
O FIO
Fundo de papel para a caixa de escrita, que é branca, se
destacar dele sem precisar de mais um traço.
------------------------------------------------------------- */
.apoio-fio {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 14px 16px;
background: var(--papel);
display: flex;
flex-direction: column;
gap: 12px;
}
.apoio-fio:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.apoio-vazio {
margin: auto 0;
padding: 8px 0;
font-size: .88rem; line-height: 1.5;
color: var(--tinta-3);
text-align: center;
}
.apoio-vazio[hidden] { display: none; }
/* -------------------------------------------------------------
UMA MENSAGEM
As do cliente à direita e em amarelo; as do apoio à esquerda e
em branco com fio. O amarelo é fundo e a letra fica em tinta —
nunca o contrário, é regra da marca.
`white-space: pre-wrap` é o que faz as mudanças de linha
aparecerem. O `apoio.js` escreve por `textContent`, portanto
um `\n` chega cá como `\n` e não como `
` — e é assim que
se quer: nenhum texto do servidor entra como marcação.
------------------------------------------------------------- */
.apoio-mensagem {
display: flex;
flex-direction: column;
max-width: 86%;
align-self: flex-start;
}
.apoio-mensagem--voce { align-self: flex-end; align-items: flex-end; }
.apoio-mensagem__quem {
margin: 0 0 4px;
padding: 0 2px;
font-size: .72rem; font-weight: 600; line-height: 1;
letter-spacing: .04em; text-transform: uppercase;
color: var(--tinta-3);
}
.apoio-mensagem__balao {
padding: 9px 13px;
border: 1px solid var(--linha);
border-radius: var(--r3);
border-bottom-left-radius: var(--r1);
background: var(--branco);
box-shadow: var(--sombra-1);
}
.apoio-mensagem--voce .apoio-mensagem__balao {
border-color: rgba(18, 18, 18, .10);
border-radius: var(--r3);
border-bottom-right-radius: var(--r1);
background: var(--amarelo);
box-shadow: none;
}
.apoio-mensagem__texto {
margin: 0;
font-size: .92rem; line-height: 1.5;
color: var(--tinta);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.apoio-mensagem__hora {
margin: 4px 0 0;
padding: 0 2px;
font-size: .7rem; line-height: 1;
color: var(--tinta-3);
}
/* -------------------------------------------------------------
O QUE CORREU MAL
Fica ENTRE o fio e a caixa, e não dentro do fio: o que o
cliente escreveu não se apaga nem se mistura com um aviso, e
ele volta a carregar em enviar com o texto ainda lá.
------------------------------------------------------------- */
.apoio-erro {
flex: 0 0 auto;
margin: 0;
padding: 9px 16px;
border-top: 1px solid var(--linha);
background: var(--alerta-fundo);
color: var(--alerta);
font-size: .82rem; line-height: 1.4;
}
.apoio-erro[hidden] { display: none; }
/* -------------------------------------------------------------
A CAIXA DE ESCRITA
------------------------------------------------------------- */
.apoio-forma {
flex: 0 0 auto;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--linha);
background: var(--branco);
}
/* Existe para quem ouve o ecrã. Não é `display: none` — o que
está assim não é lido por leitor nenhum, e então a caixa
ficava sem nome. */
.apoio-etiqueta {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.apoio-caixa {
display: flex; align-items: flex-end; gap: 8px;
padding: 5px 5px 5px 12px;
border: 1px solid var(--linha-forte);
border-radius: var(--r4);
background: var(--branco);
transition: border-color .18s var(--suave), box-shadow .18s var(--suave);
}
.apoio-caixa:focus-within {
border-color: var(--tinta);
box-shadow: 0 0 0 4px var(--amarelo-luz);
}
.apoio-texto {
flex: 1 1 auto;
min-width: 0;
/* 16 px cravados, e é a única medida desta folha que não se
mexe: abaixo disso o iOS aproxima o ecrã sozinho ao tocar na
caixa, e a página fica torta com o teclado aberto. */
font-family: var(--sans);
font-size: 16px;
line-height: 1.45;
color: var(--tinta);
background: transparent;
border: 0;
outline: 0;
resize: none;
padding: 7px 0;
max-height: 108px;
overflow-y: auto;
}
.apoio-texto::placeholder { color: var(--tinta-3); }
.apoio-enviar {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--amarelo);
color: var(--tinta);
cursor: pointer;
transition: background .18s var(--suave), opacity .18s var(--suave), transform .18s var(--suave);
}
.apoio-enviar svg { width: 20px; height: 20px; display: block; }
.apoio-enviar:hover:not(:disabled) { background: var(--amarelo-claro); transform: translateY(-1px); }
.apoio-enviar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* Desligado enquanto a caixa está vazia ou a mensagem vai a
caminho. Fica visível — um botão que desaparece faz a caixa
saltar de largura a cada letra escrita. */
.apoio-enviar:disabled {
background: var(--papel-2);
color: var(--tinta-3);
cursor: default;
}
.apoio-horario {
margin: 8px 2px 0;
font-size: .72rem; line-height: 1.35;
color: var(--tinta-3);
text-align: center;
}
/* -------------------------------------------------------------
QUEM PEDIU PARA O ECRÃ ESTAR QUIETO
Sem animação nenhuma. A janela aparece e desaparece, e é tudo
o que ela tem de fazer.
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.apoio-botao,
.apoio-janela,
.apoio-fechar,
.apoio-caixa,
.apoio-enviar { transition: none; }
.apoio-janela:not(.esta-aberta) { transform: none; }
.apoio-botao:hover { transform: none; }
.apoio-enviar:hover:not(:disabled) { transform: none; }
}
/* Em papel não há conversa nenhuma para ter. */
@media print {
.apoio-chat { display: none !important; }
}
/* -------------------------------------------------------------
ANTES DE COMEÇAR: NOME E EMAIL
Ordem do dono. Aparece uma vez, a quem ainda não tem conversa e
não tem sessão iniciada, e some assim que a primeira mensagem
entra.
Vive DENTRO da mesma `