/**
 * Assistente Virtual - Dra. Clarissa
 *
 * As cores, raios e sombras ficam em variáveis declaradas no próprio .dcav, e
 * cada uma cai para a variável equivalente do tema antes de cair no valor
 * literal. O motivo: antes havia uma dúzia de tons de azul escritos à mão pelo
 * arquivo (#f6f9fd, #d8e2f0, #e8f1fc, #c8d6e8), então mudar a identidade do
 * consultório exigia caçar hex em 500 linhas, e qualquer descuido deixava um
 * botão de um azul diferente dos outros.
 *
 * O assistente vive dentro do tema do site, e não numa página própria: tudo
 * aqui é escopado em .dcav para não vazar estilo para o site, e nada depende de
 * reset global.
 */

.dcav {
	--dcav-primaria: var(--color-primary, #0a4da1);
	--dcav-primaria-escura: var(--color-primary-dark, #083d80);
	--dcav-secundaria: var(--color-secondary, #1a6fd4);
	--dcav-foco: var(--color-accent, #0693e3);

	--dcav-texto: var(--color-text, #17233a);
	--dcav-texto-suave: var(--color-text-muted, #5a6a83);

	--dcav-superficie: #fff;
	--dcav-superficie-suave: #f7fafd;
	--dcav-borda: #dfe7f1;
	--dcav-borda-forte: #c6d5e8;
	--dcav-realce: #eaf2fd;

	--dcav-aviso-fundo: #fff6e0;
	--dcav-aviso-texto: #7a5300;
	--dcav-erro-fundo: #fdeaea;
	--dcav-erro-texto: #a92222;
	--dcav-ok: #1a8a4b;
	--dcav-whatsapp: #25d366;
	--dcav-whatsapp-escuro: #1cb257;

	--dcav-raio: var(--radius-md, 10px);
	--dcav-raio-p: var(--radius-sm, 7px);
	--dcav-raio-g: var(--radius-xl, 18px);
	--dcav-raio-total: var(--radius-full, 999px);

	/* Sombra em duas camadas: uma rasa que dá contorno e uma longa que dá
	   profundidade. Uma sombra só, grande, deixa a janela parecendo flutuar
	   solta sobre a página. */
	--dcav-sombra: 0 1px 2px rgba(16, 33, 60, 0.08), 0 18px 44px rgba(16, 33, 60, 0.18);
	--dcav-sombra-botao: 0 2px 6px rgba(10, 77, 161, 0.28), 0 10px 22px rgba(10, 77, 161, 0.22);

	/*
	 * Tamanhos de letra.
	 *
	 * Nenhum px de fonte é escrito solto no resto do arquivo: todo font-size sai
	 * de um destes cinco. São duas razões, e a segunda é a que importa.
	 *
	 * A primeira é a de sempre — antes havia dezoito tamanhos diferentes entre
	 * 11px e 20px, decididos um a um, e a janela não tinha escala nenhuma.
	 *
	 * A segunda é o botão "A+": ele multiplica --dcav-escala, e por isso a
	 * conversa inteira cresce junto. Um font-size literal esquecido em qualquer
	 * regra ficaria parado enquanto o resto aumenta, e o resultado é pior do que
	 * não ter o botão — a tela sai desmontada exatamente para quem pediu ajuda
	 * para ler. O test-visual reprova qualquer font-size fora daqui.
	 *
	 * Os pisos: 16px em botão, 15px em texto de leitura. Abaixo disso só
	 * --dcav-fs-selo, que é etiqueta curta (o "Pagamento" do chip, o rodapé
	 * jurídico) e nunca leitura corrida, e os dois do cabeçalho.
	 *
	 * Os dois do cabeçalho — --dcav-fs-icone, o ×, e --dcav-fs-controle, o "A+"
	 * — são os únicos que NÃO escalam, e é de propósito: eles são o controle da
	 * janela, não o conteúdo dela. Um "A+" que cresce a cada clique estouraria o
	 * próprio círculo, e o botão de aumentar a letra ficaria ilegível na terceira
	 * vez que fosse usado — exatamente para quem precisa dele.
	 */
	--dcav-escala: 1;
	--dcav-fs-destaque: calc(18px * var(--dcav-escala));
	--dcav-fs-acao: calc(17px * var(--dcav-escala));
	--dcav-fs-botao: calc(16px * var(--dcav-escala));
	--dcav-fs-texto: calc(15px * var(--dcav-escala));
	--dcav-fs-selo: calc(13px * var(--dcav-escala));
	--dcav-fs-icone: 20px;
	--dcav-fs-controle: 15px;

	position: fixed;
	bottom: 20px;
	z-index: 9999;
	font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
	line-height: 1.55;
}
.dcav--right {
	right: 20px;
}
.dcav--left {
	left: 20px;
}

/* ----------------------------------------------------------------
 * Botão flutuante
 * ---------------------------------------------------------------- */

.dcav__launcher {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px 12px 16px;
	border: 0;
	border-radius: var(--dcav-raio-total);
	background: var(--dcav-primaria);
	color: #fff;
	font-family: inherit;
	font-size: var(--dcav-fs-texto);
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: var(--dcav-sombra-botao);
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.dcav__launcher:hover {
	background: var(--dcav-primaria-escura);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(10, 77, 161, 0.3), 0 14px 30px rgba(10, 77, 161, 0.26);
}
.dcav__launcher:focus-visible {
	outline: 3px solid var(--dcav-foco);
	outline-offset: 3px;
}
.dcav__launcher-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	line-height: 1;
	flex: 0 0 auto;
}
.dcav__launcher-icon svg {
	width: 22px;
	height: 22px;
	display: block;
	fill: currentColor;
}
.dcav__launcher-avatar {
	width: 38px;
	height: 38px;
	margin: -6px -2px -6px -6px;
	border-radius: var(--dcav-raio-total);
	background: #fff;
	object-fit: cover;
	flex: 0 0 auto;
}
.dcav__avatar {
	width: 42px;
	height: 42px;
	border-radius: var(--dcav-raio-total);
	background: #fff;
	object-fit: cover;
	flex: 0 0 auto;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.dcav--open .dcav__launcher {
	display: none;
}

/* ----------------------------------------------------------------
 * Fundo translúcido
 *
 * Existe para tirar da frente o resto da página enquanto a conversa está
 * aberta. Sem ele, uma janela maior no meio da tela fica competindo com o
 * conteúdo do site atrás, e o paciente lê os dois ao mesmo tempo.
 *
 * Não é apenas decoração: também é a área que fecha a conversa ao ser clicada,
 * comportamento que quem usa aplicativo já espera.
 * ---------------------------------------------------------------- */

.dcav__backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	border: 0;
	padding: 0;
	background: rgba(16, 33, 60, 0.55);
	/* Desfoque é enfeite: onde não houver suporte, o escurecimento acima já
	   resolve o contraste. */
	backdrop-filter: blur(3px);
	cursor: pointer;
	animation: dcav-fundo 0.2s ease-out;
}
.dcav__backdrop[hidden] {
	display: none;
}

@keyframes dcav-fundo {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ----------------------------------------------------------------
 * Janela
 *
 * Centralizada na tela, e não colada no canto de baixo.
 *
 * A janelinha de 400px no canto obrigava a rolar em quase toda tela com muitas
 * opções — a de e-mail e celular na hora de pagar era a pior. Centralizada e
 * mais larga, o mesmo conteúdo cabe sem rolagem, e o fundo translúcido mantém
 * a atenção onde a decisão está sendo tomada.
 * ---------------------------------------------------------------- */

.dcav__panel {
	position: fixed;
	inset: 0;
	/* `inset: 0` com `margin: auto` e medidas definidas centraliza nos dois
	   eixos sem transform, que fica livre para a animação de entrada. */
	margin: auto;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(560px, calc(100vw - 40px));
	height: min(720px, calc(100vh - 48px));
	background: var(--dcav-superficie);
	border-radius: var(--dcav-raio-g);
	box-shadow: var(--dcav-sombra);
	overflow: hidden;
	animation: dcav-entrada 0.22s ease-out;
}
.dcav__panel[hidden] {
	display: none;
}

/*
 * Ampliado: para quem tem tela grande e quer ver a agenda inteira de uma vez.
 * Continua sem ocupar tudo, porque o fundo translúcido é o que dá o contexto
 * de "estou numa conversa dentro do site" — em tela cheia o assistente parece
 * ter trocado de página.
 */
.dcav--amplo .dcav__panel {
	width: min(860px, calc(100vw - 40px));
	height: min(900px, calc(100vh - 32px));
}

@keyframes dcav-entrada {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Faixa levemente mais escura na base do cabeçalho: separa do corpo branco sem
   precisar de borda, que num cabeçalho colorido fica marcada demais. */
.dcav__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 17px;
	background: linear-gradient(135deg, var(--dcav-primaria) 0%, var(--dcav-primaria-escura) 100%);
	color: #fff;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.dcav__titles {
	flex: 1 1 auto;
	min-width: 0;
}
.dcav__title {
	margin: 0;
	font-size: var(--dcav-fs-botao);
	font-weight: 700;
	font-family: var(--font-display, inherit);
	letter-spacing: 0.01em;
}
.dcav__subtitle {
	margin: 2px 0 0;
	font-size: var(--dcav-fs-selo);
	opacity: 0.88;
}
/* Controles do cabeçalho: ampliar/reduzir e minimizar. */
.dcav__acoes {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}
/*
 * Os três controles têm 38px, e não os 32px de antes.
 *
 * Trinta e dois já cumpria o mínimo de 24px da norma, mas o alvo aqui é o
 * canto de uma janela que abre por cima do site, e errar o × fechando o
 * assistente no meio de um agendamento custa a conversa inteira. Seis pixels no
 * cabeçalho é o preço.
 */
.dcav__close,
.dcav__zoom,
.dcav__fonte {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--dcav-raio-total);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-family: inherit;
	font-size: var(--dcav-fs-icone);
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.dcav__close:hover,
.dcav__zoom:hover,
.dcav__fonte:hover {
	background: rgba(255, 255, 255, 0.32);
}
.dcav__close:focus-visible,
.dcav__zoom:focus-visible,
.dcav__fonte:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/*
 * Tamanho da letra.
 *
 * Escrito "A+" por extenso, e não um ícone: é o rótulo que as pessoas já
 * reconhecem de site de notícia e de leitor de livro, e um símbolo novo teria de
 * ser aprendido justamente por quem está com dificuldade de ler a tela.
 *
 * Fica no cabeçalho, à vista, e não escondido atrás de um menu de ajustes. Uma
 * preferência de acessibilidade que precisa ser procurada não é encontrada por
 * quem precisa dela: o zoom do navegador já existe e já é ignorado por isso.
 *
 * Continua visível no celular, ao contrário do botão de ampliar — é lá que a
 * letra pequena mais incomoda.
 */
.dcav__fonte-icone {
	display: block;
	font-size: var(--dcav-fs-controle);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}
/* No último passo o botão fica preenchido: a aparência diz em que ponto a
   escala está, e o rótulo (que muda para "voltar ao normal") diz o que o
   clique faz. Estado e ação em lugares diferentes, cada um onde é procurado. */
.dcav__fonte--max {
	background: #fff;
	color: var(--dcav-primaria);
}
.dcav__fonte--max:hover {
	background: #fff;
	color: var(--dcav-primaria-escura);
}
/* O × é um caractere de texto: sem ajuste fino ele assenta acima do centro. */
.dcav__close-icon {
	display: block;
	line-height: 1;
	transform: translateY(-1px);
}
.dcav__zoom svg {
	width: 17px;
	height: 17px;
	display: block;
	fill: currentColor;
}
/*
 * Ampliar não faz sentido no celular, onde a janela já ocupa a tela inteira.
 * Fica escondido por CSS em vez de não ser criado: o corte é de largura de
 * tela, e girar o aparelho muda isso sem recarregar a página.
 */
@media (max-width: 600px) {
	.dcav__zoom {
		display: none;
	}
}
.dcav__preview-tag {
	margin: 0;
	padding: 8px 18px;
	background: var(--dcav-aviso-fundo);
	color: var(--dcav-aviso-texto);
	font-size: var(--dcav-fs-selo);
	font-weight: 600;
	text-align: center;
}
.dcav__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 18px;
	overscroll-behavior: contain;
}

/* Barra de rolagem discreta: a padrão do Windows corta 17px do conteúdo e
   destoa do resto da janela. */
.dcav__body {
	scrollbar-width: thin;
	scrollbar-color: var(--dcav-borda-forte) transparent;
}
.dcav__body::-webkit-scrollbar {
	width: 8px;
}
.dcav__body::-webkit-scrollbar-thumb {
	background: var(--dcav-borda-forte);
	border-radius: var(--dcav-raio-total);
}

/* ----------------------------------------------------------------
 * Trilha do que já foi respondido
 *
 * Sem ela o paciente não sabe onde está nem o que já informou, e a conversa
 * vira um corredor de perguntas. Com o resumo visível, ele confere o próprio
 * caminho antes de pagar, que é justamente o momento em que erro custa caro.
 * ---------------------------------------------------------------- */

.dcav__trilha {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--dcav-borda);
	list-style: none;
}
.dcav__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 4px 10px;
	border-radius: var(--dcav-raio-total);
	background: var(--dcav-realce);
	color: var(--dcav-primaria);
	font-size: var(--dcav-fs-selo);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dcav__chip-rotulo {
	font-weight: 500;
	opacity: 0.75;
}

/* ----------------------------------------------------------------
 * Conteúdo
 * ---------------------------------------------------------------- */

.dcav__block {
	animation: dcav-tela 0.2s ease-out;
}

@keyframes dcav-tela {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.dcav__text {
	margin: 0 0 12px;
	color: var(--dcav-texto);
	font-size: var(--dcav-fs-texto);
}
.dcav__text:last-child {
	margin-bottom: 0;
}
/*
 * Negrito escrito com *asteriscos* no painel.
 *
 * Declarado aqui, e não deixado por conta do <strong> do navegador, pelo mesmo
 * motivo de todo o resto deste arquivo: o assistente vive dentro do tema do
 * site, e um tema que redefina strong — mais claro, em versalete, na cor da
 * marca — apagaria justamente o trecho que a Dra. quis destacar.
 */
.dcav__text strong {
	font-weight: 700;
	color: inherit;
}
.dcav__link {
	display: inline-block;
	margin-top: 6px;
	color: var(--dcav-primaria);
	font-size: var(--dcav-fs-texto);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
/*
 * Botões da conversa.
 *
 * A altura mínima é 48px, e não os 40px de antes. Quarenta já passava do mínimo
 * de 24px que a norma cobra, e mesmo assim errava o alvo com frequência em
 * celular — 48px é a medida em que o dedo acerta sem mirar, e é o que uma tela
 * de agendamento precisa: quem erra o botão numa lista de horários não erra de
 * novo, desiste.
 *
 * A contrapartida é caber menos opção sem rolagem. Foi por isso que o menu de
 * dúvidas virou quatro grupos na v3: onze botões de 48px não cabem, e quatro
 * cabem com folga. A altura veio junto com a reorganização, não apesar dela.
 */
.dcav__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}
.dcav__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--dcav-borda);
	border-radius: var(--dcav-raio);
	background: var(--dcav-superficie-suave);
	color: var(--dcav-primaria);
	font-family: inherit;
	font-size: var(--dcav-fs-botao);
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.dcav__option:hover {
	background: var(--dcav-realce);
	border-color: var(--dcav-secundaria);
}
.dcav__option:active {
	transform: scale(0.995);
}
.dcav__option:focus-visible {
	outline: 3px solid var(--dcav-foco);
	outline-offset: 2px;
}

/*
 * Duas linhas dentro do botão.
 *
 * A segunda linha é o que a escolha significa, e ela fica DENTRO do botão de
 * propósito: a explicação precisa estar onde a decisão é tomada. Numa tela
 * anterior, ela é atravessada sem leitura.
 *
 * Ela não é "letra miúda": 15px é o piso de texto de leitura desta janela, o
 * mesmo do parágrafo acima dos botões. O que a separa do rótulo é o peso e a
 * cor, não o tamanho — encolher a explicação seria escondê-la de quem ela foi
 * escrita para ajudar.
 */
.dcav__option-texto {
	flex: 1 1 auto;
	min-width: 0;
}
.dcav__option-label {
	display: block;
}
.dcav__option-desc {
	display: block;
	margin-top: 3px;
	color: var(--dcav-texto-suave);
	font-size: var(--dcav-fs-texto);
	font-weight: 400;
	line-height: 1.5;
}

/*
 * Caminho principal em destaque. Uma lista de botões todos iguais obriga a ler
 * tudo para decidir; com um destaque, quem quer o caminho mais comum resolve
 * na primeira olhada, e quem quer outro continua com as opções à vista.
 *
 * É o que a conversa direta e a clássica usam, pelo id 'agendar'. As árvores que
 * declaram papel (a v3) usam --acao, logo abaixo, que chega ao mesmo lugar
 * dizendo por quê.
 */
.dcav__option--primary {
	background: var(--dcav-primaria);
	border-color: var(--dcav-primaria);
	color: #fff;
}
.dcav__option--primary:hover {
	background: var(--dcav-primaria-escura);
	border-color: var(--dcav-primaria-escura);
}
.dcav__option--soft {
	padding: 10px 12px;
	background: var(--dcav-superficie);
	border-color: var(--dcav-borda);
	color: var(--dcav-texto-suave);
	font-weight: 500;
}
.dcav__option--soft:hover {
	background: var(--dcav-superficie-suave);
	color: var(--dcav-primaria);
}

/* ----------------------------------------------------------------
 * Papéis de botão
 *
 * A semente diz o PAPEL — ação principal, escolha com preço, assunto, atalho,
 * caminho neutro, alerta — e é aqui que ele vira desenho. A lista dos seis está
 * em DCAV_Frontend::ESTILOS, e o test-visual confere que semente, constante e
 * folha de estilo dizem a mesma coisa.
 *
 * Cada papel muda TRÊS coisas: cor, tamanho e ícone. Cor sozinha não informa
 * quem não distingue cor — e são justamente os pacientes mais velhos, que são a
 * maioria de quem chega por dor crônica, os que mais têm alguma perda de visão
 * de cor. Com ícone e tamanho junto, a diferença sobrevive a uma tela em preto e
 * branco.
 *
 * Os ícones são SVG embutido em máscara, pintados com currentColor: assim
 * acompanham a cor do papel sem precisar de um arquivo por cor, e não custam
 * nenhuma requisição de rede — a janela abre com o que já veio na folha.
 * ---------------------------------------------------------------- */

.dcav__option--acao::before,
.dcav__option--escolha::before,
.dcav__option--assunto::before,
.dcav__option--atalho::before,
.dcav__option--neutro::before,
.dcav__option--alerta::before {
	content: "";
	flex: 0 0 auto;
	width: calc(21px * var(--dcav-escala));
	height: calc(21px * var(--dcav-escala));
	background-color: currentColor;
	-webkit-mask: var(--dcav-icone) center / contain no-repeat;
	mask: var(--dcav-icone) center / contain no-repeat;
}

/* Ação principal: agendar. Maior que os outros, cheia, e com o ícone de agenda. */
.dcav__option--acao {
	--dcav-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2Zm12 7H5v10h14V9Zm-8 2h2v2h-2v-2Zm-4 0h2v2H7v-2Zm8 0h2v2h-2v-2Zm-4 4h2v2h-2v-2Zm-4 0h2v2H7v-2Z'/%3E%3C/svg%3E");
	min-height: 56px;
	background: var(--dcav-primaria);
	border-color: var(--dcav-primaria);
	color: #fff;
	font-size: var(--dcav-fs-acao);
}
.dcav__option--acao:hover {
	background: var(--dcav-primaria-escura);
	border-color: var(--dcav-primaria-escura);
}
/* Sobre o azul cheio, o cinza da segunda linha sumiria: aqui ela clareia. */
.dcav__option--acao .dcav__option-desc {
	color: #dce8fa;
}

/*
 * Escolha com consequência: qual consulta, qual horário. É onde a pessoa decide
 * o que vai pagar, então ganha fundo branco e uma faixa lateral — destaca-se do
 * assunto sem competir com a ação principal.
 */
.dcav__option--escolha {
	--dcav-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm-1 11-3-3 1-1 2 2 5-5 1 1-6 6Z'/%3E%3C/svg%3E");
	border-color: var(--dcav-borda-forte);
	border-left: 3px solid var(--dcav-secundaria);
	background: var(--dcav-superficie);
}
.dcav__option--escolha:hover {
	background: var(--dcav-realce);
}

/* Assunto do menu de dúvidas: leva a uma explicação, não a uma decisão. */
.dcav__option--assunto {
	--dcav-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm-1 12h2v2h-2v-2Zm1-9c-2 0-3 1-3 3h2c0-1 0-1 1-1s1 0 1 1c0 1-2 1-2 4h2c0-2 2-2 2-4 0-2-1-3-3-3Z'/%3E%3C/svg%3E");
}

/*
 * Atalho: sai do assunto da tela e vai direto ao que a pessoa veio buscar —
 * o endereço, ou a porta de quem é médico. Mais leve que os outros de propósito,
 * porque não é o caminho que a tela está propondo.
 */
.dcav__option--atalho {
	--dcav-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h9v9h-2V10l-7 7-1-1 7-7H7V7Z'/%3E%3C/svg%3E");
	background: none;
	border-style: dashed;
	border-color: var(--dcav-borda-forte);
	font-weight: 500;
}
.dcav__option--atalho:hover {
	background: var(--dcav-superficie-suave);
	border-style: solid;
}

/* Caminho neutro: voltar ao menu. Não disputa atenção com nada. */
.dcav__option--neutro {
	--dcav-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 6 1 1-4 4h12v2H7l4 4-1 1-6-6 6-6Z'/%3E%3C/svg%3E");
	background: none;
	border-color: var(--dcav-borda);
	color: var(--dcav-texto-suave);
	font-weight: 500;
}
.dcav__option--neutro:hover {
	background: var(--dcav-superficie-suave);
	color: var(--dcav-primaria);
}

/*
 * Alerta: a tela do paciente com cirurgia marcada e sintoma agudo. Não é botão
 * de erro — é o que precisa ser lido antes de seguir pelo assistente, e por isso
 * usa a cor de aviso, que já é a da janela para "pare e leia".
 */
.dcav__option--alerta {
	--dcav-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm0 4 8 13H4l8-13Zm-1 5h2v5h-2v-5Zm0 6h2v2h-2v-2Z'/%3E%3C/svg%3E");
	background: var(--dcav-aviso-fundo);
	border-color: var(--dcav-aviso-texto);
	color: var(--dcav-aviso-texto);
}
.dcav__option--alerta:hover {
	background: var(--dcav-aviso-fundo);
	border-color: var(--dcav-aviso-texto);
	filter: brightness(0.97);
}
.dcav__option--alerta .dcav__option-desc {
	color: var(--dcav-aviso-texto);
}

/* ----------------------------------------------------------------
 * Campo de texto
 * ---------------------------------------------------------------- */

.dcav__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.dcav__srlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.dcav__input {
	flex: 1 1 180px;
	padding: 10px 12px;
	border: 1px solid var(--dcav-borda-forte);
	border-radius: var(--dcav-raio);
	font-family: inherit;
	font-size: var(--dcav-fs-botao);
	color: var(--dcav-texto);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dcav__input:hover {
	border-color: var(--dcav-secundaria);
}
.dcav__input:focus {
	border-color: var(--dcav-secundaria);
	box-shadow: 0 0 0 3px rgba(26, 111, 212, 0.16);
	outline: none;
}
.dcav__input:focus-visible {
	outline: 3px solid var(--dcav-foco);
	outline-offset: 1px;
}
.dcav__send {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--dcav-raio);
	background: var(--dcav-primaria);
	color: #fff;
	font-family: inherit;
	font-size: var(--dcav-fs-botao);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.dcav__send:hover {
	background: var(--dcav-primaria-escura);
}
.dcav__send:focus-visible {
	outline: 3px solid var(--dcav-foco);
	outline-offset: 2px;
}
.dcav__send[disabled] {
	opacity: 0.6;
	cursor: default;
}
.dcav__error {
	flex: 1 1 100%;
	margin: 0;
	color: var(--dcav-erro-texto);
	font-size: var(--dcav-fs-texto);
	min-height: 1px;
}
.dcav__error:not(:empty) {
	margin-top: 10px;
	padding: 9px 12px;
	border-radius: var(--dcav-raio-p);
	background: var(--dcav-erro-fundo);
	font-weight: 600;
}

/* ----------------------------------------------------------------
 * Tela final
 * ---------------------------------------------------------------- */

.dcav__preview {
	margin-top: 16px;
	padding: 13px 15px;
	border: 1px solid var(--dcav-borda);
	border-left: 3px solid var(--dcav-secundaria);
	border-radius: var(--dcav-raio-p);
	background: var(--dcav-superficie-suave);
}
.dcav__preview-label {
	margin: 0 0 6px;
	color: var(--dcav-texto-suave);
	font-size: var(--dcav-fs-selo);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.dcav__preview-msg {
	margin: 0;
	color: var(--dcav-texto);
	font-size: var(--dcav-fs-texto);
	white-space: pre-line;
	line-height: 1.55;
}

/* ----------------------------------------------------------------
 * Agenda
 * ---------------------------------------------------------------- */

/* Recipiente dos dias, preenchido quando a resposta do servidor chega. Tem
   estilo próprio para a área não pular de altura entre "carregando" e a lista. */
.dcav__agenda {
	min-height: 44px;
}
.dcav__loading {
	margin: 16px 0 0;
	color: var(--dcav-texto-suave);
	font-size: var(--dcav-fs-texto);
}
/*
 * Três colunas de dias, aproveitando a janela mais larga. Com duas colunas e
 * células altas, ver a segunda semana exigia rolar — e escolher dia é
 * justamente onde comparar as opções lado a lado ajuda.
 */
.dcav__dates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	margin-top: 14px;
}
.dcav__date {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 10px;
	border: 1px solid var(--dcav-borda);
	border-radius: var(--dcav-raio);
	background: var(--dcav-superficie-suave);
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.dcav__date:hover {
	background: var(--dcav-realce);
	border-color: var(--dcav-secundaria);
}
.dcav__date:focus-visible {
	outline: 3px solid var(--dcav-foco);
	outline-offset: 2px;
}
.dcav__date-day {
	color: var(--dcav-primaria);
	font-size: var(--dcav-fs-botao);
	font-weight: 700;
	line-height: 1.3;
	text-transform: capitalize;
}
.dcav__date-count {
	color: var(--dcav-texto-suave);
	font-size: var(--dcav-fs-selo);
}
.dcav__more {
	grid-column: 1 / -1;
	padding: 8px 10px;
	border: 1px dashed var(--dcav-borda-forte);
	border-radius: var(--dcav-raio);
	background: none;
	color: var(--dcav-primaria);
	font-family: inherit;
	font-size: var(--dcav-fs-botao);
	font-weight: 600;
	cursor: pointer;
}
.dcav__more:hover {
	background: var(--dcav-superficie-suave);
}
.dcav__chosen {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: var(--dcav-raio-p);
	background: var(--dcav-realce);
	color: var(--dcav-texto);
	font-size: var(--dcav-fs-texto);
	text-transform: capitalize;
}
/* Horário é texto curto ("14:20"): cabem quatro por linha sem apertar. */
.dcav__times {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
	margin-top: 4px;
}
.dcav__time {
	min-height: 38px;
	padding: 9px 4px;
	border: 1px solid var(--dcav-borda);
	border-radius: var(--dcav-raio);
	background: var(--dcav-superficie-suave);
	color: var(--dcav-primaria);
	font-family: inherit;
	font-size: var(--dcav-fs-botao);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.dcav__time:hover {
	background: var(--dcav-realce);
	border-color: var(--dcav-secundaria);
}
.dcav__time:focus-visible {
	outline: 3px solid var(--dcav-foco);
	outline-offset: 2px;
}
.dcav__notice {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: var(--dcav-raio-p);
	background: var(--dcav-aviso-fundo);
	color: var(--dcav-aviso-texto);
	font-size: var(--dcav-fs-texto);
}

/* ----------------------------------------------------------------
 * Tela de pagamento
 * ---------------------------------------------------------------- */

.dcav__resumo {
	margin: 12px 0 0;
	padding: 2px 14px;
	border: 1px solid var(--dcav-borda);
	border-radius: var(--dcav-raio);
	background: var(--dcav-superficie-suave);
}
.dcav__resumo-linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: var(--dcav-fs-texto);
}
.dcav__resumo-linha + .dcav__resumo-linha {
	border-top: 1px solid var(--dcav-borda);
}
.dcav__resumo-rotulo {
	color: var(--dcav-texto-suave);
	flex: 0 0 auto;
}
.dcav__resumo-valor {
	font-weight: 600;
	color: var(--dcav-texto);
	text-align: right;
}
/* A última linha é o valor a pagar: destaque para não haver dúvida sobre
   quanto está sendo cobrado agora. */
.dcav__resumo-linha:last-child .dcav__resumo-valor {
	font-size: var(--dcav-fs-destaque);
	color: var(--dcav-primaria);
}
.dcav__nota {
	margin: 10px 0 0;
	color: var(--dcav-texto-suave);
	font-size: var(--dcav-fs-texto);
	line-height: 1.5;
}

/* ----------------------------------------------------------------
 * Contato na tela de pagamento
 * ---------------------------------------------------------------- */

.dcav__contato {
	margin: 12px 0 0;
	padding: 12px;
	border: 1px solid var(--dcav-borda);
	border-radius: var(--dcav-raio);
	background: var(--dcav-superficie);
}
.dcav__contato-titulo {
	margin: 0 0 8px;
	color: var(--dcav-texto-suave);
	font-size: var(--dcav-fs-texto);
}
/*
 * Os dois campos ficam lado a lado quando há largura, e um sob o outro quando
 * não há. Empilhados numa janela de 560px, e-mail e celular somavam altura
 * suficiente para empurrar o botão de pagar para fora da tela.
 */
.dcav__campos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
/*
 * Campo largo por padrão, estreito quando é curto.
 *
 * Com os quatro pedindo 200px, no celular cada um caía numa linha e o bloco de
 * contato passava de 400px — mais do que a tela inteira tem para o conteúdo.
 * Nome e sobrenome cabem em 130px e passam a dividir a linha; e-mail e celular
 * continuam pedindo 200px, então pareiam na janela larga e ficam inteiros no
 * celular. São os dois em que errar custa o comprovante e a identificação no
 * consultório, e espremê-los para ganhar uma linha seria trocar altura por erro.
 */
.dcav__campo {
	flex: 1 1 200px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.dcav__campo--curto {
	flex: 1 1 130px;
}
.dcav__campo-rotulo {
	color: var(--dcav-texto);
	font-size: var(--dcav-fs-texto);
	font-weight: 600;
}
.dcav__campo .dcav__input {
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
}
/* Campo recusado fica marcado: sem isso, numa tela com dois campos, a pessoa
   lê a mensagem de erro e ainda tem de descobrir qual dos dois corrigir. */
.dcav__campo--erro .dcav__input {
	border-color: var(--dcav-erro-texto);
	box-shadow: 0 0 0 3px rgba(169, 34, 34, 0.12);
}
.dcav__campo--erro .dcav__campo-rotulo {
	color: var(--dcav-erro-texto);
}
/* Aviso de modo de teste: precisa incomodar um pouco, porque cobrar R$ 1,00
   com credencial de produção é situação temporária que não pode passar batida. */
.dcav__notice--teste {
	background: var(--dcav-erro-fundo);
	color: var(--dcav-erro-texto);
	font-weight: 600;
}

.dcav__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}
/* O botão de ação principal continua alto: é o que se procura na tela, e é o
   único item aqui em que altura extra ajuda em vez de atrapalhar. */
.dcav__cta {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 13px 16px;
	border: 0;
	border-radius: var(--dcav-raio);
	background: var(--dcav-whatsapp);
	color: #06331a;
	font-family: inherit;
	font-size: var(--dcav-fs-acao);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}
.dcav__cta:hover {
	background: var(--dcav-whatsapp-escuro);
	color: #06331a;
}
.dcav__cta:focus-visible {
	outline: 3px solid var(--dcav-foco);
	outline-offset: 2px;
}
.dcav__cta[disabled] {
	opacity: 0.7;
	cursor: default;
}
.dcav__cta--alt {
	background: var(--dcav-primaria);
	color: #fff;
}
.dcav__cta--alt:hover {
	background: var(--dcav-primaria-escura);
	color: #fff;
}

/* ----------------------------------------------------------------
 * Rodapé
 * ---------------------------------------------------------------- */

/*
 * Voltar e reiniciar: barra fixa no pé da janela.
 *
 * Duas mudanças em cima da mesma ideia. A primeira foi de forma: eram dois links
 * sublinhados de 13px, o único lugar da janela com um desenho de botão só deles,
 * sem alvo de 48px e logo abaixo de botões que seguiam outra regra. Viraram
 * `.dcav__option` no papel neutro.
 *
 * A segunda foi de lugar. Eles eram o último bloco da tela e rolavam com ela: na
 * tela de pagamento, que é a mais alta da conversa, voltar exigia rolar até o fim
 * para descobrir onde estava o botão. Quem se perdeu no meio de um agendamento
 * não rola atrás da saída — fecha a janela. Agora a barra fica fora do corpo que
 * rola, sempre à vista.
 *
 * Sendo fixa, ela precisa gastar pouca altura: os dois ficam lado a lado, e não
 * empilhados como as opções da conversa. Em tela estreita eles quebram para duas
 * linhas, que é melhor do que espremer o rótulo até virar sigla.
 */
.dcav__rodape {
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	border-top: 1px solid var(--dcav-borda);
	background: var(--dcav-superficie);
}
.dcav__rodape .dcav__option {
	flex: 1 1 150px;
	width: auto;
}

/*
 * Reiniciar usa o papel neutro, mas não a seta dele: dois botões neutros com a
 * mesma seta, um sobre o outro, seriam a duplicidade de volta outra vez — só
 * que disfarçada. Aqui a seta vira o círculo de recomeçar.
 */
.dcav__option--recomecar {
	--dcav-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L7 6l5 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7Z'/%3E%3C/svg%3E");
}
.dcav__disclaimer {
	margin: 0;
	padding: 11px 18px;
	background: #f2f5f9;
	color: var(--dcav-texto-suave);
	font-size: var(--dcav-fs-selo);
	text-align: center;
	border-top: 1px solid var(--dcav-borda);
}

/* ----------------------------------------------------------------
 * Telas pequenas
 *
 * No celular a conversa ocupa a tela inteira, sem borda e sem cantos
 * arredondados: espaço é o recurso escasso ali, e uma janela flutuante gastaria
 * parte dele com margem enquanto o conteúdo rola.
 *
 * O corte é 600px, e não 480px: aparelho grande deitado, e celular com fonte
 * aumentada, chegam perto de 600px de largura útil e continuam sendo celular.
 *
 * Aqui o fundo translúcido sai de cena: com a janela cobrindo tudo, ele não é
 * visível e o desfoque só custaria bateria.
 * ---------------------------------------------------------------- */

@media (max-width: 600px) {
	.dcav {
		bottom: 14px;
	}
	.dcav--right {
		right: 14px;
	}
	.dcav--left {
		left: 14px;
	}
	.dcav__backdrop {
		background: rgba(16, 33, 60, 0.35);
		backdrop-filter: none;
	}
	.dcav__panel,
	.dcav--amplo .dcav__panel {
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		/* Barras do sistema: onde houver suporte, a altura vira a área
		   realmente visível, e o rodapé deixa de ficar sob a barra do
		   navegador. */
		height: 100dvh;
		border-radius: 0;
	}
	.dcav__header {
		padding: 12px 14px;
	}
	.dcav__body {
		padding: 14px;
	}
	.dcav__rodape {
		padding: 9px 14px;
	}
	/*
	 * O rótulo CONTINUA visível no celular.
	 *
	 * Ele era escondido para economizar espaço, e o resultado era um círculo com
	 * a foto da atendente no canto da tela — que ninguém identifica como um
	 * chat. Foi relatado como "o botão desapareceu no smartphone", quando ele
	 * estava lá: só não se anunciava.
	 *
	 * Um botão flutuante um pouco mais largo custa espaço que sobra; um botão
	 * que não se explica custa a conversa inteira.
	 */
	.dcav__launcher {
		padding: 9px 16px 9px 10px;
		font-size: var(--dcav-fs-texto);
		gap: 8px;
		max-width: calc(100vw - 28px);
	}
	.dcav__launcher-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dcav__launcher-avatar {
		width: 34px;
		height: 34px;
		margin: -4px -2px -4px -4px;
	}
	.dcav__launcher-icon,
	.dcav__launcher-icon svg {
		width: 22px;
		height: 22px;
	}
	/* Duas colunas de dias e três de horários: o dedo precisa de mais alvo do
	   que o ponteiro do mouse. */
	.dcav__dates {
		grid-template-columns: repeat(2, 1fr);
	}
	.dcav__times {
		grid-template-columns: repeat(3, 1fr);
	}
	/* O piso de 48px vale no celular tambem: e onde o dedo erra. */
	.dcav__option {
		min-height: 48px;
	}
}

/*
 * Tela muito estreita (aparelho antigo, ou fonte do sistema bem aumentada): aí
 * sim o rótulo sai, porque com ele o botão ocuparia a largura toda.
 */
@media (max-width: 340px) {
	.dcav__launcher-label {
		display: none;
	}
	.dcav__launcher {
		padding: 12px;
	}
}

/*
 * Tela baixa (celular deitado, netbook): o cabeçalho e o rodapé consomem
 * proporcionalmente muito mais espaço, então encolhem para o corpo da conversa
 * sobrar.
 */
@media (max-height: 520px) {
	.dcav__panel,
	.dcav--amplo .dcav__panel {
		height: 100%;
		height: 100dvh;
		border-radius: 0;
		inset: 0;
		margin: 0;
		width: 100%;
	}
	.dcav__header {
		padding: 9px 14px;
	}
	.dcav__subtitle {
		display: none;
	}
	.dcav__disclaimer {
		display: none;
	}
	.dcav__body {
		padding: 12px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dcav__launcher,
	.dcav__option,
	.dcav__input,
	.dcav__panel,
	.dcav__backdrop,
	.dcav__block,
	.dcav__close,
	.dcav__zoom,
	.dcav__fonte,
	.dcav__send,
	.dcav__date,
	.dcav__time,
	.dcav__cta {
		transition: none;
		animation: none;
	}
	.dcav__launcher:hover {
		transform: none;
	}
	.dcav__option:active {
		transform: none;
	}
}