/* 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;
  }
}