/* Chat em tela cheia, estilo assistente conversacional (ChatGPT). Mesmo design
   no celular e no computador: coluna central de leitura, resposta da IA sem balão,
   mensagem do usuário em balão cinza, campo de digitar em pílula fixo embaixo. */

.fdcsd-app {
	--fdcsd-accent: #059669;
	--fdcsd-accent-hover: #047857;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: #fff;
	color: #0d0d0d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.fdcsd-app *, .fdcsd-app *::before, .fdcsd-app *::after { box-sizing: border-box; }

/* ── Modo tela cheia (padrão): cobre a página inteira, tema incluso ───── */
.fdcsd-app--cheia {
	position: fixed;
	inset: 0;
	z-index: 100000;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	border: 0;
	border-radius: 0;
}
body.fdcsd-body-cheia { overflow: hidden; }

/* ── Modo embutido ([shortcode modo="embutido"]): cartão dentro da página ─ */
.fdcsd-app:not(.fdcsd-app--cheia) {
	max-width: 750px;
	margin: 20px auto 40px;
	height: 72vh;
	min-height: 480px;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	overflow: hidden;
}
@media (max-width: 600px) {
	.fdcsd-app:not(.fdcsd-app--cheia) { height: 68vh; min-height: 420px; max-height: 560px; }
}

/* ── Topo enxuto ───────────────────────────────────────────────────────── */
.fdcsd-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid #ececec;
	background: #fff;
}
.fdcsd-header-icone { font-size: 22px; line-height: 1; }
.fdcsd-header h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: #0d0d0d; }
.fdcsd-header p { margin: 1px 0 0; font-size: 12px; color: #6b6b6b; line-height: 1.3; }
@media (max-width: 600px) { .fdcsd-header p { display: none; } }

/* ── Área de mensagens: coluna central de até 768px ───────────────────── */
.fdcsd-mensagens {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 24px max(16px, calc((100% - 768px) / 2));
	background: #fff;
}

.fdcsd-msg { display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.fdcsd-msg--assistente { align-self: stretch; }
.fdcsd-msg--usuario { align-self: flex-end; align-items: flex-end; max-width: 85%; }

.fdcsd-bolha {
	font-size: 16px;
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.fdcsd-msg--assistente .fdcsd-bolha { background: transparent; border: 0; padding: 0; color: #0d0d0d; }
.fdcsd-msg--usuario .fdcsd-bolha { background: #f4f4f4; color: #0d0d0d; padding: 10px 18px; border-radius: 22px; }
.fdcsd-msg--sucesso .fdcsd-bolha { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; padding: 14px 18px; border-radius: 16px; }
.fdcsd-bolha a { color: var(--fdcsd-accent); font-weight: 600; text-decoration: underline; }

/* ── Opções rápidas e botão final ─────────────────────────────────────── */
.fdcsd-opcoes, .fdcsd-links { display: flex; flex-wrap: wrap; gap: 8px; }

.fdcsd-opcao-btn {
	background: #fff;
	border: 1px solid #d9d9d9;
	color: #0d0d0d;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	border-radius: 999px;
	padding: 8px 16px;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.fdcsd-opcao-btn:hover { border-color: var(--fdcsd-accent); color: var(--fdcsd-accent); background: #fafafa; }
.fdcsd-opcao-btn:disabled { opacity: .4; cursor: not-allowed; }

.fdcsd-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--fdcsd-accent);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 15px;
	border-radius: 999px;
	padding: 12px 24px;
	box-shadow: 0 4px 14px rgba(0,0,0,.15);
	transition: background .15s, transform .15s;
}
.fdcsd-link-btn:hover { background: var(--fdcsd-accent-hover); transform: translateY(-1px); }

/* ── "Digitando..." ───────────────────────────────────────────────────── */
.fdcsd-digitando { display: flex; gap: 5px; padding: 6px 0; }
.fdcsd-digitando span {
	width: 8px; height: 8px; border-radius: 50%; background: #b4b4b4;
	animation: fdcsd-pulsa 1.2s infinite ease-in-out;
}
.fdcsd-digitando span:nth-child(2) { animation-delay: .15s; }
.fdcsd-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes fdcsd-pulsa { 0%, 60%, 100% { opacity: .3; transform: scale(.8); } 30% { opacity: 1; transform: scale(1); } }

/* ── Campo de digitar: pílula centralizada, fixa embaixo ──────────────── */
.fdcsd-input-wrap {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	width: min(768px, calc(100% - 32px));
	margin: 0 auto 16px;
	margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	padding: 8px 8px 8px 20px;
	background: #fff;
	border: 1px solid #d9d9e3;
	border-radius: 28px;
	box-shadow: 0 2px 14px rgba(0,0,0,.08);
	transition: border-color .15s, box-shadow .15s;
}
.fdcsd-input-wrap:focus-within {
	border-color: var(--fdcsd-accent);
	box-shadow: 0 2px 14px rgba(0,0,0,.08), 0 0 0 3px rgba(0,0,0,.05);
}

.fdcsd-input {
	flex: 1;
	min-width: 0;
	resize: none;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	color: #0d0d0d;
	font-family: inherit;
	font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
	line-height: 1.5;
	padding: 9px 0;
	margin: 0;
	max-height: 160px;
}
.fdcsd-input::placeholder { color: #8e8e8e; }

.fdcsd-btn-enviar {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fdcsd-accent);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, opacity .15s;
}
.fdcsd-btn-enviar:hover { background: var(--fdcsd-accent-hover); }
.fdcsd-btn-enviar:disabled { opacity: .35; cursor: not-allowed; }