/* Final account-bar correction — v44.
   The spacing/placement bug was desktop-only. Mobile layout is left alone. */

/* A zero-count badge must never render, even during initial loading. */
.account-unread-badge.hidden,
.account-unread-badge[hidden],
#dmUnreadBadge.hidden,
#dmUnreadBadge[hidden],
#notificationUnreadBadge.hidden,
#notificationUnreadBadge[hidden] {
  display: none !important;
}

@media (min-width: 641px) {
  /* Keep username, verification/admin badges, and Online tightly grouped. */
  #authenticatedAccountIdentity.account-identity {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #authenticatedAccountIdentity .verified-username-line {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #authenticatedAccountIdentity .verified-badge,
  #authenticatedAccountIdentity .role-badge,
  #authenticatedAccountIdentity .developer-badge,
  #authenticatedAccountIdentity .admin-badge {
    margin-left: 0 !important;
  }

  #authenticatedAccountIdentity #onlineBadge.online-badge {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 4px !important;
  }

  /* Both unread counters use one identical desktop rule. */
  #authenticatedAccountButtons #directMessagesButton,
  #authenticatedAccountButtons #notificationsButton {
    position: relative !important;
    overflow: visible !important;
  }

  #authenticatedAccountButtons #dmUnreadBadge,
  #authenticatedAccountButtons #notificationUnreadBadge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    width: auto !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--card) !important;
    border-radius: 999px !important;
    background: var(--primary) !important;
    color: var(--primary-text) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  #authenticatedAccountButtons #dmUnreadBadge.hidden,
  #authenticatedAccountButtons #dmUnreadBadge[hidden],
  #authenticatedAccountButtons #notificationUnreadBadge.hidden,
  #authenticatedAccountButtons #notificationUnreadBadge[hidden] {
    display: none !important;
  }
}



/* Mobile identity cluster correction — v45.
   Keep the @handle, verification/admin badges, and green dot touching as one unit. */
@media (max-width: 640px) {
  #authenticatedAccountIdentity.account-identity {
    display: flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 104px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #authenticatedAccountIdentity .verified-username-line {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 104px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #authenticatedAccountIdentity .verified-handle {
    display: inline-block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 66px !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #authenticatedAccountIdentity .verified-badge,
  #authenticatedAccountIdentity .role-badge,
  #authenticatedAccountIdentity .developer-badge,
  #authenticatedAccountIdentity .admin-badge {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #authenticatedAccountIdentity #onlineBadge.online-badge {
    position: static !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    margin: 0 0 0 1px !important;
    padding: 0 !important;
  }
}


/* =========================================================
   GUEST ACCOUNT BAR — AUTH BUTTON ONLY v49
   Never show the five signed-in navigation controls while logged out.
   The Log in / Sign up action occupies the right-side controls position.
   ========================================================= */
body:not([data-auth-state="authenticated"]) #authenticatedAccountButtons,
body[data-auth-state="guest"] #authenticatedAccountButtons,
body[data-auth-state="guest"] #authenticatedAccountButtons > button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-auth-state="guest"] .card.account-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
}

body[data-auth-state="guest"] #guestAccountIdentity:not(.hidden):not([hidden]) {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

body[data-auth-state="guest"] #guestAccountButtons:not(.hidden):not([hidden]) {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  width: auto !important;
  margin: 0 !important;
}

body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  white-space: nowrap !important;
}



/* =========================================================
   MOBILE GUEST AUTH BUTTON — COMPACT PILL v50
   Keep the login action in the former navigation area without
   letting it dominate the whole account bar.
   ========================================================= */
@media (max-width: 700px) {
  body[data-auth-state="guest"] #guestAccountButtons:not(.hidden):not([hidden]) {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: -0.1px !important;
  }
}

@media (max-width: 370px) {
  body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
    height: 40px !important;
    min-height: 40px !important;
    padding-inline: 11px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   GUEST ACCOUNT BAR — FULL-WIDTH SINGLE CAPSULE v52
   Browsing Yapper + Guest + Log in / Sign up share one Yap-width row.
   The five signed-in navigation buttons never appear while logged out.
   ========================================================= */
body[data-auth-state="guest"] #authenticatedAccountIdentity,
body[data-auth-state="guest"] #authenticatedAccountButtons,
body[data-auth-state="guest"] #authenticatedAccountButtons > button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  body[data-auth-state="guest"] .card.account-bar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    padding: 6px 7px 6px 13px !important;
    gap: 8px !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity:not(.hidden):not([hidden]) {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity strong {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity .guest-badge {
    flex: 0 0 auto !important;
    min-height: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 9999px !important;
    font-size: 9.5px !important;
    line-height: 26px !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons:not(.hidden):not([hidden]),
  body[data-auth-state="guest"] #guestAccountButtons.account-buttons:not(.hidden):not([hidden]) {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: -0.1px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 370px) {
  body[data-auth-state="guest"] .card.account-bar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 6px 5px 10px !important;
    gap: 6px !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity:not(.hidden):not([hidden]) {
    gap: 4px !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity strong {
    font-size: 12.5px !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity .guest-badge {
    height: 24px !important;
    min-height: 24px !important;
    padding-inline: 7px !important;
    font-size: 8.5px !important;
    line-height: 24px !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
    min-width: 104px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
  }
}



/* =========================================================
   FINAL RESPONSIVE ACCOUNT BAR NORMALIZATION v53
   Desktop and phone both use one clean full-width capsule.
   Guest mode shows only Browsing Yapper, Guest and Log in / Sign up.
   Authenticated mode restores the five circular controls.
   ========================================================= */

/* Never leak signed-in controls into guest mode. */
body[data-auth-state="guest"] #authenticatedAccountIdentity,
body[data-auth-state="guest"] #authenticatedAccountButtons,
body[data-auth-state="guest"] #authenticatedAccountButtons > button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Never leak guest controls into authenticated mode. */
body[data-auth-state="authenticated"] #guestAccountIdentity,
body[data-auth-state="authenticated"] #guestAccountButtons {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Shared full-width capsule geometry. */
body[data-auth-state="guest"] .card.account-bar,
body[data-auth-state="authenticated"] .card.account-bar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}

/* Desktop and tablet: compact, balanced, single-row bar. */
@media (min-width: 701px) {
  body[data-auth-state="guest"] .card.account-bar,
  body[data-auth-state="authenticated"] .card.account-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 18px !important;
    min-height: 72px !important;
    margin: 0 auto 22px !important;
    padding: 9px 11px 9px 22px !important;
    text-align: left !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity:not(.hidden):not([hidden]),
  body[data-auth-state="authenticated"] #authenticatedAccountIdentity:not(.hidden):not([hidden]) {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity strong {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity .guest-badge {
    flex: 0 0 auto !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    font-size: 11px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons:not(.hidden):not([hidden]) {
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 174px !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: 9999px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="authenticated"] #authenticatedAccountIdentity .verified-username-line {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 5px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="authenticated"] #authenticatedAccountButtons:not(.hidden):not([hidden]) {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body[data-auth-state="authenticated"] #authenticatedAccountButtons > button {
    display: inline-flex !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Phones: same single capsule, Yap-card width, no second row. */
@media (max-width: 700px) {
  body[data-auth-state="guest"] .card.account-bar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    padding: 6px 7px 6px 13px !important;
    gap: 8px !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity:not(.hidden):not([hidden]) {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 120px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity strong {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons:not(.hidden):not([hidden]) {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
    width: auto !important;
    min-width: 112px !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}


/* =========================================================
   DESKTOP GUEST BAR — COMPACT LEFT CLUSTER v54
   Keep the full-width outer capsule, but place Browsing Yapper,
   Guest, and Log in / Sign up together instead of stretching them apart.
   Authenticated desktop and all phone layouts stay unchanged.
   ========================================================= */
@media (min-width: 701px) {
  body[data-auth-state="guest"] .card.account-bar {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    justify-content: start !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity:not(.hidden):not([hidden]) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons:not(.hidden):not([hidden]) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons #openAuthButton {
    min-width: 154px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding-inline: 18px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   DESKTOP GUEST BAR — LOGIN ACTION AT FAR RIGHT v55
   Keep Browsing Yapper + Guest together on the left, then use
   the middle grid column as flexible space. Phone layout unchanged.
   ========================================================= */
@media (min-width: 701px) {
  body[data-auth-state="guest"] .card.account-bar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 12px !important;
  }

  body[data-auth-state="guest"] #guestAccountIdentity:not(.hidden):not([hidden]) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  body[data-auth-state="guest"] #guestAccountButtons:not(.hidden):not([hidden]) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin-left: 0 !important;
  }
}

/* =========================================================
   PASSWORD SHOW / HIDE — FIXED MOBILE ALIGNMENT v56
   Use the password field itself as the grid row, so the toggle can never
   drift downward when its label changes or when a touch state sticks.
   ========================================================= */
.password-input-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  position: relative !important;
}

.password-input-wrap > input {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  padding-right: 84px !important;
}

.password-input-wrap > .password-toggle-button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  align-self: center !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 10px !important;
  inset: auto !important;
  transform: none !important;
  border-radius: 9999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.password-input-wrap > .password-toggle-button:hover {
  transform: scale(1.01) !important;
}

.password-input-wrap > .password-toggle-button:active {
  transform: scale(0.96) !important;
}

@media (min-width: 900px) {
  .password-input-wrap > input {
    padding-right: 94px !important;
  }

  .password-input-wrap > .password-toggle-button {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin-right: 7px !important;
  }
}


.yapper-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);z-index:10000}
.yapper-modal.hidden{display:none!important}
.yapper-modal-card{width:min(420px,92vw);background:#1b1b1f;border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.yapper-modal-card h2{margin:0 0 8px}.yapper-modal-card p{margin:0 0 16px;opacity:.8}
.pill-input{width:100%;border-radius:999px;padding:12px 16px;border:1px solid rgba(255,255,255,.15);background:#2a2a31;color:#fff;box-sizing:border-box}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.modal-actions button{border-radius:999px;padding:10px 18px}