/* ==========================================================================
   Thread quick-preview modal + comment composer — professional skin
   Clean X/Twitter-like look. Loaded after every other stylesheet; scoped to
   #cl-thread-preview-modal so the rest of the site is unaffected (except the
   shared .cl-comment-composer, which gets the same polished composer).
   ========================================================================== */

#cl-thread-preview-modal,
.cl-comment-composer {
	--tp-accent: var(--cl-primary-color, #16a34a);
	--tp-accent-soft: color-mix(in srgb, var(--tp-accent) 12%, transparent);
	--tp-accent-hover: color-mix(in srgb, var(--tp-accent) 88%, #000);
	--tp-surface: #ffffff;
	--tp-surface-2: #f7f9f9;
	--tp-hover: rgba(15, 20, 25, .045);
	--tp-border: #eff3f4;
	--tp-border-strong: #e1e8ed;
	--tp-text: #0f1419;
	--tp-muted: #536471;
	--tp-radius: 16px;
	--tp-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Ethiopic", "Nyala", sans-serif;
}

body[data-bg="dark"] #cl-thread-preview-modal,
body[data-bg="dark"] .cl-comment-composer {
	--tp-surface: #15181c;
	--tp-surface-2: #1e2328;
	--tp-hover: rgba(239, 243, 244, .06);
	--tp-border: #2a2f34;
	--tp-border-strong: #343a40;
	--tp-text: #e7e9ea;
	--tp-muted: #8b98a5;
}

/* ---------- Backdrop ---------- */
body.modal-open .modal-backdrop.show {
	background: rgba(15, 20, 25, .5);
	opacity: 1 !important;
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
	#cl-thread-preview-modal.show {
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
}

/* ---------- Dialog & shell ---------- */
#cl-thread-preview-modal .modal-dialog.cl-thread-preview-modal__dialog {
	width: 600px !important;
	max-width: calc(100vw - 32px) !important;
	margin: 24px auto !important;
	height: auto !important;
	max-height: calc(100vh - 48px) !important;
	display: flex !important;
	align-items: stretch !important;
	transform: none;
}
#cl-thread-preview-modal.fade .modal-dialog.cl-thread-preview-modal__dialog {
	transform: translateY(12px) scale(.985);
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}
#cl-thread-preview-modal.show .modal-dialog.cl-thread-preview-modal__dialog {
	transform: none;
}
#cl-thread-preview-modal .modal-content.cl-thread-preview-modal__shell {
	width: 100% !important;
	max-height: calc(100vh - 48px) !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	background: var(--tp-surface) !important;
	color: var(--tp-text);
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius) !important;
	box-shadow: 0 24px 64px -12px rgba(15, 20, 25, .28), 0 4px 16px rgba(15, 20, 25, .08) !important;
	font-family: var(--tp-font);
}
body[data-bg="dark"] #cl-thread-preview-modal .modal-content.cl-thread-preview-modal__shell {
	box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04) !important;
}

/* ---------- Header ---------- */
#cl-thread-preview-modal .modal-header.cl-thread-preview-modal__header {
	position: sticky !important;
	top: 0;
	z-index: 20;
	flex: 0 0 auto !important;
	display: block !important;
	height: 53px !important;
	min-height: 53px !important;
	padding: 0 8px 0 16px !important;
	margin: 0 !important;
	background: color-mix(in srgb, var(--tp-surface) 86%, transparent) !important;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border: 0 !important;
	border-bottom: 1px solid var(--tp-border) !important;
	border-radius: 0 !important;
}
#cl-thread-preview-modal .cl-thread-preview-modal__header .modal-header__inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 20px !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
}
#cl-thread-preview-modal #cl-thread-preview-modal-title {
	order: 2 !important;
	flex: 1 1 0% !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
	text-align: left !important;
	font-family: var(--tp-font) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	line-height: 24px !important;
	letter-spacing: -.01em;
	color: var(--tp-text) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-transform: none !important;
}
#cl-thread-preview-modal .cl-thread-preview-modal__header-actions {
	order: 1 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 0 0 -8px !important;
	position: static !important;
}
#cl-thread-preview-modal .cl-thread-preview-modal__header .dismiss-modal {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--tp-text) !important;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
#cl-thread-preview-modal .cl-thread-preview-modal__header .dismiss-modal:hover {
	background: var(--tp-hover) !important;
}
#cl-thread-preview-modal .cl-thread-preview-modal__header .dismiss-modal:active {
	transform: scale(.92);
}
#cl-thread-preview-modal .cl-thread-preview-modal__header .dismiss-modal:focus-visible {
	outline: 2px solid var(--tp-accent);
	outline-offset: 2px;
}
#cl-thread-preview-modal .cl-thread-preview-modal__header .dismiss-modal svg {
	width: 20px !important;
	height: 20px !important;
}
#cl-thread-preview-modal .cl-thread-preview-modal__header .dismiss-modal svg path {
	fill: currentColor !important;
}

/* ---------- Body / scroller ---------- */
#cl-thread-preview-modal .modal-body.cl-thread-preview-modal__body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain;
	background: var(--tp-surface) !important;
	scrollbar-width: thin;
	scrollbar-color: var(--tp-border-strong) transparent;
}
#cl-thread-preview-modal .modal-body::-webkit-scrollbar { width: 8px; }
#cl-thread-preview-modal .modal-body::-webkit-scrollbar-thumb {
	background: var(--tp-border-strong);
	border-radius: 8px;
	border: 2px solid var(--tp-surface);
}
#cl-thread-preview-modal .modal-body .main-content-container,
#cl-thread-preview-modal .modal-body .main-content-container-inner,
#cl-thread-preview-modal .modal-body .timeline-container-wrapper,
#cl-thread-preview-modal .modal-body .timeline-container-inner,
#cl-thread-preview-modal .modal-body .timeline-container.thread-shell {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	min-height: 0 !important;
}

/* ---------- Root post ---------- */
#cl-thread-preview-modal .thread-conversation-card,
#cl-thread-preview-modal .thread-root-wrap,
#cl-thread-preview-modal .thread-root-wrap .timeline-posts-ls,
#cl-thread-preview-modal .thread-root-wrap .post-list-item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-list-item:hover {
	background: transparent !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-data {
	padding: 12px 16px 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-data__content {
	padding: 0 !important;
	margin: 0 !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-data-layout {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__publisher {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 48px !important;
	height: auto !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__publisher .post-avatar {
	flex: 0 0 auto !important;
	margin: 0 !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__publisher .post-avatar img,
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__publisher .post-avatar .avatar {
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	object-fit: cover;
}
#cl-thread-preview-modal .thread-root-wrap .post-username {
	min-width: 0 !important;
	margin: 0 !important;
	line-height: 1.25 !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-username .user-name-holder__name,
#cl-thread-preview-modal .thread-root-wrap .post-username a {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--tp-text) !important;
	letter-spacing: -.005em;
}
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__content {
	margin: 0 !important;
	padding: 0 !important;
}
#cl-thread-preview-modal .thread-root-wrap .publication-text {
	font-size: 17px !important;
	line-height: 1.55 !important;
	color: var(--tp-text) !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
#cl-thread-preview-modal .publication-text a {
	color: var(--tp-accent) !important;
	font-weight: 500;
	text-decoration: none !important;
}
#cl-thread-preview-modal .publication-text a:hover { text-decoration: underline !important; }

#cl-thread-preview-modal .thread-root-wrap .lozad-media,
#cl-thread-preview-modal .thread-root-wrap .publication-image,
#cl-thread-preview-modal .thread-root-wrap .publication-video,
#cl-thread-preview-modal .thread-root-wrap .publication-image-grid {
	margin: 0 0 12px !important;
	border-radius: var(--tp-radius) !important;
	overflow: hidden !important;
}
#cl-thread-preview-modal .thread-root-wrap .publication-image {
	border: 1px solid var(--tp-border) !important;
	background: var(--tp-surface-2);
}
#cl-thread-preview-modal .thread-root-wrap .publication-image img {
	display: block;
	width: 100% !important;
	max-height: 560px;
	object-fit: cover;
	border-radius: 0 !important;
	transition: filter .2s ease;
}
#cl-thread-preview-modal .thread-root-wrap .publication-image a:hover img { filter: brightness(.96); }

#cl-thread-preview-modal .thread-root-wrap .post-data-layout__date {
	margin: 0 !important;
	padding: 4px 0 14px !important;
	border-bottom: 1px solid var(--tp-border) !important;
}
#cl-thread-preview-modal .thread-root-wrap .publication-date,
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__date * {
	font-size: 15px !important;
	color: var(--tp-muted) !important;
}

/* Action bar */
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__controls {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border-bottom: 0 !important;
}
#cl-thread-preview-modal .post-data-layout__controls .ctrls-item,
#cl-thread-preview-modal .post-data-layout__controls .sfs-bookmark-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 36px !important;
	min-width: 36px;
	padding: 0 10px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--tp-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	transition: background-color .15s ease, color .15s ease;
}
#cl-thread-preview-modal .post-data-layout__controls .ctrls-item:hover,
#cl-thread-preview-modal .post-data-layout__controls .sfs-bookmark-toggle:hover {
	background: var(--tp-accent-soft) !important;
	color: var(--tp-accent) !important;
}
#cl-thread-preview-modal .post-data-layout__controls .ctrls-item .num {
	color: inherit !important;
	font-size: 13px !important;
}
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__controls .ctrls-item svg,
#cl-thread-preview-modal .thread-root-wrap .post-data-layout__controls .sfs-bookmark-toggle svg {
	width: 20px !important;
	height: 20px !important;
}

/* ---------- Comments panel ---------- */
#cl-thread-preview-modal section.thread-comments-panel {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* ---------- Composer (shared) ---------- */
:is(#cl-thread-preview-modal, html) .cl-comment-composer.thread-inline-composer,
#cl-thread-preview-modal form.thread-inline-composer {
	margin: 0 !important;
	padding: 12px 16px !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tp-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-comment-composer__card {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-comment-composer__mainrow,
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__avatar {
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__avatar img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 999px !important;
	object-fit: cover;
	box-shadow: none !important;
	border: 0 !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__field-wrap {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--tp-surface-2) !important;
	border: 1px solid transparent !important;
	border-radius: 22px !important;
	box-shadow: none !important;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__field-wrap:hover {
	border-color: var(--tp-border-strong) !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__field-wrap:focus-within {
	background: var(--tp-surface) !important;
	border-color: var(--tp-accent) !important;
	box-shadow: 0 0 0 3px var(--tp-accent-soft) !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer textarea.thread-inline-composer__input,
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__field-wrap textarea {
	display: block !important;
	width: 100% !important;
	min-height: 44px !important;
	max-height: 220px;
	margin: 0 !important;
	padding: 11px 16px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 22px !important;
	outline: none !important;
	box-shadow: none !important;
	resize: none !important;
	font-family: var(--tp-font) !important;
	font-size: 15px !important;
	line-height: 22px !important;
	color: var(--tp-text) !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer textarea.thread-inline-composer__input::placeholder,
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-inline-composer__field-wrap textarea::placeholder {
	color: var(--tp-muted) !important;
	opacity: 1;
}

/* toolbar */
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-toolbar {
	margin: 8px 0 0 52px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-toolbar__inner {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-tool {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--tp-accent) !important;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-tool:hover {
	background: var(--tp-accent-soft) !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-tool:active { transform: scale(.92); }
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-tool svg {
	width: 20px !important;
	height: 20px !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-tool svg path { fill: currentColor !important; }

:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-submit {
	margin: 0 0 0 auto !important;
	height: 36px !important;
	min-width: 76px !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--tp-accent) !important;
	color: #fff !important;
	font-family: var(--tp-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 36px !important;
	letter-spacing: 0 !important;
	text-transform: capitalize !important;
	box-shadow: none !important;
	transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-submit:hover:not(:disabled) {
	background: var(--tp-accent-hover) !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-submit:active:not(:disabled) { transform: scale(.97); }
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-submit:disabled,
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-submit.disabled {
	opacity: .5 !important;
	cursor: default !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-submit:focus-visible {
	outline: 2px solid var(--tp-accent);
	outline-offset: 2px;
}

/* media previews */
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-media-row { margin-left: 52px !important; }
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-media-prev img,
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-img-previews img {
	border-radius: 14px !important;
}

/* popups */
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-cc-pop {
	border-radius: 16px !important;
	border: 1px solid var(--tp-border) !important;
	background: var(--tp-surface) !important;
	box-shadow: 0 12px 40px -8px rgba(15, 20, 25, .25) !important;
	overflow: hidden;
}

/* nested per-reply composer */
:is(#cl-thread-preview-modal, html) .cl-comment-composer .cl-comment-composer__card--nested {
	padding: 10px 0 0 !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-per-comment-reply__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-per-comment-reply__title {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--tp-muted) !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-per-comment-reply__close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--tp-muted) !important;
}
:is(#cl-thread-preview-modal, html) .cl-comment-composer .thread-per-comment-reply__close:hover {
	background: var(--tp-hover) !important;
	color: var(--tp-text) !important;
}

/* ---------- Sort / quotes sub-bar ---------- */
#cl-thread-preview-modal .cl-thread-subbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tp-border) !important;
	background: transparent !important;
}
#cl-thread-preview-modal .cl-thread-subbar__left > *,
#cl-thread-preview-modal .cl-thread-subbar__right > *,
#cl-thread-preview-modal .cl-thread-subbar__quotes-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	height: 34px !important;
	padding: 0 10px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--tp-text) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background-color .15s ease;
}
#cl-thread-preview-modal .cl-thread-subbar__right > *,
#cl-thread-preview-modal .cl-thread-subbar__quotes-btn {
	color: var(--tp-accent) !important;
}
#cl-thread-preview-modal .cl-thread-subbar__left > *:hover,
#cl-thread-preview-modal .cl-thread-subbar__right > *:hover,
#cl-thread-preview-modal .cl-thread-subbar__quotes-btn:hover {
	background: var(--tp-hover) !important;
}

/* ---------- Replies ---------- */
#cl-thread-preview-modal .thread-replys-outer,
#cl-thread-preview-modal .thread-replys {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
#cl-thread-preview-modal .thread-replys > .post-list-item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tp-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transition: background-color .15s ease;
}
#cl-thread-preview-modal .thread-replys > .post-list-item:hover {
	background: var(--tp-hover) !important;
}
#cl-thread-preview-modal .thread-replys .post-data {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px 16px 4px !important;
	margin: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
#cl-thread-preview-modal .thread-replys .post-data__avatar {
	flex: 0 0 40px !important;
	width: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-data__avatar img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 999px !important;
}
#cl-thread-preview-modal .thread-replys .post-data__content {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-data-layout {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-data-layout > * {
	min-height: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-data-layout__publisher {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-username .user-name-holder__name,
#cl-thread-preview-modal .thread-replys .post-username a {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--tp-text) !important;
}
#cl-thread-preview-modal .thread-replys .post-time,
#cl-thread-preview-modal .thread-replys .post-time * {
	font-size: 14px !important;
	color: var(--tp-muted) !important;
}
#cl-thread-preview-modal .thread-replys .post-data-layout__target {
	margin: 1px 0 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-reply {
	font-size: 14px !important;
	color: var(--tp-muted) !important;
	margin: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-reply a { color: var(--tp-accent) !important; }
#cl-thread-preview-modal .thread-replys .post-data-layout__content {
	margin: 4px 0 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
#cl-thread-preview-modal .thread-replys .publication-text {
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--tp-text) !important;
	margin: 0 0 6px !important;
}
#cl-thread-preview-modal .thread-replys .publication-image,
#cl-thread-preview-modal .thread-replys .lozad-media {
	border-radius: 14px !important;
	overflow: hidden !important;
	margin: 4px 0 8px !important;
}
#cl-thread-preview-modal .thread-replys .post-data-layout__controls {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 2px 0 0 -10px !important;
	padding: 0 0 6px !important;
	border: 0 !important;
}
#cl-thread-preview-modal .thread-replys .post-data-layout__controls .ctrls-item {
	height: 32px !important;
}
#cl-thread-preview-modal .thread-replys .post-data-layout__controls svg {
	width: 18px !important;
	height: 18px !important;
}

/* Gift replies: compact card instead of the tall animated hero.
   Post text uses pre-wrap, so the template's indentation renders as blank lines. */
:is(#cl-thread-preview-modal, html) div.post-list-item div.publication-text.publication-text--gift-comment,
:is(#cl-thread-preview-modal, html) .publication-text--gift-comment .gift-pub-card,
:is(#cl-thread-preview-modal, html) .publication-text--gift-comment .gift-pub-card * {
	white-space: normal !important;
}
#cl-thread-preview-modal .thread-replys .publication-text--gift-comment {
	margin: 4px 0 6px !important;
}
#cl-thread-preview-modal .thread-replys .gift-pub-card {
	min-height: 0 !important;
	height: auto !important;
	padding: 14px 16px !important;
	border-radius: 16px !important;
}
#cl-thread-preview-modal .thread-replys .gift-pub-card__hero {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}
#cl-thread-preview-modal .thread-replys .gift-pub-card__meta,
#cl-thread-preview-modal .thread-replys .gift-pub-card__amount-wrap,
.thread-replys .publication-text--gift-comment .gift-pub-card__meta,
.thread-replys .publication-text--gift-comment .gift-pub-card__amount-wrap {
	flex: 0 0 auto !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
#cl-thread-preview-modal .thread-replys .gift-pub-card__note {
	margin: 12px 0 0 !important;
}

/* ---------- Empty state ---------- */
#cl-thread-preview-modal .thread-empty-state {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	padding: 40px 32px 48px !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
#cl-thread-preview-modal .thread-empty-state__icon-wrap {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	margin: 0 0 14px !important;
	border-radius: 999px !important;
	background: var(--tp-accent-soft) !important;
	color: var(--tp-accent) !important;
}
#cl-thread-preview-modal .thread-empty-state__icon-wrap svg {
	width: 26px !important;
	height: 26px !important;
}
#cl-thread-preview-modal .thread-empty-state__icon-wrap svg path { fill: currentColor !important; }
#cl-thread-preview-modal .thread-empty-state__message h4 {
	margin: 0 0 4px !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--tp-text) !important;
}
#cl-thread-preview-modal .thread-empty-state__message p {
	margin: 0 !important;
	font-size: 15px !important;
	color: var(--tp-muted) !important;
}

/* ---------- Mobile: full-screen sheet ---------- */
@media (max-width: 576px) {
	#cl-thread-preview-modal .modal-dialog.cl-thread-preview-modal__dialog {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		height: 100% !important;
		max-height: 100% !important;
	}
	#cl-thread-preview-modal .modal-content.cl-thread-preview-modal__shell {
		height: 100% !important;
		max-height: 100% !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	#cl-thread-preview-modal .modal-header.cl-thread-preview-modal__header {
		padding: 0 4px 0 12px !important;
	}
	#cl-thread-preview-modal .thread-root-wrap .post-data { padding: 12px 12px 0 !important; }
	#cl-thread-preview-modal .thread-root-wrap .publication-text { font-size: 16px !important; }
	:is(#cl-thread-preview-modal, html) .cl-comment-composer.thread-inline-composer,
	#cl-thread-preview-modal form.thread-inline-composer { padding: 10px 12px !important; }
	#cl-thread-preview-modal .thread-replys .post-data { padding: 12px 12px 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
	#cl-thread-preview-modal *,
	.cl-comment-composer * { transition: none !important; }
}