/* =================================================================
   chat.css — Estilos unificados do Kiwui
   Inclui: layout geral (index.html) + modal e campo de chat (chat.js)
   ================================================================= */

/* — Reset e base —————————————————————————————————————————————— */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(145deg, #EDF9EB 0%, #F2FBEE 45%, #FAFCE8 100%);
}

/* — Blobs decorativos (fundo) ————————————————————————————————— */
.blob {
  position: fixed; border-radius: 50%;
  filter: blur(95px); opacity: 0.26;
  animation: flotar 12s ease-in-out infinite;
  z-index: 0; pointer-events: none;
}
.blob-1 { width:580px; height:580px; background:#5A8A3C; top:-190px;  left:-140px; animation-delay:0s;  }
.blob-2 { width:460px; height:460px; background:#8BC34A; bottom:-140px; right:-120px; animation-delay:-5s; }
.blob-3 { width:320px; height:320px; background:#7B5E3A; top:38%;   left:52%; animation-delay:-8s; }
.blob-4 { width:220px; height:220px; background:#F9C74F; top:12%;   right:10%; animation-delay:-3s; }
.blob-5 { width:180px; height:180px; background:#2E5C1E; bottom:20%; left:8%;  animation-delay:-6s; }

@keyframes flotar {
  0%,100% { transform: translate(0,0)   scale(1);    }
  33%     { transform: translate(26px,-26px) scale(1.06); }
  66%     { transform: translate(-18px,18px) scale(0.94); }
}

/* — Header ————————————————————————————————————————————————————— */
header {
  position: relative; z-index: 10;
  width: 100%; padding: 22px 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo-header { font-size:19px; font-weight:900; letter-spacing:-0.4px; color:#2E5C1E; }
.w-soft      { color:#7B5E3A; font-weight:900; }

.btn-login {
  text-decoration:none; color:#2E5C1E; font-size:13px;
  font-weight:600; border:1.5px solid #2E5C1E; padding:9px 26px;
  border-radius:9px; background:rgba(237,249,235,0.74);
  backdrop-filter:blur(14px); transition:all 0.22s ease;
  box-shadow:0 2px 8px rgba(46,92,30,0.10);
}
.btn-login:hover { background:#2E5C1E; color:#EDF9EB; transform:translateY(-2px); }

/* — Main ——————————————————————————————————————————————————————— */
main {
  position:relative; z-index:10;
  display:flex; flex-direction:column;
  align-items:center; padding:0 20px 60px; gap:20px;
}

/* — Hero (logo + ícone SVG) ———————————————————————————————————— */
.hero { display:flex; flex-direction:column; align-items:center; gap:18px; }

/* Rotação contínua do ícone SVG */
.kiwi-wrap {
  display: block;
  animation: girar 18s linear infinite;
  transform-origin: center center;
}
@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.brand {
  font-size:110px; font-weight:900; letter-spacing:-1.5px; color:#2E5C1E;
  margin-top:-6px; cursor:default; user-select:none;
}

/* — Gatilho (brand-sub) ———————————————————————————————————————— */
/* Elemento clicável que revela o campo de input ao ser pressionado */
.brand-sub {
  font-size:11px; font-weight:500; color:rgba(46,92,30,0.38);
  letter-spacing:2px; text-transform:uppercase; cursor:pointer;
  transition:color 0.2s;
}
.brand-sub:hover { color:rgba(46,92,30,0.65); }

/* — Campo de input (estado inicial: oculto, revelado via JS) —— */
.kw-field-wrap {
  display:none; flex-direction:column; align-items:center;
  gap:14px; animation:kw-fade 0.3s ease; width:100%; max-width:400px;
}
.kw-field-wrap.ativo { display:flex; }

@keyframes kw-fade {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}
@keyframes kw-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}

.kw-field {
  background:rgba(237,249,235,0.80); backdrop-filter:blur(16px);
  border:1.5px solid rgba(46,92,30,0.25); border-radius:10px;
  padding:12px 20px; font-size:14px; font-family:'Inter',sans-serif;
  font-weight:500; color:#2E5C1E; width:100%; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s; text-align:center;
}
.kw-field::placeholder { color:rgba(46,92,30,0.35); }
.kw-field:focus {
  border-color:rgba(46,92,30,0.50);
  box-shadow:0 4px 16px rgba(46,92,30,0.12);
}

/* — Loader (spinner) —————————————————————————————————————————— */
.kw-loader {
  display: none;
  width: 22px; height: 22px;
  border: 2.5px solid rgba(46,92,30,0.15);
  border-top-color: #2E5C1E;
  border-radius: 50%;
  animation: kw-spin 0.75s linear infinite;
  margin: 12px auto 0;
}
.kw-loader.ativo { display: block; }

@keyframes kw-spin { to { transform: rotate(360deg); } }

/* — Dots (indicador animado) ————————————————————————————————— */
.dots { display:flex; gap:10px; margin-top:4px; }
.dot  { width:7px; height:7px; border-radius:50%; animation:pulsar 2.1s ease-in-out infinite; }
.dot:nth-child(1) { background:#2E5C1E; animation-delay:0s;    }
.dot:nth-child(2) { background:#7B5E3A; animation-delay:0.38s; }
.dot:nth-child(3) { background:#F9C74F; animation-delay:0.76s; }

@keyframes pulsar {
  0%,100% { transform:scale(1);   opacity:0.40; }
  50%     { transform:scale(1.6); opacity:1;    }
}

/* — Overlay do modal ————————————————————————————————————————— */
.kw-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(46,92,30,0.18);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 20px;
  animation: kw-fade 0.2s ease;
}
.kw-overlay.ativo { display: flex; }

/* — Modal ———————————————————————————————————————————————————— */
.kw-modal {
  background: rgba(242,251,238,0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(46,92,30,0.15);
  border-radius: 16px;
  padding: 28px 28px 22px;
  width: 100%; max-width: 480px;
  max-height: 80vh; overflow-y: auto;
}

/* — Pergunta no modal ———————————————————————————————————————— */
.kw-modal-pergunta {
  font-size: 12px;
  font-weight: 600;
  color: rgba(46,92,30,0.50);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* — Resposta no modal ———————————————————————————————————————— */
.kw-modal-resposta {
  font-size: 15px;
  line-height: 1.65;
  color: #1a3310;
  white-space: pre-wrap;
  word-break: break-word;
}
.kw-modal-resposta.erro { color: #c0392b; font-size: 13px; }

/* — Rodapé do modal ————————————————————————————————————————— */
.kw-modal-footer {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(46,92,30,0.08);
  display: flex; justify-content: space-between; align-items: center;
}
.kw-modal-tempo {
  font-size: 10px;
  color: rgba(46,92,30,0.28);
  letter-spacing: 1px;
}

/* — Botão Fechar ————————————————————————————————————————————— */
.kw-fechar {
  background: #2E5C1E; color: #EDF9EB;
  border: none; border-radius: 8px;
  padding: 8px 20px; font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer; letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s;
}
.kw-fechar:hover  { background: #3d7a28; transform: translateY(-1px); }
.kw-fechar:active { transform: translateY(0); }