/* =========================
   CONTAINER PRINCIPAL
   ========================= */
#floating-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* Sempre acima do conteúdo da página */
}

/* =========================
   BOTÃO PRINCIPAL DO CHAT
   ========================= */
#chatbot-icon {
  position: fixed;
  bottom: 15px;
  right: 100px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

#chatbot-icon:hover {
  transform: scale(1.1);
}

/* chatbot-icon svg {
  width: 32px;
  height: 32px;
} */

/* =========================
   CONTEÚDO DO CHATBOT
   ========================= */
.chatbot-content {
  position: absolute; /* garante sobreposição */
  bottom: 100px;
  right: 100px;
  width: 420px;
  height: 610px;
  border-radius: 8px;
  overflow: visible; /* garante que botões fiquem visíveis */
  z-index: ; /* acima de tudo */
  display: none; /* inicialmente oculto */
  animation: fadeIn 0.4s ease-in-out;
}

.chatbot-content.visible {
  display: block;
}

/* Animação de fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   FORMULÁRIO DO CHATBOT
   ========================= */
.TextForm {
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.FormContainer {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 380px;
}

.FormContainer label {
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
  display: block;
}

.FormContainer input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  box-sizing: border-box;
}

/* =========================
   SUBMENU ACESSO NIMBI
   ========================= */
#acesso-nimbi-container {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
  margin-top: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#acesso-nimbi-container .tutorial-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.5;
}

#acesso-nimbi-container .buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#acesso-nimbi-container .buttons-container button {
  background-color: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: background-color 0.2s ease;
}

#acesso-nimbi-container .buttons-container button:hover {
  background-color: #d4d4d4;
}

/* =========================
   TUTORIAIS
   ========================= */
.AlterarAdmTutorial,
.RedefinirSenhaTutorial {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #f9f9f9;
  border-radius: 6px;
  padding: 12px;
}

.AlterarAdmTutorial label,
.RedefinirSenhaTutorial label {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

/* =========================
   MENU PRINCIPAL REFORMULADO
   ========================= */

.MenuContainer {
  position: relative;
  display: flex;
  flex-direction: column;  /* Lista vertical */
  width: 100%;
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden; /* remove o scroll */
}

/* Botões do menu */
.MenuContainer button {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background-color: #ffffff;  /* cor base */
  color: #333;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.25s ease, transform 0.15s ease;
  margin-bottom: 10px; /* espaçamento entre botões */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Cor diferente para destacar */
.MenuContainer button:nth-child(odd) {
  background-color: #eef3ff; /* azul bem claro */
}

/* Efeito hover */
.MenuContainer button:hover {
  background-color: #dbe7ff;
  transform: scale(1.02);
}

/* Remove a margem do último botão */
.MenuContainer button:last-child {
  margin-bottom: 0;
}


/* =========================
   MINI MENU FLUTUANTE
   ========================= */
.MenuContainer2 {
  position: absolute;      /* flutua dentro do chatbot */
  background-color: #ccc;
  top: -400px;               /* distancia do topo do chat (abaixo do header) */
  left: 10px;              /* margem interna */
  right: 10px;             /* margem interna */
  width: auto;             /* ajusta automaticamente */
  max-height: 300px;
  overflow-y: auto;
  z-index: 10;
}

.MenuContainer2 label {
 font-size: 12px;
  color: #333;
  line-height: 1.3;
  margin: 0;
}

.MenuContainer2 button {
  background-color: #e5e5e5;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.MenuContainer2 button:hover {
  background-color: #d8d8d8;
}



/* --- ESTILO PARA O BOTÃO DE AÇÃO PRINCIPAL --- */
/* Aplique esta classe a um Container para transformá-lo em um botão */
.botao-acao-principal {
    /* --- Cores --- */
    background-color: #008489 !important; /* Tom de azul/verde escuro da sua imagem */
    color: white !important; /* Cor do texto e do ícone */
    border: none !important;

    /* --- Formato e Espaçamento --- */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 25px; /* Bordas bem arredondadas para formar a pílula */
    font-size: 16px;
    font-weight: 600; /* Texto semi-negrito */
    
    /* --- Alinhamento do Ícone e Texto --- */
    display: inline-flex; /* Coloca os itens lado a lado */
    align-items: center; /* Alinha verticalmente no centro */
    justify-content: center; /* Alinha horizontalmente no centro */
    gap: 8px; /* Cria um espaço entre o ícone e o texto */

    /* --- Efeitos --- */
    cursor: pointer; /* Mostra a "mãozinha" ao passar o mouse */
    transition: background-color 0.2s ease; /* Transição suave de cor */
}

/* Efeito ao passar o mouse por cima */
.botao-acao-principal:hover {
    background-color: #006A6E !important; /* Um tom um pouco mais escuro para o feedback */
}

/* Estilo para o ícone DENTRO do botão */
/* O OutSystems geralmente coloca os ícones dentro de uma tag <span> ou <i> */
.botao-acao-principal .icon {
    font-size: 18px; /* Ajusta o tamanho do ícone se necessário */
}



/* --- ESTILO PARA O BALÃO DE MENSAGEM DO CHAT --- */
/* Aplique esta classe a um Container que envolve o seu texto */
.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 */
}



/* ======================================================
   ESTILO PARA O FORMULÁRIO DE ABRIR CHAMADO
   ====================================================== */

/* Aplique esta classe ao Container principal do seu formulário */
.abrirchamado {
    background-color: white;
    border: 1px solid #ccc; /* Borda cinza em volta de todo o card */
    border-radius: 8px; /* Bordas levemente arredondadas */
    padding: 24px; /* Espaçamento interno generoso */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Sombra muito sutil */
    margin: 20px 0; /* Adiciona um espaço acima e abaixo do formulário */
}

/* Estilo para cada "linha" do formulário (um container para Label + Input) */
.abrirchamado .form-group {
    margin-bottom: 15px; /* Espaço entre cada campo */
}

/* Estilo para as Labels (Nome, E-mail, etc.) */
.abrirchamado .form-group label {
    display: block;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
}

/* Estilo para os Inputs (caixas de texto), deixando-os mais escuros */
.abrirchamado .form-group input,
.abrirchamado .form-group textarea,
.abrirchamado .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f0f0f0; /* Fundo cinza claro para os inputs */
    color: #333;
}