/* Auth is a separate overlay, not a descendant of #messengerView.
   Its colors must follow the resolved theme on <html>, including system mode.
   All rules are scoped so the shared site header and Messenger UI stay intact. */
#authView {
  --auth-backdrop: #f8fafc;
  --auth-card: #ffffff;
  --auth-border: #e2e8f0;
  --auth-text: #0f172a;
  --auth-muted: #475569;
  --auth-subtle: #64748b;
  --auth-tab-track: #f1f5f9;
  --auth-tab-active: #ffffff;
  --auth-tab-idle-text: #475569;
  --auth-tab-active-text: #047857;
  --auth-input-bg: #f8fafc;
  --auth-input-border: #cbd5e1;
  --auth-input-text: #0f172a;
  --auth-input-placeholder: #64748b;
  --auth-accent: #047857;
  --auth-action-bg: #047857;
  --auth-action-hover: #065f46;
  --auth-action-text: #ffffff;
  --auth-focus-ring: rgba(16, 185, 129, .24);
  --auth-error: #b91c1c;
  --auth-badge-bg: #f8fafc;
  --auth-badge-border: #cbd5e1;
  --auth-badge-hover: #ecfdf5;
  color-scheme: light;
  background-color: var(--auth-backdrop) !important;
  color: var(--auth-text);
}

html[data-theme="dark"] #authView,
html.dark #authView {
  --auth-backdrop: #0b1120;
  --auth-card: #111827;
  --auth-border: #334155;
  --auth-text: #f1f5f9;
  --auth-muted: #cbd5e1;
  --auth-subtle: #94a3b8;
  --auth-tab-track: #0b1220;
  --auth-tab-active: #26364d;
  --auth-tab-idle-text: #cbd5e1;
  --auth-tab-active-text: #6ee7b7;
  --auth-input-bg: #172033;
  --auth-input-border: #475569;
  --auth-input-text: #f8fafc;
  --auth-input-placeholder: #94a3b8;
  --auth-accent: #6ee7b7;
  --auth-action-bg: #047857;
  --auth-action-hover: #059669;
  --auth-action-text: #ffffff;
  --auth-focus-ring: rgba(52, 211, 153, .28);
  --auth-error: #fca5a5;
  --auth-badge-bg: #0f172a;
  --auth-badge-border: #475569;
  --auth-badge-hover: #064e3b;
  color-scheme: dark;
}

#authView .auth-card {
  background-color: var(--auth-card) !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
}

#authView .auth-subtitle,
#authView .auth-label,
#authView .auth-note {
  color: var(--auth-muted) !important;
}

/* The GIF wordmark contains black letters; keep them visible on dark cards. */
#authView .auth-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto 1.25rem;
}
#authView .auth-logo-wrap img { margin-bottom: 0 !important; }
html[data-theme="dark"] #authView .auth-logo-wrap,
html.dark #authView .auth-logo-wrap {
  background: #fff;
  border-radius: 1rem;
  padding: .45rem .65rem;
}

#authView .auth-tab-bar {
  background-color: var(--auth-tab-track) !important;
}
#authView .auth-tab {
  background-color: transparent !important;
  color: var(--auth-tab-idle-text) !important;
  box-shadow: none !important;
}
/* app.js toggles the bg-white class when Sign in / Sign up is selected. */
#authView .auth-tab.bg-white {
  background-color: var(--auth-tab-active) !important;
  color: var(--auth-tab-active-text) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.10) !important;
}
#authView .auth-tab:focus-visible,
#authView .auth-submit:focus-visible,
#authView .auth-legal-link:focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 2px;
}

#authView .auth-input {
  background: var(--auth-input-bg) !important;
  border-color: var(--auth-input-border) !important;
  color: var(--auth-input-text) !important;
  -webkit-text-fill-color: var(--auth-input-text);
  caret-color: var(--auth-input-text);
  color-scheme: inherit;
}
#authView .auth-input::placeholder {
  color: var(--auth-input-placeholder) !important;
  opacity: 1;
}
#authView .auth-input:focus {
  border-color: var(--auth-accent) !important;
  box-shadow: 0 0 0 3px var(--auth-focus-ring) !important;
  outline: none;
}
/* Chromium/Safari draw their own filled-field background and text.
   Use an inset shadow and text fill color to avoid the pale-on-gray bug. */
#authView .auth-input:-webkit-autofill,
#authView .auth-input:-webkit-autofill:hover,
#authView .auth-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset !important;
  -webkit-text-fill-color: var(--auth-input-text) !important;
  caret-color: var(--auth-input-text) !important;
  border-color: var(--auth-input-border) !important;
  transition: background-color 9999s ease-out 0s;
}
#authView .auth-input:-webkit-autofill:focus {
  border-color: var(--auth-accent) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset, 0 0 0 3px var(--auth-focus-ring) !important;
  box-shadow: 0 0 0 1000px var(--auth-input-bg) inset, 0 0 0 3px var(--auth-focus-ring) !important;
}

#authView .auth-submit {
  background-color: var(--auth-action-bg) !important;
  color: var(--auth-action-text) !important;
}
#authView .auth-submit:hover { background-color: var(--auth-action-hover) !important; }
#authView .auth-error { color: var(--auth-error) !important; }
#authView .auth-legal { color: var(--auth-subtle) !important; }
#authView .auth-legal-link { color: var(--auth-accent) !important; }
#authView .auth-legal-link:hover { text-decoration-thickness: 2px; }

/* Download links are also part of the auth card, not the messenger panel. */
#authView .uz-download-apps--auth { border-color: var(--auth-border) !important; }
#authView .uz-download-heading h3 { color: var(--auth-text) !important; }
#authView .uz-download-heading p,
#authView .uz-download-note { color: var(--auth-subtle) !important; }
#authView .uz-download-badge {
  background: var(--auth-badge-bg) !important;
  border-color: var(--auth-badge-border) !important;
  color: var(--auth-text) !important;
}
#authView a.uz-download-badge:hover { background: var(--auth-badge-hover) !important; border-color: var(--auth-accent) !important; }
#authView .uz-download-eyebrow { color: var(--auth-subtle) !important; }
#authView .uz-download-name { color: var(--auth-text) !important; }
#authView .uz-download-icon { color: var(--auth-accent) !important; }
#authView .uz-download-badge--pending .uz-download-name,
#authView .uz-download-badge--pending .uz-download-eyebrow,
#authView .uz-download-badge--pending .uz-download-icon { color: var(--auth-subtle) !important; }