﻿/* BALAO CHAT */

.balao-de-chat {
    /* --- Cores --- */
    background-color: #D5E3E7; /* Tom de azul-acinzentado claro da sua imagem */
    color: #333; /* Cor do texto (preto suave) para bom contraste */

    /* --- Formato e Espaçamento --- */
    padding: 12px 18px; /* Espaçamento interno para o texto "respirar" */
    border-radius: 20px; /* Bordas bem arredondadas para criar o formato de balão */
    
    /* --- Tamanho e Alinhamento --- */
    max-width: 75%; /* O balão ocupa no máximo 75% da largura do container pai */
    display: inline-block; /* Faz com que o balão se ajuste ao tamanho do texto */
    text-align: left; /* Alinha o texto dentro do balão à esquerda */
    margin-bottom: 10px; /* Adiciona um espaço abaixo de cada balão */
}


/* =========================
   FORM CONTAINER
   ========================= */
.FormContainer {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 380px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  font-family: "Open Sans", sans-serif;
  background-color: #fff;
  overflow: hidden;
}

/* =========================
   CADA CAMPO (ContainerName, ContainerEmail...)
   ========================= */
.FormContainer > div {
  padding: 10px 16px;
  border-bottom: 1px solid #e3e3e3;
}

.FormContainer > div:last-child {
  border-bottom: none;
}

/* =========================
   LABEL (Nome, Email, CNPJ...)
   ========================= */
.FormContainer label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  margin-bottom: 4px;
  font-family: "Open Sans", sans-serif;
}

/* =========================
   INPUT
   ========================= */
.FormContainer input.input {
  width: 100%;
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  font-size: 14px;
  color: #333;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  font-family: "Open Sans", sans-serif;
  transition: border-color 0.2s ease;
}

.FormContainer input.input:focus {
  border-bottom-color: #006782;
}

/* =========================
   BOTÃO ENVIAR
   ========================= */
.FormContainer input.Button.Is_Default {
  background-color: #006782 !important;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  margin: 16px 0 0 0;
  font-family: "Open Sans", sans-serif;
  transition: background-color 0.2s ease;
}

.FormContainer input.Button.Is_Default:hover {
  background-color: #005468 !important;
}