/**
 * O widget da LivIA.
 *
 * Tudo aqui é prefixado com .livia- e nada usa seletor de elemento solto: isto
 * roda dentro do tema de vocês, e um `button { }` daqui quebraria o site.
 *
 * A cor de destaque vem do painel, por uma variável no elemento raiz. Quem
 * quiser ir além pode redefinir qualquer uma das variáveis abaixo no CSS do
 * tema, sem tocar neste arquivo.
 */

.livia-raiz {
	--livia-cor: #1f5f8b;
	--livia-cor-texto: #ffffff;

	--livia-fundo: #ffffff;
	--livia-tinta: #16202a;
	--livia-tinta-media: #5b6875;
	--livia-tinta-fraca: #8e9aa6;
	--livia-linha: #e7ebef;
	--livia-balao-dela: #f2f4f7;

	/* Sombra em camadas: uma rasa que cola o elemento na página e uma larga e
	   fraca que dá a altura. Uma sombra só, grande, sai borrada. */
	--livia-sombra:
		0 1px 2px rgba(16, 30, 45, .06),
		0 8px 24px rgba(16, 30, 45, .12),
		0 24px 48px rgba(16, 30, 45, .08);

	--livia-raio: 14px;

	/* Inter primeiro porque é a face mais comum instalada em máquina de
	   trabalho e tem números de largura fixa; depois a do sistema. Nenhuma
	   é baixada: uma requisição a um servidor de fontes atrasaria a página do
	   cliente e mandaria o IP dele para fora, sem necessidade nenhuma. */
	--livia-fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 99999;
	font-family: var(--livia-fonte);
	font-size: 14px;
	line-height: 1.5;
	color: var(--livia-tinta);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.003em;

	/* O container não intercepta clique; só os filhos visíveis interceptam. */
	pointer-events: none;
}

.livia-raiz * {
	box-sizing: border-box;
}

/**
 * O `display: none` que o navegador dá a [hidden] tem a mesma especificidade
 * que qualquer classe daqui — e perde para ela por vir antes. Sem esta linha, a
 * janela nasce aberta na cara de quem só queria preencher o formulário.
 */
.livia-raiz [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ bolha */

/**
 * O botão que abre a conversa: pílula com ícone e rótulo.
 *
 * Era um círculo de 56px só com o balãozinho. Ícone de chat significa "chat"
 * para quem já usa chat — e quem está preenchendo um briefing pela primeira vez
 * não é essa pessoa. Com "Dúvidas?" escrito, o botão diz o que faz sem exigir
 * que ninguém decifre desenho.
 *
 * O rótulo sai da configuração, não daqui: este plugin não atende só a JoinVix.
 */
.livia-bolha {
	pointer-events: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 52px;
	height: 52px;
	padding: 0 22px 0 19px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	white-space: nowrap;

	/* Mesmo degradê do cabeçalho, pelo mesmo motivo: chapado, a pílula vira
	   uma mancha de tinta; com 8% de variação ela ganha volume. */
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--livia-cor) 88%, #ffffff) 0%,
			var(--livia-cor) 100%
		);
	color: var(--livia-cor-texto);
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 2px 6px rgba(16, 30, 45, .18),
		0 10px 24px rgba(16, 30, 45, .16);
	transition: transform .16s ease, box-shadow .16s ease;
}

/* Sem rótulo configurado ele volta a ser redondo, e continua certo. */
.livia-bolha:not(:has(.livia-rotulo)) {
	width: 56px;
	height: 56px;
	padding: 0;
	gap: 0;
}

.livia-bolha:hover {
	transform: translateY(-1px);
	box-shadow:
		0 3px 8px rgba(16, 30, 45, .2),
		0 14px 30px rgba(16, 30, 45, .2);
}

.livia-bolha:active {
	transform: translateY(0);
}

.livia-bolha svg {
	width: 21px;
	height: 21px;
	display: block;
	flex: none;
	fill: currentColor;
}

.livia-rotulo {
	display: block;
	line-height: 1;
	/* O rótulo é texto de interface, não de leitura: o ajuste ótico do
	   .livia-raiz deixaria as letras apertadas neste tamanho e peso. */
	letter-spacing: 0;
}

/* Os dois ícones sobrepostos: a troca não mexe no tamanho do botão. */
.livia-bolha .livia-icone-fechar { display: none; }
.livia-raiz.livia-aberta .livia-bolha .livia-icone-chat { display: none; }
.livia-raiz.livia-aberta .livia-bolha .livia-icone-fechar { display: block; }

/* Pontinho de "tem gente do outro lado". */
/**
 * Pontinho de "tem gente do outro lado".
 *
 * Numa pílula ele não pode morar no canto de cima à direita: ali cai no meio do
 * arredondamento e fica cortado pela metade. Fica sobre o ícone, que é onde o
 * olho já está quando lê o botão.
 */
.livia-presenca {
	position: absolute;
	top: 8px;
	left: 27px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #35c05a;
	box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--livia-cor) 94%, #000000);
}

/* Sem rótulo o botão volta a ser redondo, e o pontinho volta para o canto. */
.livia-bolha:not(:has(.livia-rotulo)) .livia-presenca {
	top: 4px;
	left: auto;
	right: 4px;
}

/* ---------------------------------------------------------------- convite */

.livia-convite {
	pointer-events: auto;
	position: absolute;
	left: 2px;
	bottom: 70px;
	width: 244px;
	padding: 13px 34px 13px 15px;
	background: var(--livia-fundo);
	border: 1px solid var(--livia-linha);
	border-radius: 14px 14px 14px 4px;
	box-shadow: var(--livia-sombra);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--livia-tinta-media);
	cursor: pointer;
	animation: livia-sobe .3s cubic-bezier(.2, .8, .3, 1) both;
}

.livia-convite:hover {
	border-color: #d6dde4;
}

.livia-convite-x {
	position: absolute;
	top: 5px;
	right: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--livia-tinta-fraca);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
}

.livia-convite-x:hover {
	background: var(--livia-balao-dela);
	color: var(--livia-tinta-media);
}

@keyframes livia-sobe {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- janela */

/**
 * Painel lateral, colado na borda esquerda, do topo ao rodapé.
 *
 * Era uma janela flutuante de 384x564 com cantos arredondados. O painel de
 * altura inteira ganha duas coisas: a conversa deixa de ser uma janelinha
 * sobreposta ao formulário e passa a ser uma coluna ao lado dele — que é o que
 * ela é —, e a resposta de três parágrafos cabe sem rolagem.
 *
 * `position: fixed` e não `absolute`: a raiz é uma âncora de 0px no canto, e
 * altura inteira precisa de referência na janela do navegador, não nela.
 */
.livia-janela {
	pointer-events: auto;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 400px;
	max-width: 100vw;
	background: var(--livia-fundo);
	border-radius: 0;
	box-shadow: var(--livia-sombra);
	overflow: hidden;
	animation: livia-abre .22s cubic-bezier(.2, .8, .3, 1) both;
}

/* Entra deslizando da borda de onde vive, não crescendo do nada. */
@keyframes livia-abre {
	from { opacity: 0; transform: translateX(-16px); }
	to   { opacity: 1; transform: translateX(0); }
}

/**
 * A barra do admin do WordPress.
 *
 * Ela é fixa no topo e some por cima de qualquer coisa em `top: 0` — e quem
 * mais abre o site logado é justamente quem instalou o plugin, que veria o
 * cabeçalho do painel cortado e concluiria que está quebrado. São 32px, 46px
 * abaixo de 783 de largura; os números são do core, não inventados aqui.
 */
body.admin-bar .livia-janela {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .livia-janela {
		top: 46px;
	}
}

/* Com o painel ocupando a lateral inteira, a pílula ficaria por baixo dele. */
.livia-raiz.livia-aberta .livia-bolha,
.livia-raiz.livia-aberta .livia-convite {
	display: none;
}

/* ------------------------------------------------------------- cabeçalho */

.livia-topo {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px 13px 16px;
	color: var(--livia-cor-texto);
	flex: none;

	/* Um degradê de 6% e um fio claro no topo. Chapado, o cabeçalho vira um
	   retângulo de tinta; com isso ele ganha a espessura de uma barra. */
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--livia-cor) 92%, #ffffff) 0%,
			var(--livia-cor) 100%
		);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 1px 0 rgba(16, 30, 45, .06);
	position: relative;
	z-index: 1;
}

.livia-avatar {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
}

.livia-quem {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.livia-nome {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.2;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.livia-estado {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	line-height: 1.3;
	opacity: .82;
}

.livia-estado i {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6fe092;
}

.livia-fechar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: .75;
	transition: background .14s ease, opacity .14s ease;
}

.livia-fechar svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.livia-fechar:hover {
	background: rgba(255, 255, 255, .15);
	opacity: 1;
}

/* -------------------------------------------------------------- conversa */

.livia-conversa {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 16px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--livia-fundo);

	/* A barra de rolagem cinza e grossa do sistema é o detalhe que mais faz um
	   widget parecer improvisado. */
	scrollbar-width: thin;
	scrollbar-color: #cfd6dd transparent;
}

.livia-conversa::-webkit-scrollbar {
	width: 10px;
}

.livia-conversa::-webkit-scrollbar-track {
	background: transparent;
}

.livia-conversa::-webkit-scrollbar-thumb {
	background: #d3d9e0;
	border-radius: 10px;
	border: 3px solid var(--livia-fundo);
}

.livia-conversa::-webkit-scrollbar-thumb:hover {
	background: #b9c2cc;
}

.livia-linha {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 100%;
	animation: livia-sobe .2s ease both;
}

.livia-linha.livia-de-cliente {
	flex-direction: row-reverse;
}

/* Espaço entre falas de pessoas diferentes; falas seguidas da mesma pessoa
   ficam agrupadas, como em qualquer mensageiro. */
.livia-linha + .livia-linha.livia-vira {
	margin-top: 12px;
}

.livia-mini {
	flex: none;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--livia-cor);
	color: var(--livia-cor-texto);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
}

/* Invisível, mas ocupa o lugar: mantém os balões alinhados quando a mesma
   pessoa fala duas vezes seguidas. */
.livia-mini.livia-oculto {
	visibility: hidden;
}

/**
 * A coluna balão + horário.
 *
 * O horário fica FORA do balão. Dentro, uma resposta longa terminava com um
 * número solto embaixo do texto, e era um dos detalhes que faziam a conversa
 * parecer um formulário em vez de um chat.
 */
.livia-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	max-width: 84%;
}

.livia-de-cliente .livia-col {
	align-items: flex-end;
}

.livia-balao {
	max-width: 100%;
	padding: 10px 13px;
	border-radius: var(--livia-raio);
	border-top-left-radius: 5px;
	background: var(--livia-balao-dela);
	color: var(--livia-tinta);
	overflow-wrap: anywhere;
}

.livia-de-cliente .livia-balao {
	background: var(--livia-cor);
	color: var(--livia-cor-texto);
	border-top-left-radius: var(--livia-raio);
	border-top-right-radius: 5px;
}

/* Só o primeiro balão de um grupo tem o canto cortado; os seguintes ficam
   arredondados por igual, que é o que dá à coluna uma borda só. */
.livia-linha:not(.livia-vira) .livia-balao {
	border-top-left-radius: var(--livia-raio);
	border-top-right-radius: var(--livia-raio);
}

/* Parágrafos de verdade dentro do balão. Era isto que faltava: sem espaço
   entre as ideias, uma resposta de seis linhas vira um muro de texto. */
.livia-balao p {
	margin: 0;
	white-space: pre-wrap;
}

.livia-balao p + p {
	margin-top: .7em;
}

.livia-hora {
	margin: 4px 2px 0;
	font-size: 10.5px;
	line-height: 1;
	color: var(--livia-tinta-fraca);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- cursor e sugestões */

/**
 * O cursor que pisca no fim do texto enquanto ela escreve.
 *
 * É um pseudo-elemento em linha: acompanha a última palavra sozinho, sem
 * precisar de um nó extra no DOM nem de medir nada.
 */
.livia-balao.livia-escrevendo p:last-child::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1.05em;
	margin-left: 2px;
	vertical-align: -.18em;
	background: currentColor;
	opacity: .55;
	animation: livia-cursor 1.05s steps(1) infinite;
}

@keyframes livia-cursor {
	0%, 49%   { opacity: .6; }
	50%, 100% { opacity: 0; }
}

/**
 * As perguntas de partida.
 *
 * Alinhadas à esquerda, como a fala dela — são sugestões da LivIA, não do
 * cliente, e alinhar à direita faria parecer que ele já perguntou.
 */
.livia-sugestoes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 2px 34px;
	animation: livia-sobe .26s ease both;
}

/**
 * As perguntas de partida, preenchidas e coladas no campo.
 *
 * Contornadas e claras, elas competiam com os balões da conversa pelo mesmo
 * peso visual. Preenchidas, param de parecer mensagem e passam a parecer o que
 * são: coisas em que dá para tocar.
 */
.livia-sugestao {
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--livia-cor);
	color: var(--livia-cor-texto);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background .13s ease, transform .1s ease;
}

.livia-sugestao:hover {
	background: color-mix(in srgb, var(--livia-cor) 86%, #000000);
}

.livia-sugestao:active {
	transform: scale(.97);
}

/* A faixa que segura os chips, dentro do rodapé e fora da rolagem. */
.livia-sugestoes-area:empty {
	display: none;
}

.livia-sugestoes-area .livia-sugestoes {
	margin: 0;
	padding: 12px 12px 2px;
}

/* -------------------------------------------------------------- opinião */

/**
 * "Isso ajudou?" embaixo de uma resposta dela.
 *
 * Discreto, mas presente. A primeira versão ficava invisível até o mouse
 * chegar perto: some no celular, some para quem navega por teclado, e some
 * para quem simplesmente não passa o mouse ali — ou seja, quase todo mundo.
 * Um sinal que ninguém vê não é discrição, é um recurso que não existe.
 *
 * Então fica meio apagado e acende ao chegar perto. Aceso o tempo todo, dois
 * ícones embaixo de cada resposta puxariam o olho para longe do texto e
 * transformariam a conversa num formulário de avaliação.
 */
.livia-opiniao {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 3px;
	opacity: .5;
	transition: opacity .15s ease;
}

.livia-linha:hover .livia-opiniao,
.livia-opiniao:focus-within,
.livia-opiniao.livia-votou {
	opacity: 1;
}

.livia-polegar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--livia-tinta-fraca);
	cursor: pointer;
	transition: background .13s ease, color .13s ease;
}

.livia-polegar svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.livia-polegar:hover {
	background: var(--livia-balao-dela);
	color: var(--livia-tinta-media);
}

.livia-opiniao.livia-votou .livia-polegar {
	cursor: default;
	pointer-events: none;
}

/* A escolhida fica; a outra some, em vez de ficar como um botão morto. */
.livia-opiniao.livia-votou .livia-polegar:not(.livia-escolhido) {
	opacity: 0;
}

.livia-polegar.livia-escolhido {
	color: var(--livia-cor);
	background: color-mix(in srgb, var(--livia-cor) 10%, #ffffff);
}

.livia-obrigado {
	font-size: 12px;
	color: var(--livia-tinta-fraca);
	margin-left: 2px;
}

/* ------------------------------------------------------ tentar de novo */

.livia-balao-erro {
	background: color-mix(in srgb, #b32d2e 6%, var(--livia-balao-dela));
	box-shadow: inset 2px 0 0 color-mix(in srgb, #b32d2e 45%, #ffffff);
}

.livia-tentar {
	align-self: flex-start;
	margin-top: 6px;
	padding: 6px 13px;
	border: 1px solid color-mix(in srgb, var(--livia-cor) 32%, #ffffff);
	border-radius: 16px;
	background: var(--livia-fundo);
	color: color-mix(in srgb, var(--livia-cor) 88%, #000000);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background .13s ease, border-color .13s ease, transform .1s ease;
}

.livia-tentar:hover:not(:disabled) {
	background: color-mix(in srgb, var(--livia-cor) 7%, #ffffff);
	border-color: color-mix(in srgb, var(--livia-cor) 50%, #ffffff);
}

.livia-tentar:active:not(:disabled) {
	transform: scale(.97);
}

.livia-tentar:disabled {
	opacity: .55;
	cursor: default;
}

/* ------------------------------------------------------------- digitando */

.livia-digitando {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 13px;
	min-height: 40px;
}

.livia-digitando span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--livia-tinta-fraca);
	animation: livia-pulo 1.3s infinite ease-in-out;
}

.livia-digitando span:nth-child(2) { animation-delay: .16s; }
.livia-digitando span:nth-child(3) { animation-delay: .32s; }

@keyframes livia-pulo {
	0%, 62%, 100% { transform: translateY(0); opacity: .4; }
	28%           { transform: translateY(-4px); opacity: .95; }
}

/* Recado do sistema, no meio da conversa: "ainda estou verificando". */
.livia-nota {
	align-self: center;
	max-width: 84%;
	margin: 8px 0 2px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--livia-tinta-fraca);
	text-align: center;
}

/* --------------------------------------------------------------- entrada */

.livia-pe {
	flex: none;
	border-top: 1px solid var(--livia-linha);
	background: var(--livia-fundo);
}

.livia-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 11px 12px 9px;
}

.livia-campo {
	flex: 1;
	min-width: 0;
	height: 38px;
	max-height: 104px;
	padding: 9px 14px;
	border: 1px solid var(--livia-linha);
	border-radius: 19px;
	font: inherit;
	font-size: 14px;
	line-height: 1.43;
	color: var(--livia-tinta);
	background: #f7f9fb;
	resize: none;

	/* hidden, e não auto: com rows="1" o `auto` desenha as setinhas de rolagem
	   dentro do campo antes mesmo de haver o que rolar — foi o que apareceu na
	   primeira instalação. O JavaScript troca para auto quando o texto cresce. */
	overflow-y: hidden;
	transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.livia-campo::placeholder {
	color: var(--livia-tinta-fraca);
}

.livia-campo:focus {
	outline: none;
	background: var(--livia-fundo);
	border-color: color-mix(in srgb, var(--livia-cor) 45%, #ffffff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--livia-cor) 12%, transparent);
}

.livia-enviar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--livia-cor);
	color: var(--livia-cor-texto);
	cursor: pointer;
	transition: background .14s ease, transform .1s ease;
}

.livia-enviar svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	margin-left: 1px;
}

.livia-enviar:not([disabled]):hover {
	background: color-mix(in srgb, var(--livia-cor) 88%, #000000);
}

.livia-enviar:not([disabled]):active {
	transform: scale(.93);
}

.livia-enviar[disabled] {
	background: #dde3e9;
	cursor: default;
}

.livia-rodape {
	margin: 0;
	padding: 0 16px 10px;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--livia-tinta-fraca);
}

/* ------------------------------------------------------------ acesso/foco */

.livia-raiz :focus-visible {
	outline: 2px solid var(--livia-cor);
	outline-offset: 2px;
}

.livia-topo :focus-visible,
.livia-bolha:focus-visible {
	outline-color: currentColor;
}

/* ------------------------------------------------------------- telefone */

@media (max-width: 560px) {
	.livia-raiz {
		left: 16px;
		bottom: 16px;
	}

	/* O painel já é lateral e de altura inteira; no celular ele toma a largura
	   toda, porque 400px de painel sobre uma tela de 375 não deixa nada à
	   mostra do formulário — e aí a coluna ao lado vira uma janela por cima. */
	.livia-janela {
		right: 0;
		width: 100%;
	}

	/* Entalhe e barra de gestos do celular. Sem isto, o cabeçalho fica sob o
	   relógio do aparelho e o campo de texto, sob a barra do navegador. */
	.livia-topo {
		padding-top: calc(13px + env(safe-area-inset-top, 0px));
	}

	.livia-rodape {
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.livia-col {
		max-width: 86%;
	}

	.livia-convite {
		width: 224px;
	}

	.livia-bolha {
		height: 48px;
		padding: 0 18px 0 16px;
		font-size: 14px;
	}

	.livia-opiniao {
		opacity: 1;
	}

	/* Alvo de toque. 26px é confortável para o ponteiro e pequeno demais para
	   o dedo — o mínimo recomendado é 44. */
	.livia-polegar {
		width: 40px;
		height: 40px;
	}

	.livia-polegar svg {
		width: 17px;
		height: 17px;
	}

	.livia-tentar {
		padding: 10px 16px;
		font-size: 14px;
	}

	.livia-sugestao {
		padding: 10px 14px;
		font-size: 14px;
	}
}

/* ------------------------------------------------------- menos movimento */

@media (prefers-reduced-motion: reduce) {
	.livia-janela,
	.livia-convite,
	.livia-linha {
		animation: none;
	}

	.livia-bolha,
	.livia-campo,
	.livia-enviar,
	.livia-fechar {
		transition: none;
	}

	.livia-bolha:hover {
		transform: none;
	}

	/* Os pontinhos ficam, parados: são o sinal de "estou respondendo", e sem
	   eles a espera vira tela morta. */
	.livia-digitando span {
		animation: none;
		opacity: .5;
	}

	.livia-balao.livia-escrevendo p:last-child::after {
		animation: none;
		opacity: .5;
	}

	.livia-opiniao,
	.livia-polegar,
	.livia-tentar {
		transition: none;
	}

	.livia-tentar:active:not(:disabled) {
		transform: none;
	}
}