/* Chat estilo WhatsApp (mesma estrutura do chat de referência), nas cores e fontes do Ponte las Pilates. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fundo: #FFF7F9;
  --fundo-fora: #F3E6EB;
  --texto: #3B1F2B;
  --texto-suave: #7A6570;
  --bolha-bot: #FFFFFF;
  --borda: rgba(59, 31, 43, 0.08);
  --marca: #A8174F;
  --marca-escura: #8A1141;
  --verde: #2FB36D;
  --verde-escuro: #25965A;
  --online: #25D366;
  --raio: 18px;
  --raio-p: 6px;
  --sombra: 0 2px 8px rgba(59, 31, 43, 0.05);
  --sombra-btn: 0 4px 12px rgba(168, 23, 79, 0.18);
}

html, body {
  width: 100%; height: 100%; height: 100dvh;
  font-family: 'Lexend', system-ui, sans-serif;
  background: var(--fundo-fora); color: var(--texto);
  overflow: hidden; display: flex; justify-content: center; align-items: center;
}

#chat-container {
  width: 100%; height: 100%; max-width: 640px;
  background: var(--fundo); display: flex; flex-direction: column; position: relative;
}
@media (min-width: 641px) {
  #chat-container { height: 92vh; border-radius: 20px; overflow: hidden; border: 1px solid var(--borda); box-shadow: 0 8px 30px rgba(59, 31, 43, 0.08); }
}

/* cabeçalho */
#chat-header {
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--borda); z-index: 10; display: flex; align-items: center;
}
.header-profile { display: flex; align-items: center; gap: 12px; }
.avatar-container { position: relative; width: 44px; height: 44px; }
#header-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.status-dot { position: absolute; bottom: 1px; right: 1px; width: 11px; height: 11px; background: var(--online); border-radius: 50%; border: 2px solid #fff; animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.profile-info { display: flex; flex-direction: column; }
#header-title { font-size: 1.02rem; font-weight: 700; color: var(--texto); }
#header-status { font-size: .75rem; font-weight: 500; color: var(--online); }

/* corpo */
#chat-body { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; scroll-behavior: smooth; scrollbar-width: none; }
#chat-body::-webkit-scrollbar { display: none; }
#messages-container { display: flex; flex-direction: column; gap: 12px; }

.chat-bubble-container { display: flex; width: 100%; opacity: 0; transform: translateY(12px); animation: aparece .3s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes aparece { to { opacity: 1; transform: translateY(0); } }
.bot-message-container { justify-content: flex-start; align-items: flex-end; gap: 8px; }
.user-message-container { justify-content: flex-end; }
.avatar-wrapper { width: 32px; height: 32px; flex-shrink: 0; margin-bottom: 2px; }
.chat-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.chat-bubble { padding: 11px 15px; font-size: .95rem; line-height: 1.45; max-width: 82%; word-break: break-word; }
.bot-bubble { background: var(--bolha-bot); border: 1px solid var(--borda); border-radius: var(--raio) var(--raio) var(--raio) var(--raio-p); box-shadow: var(--sombra); }
.user-bubble { background: var(--marca); color: #fff; border-radius: var(--raio) var(--raio) var(--raio-p) var(--raio); box-shadow: var(--sombra); }
.chat-bubble strong { font-weight: 700; }

/* gráfico de previsão */
.chat-grafico { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 10px 8px 4px; width: min(82%, 340px); box-shadow: var(--sombra); }
.chat-grafico svg { display: block; width: 100%; height: auto; font-family: 'Lexend', system-ui, sans-serif; }
.g-linha { stroke-dasharray: 400; stroke-dashoffset: 400; animation: desenha 1.4s ease-out .2s forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }

/* digitando */
.hidden { display: none !important; }
#typing-indicator { margin-top: 12px; }
.typing-bubble { background: var(--bolha-bot); border: 1px solid var(--borda); border-radius: var(--raio) var(--raio) var(--raio) var(--raio-p); padding: 14px 18px; display: flex; gap: 5px; box-shadow: var(--sombra); }
.typing-bubble .dot { width: 7px; height: 7px; background: #B9A3AD; border-radius: 50%; animation: pula 1.4s infinite ease-in-out both; }
.typing-bubble .dot:nth-child(1) { animation-delay: -.32s; }
.typing-bubble .dot:nth-child(2) { animation-delay: -.16s; }
@keyframes pula { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* rodapé: botões de escolha e campo de número */
#chat-footer { padding: 14px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--borda); z-index: 10; }
#input-container { width: 100%; display: flex; flex-direction: column; gap: 8px; animation: sobe .25s ease-out; }
#input-container:empty { display: none; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.choice-button {
  font: 600 .95rem 'Lexend', system-ui, sans-serif; background: var(--marca); color: #fff;
  border: none; border-radius: 12px; padding: 14px 18px; cursor: pointer; width: 100%; text-align: center;
  box-shadow: var(--sombra-btn); transition: background-color .15s, transform .1s;
}
.choice-button:hover { background: var(--marca-escura); }
.choice-button:active { transform: scale(.985); }
.choice-button.unico { background: var(--verde); box-shadow: 0 4px 14px rgba(47, 179, 109, .3); font-weight: 700; padding: 16px 18px; }
.choice-button.unico:hover { background: var(--verde-escuro); }
.choice-button:focus-visible, .form-submit-btn:focus-visible { outline: 3px solid #F5B8CF; outline-offset: 2px; }

.input-form { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
.form-input { flex: 1; min-width: 0; font: 16px 'Lexend', system-ui, sans-serif; padding: 14px 16px; border: 2px solid #EAD7DF; border-radius: 12px; background: #fff; color: var(--texto); outline: none; }
.form-input:focus { border-color: var(--marca); }
.form-submit-btn { font: 600 16px 'Lexend', system-ui, sans-serif; background: var(--marca); color: #fff; border: none; border-radius: 12px; padding: 14px 22px; cursor: pointer; box-shadow: var(--sombra-btn); }
.form-submit-btn:hover { background: var(--marca-escura); }
.form-dica { flex-basis: 100%; font-size: .82rem; color: var(--marca); }

@media (prefers-reduced-motion: reduce) {
  .chat-bubble-container, #input-container, .g-linha, .status-dot { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}