/* * Pedido por conversa: o chat (#triagem-root) e o cartão do pedido * (#home-pedido-root) que ele preenche. Mora fora do das páginas * porque a mesma experiência roda na home e no /pedido-simplificado — as * regras nasceram na home e viveram um tempo só lá. * * Comportamento: public/assets/js/home-triagem.js (conversa) e * public/assets/js/home-pedido.js (cartão, validação, OTP e envio). * Marcação: src/_includes/global/pedido-chat.njk e pedido-card.njk. * * O que é do hero de cada página (fundo, título, chamada) fica no * head-extra dela: aqui só entra o que as duas telas compartilham. */ /* Chamada da página (#hero-head): sai de cena quando a conversa começa, para a dobra ser toda do chat — no celular ela custava a altura de duas perguntas. Recolhe por altura, e não por `display`, para o chat subir deslizando em vez de dar um salto. A margem negativa anula o `gap` do hero, senão sobraria o vão do elemento recolhido. Quem põe e tira o `is-hidden` é o home-triagem.js. A marca continua no header do site. */ #hero-head { overflow: hidden; max-height: 26rem; transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease; } #hero-head.is-hidden { max-height: 0; opacity: 0; margin-bottom: -1.5rem; } @media (min-width: 640px) { #hero-head.is-hidden { margin-bottom: -1.75rem; } } @media (prefers-reduced-motion: reduce) { #hero-head { transition: none; } } /* Chat de triagem do hero (home-triagem.js) A barra de busca e o chat são o MESMO container: `.triagem-shell` começa como pílula e vira um cartão de conversa quando `.is-chat` entra, com o campo virando o compositor no rodapé. */ .triagem-shell { position: relative; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 2rem; box-shadow: 0 30px 60px -10px rgba(15,23,42,0.18); overflow: hidden; text-align: left; transition: border-radius 0.35s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .triagem-shell:hover, .triagem-shell:focus-within { box-shadow: 0 30px 60px -10px rgba(15,23,42,0.24); border-color: #cbd5e1; } .triagem-shell.is-chat { border-radius: 1.5rem; } .triagem-chat { max-height: 0; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease; padding: 0 1rem; } .triagem-shell.is-chat .triagem-chat { max-height: min(52vh, 420px); opacity: 1; padding: 1rem; border-bottom: 1px solid #f1f5f9; } .triagem-chat > * + * { margin-top: 0.75rem; } /* Campo + ferramentas. Enquanto é busca, os dois ficam empilhados e a linha de baixo é uma prateleira com rótulo; quando vira conversa, a mesma prateleira encolhe para ícones e passa para a esquerda do campo (`row-reverse`), que é onde ela cabe num compositor de chat. */ .triagem-bar { display: flex; flex-direction: column; } .triagem-shell.is-chat .triagem-bar { flex-direction: row-reverse; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem 0.375rem 0.625rem; } .triagem-shell.is-recording .triagem-bar { display: none; } .triagem-composer { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.625rem 0.625rem 1.25rem; } .triagem-shell.is-chat .triagem-composer { flex: 1; min-width: 0; padding: 0 0 0 0.25rem; gap: 0.5rem; } .triagem-shell.is-chat .triagem-composer-icon { display: none; } /* Um botão redondo só: microfone com o campo vazio, enviar assim que aparece texto — a troca é o sinal de que a busca virou conversa. */ .triagem-primary { width: 3rem; height: 3rem; flex: none; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #1bafbf; color: #ffffff; box-shadow: 0 8px 22px rgba(0,196,181,0.32); transition: background 0.2s, opacity 0.2s; } .triagem-primary:hover { background: #158d99; } .triagem-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .triagem-primary.hidden { display: none; } .triagem-shell.is-chat .triagem-primary { width: 2.5rem; height: 2.5rem; box-shadow: 0 6px 18px rgba(0,196,181,0.30); } /* O microfone só entra em cena quando o navegador realmente grava (ver home-triagem.js): sem ele, o botão de enviar fica desde o início. */ .triagem-shell.has-mic:not(.is-typing) #triagem-send { display: none; } .triagem-shell.is-typing #triagem-mic { display: none; } .triagem-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1.25rem 0.75rem; border-top: 1px solid #f1f5f9; } .triagem-tools-group { display: flex; align-items: center; gap: 0.5rem; } .triagem-tool { display: inline-flex; align-items: center; gap: 0.4375rem; flex: none; padding: 0.5rem 0.875rem; border-radius: 9999px; background: #ffffff; border: 1px solid #e2e8f0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8125rem; font-weight: 700; color: #475569; transition: border-color 0.2s, color 0.2s, background 0.2s; } .triagem-tool svg { color: #1bafbf; flex: none; } .triagem-tool:hover { border-color: #1bafbf; color: #106a73; } .triagem-tool:disabled { opacity: 0.4; cursor: not-allowed; } .triagem-tool.hidden { display: none; } /* Cotar material: o pedido ainda não tem esse campo, então o botão existe só como anúncio — cara de caixa desmarcada e apagada, sem reagir ao hover. */ .triagem-material { opacity: 0.6; cursor: not-allowed; } .triagem-material:hover { border-color: #e2e8f0; color: #475569; } .triagem-material-box { display: inline-flex; width: 1.125rem; height: 1.125rem; flex: none; border-radius: 0.375rem; border: 1px solid #cbd5e1; background: #ffffff; } /* Tooltip curto acima do botão. Cabe dentro do `overflow: hidden` do shell porque a prateleira é a última linha do cartão, e é ancorado pela esquerda para não vazar da borda num botão de canto. */ .triagem-tip { position: relative; } .triagem-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 0.5rem); left: 0; padding: 0.375rem 0.625rem; border-radius: 0.5rem; background: #18181b; color: #ffffff; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(0.25rem); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; pointer-events: none; z-index: 20; } .triagem-tip:hover::after, .triagem-tip:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .triagem-tip::after { transition: none; } } .triagem-shell.is-chat .triagem-tools { padding: 0; border-top: none; gap: 0.25rem; } .triagem-shell.is-chat .triagem-tool { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; background: #f1f5f9; border-color: transparent; } .triagem-shell.is-chat .triagem-tool:hover { background: #e5f9fb; } .triagem-shell.is-chat .triagem-tool-label { display: none; } /* Na conversa a prateleira é só ícone, e um anúncio não vale um ícone. */ .triagem-shell.is-chat .triagem-material { display: none; } /* Anexos: mesma lista do formulário de pedido, mostrada dentro do campo. */ .triagem-attachments { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 1.25rem 0.875rem; } .triagem-attachments.hidden { display: none; } .triagem-attach-chip { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; padding: 0.25rem 0.5rem 0.25rem 0.625rem; border-radius: 0.625rem; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.75rem; font-weight: 600; color: #475569; } .triagem-attach-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .triagem-attach-chip button { color: #94a3b8; line-height: 0; } .triagem-attach-chip button:hover { color: #ef4444; } /* O anexo sobe na hora em que é escolhido, então o chip precisa contar em que pé está: pulsando enquanto sobe, vermelho quando falha. */ .triagem-attach-chip.is-uploading { opacity: 0.7; animation: triagem-attach-pulse 1.2s ease-in-out infinite; } .triagem-attach-chip.is-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; } .triagem-attach-retry { flex: none; line-height: 1; text-decoration: underline; font-size: 0.6875rem; font-weight: 700; color: #b91c1c; } .triagem-attach-chip.is-error button:hover { color: #7f1d1d; } @keyframes triagem-attach-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .triagem-attach-chip.is-uploading { animation: none; } } /* Arrastar arquivo para o campo: a camada só existe durante o arrasto, senão ela roubaria os cliques do compositor. */ .triagem-drop { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(224, 252, 249, 0.96); border: 2px dashed #00c4b5; border-radius: inherit; color: #00857c; font-size: 0.875rem; font-weight: 700; } .triagem-shell.is-dragging .triagem-drop { display: flex; } /* Aviso da gravação, fora do cartão para não empurrar o compositor. */ .triagem-voice-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.875rem; background: #fef2f2; border: 1px solid #fecaca; font-size: 0.8125rem; font-weight: 600; color: #b91c1c; } .triagem-voice-error.hidden { display: none; } /* O ícone acompanha a primeira linha do texto: sem o grupo, a frase longa jogaria ele sozinho para a linha de cima. */ .triagem-voice-error-body { display: flex; align-items: flex-start; gap: 0.5rem; flex: 1 1 16rem; min-width: 0; text-align: left; line-height: 1.4; } .triagem-voice-error svg { color: #ef4444; flex: none; margin-top: 0.0625rem; } .triagem-voice-retry { flex: none; padding: 0.3125rem 0.75rem; border-radius: 9999px; background: #ffffff; border: 1px solid #fca5a5; color: #b91c1c; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: background 0.2s; } .triagem-voice-retry:hover { background: #fee2e2; } .triagem-voice-retry.hidden { display: none; } .triagem-recording { display: flex; align-items: center; gap: 0.5rem; height: 3.5rem; padding: 0 0.75rem 0 1.25rem; background: #fef2f2; } .triagem-recording.hidden { display: none; } .triagem-recording-dot { width: 9px; height: 9px; border-radius: 9999px; background: #ef4444; flex-shrink: 0; animation: triagem-rec 1.2s ease-in-out infinite; } @keyframes triagem-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* Fio de progresso enquanto a IA responde */ .triagem-shell.is-loading { position: relative; } .triagem-shell.is-loading::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #00c4b5, #F7B731, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: triagem-sweep 1.1s linear infinite; } @keyframes triagem-sweep { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } } /* Saídas do assistente. Não usa a classe `hidden` do Tailwind de propósito: o CDN injeta o utilitário em outro