/* /feed/include/master.css */

.feed-avatar{
	width:44px;
	height:44px;
	border-radius:999px;
	object-fit:cover;
	flex:0 0 44px;
	border:1px solid rgba(0,0,0,.12);
	background:var(--bs-tertiary-bg,#f3f3f3);
}

.feed-item .feed-author{
	font-weight:700;
	line-height:1.1;
}

.feed-item .feed-body{
	white-space:normal;
	word-break:break-word;
}

.feed-item .feed-edit textarea{
	resize:vertical;
}

#feedList .card{
	border-radius: .75rem;
}

#feedComposeCard{
	border-radius: .75rem;
}

#feedNewBar{
	display:none;
	position: sticky;
	top: 92px; /* below header */
	z-index: 50;
}

@media (max-width: 991.98px){
	#feedNewBar{ top: 78px; }
}

.feed-album-thumb{
	width:140px;
	height:auto;
	border-radius:.6rem;
	flex:0 0 auto;
	border:1px solid rgba(0,0,0,.12);
	background:var(--bs-tertiary-bg,#f3f3f3);
}

.feed-event-thumb{
	width:140px;
	height:auto;
	border-radius:.6rem;
	flex:0 0 auto;
	border:1px solid rgba(0,0,0,.12);
	background:var(--bs-tertiary-bg,#f3f3f3);
}

.feed-tag-badges .badge{
	margin-right:.25rem;
	margin-bottom:.25rem;
}

.feed-album-thumb-inline{
	width:100%;
	height:auto;
	border-radius:.6rem;
	border:1px solid rgba(0,0,0,.12);
	background:var(--bs-tertiary-bg,#f3f3f3);
}

.feed-event-thumb-inline{
	width:100%;
	height:auto;
	border-radius:.6rem;
	border:1px solid rgba(0,0,0,.12);
	background:var(--bs-tertiary-bg,#f3f3f3);
}

.feed-post-actions{
	margin-top:.6rem;
}

.feed-heart-btn{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
}

.feed-heart-btn .js-feed-heart-count{
	min-width:1.5ch;
	text-align:left;
}


/* Verified + star badge alignment */
.feed-item .feed-author a{
	display:inline-flex;
	align-items:center;
	gap:0;
}
.feedStarBadge{
	display:inline-flex;
	align-items:center;
}

/* -------------------------------------------------------------------------
   Feed post media thumbnails (Fancybox)
   ------------------------------------------------------------------------- */
.feed-post-media{
	/* Masonry-style layout with pure CSS (no JS): */
	column-gap: 8px;
	column-count: 3;
	line-height: 0;
}

.feed-post-media-thumb{
	display:inline-block;
	width:100%;
	margin: 0 0 8px 0;
	break-inside: avoid;
}

.feed-post-media-thumb img{
	width:100%;
	height:auto;
	border-radius:.6rem;
	border:1px solid rgba(0,0,0,.12);
	background:var(--bs-tertiary-bg,#f3f3f3);
}

@media (max-width: 575.98px){
	.feed-post-media{ column-count: 1; }
}

@media (max-width: 991.98px){
	.feed-post-media{ column-count: 2; }
}

@media (min-width: 1200px){
	.feed-post-media{ column-count: 4; }
}

/* -------------------------------------------------------------------------
   Composer Dropzone
   ------------------------------------------------------------------------- */
.feedDropzone{
	min-height:120px;
	padding:12px;
}

.feedDropzone.dz-clickable{
	cursor:pointer;
}



/* -------------------------------------------------------------------------
   Feed post comments
   ------------------------------------------------------------------------- */
.feed-comment-btn{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
}

.feed-comments{
	border-top:1px solid rgba(0,0,0,.06);
	padding-top:.75rem;
}

.feed-comment{
	padding:.5rem 0;
	border-bottom:1px solid rgba(0,0,0,.05);
}

.feed-comment:last-child{
	border-bottom:none;
}

.feed-comment .feed-comment-avatar{
	width:34px;
	height:34px;
	border-radius:999px;
	object-fit:cover;
	border:1px solid rgba(0,0,0,.12);
	background:var(--bs-tertiary-bg,#f3f3f3);
	flex:0 0 34px;
}

.feed-comment .feed-comment-body{
	white-space:normal;
	word-break:break-word;
}

.feed-comment-compose textarea{
	resize:vertical;
}



/* =======================
   Feed account search suggest + user tab
   ======================= */

#feedSearchWrap{
  position: relative;
}

#feedSearchSuggest{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  display: none;
  margin-top: 2px;
}

.feedSuggestAvatar{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
  flex: 0 0 auto;
}

.feedSuggestName{
  font-weight: 500;
  line-height: 1.2;
}

.feedUserTabAvatar{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
}

.feedUserTabClose{
  margin-left: 8px;
  font-weight: 700;
  opacity: 0.55;
  cursor: pointer;
}

.feedUserTabClose:hover{
  opacity: 0.9;
}

.feedUserHeaderAvatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}