/* =========================================================================
style.css
Estilos do "chat-funil" (formulário em formato de conversa).
Organizado em seções — use Ctrl+F para pular direto para a que precisar:
1. Variáveis de tema (cores, fontes) -> fácil trocar a identidade visual
2. Reset básico
3. Cabeçalho (header) do chat
4. Área de mensagens (balões)
5. Botões de opção (respostas rápidas)
6. Barra de digitação (input + botão enviar)
7. Botão final (CTA para WhatsApp)
8. Indicador "digitando..."
9. Responsividade
========================================================================= */

/* ---------- 1. VARIÁVEIS DE TEMA ---------- */
:root {
/* Cor principal (gradiente do cabeçalho, balão do usuário, botões) */
--cor-primaria-1: #1e3a8a;
--cor-primaria-2: #1e40af;
--cor-primaria-gradiente: linear-gradient(135deg, var(--cor-primaria-1), var(--cor-primaria-2));

/* Cor de destaque para o botão final (CTA do WhatsApp) */
--cor-whatsapp: #22c55e;
--cor-whatsapp-escuro: #16a34a;

/* Fundo da área de conversa */
--cor-fundo-chat: #efeae2;
--cor-fundo-pontinhos: #d4cebb;

/* Balão do bot (escritório) */
--cor-balao-bot-bg: #f3f4f6;
--cor-balao-bot-texto: #1f2937;

/* Balão do usuário (visitante) */
--cor-balao-usuario-texto: #ffffff;

/* Bordas e campos */
--cor-borda-input: #e5e7eb;

--fonte-base: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- 2. RESET BÁSICO ---------- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

body {
height: 100dvh;
overflow: hidden;
font-family: var(--fonte-base);
background: #fff;
}

/* Contêiner principal: ocupa a tela toda, como um app de chat */
#chat-wrapper {
display: flex;
flex-direction: column;
height: 100%;
height: 100dvh;
width: 100%;
max-width: 600px; /* em telas grandes o chat fica centralizado, como um celular */
margin: 0 auto;
background: #fff;
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

/* ---------- 3. CABEÇALHO ---------- */
.chat-header {
background: var(--cor-primaria-gradiente);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}

.chat-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}

.chat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}

.chat-agent-info {
flex: 1;
min-width: 0;
}

.chat-agent-nome {
color: #fff;
font-weight: 700;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.chat-agent-status {
color: rgba(255, 255, 255, 0.85);
font-size: 0.78rem;
display: flex;
align-items: center;
gap: 5px;
margin-top: 1px;
}

.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #4ade80;
display: inline-block;
box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
}

/* ---------- 4. ÁREA DE MENSAGENS ---------- */
#chat-mensagens {
flex: 1;
overflow-y: auto;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
scroll-behavior: smooth;
background-color: var(--cor-fundo-chat);
/* Padrão de bolinhas sutil, igual ao fundo de apps de chat */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='1.5' fill='%23d4cebb' opacity='0.6'/%3E%3C/svg%3E");
}

.msg-linha {
display: flex;
width: 100%;
}

.msg-linha.bot { justify-content: flex-start; }
.msg-linha.usuario { justify-content: flex-end; }

.balao {
max-width: 78%;
padding: 10px 14px;
font-size: 0.92rem;
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
}

.balao.bot {
background: var(--cor-balao-bot-bg);
color: var(--cor-balao-bot-texto);
border-radius: 14px 14px 14px 4px;
}

.balao.usuario {
background: var(--cor-primaria-gradiente);
color: var(--cor-balao-usuario-texto);
border-radius: 14px 14px 4px 14px;
}

/* ---------- 5. BOTÕES DE OPÇÃO (respostas rápidas) ---------- */
.grupo-opcoes {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
margin-top: 2px;
}

.btn-opcao {
background: #fff;
color: var(--cor-primaria-1);
border: 1px solid var(--cor-primaria-1);
border-radius: 10px;
padding: 9px 16px;
font-size: 0.88rem;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
max-width: 78%;
text-align: right;
}

.btn-opcao:hover {
background: var(--cor-primaria-1);
color: #fff;
}

.btn-opcao:disabled {
opacity: 0.5;
cursor: default;
}

/* ---------- 6. BARRA DE DIGITAÇÃO ---------- */
#chat-input-barra {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
background: #fff;
border-top: 1px solid var(--cor-borda-input);
flex-shrink: 0;
}

#chat-input {
flex: 1;
border: 1px solid var(--cor-borda-input);
border-radius: 24px;
padding: 11px 16px;
font-size: 0.92rem;
font-family: inherit;
outline: none;
}

#chat-input:focus {
border-color: var(--cor-primaria-2);
}

#chat-enviar {
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: var(--cor-primaria-gradiente);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}

#chat-enviar:disabled {
opacity: 0.5;
cursor: default;
}

#chat-enviar svg {
width: 18px;
height: 18px;
}

/* Some/mostra a barra de digitação dependendo da etapa (texto livre x múltipla escolha) */
#chat-input-barra.escondido {
display: none;
}

/* ---------- 7. BOTÃO FINAL (CTA WhatsApp) ---------- */
.btn-cta-whatsapp {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--cor-whatsapp);
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 0.92rem;
padding: 11px 18px;
border-radius: 10px;
margin-top: 2px;
transition: background 0.15s ease;
}

.btn-cta-whatsapp:hover {
background: var(--cor-whatsapp-escuro);
}

/* ---------- 8. INDICADOR "digitando..." ---------- */
.digitando {
display: flex;
gap: 4px;
padding: 12px 16px;
background: var(--cor-balao-bot-bg);
border-radius: 14px 14px 14px 4px;
width: fit-content;
}

.digitando span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #9ca3af;
animation: piscar 1.2s infinite ease-in-out;
}

.digitando span:nth-child(2) { animation-delay: 0.2s; }
.digitando span:nth-child(3) { animation-delay: 0.4s; }

@keyframes piscar {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- 9. RESPONSIVIDADE ---------- */
@media (min-width: 601px) {
body {
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
}
#chat-wrapper {
height: 92vh;
border-radius: 16px;
overflow: hidden;
}
}