/* ============================================================
   André Vinhosa – Assistente IA | Oli
   andrevinhosa.com.br | Preto + Dourado
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');

/* ════════════════════════════════════════════════
   VARIÁVEIS
════════════════════════════════════════════════ */
#avai-root {
  --av-black   : #0A0A0A;
  --av-gold    : #C9A84C;
  --av-white   : #FFFFFF;
  --av-light   : #F5F5F5;
  --av-mid     : #F0F0F0;
  --av-text    : #111111;
  --av-muted   : #888888;
  --av-green   : #25D366;
  --av-radius  : 18px;
  --av-shadow  : 0 8px 48px rgba(0,0,0,0.30);
}

/* ════════════════════════════════════════════════
   RESET SELETIVO – só o necessário
════════════════════════════════════════════════ */
#avai-root,
#avai-root * {
  box-sizing: border-box !important;
}

#avai-root p,
#avai-root span,
#avai-root div,
#avai-root a,
#avai-root button,
#avai-root textarea {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  list-style: none !important;
  text-decoration: none !important;
  float: none !important;
  border: none !important;
  background: none !important;
  outline: none !important;
}

/* ════════════════════════════════════════════════
   ROOT
════════════════════════════════════════════════ */
#avai-root {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 2147483647 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

/* ════════════════════════════════════════════════
   TOGGLE BUTTON
════════════════════════════════════════════════ */
#avai-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  background: #0A0A0A !important;
  border: 2px solid rgba(201,168,76,0.35) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  animation: avp-pulse 3.5s infinite !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}
#avai-toggle:hover {
  transform: scale(1.08) !important;
  animation: none !important;
}
#avai-toggle svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #C9A84C !important;
  fill: none !important;
  display: block !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
@keyframes avp-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 0 rgba(201,168,76,0.5); }
  55%      { box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 10px rgba(201,168,76,0); }
}

/* ════════════════════════════════════════════════
   CHAT WINDOW
════════════════════════════════════════════════ */
#avai-window {
  position: absolute !important;
  bottom: 72px !important;
  right: 0 !important;
  width: 360px !important;
  max-height: 560px !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.30) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(14px) scale(0.97) !important;
  pointer-events: none !important;
  transition: opacity 0.28s ease, transform 0.28s ease !important;
  border: 1px solid rgba(201,168,76,0.22) !important;
  padding: 0 !important;
  margin: 0 !important;
}
#avai-window.avai-open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: all !important;
}

/* ════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════ */
#avai-header {
  /* layout */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 9px !important;
  /* visual */
  background: #0A0A0A !important;
  border-bottom: 1.5px solid #C9A84C !important;
  /* sizing */
  width: 100% !important;
  padding: 11px 13px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* textura sutil */
#avai-header::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 8px,
    rgba(201,168,76,0.04) 8px, rgba(201,168,76,0.04) 9px
  ) !important;
  z-index: 0 !important;
}

/* avatar */
#avai-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex-shrink: 0 !important;
  background: rgba(201,168,76,0.12) !important;
  border: 1.5px solid rgba(201,168,76,0.4) !important;
  border-radius: 9px !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#avai-avatar svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #C9A84C !important;
  fill: none !important;
  display: block !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* info block – NOME + SUBTÍTULO */
#avai-header-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  gap: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  overflow: hidden !important;
}

#avai-header-name {
  display: block !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #C9A84C !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  letter-spacing: 0.02em !important;
}

#avai-header-subtitle {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,0.42) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* botão WhatsApp */
#avai-whatsapp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex-shrink: 0 !important;
  background: rgba(37,211,102,0.14) !important;
  border: 1px solid rgba(37,211,102,0.35) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.2s !important;
}
#avai-whatsapp-btn:hover {
  background: rgba(37,211,102,0.28) !important;
}
#avai-whatsapp-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: #25D366 !important;
  display: block !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* botão fechar */
#avai-close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.4) !important;
  transition: color 0.2s, background 0.2s !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
#avai-close-btn:hover {
  color: #C9A84C !important;
  background: rgba(201,168,76,0.1) !important;
}

/* ════════════════════════════════════════════════
   MESSAGES
════════════════════════════════════════════════ */
#avai-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 16px 13px !important;
  margin: 0 !important;
  background: #F5F5F5 !important;
  min-height: 0 !important;
  border: none !important;
}
#avai-messages::-webkit-scrollbar { width: 4px; }
#avai-messages::-webkit-scrollbar-track { background: transparent; }
#avai-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* bolhas */
.avai-msg {
  display: block !important;
  max-width: 82% !important;
  padding: 9px 13px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  animation: avp-fadein 0.22s ease !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}
@keyframes avp-fadein {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:translateY(0); }
}
.avai-msg-bot {
  align-self: flex-start !important;
  background: #EBEBEB !important;
  color: #111111 !important;
  border-radius: 13px 13px 13px 3px !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
}
.avai-msg-user {
  align-self: flex-end !important;
  background: #111111 !important;
  color: #F8F8F8 !important;
  border-radius: 13px 13px 3px 13px !important;
}

/* digitando */
.avai-typing {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  align-self: flex-start !important;
  background: #EBEBEB !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  padding: 10px 14px !important;
  border-radius: 13px 13px 13px 3px !important;
  margin: 0 !important;
}
.avai-typing span {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #C9A84C !important;
  animation: avp-bounce 1.2s infinite !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.avai-typing span:nth-child(2) { animation-delay: 0.2s !important; }
.avai-typing span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes avp-bounce {
  0%,60%,100% { transform:translateY(0); opacity:0.45; }
  30%          { transform:translateY(-5px); opacity:1; }
}

/* ════════════════════════════════════════════════
   INPUT AREA
════════════════════════════════════════════════ */
#avai-input-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
}

#avai-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 1.5px solid rgba(0,0,0,0.15) !important;
  border-radius: 10px !important;
  padding: 8px 11px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: #111111 !important;
  background: #F5F5F5 !important;
  resize: none !important;
  line-height: 1.5 !important;
  max-height: 100px !important;
  overflow-y: auto !important;
  display: block !important;
  margin: 0 !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
#avai-input:focus { border-color: #C9A84C !important; }
#avai-input::placeholder { color: #AAAAAA !important; }

#avai-send {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex-shrink: 0 !important;
  background: #0A0A0A !important;
  border: none !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.2s, opacity 0.2s !important;
}
#avai-send:hover { transform: scale(1.07) !important; }
#avai-send:disabled { opacity: 0.35 !important; cursor: not-allowed !important; transform: none !important; }
#avai-send svg {
  width: 16px !important;
  height: 16px !important;
  fill: #C9A84C !important;
  display: block !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ════════════════════════════════════════════════
   FOOTER NOTE
════════════════════════════════════════════════ */
#avai-footer-note {
  display: block !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  color: #AAAAAA !important;
  padding: 5px 0 7px !important;
  margin: 0 !important;
  letter-spacing: 0.06em !important;
  background: #FFFFFF !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  border: none !important;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 420px) {
  #avai-root   { bottom: 16px !important; right: 16px !important; }
  #avai-window { width: calc(100vw - 32px) !important; right: 0 !important; }
}