/**
 * Community — native-app v2 enhancements.
 *
 * @package Noxora\Apps\Community
 */

/* App shell */
.nx-comm-app--hub {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nx-comm-main {
	max-width: 680px;
	margin: 0 auto;
	padding: var(--nx-space-3, 0.75rem);
}

@media (min-width: 768px) {
	.nx-comm-main {
		padding: var(--nx-space-6, 1.5rem) var(--nx-space-4, 1rem);
	}
}

/* Skeleton feed */
.nx-comm-skeleton__card {
	height: 220px;
	border-radius: var(--nx-radius-xl, 1rem);
	background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
	background-size: 200% 100%;
	animation: nx-comm-sweep 1.4s ease infinite;
	margin-bottom: var(--nx-space-3, 0.75rem);
}

@keyframes nx-comm-sweep {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Compose */
.nx-comm-compose {
	position: sticky;
	top: calc(var(--nx-header-height, 64px) + var(--nx-space-2, 0.5rem));
	z-index: 10;
	border-radius: var(--nx-radius-xl, 1rem);
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: var(--nx-space-4, 1rem);
}

.nx-comm-compose textarea {
	background: transparent;
	color: var(--nx-fg, #ffffff);
	border: 0;
	resize: vertical;
	min-height: 44px;
	max-height: 160px;
	width: 100%;
	font: inherit;
	line-height: 1.5;
}

.nx-comm-compose textarea::placeholder {
	color: var(--nx-muted, #94a3b8);
}

.nx-comm-compose__actions {
	display: flex;
	align-items: center;
	gap: var(--nx-space-2, 0.5rem);
	padding-top: var(--nx-space-3, 0.75rem);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nx-comm-compose__tools {
	display: flex;
	align-items: center;
	gap: var(--nx-space-2, 0.5rem);
	flex: 1 1 auto;
}

.nx-comm-compose__tool {
	min-width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.05);
	color: var(--nx-muted, #94a3b8);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0 0.65rem;
	cursor: pointer;
	font-size: var(--nx-text-xs, 0.75rem);
	font-weight: 500;
	transition: all 0.2s ease;
	backdrop-filter: blur(6px);
}

.nx-comm-compose__tool svg {
	width: 20px;
	height: 20px;
}

.nx-comm-compose__tool:hover,
.nx-comm-compose__tool.is-active {
	background: rgba(246, 230, 184, 0.12);
	border-color: rgba(246, 230, 184, 0.25);
	color: var(--nx-gold, #f6e6b8);
	transform: translateY(-1px);
}

.nx-comm-compose__tool::after {
	display: none;
}

.nx-comm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.65rem 1.5rem;
	border-radius: 12px;
	border: 0;
	background: linear-gradient(135deg, #f6e6b8 0%, #d4af37 100%);
	color: #0a0a0c;
	font-weight: 700;
	font-size: var(--nx-text-sm, 0.875rem);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
	box-shadow: 0 4px 14px rgba(246, 230, 184, 0.18);
}

.nx-comm-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: 0 6px 20px rgba(246, 230, 184, 0.28);
}

.nx-comm-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	filter: none;
}

/* Filters */
.nx-comm-filters {
	display: flex;
	gap: var(--nx-space-2, 0.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--nx-space-1, 0.25rem);
}

.nx-comm-filters::-webkit-scrollbar {
	display: none;
}

.nx-comm-filters button {
	flex: 0 0 auto;
	scroll-snap-align: start;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	color: var(--nx-muted, #94a3b8);
	border-radius: var(--nx-radius-full, 999px);
	padding: 0.5rem 1rem;
	font-size: var(--nx-text-sm, 0.875rem);
	cursor: pointer;
	transition: all 0.2s ease;
}

.nx-comm-filters button.is-active,
.nx-comm-filters button:hover {
	background: var(--nx-accent, #f6e6b8);
	color: #08080a;
	border-color: var(--nx-accent, #f6e6b8);
}

/* Cards */
.nx-comm-card {
	border-radius: var(--nx-radius-xl, 1rem);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	padding: var(--nx-space-4, 1rem);
	margin-bottom: var(--nx-space-3, 0.75rem);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nx-comm-card:active {
	transform: scale(0.995);
}

.nx-comm-card__head {
	display: flex;
	align-items: center;
	gap: var(--nx-space-2, 0.5rem);
	margin-bottom: var(--nx-space-3, 0.75rem);
}

.nx-comm-card__avatar img,
.nx-comm-card__avatar .nx-avatar-frame__img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.nx-comm-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	font-size: var(--nx-text-sm, 0.875rem);
	color: var(--nx-muted, #94a3b8);
}

.nx-comm-card__meta a,
.nx-comm-card__meta strong {
	color: var(--nx-fg, #ffffff);
	font-weight: 600;
}

.nx-comm-card__text {
	line-height: 1.55;
	color: var(--nx-fg, #ffffff);
	margin-bottom: var(--nx-space-3, 0.75rem);
	white-space: pre-wrap;
}

.nx-comm-card__text a {
	color: var(--nx-accent, #f6e6b8);
}

/* Compose media preview */
.nx-comm-compose__media {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--nx-space-2, 0.5rem);
	margin-top: var(--nx-space-3, 0.75rem);
}

.nx-comm-compose__media:has(.nx-comm-compose__media-item:only-child) {
	grid-template-columns: minmax(0, 240px);
}

.nx-comm-compose__media-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--nx-radius-lg, 0.75rem);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.nx-comm-compose__media-item img,
.nx-comm-compose__media-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nx-comm-compose__media-remove {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 0;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

/* Media grid */
.nx-comm-card__media-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nx-space-2, 0.5rem);
	margin-bottom: var(--nx-space-3, 0.75rem);
	border-radius: var(--nx-radius-lg, 0.75rem);
	overflow: hidden;
}

.nx-comm-card__media-grid:has(.nx-comm-card__media-item:only-child) {
	grid-template-columns: 1fr;
}

.nx-comm-card__media-item {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}

.nx-comm-card__media-item img,
.nx-comm-card__media-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nx-comm-card__media-item video {
	object-fit: contain;
	background: #000;
}

.nx-comm-card__media-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.35);
}

.nx-comm-card__media-play::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 20px solid #ffffff;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.nx-comm-card__more-count {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(8, 8, 10, 0.75);
	color: var(--nx-fg, #ffffff);
	font-size: var(--nx-text-xl, 1.25rem);
	font-weight: 700;
}

.nx-comm-card__source {
	display: inline-flex;
	align-items: center;
	gap: var(--nx-space-1, 0.25rem);
	font-size: var(--nx-text-xs, 0.75rem);
	color: var(--nx-accent, #f6e6b8);
	margin-bottom: var(--nx-space-2, 0.5rem);
	text-decoration: none;
}

.nx-comm-card__source::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nx-accent, #f6e6b8);
}

/* Poll */
.nx-comm-poll {
	background: rgba(255, 255, 255, 0.04);
	border-radius: var(--nx-radius-lg, 0.75rem);
	padding: var(--nx-space-3, 0.75rem);
	margin-bottom: var(--nx-space-3, 0.75rem);
}

.nx-comm-poll__question {
	font-weight: 600;
	margin: 0 0 var(--nx-space-2, 0.5rem);
	color: var(--nx-fg, #ffffff);
}

.nx-comm-poll__option {
	position: relative;
	padding: 0.5rem 0.75rem;
	margin-bottom: var(--nx-space-2, 0.5rem);
	border-radius: var(--nx-radius-md, 0.5rem);
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	overflow: hidden;
}

.nx-comm-poll__bar {
	position: absolute;
	inset: 0;
	width: 0;
	background: rgba(246, 230, 184, 0.18);
	transition: width 0.3s ease;
}

.nx-comm-poll__option span,
.nx-comm-poll__option em {
	position: relative;
	z-index: 1;
}

/* Actions */
.nx-comm-card__actions {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-2, 0.5rem);
}

.nx-comm-reactions {
	display: flex;
	gap: var(--nx-space-2, 0.5rem);
	flex-wrap: wrap;
}

.nx-comm-react {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.4rem 0.7rem;
	border-radius: var(--nx-radius-full, 999px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	color: var(--nx-muted, #94a3b8);
	font-size: var(--nx-text-sm, 0.875rem);
	cursor: pointer;
	transition: all 0.15s ease;
}

.nx-comm-react.is-active,
.nx-comm-react:hover {
	background: rgba(246, 230, 184, 0.12);
	color: var(--nx-fg, #ffffff);
	border-color: rgba(246, 230, 184, 0.3);
}

.nx-comm-card__stats {
	display: flex;
	align-items: center;
	gap: var(--nx-space-3, 0.75rem);
	font-size: var(--nx-text-sm, 0.875rem);
	color: var(--nx-muted, #94a3b8);
}

.nx-comm-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: inherit;
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nx-comm-stat:hover {
	color: var(--nx-fg, #ffffff);
}

/* Mobile bottom nav active state */
.nx-comm-mobile-nav__item.is-active {
	color: var(--nx-accent, #f6e6b8);
}

.nx-comm-mobile-nav__item--compose {
	background: linear-gradient(135deg, var(--nx-accent, #f6e6b8), #c9a86c);
	color: #08080a;
	border-radius: var(--nx-radius-full, 999px);
	padding: 0.5rem 1rem;
	gap: 0.4rem;
}

/* Share sheet */
.nx-comm-share-sheet {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: end center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	padding: var(--nx-space-4, 1rem);
}

.nx-comm-share-sheet__panel {
	width: 100%;
	max-width: 400px;
	background: rgba(12, 12, 16, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--nx-radius-xl, 1rem);
	padding: var(--nx-space-4, 1rem);
	animation: nx-comm-slide-up 0.25s ease;
}

@keyframes nx-comm-slide-up {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* App-style pull-to-refresh hint */
.nx-comm-pull-hint {
	display: none;
	text-align: center;
	padding: var(--nx-space-2, 0.5rem);
	color: var(--nx-muted, #94a3b8);
	font-size: var(--nx-text-sm, 0.875rem);
}

.nx-comm-pull-hint.is-visible {
	display: block;
}

/* Ensure profile links are clickable and not masked by legacy frame layers */
html body .nx-comm-profile-link,
html body .nx-comm-comment__author-link,
html body .nx-comm-card__meta a {
	display: inline-block;
	pointer-events: auto !important;
	text-decoration: none;
}

html body .nx-comm-profile-link--avatar,
html body .nx-comm-comment__avatar-link {
	display: inline-flex;
	pointer-events: auto !important;
	position: relative;
	z-index: 2;
}

html body .nx-comm-profile-link--avatar img,
html body .nx-comm-comment__avatar-link img,
html body .nx-comm-comment__avatar-link .nx-afe,
html body .nx-comm-comment__avatar-link .nx-avatar-frame {
	pointer-events: auto !important;
}

/* Force new community grid / feed overrides on mobile */
@media (max-width: 767.98px) {
	html body .nx-comm-main {
		max-width: 680px !important;
		margin: 0 auto !important;
		padding: var(--nx-space-3, 0.75rem) !important;
	}

	html body .nx-comm-filters {
		display: flex !important;
		gap: var(--nx-space-2, 0.5rem) !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		scrollbar-width: none !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: var(--nx-space-1, 0.25rem) !important;
	}

	html body .nx-comm-filters::-webkit-scrollbar {
		display: none !important;
	}

	html body .nx-comm-filters button {
		flex: 0 0 auto !important;
		scroll-snap-align: start !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		background: rgba(255, 255, 255, 0.04) !important;
		color: var(--nx-muted, #94a3b8) !important;
		border-radius: var(--nx-radius-full, 999px) !important;
		padding: 0.5rem 1rem !important;
		font-size: var(--nx-text-sm, 0.875rem) !important;
	}

	html body .nx-comm-filters button.is-active,
	html body .nx-comm-filters button:hover {
		background: var(--nx-accent, #f6e6b8) !important;
		color: #08080a !important;
		border-color: var(--nx-accent, #f6e6b8) !important;
	}

	html body .nx-comm-card {
		border-radius: var(--nx-radius-xl, 1rem) !important;
		background: rgba(255, 255, 255, 0.03) !important;
		border: 1px solid rgba(255, 255, 255, 0.05) !important;
		padding: var(--nx-space-4, 1rem) !important;
		margin-bottom: var(--nx-space-3, 0.75rem) !important;
	}

	html body .nx-comm-card__media-grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--nx-space-2, 0.5rem) !important;
		border-radius: var(--nx-radius-lg, 0.75rem) !important;
		overflow: hidden !important;
	}

	html body .nx-comm-card__media-grid:has(.nx-comm-card__media-item:only-child) {
		grid-template-columns: 1fr !important;
	}

	html body .nx-comm-card__media-item {
		position: relative !important;
		aspect-ratio: 1 !important;
		overflow: hidden !important;
		background: rgba(255, 255, 255, 0.04) !important;
	}

	html body .nx-comm-card__media-item img,
	html body .nx-comm-card__media-item video {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}

	html body .nx-comm-compose {
		position: sticky !important;
		top: calc(var(--nx-header-height, 64px) + var(--nx-space-2, 0.5rem)) !important;
		z-index: 10 !important;
		border-radius: var(--nx-radius-xl, 1rem) !important;
		background: rgba(255, 255, 255, 0.04) !important;
		backdrop-filter: blur(14px) !important;
		-webkit-backdrop-filter: blur(14px) !important;
		border: 1px solid rgba(255, 255, 255, 0.06) !important;
		margin-bottom: var(--nx-space-4, 1rem) !important;
	}

	html body .nx-comm-card__head {
		display: flex !important;
		align-items: center !important;
		gap: var(--nx-space-2, 0.5rem) !important;
		margin-bottom: var(--nx-space-3, 0.75rem) !important;
	}

	html body .nx-comm-card__avatar img,
	html body .nx-comm-card__avatar .nx-avatar-frame__img,
	html body .nx-comm-card__avatar .nx-afe {
		width: 40px !important;
		height: 40px !important;
		border-radius: 50% !important;
		object-fit: cover !important;
	}
}

/* Nested comments and replies */
.nx-comm-comment__foot {
	margin-top: var(--nx-space-2, 0.5rem);
	min-height: 0;
}

.nx-comm-comment__reply-toggle {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--nx-accent, #f6e6b8);
	font-size: var(--nx-text-sm, 0.8125rem);
	font-weight: 500;
	cursor: pointer;
}

.nx-comm-comment__reply-toggle:hover {
	text-decoration: underline;
}

.nx-comm-comment-form--reply {
	margin-top: var(--nx-space-2, 0.5rem);
	padding-left: var(--nx-space-3, 0.75rem);
}

.nx-comm-comment-form--reply textarea {
	min-height: 40px;
	max-height: 100px;
	padding: 0.5rem 0.75rem;
	font-size: var(--nx-text-sm, 0.8125rem);
}

.nx-comm-comment__replies {
	margin-top: var(--nx-space-2, 0.5rem);
	padding-left: var(--nx-space-4, 1rem);
	border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.nx-comm-comment__replies[hidden] {
	display: none;
}

.nx-comm-comment--nested {
	margin-left: var(--nx-space-4, 1rem);
	background: transparent;
	border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.nx-comm-card__source {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--nx-text-xs, 0.75rem);
	color: var(--nx-gold, #f6e6b8);
	text-decoration: none;
	margin-bottom: var(--nx-space-2, 0.5rem);
}

.nx-comm-card__source:hover {
	text-decoration: underline;
}

.nx-comm-compose__source {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--nx-space-3, 0.75rem);
	padding: 0.75rem 1rem;
	background: rgba(246, 230, 184, 0.08);
	border: 1px solid rgba(246, 230, 184, 0.18);
	border-radius: 12px;
	font-size: var(--nx-text-sm, 0.8125rem);
}

.nx-comm-compose__source-thumb {
	width: 64px;
	height: 40px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.nx-comm-compose__source-label {
	color: var(--nx-gold, #f6e6b8);
	flex: 1 1 auto;
}

.nx-comm-compose__source-link {
	color: var(--nx-cyan, #00f0ff);
	text-decoration: none;
	font-weight: 500;
}

.nx-comm-compose__source-link:hover {
	text-decoration: underline;
}