/* Follow + Friend UI (non-invasive) */
/* This file styles: profile follow counters/actions + follower/following list modal.
   Does NOT remove/override any existing NAXCORE features. */

.ff-counts{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.ff-counts button{
  background:#2b2d31;
  border:1px solid #202225;
  color:#dcddde;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
}
.ff-counts button:hover{ filter:brightness(1.06); }

.ff-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.ff-actions button{
  background:#5865f2;
  border:none;
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
}
.ff-actions button.is-secondary{ background:#3b3d44; }
.ff-actions button.is-following{ background:#3b3d44; }
.ff-actions button:disabled{ opacity:.6; cursor:not-allowed; }

/* ===== User list modal overlay ===== */
#ff-userlist-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:99999;
}
#ff-userlist-overlay.show{ display:flex; }

.ff-userlist-modal{
  width:min(720px, calc(100vw - 28px));
  max-height:min(70vh, 560px);
  background:rgba(48, 52, 58, .96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,.55);
}
.ff-userlist-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:rgba(0,0,0,.12);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ff-userlist-title{
  font-weight:800;
  letter-spacing:.2px;
}
.ff-userlist-close{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.ff-userlist-close:hover{ filter:brightness(1.08); }

.ff-userlist-body{
  padding:12px 12px 14px;
  overflow:auto;
  max-height:calc(min(70vh, 560px) - 58px);
}

/* ===== Rows ===== */
.userlist-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:#2b2d31;
  border-radius:12px;
  margin-bottom:10px;
  cursor:pointer;
  transition:transform .08s ease, filter .08s ease;
}
.userlist-row:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
.userlist-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.userlist-left img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  background:#1f2024;
}
.userlist-name{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Follow button inside list */
.userlist-followbtn{
  background:#5865f2;
  border:none;
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
  flex:0 0 auto;
}
.userlist-followbtn.is-following{ background:#3b3d44; }
.userlist-followbtn:disabled{ opacity:.65; cursor:not-allowed; }

/* Empty / error */
.ff-userlist-empty{
  opacity:.85;
  padding:10px 4px;
}


/* ===== Profile modal follow/friend action polish (Hotfix v8) ===== */
#profile-modal #profile-follow-row{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}

/* the action row is the immediate sibling after #profile-follow-row in current index.html */
#profile-modal #profile-follow-row + div{
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Make follow/friend buttons look clean (they were stretching because .btn has width:100%) */
#profile-modal #followBtn,
#profile-modal #friendBtn,
#profile-modal #friendDeclineBtn{
  width: auto !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

/* Keep DM button as a full-width primary action (attribute selector avoids touching other buttons) */
#profile-modal #profile-follow-row + div button[onclick*="startDM("]{
  width: 100% !important;
  flex: 1 1 100%;
  border-radius: 14px !important;
}

/* Stats are clickable -> make it obvious */
#profile-modal .profile-stat{
  transition: 0.15s ease;
  user-select: none;
}
#profile-modal .profile-stat:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}