/* cardapio-conversa.css — skin "Conversa" (ativado por ?conversa=1). * * Só é baixado por quem entrou pelo link do anúncio: o em index.php é * condicional. As outras lojas não pagam um byte disto. * * PALETA — decisão do Cayu em 09/08, depois de ver a primeira versão com a cor * da loja: o CABEÇALHO e o corpo do bate-papo levam a caracterização do * WhatsApp ("é importante manter essa caracterização para realmente lembrar o * wpp"), e o RODAPÉ fica como está, na cor da loja. * * A primeira versão usava `--cor-topo` (a cor do lojista) em tudo, e ele achou * que perdia o efeito — num Dom Burger vermelho não lembrava conversa nenhuma. * ⚠️ Registro honesto: é exatamente o elemento que o parecer do advogado dele * tocou no Mosaico. Ele foi avisado e decidiu; fica anotado aqui pra quem ler * depois saber que não foi descuido. * * As alturas de header, rodapé e barra do carrinho chegam como --conv-*-h, * MEDIDAS por JS. Os fallbacks aqui existem só pro primeiro frame, antes de o * script rodar — não são a fonte de verdade. */ .cardapio-conversa { --conv-header: #075e54; --conv-eu: #dcf8c6; /* minha mensagem */ --conv-eu-txt: #111b21; --conv-loja-bg: #ffffff; /* mensagem da loja */ --conv-loja-txt: #111b21; --conv-fundo: #ece5dd; /* papel de parede do bate-papo */ --conv-acao: #00a884; /* verde de ação (enviar, escolher) */ --conv-borda: #dcd9d2; --conv-suave: #667781; --conv-barra-h: 60px; } /* `!important` é necessário aqui, não é preguiça: o index.php imprime `background-color:` no atributo STYLE do a partir da cor que a loja escolheu, e estilo inline vence qualquer seletor — só perde para um !important. Sem isto o papel de parede do bate-papo saía branco (medido: rgb(255,255,255) em vez do bege). */ body.cardapio-conversa { background-color: var(--conv-fundo) !important; } /* Cabeçalho da loja com a cara de conversa. Redefine a VARIÁVEL no próprio header em vez de sobrescrever o `background` com !important: as regras de .header-modern são 6 (capa, gradiente, sticky…) e todas leem var(--cor-topo), então trocar a variável acerta as 6 de uma vez e não briga com nenhuma. Definir a custom property no elemento vence o valor herdado do , que vem inline — inline não é herança, é o valor do body; o filho pode redefinir. */ .cardapio-conversa .header-modern { --cor-topo: var(--conv-header); --cor-topo-texto: #ffffff; } /* O padding inferior do body do cardápio (80px) não conta com a barra de digitar NEM com a do carrinho. Sem a segunda, a mensagem "Adicionado ao seu pedido!" nascia atrás da barra que aparecia junto com ela. */ .cardapio-conversa body, body.cardapio-conversa { padding-bottom: calc(var(--conv-base, 58px) + var(--conv-barra-h) + var(--conv-rapidas-h, 46px) + var(--conv-carrinho-h, 0px) + 24px); } .conv-wrap { max-width: 620px; margin: 0 auto; } /* ───────── Chips de categoria (grudam sob o header) ───────── */ .conv-chips { position: sticky; top: var(--conv-header-h, 56px); z-index: 1020; display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; background: var(--conv-fundo); border-bottom: 1px solid var(--conv-borda); /* Esconde a barra de rolagem sem matar o gesto de arrastar. */ scrollbar-width: none; -webkit-overflow-scrolling: touch; } .conv-chips::-webkit-scrollbar { display: none; } .conv-chip { flex: 0 0 auto; border: 1px solid var(--conv-borda); background: #fff; color: var(--conv-loja-txt); border-radius: 50px; padding: 8px 15px; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; } .conv-chip:active { background: var(--conv-fundo); } /* ── Categoria com FOTO ────────────────────────────────────────────────────── * Três pessoas testaram o skin e nenhuma viu a fileira de cápsulas (Cayu, * 09/08). Cápsula branca sobre fundo bege lê como moldura; foto de comida lê * como conteúdo — e é a mesma bolinha que as 81 lojas do Mosaico já usam, então * não é vocabulário novo, é o de casa. * * 52px e não os 64 do Mosaico: lá a fileira é a tela; aqui ela divide espaço com * a conversa, que é o que a pessoa veio ler. Fora quando a loja não tem foto * nenhuma (13 das 38 em produção) — o PHP cai pra cápsula, porque uma sequência * de logos padrão idênticos promete foto e entrega repetição. */ .conv-chips-circ { align-items: flex-start; padding: 8px 14px 6px; gap: 12px; } .conv-circ { flex: 0 0 auto; width: 60px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-family: inherit; text-align: center; } .conv-circ-foto { display: block; width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 50%; overflow: hidden; border: 1px solid var(--conv-borda); padding: 2px; background: #fff; } .conv-circ-foto img, .conv-circ-foto picture { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* A imagem padrão é um LOGO: `cover` recorta e vira logo picotado. */ .conv-circ-foto img.is-default { object-fit: contain; padding: 14%; background: #fafafa; } .conv-circ-nome { display: block; font-size: 10.5px; line-height: 1.2; font-weight: 600; color: var(--conv-loja-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-circ:active .conv-circ-foto { border-color: var(--conv-acao); } /* A mesma fileira DENTRO da bolha de abertura — é aqui que ela é vista. Margens negativas pra usar a largura da bolha inteira, e rolagem própria: conteúdo largo nunca pode fazer a página rolar de lado. */ .conv-cats-msg { display: flex; gap: 8px; margin: 9px -6px 2px; padding: 2px 6px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .conv-cats-msg::-webkit-scrollbar { display: none; } .conv-cats-msg-circ { gap: 11px; } /* Dentro da mensagem o nome pode ocupar DUAS linhas: é onde a descoberta acontece, e "OFERTA ..." não diz o que "OFERTA DO DIA" diz. Na fileira do topo fica em uma linha só — lá a altura é permanente e cara. */ .conv-cats-msg .conv-circ { width: 74px; } .conv-cats-msg .conv-circ-nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* A bolha usa `overflow-wrap: anywhere` (nome de prato sem espaço estourava o body). Herdado aqui, ele partia "HAMBURGER" no meio — "HAMBURGE / R". Nome de categoria quebra entre palavras ou não quebra. */ overflow-wrap: normal; } .conv-abertura-dica { display: block; margin-top: 6px; font-size: 12.5px; color: var(--conv-suave); } /* ───────── O fio da conversa ───────── */ .conv-fluxo { padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; } .conv-msg { display: flex; } .conv-de-loja { justify-content: flex-start; } .conv-de-cliente { justify-content: flex-end; } .conv-bolha { max-width: 85%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; /* Nome de prato sem espaço (COMBO-DUPLO-FRITAS-REFRIGERANTE existe em produção) estourava a bolha e o body inteiro no Mosaico. */ overflow-wrap: anywhere; } .conv-de-loja .conv-bolha { background: var(--conv-loja-bg); color: var(--conv-loja-txt); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .07); } .conv-de-cliente .conv-bolha { background: var(--conv-eu); color: var(--conv-eu-txt); border-bottom-right-radius: 5px; } /* Só a bolha de resposta rápida preserva quebra de linha (o horário da semana sai em linhas). Na bolha comum isso quebraria a saudação, que é HTML indentado pelo servidor e ganharia as quebras do próprio código-fonte. */ .conv-bolha-linhas { white-space: pre-line; } .conv-bolha-link { display: inline-block; margin-top: 4px; color: var(--conv-acao); font-weight: 700; text-decoration: none; } .conv-bolha-link:hover { color: var(--conv-acao); text-decoration: underline; } /* ───────── Carrossel de produtos dentro da resposta ───────── * * Horizontal, e não a lista vertical da primeira versão: uma categoria de 20 * itens empurrava a conversa 20 cards para baixo e o cliente perdia o fio e o * campo de digitar. Deitado, a resposta ocupa a altura de UM card qualquer que * seja o número de itens. * * ⚠️ Rola DENTRO do próprio container. Conteúdo largo nunca pode fazer a página * rolar de lado — é o que o teste de overflow verifica a cada largura. */ .conv-cards { display: flex; gap: 10px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; /* Padding lateral pra sombra do card não ser cortada, e o negativo casa a borda do carrossel com a das bolhas. */ padding: 2px 14px 8px; margin: 0 -14px; /* SEM isto o carrossel nasce rolado em 14px e o primeiro card fica desalinhado das bolhas (medido: scrollLeft=14, card em x=0 contra bolha em x=14). `scroll-snap-align:start` alinha o card ao início do "snapport", que por padrão ignora o padding — então o navegador rola pra compensar. O scroll-padding é o que ensina onde o snapport realmente começa. */ scroll-padding-left: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .conv-cards::-webkit-scrollbar { display: none; } .conv-card { /* 76% e não 100%: o pedaço do próximo card espiando na borda é o que conta que existe mais coisa. Carrossel de card inteiro parece item único. */ flex: 0 0 76%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; background: var(--conv-loja-bg); border: 1px solid var(--conv-borda); border-radius: 14px; padding: 10px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .07); } .conv-card:active { background: #fafbfa; } .conv-card-foto { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--conv-fundo); } /* ── "Ver mais": último SLIDE do carrossel, não botão embaixo ── O gesto continua sendo um só — arrastar. Estreito de propósito (48%): não compete com produto, e deixa entrever que ainda há catálogo depois dele. */ .conv-card-mais { flex: 0 0 48%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--conv-loja-bg); border: 1px dashed var(--conv-borda); border-radius: 14px; padding: 10px; cursor: pointer; color: var(--conv-acao); font-family: inherit; } .conv-mais-icone { font-size: 24px; line-height: 1; } .conv-mais-txt { font-size: 14px; font-weight: 800; } .conv-mais-n { font-size: 12px; color: var(--conv-suave); font-weight: 600; } .conv-de-loja > .conv-cards { max-width: 100%; } .conv-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* A imagem padrão do sistema é um LOGO: `cover` recorta e vira logo picotado. */ .conv-card-foto img.is-default { object-fit: contain; padding: 10px; } /* minmax(0,…) e não `auto`: sem isto, nome longo sem espaço estica a coluna e arrebenta o card — exatamente o bug que só apareceu com dado de produção. */ .conv-card-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; } .conv-card-nome { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--conv-loja-txt); overflow-wrap: anywhere; } .conv-card-desc { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--conv-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .conv-card-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; } .conv-preco { font-size: 15px; font-weight: 800; color: var(--cor-preco, #1a9e3f); } .conv-preco-opcoes { font-size: 13.5px; font-weight: 700; color: var(--conv-suave); } .conv-preco-de { font-size: 12.5px; font-weight: 600; color: var(--conv-suave); } .conv-preco-por { color: #ea580c; } /* Contorno e não preenchido: medido no beta com a cor real de uma loja, o botão sólido tinha o mesmo peso visual do PREÇO e os dois brigavam no mesmo canto. Quem decide a compra é o preço; o botão só precisa dizer para onde ir — e o card inteiro é clicável de qualquer forma. */ .conv-add { flex: 0 0 auto; background: transparent; color: var(--conv-acao); border: 1.5px solid var(--conv-acao); border-radius: 50px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; line-height: 1.2; } /* ───────── Convite pra ver o cardápio completo (a saída) ───────── * * Formato de peça de anúncio — imagem em cima, texto e botão embaixo — e não um * link solto no meio do papo. Decisão do Cayu (09/08): a troca de modo não pode * ser abrupta. Como card, a saída chega como mais uma mensagem, no ritmo da * conversa, e quem decide sair é o dedo dele no botão. * * ⚠️ Peça honesta, não falso anúncio: nada de "OFERTA", selo de desconto ou * preço riscado. É a loja mostrando o próprio cardápio — o mesmo critério que * proíbe este skin de se apresentar como robô. * * Largura menor que a bolha (300px contra 85%) de propósito: card de mídia * ocupando a linha inteira parece anúncio intrusivo; menor, parece link * compartilhado. O canto inferior esquerdo reto casa com o rabicho das * mensagens da loja. */ .conv-ads { width: min(300px, 85%); background: var(--conv-loja-bg); border: 1px solid var(--conv-borda); border-radius: 16px; border-bottom-left-radius: 5px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .09); } /* Mosaico 2×2 com fotos REAIS do catálogo (clonadas do DOM pelo JS). É o argumento do convite: "o cardápio completo tem cara disto". `gap` com fundo da borda desenha as linhas sem precisar de border em cada célula. */ .conv-ads-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--conv-borda); aspect-ratio: 16 / 10; } /* Neutraliza o que o card de produto define — aqui a célula é do tamanho da grade, não 4/3 com canto arredondado. */ .conv-ads-grade .conv-card-foto { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; min-height: 0; } .conv-ads-capa { aspect-ratio: 16 / 10; background: var(--conv-fundo); } .conv-ads-capa img { width: 100%; height: 100%; object-fit: cover; display: block; } .conv-ads-corpo { padding: 12px 14px 12px; } .conv-ads-tit { margin: 0 0 3px; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--conv-loja-txt); } .conv-ads-sub { margin: 0 0 11px; font-size: 12.5px; line-height: 1.35; color: var(--conv-suave); } /* Sólido, ao contrário do "Escolher" do card de produto — lá o botão não podia brigar com o preço; aqui ele É a única ação da peça. */ .conv-ads-btn, .conv-ads-btn:hover, .conv-ads-btn:focus { display: block; text-align: center; background: var(--conv-acao); color: #fff; border-radius: 50px; padding: 11px 14px; font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none; } .conv-ads-btn:active { opacity: .88; } /* A recusa precisa existir e precisa ser secundária. Sem ela, o convite automático (o que a loja oferece sem ser pedido) viraria empurrão — e quem está gostando da conversa ficaria sem como dizer isso. */ .conv-ads-nao { display: block; width: 100%; margin-top: 6px; padding: 8px 4px 2px; background: none; border: none; color: var(--conv-suave); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } /* ───────── Respostas rápidas (acima do campo de digitar) ───────── * * A saída morava no topo, grudada à direita da fileira de categorias, e tinha * dois defeitos que o Cayu pegou (09/08): discreta demais e com as categorias * passando por baixo dela. Somando: o canto superior direito é o ponto mais * difícil de alcançar com o polegar num celular — lugar ruim pra porta de saída. * * Aqui é o idioma do próprio meio: sugestão de resposta acima do campo é o que * todo mensageiro faz. Deixa de ser cromo e vira conversa, fica na zona do * polegar, e a fileira de categorias volta a ser só categorias. */ .conv-rapidas { position: fixed; left: 0; right: 0; /* Quarta camada fixa, empilhada sobre a barra de digitar. Todas as alturas vêm da medição por JS: o número de chips muda por loja e a barra de baixo cresce com o safe-area do iPhone. */ bottom: calc(var(--conv-base, 58px) + var(--conv-barra-h)); z-index: 1044; /* logo abaixo da barra de digitar */ display: flex; gap: 7px; overflow-x: auto; padding: 7px 12px; background: var(--conv-fundo); border-top: 1px solid var(--conv-borda); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .conv-rapidas::-webkit-scrollbar { display: none; } .conv-rapida { flex: 0 0 auto; border: 1px solid var(--conv-borda); background: #fff; color: var(--conv-loja-txt); border-radius: 50px; padding: 7px 13px; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.15; white-space: nowrap; cursor: pointer; } .conv-rapida:active { background: #f1efeb; } /* A saída vem primeiro e é a única com cor: ela TROCA DE MODO, as outras respondem. Coisas diferentes não podem parecer a mesma coisa — foi o que tornou o botão anterior invisível, parecendo mais um enfeite do topo. */ .conv-rapida-sair { border-color: var(--conv-acao); color: var(--conv-acao); font-weight: 800; } .conv-rapida-sair i { margin-right: 3px; font-size: 12px; } /* Um respiro separando a saída das perguntas, sem desenhar uma linha. */ .conv-rapida-sair { margin-right: 5px; } /* ── Teclado aberto: só o campo fica ── Com o teclado na tela sobra pouco mais de um terço dela, e ali cabiam três camadas de cromo: respostas rápidas, campo e os 7 atalhos do rodapé. Quem está escrevendo não vai tocar em nenhum dos dois extremos — some com eles e a conversa respira. A classe entra pelo JS, que é quem sabe do teclado (`visualViewport`); some sozinha quando ele fecha. */ .cardapio-conversa.conv-teclado .conv-rapidas, .cardapio-conversa.conv-teclado .bottom-action-bar { display: none; } /* Com o teclado aberto a barra sobe pela diferença entre a janela de layout (à qual `position:fixed` se ancora) e a área realmente visível — senão ela fica presa a uma borda fora da tela e "desce" a cada rolagem. O valor vem medido do JS e é 0 onde as duas janelas coincidem, então isto não muda nada nesses aparelhos. */ .cardapio-conversa.conv-teclado .conv-barra { transform: translateY(calc(-1 * var(--conv-teclado-shift, 0px))); } /* ───────── Barra de digitar (campo + enviar, nada mais) ───────── */ .conv-barra { position: fixed; left: 0; right: 0; /* Empilha ACIMA da .bottom-action-bar em vez de escondê-la: Ofertas e Cupom moram lá e são dinheiro. Altura vinda da medição, não chutada — em iPhone com notch o env(safe-area-inset-bottom) muda esse número. */ bottom: var(--conv-base, 58px); z-index: 1045; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--conv-borda); box-shadow: 0 -2px 14px rgba(0, 0, 0, .05); } /* O botão que abre a folha de categorias, no lugar do clipe de papel do WhatsApp — que este skin deixava vazio porque ícone sem destino é promessa falsa. Agora tem destino, e ganhou o melhor imóvel da tela: ao lado de onde o olho já está, no alcance do polegar. Foi pra cá depois de a fileira do topo falhar o teste do olho TRÊS vezes, com três formas diferentes. SÓLIDO, não contorno: a primeira versão tinha borda fina sobre fundo branco e sumia ao lado do botão de enviar, que é um círculo cheio — os testadores acharam, mas apontaram que estava discreto demais. Leva o verde do CABEÇALHO (#075e54) e não o verde de ação (#00a884): mesmo PESO do enviar, então é encontrado; VALOR diferente, então não disputa o papel de ação principal. Dois círculos iguais fariam o enviar perder a singularidade. Preto com traços amarelos foi cogitado e daria mais contraste ainda, mas seria o único par preto-e-amarelo do skin — coloração de aviso, lê como corpo estranho ou anúncio. */ .conv-opcoes { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--conv-header); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .conv-opcoes:active { opacity: .85; } /* ───────── Folha de categorias (list message) ───────── */ .conv-folha { position: fixed; inset: 0; z-index: 1100; } .conv-folha[hidden] { display: none; } .conv-folha-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } .conv-folha-painel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px 18px 0 0; /* Respeita o notch de baixo: sem isto o último item fica sob a barra do iPhone. */ padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 26px rgba(0, 0, 0, .22); animation: convFolhaSobe .18s ease-out; } @keyframes convFolhaSobe { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } } @media (min-width: 700px) { .conv-folha-painel { max-width: 620px; margin: 0 auto; } } .conv-folha-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--conv-borda); } .conv-folha-titulo { font-size: 15px; font-weight: 800; color: var(--conv-loja-txt); } .conv-folha-x { border: 0; background: none; color: var(--conv-suave); font-size: 18px; cursor: pointer; padding: 4px 4px 4px 12px; line-height: 1; } .conv-folha-lista { overflow-y: auto; -webkit-overflow-scrolling: touch; } .conv-folha-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid #f1efec; background: none; font-family: inherit; text-align: left; cursor: pointer; } .conv-folha-item:last-child { border-bottom: 0; } .conv-folha-item:active { background: #f6f5f3; } .conv-folha-foto { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--conv-fundo); display: block; } .conv-folha-foto img, .conv-folha-foto picture { width: 100%; height: 100%; object-fit: cover; display: block; } .conv-folha-foto img.is-default { object-fit: contain; padding: 8px; background: #fafafa; } /* min-width:0 pra nome comprido truncar em vez de esticar a linha. */ .conv-folha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .conv-folha-nome { font-size: 14.5px; font-weight: 700; color: var(--conv-loja-txt); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-folha-n { font-size: 12px; color: var(--conv-suave); } .conv-folha-seta { flex: 0 0 auto; color: var(--conv-borda); font-size: 13px; } /* Trava a página atrás da folha: rolar o fundo com a folha aberta é o jeito mais rápido de perder o lugar na conversa. */ body.conv-folha-aberta { overflow: hidden; } .conv-input { flex: 1; min-width: 0; border: 1px solid var(--conv-borda); border-radius: 50px; padding: 11px 16px; /* 16px não é estética: abaixo disso o iOS dá zoom ao focar e desalinha a tela inteira. Já mordeu no checkout do Mosaico. */ font-size: 16px; background: #fff; color: var(--conv-loja-txt); outline: none; } .conv-input:focus { border-color: var(--conv-acao); } .conv-enviar { flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--conv-acao); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .conv-enviar:active { opacity: .85; } /* A barra do carrinho sobe pra não cobrir a barra de digitar. Ela só existe quando há item, então as 3 barras só coexistem no momento em que o carrinho é, de longe, a coisa mais importante da tela. */ .cardapio-conversa .cart-float { bottom: calc(var(--conv-base, 58px) + var(--conv-barra-h) + var(--conv-rapidas-h, 46px) + 6px); } /* ───────── O que NÃO cabe numa conversa ───────── * * Rodapé da loja e o convite do Indicaê são renderizados por include/fundo.php * DEPOIS do conteúdo do skin. Numa grade eles são o fim natural da página; num * bate-papo eles caem ENTRE a última mensagem e o campo de digitar — medido no * beta, com a conversa vazia os dois apareciam colados na saudação, parecendo * parte do diálogo. A regra de um chat é simples: a última mensagem encosta no * campo. Nada pode se meter ali. * * O que eles davam continua no ar: identidade da loja está no header, e os * atalhos (incl. Ofertas e Cupom) na .bottom-action-bar, que fica. * ⚠️ Isto esconde o "Powered by 67food" NESTE skin — é decisão de marca, não * técnica. Reverter é apagar a linha do .footer-mini abaixo. */ .cardapio-conversa .footer-mini, .cardapio-conversa .cardapio-creator-cta { display: none; } /* A regra que escondia a `.fav-bar` neste skin saiu em 22/08 junto com a própria faixa, que deixou de existir em todas as skins — o Curtir mudou para a fileira de ícones do header e o selo de influencer foi removido. O motivo de 09/08 continua valendo e agora vale sozinho: curtir no meio de um atendimento é gesto de outra tela — só que hoje isso custa um ícone, não uma faixa de 46px. */ /* ───────── Catálogo-fonte ───────── */ /* Escondido por CLASSE e não pelo atributo `hidden`: se este arquivo falhar em carregar, o cliente cai num cardápio feio porém inteiro, em vez de numa página com uma saudação e nada mais. */ .conv-catalogo { display: none; } /* ───────── Telas maiores ───────── */ @media (min-width: 700px) { .conv-barra { max-width: 620px; margin: 0 auto; border-radius: 14px 14px 0 0; border: 1px solid var(--conv-borda); border-bottom: none; } /* As respostas rápidas eram a ÚNICA das três camadas sem teto de largura: medido em 768px, o conteúdo e a barra ficavam em x=74 e elas começavam em x=0, atravessando a tela. Ficavam sem relação nenhuma com a conversa que deveriam acompanhar — é o desalinhamento que o Cayu apontou no print, e ele não começa no desktop: começa aqui, aos 700px. */ .conv-rapidas { max-width: 620px; margin: 0 auto; } .conv-cards { max-width: 78%; } } /* HEADER DA CONVERSA — verde de app de mensagem (2026-08-16). `--conv-header` existia desde o começo do skin e NUNCA foi usado por regra nenhuma: a cor foi decidida, escrita e nunca aplicada. O header é o `.header-modern` compartilhado, então sem isto ele vinha com `--cor-topo` da loja (vermelho de fábrica) — e, no Moderno, com a foto de capa por cima. Tudo na tela dizia "conversa" menos a única faixa que o cliente vê primeiro. `!important` porque o `.header-capa` do Moderno chega com background-image inline, e inline vence especificidade. O conserto do PHP já impede a imagem de ser emitida; isto é a segunda linha de defesa, para o dia em que outro caminho escrever a capa de novo. */ .cardapio-conversa .header-modern{ background: var(--conv-header) !important; background-image: none !important; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .cardapio-conversa .header-modern .header-name, .cardapio-conversa .header-modern .header-subline, .cardapio-conversa .header-modern a, .cardapio-conversa .header-modern i{ color: #fff; } /* ── "Tem promoção?" ───────────────────────────────────────────────────────── O chip fica ao lado das outras perguntas, mas com um traço de destaque: é a única da fileira que anuncia dinheiro na mesa. Menos peso que o de SAIR, que troca de modo — a hierarquia da fileira continua sendo saída > oferta > FAQ. */ .conv-rapida-promo { border-color: #e11d48; color: #be123c; font-weight: 800; } /* Os cupons dentro da bolha da loja. Lista, não ticket: o ticket (com recorte, código e o botão COPIAR) já existe no modal do rodapé, e o botão abaixo leva até ele. Duas implementações de "copiar cupom" divergiriam na primeira mudança. → funcoes/CupomRotulo.php */ .conv-cupons { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; } /* Código EM CIMA, descrição embaixo — e não lado a lado. Lado a lado funciona até aparecer um código real: "MICHAELJACKSONCORUMBA" (Dom Burger, produção) come dois terços da largura e espreme a regra do cupom numa coluna de três palavras por linha. Empilhar custa uma linha e não tem caso ruim. */ .conv-cupom { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 9px; background: rgba(225, 29, 72, .06); border: 1px dashed rgba(225, 29, 72, .35); } .conv-cupom-cod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 800; color: #be123c; letter-spacing: .5px; overflow-wrap: anywhere; /* código longo quebra em vez de estourar a bolha */ } .conv-cupom-txt { font-size: 12.5px; line-height: 1.35; } .conv-cupom-btn { margin-top: 9px; width: 100%; border: 1px solid var(--conv-acao); border-radius: 9px; background: transparent; color: var(--conv-acao); font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; cursor: pointer; } .conv-cupom-btn:active { background: rgba(0, 0, 0, .04); } /* ── Esgotado ──────────────────────────────────────────────────────────────── * A Conversa é onde o cliente pergunta pelo prato PELO NOME. Esconder o item * que acabou faria o bate-papo responder "não achei nada" sobre algo que a loja * vende — a pior resposta que ele pode dar. Marcado, a resposta é a verdadeira: * existe, e acabou. Decisão completa no bloco "ESGOTADO" do cardapio.css. */ .conv-esgotado .conv-card-foto img{filter:grayscale(.65);opacity:.72} .conv-esgotado .conv-card-nome{opacity:.78} .conv-esgotado .conv-preco{color:#6b7280} .conv-tag-esgotado{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:#fee2e2;color:#b3261e;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;vertical-align:middle} .conv-add-off{background:#e5e7eb;color:#6b7280;cursor:not-allowed} /* A foto do card "Ver o cardápio completo" leva ao mesmo lugar do botão (Cayu, 27/08). Era a parte que mais chama o olho e a única que não clicava. `display:block` porque o embrulha a grade/capa, que são blocos. */ .conv-ads-foto-link { display: block; cursor: pointer; } .conv-ads-foto-link:focus-visible { outline: 2px solid var(--cor-primaria, #d62828); outline-offset: 2px; } /* A coluna de categorias não existe fora do desktop — o ☰ da barra continua sendo o caminho, como sempre foi. Vem ANTES da media query de propósito: mesma especificidade, e a última declarada venceria. */ .conv-lateral { display: none; } /* ═══════════ DESKTOP: coluna de categorias + conteúdo contido ═══════════ Pedido do Cayu (27/08/2026): no desktop, a coluna da esquerda do WhatsApp Web — que lá lista contatos — aqui lista as CATEGORIAS. O que estava errado antes, medido em 1600px: a conversa era uma coluna de 620px no meio, mas `.conv-rapidas` atravessava os 1600px inteiros começando na borda esquerda (ela é a única das três camadas fixas sem `max-width`). Resultado: as perguntas rápidas não tinham relação nenhuma com a conversa que deveriam acompanhar, e sobrava tela vazia dos dois lados. 🔑 O ALINHAMENTO SAI DE GRAÇA porque os três se posicionam no MESMO retângulo: a coluna ocupa os primeiros `--conv-lat-w`, e conteúdo, respostas rápidas e barra de digitar centralizam no que sobra (`left: --conv-lat-w` + `margin:auto` com o mesmo teto). Não há número repetido para divergir depois. 1024px e não 700px: abaixo disso a coluna comeria a conversa. Entre 700 e 1024 continua valendo o layout de uma coluna só, que já existia. */ @media (min-width: 1024px) { .cardapio-conversa { /* Calibrado contra um print do WhatsApp Web real que o Cayu mandou (27/08): lá o painel esquerdo ocupa ~33% da janela; o nosso, com 320px fixos, ficava em 20% e parecia apertado ao lado dele. `clamp` porque proporção pura quebra nas pontas: em 1024 daria 307px (nome de categoria cortado) e num monitor ultrawide passaria de 700px de lista vazia. */ --conv-lat-w: clamp(320px, 30%, 480px); } .conv-lateral { display: flex; flex-direction: column; position: fixed; top: var(--conv-header-b, var(--conv-header-h, 56px)); left: 0; bottom: 0; width: var(--conv-lat-w); background: var(--cor-branco, #fff); border-right: 1px solid var(--conv-borda); z-index: 1015; /* abaixo da folha e do carrinho, acima do fluxo */ } .conv-lateral-tit { margin: 0; padding: 16px 18px 10px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--cor-texto-leve, #555); } /* A lista rola sozinha: loja com 30 categorias não pode empurrar nada. */ .conv-lateral-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; } .conv-lat-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; border: 0; background: none; text-align: left; cursor: pointer; transition: background .15s ease; } .conv-lat-item:hover { background: rgba(0, 0, 0, .04); } .conv-lat-item:focus-visible { outline: 2px solid var(--cor-primaria, #d62828); outline-offset: -2px; } .conv-lat-foto { flex: 0 0 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--conv-fundo); } .conv-lat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .conv-lat-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* `min-width:0` acima + isto: nome longo corta com reticências em vez de empurrar a contagem para fora da coluna. */ .conv-lat-nome { font-size: 14px; font-weight: 600; color: var(--cor-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-lat-n { font-size: 12px; color: var(--cor-texto-leve, #555); } /* ── O conteúdo ocupa TODO o resto, como no WhatsApp Web ── Tinha um teto de 900px centralizado, e o Cayu comparou com a referência: "o body da conversa é largura full no wpp web e no nosso não está full". Sem teto, o alinhamento fica trivial — os três simplesmente começam onde a coluna termina. */ .conv-wrap { max-width: none; padding-left: var(--conv-lat-w); margin: 0; } .conv-rapidas, .conv-barra { left: var(--conv-lat-w); max-width: none; margin: 0; } /* Respiro à direita: encostadas na borda, a barra de digitar e a última resposta rápida ficavam coladas no fio da tela — e o chip da ponta aparecia cortado ao meio, como se a fileira estivesse quebrada em vez de rolável. O WhatsApp Web também afasta o campo da borda. */ .conv-barra { margin-right: 24px; } .conv-rapidas { padding-right: 24px; } /* ⚠️ Full width é da ÁREA, não do balão: numa área de 1400px um balão de 85% viraria uma linha de texto de 1190px — ilegível, e o WhatsApp Web também não faz isso. O teto em px segura a linha num comprimento que se lê. 🔴 O TETO VAI NA BOLHA, NUNCA NA `.conv-msg`. Botei nela primeiro e o Cayu pegou na hora: "a mensagem enviada pelo cliente está indo centralizada quando deveria ir alinhada aqui na direita". A `.conv-msg` NÃO é o balão — é a faixa de largura total que empurra o balão para um lado (`.conv-de-cliente { justify-content: flex-end }`). Com teto nela, a faixa encolhia para 680px e o balão ia para o fim DESSES 680, parando no meio da tela. O alinhamento à direita depende da faixa continuar inteira. */ .conv-bolha { max-width: min(85%, 680px); } /* ── O RODAPÉ DE ATALHOS MUDA-SE PARA O PÉ DA COLUNA ── Pedido do Cayu (27/08): "temos espaço para posicionar esse footer na coluna de conversas ali embaixo mesmo, continua sendo footer, mas ganhamos espaço na tela de conversa". Ele continua sendo o mesmo rodapé, com os mesmos 5 atalhos e o mesmo comportamento — só troca de coluna. E a conversa recupera os 58px que ele ocupava na largura inteira: no desktop essa faixa atravessava a tela toda para 5 ícones que cabem folgados na coluna. A coluna reserva o espaço com `padding-bottom`, porque o rodapé é `fixed` e não é filho dela — sem isso a última categoria ficaria escondida atrás. */ .cardapio-conversa .bottom-action-bar { left: 0; right: auto; width: var(--conv-lat-w); border-top: 1px solid var(--conv-borda); border-right: 1px solid var(--conv-borda); } .conv-lateral { padding-bottom: var(--conv-base, 58px); } /* ── HEADER: cada coisa alinhada à sua coluna ── Pedido do Cayu (27/08): "podemos melhorar o posicionamento da logo e nome da loja e a cápsula de aberto/fechado e curtir e perfil". A causa era o `.header-inner`, que é `max-width:800px; margin:auto` — num monitor de 1600px isso o deixava numa faixa central de 400 a 1200, **sem relação com nenhuma das duas colunas**: a logo flutuava no meio da tela e as ações caíam no meio da conversa. É o que o print mostra. No desktop ele passa a ocupar a largura toda: a logo e o nome da loja encostam à esquerda, no mesmo eixo do título "CATEGORIAS" (18px), e a cápsula aberto/fechado + curtir + perfil vão para a direita, no mesmo respiro de 24px da barra de digitar. Cada metade do header passa a pertencer à coluna que está embaixo dela — que é o que o WhatsApp Web faz. */ .cardapio-conversa .header-inner { max-width: none; padding-left: 18px; padding-right: 24px; } /* A faixa de aviso da loja é `static` e ocupava a largura inteira, então a coluna (que é `fixed`) passava por cima e comia o começo do texto — no print, "Obra na rua" aparecia como "a na rua". Ela acompanha a conversa, que é onde o cliente está lendo. */ .cardapio-conversa .aviso-faixa { margin-left: var(--conv-lat-w); } /* ⚠️ Os 58px recuperados são reivindicados EXPLICITAMENTE, não zerando `--conv-base`: quem escreve essa variável é o JS, em `document.body.style`, e estilo inline vence qualquer regra daqui. Então as três medidas que dependiam dela passam a se ancorar direto no fim da tela. */ .conv-barra { bottom: 0; } .conv-rapidas { bottom: var(--conv-barra-h, 60px); } /* 🔴 O padding que reserva o espaço das camadas fixas mora no BODY (`.cardapio-conversa body`), NÃO no `.conv-wrap`. Eu li aquele bloco e ajustei o wrap: as duas reservas passaram a SOMAR — 194px do body + 136 que acrescentei — e sobravam 226px de vazio depois da última mensagem. Foi o que o Cayu viu: "ao terminar uma conversa, se rolar a página ela sobe demais". Aqui a reserva certa é a mesma de sempre MENOS o `--conv-base`: o rodapé de atalhos saiu da área da conversa e foi para o pé da coluna, então esses 58px deixaram de ser espaço a reservar. */ .cardapio-conversa body, body.cardapio-conversa { padding-bottom: calc(var(--conv-barra-h, 67px) + var(--conv-rapidas-h, 46px) + var(--conv-carrinho-h, 0px) + 24px); } /* ── Carrossel: 2 cards e meio, não 1 e um terço ── `.conv-card` é `flex: 0 0 76%` — número pensado para o CELULAR, onde um card inteiro mais a espiada do próximo é exatamente o certo. Herdado no desktop, com a área muito maior, os cards viraram blocos de ~530px e só cabia 1 e 1/3 (o Cayu contou no print). 38% devolve a regra: dois inteiros e a metade do terceiro à vista. E o teto em px impede que num monitor muito largo o card cresça de novo até virar pôster. */ .conv-cards { max-width: none; } .conv-card { flex: 0 0 38%; max-width: 320px; } .conv-card-mais { flex: 0 0 24%; max-width: 200px; } }