/* Concierge · assistant.css Papel : tema, layout, estados e movimento. Nada de regra de negócio. Carga : 1º de todos, no . Escopo : tudo mora dentro de .dc-bot. Nenhum seletor de elemento solto. Remover : apague esta tag e os quatro scripts do rodapé. O site volta ao que era. */ .dc-bot { /* Herda o token do host quando ele existe; usa o próprio quando não existe. É isto que faz o módulo se adaptar a outro projeto sem editar CSS. */ --bot-primaria: var(--cobre, #a8552b); --bot-primaria-forte:var(--cobre-forte, #8f4623); --bot-acento: var(--ambar, #c98a5e); --bot-superficie: var(--papel-claro, #ffffff); --bot-superficie-2: var(--papel, #f5efe7); --bot-superficie-3: var(--areia, #e8dccd); --bot-tinta: var(--chocolate, #2a1a14); --bot-tinta-2: var(--mocha, #6b5442); --bot-filete: var(--linha, #dccdba); --bot-filete-forte: var(--linha-forte, #8f7a61); --bot-sobre-primaria:var(--papel-claro, #ffffff); --bot-fonte: var(--fonte-texto, system-ui, sans-serif); --bot-fonte-titulo: var(--fonte-display, Georgia, serif); --bot-raio: var(--raio, 12px); --bot-raio-bolha: calc(var(--bot-raio) + 4px); /* acompanha o desenho quadrado do site */ --bot-raio-pilula: var(--raio-pilula, 999px); --bot-dur-rapida: var(--dur-rapida, 180ms); --bot-dur-media: var(--dur-media, 320ms); --bot-curva: var(--suavizacao, cubic-bezier(.22, 1, .36, 1)); --bot-curva-entrada: cubic-bezier(.34, 1.56, .64, 1); /* Escala de espaço própria, base 4px. */ --bot-e1: 4px; --bot-e2: 8px; --bot-e3: 12px; --bot-e4: 16px; --bot-e5: 24px; --bot-e6: 32px; --bot-z-fab: 25; /* acima do cabeçalho sticky, abaixo do menu do site */ --bot-z-painel: 40; /* acima do menu, abaixo do skip link e da abertura */ --bot-recuo: clamp(12px, 2vw, 24px); --bot-largura: 400px; --bot-altura: 640px; --bot-sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .12); --bot-sombra-fab: 0 2px 6px rgba(0, 0, 0, .10), 0 10px 24px rgba(0, 0, 0, .18); position: relative; font-family: var(--bot-fonte); } .dc-bot[data-density="compact"] { --bot-e3: 8px; --bot-e4: 12px; --bot-e5: 16px; --bot-e6: 24px; } /* Tema escuro próprio. Só entra quando declarado: onde o host tem tema, o módulo acompanha o host pelos tokens acima e este bloco nem é alcançado. */ .dc-bot[data-theme="dark"] { --bot-superficie: #1c1512; --bot-superficie-2: #241b17; --bot-superficie-3: #33261f; --bot-tinta: #efe6da; --bot-tinta-2: #bda891; --bot-filete: #3b2c24; --bot-filete-forte: #6d5949; } @media (prefers-color-scheme: dark) { .dc-bot[data-theme="auto"] { --bot-superficie: #1c1512; --bot-superficie-2: #241b17; --bot-superficie-3: #33261f; --bot-tinta: #efe6da; --bot-tinta-2: #bda891; --bot-filete: #3b2c24; --bot-filete-forte: #6d5949; } } /* Reset defensivo: o CSS do host não deforma o módulo, e o módulo não vaza. */ .dc-bot *, .dc-bot *::before, .dc-bot *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left; } .dc-bot [hidden] { display: none !important; } /* Fora da tela, dentro do fluxo do leitor de tela. */ .dc-bot__anuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Trava de rolagem própria, no : não briga com a trava que o site já aplica em body.style.overflow quando abre o menu dele. */ .dc-bot-travado { overflow: hidden; } /* A trava só faz sentido enquanto o painel cobre a tela. Como painel de canto ele não deve prender a página atrás: além de atrapalhar a leitura, o sumiço da barra deslocava o próprio painel 15px para dentro e quebrava a simetria com o rodapé. */ @media (min-width: 30em) { .dc-bot-travado { overflow: visible; } } /* Botão */ .dc-bot__fab { position: fixed; right: max(var(--bot-recuo), env(safe-area-inset-right)); bottom: max(var(--bot-recuo), env(safe-area-inset-bottom)); z-index: var(--bot-z-fab); display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: var(--bot-raio-pilula); background-color: var(--bot-primaria); color: var(--bot-sobre-primaria); cursor: pointer; box-shadow: var(--bot-sombra-fab); opacity: 0; transform: scale(.9); transition: opacity var(--bot-dur-media) var(--bot-curva), transform var(--bot-dur-media) var(--bot-curva-entrada), background-color var(--bot-dur-rapida) var(--bot-curva); } .dc-bot--pronto .dc-bot__fab { opacity: 1; transform: none; } .dc-bot__fab:hover { background-color: var(--bot-primaria-forte); } .dc-bot__fab:active { transform: scale(.96); } .dc-bot__fab svg { width: 24px; height: 24px; display: block; } .dc-bot--aberto .dc-bot__fab { opacity: 0; pointer-events: none; } /* Painel */ .dc-bot__painel { position: fixed; inset: 0; z-index: var(--bot-z-painel); display: flex; flex-direction: column; background-color: var(--bot-superficie); color: var(--bot-tinta); visibility: hidden; opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right; contain: content; transition: opacity var(--bot-dur-rapida) ease-in, transform var(--bot-dur-rapida) ease-in, visibility 0s linear var(--bot-dur-rapida); } .dc-bot--aberto .dc-bot__painel { visibility: visible; opacity: 1; transform: none; transition: opacity 260ms var(--bot-curva), transform 260ms var(--bot-curva-entrada), visibility 0s; } /* Modo embutido: sem overlay, sem botão, altura mandada pelo host. A raiz precisa repassar a altura do container, senão o painel encalha no min-height e ignora a caixa que o host reservou. */ .dc-bot--inline { display: block; height: 100%; } .dc-bot--inline .dc-bot__fab { display: none; } .dc-bot--inline .dc-bot__painel { position: relative; inset: auto; visibility: visible; opacity: 1; transform: none; height: 100%; min-height: 480px; border: 1px solid var(--bot-filete); border-radius: var(--bot-raio); } /* Tela cheia: ocupa o container do host, sem botão de fechar e sem overlay. */ .dc-bot--tela { display: block; height: 100%; } .dc-bot--tela .dc-bot__fab { display: none; } .dc-bot--tela .dc-bot__painel { position: relative; inset: auto; visibility: visible; opacity: 1; transform: none; block-size: 100%; /* Aqui a unidade de viewport é segura: neste modo o painel está no fluxo, não é fixo, e o container do host costuma não ter altura própria. */ min-block-size: 100vh; min-block-size: 100dvh; } /* Cabeçalho */ .dc-bot__cabeca { display: flex; align-items: center; gap: var(--bot-e3); flex: none; padding: var(--bot-e3) var(--bot-e4); padding-top: max(var(--bot-e3), env(safe-area-inset-top)); min-block-size: 60px; border-bottom: 1px solid var(--bot-filete); background-color: var(--bot-superficie-2); } .dc-bot__marca { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--bot-filete); border-radius: var(--bot-raio-pilula); background-color: var(--bot-superficie); color: var(--bot-primaria); } .dc-bot__marca svg { width: 12px; height: 12px; display: block; } .dc-bot__identidade { flex: 1 1 auto; min-width: 0; } .dc-bot__nome { font-family: var(--bot-fonte-titulo); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } /* Estado em caixa alta miúda: mesma gramática de rótulo do site. */ .dc-bot__estado { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bot-tinta-2); } /* O recuo negativo compensa o padding interno do botão: sem ele o glifo do X fica 13px mais afastado da borda do que o losango da marca, e o cabeçalho pende. */ .dc-bot__fechar { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-inline-end: -4px; width: 44px; height: 44px; border: 0; border-radius: var(--bot-raio); background-color: transparent; color: var(--bot-tinta); cursor: pointer; transition: background-color var(--bot-dur-rapida) var(--bot-curva); } .dc-bot__fechar:hover { background-color: var(--bot-superficie-3); } .dc-bot__fechar svg { width: 18px; height: 18px; display: block; } /* Transcrição */ .dc-bot__transcricao { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--bot-e4) var(--bot-e4) var(--bot-e3); display: flex; flex-direction: column; gap: var(--bot-e2); scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10px); mask-image: linear-gradient(to bottom, transparent, #000 10px); } .dc-bot__grupo { display: flex; flex-direction: column; gap: var(--bot-e1); } .dc-bot__grupo + .dc-bot__grupo { margin-top: var(--bot-e4); } .dc-bot__grupo--eu { align-items: flex-end; } .dc-bot__bolha { max-width: 78%; padding: 11px 14px; border-radius: var(--bot-raio-bolha); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; animation: dc-bot-entrar 220ms var(--bot-curva) both; } .dc-bot__grupo--bot .dc-bot__bolha { background-color: var(--bot-superficie-2); border: 1px solid var(--bot-filete); border-bottom-left-radius: var(--bot-e2); } .dc-bot__grupo--eu .dc-bot__bolha { background-color: var(--bot-primaria); color: var(--bot-sobre-primaria); border-bottom-right-radius: var(--bot-e2); } .dc-bot__bolha p + p, .dc-bot__bolha ul + p { margin-top: var(--bot-e2); } .dc-bot__bolha ul { margin: var(--bot-e2) 0 0; padding-left: 16px; } .dc-bot__bolha li + li { margin-top: var(--bot-e1); } .dc-bot__bolha li::marker { color: var(--bot-acento); font-size: .8em; } .dc-bot__bolha strong { font-weight: 600; } .dc-bot__bolha a { color: inherit; text-underline-offset: 3px; } .dc-bot__grupo--bot .dc-bot__bolha a { color: var(--bot-primaria-forte); } .dc-bot__hora { font-size: 12px; letter-spacing: .04em; color: var(--bot-tinta-2); padding-inline: 2px; } @keyframes dc-bot-entrar { from { opacity: 0; transform: translateY(8px); } } /* Digitando: três pontos em onda. Vira texto quando há movimento reduzido. Caixa própria, fora da classe da bolha: o indicador não é uma mensagem. */ .dc-bot__caixa-digitando { align-self: flex-start; border: 1px solid var(--bot-filete); border-radius: var(--bot-raio-bolha); border-bottom-left-radius: var(--bot-e2); background-color: var(--bot-superficie-2); } .dc-bot__digitando { display: inline-flex; gap: 5px; align-items: center; padding: 14px var(--bot-e3); } .dc-bot__ponto { width: 6px; height: 6px; border-radius: var(--bot-raio-pilula); background-color: var(--bot-filete-forte); animation: dc-bot-onda 1.2s ease-in-out infinite; } .dc-bot__ponto:nth-child(2) { animation-delay: .15s; } .dc-bot__ponto:nth-child(3) { animation-delay: .3s; } .dc-bot__digitando-texto { display: none; font-size: 14px; color: var(--bot-tinta-2); } .dc-bot__espera { display: block; padding: 0 var(--bot-e3) 12px; font-size: 13px; color: var(--bot-tinta-2); } @keyframes dc-bot-onda { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Pílula de novas mensagens: só aparece se a pessoa rolou para cima. */ .dc-bot__novas { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--bot-e1); min-height: 44px; padding: 0 var(--bot-e4); border: 1px solid var(--bot-filete); border-radius: var(--bot-raio-pilula); background-color: var(--bot-superficie); color: var(--bot-tinta); font-size: 13px; cursor: pointer; box-shadow: var(--bot-sombra); } /* Sugestões */ .dc-bot__sugestoes:empty { display: none; } .dc-bot__sugestoes { flex: none; display: flex; flex-wrap: wrap; gap: var(--bot-e2); padding: 0 var(--bot-e4) var(--bot-e3); max-block-size: 9.5rem; overflow-y: auto; overscroll-behavior: contain; } .dc-bot__sugestoes:empty { display: none; } .dc-bot__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--bot-e3); border: 1px solid var(--bot-filete-forte); border-radius: var(--bot-raio-pilula); background-color: transparent; color: var(--bot-tinta); font-size: 13px; cursor: pointer; animation: dc-bot-entrar 180ms var(--bot-curva) both; transition: background-color var(--bot-dur-rapida) var(--bot-curva), border-color var(--bot-dur-rapida) var(--bot-curva); } .dc-bot__chip svg { width: 15px; height: 15px; flex: none; display: block; } .dc-bot__chip:hover { background-color: var(--bot-superficie-3); border-color: var(--bot-tinta); } .dc-bot__chip--acao { border-color: var(--bot-primaria); background-color: var(--bot-primaria); color: var(--bot-sobre-primaria); } .dc-bot__chip--acao:hover { border-color: var(--bot-primaria-forte); background-color: var(--bot-primaria-forte); color: var(--bot-sobre-primaria); } /* Composer */ .dc-bot__composer { flex: none; display: flex; align-items: flex-end; gap: var(--bot-e2); padding: var(--bot-e3) var(--bot-e4); padding-bottom: max(var(--bot-e3), env(safe-area-inset-bottom)); border-top: 1px solid var(--bot-filete); background-color: var(--bot-superficie-2); } .dc-bot__campo { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 96px; padding: 11px var(--bot-e3); border: 1px solid var(--bot-filete); border-radius: var(--bot-raio); background-color: var(--bot-superficie); color: var(--bot-tinta); font-size: 15px; resize: none; transition: border-color var(--bot-dur-rapida) var(--bot-curva); } .dc-bot__campo:hover { border-color: var(--bot-filete-forte); } /* No campo o anel de foco encosta na borda: sem efeito de linha dupla. */ .dc-bot__campo:focus-visible { outline-offset: 0; border-color: var(--bot-primaria); } .dc-bot__campo::placeholder { color: var(--bot-tinta-2); } .dc-bot__enviar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--bot-raio); background-color: var(--bot-primaria); color: var(--bot-sobre-primaria); cursor: pointer; transition: background-color var(--bot-dur-rapida) var(--bot-curva); } .dc-bot__enviar:hover:not(:disabled) { background-color: var(--bot-primaria-forte); } .dc-bot__enviar:disabled { opacity: .4; cursor: not-allowed; } .dc-bot__enviar svg { width: 18px; height: 18px; display: block; } .dc-bot__contador { position: absolute; right: var(--bot-e4); bottom: 68px; font-size: 12px; color: var(--bot-tinta-2); } .dc-bot__aviso { flex: none; padding: var(--bot-e2) var(--bot-e4); border-top: 1px solid var(--bot-filete); background-color: var(--bot-superficie-3); font-size: 13px; color: var(--bot-tinta-2); } .dc-bot__credito { flex: none; padding: var(--bot-e2) var(--bot-e4) var(--bot-e3); font-size: 12px; color: var(--bot-tinta-2); text-align: center; } .dc-bot__credito a { color: inherit; } /* Foco */ .dc-bot :focus-visible { outline: 2px solid var(--bot-primaria); outline-offset: 2px; border-radius: var(--bot-raio); } /* Desktop */ /* O painel é preso pelos QUATRO lados do viewport e o tamanho preferido entra como máximo, não como altura calculada. Assim ele não depende de dvh, dvw nem de nenhuma conta que o navegador possa reportar diferente sob zoom ou escala de sistema: a caixa simplesmente não tem como escapar da tela. As margens automáticas encostam o painel no canto de baixo à direita quando sobra espaço. */ @media (min-width: 30em) { .dc-bot:not(.dc-bot--inline):not(.dc-bot--tela) .dc-bot__painel { inset: max(var(--bot-recuo), env(safe-area-inset-top)) max(var(--bot-recuo), env(safe-area-inset-right)) max(var(--bot-recuo), env(safe-area-inset-bottom)) max(var(--bot-recuo), env(safe-area-inset-left)); inline-size: auto; block-size: auto; max-inline-size: var(--bot-largura); max-block-size: var(--bot-altura); margin-inline-start: auto; margin-block-start: auto; border: 1px solid var(--bot-filete); border-radius: var(--bot-raio); box-shadow: var(--bot-sombra); overflow: hidden; } } @media (min-width: 48em) { .dc-bot__fab { width: 56px; height: 56px; } } /* Telas altas ganham painel mais alto em vez de sobra no rodapé. */ @media (min-height: 60em) { .dc-bot { --bot-altura: 720px; } } /* Paisagem em tela baixa: cabeçalho encolhe, sugestões viram trilha rolável. */ @media (max-height: 480px) and (orientation: landscape) { .dc-bot__cabeca { padding-block: var(--bot-e2); } .dc-bot__marca { display: none; } .dc-bot__sugestoes { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; } .dc-bot__chip { flex: none; } } /* Preferências */ @media (prefers-reduced-motion: reduce) { .dc-bot__fab, .dc-bot__painel, .dc-bot__bolha, .dc-bot__chip { transition-duration: .01ms; animation-duration: .01ms; } .dc-bot__ponto { display: none; } .dc-bot__digitando-texto { display: block; } .dc-bot__digitando { padding-block: 8px; } } @media (prefers-reduced-transparency: reduce) { .dc-bot__painel { box-shadow: 0 0 0 1px var(--bot-filete-forte); } }