/* ==========================================================================
   SmartPreview — Recent Feed Styles
   ========================================================================== */

/* 1) Base: inherit theme size for everything */
.recent-feed {
	font-size: 1rem !important;    /* match your theme’s base */
	line-height: 1.6 !important;
}

/* 2) Topic title: slightly larger than base */
.recent-feed .topic-item .topic-header .topic-title {
	font-size: 1.2rem !important;   /* ~20% up from base */
}

/* 3) Timestamp: a bit smaller meta text */
.recent-feed .topic-item .topic-header .topic-time {
	font-size: 0.85rem !important;
}

/* Base container: full width, inherit theme fonts, include padding in width */
.recent-feed {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	line-height: inherit !important;
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Topic “cards”
   -------------------------------------------------------------------------- */
.recent-feed .topic-item {
	background-color: #ffffff;
	border: 1px solid #dfe0e4;
	border-radius: 6px;
	padding: 1.5rem;
	margin-bottom: 1rem;
	transition: background-color 0.2s, box-shadow 0.2s;
}

.recent-feed .topic-item:hover {
	background-color: #f5f8fa;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Unread indicator stripe */
.recent-feed .topic-item.unread {
	border-left: 4px solid #1da1f2;
}

/* Highlight the first unread reply just like your theme’s unread‐row */
.recent-feed .reply-snippet.unread {
  background-color: #fef2f3;
  padding: 0.75rem;
  border-radius: 4px;    /* slightly rounded corners */
  /* … */
}


/* --------------------------------------------------------------------------
   Header: title + timestamp
   -------------------------------------------------------------------------- */
.recent-feed .topic-item .topic-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.recent-feed .topic-item .topic-header .topic-title {
	line-height: 1.3 !important;
	font-weight: bold;
	color: #1da1f2;
	text-decoration: none;
}

.recent-feed .topic-item .topic-header .topic-title:hover {
	text-decoration: underline;
}

.recent-feed .topic-item .topic-header .topic-time {
	color: #657786;
}

/* --------------------------------------------------------------------------
   First-post toggle
   -------------------------------------------------------------------------- */
.recent-feed .topic-item .toggle-first {
	display: inline-block;
	margin-bottom: 0.5rem;
	color: #1da1f2;
	cursor: pointer;
}

.recent-feed .topic-item .toggle-first:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Preview text blocks
   -------------------------------------------------------------------------- */
.recent-feed .topic-item .first-post,
.recent-feed .topic-item .reply-post {
	line-height: 1.5 !important;
	color: #333333;
	margin-bottom: 0.75rem;
}

/* Reply indentation + arrow */
.recent-feed .topic-item .reply-post {
	display: flex;
	align-items: flex-start;
	margin-left: 1.5rem;
	padding-left: 0.75rem;
	border-left: 3px solid #1da1f2;
}

.recent-feed .topic-item .reply-post::before {
	content: "↳";
	margin-right: 0.5rem;
	color: #1da1f2;
	flex-shrink: 0;
}

/* ======== SmartPreview Feed Styling ======== */

/* 1) Remove underlines on all feed links */
.recent-feed a {
  text-decoration: none;
  color: inherit; /* use the surrounding text color */
}

.recent-feed a:hover {
  text-decoration: none;
}

/* 2) Specific link resets (if you have other nested selectors) */
.recent-feed .first-post a,
.recent-feed .reply-snippet a {
  text-decoration: none;
  color: inherit;
}

.recent-feed .first-post a:hover,
.recent-feed .reply-snippet a:hover {
  text-decoration: none;
}

/* 3) Add a reply arrow before the reply‐meta */
.reply-snippet .reply-meta::before {
  content: "↳";
  display: inline-block;
  margin-right: 0.3rem;
  vertical-align: middle;
  color: currentColor;
}

/* 4) Slight indent for reply block */
.reply-snippet {
  margin-left: 2rem;
  margin-top: 1rem;
}

/* 5) Optional hover effect on the item */
.topic-item:hover {
  background-color: rgba(0,0,0,0.03);
}

/* SmartPreview V13 Styling */

/* 1) Avatar: fixed 40×40px */
.topic-meta .avatar img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

/* 2) Title block flex layout with ellipsis */
.topic-meta {
  display: flex;
  align-items: center;
}
.title-block {
  margin-left: 0.75rem;
  flex: 1;
}
.topic-title {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
}

/* 3) “Show more” link styling */
.show-more {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: #007bff;
  text-decoration: none;
}
.show-more:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* 4) Reply snippet indent & font scaling */
.reply-snippet {
  margin-left: 2rem;
  margin-top: 1rem;
}
.reply-meta {
  font-size: 0.875rem;
  color: #555;
}
.reply-text {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* 5) Link reset in feed */
.recent-feed a {
  text-decoration: none;
  color: inherit;
}
.recent-feed a:hover {
  text-decoration: none;
}

/* ---------------------------------------------------
   1) Clamp long titles in their flex container
   --------------------------------------------------- */
.title-block {
  /* allow flex child to shrink smaller than its content */
  flex: 1 1 auto;
  min-width: 0;
}

/* apply ellipsis */
.topic-title {
  display: inline-block;  /* allow label and title on one line */
  max-width: 100%;        /* clamp within parent flex item */
  white-space: nowrap;    /* no wrapping */
  overflow: hidden;       /* clip overflow */
  text-overflow: ellipsis;
}

/* ---------------------------------------------------
   2) Excerpt + “Show more” on one line
   --------------------------------------------------- */
/* Excerpt containers back to normal block flow */
.first-post,
.reply-text {
  display: block;
  margin: 0; /* or whatever spacing you had before */
}

/* “Show more” stays glued to the end of the excerpt */
.show-more {
  display: inline;
  white-space: nowrap;
  margin-left: 0.25rem;
  color: #007bff !important;    /* or your link color */
  text-decoration: none;
}

.show-more:hover {
  opacity: 0.8;
}

/* Always keep the “Show more” link glued to the ellipsis */
.show-more {
  margin-left: 0.25rem;
  white-space: nowrap;    /* never break inside the link */
  display: inline-block;
}

/* === Topic Stats Icons === */
/* Ensure the container and badge both render inline and stay visible */
.topic-stats {
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: 0.875em;
	color: var(--muted-text);
}

.topic-stats .stat {
	display: inline-flex;
	align-items: center;
}

/* Icon styling (you already have this working) */
.topic-stats .stat .icon {
	font-size: 1em;
	margin-right: 0.25em;
	opacity: 0.6;
}

/* New-replies badge: force inline-block, visible background, no off-screen margin */
.topic-stats .stat.new-replies .badge {
	display: inline-block;
	background-color: var(--danger-color, #d9534f); /* fallback to red */
	color: #fff;
	border-radius: 0.5em;
	padding: 0.1em 0.4em;
	font-size: 0.75em;
	line-height: 1;
	margin-left: 0.25em;     /* positive to sit just right of the icon */
	vertical-align: middle;
}
.topic-stats .new-replies .icon {
	color: var(--danger-color);   /* make it your “alert” color */
	opacity: 1;                   /* full opacity */
}
/* Nudge the new-replies badge up slightly */
.topic-stats .stat.new-replies .badge {
	position: relative;
	top: -0.10em;   /* adjust this value up/down to taste */
}
.topic-stats > .new-replies > .icon-gray {
	color: var(--muted-text);
}


/* ==========================================================================
   Desktop horizontal padding (adds 2rem left/right on wider screens)
   ========================================================================== */
@media (min-width: 601px) {
	.recent-feed {
		box-sizing: border-box !important;
		padding: 0 1rem !important;
	}
}

/* ==========================================================================
   Mobile adjustments (≤600px)
   ========================================================================== */
@media (max-width: 600px) {
        .recent-feed {
                width: auto !important;
                padding: 0 1rem !important;
                box-sizing: border-box !important;
        }

	.recent-feed .topic-item .topic-header .topic-title {
		/* still 1.2em of the inherited base */
		line-height: 1.3 !important;
	}

	.recent-feed .topic-item .first-post,
	.recent-feed .topic-item .reply-post {
		line-height: 1.5 !important;
	}

}

/* Unread label styling */
.title-line {
    display: flex;
    align-items: baseline;
    font-size: 1.2rem;
    font-weight: bold;
}

.unread-label {
    color: #28a745;
    font-size: inherit;
    font-weight: inherit;
    margin-right: 0.25em;
}

/* --------------------------------------------------------------------------
   SmartPreview view-switch tabs
   -------------------------------------------------------------------------- */
.sp-tabs-wrap {
    margin: 0 auto 1rem;
    max-width: var(--content-width, 100%);
}

.sp-view-tabs {
    display: flex;
    font-family: inherit;
    color: inherit;
    border-bottom: 1px solid var(--border-color, #dfe0e4);
}

.sp-view-tabs a {
    flex: 1 0 50%;
    text-align: center;
    padding: 0.5em 0;
    font-size: 1.1rem;
    color: inherit;
    text-decoration: none;
}

.sp-view-tabs a:hover {
    text-decoration: underline;
}

.sp-view-tabs a.active {
    font-weight: bold;
    border-bottom: 2px solid currentColor;
}

@media (max-width: 600px) {
    .sp-view-tabs a {
        flex: 1;
        font-size: 1rem;
    }
}