/* /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);
	display:block;
}

.feed-item-shell,
.feed-comment-shell{
	min-width:0;
}

.feed-item-avatar-wrap,
.feed-comment-avatar-wrap{
	flex:0 0 auto;
}

.feed-item-main,
.feed-comment-main,
.feed-item-title-wrap,
.feed-comment-title-wrap,
.feed-item-content-wrap,
.feed-comment-content-wrap{
	min-width:0;
}

.feed-item-header,
.feed-comment-header{
	min-width:0;
}

.feed-item .feed-author,
.feed-comment .feed-comment-author{
	font-weight:700;
	line-height:1.15;
}

.feed-name-wrap,
.feed-item .feed-author,
.feed-comment .feed-comment-author,
.feed-people-list-name{
	white-space:normal;
	overflow-wrap:anywhere;
	word-break:break-word;
}

.feed-item .feed-author a,
.feed-comment .feed-comment-author a{
	display:inline;
	white-space:normal;
	overflow-wrap:anywhere;
	word-break:break-word;
}

.feed-item-date,
.feed-comment-date{
	line-height:1.2;
	white-space:normal;
	overflow-wrap:anywhere;
	word-break:break-word;
}

.feed-item-action-menu,
.feed-comment-action-menu{
	flex:0 0 auto;
}

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


.feed-edit .feed-edit-editable,
#feedComposeCard .js-feed-compose-editable,
.feed-comment-compose .js-feed-comment-compose-editable,
.feed-comment-edit .js-feed-comment-editable{
	min-height: calc(1.5em + .75rem + 2px);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	cursor: text;
}

.feed-edit .feed-edit-editable:empty:before,
#feedComposeCard .js-feed-compose-editable:empty:before,
.feed-comment-compose .js-feed-comment-compose-editable:empty:before,
.feed-comment-edit .js-feed-comment-editable:empty:before{
	content: attr(data-placeholder);
	color: var(--bs-secondary-color, #6c757d);
	pointer-events: none;
}

.feed-edit .feed-edit-editable .ksw-mention-token,
#feedComposeCard .js-feed-compose-editable .ksw-mention-token,
.feed-comment-compose .js-feed-comment-compose-editable .ksw-mention-token,
.feed-comment-edit .js-feed-comment-editable .ksw-mention-token{
	vertical-align: baseline;
}

#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;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:.5rem 1rem;
}

.feed-action-group{
	display:inline-flex;
	align-items:center;
	gap:.45rem;
}

.feed-heart-btn,
.feed-comment-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:2.25rem;
}

.feed-action-count{
	display:inline-flex;
	align-items:center;
	min-height:2rem;
	line-height:1.1;
}

.feed-action-count-clickable{
	cursor:pointer;
}

.feed-action-count-clickable:hover,
.feed-action-count-clickable:focus{
	text-decoration:underline;
}

.feed-action-count-clickable:focus-visible{
	outline:2px solid rgba(13,110,253,.35);
	outline-offset:2px;
	border-radius:.25rem;
}

/* Verified + star badge alignment */
.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-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;
	display:block;
}

.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;
}

#feedModeGroup .btn{
  white-space: nowrap;
}

#btnModeFavourites i{
  color: #dc3545;
}

.feed-people-list,
.feed-hearters-list{
	max-height: 60vh;
	overflow-y: auto;
}

.feed-people-list .list-group-item,
.feed-hearters-list .list-group-item{
	white-space: normal;
}

.feed-people-list-item{
	display:block;
}

.feed-people-list-name{
	display:block;
}

.feed-people-list .badge{
	white-space:nowrap;
}

@media (max-width: 549.98px){
	.feed-item-shell,
	.feed-comment-shell{
		display:block !important;
		position:relative;
	}

	.feed-item-avatar-wrap,
	.feed-comment-avatar-wrap{
		position:absolute;
		top:0;
		left:0;
	}

	.feed-item-header{
		padding-left:56px;
		min-height:44px;
	}

	.feed-comment-header{
		padding-left:42px;
		min-height:34px;
	}

	.feed-item-content-wrap{
		margin-top:.5rem;
	}

	.feed-comment-content-wrap{
		margin-top:.35rem;
	}
}
