/* ============================================================================
   Capi Când-IA Pro — Auth Page (Fase 0)
   Layout específico do login (3 estados: login, forgot, reset).
   Renderiza SEMPRE em dark, ignorando body.dark-mode toggle.
   Componentes usados: ds-brand-mark, ds-input, ds-btn, ds-callout, ds-checkbox.
   ============================================================================ */

/* ─── Page wrapper (#authScreen) — força dark fixo ─── */
#authScreen.ds-auth-page {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--ds-space-xl);
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Glow dourado sutil CENTRALIZADO na página (atrás do card de login) */
#authScreen.ds-auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ds-glow-gold-ambient);
  pointer-events: none;
  z-index: 0;
}

/* Avatar Capi — único elemento "ilustrativo" da marca na auth screen.
   Visível APENAS no login (regra "sem cartoon na UI diária" vale pro resto do app).
   JS também depende deste elemento (.auth-logo-img) pra extrair a URL e reusar
   em sidebar/chat/welcome avatars — por isso o markup permanece. */
#authScreen .auth-logo-img.ds-auth-avatar {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: var(--ds-radius-full);
  object-fit: cover;
  border: 2px solid rgba(212,160,23,0.45);
  box-shadow:
    0 0 32px rgba(212,160,23,0.22),
    0 4px 16px rgba(0,0,0,0.45);
  margin: 8px auto 18px;
}

/* ─── Container do card ─── */
.ds-auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  animation: ds-auth-fade-up 0.5s ease;
}

@keyframes ds-auth-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Card de auth ─── */
.ds-auth-card {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 32px;
  overflow: hidden;
}

/* Brand mark no canto superior direito do card */
.ds-auth-brand {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

/* ─── Conteúdo do estado (login/forgot/reset) ─── */
.ds-auth-state {
  /* avatar (acima dos estados) já provê o respiro do brand mark */
  padding-top: 0;
}

.ds-auth-state[hidden] {
  display: none !important;
}

.ds-auth-title {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: var(--ds-text-2xl);
  color: var(--ds-text);
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  line-height: 1.1;
  text-align: center;
}

.ds-auth-sub {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  color: var(--ds-text-2);
  line-height: 1.5;
  margin: 0 0 var(--ds-space-2xl);
  text-align: center;
}

/* Botão "← Voltar pra login" no topo dos estados secundários */
.ds-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
  margin-bottom: var(--ds-space-lg);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: var(--ds-trans-fast);
}

.ds-auth-back:hover {
  color: var(--ds-text);
}

.ds-auth-back svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

/* ─── Form ─── */
.ds-auth-form .ds-input-wrap + .ds-input-wrap,
.ds-auth-field + .ds-auth-field {
  margin-top: var(--ds-space-md);
}

.ds-auth-field {
  margin-bottom: 0;
}

.ds-auth-actions {
  margin-top: var(--ds-space-xl);
}

/* ─── Alerts ─── */
.ds-auth-alert {
  display: none;
  padding: 10px 14px;
  border-radius: var(--ds-radius);
  font-size: var(--ds-text-sm);
  margin-bottom: var(--ds-space-md);
  line-height: 1.5;
}

.ds-auth-alert.is-visible {
  display: block;
}

.ds-auth-alert-error {
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.30);
  color: #fca5a5;
}

.ds-auth-alert-success {
  background: rgba(74,222,128,0.10);
  border: 1px solid rgba(74,222,128,0.30);
  color: #86efac;
}

/* ─── Callout helper (debaixo do form de login) ─── */
.ds-auth-helper {
  margin-top: var(--ds-space-xl);
}

/* ─── Footer ─── */
.ds-auth-footer {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: var(--ds-space-2xl);
  font-size: var(--ds-text-xs);
}

.ds-auth-footer a {
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: var(--ds-trans-fast);
}

.ds-auth-footer a:hover {
  color: var(--ds-text-2);
}

.ds-auth-footer-sep {
  color: var(--ds-text-muted);
}

/* ─── Mobile ─── */
@media (max-width: 480px) {
  #authScreen.ds-auth-page {
    padding: var(--ds-space-md);
    align-items: flex-start;
    padding-top: var(--ds-space-2xl);
  }

  .ds-auth-card {
    padding: 24px 20px;
  }

  .ds-auth-title {
    font-size: 22px;
  }
}