/* 使用 ID 选择器 #main-content 确保最高优先级 */

#main-content .post-content .friend-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 1.5rem;
}

/* 响应式布局：小屏幕时调整列数 */
@media (max-width: 1200px) {
  #main-content .post-content .friend-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  #main-content .post-content .friend-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #main-content .post-content .friend-links {
    grid-template-columns: repeat(1, 1fr);
  }
}

#main-content .post-content .friend-card {
  /* 1. 必须是 relative 才能让内部的 absolute 定位生效 */
  position: relative !important; 
  /* 2. 保持 Flex 布局来对齐文本 */
  display: flex;
  align-items: center;
  /* 3. 调整 padding-left 为头像腾出空间：3rem(头像宽) + 1rem(左侧原始 padding/间距) = 4rem */
  padding: 0.75rem !important; 
  padding-left: 4rem !important; /* 调整后的间距 */
  min-height: 3.5rem; /* 设置最小高度，确保头像有足够空间 */
  
  border-radius: 0.75rem;
  background: var(--entry);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.25s ease;
  text-decoration: none;
}
#main-content .post-content .friend-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ------------------------------------- */
/* CRITICAL BLOCK: 绝对定位隔离 Avatar - 强制 3rem 尺寸和圆形 */
/* ------------------------------------- */
#main-content .post-content .friend-card .friend-avatar {
  /* 1. 绝对定位，脱离 Flex 布局，不再受拉伸影响 */
  position: absolute !important; 
  
  /* 2. 定位和垂直居中 */
  top: 50% !important;
  left: 1rem !important; /* 放在卡片左侧原始 padding 位置 */
  transform: translateY(-85%) !important; /* 向上移动 */
  
  /* 3. 强制 3rem 尺寸和正方形 */
  width: 2.5rem !important; 
  height: 2.5rem !important; 
  
  /* 4. 强制圆形 */
  border-radius: 50% !important; 
  
  /* 居中文本 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 占位符样式 */
  color: #fff !important; 
  font-weight: bold;
  font-size: 1.5rem; /* 首字母字体同步增大 */
  text-transform: uppercase;
}

/* 随机颜色主题 */
#main-content .post-content .friend-card .link-0 { background-color: #4CAF50 !important; } 
#main-content .post-content .friend-card .link-1 { background-color: #2196F3 !important; } 
#main-content .post-content .friend-card .link-2 { background-color: #FF9800 !important; } 
#main-content .post-content .friend-card .link-3 { background-color: #F44336 !important; } 
#main-content .post-content .friend-card .link-4 { background-color: #9C27B0 !important; } 


/* ------------------------------------- */
/* 文本信息样式 */
/* ------------------------------------- */
#main-content .post-content .friend-card .friend-info {
  flex-grow: 1; 
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}
#main-content .post-content .friend-card .font-semibold {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#main-content .post-content .friend-card .text-gray-600 {
  color: var(--secondary);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7em; /* 限制最多显示7个字符宽度 */
}