/* --- [MODO ESCURO] --- */
/* Fundo e textos claros no modo dark */
body.dark-mode {
  background: #18191A !important;
  color: #eee !important;
}

/* Ajusta cores de fundo claro para escuro no dark mode */
body.dark-mode .bg-light,
body.dark-mode footer {
  background: #23272b !important;
  color: #eee !important;
}

/* Garante texto claro em vários elementos no dark */
body.dark-mode .bg-light,
body.dark-mode .bg-light h1, body.dark-mode .bg-light h2,
body.dark-mode .bg-light h3, body.dark-mode .bg-light h4,
body.dark-mode .bg-light h5, body.dark-mode .bg-light h6,
body.dark-mode .bg-light p,
body.dark-mode .bg-light .card-title,
body.dark-mode .bg-light .card-text {
  color: #eee !important;
}

/* Links em modo escuro */
body.dark-mode a {
  color: #89b4ff !important;
}

/* Força textos escuros a ficarem claros no dark */
body.dark-mode .text-dark,
body.dark-mode .titulo-preto {
  color: #eee !important;
}

/* Navbar em modo escuro */
body.dark-mode .navbar {
  background: #015ec8 !important;
  color: #eee !important;
}

/* Navbar com fundo azul: texto branco visível */
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .navbar-nav .nav-link {
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

/* Navbar ativo: reforça destaque */
.navbar.bg-primary .navbar-nav .nav-link.active,
.navbar.bg-primary .navbar-nav .nav-link:focus,
.navbar.bg-primary .navbar-nav .nav-link:hover {
  color: #ffe063 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.23);
}

/* Cartões em modo escuro */
body.dark-mode .card {
  background: #23272b;
  color: #eee;
  border-color: #444;
}

/* Botões primários em modo escuro */
body.dark-mode .btn-primary {
  background-color: #2d6cdf;
  border-color: #2d6cdf;
}

/* --- [BOTÃO WHATSAPP FLUTUANTE] --- */
#waWidget {
  position: fixed;               /* Fixa no canto da tela */
  bottom: 112px;                 /* Distância do rodapé (ajuste para chat acima/abaixo) */
  right: 32px;                   /* Distância da lateral direita */
  z-index: 1050;                 /* Acima dos outros elementos */
  display: flex;                 /* Ícone e texto lado a lado */
  align-items: center;           /* Centraliza verticalmente */
  background: #25d366;           /* Verde WhatsApp */
  color: #fff;                   /* Texto branco */
  font-weight: bold;
  font-size: 1.1rem;
  padding: 10px 18px 10px 10px;  /* Espaçamento interno */
  border-radius: 28px;           /* Bordas arredondadas estilo balão */
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  gap: 4px;                      /* Espaço entre ícone e texto */
}
#waWidget:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.04);
  background: #21c25d;
  color: #fff;
  text-decoration: none;
}
/* Ícone SVG do WhatsApp dentro do botão */
.wa-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
}
/* Texto ao lado do ícone */
.wa-text {
  color: #fff;
  font-size: 1.1rem;
}

/* --- [BOTÃO CHAT IA FLUTUANTE] --- */
#chatWidget {
  position: fixed;
  bottom: 32px;                  /* Chat fica abaixo do WhatsApp */
  right: 32px;
  z-index: 1050;
}
#chatWidget img {
  width: 50px;
  height: 50px;
  border-radius: 50%;           /* Se quiser um círculo perfeito */
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  background: #015ec8;          /* Fundo azul Greco */
  padding: 6px;                 /* Espaço interno para destaque */
  transition: box-shadow 0.2s, transform 0.2s;
}
#chatWidget img:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transform: scale(1.06);
}

/* --- [RESPONSIVO: tela pequena/celular] --- */
@media (max-width: 600px) {
  #chatWidget, #waWidget {
    bottom: 10px;
  }
  #chatWidget {
    right: 10px;
  }
  #waWidget {
    right: 80px; /* ou mais, depende do tamanho do botão */
  }
}

/* --- [DICA] ---
Se quiser inverter a ordem (WhatsApp embaixo, Chat IA em cima),
basta inverter os valores dos 'bottom' entre #waWidget e #chatWidget!
*/

/* === [Widget Flutuante do Chat IA - Área dos botões e texto de chamada] === */
#chatGPTWidget {
  position: fixed;                /* Fixa no canto da tela */
  bottom: 32px;                   /* Distância do rodapé no desktop */
  right: 32px;                    /* Distância da lateral direita */
  z-index: 1050;                  /* Sempre acima do conteúdo */
  display: flex;
  align-items: center;
  gap: 12px;
}

/* === [Botão de Chamada do Chat] === */
#chatGPTCall {
  background: rgba(1,94,200,0.92);  /* Azul Greco semi-transparente */
  color: #fff;
  padding: 8px 18px;
  border-radius: 22px;
  font-size: 1.1rem;
  box-shadow: 0 3px 18px #015ec830;
  max-width: 230px;
  white-space: nowrap;             /* Não quebra linha */
  font-weight: 500;
  transition: opacity .5s;
  cursor: pointer;                 /* Mãozinha no hover */
}

/* === [Caixa Principal do Chat] === */
#chatGPTBox {
  display: none;                     /* Oculto por padrão */
  position: fixed;                   /* Fixo na tela, não absoluto! */
  bottom: 90px;                      /* Distância do rodapé, ajustável */
  right: 16px;                       /* Alinha à direita */
  width: 380px;                      /* Largura padrão no desktop */
  height: 510px;                     /* Altura padrão */
  background: var(--bs-body-bg,#fff);
  border-radius: 1.3rem;
  box-shadow: 0 6px 36px #0003;
  border: 1px solid #e2e2e2;
  transition: box-shadow 0.2s;
  z-index: 1100;                     /* Acima do botão do chat */
  overflow: hidden;                  /* Impede vazamento do conteúdo */
  display: flex;
  flex-direction: column;
}

/* Header do chat */
#chatGPTHeader {
  background: #015ec8;
  color: #fff;
  border-radius: 1.3rem 1.3rem 0 0;
  padding: 10px 14px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
[data-bs-theme="dark"] #chatGPTHeader {background:#003263;}

/* Mensagens do assistente */
.msg-assistente {
  background: #f1f3f8;
  border-radius: 16px;
  padding: 10px 16px;
  margin-bottom: 10px;
  max-width: 93%;
}
/* Mensagens do usuário */
.msg-user {
  background: #d0e8ff;
  border-radius: 16px;
  padding: 10px 16px;
  margin-bottom: 10px;
  text-align: right;
  margin-left: auto;
  max-width: 93%;
}
/* Versão escura das mensagens */
[data-bs-theme="dark"] .msg-assistente { background: #232c3b;}
[data-bs-theme="dark"] .msg-user { background: #073061; }

/* Corpo do chat: rolagem das mensagens */
.chat-body {
  flex: 1 1 auto;
  height: 345px;
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
}
/* Rodapé do chat */
.chat-footer {
  padding: 10px;
  background: #f8f8f8;
  border-top: 1px solid #eee;
  display: flex;
}
.fadein { animation: fadein 0.5s;}
@keyframes fadein { from { opacity:0; transform: translateY(20px);} to{opacity:1;transform:translateY(0);} }

/* === [CAIXA DO CHAT FLUTUANTE - DESKTOP] === */
#chatGPTBox {
  position: fixed !important;         /* Fixa a caixa do chat SEMPRE na janela, mesmo rolando */
  right: 16px;                        /* Distância da borda direita da tela */
  bottom: 90px;                       /* Distância do rodapé (ajuste para não cobrir botões) */
  width: 380px;                       /* Largura padrão no desktop */
  height: 510px;                      /* Altura padrão */
  max-width: 95vw;                    /* Nunca passa de 95% da largura da tela */
  max-height: 90vh;                   /* Nunca passa de 90% da altura da tela */
  background: var(--bs-body-bg,#fff); /* Fundo branco ou herdado do tema */
  border-radius: 1.3rem;              /* Bordas arredondadas para visual moderno */
  box-shadow: 0 6px 36px #0003;       /* Sombra para dar destaque flutuante */
  border: 1px solid #e2e2e2;          /* Borda discreta */
  z-index: 1100;                      /* Fica acima do resto do conteúdo */
  display: flex;                      /* Flex para organizar header/body/footer em coluna */
  flex-direction: column;             /* Header em cima, mensagens no meio, input embaixo */
  overflow: hidden;                   /* Impede conteúdo de vazar da caixa */
}

/* === [RESPONSIVO: MOBILE ATÉ 600PX] === */
@media (max-width: 600px) {
  #chatGPTBox {
    width: 99vw !important;           /* Ocupa quase toda a largura do celular */
    height: 94vh !important;          /* Quase toda a altura da tela */
    right: 0 !important;              /* Encosta na borda direita */
    left: 0 !important;               /* Encosta na borda esquerda */
    bottom: 0 !important;             /* Encosta no rodapé da tela */
    top: auto !important;             /* Remove posição fixa no topo */
    margin: 0 !important;             /* Remove margens */
    border-radius: 0 !important;      /* Fica quadrado, como apps mobile */
    max-width: 100vw !important;      /* Garante 100% da largura máxima */
    max-height: 94vh !important;      /* Garante 94% da altura máxima */
  }
  .chat-body {
    height: 60vh !important;          /* Área de mensagens com altura limitada para caber bem */
    max-height: 60vh !important;
  }
  #chatGPTHeader { border-radius: 0 !important; } /* Header quadrado no mobile */
}

/* === [CORREÇÃO DO CHAT IA NO MODO ESCURO] === */

/* Fundo e texto da mensagem do assistente no dark */
body.dark-mode .msg-assistente {
  background: #232c3b !important;  /* Fundo escuro para a resposta da IA */
  color: #eee !important;          /* Texto claro para leitura */
}

/* Fundo e texto da mensagem do usuário no dark */
body.dark-mode .msg-user {
  background: #073061 !important;  /* Fundo azul escuro para mensagem do usuário */
  color: #fff !important;          /* Texto branco para melhor contraste */
}

/* Header do chat (barra azul escura no modo dark) */
body.dark-mode #chatGPTHeader {
  background: #003263 !important;  /* Azul ainda mais escuro */
  color: #fff !important;          /* Texto branco */
}

/* Rodapé da caixa do chat (onde está o input e botão) */
body.dark-mode .chat-footer {
  background: #1a1a1a !important;  /* Fundo bem escuro para o rodapé do chat */
}

/* Campo de texto (input) do chat no modo dark */
body.dark-mode #chatInput {
  background: #232c3b !important;  /* Fundo escuro */
  color: #fff !important;          /* Texto branco */
  border-color: #444 !important;   /* Borda discreta escura */
}