/* ==========================================================================
   Oguen Chat Gate — estilos do mini-formulário de captura (Nome + E-mail)
   Não interfere no layout do AI Engine; apenas adiciona um overlay/painel.
   ========================================================================== */

.ocg-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* acima do chatbot */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 12, 24, .55);
  backdrop-filter: saturate(120%) blur(3px);
  padding: 16px;
  box-sizing: border-box;
}

.ocg-overlay[hidden] { display: none !important; }

.ocg-card {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  color: #10151f;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 22px 22px 18px;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-sizing: border-box;
  animation: ocg-pop .18s ease-out;
}

@keyframes ocg-pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.ocg-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #0b1220;
}

.ocg-card p.ocg-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: #556074;
}

.ocg-field { margin-bottom: 12px; }

.ocg-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #33404f;
}

.ocg-card .ocg-field input,
.ocg-card .ocg-field input[type="text"],
.ocg-card .ocg-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #d3dae6;
  border-radius: 9px;
  font-size: 14px;
  color: #10151f !important;               /* garante texto escuro sobre temas que forçam branco */
  -webkit-text-fill-color: #10151f !important; /* Safari/WebKit e autofill */
  caret-color: #10151f;
  background: #fff !important;
  background-color: #fff !important;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Placeholder legível */
.ocg-card .ocg-field input::placeholder {
  color: #8a94a6 !important;
  -webkit-text-fill-color: #8a94a6 !important;
  opacity: 1;
}

/* Autofill do navegador (evita texto branco / fundo azul do Chrome) */
.ocg-card .ocg-field input:-webkit-autofill,
.ocg-card .ocg-field input:-webkit-autofill:hover,
.ocg-card .ocg-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #10151f !important;
  caret-color: #10151f;
  box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.ocg-card .ocg-field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
  color: #10151f !important;
  -webkit-text-fill-color: #10151f !important;
}

.ocg-card .ocg-field input.ocg-invalid {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .15);
}

.ocg-error {
  display: none;
  margin: 4px 0 0;
  font-size: 12px;
  color: #d1373c;
}

.ocg-error.ocg-show { display: block; }

.ocg-submit {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.ocg-submit:hover { background: #1d4ed8; }
.ocg-submit:active { transform: translateY(1px); }
.ocg-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Compatibilidade dark: força card claro mesmo em temas escuros */
@media (prefers-color-scheme: dark) {
  .ocg-card { background: #ffffff; color: #10151f; }
}