/*
 * ALexa - Assistente Virtual — widget flutuante sitewide.
 *
 * Cores do site em valores fixos (não var(--c-*)) de propósito: esses
 * tokens só existem dentro do <style> inline de cada page-*.php de
 * ferramenta (ver page-calculadora-taxa-turistica.php) — este widget
 * aparece em TODAS as páginas, incluindo artigos/páginas normais do
 * GeneratePress que nunca definem esses tokens. Paleta copiada de lá:
 * --c-blue: #008bbd, --c-ink: #0a2d4d, --c-band: #eef5f9.
 *
 * z-index 1500: abaixo do popup de cookies (2000, canto inferior
 * ESQUERDO — nunca se sobrepõem no ecrã, mas por segurança o consent
 * ganha se algum dia colidirem) e acima do resto do site.
 */

.al-alexa {
	--al-alexa-blue: #008bbd;
	--al-alexa-blue-dark: #0057ff;
	--al-alexa-ink: #0a2d4d;
	--al-alexa-body: #536373;
	--al-alexa-band: #eef5f9;
	--al-alexa-border: rgba(10, 45, 77, 0.1);
	--al-alexa-white: #ffffff;
	--al-alexa-muted: #6b7785;
}

.al-alexa__fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--al-alexa-blue), var(--al-alexa-blue-dark));
	color: var(--al-alexa-white);
	box-shadow: 0 10px 24px rgba(0, 87, 255, 0.35);
	cursor: pointer;
	z-index: 1500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.al-alexa__fab svg { width: 24px; height: 24px; }
.al-alexa__fab:hover { filter: brightness(1.05); }

.al-alexa__panel {
	position: fixed;
	right: 24px;
	bottom: 92px;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 540px;
	max-height: calc(100vh - 140px);
	display: flex;
	flex-direction: column;
	background: var(--al-alexa-white);
	border: 1px solid var(--al-alexa-border);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(10, 45, 77, 0.18);
	z-index: 1500;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* `display: flex` acima venceria [hidden] sem esta regra (author
   stylesheet ganha sempre à UA stylesheet, mesma especificidade). */
.al-alexa__panel[hidden] { display: none; }

.al-alexa__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--al-alexa-border); }
.al-alexa__header-title { font-size: 14.5px; font-weight: 700; color: var(--al-alexa-ink); }
.al-alexa__clear { border: 0; background: none; color: var(--al-alexa-blue); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.al-alexa__close { border: 0; background: none; color: var(--al-alexa-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.al-alexa__subtitle { font-size: 12px; color: var(--al-alexa-body); padding: 10px 16px 0; line-height: 1.5; }

.al-alexa__list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.al-alexa__empty { color: var(--al-alexa-body); font-size: 13px; text-align: center; margin-top: 20px; }
.al-alexa__bubble { max-width: 85%; padding: 9px 12px; border-radius: 12px; background: var(--al-alexa-band); font-size: 13.5px; line-height: 1.55; color: var(--al-alexa-ink); white-space: pre-wrap; word-break: break-word; }
.al-alexa__bubble.is-user { align-self: flex-end; background: var(--al-alexa-blue); color: var(--al-alexa-white); }
.al-alexa__bubble.is-thinking { align-self: flex-start; color: var(--al-alexa-muted); font-style: italic; }
.al-alexa__bubble a { color: var(--al-alexa-blue); font-weight: 600; word-break: break-all; }
.al-alexa__bubble.is-user a { color: var(--al-alexa-white); text-decoration: underline; }

.al-alexa__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--al-alexa-border); }
.al-alexa__form textarea {
	flex: 1;
	resize: none;
	padding: 10px 12px;
	border: 1px solid var(--al-alexa-border);
	border-radius: 10px;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--al-alexa-ink);
}
.al-alexa__form textarea:focus { outline: none; border-color: var(--al-alexa-blue); box-shadow: 0 0 0 3px rgba(0, 139, 189, 0.12); }
.al-alexa__send {
	align-self: flex-end;
	border: 0;
	border-radius: 10px;
	padding: 10px 16px;
	background: linear-gradient(135deg, #007ed4, var(--al-alexa-blue));
	color: var(--al-alexa-white);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.al-alexa__send:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 480px) {
	.al-alexa__panel { right: 16px; bottom: 84px; width: calc(100vw - 32px); }
	.al-alexa__fab { right: 16px; bottom: 16px; }
}