/**
* CONCIERGE — Assistente Virtual de Alta Conversão
* Arquivo: assistant.css (Corpo) · v1.0.0
* Autor: Samuel Soares · DevCode — devcode-samuelsoares.com.br
*
* ESCOPO ABSOLUTO: todo seletor começa com .dc-bot-. O CSS não vaza para a
* página e a página não vaza para dentro dele (reset local no container).
* DESATIVAR: remover a tag do .
*
* Cores herdadas dos tokens do ATELIER via var() com fallback — assim o
* widget acompanha automaticamente a troca de tema claro/escuro do site.
*/
.dc-bot-container {
/* Tokens locais espelhando o design system (fallback = tema escuro) */
--dcb-primary: var(--marca-azul, #2563eb);
--dcb-primary-soft: var(--marca-azul-suave, #60a5fa);
--dcb-accent: var(--marca-ambar, #f59e0b);
--dcb-whats: var(--whats, #25d366);
--dcb-surface: var(--cor-cartao-solido, #0d1623);
--dcb-surface-alt: var(--cor-fundo-2, #0a0f1a);
--dcb-text: var(--cor-texto, #f8fafc);
--dcb-text-2: var(--cor-texto-2, #cdd8e6);
--dcb-muted: var(--cor-texto-4, #91a4c0);
--dcb-border: var(--cor-borda, rgba(255, 255, 255, 0.08));
--dcb-radius: var(--raio-g, 1.75rem);
--dcb-radius-sm: var(--raio-p, 0.75rem);
--dcb-shadow: var(--sombra-funda, 0 1.875rem 3.75rem -1.25rem rgba(0, 0, 0, 0.7));
--dcb-ease: var(--suaviza, cubic-bezier(0.16, 1, 0.3, 1));
--dcb-spring: var(--suaviza-mola, cubic-bezier(0.34, 1.56, 0.64, 1));
--dcb-font: var(--fonte-corpo, "DM Sans", system-ui, sans-serif);
--dcb-font-display: var(--fonte-display, "Syne", system-ui, sans-serif);
position: fixed;
inset-block-end: 0;
inset-inline-end: 0;
z-index: 2147483001; /* topo absoluto — Kernel §9 */
font-family: var(--dcb-font);
contain: layout style;
pointer-events: none; /* só os filhos capturam */
}
.dc-bot-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: inherit;
}
/* ══════════════════════════════════════════════════════════════════
FAB — botão flutuante único da página
══════════════════════════════════════════════════════════════════ */
.dc-bot-fab {
position: fixed;
inset-block-end: max(1.5rem, env(safe-area-inset-bottom));
inset-inline-end: 1.5rem;
inline-size: 3.5rem;
block-size: 3.5rem;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--dcb-primary-soft) 40%, transparent);
background: linear-gradient(145deg, var(--dcb-primary), var(--dcb-surface));
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
pointer-events: auto;
box-shadow: var(--dcb-shadow);
transition:
transform 0.28s var(--dcb-spring),
box-shadow 0.28s var(--dcb-ease),
opacity 0.4s var(--dcb-ease);
/* Entrada única e suave. Sem pulse eterno (notification fatigue). */
opacity: 0;
transform: scale(0.6) translateY(0.75rem);
}
.dc-bot-fab.is-pronto {
opacity: 1;
transform: scale(1) translateY(0);
}
.dc-bot-fab:hover {
transform: scale(1.06);
box-shadow: 0 1rem 2rem -0.5rem color-mix(in srgb, var(--dcb-primary) 45%, transparent);
}
.dc-bot-fab:active {
transform: scale(0.96);
}
.dc-bot-fab:focus-visible {
outline: 2px solid var(--dcb-primary-soft);
outline-offset: 3px;
}
.dc-bot-fab svg {
inline-size: 1.5rem;
block-size: 1.5rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.dc-bot-fab .dc-bot-fab-fechar { display: none; }
.dc-bot-container.is-aberto .dc-bot-fab .dc-bot-fab-abrir { display: none; }
.dc-bot-container.is-aberto .dc-bot-fab .dc-bot-fab-fechar { display: block; }
/* ══════════════════════════════════════════════════════════════════
RÓTULO DO FAB — "Precisa de ajuda?"
Um balão sem texto não comunica o que faz. Este rótulo aparece no
hover/foco e, uma vez por sessão, sozinho como convite.
É clicável: aumenta a área de toque e abre o assistente.
══════════════════════════════════════════════════════════════════ */
.dc-bot-fab-rotulo {
position: fixed;
inset-block-end: max(1.5rem, env(safe-area-inset-bottom));
/* Ancorado à direita, encostando no FAB (3,5rem + 1,5rem + folga). */
inset-inline-end: 5.75rem;
display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
block-size: 3.5rem; /* alinha com o centro do FAB */
padding: 0 1rem;
border-radius: 999px;
border: 1px solid var(--dcb-border);
background: color-mix(in srgb, var(--dcb-surface) 92%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--dcb-shadow);
color: var(--dcb-text);
font-family: var(--dcb-font);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
pointer-events: auto;
/* Escondido por padrão: entra por hover ou pela classe de convite. */
opacity: 0;
visibility: hidden;
transform: translateX(0.75rem);
transition:
opacity 0.28s var(--dcb-ease),
transform 0.28s var(--dcb-ease),
visibility 0.28s;
}
/* Aparece no hover do FAB, no foco por teclado, ou como convite único. */
.dc-bot-fab:hover ~ .dc-bot-fab-rotulo,
.dc-bot-fab:focus-visible ~ .dc-bot-fab-rotulo,
.dc-bot-fab-rotulo:hover,
.dc-bot-fab-rotulo.is-convite {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* Com o painel aberto o rótulo não faz sentido — some sempre. */
.dc-bot-container.is-aberto .dc-bot-fab-rotulo {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none;
}
/* No mobile não existe hover — o convite automático é justamente onde
ele mais importa. Só encolhe um pouco para não disputar a tela. */
@media (max-width: 30em) {
.dc-bot-fab-rotulo {
font-size: 0.8125rem;
padding: 0 0.85rem;
inset-inline-end: 5.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.dc-bot-fab-rotulo {
transition-duration: 0.01ms;
transform: none;
}
}
/* ══════════════════════════════════════════════════════════════════
PAINEL
══════════════════════════════════════════════════════════════════ */
.dc-bot-panel {
position: fixed;
inset-block-end: calc(max(1.5rem, env(safe-area-inset-bottom)) + 4.25rem);
inset-inline-end: 1.5rem;
inline-size: min(23.5rem, calc(100vw - 3rem));
block-size: min(34rem, calc(100dvh - 8rem));
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--dcb-radius);
border: 1px solid var(--dcb-border);
background: color-mix(in srgb, var(--dcb-surface) 88%, transparent);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
box-shadow: var(--dcb-shadow);
pointer-events: auto;
opacity: 0;
visibility: hidden;
transform: scale(0.94) translateY(1rem);
transform-origin: bottom right;
/* Saída mais rápida que a entrada. */
transition:
opacity 0.2s ease-in,
visibility 0.2s,
transform 0.2s ease-in;
}
.dc-bot-container.is-aberto .dc-bot-panel {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
transition:
opacity 0.32s var(--dcb-ease),
visibility 0.32s,
transform 0.42s var(--dcb-spring);
}
/* ── Cabeçalho ─────────────────────────────────────────────────── */
.dc-bot-head {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1rem;
border-block-end: 1px solid var(--dcb-border);
background: color-mix(in srgb, var(--dcb-surface-alt) 60%, transparent);
flex-shrink: 0;
}
.dc-bot-avatar {
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--dcb-border);
flex-shrink: 0;
}
.dc-bot-head-info { min-inline-size: 0; flex: 1; }
.dc-bot-head-nome {
font-family: var(--dcb-font-display);
font-weight: 700;
font-size: 0.9rem;
color: var(--dcb-text);
line-height: 1.2;
}
.dc-bot-head-status {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
color: var(--dcb-muted);
}
.dc-bot-dot {
inline-size: 0.4rem;
block-size: 0.4rem;
border-radius: 50%;
background: var(--dcb-whats);
flex-shrink: 0;
}
.dc-bot-fechar {
inline-size: 2.75rem;
block-size: 2.75rem;
margin-inline-end: -0.6rem;
border: 0;
background: none;
color: var(--dcb-muted);
cursor: pointer;
border-radius: 50%;
display: grid;
place-items: center;
transition: color 0.2s, background 0.2s;
}
.dc-bot-fechar:hover { color: var(--dcb-text); background: var(--dcb-border); }
.dc-bot-fechar:focus-visible { outline: 2px solid var(--dcb-primary-soft); outline-offset: 2px; }
.dc-bot-fechar svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* ── Corpo das mensagens ───────────────────────────────────────── */
.dc-bot-log {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
scrollbar-width: thin;
scrollbar-color: var(--dcb-border) transparent;
}
.dc-bot-log::-webkit-scrollbar { inline-size: 5px; }
.dc-bot-log::-webkit-scrollbar-thumb { background: var(--dcb-border); border-radius: 999px; }
.dc-bot-msg {
max-inline-size: 88%;
padding: 0.65rem 0.85rem;
border-radius: var(--dcb-radius-sm);
font-size: 0.875rem;
line-height: 1.5;
word-wrap: break-word;
animation: dc-bot-entra 0.35s var(--dcb-ease) both;
}
@keyframes dc-bot-entra {
from { opacity: 0; transform: translateY(0.6rem); }
to { opacity: 1; transform: translateY(0); }
}
.dc-bot-msg--bot {
align-self: flex-start;
background: color-mix(in srgb, var(--dcb-surface-alt) 85%, transparent);
border: 1px solid var(--dcb-border);
color: var(--dcb-text-2);
border-start-start-radius: 0.25rem;
}
.dc-bot-msg--user {
align-self: flex-end;
background: var(--dcb-primary);
color: #fff;
border-start-end-radius: 0.25rem;
}
.dc-bot-msg strong { color: var(--dcb-text); font-weight: 600; }
.dc-bot-msg--user strong { color: #fff; }
.dc-bot-msg-prova {
display: block;
margin-block-start: 0.5rem;
padding-block-start: 0.5rem;
border-block-start: 1px solid var(--dcb-border);
font-size: 0.8rem;
color: var(--dcb-muted);
}
/* ── Indicador de digitação (wave, não pulse) ──────────────────── */
.dc-bot-typing {
align-self: flex-start;
display: flex;
gap: 0.25rem;
padding: 0.75rem 0.9rem;
background: color-mix(in srgb, var(--dcb-surface-alt) 85%, transparent);
border: 1px solid var(--dcb-border);
border-radius: var(--dcb-radius-sm);
border-start-start-radius: 0.25rem;
}
.dc-bot-typing span {
inline-size: 0.4rem;
block-size: 0.4rem;
border-radius: 50%;
background: var(--dcb-muted);
animation: dc-bot-wave 1.2s ease-in-out infinite;
}
.dc-bot-typing span:nth-child(2) { animation-delay: 0.15s; }
.dc-bot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dc-bot-wave {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-0.3rem); opacity: 1; }
}
/* ── Quick replies e ações ─────────────────────────────────────── */
.dc-bot-acoes {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0 1rem 0.75rem;
flex-shrink: 0;
}
.dc-bot-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-block-size: 2.25rem;
padding: 0.45rem 0.75rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--dcb-primary-soft) 32%, transparent);
background: color-mix(in srgb, var(--dcb-primary) 12%, transparent);
color: var(--dcb-text-2);
font-size: 0.8rem;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.2s var(--dcb-spring);
animation: dc-bot-entra 0.3s var(--dcb-ease) both;
}
.dc-bot-chip:hover {
background: color-mix(in srgb, var(--dcb-primary) 26%, transparent);
border-color: var(--dcb-primary-soft);
transform: translateY(-1px);
}
.dc-bot-chip:focus-visible { outline: 2px solid var(--dcb-primary-soft); outline-offset: 2px; }
/* CTA de handoff — destaque verde do WhatsApp */
.dc-bot-chip--handoff {
background: color-mix(in srgb, var(--dcb-whats) 18%, transparent);
border-color: color-mix(in srgb, var(--dcb-whats) 45%, transparent);
color: var(--dcb-text);
font-weight: 600;
}
.dc-bot-chip--handoff:hover {
background: color-mix(in srgb, var(--dcb-whats) 30%, transparent);
border-color: var(--dcb-whats);
}
/* ── Entrada de texto ──────────────────────────────────────────── */
.dc-bot-form {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
border-block-start: 1px solid var(--dcb-border);
background: color-mix(in srgb, var(--dcb-surface-alt) 60%, transparent);
flex-shrink: 0;
}
.dc-bot-input {
flex: 1;
min-inline-size: 0;
min-block-size: 2.75rem;
padding: 0.6rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--dcb-border);
background: color-mix(in srgb, var(--dcb-surface) 70%, transparent);
color: var(--dcb-text);
font-size: 16px; /* 16px evita o zoom automático do iOS */
outline: none;
transition: border-color 0.2s;
}
.dc-bot-input::placeholder { color: var(--dcb-muted); }
.dc-bot-input:focus { border-color: var(--dcb-primary-soft); }
.dc-bot-enviar {
inline-size: 2.75rem;
block-size: 2.75rem;
flex-shrink: 0;
border-radius: 50%;
border: 0;
background: var(--dcb-primary);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.2s, transform 0.2s var(--dcb-spring);
}
.dc-bot-enviar:hover { background: var(--dcb-primary-soft); }
.dc-bot-enviar:active { transform: scale(0.92); }
.dc-bot-enviar:focus-visible { outline: 2px solid var(--dcb-primary-soft); outline-offset: 2px; }
.dc-bot-enviar:disabled { opacity: 0.45; cursor: not-allowed; }
.dc-bot-enviar svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ── Crédito ───────────────────────────────────────────────────── */
.dc-bot-credito {
text-align: center;
padding-block-end: 0.6rem;
font-size: 0.68rem;
color: var(--dcb-muted);
flex-shrink: 0;
}
.dc-bot-credito a { color: inherit; text-decoration: none; border-block-end: 1px solid var(--dcb-border); }
.dc-bot-credito a:hover { color: var(--dcb-text-2); }
/* ══════════════════════════════════════════════════════════════════
MOBILE — painel em tela cheia, ciente do teclado virtual
══════════════════════════════════════════════════════════════════ */
@media (max-width: 30em) {
.dc-bot-panel {
inset: 0;
inline-size: 100%;
/* --dcb-vh é atualizado pelo JS via visualViewport quando o teclado
abre, para o input nunca ficar coberto. */
block-size: var(--dcb-vh, 100dvh);
border-radius: 0;
transform-origin: center bottom;
}
.dc-bot-container.is-aberto .dc-bot-fab {
opacity: 0;
pointer-events: none;
}
}
/* ══════════════════════════════════════════════════════════════════
TEMA CLARO — herda automaticamente; só ajusta o que precisa
══════════════════════════════════════════════════════════════════ */
[data-tema="claro"] .dc-bot-panel {
background: color-mix(in srgb, #ffffff 92%, transparent);
}
[data-tema="claro"] .dc-bot-msg--bot {
background: color-mix(in srgb, #ffffff 90%, transparent);
}
[data-tema="claro"] .dc-bot-fab {
background: linear-gradient(145deg, var(--dcb-primary), #1e40af);
}
/* ══════════════════════════════════════════════════════════════════
REDUCED MOTION — Kernel §6, inegociável
══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.dc-bot-fab,
.dc-bot-panel,
.dc-bot-msg,
.dc-bot-chip,
.dc-bot-enviar {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.dc-bot-typing span { animation: none; opacity: 0.7; }
.dc-bot-fab { opacity: 1; transform: none; }
.dc-bot-container.is-aberto .dc-bot-panel { transform: none; }
}
/* Degradação graciosa: sem backdrop-filter, o painel fica sólido. */
@supports not (backdrop-filter: blur(1px)) {
.dc-bot-panel { background: var(--dcb-surface); }
}
/* ══════════════════════════════════════════════════════════════════
CONVIVÊNCIA COM OS FLUTUANTES EXISTENTES — Kernel §9
O FAB do assistente é o ÚNICO flutuante da página.
⚠️ Estas regras só valem quando a classe `dc-bot-ativo` existe no
— e quem a adiciona é o assistant.js, ao montar de verdade.
Removendo as tags do assistente, a classe nunca aparece e o site
volta exatamente ao estado anterior. Reversibilidade total.
══════════════════════════════════════════════════════════════════ */
/* 1. WhatsApp flutuante (só existia no mobile) — absorvido pelo FAB.
O link do rodapé e os CTAs da página seguem intactos; o acesso ao
WhatsApp continua a um toque, agora dentro do painel. */
.dc-bot-ativo .whats-flutuante {
display: none !important;
}
/* 2. Voltar ao topo — ocupava exatamente a mesma quadra do FAB
(bottom 1.5rem / right 1.5rem). Sobe para não colidir. */
.dc-bot-ativo .voltar-topo {
inset-block-end: calc(max(1.5rem, env(safe-area-inset-bottom)) + 4.25rem);
}
/* ════════════════════════════════════════════════════════════════════
AUDITORIA 31/07/2026 — correções do CONCIERGE
════════════════════════════════════════════════════════════════════ */
/* ── Botão "recomeçar conversa" no cabeçalho ───────────────────────
Não existia via de saída: quem se perdia no fluxo só resolvia
recarregando a página inteira. */
.dc-bot-reiniciar {
inline-size: 2.75rem;
block-size: 2.75rem;
border: 0;
background: none;
color: var(--dcb-muted);
cursor: pointer;
border-radius: 50%;
display: grid;
place-items: center;
margin-inline-start: auto;
transition:
color 0.2s,
background 0.2s,
transform 0.3s;
}
.dc-bot-reiniciar:hover {
color: var(--dcb-text);
background: var(--dcb-border);
}
.dc-bot-reiniciar:active {
transform: rotate(-180deg);
}
.dc-bot-reiniciar:focus-visible {
outline: 2px solid var(--dcb-primary-soft);
outline-offset: 2px;
}
.dc-bot-reiniciar svg {
inline-size: 1.05rem;
block-size: 1.05rem;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* O "fechar" perde o auto-margin: agora quem empurra é o "recomeçar". */
.dc-bot-head .dc-bot-fechar {
margin-inline-start: 0;
}
/* ── Marca de conversa retomada ────────────────────────────────────
Sinaliza que as mensagens acima vêm de antes — sem isso, a pessoa
reabria o chat e não entendia de onde saiu aquele histórico. */
.dc-bot-marca-retomada {
align-self: center;
margin: 0.35rem 0;
padding: 0.15rem 0.6rem;
font-size: 0.6875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--dcb-muted);
opacity: 0.75;
user-select: none;
}
/* ── Campo desabilitado durante a resposta ─────────────────────────
O estado "ocupado" agora é visível: antes o campo continuava normal
e o Enter simplesmente não fazia nada. */
.dc-bot-input:disabled {
opacity: 0.55;
cursor: progress;
}
.dc-bot-enviar:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── Rótulo do FAB virou ────────────────────────────────────
Precisa dos resets que o