/* Auth screen isolated layer (scoped container). */
.screen-auth {
  position: relative;
}

/* Keep login/register visuals isolated by mode. */
.screen-auth #authContainer[data-auth-mode="login"] #registerBtn {
  display: none !important;
}

.screen-auth #authContainer .auth-trial-note {
  display: none !important;
}

.screen-auth #authContainer[data-auth-mode="register"] .auth-trial-note {
  display: block !important;
}

.screen-auth #authContainer[data-auth-mode="register"] #loginBtn,
.screen-auth #authContainer[data-auth-mode="register"] #resetPasswordBtn {
  display: none !important;
}

/* Force auth buttons palette to white regardless of app theme. */
.screen-auth #authContainer {
  --auth-btn-bg: #ffffff;
  --auth-btn-text: #0f172a;
  --auth-btn-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

/* Auth screen: solid black background without light edge strips. */
body.auth-lock-active .screen-auth,
body.auth-lock-active {
  background: #000000 !important;
}

body.auth-lock-active .screen-auth #authContainer {
  background: rgba(0, 0, 0, 0.78) !important;
}

body.auth-lock-active .screen-auth .auth-layout {
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body.auth-lock-active .screen-auth .gptlike-wrapper::after {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Google button stays white in both login and register. */
.screen-auth #googleLoginBtn,
.screen-auth .google-btn {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
  --lock-border: rgba(15, 23, 42, 0.16);
}

body.auth-lock-active .screen-auth #authContainer .google-btn {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
}

/* Email login button must be white. */
.screen-auth #loginBtn.btn-primary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
  --lock-bg-color: #ffffff;
  --lock-bg-image: none;
  --lock-color: #0f172a;
  --lock-border: rgba(15, 23, 42, 0.16);
}

.screen-auth #registerBtn.btn-secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
  --lock-bg-color: #ffffff;
  --lock-bg-image: none;
  --lock-color: #0f172a;
  --lock-border: rgba(15, 23, 42, 0.16);
}

body.auth-lock-active .screen-auth #loginBtn.btn-primary,
body.auth-lock-active .screen-auth #registerBtn.btn-secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
}

.screen-auth #loginBtn.btn-primary::before,
.screen-auth #registerBtn.btn-secondary::before {
  content: none !important;
}

.screen-auth #loginBtn.btn-primary:hover,
.screen-auth #loginBtn.btn-primary:active,
.screen-auth #loginBtn.btn-primary:focus,
.screen-auth #loginBtn.btn-primary:focus-visible,
.screen-auth #registerBtn.btn-secondary:hover,
.screen-auth #registerBtn.btn-secondary:active,
.screen-auth #registerBtn.btn-secondary:focus,
.screen-auth #registerBtn.btn-secondary:focus-visible {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
  filter: none !important;
}

/* Reset password must look like text link, not a button. */
.screen-auth #resetPasswordBtn.reset-pass[role="button"] {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  outline: none !important;
  color: #ffb86b !important;
  -webkit-text-fill-color: #ffb86b !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
  --lock-color: #ffb86b;
}
.screen-auth #resetPasswordBtn.reset-pass[role="button"]::before,
.screen-auth #resetPasswordBtn.reset-pass[role="button"]::after {
  content: none !important;
}
.screen-auth #resetPasswordBtn.reset-pass[role="button"]:hover,
.screen-auth #resetPasswordBtn.reset-pass[role="button"]:active,
.screen-auth #resetPasswordBtn.reset-pass[role="button"]:focus,
.screen-auth #resetPasswordBtn.reset-pass[role="button"]:focus-visible {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  color: #ffb86b !important;
  -webkit-text-fill-color: #ffb86b !important;
  opacity: 1 !important;
}

/* Language buttons: match main screen look. */
#gptlike-chat .screen-auth .lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: clamp(14px, 2.6vw, 16px) !important;
  font-weight: 900 !important;
  font-variation-settings: "wght" 820 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
  color: rgba(229, 229, 229, 0.62) !important;
  -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
  background: #000000 !important;
  background-image: none !important;
  border: 1px solid rgba(220, 220, 220, 0.42) !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  --lock-bg-image: none !important;
  --lock-bg-color: #000000 !important;
  --lock-color: rgba(229, 229, 229, 0.62) !important;
  --lock-border: rgba(220, 220, 220, 0.42) !important;
  --lock-shadow: none !important;
  --lock-text-shadow: none !important;
}
#gptlike-chat .screen-auth .lang-btn:hover {
  color: rgba(229, 229, 229, 0.62) !important;
  -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
  background: #000000 !important;
  background-image: none !important;
  border-color: rgba(220, 220, 220, 0.42) !important;
  transform: none !important;
}
#gptlike-chat .screen-auth .lang-btn:active,
#gptlike-chat .screen-auth .lang-btn:focus,
#gptlike-chat .screen-auth .lang-btn:focus-visible {
  background: #000000 !important;
  background-image: none !important;
  border-color: rgba(220, 220, 220, 0.42) !important;
  box-shadow: none !important;
  color: rgba(229, 229, 229, 0.62) !important;
  -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
  transform: none !important;
  filter: none !important;
}
#gptlike-chat .screen-auth .lang-btn.active {
  background: #000000 !important;
  color: #ffb86b !important;
  -webkit-text-fill-color: #ffb86b !important;
  border-color: #ffb86b !important;
  text-shadow: none !important;
  animation: none !important;
  --lock-color: #ffb86b !important;
  --lock-border: #ffb86b !important;
}

/* Safety: override gold UI lock even if auth-active is missing. */
#gptlike-chat:not(.auth-active) .screen-auth .lang-btn {
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
  border: 1px solid rgba(220, 220, 220, 0.42) !important;
  color: rgba(229, 229, 229, 0.62) !important;
  -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  --lock-bg-image: none !important;
  --lock-bg-color: #000000 !important;
  --lock-color: rgba(229, 229, 229, 0.62) !important;
  --lock-border: rgba(220, 220, 220, 0.42) !important;
  --lock-shadow: none !important;
  --lock-text-shadow: none !important;
}
#gptlike-chat:not(.auth-active) .screen-auth .lang-btn:hover,
#gptlike-chat:not(.auth-active) .screen-auth .lang-btn:active,
#gptlike-chat:not(.auth-active) .screen-auth .lang-btn:focus,
#gptlike-chat:not(.auth-active) .screen-auth .lang-btn:focus-visible {
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
  border-color: rgba(220, 220, 220, 0.42) !important;
  color: rgba(229, 229, 229, 0.62) !important;
  -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#gptlike-chat:not(.auth-active) .screen-auth .lang-btn.active {
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
  border-color: #ffb86b !important;
  color: #ffb86b !important;
  -webkit-text-fill-color: #ffb86b !important;
  text-shadow: none !important;
  --lock-color: #ffb86b !important;
  --lock-border: #ffb86b !important;
}

.screen-auth .lang-label {
  display: none !important;
}

.screen-auth .lang-seg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.screen-auth .lang-row {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  #gptlike-chat .screen-auth .lang-btn {
    min-width: 48px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
  .screen-auth .lang-seg {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
}

/* FINAL: exact clone of main screen language buttons (onboarding page 1). */
#gptlike-chat .screen-auth #authContainer .lang-btn {
  height: auto !important;
  padding: 0 2px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: color 0.16s ease, text-shadow 0.16s ease, transform 0.12s ease !important;
}
#gptlike-chat .screen-auth #authContainer .lang-btn:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  transform: translateY(-1px) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#gptlike-chat .screen-auth #authContainer .lang-btn:active {
  background: transparent !important;
  box-shadow: none !important;
}
#gptlike-chat .screen-auth #authContainer .lang-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
#gptlike-chat .screen-auth #authContainer .lang-btn.active {
  color: #ffb86b !important;
  text-shadow: 0 0 10px rgba(255, 154, 60, 0.75),
    0 0 22px rgba(255, 122, 69, 0.55) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Page-1 override (pill style) */
#gptlike-chat .screen-auth #authContainer .lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: clamp(14px, 2.6vw, 16px) !important;
  font-weight: 900 !important;
  font-variation-settings: "wght" 820 !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
  color: rgba(229, 229, 229, 0.62) !important;
  -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
  background: #000000 !important;
  border: 1px solid rgba(220, 220, 220, 0.42) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
#gptlike-chat .screen-auth #authContainer .lang-btn.active {
  background: #000000 !important;
  color: #ffb86b !important;
  -webkit-text-fill-color: #ffb86b !important;
  border-color: #ffb86b !important;
  text-shadow: none !important;
  animation: none !important;
}
@media (max-width: 640px) {
  #gptlike-chat .screen-auth #authContainer .lang-btn {
    min-width: 48px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
}

@media (max-height: 720px) {
  body.auth-lock-active .screen-auth #authContainer .auth-layout {
    max-height: calc(100dvh - (var(--screen-edge-top) + var(--screen-edge-bottom)));
  }
  body.auth-lock-active .screen-auth #authContainer .auth-body {
    max-height: calc(100dvh - 180px);
  }
  body.auth-lock-active .screen-auth #authContainer .auth-center {
    --auth-control-h: 40px;
    --auth-gap: 6px;
    --auth-pad-v: 8px;
  }
}