/* ========== AUTH MODAL ========== */
/*
 * Sign in / sign up over the current page.
 *
 * Self-contained on purpose. The obvious move was to load bn_login.css and
 * reuse .field / .btn / .divider, but that file opens with `* { margin: 0 }`
 * and its own `body` rule — loading it on a normal page would restyle the
 * page underneath the modal. So the visual values are copied from it (same
 * neutrals, same 8px fields, same 10px buttons) under names of our own.
 *
 * The one exception is .btn-social: BnLoginForm renders that class and is
 * shared with the pages, so it is styled here scoped to the card rather than
 * forked into a modal-only copy.
 */

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  /* The app scrolls .content-area, not the body, so locking body overflow
     does nothing here — this is what actually stops the page behind from
     scrolling when the overlay reaches its end. */
  overscroll-behavior: contain;
  animation: auth-fade 0.18s ease-out;
}


.auth-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: auto;
  background: #000001;
  border: 1px solid var(--neutral-700, #2E2E2E);
  border-radius: 16px;
  /* The slider panel goes edge to edge, so the padding belongs to the form
     column rather than the card. */
  overflow: hidden;
  display: flex;
  font-family: 'Heebo', sans-serif;
  color: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  animation: auth-rise 0.2s ease-out;
}

/* The form column. */
.auth-modal-col {
  flex: 1;
  min-width: 0;
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/*
 * The slider, on the right of a wide card.
 *
 * Hidden below 900px — the same breakpoint at which the pages stop showing it
 * as a column. AuthModal checks the same width before starting it, because
 * display:none does not stop a video decoding.
 */
.auth-modal-visual {
  display: none;
}

@media (min-width: 900px) {
  /* The form column at its 420px, plus the panel. */
  .auth-modal-card {
    max-width: 790px;
  }

  .auth-modal-visual {
    display: block;
    flex: 0 0 350px;
    align-self: stretch;
    min-height: 580px;
  }

  /* Square off the edge the card already rounds, and drop the page version's
     own rounding — the card's overflow:hidden is what shapes it here. */
  .auth-modal-visual .slider-frame {
    height: 100%;
    border-radius: 0;
  }

  /*
   * ── The panel's own text layout ─────────────────────────────────────────
   *
   * The pages place every caption by hand in a composition authored at about
   * 850px wide, scaled through `--u`. At 350px that maths puts all three
   * bubbles over her face in a heap. Rather than re-tune numbers that were
   * never meant for this width, the panel positions its text itself: a name
   * at the top, the messages stacked at the bottom.
   *
   * Everything below overrides the shared sheet, so it stays scoped to
   * .auth-modal-visual and the pages are untouched.
   */

  /*
   * A slide that is faded out must also be OUT.
   *
   * backdrop-filter still composites through an `opacity: 0` ancestor, so
   * the three hidden slides went on blurring the frame behind their bubbles
   * — three faint grey bars stacked under the visible ones. `visibility`
   * stops it; the 0.6s delay on the way out keeps the crossfade, since
   * flipping it immediately would cut the outgoing slide dead.
   */
  .auth-modal-visual .slide {
    visibility: hidden;
    transition: opacity 0.6s, visibility 0s 0.6s;
  }

  .auth-modal-visual .slide.active {
    visibility: visible;
    transition: opacity 0.6s, visibility 0s 0s;
  }

  /* Enough of a scrim for white text to survive a pale frame. */
  .auth-modal-visual .slide::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%),
      linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 38%);
  }

  /* Above the scrim. They are later siblings, but the scrim is a pseudo of
     their parent, so source order alone does not settle it. */
  .auth-modal-visual .slide-title-script,
  .auth-modal-visual .auth-slide-chat {
    z-index: 2;
  }

  .auth-modal-visual .slide-title-script {
    top: 22px;
    left: 22px;
    font-size: 30px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  }

  /* The foot of the panel: a caption, her messages, or both. Clear of the
     dots at the very bottom of the frame. */
  .auth-modal-visual .auth-slide-chat {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  /*
   * Static, so the stack does the placing. Without this each bubble keeps
   * the shared sheet's `position: absolute` and all three land on top of one
   * another in the corner.
   */
  .auth-modal-visual .chat-bubble {
    position: static;
    max-width: 88%;
    padding: 7px 11px;
    border-radius: 14px 14px 14px 5px;
    font-size: 13px;
    line-height: 1.4;
    background: rgba(20, 20, 24, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /*
   * A caption is a line about the product, not something she said — so it
   * gets no bubble, and sits above the messages rather than among them.
   * Static, like them, because the stack does the placing.
   */
  .auth-modal-visual .slide-caption {
    position: static;
    align-self: stretch;
    margin-bottom: 3px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  }
}

@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-modal-overlay,
  .auth-modal-card { animation: none; }
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--neutral-400, #9E9E9E);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  /*
   * Above everything in the modal, including the promo media and the
   * caption layers that already claim z-index: 2.
   *
   * It had no z-index at all, so on the layouts where the visual pane
   * overlaps this corner the image painted over the ×: the one control
   * that closes the modal was behind a picture. A close button is the
   * last thing that may ever be covered.
   */
  z-index: 3;
}

.auth-modal-close:hover {
  color: #fff;
  background: var(--neutral-800, #131313);
}

.auth-modal-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-modal-logo img { display: block; }

/* ---- tabs ---- */

.auth-modal-tabs {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 4px;
  background: var(--neutral-800, #131313);
  border: 1px solid var(--neutral-700, #2E2E2E);
  border-radius: 10px;
}

.auth-modal-tab {
  flex: 1;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-400, #9E9E9E);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.auth-modal-tab:hover { color: #fff; }

.auth-modal-tab.is-active {
  background: var(--neutral-700, #2E2E2E);
  color: #fff;
}

.auth-modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

.auth-modal-error {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 95, 109, 0.1);
  border: 1px solid rgba(255, 95, 109, 0.3);
  border-radius: 8px;
  font-size: 14px;
  color: #ff5f6d;
  text-align: center;
}

/* ---- fields ---- */

.auth-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.auth-field-label {
  padding: 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}

.auth-field-hint {
  padding: 0 8px;
  font-size: 11px;
  line-height: 15px;
  color: var(--neutral-500, #777);
}

.auth-field-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  background: var(--neutral-800, #131313);
  border: 1px solid var(--neutral-700, #2E2E2E);
  border-radius: 8px;
  transition: border-color 0.2s;
}

.auth-field-input:focus-within {
  border-color: var(--purple-400, #CC95FF);
}

.auth-field-input input {
  flex: 1;
  min-width: 0;
  height: 20px;
  background: none !important;
  border: none;
  outline: none;
  color: #fff !important;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}

.auth-field-input input::placeholder { color: var(--neutral-500, #777); }

/* Chrome paints its own yellow over the field otherwise. */
.auth-field-input input:-webkit-autofill,
.auth-field-input input:-webkit-autofill:hover,
.auth-field-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px var(--neutral-800, #131313) inset !important;
  box-shadow: 0 0 0 1000px var(--neutral-800, #131313) inset !important;
}

.auth-field-eye {
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.auth-field-eye:hover { opacity: 1; }

.auth-forgot {
  align-self: flex-start;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple-400, #CC95FF);
  text-decoration: none;
}

.auth-forgot:hover { text-decoration: underline; }

.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--neutral-400, #9E9E9E);
  cursor: pointer;
}

.auth-terms input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--purple-400, #CC95FF);
}

.auth-terms a {
  color: var(--purple-400, #CC95FF);
  text-decoration: none;
}

.auth-terms a:hover { text-decoration: underline; }

/* ---- buttons ---- */

.auth-btn {
  width: 100%;
  padding: 11px 24px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.auth-btn-primary {
  background: #fff;
  color: #000;
  box-shadow: 0 2px 20px rgba(255, 255, 255, 0.4);
}

.auth-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.6);
}

.auth-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--neutral-700, #2E2E2E);
}

.auth-divider span {
  font-size: 12px;
  color: var(--neutral-500, #777);
}

/* BnLoginForm's own class — see the header note. */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.auth-social .btn-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  /* The provider names are what they are; half a 420px card is not enough
     for "Continue with Discord" on one line, which is why these stack. */
  white-space: nowrap;
  background: var(--neutral-700, #2E2E2E);
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.auth-social .btn-social:hover { background: var(--neutral-600, #4B4B4B); }

.auth-social .btn-social img {
  flex: none;
  width: 18px;
  height: 18px;
}

.auth-modal-foot {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-400, #9E9E9E);
  text-align: center;
}

.auth-modal-foot button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--purple-400, #CC95FF);
  cursor: pointer;
}

.auth-modal-foot button:hover { text-decoration: underline; }

/* ---- the post-signup panel ---- */

.auth-modal-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 0 4px;
}

.auth-modal-sent-text {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--neutral-400, #9E9E9E);
  text-align: center;
}

/* ---- phones ---- */

@media (max-width: 480px) {
  .auth-modal-overlay { padding: 0; }

  .auth-modal-card {
    max-width: none;
    min-height: 100%;
    border: none;
    border-radius: 0;
  }

  .auth-modal-col {
    padding: 56px 20px 32px;
    justify-content: center;
  }
}