/* ==========================================================
   Discuss – global CSS (front-end)
   Keep each section separate, with a clear title above it.
   ========================================================== */

/* --- Discuss variables --- */
:root {
	/* --discuss-accent: #1d9bf0; */
	--discuss-tip-bg: #323232;
	--discuss-tip-border: #363636;
	--discuss-tip-color: #aaaaaa;
}

/* --- Tooltips: Voxel's tooltips (data-tooltip) and every title="" on the site (see discuss.js) --- */
.has-tooltip[data-tooltip]::after,
.ts-action[data-tooltip]::after,
.ts-action[tooltip-active]::after,
.ts-action[tooltip-inactive]::after,
.discuss-tip[data-tooltip]::after {
	bottom: calc(100% + 8px);
	transform: translate(-50%, 4px);
	width: max-content;
	max-width: 280px;
	padding: 6px 14px;
	border: 1px solid var(--discuss-tip-border);
	border-radius: 50px;
	background: var(--discuss-tip-bg);
	color: var(--discuss-tip-color);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
	pointer-events: none;
	z-index: 1000;
	transition: opacity .1s ease, transform .1s ease, visibility .1s;
}

/* normal arrow cursor (not the text cursor) over elements with a tooltip; links and buttons keep the hand */
.discuss-tip:not(a):not(button),
.has-tooltip:not(a):not(button) {
	cursor: default;
}

.discuss-tip[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	opacity: 0;
	visibility: hidden;
}

.has-tooltip[data-tooltip]:hover::after,
.ts-action[data-tooltip]:hover::after,
.discuss-tip[data-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* (kept apart: a browser without :has() drops only this rule) */
.ts-action[tooltip-inactive]:not(:has(> .ts-action-con.active)):hover::after,
.ts-action[tooltip-active]:has(> .ts-action-con.active):hover::after {
	transform: translate(-50%, 0);
}

/* Near the top of the screen the tooltip opens below the element (class set in discuss.js) */
.discuss-tip-below[data-tooltip]::after,
.discuss-tip-below[tooltip-active]::after,
.discuss-tip-below[tooltip-inactive]::after {
	top: calc(100% + 8px);
	bottom: auto;
	transform: translate(-50%, -4px);
}

.discuss-tip-below[data-tooltip]:hover::after {
	transform: translate(-50%, 0);
}

.ts-action.discuss-tip-below[tooltip-inactive]:not(:has(> .ts-action-con.active)):hover::after,
.ts-action.discuss-tip-below[tooltip-active]:has(> .ts-action-con.active):hover::after {
	transform: translate(-50%, 0);
}

/* ==========================================================
   Visual tweaks (moved from Customizer → Additional CSS)
   ========================================================== */

/* --- Feed: base text size --- */
.vxfeed {
	--xs-font-size: 17px !important;
}

/* --- Composer (new post box) --- */
.vxf-create-post {
	background: #323232 !important;
	border: 1px solid var(--main-border);
}

.vxf-create-post__content .vxf-content__highlighter,
.vxf-create-post__content .vxf-content__textarea {
	padding-top: 20px !important;
}

/* --- Post header: avatars and the pin / repost row --- */
a.vxf-avatar.flexify {
	border: 1px solid var(--main-border);
}

div.vxf-avatar.flexify {
	border-radius: 14px !important;
}

.vxf-highlight a,
.vxf-highlight span {
	margin-top: -1px !important;
}

/* --- Post footer: action icons --- */
/* Voxel's extra "has replies" icon in the action row is hidden (replies open from the footer icon, see Post counts) */
a.vxf-icon.vxf-has-replies {
	display: none !important;
}

.vxfeed .vxf-icon:nth-child(2) {
	margin-top: -1px;
}

/* 2px more space above the post footer (Voxel's row gap is 12px, so 14px here) */
.vxfeed .vxf-post > .vxf-footer {
	margin-top: 2px;
}

/* --- Inbox: unread dot position --- */
span.unread-indicator {
	top: 33px !important;
}

/* --- Image lightbox (Elementor, opens when an image is clicked): 11px corners, like the feed (feed corners are set in Voxel's Timeline Kit → MD radius) --- */
.elementor-lightbox img.elementor-lightbox-image,
.dialog-lightbox-widget img.elementor-lightbox-image {
	border-radius: 11px;
}

/* --- Quoted posts: same background gradient as link cards (#323232 for 60%, then fading to transparent) --- */
.vxfeed .vxf__quoted-post.vxf-post {
	background: linear-gradient(to right, #323232 0%, #323232 60%, transparent 100%);
	padding-bottom: 18px; /* a bit more room under the text (Voxel: 15px) */
}

/* --- Composer: no "media library" button (post and reply composers); uploading from the device stays --- */
/* Voxel only has an all-or-nothing images setting, so the library button is hidden here. */
.vxfeed .vxf-actions > .vxf-media-target {
	display: none;
}