* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',sans-serif;
     /*字体颜色 color: #e7e9ea; */
      min-height: 100vh;
    }
    .content-wrapper {
      display: flex;
      width: 25%;
      max-width: 25%;/* 整体布局占屏幕比率 */
      margin: 0 auto;
      gap: 20px;
    }

    /* 左侧菜单栏 */
    .sidebar {
  position: fixed; /* 固定定位 */
  width: 3%; /* 保持原有宽度 */
  height: 100vh; /* 高度占满整个视口 */
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
 /* overflow-y: auto;/* 允许左侧栏内部滚动 */
   z-index: 100;/* more菜单不会被tweet-header覆盖 */

}

.logo svg:hover {
      background-color: #eaeaea;
    }


    .nav-links {
      display: flex;
      flex-direction: column;
      position: relative; /* 点击more弹出框位置对齐 */
    }
    .nav-links a {
  display: flex;
  align-items: center;
  padding: 13px;/* 垂直间距 */
  font-size: 21px;/* 文字大小*/
  font-weight: 390;/* 文字粗细 */
  color: #000000;/*文字颜色*/
  border-radius: 9999px;
  transition: background-color 0.2s;
  text-decoration: none;
  margin-bottom: 4px; /* 好像也是垂直间距，这个外部，padding是里面 */
  width:fit-content; /* hover自动适配文字宽度配合after加指定宽度，不过在放大后，也会加宽度不好 */
  white-space: nowrap; /* 新增这行防止文字如 Verified Orgs换行 */
}   .nav-links a:hover {
      background-color: #eaeaea;
    }

    .nav-links svg {
      width: 26px;
      margin-right: 20px; /* 图标和文字间距 */
      text-align: center;
    }

    .post-wrapper {
      margin: 20px 0;/*上下距离*/
      padding-left: 0px; /* 修改post按钮和左边的距离 */
    }

    .post-button {
      width: 180%;
      padding: 17.5px 0;
      background-color: #000000;
      color: #ffffff;
      font-size: 16px;
      font-weight: bold;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
    }

    .post-button:hover {
      background-color: #222222;
    }
    
    .user-info {
     display: flex;
      align-items: center;
      padding: 10px; /* 扩大内边距以扩大hover */
      border-radius: 9999px;
      cursor: pointer;
      transition: background-color 0.2s;
      margin-bottom: 0px; /* 与底部的距离，与内边距会叠加吧 */
  /* 或使用更灵活的定位方式 */
 /*margin-top: auto; /* 自动填充剩余空间 */
    }

    .user-info:hover {
      background-color: #eaeaea;
      width: fit-content; /* 把三个小点包进来 */
    }

    .user-info img {
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      margin-right: 10px;
    }

    .user-details {
      flex-grow: 1;
    }
    .user-name {
      font-weight: 600;
      font-size: 16.5px;
      font-weight: 649;
    }

    .user-handle {
      font-size: 16px;
      color: #71767b;
    }
 /* 点击more弹出*/  
    .dropdown-menu {
  position: absolute;
  bottom: 0%; /* 弹出位置高度 */
  left: 0;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);/* 阴影 */
  z-index: 2000;
  width: auto; /* 自动适配最长文字宽度 */
  min-width: 250%;
}

.dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu ul a span {
  font-size: 21px; /* 修改为你想要的文字大小 */
  font-weight: 649; /* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
}

/* 自定义more菜单中链接的悬停背景色 */
.dropdown-menu a:hover {
  background-color: #f5f5f5 !important; /* hover的颜色 */
  width: auto;/* 避免和.nav-links a一样自动适配文字宽度 */
  border-radius: 4px; /* 避免受border-radius: 9999px;影响 */
}

/* 点击下方用户信息弹出*/  
    .user-menu {
  position: absolute;
  bottom: 2.5%; /* 弹出位置高度 */
  left: 0;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);/* 阴影 */
  padding: 9px 0;
  z-index: 1000;
  width: 175%; 
}

.user-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-menu li {
  padding: 12px 20px;
  font-size: 15px;
  color: #000;
  cursor: pointer;
}

.user-menu li:hover {
  background-color: #f5f5f5;
}

.user-menu ul a span {
  font-size: 15px; /* 修改为你想要的文字大小 */
  font-weight: 650; /* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
  /* white-space: nowrap; 不让文字换行 */
}
/* 自定义more菜单中链接的悬停背景色 */
.user-menu a:hover {
  background-color: #f5f5f5 !important; /* 更换为你想要的颜色 */
}
    /* 主内容区域 */
.main-content {        
  margin-left: 22%; /* 左侧栏宽度 */
  margin-right: 8%; /* 右侧栏宽度 */
  flex-grow: 1;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  max-width: 47%; /* 调整中间区域宽度 */
  min-width: 47%;
 /* overflow-y: auto;  允许中间区域滚动而不是左右跟着一起动，但是这行会导致.tweet-header的sticky失效，好像没这行也能滚动 */
}

    .tweet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 16px;
      margin-bottom: -15px;/* 和头像距离 */
      border-bottom: 1px solid #ffffff;/* 推文头部划分线颜色 */
      position:sticky;/* 固定不随滚动 */
      z-index: 999;
      top: 0;
      background-color: #ffffffcc;/*有点透明的白色 */
      backdrop-filter: blur(12px);
      
    }
    /*手机端头部post下滑时隐藏 */
    .tweet-header.hidden {
  transform: translateY(-100%);
}

    .tweet-header h2 {
      font-size: 20px;
      font-weight: 700;
    }

    .tweet-header .header-user {
      display: flex;
      align-items: center;
      flex-grow: 1;
    }

    .tweet-header .header-user img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .tweet-header .header-stats {
      color: #71767b;
      font-size: 14px;
    }
    .toubupost {
        font-weight: 650; 
        font-size: 20px;
    }
    .youshanghuifu {
      display: flex;             
      align-items: center;
      justify-content: center; 
      margin-left: auto; /* 关键：将元素推向右侧 */
      height: 30px;
      padding: 0 15px; /* 左右内边距决定宽度，替代width更好 */
      border: 1px solid #cccccc;
      border-radius: 25px;
      font-size: 15px;
      font-weight: 649;
      cursor: pointer;
          
    } 
    .youshanghuifu:hover {
      background-color: #eaeaea;    
    }
    .youshangpaixu:hover {
      background-color: #eaeaea;
    }
    
    /* paixu排序下拉菜单样式 */
.paixu {
  position: absolute;
  top: 10px;
  left: auto; /*靠右 */
  right: 10px; /* 从 .main-content 的右边缘向内偏移 5px */
  /*margin-left: 99%; /* 微调间距 */
  width: auto;
   white-space: nowrap;/* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);/* 阴影 */
  z-index: 1000;
}
.paixu ul {
  display: flex;          /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  cursor: pointer;
}
.paixu ul  span {
  display: flex;                /* 改为flex布局，方便右边放打勾 */
  justify-content: space-between;   
  align-items: center;
  position: relative;
  font-size:14.5px; /* 修改为你想要的文字大小 */
  font-weight: 650; /* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
  padding-left: 15px;     /* 用 padding 替代 margin */
  line-height: 3;/* 行高，可以让选项变更大 */
  top: -2.8px;
}
/* 自定义的悬停背景色 */
.paixu a:hover {
  background-color: #f5f5f5 ; 
  width: auto;
}
/*.Sortrepliesby{
    padding: 25px;
    color:#d9d9d9;
    font-size:14.5px;
    
}*/
.checkmark {
  margin-right: 20px;/*打勾位置，一般和Sortrepliesby的padding右边一样*/
  display: flex;
  align-items: center;
}
/* 不影响的标题项 */
.paixu ul .Sortrepliesby {
  cursor: default;    
  pointer-events: none; /* 禁用 hover 和点击事件 */
  font-size:16px;
  font-weight: 400;
  color:#666666;
  padding: 5px 20px 5px 20px;/* 上右下左，Sortrepliesby的边距 */
}

/* 排除标题 span 的 hover 效果 */
.paixu ul span:not(.Sortrepliesby):hover {
  background-color: #f5f5f5;
} 
    
    .tweet-container {
      padding: 12px 16px;
     
    }
    /* 二级评论hover */
    .hover-enabled.tweet-containerb:hover {
     background-color: #f5f5f5;
    }
    
/* 二级评论两头像间竖线 */
.avatar-thread {
  position: relative;
  /*padding-left: 6px; /* 给竖线留出空间 */
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
}

.vertical-line {
  position: absolute;
  top: 50px; /* 从头像底部多少距离开始 */
  left: 19px; /* 与头像居中对齐（40px头像的一半减点） */
  width: 2px;
  /*height: calc(100% + 16px); /* 从底部延伸到下一个头像 */
  background-color: #d3d3d3;
}
/* 最后一个不需要连接线 */
.avatar-thread:last-child .vertical-line {
  display: none;
}


    .tweet-user {
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 12px; /* 推文和头像间距 */
    }

    .tweet-user img:not(.jinbiaoimg):not(.jinbiaoimga):not(.jinbiaoimgb)  {
      width: 40px;   /* 头像大小 */
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
       /* 使用filter实现变暗效果，好像没这个也行主要下面hover */
    transition: filter 0.2s;
    }
  .tweet-user img:hover {
    filter: brightness(85%);
  }
 
    .tweet-user-details{
      flex-grow: 1;
    }   
    .tweet-user-name {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 2px;
      margin-left: -2.3px;
    }
    /* 头像旁蓝标大小 */
    .tweet-user-name svg {
    width: 19px;
    height: 19px;
    margin-bottom: -4px;
  }
  /* 虽然和上面一模一样，但是不可取代 */
  .tweet-user-name3 {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 2px;
      margin-left: -2.3px;
    }
    .tweet-user-name3 svg {
    width: 19px;
    height: 19px;
    margin-bottom: -4px;
  }
  /*推文区头像handle*/
  .tweeta-user-handle { 
    color:#666666; 
    margin-left: -2px;
  }
  .shoujiguanzhu {
   display:none;   
   padding: 3px 12px;   /* 上下和左右 */
   font-size: 13px;
   font-weight: bold;
   border: none;
   background-color: #000000;
   color: white;
   border-radius: 20px;
   margin-bottom: 15px;
   white-space: nowrap; 
  }
  /*弹出卡片和二级区*/
  .tweet-user-handle {
      color: #71767b;
      font-size: 15px;
      margin-left: -3px;
  }
  .hidden-by-default {
  display: none !important;
}
.showaa {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin-top: 10px;
}
  .nounderline {
    text-decoration: none !important; /* 默认状态下不显示下划线 */
    color: inherit; /* 继承父元素的字体颜色 */
}
 .no-underline {
    text-decoration: none; /* 默认状态下不显示下划线 */
    color: inherit; /* 继承父元素的字体颜色 */
}
.no-underline:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
.no-unblock {
    color: white; font-size: 15px;margin-left: 15px;font-weight: 650;
    text-decoration: none; 
}
.no-unblock:hover {
    text-decoration: underline; 
}

    .profile-card {
      position: absolute;
      top:115px;
      right: 51.3%;
      transform: translateX(-50%);
      width: 298px;
      background: white;
      border: 1px solid #ccc;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      display: none;
    }
    .card-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      float: left;
      margin-right: 12px;
    }
     /* 鼠标悬停变暗效果 */
    .card-avatar:hover {
    filter: brightness(85%);
    }
    .card-header {
      display: flex;
      flex-direction: column;  /* 头像文字垂直布局 */
      align-items: left;       /* 头像左侧 */
      text-align: left;
      
    }
    .avatar-follow-row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;  /* 头像和下面名字的间距 */
    }
    .name-username-column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .profile-name {
      font-weight: bold;
      margin-bottom: 2px;
      font-size: 17px;
    }
    .profile-username {
      color: gray;
      font-size: 15px;
      margin-bottom: 8px;
    }

    .profile-bio {
      font-size: 15.2px;
      clear: both;
      margin-top: 12px;
    }
 .profile-summary {
  margin-top: 16px;
  padding-top: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  padding: 8.4px 58px;
  font-size: 15px;
  font-weight: 650;
  color: black;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.profile-summary:hover {
      background-color: #eaeaea;
}
.followbutton {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8.6px 18px;   /* 上下和左右 */
  font-size: 15px;
  font-weight: bold;
  border: none;
  background-color: #000000;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: auto; /* 自动推到最右 */
}
    
    .followbutton:hover {
      background-color: #222222;
    }
    .followbutton.following {
      background-color: white;
      color: #14171a;
      border: 1px solid #ccd6dd;
      padding: 8.4px 13px;
    }
    .followbutton.following:hover {
      background-color: #FADADD;
      color: #e0245e;
      border: 1px solid #f5a3c7;
      padding: 8.4px 18px;
    }

.Grok3:hover{
    background-color: rgba(29, 155, 240, 0.1);
  }
 /* 方法2：通过父链接控制 */
#gengduo:hover svg path {
  fill: #2478ff;
} 

 

 /* xiala下拉菜单样式 */
.xiala {
  position: absolute;
  top: 0%;
  left: auto; /*靠右 */
  right: 1px; /* 从 .main-content 的右边缘向内偏移 5px */
  /*margin-left: 99%; /* 微调间距 */
  width: auto;
   white-space: nowrap;/* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);/* 阴影 */
  z-index: 1000;
}
.xiala svg{ 
 margin-left: 17px;
}
.xiala ul {
  display: flex;          /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  cursor: pointer;
}
.xiala ul  span {
  position: relative;
  font-size:14.5px; /* 修改为你想要的文字大小 */
  font-weight: 650; /* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
  margin-left: 12px;
  margin-right: 20px;
  line-height: 3;/* 行高，可以让选项变更大 */
  top: -2.8px;
}
/* 自定义的悬停背景色 */
.xiala a:hover {
  background-color: #f5f5f5 ; 
}
 /* 头部选项取消按钮*/
.cancel-btn-wrapper {
  display: none;
}
.cancel-btn {
        padding: 12px 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 25px;
        cursor: pointer;
        width:calc(100% - 34px);
        font-size:15px; 
        font-weight:650;
        margin-top: 10px;
        margin-left: 17px;
        margin-right: 17px;
  }

  .cancel-btn:hover {
    background-color: #eaeaea;
  }

  .biaoqian {
    text-decoration: none; /* 默认状态下不显示下划线 */
    color: #1e90ff; /* 继承父元素的字体颜色 */
    font-size: 17px;
}
.biaoqian:hover {
    text-decoration: underline; 
}

    .tweet-time {
      padding: 15px 0;
      font-size: 15px;
      color: #71767b;
      border-bottom: 1px solid #f1f1f1;
    }

    .tweet-content {
      font-size: 20px;
      line-height: 1.5;
    }

    .tweet-media {
      margin-top: 12px;
      margin-bottom: -25px;
      border-radius: 16px;
      overflow: hidden;
    }

    .tweet-media img {
      width: 100%;
      display: block;
    }

    .tweet-stats {
      display: flex;
      padding: 10px 0;
      color: #71767b;
      font-size: 16px;
     margin-left: 65px;
     margin-top: -5px;
     margin-bottom: -13px;
    }

    

    .tweet-actions {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      margin-bottom: -16px;
      border-bottom: 1px solid #f1f1f1;
    }

    .tweet-action {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
   
    .tweet-action span {
      font-size: 14px;
    }
    .tweet-action svg {
      margin-right: -2.5px;
    }
    
    .tweet-action:hover i {
      background-color: rgba(29, 155, 240, 0.1);
      color: #1d9bf0;
    }

    .reply-box {
      display: flex;
      padding: 12px 16px;
      border-bottom: 1px solid #f1f1f1;
    }

    .shurukuangtouxiang img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
    }
    .reply-container {
  display: flex;
  flex-direction: column;
  width: 100%;
   margin-bottom: 5px;  /* 控制整个回复容器与边框的距离 */
}

    .reply-input {
      width: 100%;
     display: flex;
      align-items: flex-start;
      
      
    }

    .reply-input textarea {
      width: 100%;
      background-color: transparent;
      border: none;
      color: black;
      font-size: 21px;
      resize: none;
      outline: none;
      font-weight:490;
      overflow: hidden;  /* 完全隐藏滚动条 */
      font-family: inherit;   /* 继承父元素字体，不然placeholder和输入的字体样式不对 */
      max-height: 200px; /* 最大高度限制,如果你加了padding: 12px 0;则会影响<div class="reply-actions hidden">隐藏时候reply-box分割线距离，系统会根据padding预留一些距离*/
  
    }
     
    .replybutton {
      background-color: black;
      color: white;
      border: none;
      border-radius: 9999px;
      padding: 8px 15px;
      margin-top: 10px;
      font-weight: 650;
      cursor: pointer;
      opacity: 0.5;
      white-space: nowrap;/* 禁止换行避免其他语言换行 */
    }

    .reply-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0px;
      width: 100%;
    }
   .reply-actions.hidden {
    display: none;
   }

    .reply-icons {
      display: flex;
    }

    .reply-icons svg {
      margin-right: 0px;
    }

    .reply-button {
      background-color: black;
      color: white;
      border: none;
      border-radius: 9999px;
      padding: 8px 15px;
      font-weight: 650;
      cursor: pointer;
      opacity: 0.5;
    }

    .reply-button.active {
      opacity: 1;
    }
   
   .reply33 {
      display: flex;
      flex-direction: column;
     /*padding-bottom: 900px;   预留空间但不影响布局结构，可以进入二级评论避免高度不够滚动不到位置，同时避免下拉评论加载间距过大， */
    }
    .reply {
      display: flex;
      padding: 12px 16px;
      border-bottom: 1px solid #f1f1f1;
    }
    .reply:hover{
        background-color:#f5f5f5; 
    }

    .reply-user img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
    }

    .reply-content {
      margin-top: -10px;
      flex-grow: 1; 
      
}


    .reply-header {
      display: flex;
      align-items: center;
      margin-bottom: -7px;
    }

    .reply-name {
      font-weight: 700;
      font-size: 15px;
      margin-right: 4px;
    }

    .reply-handle {
      font-size: 15px;
      color: #71767b;
      margin-right: 4px;
    }

    .reply-time {
      font-size: 15px;
      color: #71767b;
    }

    .reply-text {
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: -3px;
      white-space: pre-line;
      overflow-wrap: break-word; 
      /*max-width: 100%; /* 多少长度 */
     word-break: break-all; /* 更激进的长单词断行 */

    }

    .reply-actions-small {
      display: flex;
      justify-content: space-between;
      width: 96%;         /* 只用 70% 的宽度 */
      gap: 50px;
      padding: 5px 0;
      margin-bottom: -16px;
      margin-left: -12px;
    }
    .reply-actions-smallb {
      display: flex;
      justify-content: space-between;
      width: 96%;         /* 只用 70% 的宽度 */
      gap: 8px;
      padding: 5px 0;
      margin-bottom: -16px;
      margin-left: -12px;
    }
    .reply-action {
      cursor: pointer;
      display: flex;
      align-items: center;

    }
    .reply-action svg {
      margin-right: -4px;
    }
    #huifu:hover{
    background-color: rgba(29, 155, 240, 0.1);
    }
    #huifu:hover path{
     fill: #1d9bf0;
    }
     #huifu:hover + span {
     color: #1d9bf0; 
    }
    .zhuanfa:hover{
      background-color: #e7f9f2;
    }
    #zhuanfa:hover path{
     fill: #02c077;
    }
    #zhuanfa:hover + span {
     color: #02c077; 
    }
    
    .dianzan:hover{
      background-color: #fbe4ed;
    }
    #dianzan:hover path{
     fill: #f82a7d;
    }
    #dianzan:hover + span {
     color: #f82a7d; 
    }
    .tweet-action #huifu:hover + .bookmark-text {
       color: #1d9bf0 !important; /* 使用 !important 确保覆盖内联样式 */
    }
  .fxmobile {
  display: none;
}  
    
/* zhuanfacaidan下拉菜单样式 */
.zhuanfaxuanxiang{
      position: relative;
  }
.zhuanfacaidan {
  display: none;
  position: absolute;
  bottom: auto;
  width: auto;/* 自动宽度 */
  white-space: nowrap; /* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);/* 阴影 */
  z-index: 1000;
}
/* 向上弹出的样式 */
.zhuanfacaidan.drop-up {
  top: auto;
  bottom: 10px; /* 改为在按钮上方 */
}
.zhuanfacaidan svg{ 
 margin-left: 17px;
 margin-top:13px;
}
.zhuanfacaidan ul {
  display: flex;          /* 使用flex布局 */
  cursor: pointer;
}
.zhuanfacaidan ul  span {
  position: relative;
  font-size:14.5px; /* 修改为你想要的文字大小 */
  font-weight:550; /* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
  margin-left: 12px;
  margin-right: 20px;
  line-height: 3;/* 行高，可以让选项变更大 */
  color: #000; /* 纯黑 */
}
/* 自定义的悬停背景色 */
.zhuanfacaidan ul:hover {
  background-color: #f5f5f5 ; 
} 
/* 博主转发定位 */
.zfdwa {
  left:-105px;  
  top: 5px;
}
.zfdw {
  left:-86px;  
  top: 10px;
}
/* 评论区转发定位 */
.zfdwb {
  left:-50px; 
  top: 10px;
} 
.sjzfcancel {
  display: none;
}
.sjzfcancel-btn {
        padding: 12px 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 25px;
        cursor: pointer;
        width: calc(100% - 34px);
        font-size:15px; 
        font-weight:650;
        margin-top: 10px;
        margin-left: 17px;
        margin-right: 17px;
  }

  .sjzfcancel-btn:hover {
    background-color: #eaeaea;
  }

/*分享g菜单样式 */
.fenxiangxuanxiang{
      position: relative;
  }
.fenxiangcaidan {
  position: absolute;
  top: 9px; /* 默认在按钮下方  */
  bottom: auto;
  left: auto; /*靠右 */
  right: 3px; /* 从 .main-content 的右边缘向内偏移 5px */
 /* margin-left: 99%;  微调间距 */
  width: auto;/* 自动宽度 */
  white-space: nowrap; /* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);/* 阴影 */
  z-index: 1000;
}
/* 向上弹出的样式 */
.fenxiangcaidan.drop-up {
  top: auto;
  bottom: 10px; /* 改为在按钮上方 */
}
.fenxiangcaidan svg{ 
 margin-left: 17px;
 margin-top:13px;
}
.fenxiangcaidan ul {
  display: flex;          /* 使用flex布局 */
  cursor: pointer;
}
.fenxiangcaidan ul  span {
  position: relative;
  font-size:14.5px; /* 修改为你想要的文字大小 */
  font-weight: 650;/* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
  margin-left: 12px;
  margin-right: 15px;
  line-height: 3;/* 行高，可以让选项变更大 */
  color: #000; /* 纯黑 */
}
/* 自定义的悬停背景色 */
.fenxiangcaidan ul:hover {
  background-color: #f5f5f5 ; 
}   
.sjfxcancel {
  display: none;
}
.sjfxcancel-btn {
        padding: 12px 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 25px;
        cursor: pointer;
        width: calc(100% - 34px);/* 宽度减去左右 margin */
        font-size:15px; 
        font-weight:650;
        margin-top: 10px;
        margin-left: 17px;
        margin-right: 17px;
  }

  .sjfxcancel-btn:hover {
    background-color: #eaeaea;
  }
/* xialaya下拉菜单样式 */
.pinglunxuanxiang{
      position: relative;
  }
.xialaya {
  position: absolute;
  top: 10px; /* 默认在按钮下方  */
  bottom: auto;
  left: auto; /*靠右 */
  right: 3px; /* 从 .main-content 的右边缘向内偏移 5px */
 /* margin-left: 99%; /* 微调间距 */
  width: auto;/* 自动宽度 */
  white-space: nowrap; /* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);/* 阴影 */
  z-index: 1000;
}
/* 向上弹出的样式 */
.xialaya.drop-up {
  top: auto;
  bottom: 10px; /* 改为在按钮上方 */
}
.xialaya svg{ 
 margin-left: 17px;
}
.xialayaya ul {
  display: flex;          /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  cursor: pointer;
}
.xialaya ul  span {
  position: relative;
  font-size:14.5px; /* 修改为你想要的文字大小 */
  font-weight: 650; /* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
  margin-left: 12px;
  margin-right: 15px;
  line-height: 3;/* 行高，可以让选项变更大 */
  top: -2.8px;
}
/* 自定义的悬停背景色 */
.xialaya ul:hover {
  background-color: #f5f5f5 ; 
}  

.sjplcancel {
  display: none;
}
.sjplcancel-btn {
        padding: 12px 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 25px;
        cursor: pointer;
        width: calc(100% - 34px);
        font-size:15px; 
        font-weight:650;
        margin-top: 10px;
        margin-left: 17px;
  }

  .sjplcancel-btn:hover {
    background-color: #eaeaea;
  }
    /* 右侧栏 */
    .right-sidebar {
  position: fixed; /* 固定定位 */
  top: 0;
  right: 37.5%; /* 和中间栏的间距 */
  width: 7.5%; /* 保持原有宽度 */
  height: 100vh; /* 高度占满整个视口 */
  padding: 0 16px;
  background-color: #ffffff;
  overflow-y: auto; /* 允许右侧栏内部滚动 */
 
}
/* 视觉上隐藏滚动条*/
.right-sidebar::-webkit-scrollbar {
  display: none; 
}
    .search-container {
      position: relative;
      background-color: #ffffff;
      border-radius: 9999px;
      padding: 10px 3px;  /* 前一个是搜索框上下高度，后一个里面文字搜索的左右位置 */
      border: 1px solid #cccccc;
      margin-top: 5px;
    }
    /* 进入搜索框改变颜色 */
    .search-container:focus-within {
      border: 2px solid #1da1f2; 
     }

    .search-container svg {
      position: absolute;
      left: 15px;
      top: 13.5px;
     /*  color: #71767b;搜索放大镜图的颜色*/
    }
 .search-container input {
      background-color: transparent;
      border: none;
      color: black;/* 输入的文字颜色 */
      font-size: 15px;
      margin-left: 32px;
      width: calc(100% - 32px);
      outline: none;
    }
    .search-container input::placeholder {
      font-size: 13.5px;
      color: black;
    }

    .trends-section {
      border-radius: 16px;
      margin-top: 16px;
      border: 1px solid #f1f1f1; /* 添加边框和颜色 */
    }

    .trends-header {
      padding: 12px 16px;
      font-size: 20px;
      font-weight: 700;
    }

    .trend-item {
      position: relative;
      padding: 12px 16px;
      cursor: pointer;
      transition: background-color 0.2s;
      
    }

    .trend-item:hover {
      background-color: #f5f5f5;
    }

    .trend-category {
      font-size: 13px;
      color: #71767b;
      margin-bottom: 4px;
    }

    .trend-name {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 4px;
    }

    .trend-count {
      font-size: 13px;
      color: #71767b;
    }
.trend-options {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
}
/* youceoxx 下拉菜单样式 */
  .youcexx {
  position: absolute;
  margin-top: -55px;
  left: auto; /*靠右 */
  width: auto;
  white-space: nowrap;/* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);/* 阴影 */
  z-index: 1000;
}
.youcexx ul {
  display: flex;       
  flex-direction: column; 
  cursor: pointer;
}
.youcexx svg{ 
 margin-left: 15px;
}
.youcexx ul  span {
  /*display: relative; */
  justify-content: space-between;   
  align-items: center;
  position: relative;
  font-size:14.5px; 
  margin-right: 20px;/*文字与右边空出距离 */
  font-weight: 650; 
  padding-left: 15px;     /* 用 padding 替代 margin */
  line-height: 3;/* 行高，可以让选项变更大 */
}
/* 自定义的悬停背景色 */
.youcexx li:hover {
  background-color: #f5f5f5 ; 
  width: auto;
}


    .show-more {
      padding: 16px;
      color: #1d9bf0;
      font-size: 15px;
      cursor: pointer;
    }
    
/* youcemore 下拉菜单样式 */
  .youcemore {
   display: none;   
  position: absolute;
  top: 40px;
  width: auto;
  left: 45px;
  white-space: nowrap;/* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);/* 阴影 */
  z-index: 1000;
}
.youcemore.drop-up {
  top: auto;
  bottom: 30px; /* 改为在按钮上方 */
}
.youcemore ul {
  display: flex;       
  flex-direction: column; 
  cursor: pointer;
}
.youcemore ul  span {
  display: relative; 
  justify-content: space-between;   
  align-items: center;
  position: relative;
  font-size:14.5px; 
  margin-right: 20px;/*文字与右边空出距离 */
  font-weight: 650; 
  padding-left: 15px;     /* 用 padding 替代 margin */
  line-height: 3;/* 行高，可以让选项变更大 */
}
/* 自定义的悬停背景色 */
.youcemore li:hover {
  background-color: #f5f5f5 ; 
  width: auto;
}   
    

    .who-to-follow {
      position: relative;
      background-color: #ffffff;
      border-radius: 16px;
      margin-top: 16px;
      border: 1px solid #f1f1f1; /* 添加边框和颜色 */
    }

    .who-to-follow-header {
      padding: 12px 16px;
      font-size: 20px;
      font-weight: 700;
    }

    .follow-item {
      display: flex;
      padding: 12px 16px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .follow-item:hover {
      background-color: #f5f5f5;
    }

    .follow-item img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 12px;
    }

    .follow-info {
      flex-grow: 1;
      min-width: 0;/* 文字才能换行 */
    }

    .follow-name {
      font-weight: 700;
      font-size: 15px;
    }

    .follow-handle {
      font-size: 15px;
      color: #71767b;
    }
    
.follow-button {
  position: absolute;
  top: 65px;
  right: 14px;
  padding: 7px 18px;   /* 上下和左右 */
  font-size: 14px;
  font-weight: bold;
  border: none;
  background-color: #000000;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: auto; /* 自动推到最右 */
}
   .follow-button:hover {
      background-color: #222222;
    }
    .follow-button.following {
      background-color: white;
      color: #14171a;
      border: 1px solid #ccd6dd;
      padding: 7px 18px;
    }
    .follow-button.following:hover {
      background-color: #FADADD;
      color: #e0245e;
      border: 1px solid #f5a3c7;
      padding: 7px 18px;
    }
   .youcejianjie {
  font-size: 13px;
  margin-top: 5px;
  line-height: 1.4;
  word-wrap: break-word; /* 长单词强制换行 */
}
    .footer-links { 
      position: relative;
      padding: 12px 16px;
      font-size: 13px;
      color: #71767b;
    }

    .footer-links a {
      color: #4a4f55;
      text-decoration: none;
      line-height: 1.8;
    }

    .footer-links a:hover {
      text-decoration: underline;
    }
    /*所有链接前加竖线，除了最后两个 */
   .footer-links a:not(.no-divider):not(:last-child)::after {
  content: "|";
  margin-left: 7px;
  margin-right: 7px;
  color: #999;
}
    
    .tweet-content-custom {
      font-size: 17px;  /* 推文文字大小 */
      line-height: 1.5;
      margin-bottom: 12px;
      word-wrap: break-word;/*长单词换行，避免手机端超出*/
    }
    .tweet-content-collapsed {
  max-height: 12em; /*隐藏文字最大高度 */
  overflow: hidden;
  position: relative;
}

.show-more-btn {
  display: block;
  margin-top: -10px;
  margin-left: 50px;
  color: #1e90ff;
  font-size: 15px;
  cursor: pointer;
}
.show-more-btn:hover {
    text-decoration: underline;
}
 


    .tweet-user2 {
      display: flex;
      align-items: center;
    }
    .tweet-user2 img {
      width: 25px;   /* 头像大小 */
      height: 25px;
      border-radius: 50%;
      margin-bottom: 18px;
      margin-right: 10px;
       /* 使用filter实现变暗效果，好像没这个也行主要下面hover */
    transition: filter 0.2s;
    }
 
   .tweet-user-details2{
      flex-grow: 1;
    }   
    .tweet-user-name2 svg {
    width: 19px;
    height: 19px;
    margin-bottom: -4px;
  }
    .tweet-user-name2 {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 2px;
      margin-left: -2.3px;
    }
    .tweet-user-handle2{
      font-size: 15px;
      margin-left: -33px;
      color: #666666;
  }
 /* 聊天框 */
 .floating-box {
      position: fixed;
      bottom: 13px;
      right: 20px;
      background-color: white;
      border-radius: 15px;
      padding: 10px;
      box-shadow: 0px 0px 2.5px rgba(33, 81, 176, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 55px;
      z-index: 1000;
      cursor: pointer;
    }
    .floating-box:hover{
         background-color: #ebf6ff;
    }
    #chat-box {
      display: none;
      position: fixed;
      bottom: 10px;
      right: 20px;
      width: 400px;
      height: 80%;
      background-color: #ffffff;
      border-radius: 16px;
      box-shadow: 0 0px 1.8px rgba(0,0,0,0.5);
      overflow: hidden;
      z-index: 1000;
    }

    #chat-header {
      padding: 8px 6px;    
      background-color: #ffffff;
      display: flex;
      align-items: center;
      margin-bottom: 10px;/* 和下面头像简介框距离*/
    }

    #chat-messages {
       display: flex;
       flex-direction: column; /* 垂直排列消息 */
      height: 75%;
      padding: 15px; /* 影响到文字和左边间距 */
      overflow-y: auto;
      font-size: 14px;
      background-color: #ffffff;/* 聊天背景颜色*/
    }
    
   #text2 {
    white-space: pre-line; /* 可以换行 */
    margin-bottom: 20px;  /* 控制和下一条消息高距 */
   }
   #chat-input {
      display: flex;
     position: fixed; 
     bottom: 25px; 
     width: 360px;
     z-index: 1000;
     
      flex: 1;
      padding:25px;
      border: none;
      border-radius: 25px;
      background-color: #fafafa;/* 输入框内颜色*/
      color: black;  /* 输入的文字体颜色*/
      border: 1px solid #eaeaea;
    }

    #chat-input textarea {
     margin-left: -5px;
     padding-bottom: 20px; 
     width: 360px;
     font-size:15.5px;
     background-color: #fafafa;
     border: none;
     outline: none;/* 移除聚焦时的外边框 */
      white-space: pre-wrap; /* 允许换行 */
      word-wrap: break-word; /* 长单词强制换行 */
      resize: none; /* 防止用户手动调整大小 */
      overflow-y: auto;     /* 不显示滚动条 */
      resize: none;         /* 禁止用户拖动改变大小（可选） */
      max-height: 180px; /* 最大高度限制 */
      font-family: inherit; /* 继承父元素字体，不然和原网差距大 */
    }
    
    #chat-input textarea:focus {
      outline: none;
    } 

    #chat-input button {
      position: absolute;
      right: 10px; /* 按钮距离右边的距离 */
      bottom: 10px;
      width: 31px; /* 或其他数值，根据你想要的圆大小调整 */
      height: 31px;
      background-color: #888888;
      border: none;
      border-radius: 50%;
    }
    
   #chat-input button {
      background-color: #888888;
      transition: background-color 0.3s ease;
    }

    #chat-input button.hover-effect {
      background-color: black; /* hover 颜色 */
      cursor: pointer;
    }

    
    .liaotian {
      position:absolute;
      height: 31.5px;
      background-color: #fafafa;
      border: 1px solid #cccccc;
      border-radius: 50%;
      cursor: pointer;
    } 
    
    .liaotian:hover{
         background-color: #e0e0e0;
    }
    
    .liaotian2 {
      position: absolute;
      height: 32px;
      width: 74px;
      background-color: #c8e9f9;
      border: 1px solid #eaeaea;
      border-radius: 25px;
      cursor: pointer;
          
    }
    .liaotian2:hover {
      background-color: #d5effb;    
    }
    .liaotian3 {
      position: absolute;
      height: 32px;
      width: 114px;
      background-color: #c8e9f9;
      border: 1px solid #eaeaea;
      border-radius: 25px;
      cursor: pointer;
        
    }
    .liaotian3:hover {
      background-color: #d5effb;    
    }
   .heiseBtn { 
       padding: 14px 0;
        color: white;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        width: 90%;
        font-size:15px; 
        font-weight:750;
   }
   .heiseBtn:hover {
    background-color: #222222;
  }
   .baiseBtn { 
        padding: 14px 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 25px;
        cursor: pointer;
        width: 90%;
        font-size:15px; 
        font-weight:750;
        margin-bottom: 11px;
   }
   .baiseBtn:hover {
    background-color: #eaeaea;
  }
  /*上传的图片样式*/
.preview-wrapper {
  position: relative;
  display: inline-block;
}

.preview-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  object-fit: cover;
  transition: transform 0.2s;
}
.remove-image {
  position: absolute;
  top: 6px;
  right: 6px;
  background:#2f2f2f;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 10px;/*x的大小，用svg就没用了*/
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.remove-image:hover {
  background:#4d4d4d;
}
.edit-image {
  position: absolute;
  top: 6px;
  left: 6px;
  background:#2f2f2f;
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 13px;
   font-weight: bold;
  padding: 9px 18px;
  cursor: pointer;
  z-index: 2;
}
.editimage {
  position: absolute;
  top: 6px;
  left: 6px;
  background:#4a4a4a;
  border: none;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  z-index: 2;
}
.edit-image:hover {
  background:#4d4d4d;
}
/*回复框grok*/
.grokxuanxiang {
      position: relative;
  }
.grokxuanxiang:hover{ 
    background-color: rgba(29, 155, 240, 0.1);
  }  
.grokcaidan {
  position: absolute;
  top: 0px; /* 默认在按钮下方  */
  bottom: auto;
  /*left: -50px;          /* 靠左对齐 */
  width: auto;/* 自动宽度 */
  white-space: nowrap; /* 防止文字换行 */
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;/* 避免hover时候变成直角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);/* 阴影 */
  z-index: 1000;
}
.grokcaidan svg{ 
 margin-left: 17px;
 margin-top:13px;
}
.grokcaidan ul {
  display: flex;          /* 使用flex布局 */
  cursor: pointer;
}
.grokcaidan ul  span {
  position: relative;
  font-size:14.5px; /* 修改为你想要的文字大小 */
  font-weight:650; /* 修改为你想要的文字粗细，如 normal / bolder / 700 等 */
  line-height: 3;/* 行高，可以让选项变更大 */
  margin-left: -3px;
  margin-right: 17px;
  color: #000; /* 纯黑 */
}
/* 自定义的悬停背景色 */
.grokcaidan ul:hover {
  background-color: #f5f5f5 ; 
} 

/* 回复弹窗 */
  .hhftc{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: flex-start; 
  padding-top: 50px;  
  z-index: 2000;
  }
  .hhftch{
  background: white; 
  padding: 20px 20px 0px 20px;
  border-radius: 12px;
  width: 90%; 
  max-width: 580px;
  max-height: 90vh; 
  overflow-y: auto;
  position: relative;
  }
  /*手机端返回按钮*/
  .sjfh {
  display:none;    
  text-decoration: none; 
  color: inherit;
  margin-Top :-10px;
  }
  /*头像名字和上面间距 */
  .tbjianju{ 
      margin-top: 45px;
  }
#closeHuifu {
    position: absolute;
    top: 6px;
    left: 10px;
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    width: 35px;
    height: 35px;
   display: flex; 
   align-items: center; 
   justify-content: center;
    transition: background-color 0.2s;
  }
 
#closeHuifu:hover {
    background-color:#eaeaea; /* 浅灰色背景 */
    border-radius: 50%;
  }

.drafts-pc {
  position: absolute;
  top: 8px;
  right: 15px;
  padding: 5px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #1d9bf0; /* Twitter默认灰色 */
  border-radius: 9999px; /* 椭圆边框 */
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.drafts-pc:hover {
  background-color: rgba(29, 155, 240, 0.12); /* 浅蓝背景 */
}
.drafts-mobile {
  position: static;
  top: 10px;
  font-size: 14px;  
  padding: 5px 16px;
  font-weight: 500;
  color: #1d9bf0; /* Twitter默认灰色 */
  border-radius: 9999px; /* 椭圆边框 */
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.drafts-mobile:hover {
  background-color: rgba(29, 155, 240, 0.12); /* 浅蓝背景 */
}
.huifuneirong {
      font-size: 15px;  /* 推文文字大小 */
      line-height: 1.5;
      margin-Left : 50px;
      margin-Top :-25px;
      word-wrap: break-word;
}     
 
.huifu-actions {
      display: flex;
      position: sticky;
      bottom: 0px; /* 需要top或bottom，不然只有sticky不能固定 */
      margin-top: 50px;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background-color:white;
      padding: 10px;/*注意发现如果贴不到最底部跟最上层的有关系<div style="background: white; padding: 20px 20px 0px 20px; */
      z-index: 3000;
    }
/* 回复弹窗两头像间竖线 */
.huifu-thread {
  position: relative;
  /*padding-left: 6px; /* 给竖线留出空间 */
}

.huifu-img {
}

.huifu-line {
  position: absolute;
  top: 43.5px; /* 从最下面头像底部多少距离开始 */
  left: 19px; /* 与头像居中对齐（40px头像的一半减点） */
  width: 2px;
  /*height: calc(100% + 16px); /* 从底部延伸到下一个头像 */
  background-color: #d3d3d3;
}
/* 最后一个不需要连接线 */
.huifu-thread:last-child .huifu-line {
  display: none;
}  
.btn-showmore {
  display: block;
  margin-top: 1px;
  margin-left: 50px;
  color: #1e90ff;
  font-size: 15px;
  cursor: pointer;
}
.btn-showmore:hover {
    text-decoration: underline;
}
.huifuneirong.huifuneirong-collapsed{
  max-height: 16em; /*隐藏文字最大高度 */
  overflow: hidden;
  position: relative;
}
 /* 回复框下面图标 */
 #uploadIcon:hover{
     background-color: rgba(29, 155, 240, 0.1);
}
 #uploadIconb:hover{
     background-color: rgba(29, 155, 240, 0.1);
}
/* 回复框手机端按钮 */
.mobile-buttons-container {
  display: none; /* 默认隐藏，手机端显示 */
  position: absolute;
  top: 9px;
  right: 15px;
  gap: 5px;
  align-items: center;
}

.sjreply-button {
      position: static; /* ，交给 flex 管控 */
      background-color: #1DA1F2;
      top: 9px;
      color: white;
      border: none;
      border-radius: 9999px;
      padding: 6px 15px;
      font-size: 14px;
      font-weight: 650;
      cursor: pointer;
      opacity: 0.5;
    }

    .sjreply-button.active {
      opacity: 1;
    }
.Replyingto {   
    font-size: 15px;
    margin-left: 50px;
    margin-top: 8px;
    display: inline-block;
  white-space: normal;
  word-break: break-word;
    
}  
/* 通知样式*/ 
    .tongzhiyangshi {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color:#1488f5;
        font-size: 14.6px;
        color: white;
        padding: 8px 24px;
        border-radius: 4px;
        z-index: 9999;
        animation: fadeInOut 3s ease-in-out;
    }    
  
 /* 手机底部菜单*/ 
  .mobile-footer {
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ffffff;
  border-top: 0.3px solid #ccc;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
}

/* 图标按钮样式 */
.footer-btn svg {
  width: 26px;
  height: 26px;
  fill: #333;
  cursor: pointer;
}
.mobile-footer.transparent {
  background-color: rgba(255, 255, 255, 0.6); /* 更透明背景 */
  opacity: 0.6; /* 整体透明度降低 */
  transition: background-color 1s ease, opacity 1s ease;
}

.mobile-footer.transparent .footer-btn svg {
  fill: #999; /* 图标颜色变淡 */
  transition: fill 1s ease;
}
/* 手机右下角回复按钮 */
.sjhuifu-box {
      display:none;
      position: fixed;
      bottom: 68px;
      right: 20px;
      background-color: #1DA1F2;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0px 0px 2.5px rgba(33, 81, 176, 1);
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      z-index: 999;
      opacity: 1; /* 初始为不透明 */
      transition: opacity 0.3s ease;
    }
 /* 推特加载转圈 */   
.twitter-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #d2ecfc;/* 圈的粗细和颜色 */
  border-top-color: #1da1f2; 
  border-radius: 50%;
  animation: spin 0.8s linear infinite;/* 转圈速度 */
  margin: 60px auto; /*60上下间距，auto左右居中 */
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*注意样式会影响到所有小于等于当前分辨率的屏幕，当多个媒体查询匹配时，后面的规则会覆盖前面的规则。如果没有正确限定范围，样式会"泄漏"到小于当前分辨率的分辨率中 */    
@media (max-width: 3840px) {
    .nav-links a {
        padding: 13px;
    }
    .content-wrapper {
    width: 33%;
    max-width: 33%;
  }
    .sidebar {
    width: 6%; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 33.3%;
    width: 10%; 
  }
  .post-button {
      width: 115%;}
 
  .user-menu {
    bottom: 4.5%;
    width: 126%;
  }
  .dropdown-menu {
  min-width: 153%; 
  } 

}
@media (min-width:2901px) and (max-width: 3350px)  {
    .nav-links a {
        padding: 13px;
    }
    .content-wrapper {
    width: 45%;
    max-width: 45%;
  }
    .sidebar {
    width: 6%; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 27.5%;
    width: 13.5%; 
  }
  .post-button {
      width: 158%;
      
  }
 .dropdown-menu {
  min-width: 220%; 
  }
  .user-menu {
    bottom: 6%;
    width: 173%;
  }
}
/*浏览器百分67*/
@media (max-width: 2900px) {
    .nav-links a {
        padding: 13px;
    }
    .content-wrapper {
    width: 45%;
    max-width: 45%;
  }
    .sidebar {
    width: 6%; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 27.5%;
    width: 13.5%; 
  }
  .post-button {
      width: 158%;
      
  }
.dropdown-menu {
  min-width: 220%; 
  }
  .user-menu {
    bottom: 6%;
    width: 173%;
  }
 
}
@media (min-width:2561px) and (max-width: 2769px) {
    .nav-links a {
        padding: 13px;
    }
    .content-wrapper {
    width: 45%;
    max-width: 45%;
  }
    .sidebar {
    width: 6%; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 27.5%;
    width: 13.5%; 
  }
  .post-button {
      width: 158%;
      
  }
  .dropdown-menu {
  min-width: 220%; 
  }
  .user-menu {
    bottom: 6%;
    width: 173%;
  }
  
}
/*75?*/
@media  (max-width: 2560px) {
    .nav-links a {
        padding: 13px;
    }
    .content-wrapper {
    width: 50%;
    max-width: 50%;
  }
    .sidebar {
    width: 6%; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 25%;
    width: 15%; 
  }
  .post-button {
      width: 182%;}
.dropdown-menu {
  min-width: 250%; 
  }
  .user-menu {
    bottom: 6.5%;
    width: 190%;
  }
  
}
/*80?实际上这种你输入不同分辨率差异还是很大*/
@media (min-width:2375px) and (max-width: 2559px) {
    .nav-links a {
        padding: 13px;
    }
    .content-wrapper {
    width: 53.5%;
    max-width: 53.5%;
  }
    .sidebar {
    width: 6%; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 23%;
    width: 16%; 
  }
  .post-button {
      width: 200%;}
  .user-menu {
    bottom: 9%;
    width: 208% ;
  }
  .dropdown-menu {
  min-width: 270%; 
  }
}
 /*90?*/
@media (min-width: 1921px) and (max-width: 2374px) {
    .nav-links a {
        padding: 13px;
    }
    .content-wrapper {
    width: 60%;
    max-width: 60%;
  }
    .sidebar {
    width: 6%; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 19.9%;
    width: 18%; 
  }
  .post-button {
      width: 230%;}
  .dropdown-menu {
  min-width: 300%; 
  }
  .user-menu {
    bottom: 9%;
    width: 230% ;
  }
 
}



@media (max-width: 1920px) {
     /* 隐藏主菜单中的Lists链接 下面其它分辨率好像不用写*/
    .nav-links a[href*="/lists"] {
        display: none !important;
    }
    /* 显示下拉菜单中的Lists链接 */
    .dropdown-menu a[href*="/lists"] {
        display: flex !important;  /* 使用flex以保持原有布局 */
    }
    
    .content-wrapper {
    width: 67%;
    max-width: 67%;
  }
    .sidebar {
    width: 12%; 
  }
  .nav-links a {
    padding: 13px; 
  }
  .main-content {
    margin-left: 22%; 
    max-width: 47%; 
    min-width: 47%;
  }
  .right-sidebar {
    right: 16.5%; /* 和中间栏的间距 不知为什么只写这个下面不写也都可以？*/
    width: 20%; /* 适当缩小右侧栏 */
  }
  .post-wrapper {
      margin: 20px 0;/*post上下距离*/
    }
  .post-button {
      width:115%;}
.dropdown-menu {
  min-width: 155%; 
  }
  .user-menu {
    width: 127%;
  }

  
}
/* 110 %*/
@media (max-width: 1800px) {
    .nav-links a {
    padding: 9px; 
  }
  
  /* 调整整体布局比例 */
  .content-wrapper {
    width: 73%;
    max-width: 73%;
  }
  .sidebar {
    width: 11%; 
  }
  /* 调整中间内容区域 */
  .main-content {
    margin-left: 21.7%; /* 与左侧栏新宽度一致 */
    max-width: 47.5%; /* 增加中间区域占比 */
    min-width: 47.5%;
  }
   /* 调整右侧栏宽度 */
  .right-sidebar {
     right: 13%;  
    width: 22.3%; /* 适当缩小右侧栏 */
  }
   .post-wrapper {
      margin: 9px 0;/*post上下距离*/
    }
  .post-button {
      width: 140%;
  } 
  .user-menu {
      bottom: 13.5%;
      width: 155%;
  }
  .dropdown-menu {
  min-width: 190%; 
  }
}
/* 125 %*/
@media (max-width: 1700px) {
    
     .nav-links a[href*="/bookmarks"],.nav-links a[href*="/jobs"]  {
        display: none !important;
    }
    /* 显示下拉菜单中的Lists链接 */
    .dropdown-menu a[href*="/bookmarks"],.dropdown-menu a[href*="/jobs"] {
        display: flex !important;  /* 使用flex以保持原有布局 */
    }
  /* 调整导航链接宽度 */
  .nav-links a {
    padding: 9px;
  }

  /* 调整整体布局比例 */
  .content-wrapper {
    width: 83%;
    max-width: 83%;
  }
  
  /* 调整左侧栏宽度 */
  .sidebar {
    width: 11%; /* 缩小左侧栏宽度 */
  }
  
  /* 调整中间内容区域 */
  .main-content {
    margin-left: 21.7%; /* 与左侧栏新宽度一致 */
    max-width: 47.6%; /* 增加中间区域占比 */
    min-width: 47.6%;
  }
   /* 调整右侧栏宽度 */
  .right-sidebar {
    right: 8.1%;  
    width: 25%; /* 适当缩小右侧栏 */
  }
  .post-wrapper {
      margin: 10px 0;
      padding-left: 0px; /* 修改post按钮和左边的距离 */
    }
  .post-button {
      width: 162%;
      
  }
  .dropdown-menu {
  min-width: 220%; 
  }   
  .user-menu {
    bottom: 12%;
    width: 175%;
  }
  
}
@media (max-width: 1400px) {
    
 /* 隐藏导航链接中的文字 */
.nav-links > a > span {
    display: none;
}
.nav-links svg {
    margin-left:2px; 
  }
/* 保留下拉菜单中的文字 */
.dropdown-menu a span {
    display: inline !important;
}
  .nav-links a[href*="/bookmarks"],.nav-links a[href*="/jobs"],.nav-links a[href*="/premium_sign_up"],.nav-links a[href*="/verified-orgs-signup"]  {
        display: none !important;
    }
    /* 显示下拉菜单中的Lists链接 */
    .dropdown-menu a[href*="/bookmarks"],.dropdown-menu a[href*="/jobs"],.dropdown-menu a[href*="/premium_sign_up"],.dropdown-menu a[href*="/verified-orgs-signup"] {
        display: flex !important;  /* 使用flex以保持原有布局 */
    }
  /* 调整导航链接宽度 */
  .nav-links a {
    padding: 10px; 
    
  }

  /* 调整整体布局比例 */
  .content-wrapper {
    width: 84%;
    max-width: 84%;
  }
  
  /* 调整左侧栏宽度 */
  .sidebar {
    width: 5%; /* 缩小左侧栏宽度 */
  }
  
  /* 调整中间内容区域 */
  .main-content {
    margin-left: 7.6%; /* 与左侧栏新宽度一致 */
    max-width: 56.3%; /* 增加中间区域占比 */
    min-width: 56.3%;
  }
   /* 调整右侧栏宽度 */
  .right-sidebar {
    right: 6.9%;  
    width: 30.3%; /* 适当缩小右侧栏 */
  }
  .post-wrapper {
      margin: 5px 0;
      padding-left: 0px; /* 修改post按钮和左边的距离 */
    }
  .post-button {
        display: none; /* 隐藏原来的按钮 */
    }
    .post-image-button {
    display: block !important;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
  }
  
.post-image-button circle {
    fill: black;
    transition: fill 0.2s ease;
  }

  .post-image-button:hover circle {
    fill: #222222;
  }
  
  .user-details {
    display: none !important;
  }
  
  /* 隐藏省略号*/
  .user-info i.fas.fa-ellipsis-h {
    display: none !important;
  }
   .dropdown-menu {
  min-width: auto; 
  bottom: -5%;
  }
  .user-menu { 
    bottom: 15%; 
    width: auto;
  }

  
}

 
/* 移动手机端*/
   @media (min-width:0px) and (max-width: 1000px) {
   .content-wrapper {
    width: 100%;
    max-width: 100%;
  }
  .main-content { 
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .sidebar,
  .right-sidebar,
  .floating-box,
  .youshanghuifu,
  .youshangpaixu,
  .sjhfkuang {
    display: none;
  }
  /* 将简介卡片完全不占空间*/
  .profile-card {
    width: 0 ;
    height: 0 ;
    padding: 0 ;
    border: none;
    box-shadow: none ;
    overflow: hidden;
    pointer-events: none;
    }
  /* 手机头部关注按钮*/
  .shoujiguanzhu {
    display: inline-block;  
  }
  
  /* 底部菜单 */
  .mobile-footer {
    display: flex;
  } 
  /* 头部post文字大小 */
  .toubupost {
        font-size: 16px;
    }
    /* 头部handle文字大小*/
    .tweeta-user-handle {
        font-size: 14px;
    }
    /* 头部选项*/
    .xiala {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100vw;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 0;
    z-index: 1000;
    white-space: normal;
    overflow: auto;
  }
  .xiala ul a{ 
  margin-top: -5px;
}
/* 头部选项取消按钮*/
.cancel-btn-wrapper {
    display: flex;
}
/*时间文字大小*/
.tweet-time {
      font-size: 14px;
    }
    /*博主图标文字大小*/
  #zhuyehuifu svg {
    width: 32px;
    height: 32px;
  }
  #huifu-count {
    font-size: 13px;
  }
   #zhuanfa-action svg {
    width: 32px;
    height: 32px;
  }
  #zhuanfa-count {
    font-size: 13px;
  }
   #dianzan-action svg {
    width: 32px;
    height: 32px;
  }
  #dianzan-count {
    font-size: 13px;
  }
   #shuqian-action svg {
    width: 32px;
    height: 32px;
  }
  #bookmark-count {
    font-size: 13px;
  }
  
  
  /*博主转发菜单*/
  .zhuanfacaidan {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100vw;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 0;
    z-index: 1000;
    white-space: normal;
    overflow: auto;
  }
  .zhuanfacaidan.drop-up {
  bottom: 0; 
}
.zhuanfacaidan ul { 
  margin-top: -5px;
}
 .sjzfcancel {
    display: flex;
}

#Repost svg {
    width: 18px;
    height: 18px;
  }
#Quote svg {
    width: 18px;
    height: 18px;
  }  
#ViewQ svg {
    width: 18px;
    height: 18px;
  }   
  

  /*评论区图标文字大小*/
  .reply-action svg {
    width: 30px;
    height: 30px;
  }
  .bookmark-wrapper svg {
    width: 30px;
    height: 30px;
  }
  .sjtwo svg {
    width: 30px;
    height: 30px;
  }
  .sjthree {
    font-size: 13px;
  }
  
    /* grok聊天框*/
    #chat-box {
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     width: 100%;
     height: 100%;
     border-radius: 0px;
    }
    #chat-messages {
      height: 65%;
    }
     #chat-input {
       width: calc(100% - 30px);/* 宽度减去左右*/
       left: 15px;
       right: 15px;
       bottom: 15px; 
    }
    /* 推文文字大小 */
    .tweet-content-custom {
      font-size: 16px;  
      line-height: 1.5;
    }
    .biaoqian {
    font-size: 16px;
   }
  /* 设置手机端评论区名字长度 */
  .reply-name {
      overflow: hidden;/* 超出隐藏 */
     text-overflow: ellipsis;/* 末尾省略号 */
      max-width: 100px;/* 控制最大宽度，根据你设计调整 */
      white-space: nowrap;
    }
    .reply-handle {
      overflow: hidden;/* 超出隐藏 */
     text-overflow: ellipsis;/* 末尾省略号 */
      max-width: 70px;
      white-space: nowrap;
    }
    /* 评论区下面图标间距*/ 
    .reply-actions-small {
      gap: 22px;
    }
/* 回复弹窗*/
    .hhftc{
  padding-top: 0px;
  }
    .hhftch{
  width: 100%;
  max-width: 100%;/* 最大宽度会影响上面宽度*/
  max-height: 100%;/* 最大高度会影响下面padding的底部长度*/
  padding: 20px 20px 100% 20px;
  border-radius: 0px;
  z-index: 2000;
  }
  /* 回复弹窗底部图标不固定*/
  .huifu-actions {
  position: static;
  } 
  /* 回复弹窗上传的图片改成没有边框和阴影*/
  .preview-image {
  border: none;
  box-shadow: none;
}
/* 关闭和返回按钮*/
#closeHuifu {
  display: none;
}
.sjfh{
    display:inline-block;  
  }
.reply-button {
  display: none;
 }
 .mobile-buttons-container {
    display: flex;
  }
 .drafts-pc {
    display: none;
  }
 
 
 .huifuneirong {
   font-size: 14px;
 } 
 .btn-showmore {
   font-size: 14px;
 } 
 .Replyingto {
   font-size: 14px;
 } 
 .sjplaceholder textarea::placeholder {
  color:black;
  font-size: 18px;
  font-weight: 400;
}
/*隐藏弹窗表情*/
.sjtcbq {
    display: none;
  }
.tbjianju{ 
      margin-top: 25px;
  }
  /*分享切换*/
.fxdesktop {
    display: none;
  }
.fxmobile {
    display: inline-block;
  }  
.fenxiangcaidan {  
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100vw;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 0;
    z-index: 1000;
    white-space: normal;
    overflow: auto;
  }
  .fenxiangcaidan.drop-up {
  bottom: 0; 
}
.fenxiangcaidan ul { 
  margin-top: -5px;
}
 .sjfxcancel {
    display: flex;
}
#fuzhi svg {
    width: 18px;
    height: 18px;
  }  
#svdm svg {
    width: 18px;
    height: 18px;
  }
/*右下角恢复按钮，在通知函数里自动调整底部高度*/  
.sjhuifu-box { 
    display: flex;
}
/*评论区下拉菜单*/
.xialaya {  
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100vw;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 0;
    z-index: 2000;
    white-space: normal;
    overflow: auto;
  }
  .xialaya.drop-up {
  bottom: 0; 
}
.xialaya ul { 
  margin-top: -5px;
}
 .sjplcancel {
    display: flex;
}
/*通知*/
.tongzhiyangshi {
        bottom: 50px;
        left: 0;
        right: 0;
        top: auto;
        width: 100vw;
        border-radius: 0px;
        padding: 10px 20px;
        transform: translateX(0%);
        white-space: normal;
        overflow: auto;
        animation: fadeInOut 3s ease-in-out;
    } 
/*评论区头像文字*/    
.reply-text {
      font-size: 14px;
    }
.reply-time {
      font-size: 14px;
    } 
.reply-user img {
      width: 38px;
      height: 38px;
    }  
   /*转圈*/ 
    .twitter-spinner {
      width: 26px;
      height: 26px;
      border: 3.5px solid #d2ecfc;
      border-top-color: #1da1f2;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }  
}