/*==============================================================================
  1) Variáveis de identidade
==============================================================================*/
:root {
  --primary-color:    #2AC8D3;
  --secondary-color:  #8882EE;
  --accent-color:     #8B5BFA;
  --text-color:       #000000;
  --white:            #FFFFFF;
  --chat-bg:          url('https://digitalyze.com.br/wp-content/uploads/2025/01/about-bg.webp');
  --input-bg:         rgba(255, 255, 255, 0.15);
  --button-bg:        var(--primary-color);
  --button-hover-bg:  var(--accent-color);
  --dz-border-color:     #2AC8D3;
  --dz-border-radius:    16px;
  --shadow-effect:    0px 10px 30px rgba(42, 200, 211, 0.5),
                      0px 0px 15px rgba(136, 130, 238, 0.4);
}

/*==============================================================================
  2) Seção e header (título, subtítulo e utilitários)
==============================================================================*/
.section-form-chat {
  padding: 100px 0;
  background: transparent;
}

.pt-100 { padding-top: 100px !important; }
.pb-100 { padding-bottom: 100px !important; }
.mb-40  { margin-bottom: 40px !important; }
.mt-24  { margin-top: 24px !important; }

.chat-header.mb-40 {
  margin-bottom: 40px;
}

.heading2 {
  font-size: 64px;
  font-weight: 600;
  line-height: 72px;
  text-transform: capitalize;
  text-align: center;
  color: var(--text-color);
}

.mt_gradient {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.body2 {
  font-size: 20px;
  line-height: 30px;
  color: var(--text-color);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.body2.mt-24 {
  margin-top: 24px;
}

/*==============================================================================
  3) Container principal do chat
==============================================================================*/
#lead-chatbox {
  width:         100%;
  max-width:     900px;
  max-height:    80vh;
  margin:        0 auto;
  display:       flex;
  flex-direction: column;
  border:        3px solid var(--dz-border-color);
  border-radius: var(--dz-border-radius) !important;
  box-shadow:    var(--shadow-effect);
  background:    var(--white);
  overflow:      hidden;
  font-family:   inherit;
}

/*==============================================================================
  4) Área de mensagens (histórico)
==============================================================================*/
.chat-messages {
  flex:             1;
  padding:          30px;
  overflow-y:       auto;
  background-image: var(--chat-bg);
  background-size:  cover;
  background-position: center;
}

.typing {
  font-style: italic;
  color:      #999;
  margin-bottom: 20px;
}

/*==============================================================================
  5) Balões de mensagem
==============================================================================*/
.message {
  margin-bottom: 20px;
  line-height:   1.5;
}

.message.bot .bubble {
  display:       inline-block;
  background:    rgba(255, 255, 255, 0.8);
  color:         var(--text-color);
  padding:       20px;
  border-radius: var(--dz-border-radius) !important;
  max-width:     80%;
}

.message.user .bubble {
  display:       inline-block;
  background:    var(--primary-color);
  color:         var(--white);
  padding:       12px 20px;
  border-radius: var(--dz-border-radius) !important;
  max-width:     80%;
  text-align:    right;
}

.message.user {
  text-align:    right;
}

.message.bot {
  text-align: left  !important;
}

/*==============================================================================
  6) Área de interação (input, textarea, botões)
==============================================================================*/
.chat-input {
  border-top:    1px solid var(--dz-border-color);
  background:    var(--white);
  padding:       20px;
}

.chat-input input[type="text"],
.chat-input input[type="tel"],
.chat-input input[type="email"],
.chat-input button {
  width:         100%;
  padding:       12px;
  margin-bottom: 12px;
  font-size:     14px;
  border-radius: 8px;
  border:        1px solid var(--dz-border-color);
  outline:       none;
  background:    #fff;
}

.chat-input button {
  background:    var(--button-bg);
  color:         var(--white);
  cursor:        pointer;
  transition:    background 0.3s ease;
}

.chat-input button:hover {
  background: var(--button-hover-bg);
}

/* Override para escolha múltipla */
.chat-input .choice-buttons {
  display:        flex;
  justify-content: center;
  gap:            12px;
  flex-wrap:      nowrap;
  margin-top:     16px;
}

.chat-input .choice-buttons button {
  width:         auto;
  flex:          none;
  padding:       12px 20px;
  background:    var(--primary-color);
  color:         var(--white);
  border:        1px solid var(--dz-border-color);
  border-radius: 8px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background 0.3s;
}

.chat-input .choice-buttons button:hover {
  background: var(--button-hover-bg);
}

/*==============================================================================
  7) Scrollbar customizada
==============================================================================*/
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb {
  background:    var(--primary-color);
  border-radius: 3px;
}

/*==============================================================================
  8) Responsividade
==============================================================================*/
@media (max-width: 768px) {
  #lead-chatbox {
    max-height: 90vh;
  }
  .message.bot .bubble,
  .message.user .bubble {
    max-width: 100%;
  }
  .choice-buttons button {
    flex:       1 1 100%;
    font-size:  12px;
    padding:    10px;
  }
  .chat-input {
    padding:    16px;
  }
}

/*==============================================================================
  9) Formulários lado a lado (inputs + botão centralizado)
==============================================================================*/
/* Dois inputs por linha */
.chat-input > input[type="text"],
.chat-input > input[type="tel"],
.chat-input > input[type="email"] {
  width:         calc(50% - 8px);
  display:       inline-block;
  vertical-align: top;
  margin-bottom: 16px;
}

.chat-input > input[type="text"] {
  margin-right: 16px;
}

.chat-input > button {
  display:       block;
  width:         auto;
  min-width:     200px;
  margin:        0 auto;
  padding:       12px 24px;
  max-width:     none;
}

/* Input inválido */
.chat-input input.invalid {
  border-color: #e74c3c !important;
}

/* Textarea full-width */
.chat-input textarea {
  width:         100% !important;
  min-height:    100px;
  padding:       12px;
  font-size:     14px;
  border:        1px solid var(--dz-border-color);
  border-radius: 8px;
  resize:        vertical;
  margin-bottom: 16px;
  box-sizing:    border-box;
}

.chat-input textarea + button {
  display: inline-block;
  width:   auto;
  margin:  0 auto;
}