/* Protótipo de chatbot de sugestão (js/chatbot_widget.js + chatbot_api.php).
   Reaproveita os tokens de css/layout-base/base.css e fica empilhado acima do
   botão flutuante do WhatsApp (ver .wpp-float em base.css) pra não sobrepor. */

.chatbot-float { position: fixed; right: 22px; bottom: 104px; z-index: 499; }
.chatbot-float .chatbot-toggle {
	width: 52px; height: 52px; margin: 0; border-radius: 50%; border: none; padding: 0; cursor: pointer;
	background: var(--red); box-shadow: var(--shadow-md);
	display: flex; align-items: center; justify-content: center;
	transition: transform .2s ease;
}
.chatbot-float .chatbot-toggle:hover { transform: scale(1.08); }
.chatbot-float .chatbot-toggle svg { width: 26px; height: 26px; stroke: #fff; }

.chatbot-panel {
	position: fixed; right: 22px; bottom: 166px; z-index: 500;
	width: 330px; max-width: calc(100vw - 32px);
	height: 440px; max-height: calc(100vh - 200px);
	background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
	display: flex; flex-direction: column; overflow: hidden;
	opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.chatbot-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.chatbot-panel .chatbot-head {
	background: var(--red); color: #fff; padding: 14px 16px;
	display: flex; align-items: center; justify-content: space-between; flex: none;
}
.chatbot-panel .chatbot-head h3 { margin: 0; font-family: var(--font-heading); font-size: 1rem; }
.chatbot-panel .chatbot-head p { margin: 2px 0 0; font-family: var(--font-body); font-size: .74rem; opacity: .85; }
.chatbot-panel .chatbot-close {
	background: none; border: none; color: #fff; cursor: pointer; padding: 4px; margin: 0; line-height: 0;
}
.chatbot-panel .chatbot-close svg { width: 20px; height: 20px; }

.chatbot-panel .chatbot-messages {
	flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
	background: var(--bg-alt);
}

.chatbot-msg { max-width: 84%; padding: 9px 12px; border-radius: var(--r-md); font-family: var(--font-body); font-size: .86rem; line-height: 1.4; }
.chatbot-msg.is-bot { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chatbot-msg.is-user { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 4px; }

.chatbot-msg .chatbot-link {
	display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: var(--r-pill);
	background: var(--red-tint); color: var(--red-dark); font-weight: 700; font-size: .78rem; text-decoration: none;
}
.chatbot-msg .chatbot-link:hover { background: var(--red); color: #fff; }

.chatbot-panel .chatbot-form {
	flex: none; display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: #fff;
}
.chatbot-panel .chatbot-form input[type="text"] {
	flex: 1; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 9px 14px;
	font-family: var(--font-body); font-size: .86rem; outline: none;
}
.chatbot-panel .chatbot-form input[type="text"]:focus { border-color: var(--red); }
.chatbot-panel .chatbot-form button {
	flex: none; width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%; border: none; background: var(--red);
	color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chatbot-panel .chatbot-form button svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
	.chatbot-float { bottom: calc(148px + env(safe-area-inset-bottom)); }
	.chatbot-panel { bottom: calc(212px + env(safe-area-inset-bottom)); right: 16px; }
}