/* =========================================================
   RADARMEETFIND — MOBILE LOGIN ARTWORK ONLY
   The auth card and all controls remain real HTML.
   ========================================================= */

@media (max-width: 600px) {
  #authScreen {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #061226 !important;
    isolation: isolate !important;
  }

  /* Top crop: hikers, basketball, and the RadarMeetFind lockup. */
  #authScreen::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 280px;
    background-image: url("attached_assets/ChatGPT_Image_Sep_10,_2026,_04_48_17_PM_1789084219517.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
  }

  /* The old decorative mobile art is replaced by the supplied artwork. */
  #authScreen > .auth-login-hero,
  #authScreen > .auth-vegas-skyline,
  #authScreen > .auth-activity-column {
    display: none !important;
  }

  #authScreen > .auth-center {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto 300px !important;
    padding: 280px 0 0 !important;
    box-sizing: border-box !important;
  }

  /* Bottom crop: campfire, coffee, gym, pets, and activity icons. */
  #authScreen > .auth-center::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -12px;
    width: calc(100% + 24px);
    height: 300px;
    background-image: url("attached_assets/ChatGPT_Image_Sep_10,_2026,_04_48_17_PM_1789084219517.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
  }

  #authScreen > .auth-center > .auth-card {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  #authScreen input,
  #authScreen button,
  #authScreen .auth-tabs {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile-only cyan / electric-blue auth palette. */
  #authScreen > .auth-center > .auth-card {
    border-color: #12BFFF !important;
    background:
      linear-gradient(180deg,
        rgba(7, 19, 33, 0.98),
        rgba(7, 19, 33, 0.96)) !important;
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.60),
      0 0 40px rgba(18, 191, 255, 0.30) !important;
  }

  #authScreen > .auth-center > .auth-card .auth-logo-icon {
    border-color: #12BFFF !important;
    color: #12BFFF !important;
    box-shadow:
      0 0 22px rgba(18, 191, 255, 0.30) !important;
  }

  #authScreen > .auth-center > .auth-card .auth-logo span,
  #authScreen > .auth-center > .auth-card .auth-join-line span:first-child {
    color: #12BFFF !important;
  }

  #authScreen > .auth-center > .auth-card .auth-tab.active {
    background:
      linear-gradient(135deg, #12BFFF, #149DFF) !important;
    box-shadow:
      0 5px 18px rgba(18, 191, 255, 0.30) !important;
  }

  #authScreen > .auth-center > .auth-card .auth-main-button {
    background:
      linear-gradient(135deg, #149DFF, #087FD1) !important;
    box-shadow:
      0 8px 25px rgba(18, 191, 255, 0.30) !important;
  }

  #authScreen > .auth-center > .auth-card .forgot-password {
    color: #12BFFF !important;
  }

  #authScreen > .auth-center > .auth-card .auth-form > input:focus {
    border-color: #12BFFF !important;
    box-shadow:
      0 0 0 3px rgba(18, 191, 255, 0.30) !important;
  }

  #authScreen > .auth-center > .auth-card .remember-login input {
    accent-color: #12BFFF !important;
  }
}
/* City Chat compact message layout */
.city-full-message,
.app .city-full-message {
  gap: 8px !important;
  margin-bottom: 6px !important;
  padding: 4px 6px !important;
  min-height: 0 !important;
  height: auto !important;
  align-items: flex-start !important;
}

.city-full-avatar,
.city-you-avatar,
.app .city-full-avatar,
.app .city-you-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}

.city-message-top,
.app .city-message-top {
  margin-bottom: 2px !important;
  gap: 4px !important;
}

.city-message-content,
.app .city-message-content {
  min-width: 0 !important;
}

.city-message-content p,
.app .city-message-content p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* Let City Chat JavaScript control each username color */
.city-person-name,
.city-message-top .city-person-name,
.app .city-person-name,
.app .city-message-top .city-person-name {
  color: inherit !important;
}

/* Allow each City Chat username to use its assigned JS color */