/* Hábeis Chat — login alinhado à landing comercial (clara) */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

:root {
  --hc-bg: #f4f7fc;
  --hc-surface: #ffffff;
  --hc-ink: #0f1b33;
  --hc-muted: #5b6b86;
  --hc-line: #d7e0ef;
  --hc-brand: #1f4fd6;
  --hc-brand-deep: #1639a8;
  --hc-amber: #e39a2f;
  --hc-radius: 16px;
  --hc-font: "DM Sans", system-ui, sans-serif;
  --hc-shadow: 0 20px 50px rgba(15, 27, 51, 0.1);
}

body:has(main.min-h-screen.flex) {
  font-family: var(--hc-font) !important;
  color: var(--hc-ink) !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(31, 79, 214, 0.08) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, #f8faff 0%, var(--hc-bg) 45%, #ffffff 100%) !important;
}

body:has(main.min-h-screen.flex)::before {
  display: none !important;
}

body:has(main.min-h-screen.flex) #app {
  position: relative;
  z-index: 1;
}

body:has(main.min-h-screen.flex) main.min-h-screen {
  background: transparent !important;
  min-height: 100vh;
  justify-content: center;
  padding: 2.5rem 1.25rem 3rem !important;
}

body:has(main.min-h-screen.flex) main > section:first-child {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

body:has(main.min-h-screen.flex) main img:not(.hc-login-logo) {
  display: none !important;
}

body:has(main.min-h-screen.flex) main h2 {
  font-family: var(--hc-font) !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em;
  color: var(--hc-ink) !important;
  font-size: clamp(1.65rem, 3vw, 1.9rem) !important;
  margin-top: 1rem !important;
}

body:has(main.min-h-screen.flex) main > section:first-child p,
body:has(main.min-h-screen.flex) .hc-login-sub {
  color: var(--hc-muted) !important;
}

body:has(main.min-h-screen.flex) main a.text-link,
body:has(main.min-h-screen.flex) main a.text-n-brand,
body:has(main.min-h-screen.flex) .hc-login-sub a {
  color: var(--hc-brand) !important;
  font-weight: 650;
  text-decoration: none;
}
body:has(main.min-h-screen.flex) main a.text-link:hover,
body:has(main.min-h-screen.flex) .hc-login-sub a:hover {
  color: var(--hc-brand-deep) !important;
}

/* Card do formulário */
body:has(main.min-h-screen.flex) main > section:last-of-type,
body:has(main.min-h-screen.flex) main section.sm\:max-w-lg {
  background: var(--hc-surface) !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: var(--hc-radius) !important;
  box-shadow: var(--hc-shadow) !important;
  color: var(--hc-ink) !important;
  max-width: 420px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem 1.75rem !important;
}

body:has(main.min-h-screen.flex) label,
body:has(main.min-h-screen.flex) .text-n-slate-12,
body:has(main.min-h-screen.flex) .text-n-slate-11 {
  color: var(--hc-muted) !important;
  font-weight: 550 !important;
}

body:has(main.min-h-screen.flex) input[type="text"],
body:has(main.min-h-screen.flex) input[type="email"],
body:has(main.min-h-screen.flex) input[type="password"],
body:has(main.min-h-screen.flex) input:not([type="checkbox"]):not([type="radio"]) {
  background: #f7f9fd !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: 12px !important;
  color: var(--hc-ink) !important;
  box-shadow: none !important;
  min-height: 44px;
}
body:has(main.min-h-screen.flex) input::placeholder {
  color: #9aa8bf !important;
}
body:has(main.min-h-screen.flex) input:focus {
  border-color: rgba(31, 79, 214, 0.55) !important;
  outline: none !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(31, 79, 214, 0.12) !important;
}

/* Botão Entrar — azul da marca (não âmbar genérico) */
body:has(main.min-h-screen.flex) button[type="submit"],
body:has(main.min-h-screen.flex) button.bg-n-brand,
body:has(main.min-h-screen.flex) button.bg-woot-500 {
  background: linear-gradient(180deg, #2a5cf0, var(--hc-brand)) !important;
  border-color: var(--hc-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  min-height: 46px;
  box-shadow: 0 8px 20px rgba(31, 79, 214, 0.25) !important;
}
body:has(main.min-h-screen.flex) button[type="submit"]:hover,
body:has(main.min-h-screen.flex) button.bg-n-brand:hover {
  background: var(--hc-brand-deep) !important;
}

.hc-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
}
.hc-login-logo {
  height: 42px;
  width: auto;
  max-width: min(260px, 85vw);
  display: block;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.hc-login-sub {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  text-align: center;
  font-size: 0.92rem;
  color: var(--hc-muted);
}

@media (prefers-reduced-motion: no-preference) {
  body:has(main.min-h-screen.flex) main > section:first-child,
  body:has(main.min-h-screen.flex) main > section:last-of-type {
    animation: hc-rise 0.55s ease both;
  }
  body:has(main.min-h-screen.flex) main > section:last-of-type {
    animation-delay: 0.06s;
  }
}
@keyframes hc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}