/*
 * Container do preview — regras equivalentes ao container real (.jared-chat
 * em jared-search.css), mas sob um nome de classe diferente de propósito:
 * assim o JS de busca real (jared-search.js), que inicializa tudo que tem
 * classe ".jared-chat", nunca encosta neste widget de demonstração.
 * Os elementos internos (header, bolha, input, botões...) reaproveitam as
 * mesmas classes BEM do jared-search.css, que já são seletores independentes
 * do container.
 */
.jared-preview {
	--accent: var(--e-global-color-accent, #3b82f6);
	--secondary: var(--e-global-color-secondary, #3b82f6);
	--border: #e2e8f0;
	--text: #475569;
	--bg: #F2F8F9;
	--radius: 12px;

	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	font-family: var(--e-global-typography-73d250c-font-family, inherit), sans-serif;
}

/* Altura maior só no preview — não mexe no chat real de blog/cases, que usa a mesma classe .jared-chat__messages mas com a altura definida em jared-search.css. */
.jared-preview .jared-chat__messages {
	height: 320px;
}

/* Envolve o selo do agente + a bolha da resposta do bot. O max-width fica
   aqui (não na bolha) — colocar % de largura direto num item de flex sem
   tamanho definido é o que causava o texto quebrando de forma esquisita. */
.jared-chat__msg-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 78%;
	min-width: 0;
}

.jared-chat__msg-content .jared-chat__bubble {
	max-width: 100%;
}

.jared-chat__agent-badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(59, 130, 246, 0.12);
	color: var(--secondary);
	font-size: 0.7em;
	font-weight: 700;
	margin-bottom: 4px;
}