:root {
	/* Layout */
	--padding-inline: 2rem;
	--max-display-width: 1440px;
	--content-max-width: 1024px;
	--header-height: 48px;
	--sidebar-width: 240px;
	--sidebar-gap: 2rem;
	--breakout-max-width: 1280px;
	--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
	--border-radius: 8px;

	/* Spacing scale */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 0.75rem;
	--space-lg: 1rem;
	--space-xl: 1.5rem;
	--space-2xl: 2rem;

	/* Button padding (small / normal / large) */
	--btn-pad-sm: 0.15rem 0.4rem;
	--btn-pad: 0.3rem 0.625rem;
	--btn-pad-lg: 0.4rem 0.875rem;

	/* Field padding */
	--field-pad: 0.375rem 0.625rem;

	color-scheme: light dark;

	--success-color:rgb(58, 172, 105);
	--warn-color:rgb(247, 180, 73);
	--error-color:rgb(192, 74, 61);
	--cre8-blue: #2563eb;
	--cre8-blue-dark: #010747;

	/* Base (user-selected) */
	--user-base-color: #0c2141; /* JS updates this */
	--text-on-dark: #ffffff;
	--text-on-light: #000000;
	--text-on-accent: #ffffff; /* JS updates this */
	/* Small helpers */
	--swatch-border: rgba(0,0,0,.25);
	/* Popup menus (site header, etc.) */
	--menu-popup-border-color: var(--neutral-4);
	--menu-popup-heading-bg: var(--neutral-2);
	--menu-popup-body-bg: var(--neutral-2);
	--menu-popup-entry-bg: var(--neutral-3);
	--menu-popup-color: var(--neutral-9);
	--menu-popup-hover-bg: var(--accent-7);
	--menu-popup-hover-color: var(--text-on-accent);


	--entity-status-accepted: oklch(from var(--success-color) l c h / .75);
	--entity-status-pending: oklch(from var(--warn-color) l c h / .75);
	--entity-status-blocked: oklch(from var(--error-color) l c h / .75);
	--entity-status-border: oklch(from var(--cre8-blue) l c h );
} 
html:root {
	/* Theme ramps (always 1=lightest → 9=darkest) - JS overwrites these */
	--neutral-1: oklch(0.9800 0.0106 258.70);
	--neutral-2: oklch(0.9300 0.0106 258.70);
	--neutral-3: oklch(0.8800 0.0106 258.70);
	--neutral-4: oklch(0.8000 0.0106 258.70);
	--neutral-5: oklch(0.7000 0.0106 258.70);
	--neutral-6: oklch(0.5800 0.0106 258.70);
	--neutral-7: oklch(0.4600 0.0106 258.70);
	--neutral-8: oklch(0.3400 0.0106 258.70);
	--neutral-9: oklch(0.2200 0.0106 258.70);

	--accent-1: oklch(0.9800 0.0953 258.70);
	--accent-2: oklch(0.9300 0.0953 258.70);
	--accent-3: oklch(0.8800 0.0953 258.70);
	--accent-4: oklch(0.8000 0.0953 258.70);
	--accent-5: oklch(0.7000 0.0953 258.70);
	--accent-6: oklch(0.5800 0.0953 258.70);
	--accent-7: oklch(0.4600 0.0953 258.70);
	--accent-8: oklch(0.3400 0.0953 258.70);
	--accent-9: oklch(0.2200 0.0953 258.70);

	/* Semantic text */
	--text-muted: var(--neutral-7);

	/* Document structure (contract layer — light mode) */
	--body-background-color: var(--neutral-1);
	--body-color: var(--neutral-9);

	--header-background-color: var(--neutral-2);
	--header-color: var(--neutral-9);
	--header-border-color: var(--neutral-4);

	--footer-background-color: var(--neutral-2);
	--footer-color: var(--neutral-9);
	--footer-border-color: var(--neutral-4);

	--page-header-background-color: var(--neutral-2);
	--page-header-color: var(--neutral-9);

	--link-color: var(--accent-7);
	--link-hover-color: var(--accent-6);
	--link-focus-color: var(--accent-7);
	--link-active-color: var(--accent-5);

	/* UX Components (contract layer — light mode) */
	--accent-color: var(--accent-7);

	/* Toolbars */
	--toolbar-bg: oklch(from var(--accent-3) l c h / .6);
	--toolbar-color: var(--accent-9);
	--toolbar-border: var(--neutral-4);
	--toolbar-hover-bg: var(--accent-5);
	--toolbar-hover-color: var(--text-on-light);

	/* Panels */
	--panel-border-color: var(--neutral-4);
	--panel-bg: var(--neutral-2);
	--panel-heading-bg: var(--neutral-3);
	--panel-footing-bg: var(--neutral-3);
	--panel-body-bg: var(--neutral-2);
	--panel-button-border: var(--accent-7);
	--panel-button-bg: oklch(from var(--accent-7) l c h / .15);

	/* Messages */
	--message-bg: var(--accent-5);
	--message-self-bg: var(--neutral-5);

	/* Typography */
	--typo-color: var(--body-color);
	--typo-bg: var(--neutral-2);

	/* Forms */
	--form-bg: var(--neutral-2);
	--form-border-color: var(--neutral-6);
	--form-field-bg: var(--neutral-4);
	--form-field-color: var(--neutral-9);
	--form-field-border-color: var(--neutral-6);
	--form-field-readonly-bg: var(--neutral-5);
	--form-field-readonly-color: var(--neutral-8);
	--form-field-readonly-border-color: var(--neutral-4);
	--form-field-disabled-bg: var(--neutral-5);

	/* Buttons */
	--button-primary-border-color: var(--accent-8);
	--button-primary-bg: var(--accent-4);
	--button-primary-hover-bg: var(--accent-5);
	--button-primary-color: var(--text-on-accent);
	--button-primary-hover-color: var(--text-on-accent);

	--button-secondary-border-color: var(--neutral-4);
	--button-secondary-bg: var(--neutral-3);
	--button-secondary-hover-bg: var(--neutral-4);
	--button-secondary-color: var(--body-color);
	--button-secondary-hover-color: var(--body-color);

	/* Toggle switch */
	--toggle-off-color: var(--neutral-6);
	--toggle-on-color: var(--success-color);
	--toggle-border-width: 1px;
	--toggle-border-color: var(--neutral-5);

	/* Danger/destructive states */
	--danger-bg: oklch(from var(--error-color) 0.95 0.02 30);
	--danger-border: oklch(from var(--error-color) 0.75 0.10 30);
	--danger-text: oklch(from var(--error-color) 0.40 0.15 30);
	--danger-hover: oklch(from var(--error-color) 0.90 0.04 30);
}

/* ---- Dark mode (auto-detected from user's color pick) ---- */
html:root[data-dark] {
	--text-muted: var(--neutral-3);

	--body-background-color: var(--neutral-9);
	--body-color: var(--neutral-1);

	--header-background-color: var(--neutral-8);
	--header-color: var(--neutral-1);
	--header-border-color: var(--neutral-6);

	--footer-background-color: var(--neutral-8);
	--footer-color: var(--neutral-1);
	--footer-border-color: var(--neutral-6);

	--page-header-background-color: var(--neutral-8);
	--page-header-color: var(--neutral-1);

	--link-color: var(--accent-3);
	--link-hover-color: var(--accent-4);
	--link-focus-color: var(--accent-3);
	--link-active-color: var(--accent-5);

	--accent-color: var(--accent-3);

	--toolbar-bg: oklch(from var(--accent-7) l c h / .6);
	--toolbar-color: var(--accent-1);
	--toolbar-border: var(--neutral-6);
	--toolbar-hover-bg: var(--accent-5);
	--toolbar-hover-color: var(--text-on-dark);

	--panel-border-color: var(--neutral-6);
	--panel-bg: var(--neutral-8);
	--panel-heading-bg: var(--neutral-7);
	--panel-footing-bg: var(--neutral-7);
	--panel-body-bg: var(--neutral-8);
	--panel-button-border: var(--accent-3);
	--panel-button-bg: oklch(from var(--accent-3) l c h / .15);

	--message-bg: var(--accent-5);
	--message-self-bg: var(--neutral-5);

	--typo-color: var(--body-color);
	--typo-bg: var(--neutral-8);

	--form-bg: var(--neutral-8);
	--form-border-color: var(--neutral-6);
	--form-field-bg: var(--neutral-9);
	--form-field-color: var(--neutral-1);
	--form-field-border-color: var(--neutral-6);
	--form-field-readonly-bg: var(--neutral-8);
	--form-field-readonly-color: var(--neutral-2);
	--form-field-readonly-border-color: var(--neutral-6);
	--form-field-disabled-bg: var(--neutral-7);

	--button-primary-border-color: var(--accent-2);
	--button-primary-bg: var(--accent-6);
	--button-primary-hover-bg: var(--accent-5);
	--button-primary-color: var(--text-on-accent);
	--button-primary-hover-color: var(--text-on-accent);

	--button-secondary-border-color: var(--neutral-6);
	--button-secondary-bg: var(--neutral-7);
	--button-secondary-hover-bg: var(--neutral-6);
	--button-secondary-color: var(--body-color);
	--button-secondary-hover-color: var(--body-color);

	--menu-popup-border-color: var(--neutral-6);
	--menu-popup-heading-bg: var(--neutral-8);
	--menu-popup-body-bg: var(--neutral-8);
	--menu-popup-entry-bg: var(--neutral-7);
	--menu-popup-color: var(--neutral-1);
	--menu-popup-hover-bg: var(--accent-3);

	--toggle-off-color: var(--neutral-5);
	--toggle-on-color: var(--success-color);
	--toggle-border-width: 1px;
	--toggle-border-color: var(--neutral-6);

	/* Danger/destructive states */
	--danger-bg: oklch(from var(--error-color) 0.25 0.04 30);
	--danger-border: oklch(from var(--error-color) 0.40 0.10 30);
	--danger-text: oklch(from var(--error-color) 0.80 0.12 30);
	--danger-hover: oklch(from var(--error-color) 0.30 0.06 30);
}

html {
	background:var(--user-base-color);
}
body {
	margin: 0;
	font-family: sans-serif;
	background-color: var(--body-background-color);
	color: var(--body-color);
	transition: background-color 0.3s, color 0.3s;
}

/* ---------------------------------- */
/*  UX Components (Contracts)         */
/*  - IDs are JS anchors only         */
/*  - Classes define styling          */
/* ---------------------------------- */

/* Toolbars */
.toolbar-controls{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:0.5rem;
	overflow:hidden;
}
.toolbar-controls > *{
	flex:0 0 auto;
}
.toolbar-controls .toolbar-icon{
	width:36px;
	height:auto;
}
@media (width < 768px){
	.toolbar-controls .toolbar-icon{
		width:28px;
		height:auto;
	}
}
.toolbar-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.5rem;
	padding:var(--btn-pad-lg);
	border:1px solid transparent;
	border-radius: var(--border-radius);
	background: transparent;
	color: inherit;
	cursor:pointer;
	user-select:none;
	box-sizing: border-box;
}
.toolbar-button:hover,
.toolbar-button:focus-visible{
	background: var(--toolbar-hover-bg);
	color: var(--toolbar-hover-color);
}
.toolbar-button.is-primary{
	background: var(--toolbar-hover-bg);
	color: var(--toolbar-hover-color);
}
.toolbar-button.is-selected{
	outline:2px solid currentColor;
	outline-offset:2px;
}
.toolbar-button.is-disabled,
.toolbar-button[disabled]{
	opacity:.5;
	cursor:not-allowed;
	pointer-events:none;
}

/* Icon sizing utilities */
.icon-sm svg { width: 16px; height: 16px; }
.icon svg    { width: 24px; height: 24px; }
.icon-lg svg { width: 36px; height: 36px; }

/* Forms */
.form{
	display:grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (width >= 768px){
	.form{
		grid-template-columns: 1fr 1fr;
	}
}
.form-row{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:1rem;
}
.form-label{
	display:block;
	margin-block-end:0.25rem;
}
.form-control{
	width:100%;
	max-width:100%;
	padding:var(--field-pad);
	border-radius: var(--border-radius);
	border:1px solid var(--form-border-color);
	background: var(--form-field-bg);
	color: var(--form-field-color);
}
.form-control:focus-visible{
	outline:2px solid var(--accent-color);
	outline-offset:2px;
}
.form-actions{
	grid-column: 1 / -1;
	display:flex;
	justify-content:flex-end;
	gap:0.5rem;
}
.form-hint{
	grid-column: 1 / -1;
	font-size: .95rem;
	opacity:.85;
}
.name-check-hint {
	display: block;
	margin-top: 4px;
}
.hint-success { color: var(--entity-status-accepted); opacity: 1; }
.hint-error { color: var(--error-color); opacity: 1; }
.form-error{
	grid-column: 1 / -1;
	font-size: .95rem;
	color: var(--error-color);
}

/* ============================================
 * UX Components: Panels
 * ============================================ */
.panel {
	border-radius: var(--border-radius);
	margin-block-start: 1rem;
	background: var(--panel-body-bg);
	background-clip: padding-box;
	border: 1px solid var(--panel-border-color);
}
.panel-header{
	background: var(--panel-heading-bg);
	border-bottom: 1px solid var(--panel-border-color);
	padding: 0.5rem 0.75rem;
}
.panel-header h4 {
	margin: 0;
}
.panel-body{
	padding: 0.75rem;
}
.panel-footer{
	background: var(--panel-heading-bg);
	border-top: 1px solid var(--panel-border-color);
	padding: 0.5rem 0.75rem;
}
.panel-toolbar{
	background: var(--toolbar-bg);
	color: var(--toolbar-color);
	border-bottom: 1px solid var(--toolbar-border);
	padding: .75rem 1rem;
}
.panel-controls{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:0.5rem;
}
.panel-hint{
	font-size:.95rem;
	opacity:.85;
}
.topic-multiuploader-dialog[open],
#multiuploader-dialog[open] {
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}
.mu-header, .mu-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	flex-shrink: 0;
}
.mu-dropzone {
	padding: 1rem;
	flex-shrink: 0;
}
.img-preview-grid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow-y: auto;
	min-height: 0;
	max-height: 40vh;
}
.img-preview-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.375rem;
	border: 1px solid var(--panel-border-color, #ddd);
	border-radius: 4px;
	position: relative;
	transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.img-preview-item[draggable="true"] { cursor: grab; }
.img-preview-item.dragging { opacity: 0.4; }
.img-preview-item.drag-over { border-color: var(--theme-color, #4a90d9); box-shadow: 0 0 0 2px var(--theme-color, #4a90d9); }
.img-preview-item img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.img-preview-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}
.img-preview-desc,
.img-preview-tags {
	width: 100%;
	font-size: 13px;
}
.img-preview-remove {
	position: absolute;
	top: 4px;
	left: 4px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
	cursor: pointer;
	padding: 0;
}
.img-preview-remove:hover {
	background: rgba(200,0,0,0.8);
}
/* Lists + empty states */
.list{
	display:flex;
	flex-direction:column;
}
.list-row{
	display:flex;
	align-items:center;
	gap:1rem;
	padding:.75rem 1rem;
	border-bottom: 1px solid var(--panel-border-color);
}
.list-row-main{
	min-width:0;
	flex:1 1 auto;
}
.list-row-meta{
	flex:0 0 auto;
	opacity:.85;
	font-size:.95rem;
}
.list-row-actions{
	flex:0 0 auto;
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:0.5rem;
}
.empty-state{
	padding: 1rem;
	opacity:.85;
	font-size: .95rem;
}

/* Buttons (shared) */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.5rem;
	padding:var(--btn-pad);
	border-radius: var(--border-radius);
	border:1px solid transparent;
	cursor:pointer;
	user-select:none;
	text-decoration:none;
	font:inherit;
}
.btn.is-selected{
	outline:2px solid currentColor;
	outline-offset:2px;
}
.btn.is-disabled,
.btn[disabled]{
	opacity:.5;
	cursor:not-allowed;
	pointer-events:none;
}


/*****************************/
/*  Grid Layout Definitions  */
.page-grid{
	margin-block:1rem;
	min-height:100vh;
	display:grid;
	gap:1rem;
	margin-inline:auto;
	grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
	grid-template-rows: 1fr;
	grid-template-areas:
	"laside center raside";
}
.banner-grid {
	display: grid;
	margin: 0; padding: 0; inset:0;
	grid-template-rows:
	[banner-start avatar-start displayname-start]
	1fr
	[toolbar-start displayname-end avatar-end]
	auto
	[toolbar-end banner-end];
	grid-template-columns: [banner-start toolbar-start] 24px [avatar-start] auto [avatar-end displayname-start] 1fr [displayname-end toolbar-end banner-end];
}

.post-grid{
	display:grid;
	margin:0;padding:0;inset:0;
	gap:0.5rem;
	grid-template-columns: [post-avatar-start] 40px [post-avatar-end post-heading-start] 1fr [post-heading-end post-menu-start] 24px [post-menu-end];
	grid-template-rows: 
	[post-avatar-start]40px[post-avatar-end post-text-start]
	auto
	[post-text-end post-image-start]
	auto
	[post-image-end post-tag-start]
	24px
	[post-tag-end post-react-start]
	24px
	[post-react-end post-comment-start]
	auto
	[post-comment-end];
	grid-template-areas:
	"post-avatar post-heading post-menu"
	"post-text post-text post-text"
	"post-image post-image post-image"
	"post-tag post-tag post-tag"
	"post-react post-react post-react"
	". post-comment post-comment";
}

.message-window-grid {
	display:grid;
	margin:0; padding:0;inset:0;
	gap: 0;
	grid-template-columns: 1fr;
	grid-template-rows: [message-window-header-start]
	auto
	[message-window-header-end message-window-body-start]
	1fr
	[message-window-body-end message-window-input-start]
	auto
	[message-window-input-end message-window-toolbar-start]
	auto
	[message-window-toolbar-end];
	grid-template-areas:
	"message-window-header"
	"message-window-body"
	"message-window-input"
	"message-window-toolbar"
}

.page-list-grid {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	align-items: center;
	justify-content: center;
	margin-block: 1rem;
}

.banner-image, .banner-cam {
	grid-area: banner;
}
.avatar-image, .avatar-cam{
	grid-area: avatar;
}
.toolbar {
	margin:0;
	padding:0;
	grid-area: toolbar;
	z-index: 2;
	background:var(--toolbar-bg);
}
.page-banner {
	width:100%;
	height:auto;
	max-height:400px;
	margin:0;
	padding:0;
	border-radius: var(--border-radius);
}
.page-avatar {
	width:100%;
	height:auto;
	max-width: 180px;
	border-radius: 50%;
	margin-top:10px;
	filter: drop-shadow(10px 10px 12px #000000); /* Offset-x, offset-y, blur, color */
}
.displayname, .page-title {
	grid-area: displayname;
	font-size: 2rem;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75);
	align-self: center;
	padding-left: 1rem;
	color: var(--text-on-dark);
	z-index: 1;
}
.banner-image,
.avatar-image {
	position: relative;
	z-index: 1;
}
.author-icon {
	border:transparent;
	border-radius: 50%;
	width: 48px;
	height: auto;
}
.camera-icon {
	position: absolute;
	z-index: 10;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.2s ease;
	pointer-events: auto;
}
.camera-icon:hover {
	opacity: 1;
}
.avatar-cam {
	top: 8px; right: 8px; 
}
.banner-cam {
	top: 2px; left: 2px; 
}
/* Medium: 2 columns (left + content), right aside hidden */
@media (width < 1024px) {
	.page-grid {
		grid-template-rows: 1fr;
		grid-template-columns: var(--sidebar-width) 1fr;
		grid-template-areas:
		"laside center";
	}
	.right-aside {
		display: none;
	}
	.page-avatar{
		max-width:120px;
	}
	.displayname, .page-title {
		font-size: 1.75rem;
	}
}
/* Small: 1 column, asides hidden */
@media (width < 768px) {
	.page-grid {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		grid-template-areas:
		"center";
	}
	.left-aside,
	.right-aside {
		display: none;
	}
	.page-avatar{
		max-width:80px;
	}
	.page-title {
		font-size: 1.5rem;
	}
	body {
		font-weight: 800;
		font-size: larger;
		-webkit-text-stroke: 0.1px currentColor;
	}
}
@media (width < 512px) {
	body{
		font-weight: 800;
		font-size: x-large;
		-webkit-text-stroke: 0.1px currentColor;
	}
	.page-avatar{
		max-width:60px;
	}
	.page-title {
		font-size: 1rem;
	}
}

/* ============================================
 * Card Grid Layout (Advanced)
 * ============================================ */
.card-grid {
	display:grid;
	grid-template-areas:
		"banner"
		"details";
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--panel-border-color);
	border-radius: 12px;
	background: var(--panel-bg);
	max-width: 400px;
}
.card-banner{ grid-area: banner; }
.card-avatar{ grid-area: banner; z-index: 1; justify-self:start; align-self:start; }
.card-status{grid-area: banner; z-index: 1; justify-self:end; align-self:start;}
.card-details{ grid-area: banner; z-index: 1; justify-self: start; align-self: end; }
/*.card-details{ grid-area: details; }*/

.flex-gap {
	display: flex;
	align-items: center;
	gap:1rem;
}
.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.message-window-header {
	grid-area: message-window-header;
	padding-block:4px;
}
.message-window-body {
	grid-area: message-window-body;
	padding-block:4px;
}
.message-window-input {
	grid-area: message-window-input;
	padding-block:4px;
}
.message-window-toolbar {
	grid-area: message-window-toolbar;
	padding-block:4px;
}

/*****************************/
/*      HTML Doc Resets      */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	overflow-x: clip;
}

body {
	display: flex;
	flex-direction: column;
	height:100%;
	min-height: 100vh;
	accent-color: var(--accent-7);
	font-size: 1rem;
	font-family: system-ui, sans-serif;
	color: var(--body-color);
}

html.modal-open,
body.modal-open {
	overflow: hidden;
	touch-action: none;
}
body.modal-open{
	position: fixed;
	width: 100%;
	overflow: hidden;
}


/* --------------------------------
 * Dialog contract (<dialog>)
 * -------------------------------- */
dialog {
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	padding: 0;
	background: var(--panel-bg);
	color: var(--body-color);
	width: min(90vw, var(--dlg-w, 420px));
	max-width: var(--dlg-w, 420px);
	inset: 0;
	margin: auto;
}
dialog::backdrop {
	background: rgba(0,0,0,.6);
}
/* Per-dialog width overrides */
#newChannelDialog     { --dlg-w: 520px; }
#appeal-review-dialog { --dlg-w: 540px; }
#topic-create-modal   { --dlg-w: 600px; }
#topic-create-modal .dialog-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
#topic-create-modal .modal-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
#topic-create-modal .modal-option label {
	white-space: nowrap;
}
#topic-create-modal .modal-option select {
	flex: 1;
}

.dialog-header,
.dialog-body,
.dialog-footer {
	padding: 0.75rem 1rem;
}
.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: var(--panel-heading-bg);
	border-bottom: 1px solid var(--panel-border-color);
}
.dialog-title {
	font-weight: 700;
	font-size: 16px;
	margin: 0;
}
.dialog-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	padding: 0 0.25rem;
	line-height: 1;
	color: var(--button-secondary-color);
}
.dialog-close:hover {
	color: var(--button-secondary-hover-color);
}
.dialog-body-scroll {
	max-height: 60vh;
	overflow-y: auto;
}
dialog form {
	display: block;
}
.dialog-footer {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	background: var(--panel-footing-bg);
	border-top: 1px solid var(--panel-border-color);
}
.modal-controls {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
}
@media (width < 512px) {
	dialog {
		width: min(96vw, var(--dlg-w, 420px));
		max-width: 96vw;
	}
	.dialog-header,
	.dialog-body,
	.dialog-footer {
		padding: 0.5rem 0.75rem;
	}
	.dialog-body-scroll {
		max-height: 50vh;
	}
	.modal-controls {
		padding: 0.5rem 0.75rem;
	}
}

/*****************************/
/*     Grid Column Layout    */
/* LEGACY DISABLED: global <header> rule applied z-index/GRID styling to ALL headers (including .page-header/banner),
 * causing the page header to paint above the site-header popup menus.
 * Scoped to header.site-header below.
 */
/*
header {
	grid-column: header;
	width:100%;
	min-height: var(--header-height);
	color: var(--header-color);
	background: var(--header-background-color);
	border-bottom: 1px solid var(--header-border-color);
	position: relative;
	z-index: 5000;
	overflow: visible;
}
*/

header.site-header {
	width:100%;
	min-height: var(--header-height);
	color: var(--header-color);
	background: var(--header-background-color);
	border-bottom: 1px solid var(--header-border-color);
	position: sticky;
	top: 0;
	z-index: 5000;
	overflow: visible;
}
main {
	display: contents;
}
main.form-layout {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
footer {
	width:100%;
	background: var(--footer-background-color);
	color: var(--footer-color);
	border-top: 1px solid var(--footer-border-color);
	margin-block-start: 2rem;
	padding-block: 2rem;
}
.right-align {
	text-align: right;
}
.site-header {
	color: var(--header-color);
}

.site-footer {
	color: var(--footer-color);
}

.content-wrapper {
	flex: 1;
	width: 100%;
	max-width: var(--max-display-width);
	margin-inline: auto;
	padding-inline: 1rem;
}
.auth-wrapper {
	width: 100%;
}
.center-content {
	grid-column: center;
	padding-top:1rem;
	min-width: 0;
	overflow-x: hidden;
}
.left-aside{
	grid-column: laside;
	align-content: start;
}
.right-aside{
	grid-column: raside;
	align-content: start;
	overflow-x: hidden;
	min-width: 0;
}
.page-header{
	background-color: var(--page-header-background-color);
	border-radius: var(--border-radius);
	overflow: hidden;
}
.medium {
	font-size: .85rem;
}
.small {
	font-size: .75rem;
}
.tiny {
	font-size: .55rem;
}

/*****************************/
/*  Navigation Menus  */
nav ul {
	list-style: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap:2rem;
}

nav li {
	height: 48px;
}

nav a {
	height: 100%;
	text-decoration: none;
	display: flex;
	align-items: center;
	color: var(--link-color);
}

.toolbar-icon {
	color: var(--toolbar-color);
}
.toolbar-icon:hover {
	color: var(--toolbar-hover-color);
	background: var(--toolbar-hover-bg);
}
.menu-button {
	border: 0;
	border-radius: 4px;
	color:var(--toolbar-color);
}
.menu-button:hover {
	color:var(--toolbar-hover-color);
	background-color: var(--toolbar-hover-bg);
}

/*****************************/
/*        Mobile Menu        */
.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: min(100vw, var(--sidebar-width));
	z-index: 9999;
	background: var(--menu-popup-body-bg, var(--neutral-2));
	border-left: 1px solid var(--menu-popup-border-color, var(--neutral-4));
	box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
	display: none;
	padding: .5rem;
	overflow-y: auto;
}
.mobile-menu.show {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.125rem;
}
.mobile-menu li {
	height: auto;
	list-style: none;
}
.mobile-menu a {
	display: block;
	width: 100%;
	padding: .6rem .75rem;
	border-radius: var(--border-radius);
	background: var(--menu-popup-entry-bg, var(--neutral-3));
	color: var(--menu-popup-color, var(--neutral-9));
	text-decoration: none;
	margin-bottom: .35rem;
}
.mobile-menu a:hover {
	background: var(--menu-popup-hover-bg, var(--accent-7));
	color: var(--menu-popup-hover-color, var(--text-on-accent, var(--neutral-1)));
}
.mobile-menu .mobile-menu-divider {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: .5rem .75rem .25rem;
}

.mobile-menu-button {
	display: none;
}
.mobile-menu .mobile-menu-link {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: .6rem .75rem;
	border-radius: var(--border-radius);
	background: var(--menu-popup-entry-bg, var(--neutral-3));
	color: var(--menu-popup-color, var(--neutral-9));
	text-decoration: none;
	border: none;
	font: inherit;
	cursor: pointer;
	text-align: left;
	margin-bottom: .35rem;
}
.mobile-menu .mobile-menu-link:hover {
	background: var(--menu-popup-hover-bg, var(--accent-7));
	color: var(--menu-popup-hover-color, var(--text-on-accent, var(--neutral-1)));
}
.mobile-menu .mobile-menu-link svg {
	flex-shrink: 0;
}
.mobile-menu .mobile-menu-locked {
	opacity: 0.5;
	cursor: default;
}
.mobile-menu .mobile-menu-locked:hover {
	background: none;
	color: inherit;
}
.mobile-badge {
	margin-left: auto;
	background: var(--error-color);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
	line-height: 1.2;
	display: none;
}
.mobile-menu-color-input {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border: 2px solid var(--neutral-5);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}
.mobile-menu-color-input::-webkit-color-swatch-wrapper {
	padding: 0;
}
.mobile-menu-color-input::-webkit-color-swatch {
	border: none;
	border-radius: 50%;
}
.mobile-menu-color-input::-moz-color-swatch {
	border: none;
	border-radius: 50%;
}

@media (width < 768px) {
	.hideIfMobile {
		display: none;
	}
	.mobile-menu-button {
		display: block;
	}
	body {
		font-weight: 800;
		font-size: larger;
		-webkit-text-stroke: 0.1px currentColor;
	}
	.popup-menu-panel[data-popup-panel="notifications"] {
		width: calc(100vw - 16px);
		max-width: none;
	}
	#mobile-channels-panel {
		width: calc(100vw - 16px);
		max-width: none;
	}
	#mobile-channels-panel .popup-menu-body {
		max-height: calc(70vh - 90px);
		overflow-y: auto;
	}
}
/* Main Menu */
.title{
	font-size: 1.5rem;
	font-weight: 700;
	padding-left: 0.5rem;
	color: var(--link-color);
}
.menu-flex {
	display:flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.menu-avatar {
	width:32px;
	height:auto;
	border-radius: 50%;
}
input[type="file"] {
	display: flex;
	gap: 1rem;
	align-items: center;
	background:var(--button-primary-bg);
}
.secondary {
	display:flex;
	gap:1rem;
	align-items:center;
	background: var(--button-secondary-bg);
}
.menu-popup {
	display:block;
}
.menu-message {
	display:block;
}
.menu-friend {
	display: block;
}
.menu-notifications {
	display: block;
}
.menu-popup-wrapper{
	display:grid;
	position: fixed;
	border-radius: var(--border-radius);
	margin-block-start: 1rem;
	background: var(--menu-popup-body-bg, var(--neutral-2));
	border: 1px solid var(--menu-popup-border-color, var(--neutral-4));
	max-width:400px;
	margin: 0;
	z-index: 2147480001;
}
.menu-popup-body{
	display:grid;
	align-items:center;
	gap:.5rem;
	overflow-y: auto;
	background: var(--menu-popup-body-bg, var(--neutral-2));
	color: var(--menu-popup-color, var(--neutral-9));
	/* LEGACY DISABLED
	color:var(--text-on-dark);
	*/
}
.menu-popup-entry {
	display:flex;
	align-items:flex-start;
	gap:1rem;
	background: var(--menu-popup-entry-bg, var(--neutral-3));
	padding: .5rem;
	border-radius: var(--border-radius);
}
.menu-popup-entry:hover {
	background: var(--menu-popup-hover-bg, var(--accent-7));
	color: var(--menu-popup-hover-color, var(--text-on-accent, var(--neutral-1)));
}
.menu-popup-details {
	line-height: .8rem;
}
.notification-details{
	display:flex;
	flex-wrap: wrap;
}
.notification-source {
	display: flex;
	align-items: center;
	justify-items: flex-start;
	gap: 1rem;
}
.notification-icon-wrapper{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap:2rem;
	width:100%;
}
.notification-options {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:1rem;
}
	/* LEGACY DISABLED: DEBUG - popup visibility */
.menu-popup-wrapper,
.menu-popup-entry {
	outline: none;
	outline-offset: 0;
}

/* --------------------------------
 * Popup menu contract (site header)
 * -------------------------------- */
.popup-menu-wrapper {
	position: relative;
}
.popup-menu-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding-top:6px;
}
.popup-menu-panel {
	display: grid;
	position: fixed;
	top: 0;
	left: 0;
	min-width: 280px;
	max-width: 480px;
	border-radius: var(--border-radius);
	background: var(--menu-popup-body-bg, var(--neutral-2));
	border: 1px solid var(--menu-popup-border-color, var(--neutral-4));
	color: var(--menu-popup-color, var(--neutral-9));
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	z-index: 2147480000;
}
.popup-menu-panel.hidden {
	display: none;
}
.popup-menu-heading {
	padding: .5rem;
	border-bottom: 1px solid var(--menu-popup-border-color, var(--neutral-4));
	background: var(--menu-popup-body-bg, var(--neutral-2));
}
.popup-menu-body {
	display: grid;
	gap: .5rem;
	padding: .5rem;
	max-height: 70vh;
	overflow: auto;
	background: var(--menu-popup-body-bg, var(--neutral-2));
}
.popup-menu-entry {
	display: flex;
	align-items: flex-start;
	gap: 1rem;

	padding: .5rem;
	border-radius: var(--border-radius);
	background: var(--menu-popup-entry-bg, var(--neutral-3));
	color: inherit;
	text-decoration: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}
.popup-notification-entry {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: .5rem;
	border-radius: var(--border-radius);
	background: var(--menu-popup-entry-bg, var(--neutral-3));
	color: inherit;
	text-decoration: none;
	border: 0;
	text-align: left;
}
.popup-menu-entry:hover {
	background: var(--menu-popup-hover-bg, var(--accent-7));
	color: var(--menu-popup-hover-color, var(--text-on-accent, var(--neutral-1)));
}
.popup-menu-footer {
	padding: .5rem;
	border-top: 1px solid var(--menu-popup-border-color, var(--neutral-4));
	background: var(--menu-popup-body-bg, var(--neutral-2));
}
.popup-menu-seeall {
	color: inherit;
	text-decoration: none;
}
.popup-menu-color-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.menu-profile-trigger {
	padding-top: 6px;
}

.menu-popup-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.menu-popup-header,.menu-popup-footer {
	background:var(--menu-popup-heading-bg);
	width:100%;
}
.menu-popup-heading,.menu-popup-footing {
	color: var(--menu-popup-color, var(--neutral-9));
	padding: .5rem 0 .5rem .5rem;
}

/****** Profile Menu *********/
.menu-profile-button {
	margin-top:.375rem;
	border-radius: 50%;
	cursor: pointer;
}
.menu-profile-wrapper,
.menu-friends-wrapper,
.menu-messages-wrapper,
.menu-notifications-wrapper {
	position: relative;
}

.menu-wrapper {
	position: relative;
	display: inline-block;
}
	/* --------------------------------
	 * Header: popup panels (align with Messages open-channel popup)
	 * -------------------------------- */
	.friends-menu,
	.messages-menu,
	.notifications-menu,
	.profile-menu {
		position: absolute;
		top: 100%;
		right: 0;
		min-width: 280px;
		max-width: 400px;
		margin: 0;
		z-index: 1001;
	}

/* JavaScript handles positioning dynamically */
.hidden {
	display: none;
}
.menu-profile-entry {
	display:flex;
	align-items:center;
	width:100%;
	gap:1rem;
	padding: .5rem;
	border-radius: var(--border-radius);
	color: inherit;
	cursor: pointer;
	/* LEGACY DISABLED
	color: inherit;
	*/
}
.menu-profile-entry:hover {
	color: var(--menu-popup-hover-color, var(--text-on-accent, var(--neutral-1)));
	background-color: var(--menu-popup-hover-bg, var(--accent-7));
}
.menu-theme-color-entry{
	display:flex;
	align-items:center;
	gap:1rem;
	cursor:pointer;
}
.menu-theme-color-details{
	flex:1;
}
.menu-color-input{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip: rect(0,0,0,0);
	white-space:nowrap;
	border:0;
	opacity:0;
}



/*****************************/
/*        Page Toolbar       */
.page-toolbar{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-around;
	border-radius: var(--border-radius);
	background: var(--toolbar-bg);
}
.toolbar-control {
	align-content: center;
	padding-block: 0.375rem;
}
.toolbar-control > svg{
	width: 36px;
	height: auto;
}
a.toolbar-control {
	padding-inline: 0.75rem;
	color: inherit;
}
a.toolbar-control:hover, a.toolbar-control:focus-visible {
	background: var(--toolbar-hover-bg);
	color: var(--toolbar-color);
}
.toolbar-control.active {
	background: var(--toolbar-hover-bg);
	color: var(--text-on-dark);
}
@media (width < 1024px) {
	.toolbar-control > svg {
		width:32px;
		height: auto;
	}
}
@media (width < 768px) {
	.page-toolbar{
		padding-inline: 0;
	}
	.toolbar-control > svg {
		width:28px;
		height: auto;
	}
}
@media (width < 512px) {
	.page-toolbar{
		padding-inline: 0;
	}
	.toolbar-control > svg {
		width:22px;
		height: auto;
	}
}



/*****************************/
/*         Typography        */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0;
	color: var(--typo-color);
}
h5.member-name {
	text-shadow: 0px 0px 6px rgb(0, 0, 0, 1);
	color: var(--text-on-dark);
	font-size: 1.25rem;
}
q, blockquote {
	border: 1px solid var(--panel-border-color);
	background: var(--panel-body-bg);
}
a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover-color);
}
.intro {
	margin: 1rem 0 2rem 0;
}
.entity-name {
	color: var(--text-on-dark);
}


/*****************************/
/*       Form Elements       */
form {
	display: grid;
	gap: 1rem;
}
.form-group {
	display: grid;
	gap: 0.25rem;
}
.form-group.readonly {
	/*opacity: 0.65;/* slightly faded look */
	/* or use a muted text color */
	color: var(--form-field-readonly-color);
}

/* Optional: nicer label for readonly groups */
.form-group.readonly label {
	color: var(--form-field-readonly-color);
	font-weight: normal;
}

/* 2. Style any readonly input/textarea/select directly */
input[readonly],
textarea[readonly],
select[readonly] {
	background-color: var(--form-field-readonly-bg) !important;
	color: var(--form-field-readonly-color) !important;
	border-color: var(--form-field-readonly-border-color) !important;
	cursor: not-allowed;
	opacity: 0.8;
}
/* Extra polish - remove the default blue outline on focus */
input[readonly]:focus,
textarea[readonly]:focus,
select[readonly]:focus {
	outline: none;
	box-shadow: none;
	border-color: var(--form-field-readonly-border-color);
}
/* Base form field reset */
input,
select,
textarea {
	font: inherit;
	background: var(--form-field-bg);
	border: 1px solid var(--form-border-color);
	color: var(--form-field-color);
	padding: var(--field-pad);
	border-radius: var(--border-radius);
	box-sizing: border-box;
}
button {
	all: unset;
	box-sizing: border-box;
	overflow: hidden;
}
/* Focus ring for all form fields */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}
/* Disabled state for all form fields */
input:disabled,
select:disabled,
textarea:disabled {
	background: var(--form-field-disabled-bg);
	color: var(--form-field-readonly-color);
	cursor: not-allowed;
	opacity: 0.7;
}
/* Placeholder */
input::placeholder,
textarea::placeholder {
	color: var(--text-muted);
	opacity: 0.7;
}
/* Checkboxes and radios keep native appearance */
input[type="checkbox"],
input[type="radio"] {
	padding: 0;
	border: revert;
	background: revert;
	border-radius: revert;
	width: 1.75cap;
}
.contact {
	padding: 2rem;
	background-color: var(--panel-body-bg);
	border-radius: 1rem;
	margin: 0;
}
.auth-form,
.auth-form-grid {
	@media (width >= 768px) {
		grid-template-columns: repeat(2, 1fr);
	}
}
.form-group:has(:not([type="radio"])[required]) label,
fieldset:has([required]) legend {
	display: flex;
	gap: 0.5rem;

	&::after {
		content: "*";
		color: var(--warn-color);
	}
}

.form-group:has([type="radio"], [type="checkbox"]) {
	display: flex;
	gap: 0.5rem;
}

.span-all {
	grid-column: 1 / -1;
}



fieldset {
	border: 0;
	padding: 0;

	display: grid;
	gap: inherit;
	grid-template-columns: subgrid;
}

legend {
	margin-bottom: 0.5em;
}

.form-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

input:not([type="checkbox"], [type="radio"]),
select,
textarea {
	width: 100%;
}

.form-group:has(input[type="radio"]:checked) {
	background: var(--form-field-bg);
	border-color: var(--form-border-color);
}

textarea {
	min-block-size: 3lh;
	resize: block;
}

.submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--button-primary-bg);
	color: var(--button-primary-color);
	border: 1px solid var(--button-primary-border-color);
	border-radius: var(--border-radius);
	padding: 0.5rem 1rem;
	cursor: pointer;
	font: inherit;

	&:hover,
	&:focus-visible {
		background: var(--button-primary-hover-bg);
		color: var(--button-primary-hover-color);
	}
}
.btn-primary,.btn-secondary {
	padding: var(--btn-pad);
	border-radius: var(--border-radius);
	cursor:pointer;
}
.btn-primary {
	background: var(--button-primary-bg);
	border: 1px solid var(--button-primary-border-color);
	color: var(--button-primary-color);
}
.btn-primary:hover,.btn-primary:focus-visible{
	background: var(--button-primary-hover-bg);
	color:var(--button-primary-hover-color);
}
.btn-secondary {
	background: var(--button-secondary-bg);
	border: 1px solid var(--button-secondary-border-color);
	color: var(--button-secondary-color);
}
.btn-secondary:hover,.btn-secondary:focus-visible{
	background: var(--button-secondary-hover-bg);
	color:var(--button-secondary-hover-color);
}
.btn-secondary.active {
	background: var(--button-secondary-hover-bg);
	color: var(--button-secondary-hover-color);
}
.panel-body-buttons .btn-secondary svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex-shrink: 0;
}

/****** Toggle Switch *********/
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 70px; /* Wider to fit labels */
	height: 32px;
}
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
/* The track */
.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--toggle-off-color);
	transition: background 0.3s ease;
	border-radius: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	padding: 0 10px;
	font-weight: 600;
	color: var(--typo-color);
	border: var(--toggle-border-width) solid var(--toggle-border-color);
	box-sizing: border-box;
}
/* ON and OFF labels */
.toggle-slider::before {
	content: "NO";
	opacity: 0.6;
	position: absolute;
	font-size: 9px;
	left: 8px;
	z-index:1;
}
.toggle-slider::after {
	content: "YES";
	opacity: 0.5;
	position: absolute;
	font-size: 10px;
	right: 8px;
	z-index:1;
}
/* The sliding thumb */
.toggle-slider span {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	left: 4px;
	bottom: 4px;
	background: var(--error-color);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, background 0.3s ease;
	border-radius: 50%;
}
/* Override the generic checkbox/radio form-group flex for toggle rows */
.toggle-row-wrap {
	display: block; /* ensures the label can span full width */
}
/* Make the label act as the left/right flex row */
.toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 0.5rem;
}
/* Let text take remaining space without pushing the toggle off-screen */
.toggle-row-text {
	flex: 1 1 auto;
	min-width: 0;
}
/* Keep the toggle from stretching/shrinking oddly inside flex */
.toggle-row .toggle-switch {
	flex: 0 0 auto;
}
/* Checked background on the enclosing border container
.toggle-row-wrap:has(input[type="checkbox"]:checked) {
	background: oklch(from var(--success-color) l c h / 0.25);
} */
/* Checked state: ON */
input:checked + .toggle-slider::before {
	opacity: 0.7;
}
input:checked + .toggle-slider::after {
	opacity: 1;
	font-weight: 700;
}
input:checked + .toggle-slider span {
	transform: translateX(36px); /* 70px width - 32px thumb - 4px padding */
	background: var(--success-color);
}
/* Focus accessibility */
input:focus-visible + .toggle-slider {
	outline: 2px solid var(--form-border-color);
	outline-offset: 2px;
}
.postdate{
	color:var(--typo-color);
	font-weight:400;
}




.author-post {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.5rem;
	border: 1px solid var(--panel-border-color);
	padding:2px;
	border-radius: var(--border-radius);
	background: var(--panel-body-bg);
	margin-block-end: 2rem;
}
.post-header {
	display:flex;
}
.post-footer {
	display: flex;
}
.launch-header {
	display:flex;
	align-items: center;
	justify-content: space-between;
}
.mode-toggle {
	display:flex;
	align-items: center;
	gap:0.5rem;
}

/*****************************/
/*         Post Modal        */




/*****************************/
/*      Post Definitions     */
.post-wrapper {
	background-color: var(--panel-bg);
	background-clip: border-box;
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	padding: 0.75rem;
	margin-block-end: 2rem;
	overflow: hidden;
}
.topic-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
}
.topic-header, .comment-header, .reply-header, .newtopic {
	padding: .25rem;
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.topic-authorblock{
	display: flex;
	align-items: start;
}
.avatar-container{
	padding: 0rem .5rem;
}
.avatar-icon {
	height: 36px;
	border-radius: 50%;
}
.topic-author, .comment-author, .reply-author {
	flex-grow: 1;
	font-weight: 400;
}
.topic-author a, .comment-author a, .reply-author a {
	color: inherit;
	font-weight: 600;
}
.topic-author a:hover, .comment-author a:hover, .reply-author a:hover {
	text-decoration: underline;
}
.topic-body {
	padding: 1rem;
}

/* Pinned topic badge */
.topic-pinned-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--accent-9);
	font-weight: 600;
	margin-left: auto;
	margin-right: 0.5rem;
	white-space: nowrap;
}
.topic-pinned-badge svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Topic context menu — uses project popup-menu pattern */
.topic-menu {
	position: relative;
}
.topic-menu .menu-button {
	background: none;
	border: none;
	cursor: pointer;
	padding: .25rem;
	color: var(--body-color);
}


/*****************************/
/*       modal toolbar       */
/*****************************/
.topic-toolbar {
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:space-between;
	gap:.5rem;
	padding: .25rem .5rem;
	border-radius: var(--border-radius);
	background: var(--toolbar-bg);
}

.topic-toolbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	color: var(--toolbar-color);
	cursor: pointer;
	user-select: none;
	background: none;
	border: none;
	padding: .25rem;
	border-radius: var(--border-radius);
}
.topic-toolbar-button svg:hover,
.topic-toolbar-button svg:focus-visible{
	background: var(--toolbar-hover-bg);
	border-color: var(--toolbar-border);
	color:var(--toolbar-hover-color);
	outline: none;
}
.topic-toolbar-button svg{
	color:var(--toolbar-color);
}

.toolbar-group{
	display:flex;
	gap:0.25rem;
	align-items:center;
}

.toolbar-group + .toolbar-group {
	margin-left: 0.75rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--toolbar-border);
}

/*****************************/
/*   Rendered Topic Content   */
/* This controls the simplified HTML the user creates */
.topic-text-wrapper{
	line-height: 1.4;
	overflow-wrap: anywhere;
	white-space: pre-line;
}
.topic-text-wrapper b,
.topic-text-wrapper strong { font-weight: 600; }

.topic-text-wrapper i,
.topic-text-wrapper em { font-style: italic; }

.topic-text-wrapper del { opacity: 0.7; }

.topic-text-wrapper ins {
	text-decoration: none;
	border-bottom: 2px solid var(--success-color);
}

/* Text truncation — Read More / Show Less */
.text-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.comment-text-wrapper.text-clamped,
.reply-text-wrapper.text-clamped {
	-webkit-line-clamp: 4;
}
.text-expand-toggle {
	margin-top: .35rem;
	font-size: .85rem;
}

/*****************************/
/*    Topic Footer Actions   */
.topic-footer {
	display: flex;
	gap: 1rem;
	padding-top: .5rem;
	border-top: 1px solid var(--panel-border-color);
}
.topic-footer-button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: .4rem .75rem;
	background: none;
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	color: var(--body-color);
	cursor: pointer;
	font-size: 0.875rem;
}
.topic-footer-button:hover {
	background: var(--button-secondary-hover-bg);
}
.topic-footer-button svg {
	width: 16px;
	height: 16px;
}

/*****************************/
/*      Topic Stats          */
.topic-stats {
	display: flex;
	gap: 1rem;
	padding: .25rem 0;
	font-size: 0.85rem;
	color: var(--neutral-6);
}

/*****************************/
/*    Topic Reactions        */
.topic-reactions {
	display: flex;
	gap: .5rem;
	padding: .25rem 0;
}

/*****************************/
/*   Topic Image Grid        */
/*   Adaptive layout by count: ti-1 hero, ti-2 side-by-side,
     ti-3 one+two, ti-4 one+three, ti-5 one+three with +N overlay */
.topic-image-grid {
	padding: .5rem 0;
}

/* 1 image — natural sizing, centered, no crop */
.ti-1 {
	display: block;
	text-align: center;
}
.ti-1 img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 500px;
	margin: 0 auto;
	border-radius: var(--border-radius);
	cursor: pointer;
}

/* Shared grid image rules (ti-2 through ti-5) */
.ti-2 img, .ti-3 img, .ti-4 img, .ti-5 img,
.ti-more-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--border-radius);
	cursor: pointer;
}

/* Grid items: force fill cell, prevent min-height:auto overflow */
.ti-3 > *, .ti-4 > *, .ti-5 > * {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* 2 images — side by side, proportional height */
.ti-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}
.ti-2 img {
	aspect-ratio: 4 / 3;
}

/* 3 images — 1 large left spanning 2 rows, 2 small right */
.ti-3 {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 4px;
	aspect-ratio: 3 / 2;
}
.ti-3 > :nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.ti-3 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.ti-3 > :nth-child(3) { grid-column: 2; grid-row: 2; }

/* 4 images — 1 large left spanning 3 rows, 3 small right */
.ti-4 {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 4px;
	aspect-ratio: 4 / 3;
}
.ti-4 > :nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.ti-4 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.ti-4 > :nth-child(3) { grid-column: 2; grid-row: 2; }
.ti-4 > :nth-child(4) { grid-column: 2; grid-row: 3; }

/* 5+ images — same as ti-4, 4th slot has "+N more" overlay */
.ti-5 {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 4px;
	aspect-ratio: 4 / 3;
}
.ti-5 > :nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.ti-5 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.ti-5 > :nth-child(3) { grid-column: 2; grid-row: 2; }
.ti-5 > :nth-child(4) { grid-column: 2; grid-row: 3; }
.ti-more-wrap {
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius);
}
.ti-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	cursor: pointer;
}
.ti-hidden {
	display: none;
}

/* Topic modal image preview items (pre-upload queue) */

/*****************************/
/*    Comment List           */
.comment-list {
	display: grid;
	gap: .5rem;
	padding-top: .5rem;
}
.comment-row {
	padding: .5rem;
	border-top: 1px solid var(--panel-border-color);
}
.comment-body {
	padding: .25rem .5rem .25rem 3rem;
}
.comment-text-wrapper {
	word-wrap: break-word;
	white-space: pre-line;
}
.comment-image-grid {
	padding-left: 3rem;
}
.comment-image-grid img {
	max-width: 140px;
	border-radius: var(--border-radius);
	cursor: pointer;
}
.stat-comments {
	cursor: pointer;
}
.stat-comments:hover {
	text-decoration: underline;
}

/* Comment Actions (Reply button + reply count) */
.comment-actions {
	padding: .25rem .5rem .25rem 3rem;
	display: flex;
	gap: 1rem;
	align-items: center;
}
.comment-actions button,
.reply-actions button {
	background: var(--button-secondary-bg);
	border: 1px solid var(--neutral-5);
	color: var(--link-color);
	cursor: pointer;
	padding: var(--btn-pad-sm);
	font-size: .85rem;
	border-radius: var(--border-radius);
}
.comment-actions button:hover,
.reply-actions button:hover {
	text-decoration: underline;
}
.reply-actions {
	padding: .25rem .5rem .25rem 3rem;
	display: flex;
	gap: 1rem;
	align-items: center;
}
.stat-replies {
	cursor: pointer;
	font-size: .85rem;
	color: var(--text-muted);
}
.stat-replies:hover {
	text-decoration: underline;
}

/* Reply Rows */
.reply-list {
	padding-left: 3rem;
}
.reply-row {
	padding: .5rem;
	border-top: 1px solid var(--panel-border-color);
}
.reply-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.reply-body {
	padding: .25rem .5rem .25rem 3rem;
}
.reply-text-wrapper {
	word-wrap: break-word;
	white-space: pre-line;
}
.reply-image-grid {
	padding-left: 3rem;
}
.reply-image-grid img {
	max-width: 200px;
	border-radius: var(--border-radius);
	cursor: pointer;
}

/* ---- Topic Reactions (Phase 5) ---- */
.topic-reactions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	padding: .25rem .5rem;
	min-height: 0;
}
.topic-reaction {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 8px;
	border-radius: 12px;
	cursor: pointer;
	font-size: .85rem;
	background: var(--form-field-bg);
	border: 1px solid var(--panel-border-color);
	transition: background .15s;
}
.topic-reaction:hover {
	background: var(--panel-border-color);
}
.topic-reaction.user-reacted {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}
.topic-reaction .reaction-icon {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}
.topic-reaction .reaction-count {
	font-size: .75rem;
	font-weight: 600;
}
.topic-reactions-total {
	font-size: .75rem;
	color: var(--text-muted);
	padding-left: 4px;
}

/* Floating reaction picker */
.topic-reaction-picker {
	position: fixed;
	z-index: 9999;
	background: var(--form-field-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	padding: .5rem;
}
.topic-reaction-picker.hidden {
	display: none;
}
.topic-reaction-picker .reaction-grid {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.topic-reaction-picker .reaction-item {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--border-radius);
	transition: background .15s;
}
.topic-reaction-picker .reaction-item:hover {
	background: var(--panel-border-color);
}
.topic-reaction-picker .reaction-item .reaction-icon {
	width: 32px;
	height: 32px;
}

/* Reaction details popup */
.reaction-details-popup {
	position: fixed;
	z-index: 9999;
	background: var(--form-field-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	min-width: 220px;
	max-width: 320px;
	max-height: 400px;
	overflow-y: auto;
}
.reaction-details-popup.hidden {
	display: none;
}
.reaction-details-header {
	padding: .5rem .75rem;
	font-weight: 600;
	border-bottom: 1px solid var(--panel-border-color);
}
.reaction-details-body {
	padding: .25rem 0;
}
.reaction-details-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .375rem .75rem;
}
.reaction-details-row:hover {
	background: var(--panel-border-color);
}
.reaction-details-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}
.reaction-details-name {
	flex: 1;
	font-size: .85rem;
}
.reaction-details-icon {
	font-size: .85rem;
}
.reaction-details-icon .reaction-icon {
	width: 16px;
	height: 16px;
}
.reaction-details-footer {
	padding: .5rem .75rem;
	border-top: 1px solid var(--panel-border-color);
}
/* ---- Topic Emoji Picker (Phase 5) ---- */
.topic-emoji-picker-popup {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--panel-body-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	box-shadow: 0 -4px 12px rgba(0,0,0,.15);
	max-height: 240px;
	overflow-y: auto;
}
.topic-emoji-picker-popup.hidden {
	display: none;
}
/* The toolbar parent needs relative positioning so the popup anchors correctly */
.topic-toolbar {
	position: relative;
}
.topic-emoji-picker-popup .emoji-picker-header {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: .375rem;
	border-bottom: 1px solid var(--panel-border-color);
	background: var(--panel-body-bg);
}
.topic-emoji-picker-popup .emoji-search {
	width: 100%;
	padding: .25rem .5rem;
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	background: var(--form-field-bg);
	color: var(--body-color);
	font-size: .85rem;
}
.topic-emoji-picker-popup .emoji-grid {
	display: flex;
	flex-wrap: wrap;
	padding: .375rem;
	gap: 2px;
}
.emoji-load-more {
	width: 100%;
	padding: .375rem;
	background: none;
	border: none;
	border-top: 1px solid var(--panel-border-color);
	color: var(--text-muted);
	cursor: pointer;
	font-size: .8rem;
}
.emoji-load-more:hover {
	background: var(--panel-border-color);
}

/* ---- Share Dialog (Phase 5) ---- */
.share-dialog::backdrop {
	background: rgba(0,0,0,.4);
}
.share-dialog .dialog-header {
	font-weight: 600;
}
.share-dialog-title {
	flex: 1;
	text-align: center;
}
.share-back-btn {
	background: none;
	border: none;
	color: var(--body-color);
	cursor: pointer;
	padding: .25rem;
	display: flex;
	align-items: center;
	transition: color .15s;
}
.share-back-btn:hover { color: var(--primary-color); }
.share-back-btn.hidden { display: none; }
.share-targets-list {
	max-height: 260px;
	overflow-y: auto;
	margin-bottom: .75rem;
}
.share-target-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem .75rem;
	cursor: pointer;
	border-radius: var(--border-radius);
	transition: background .15s;
}
.share-target-item:hover {
	background: var(--panel-border-color);
}
.share-target-item.selected {
	background: var(--primary-color);
	color: #fff;
}
.share-target-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	flex-shrink: 0;
}
.share-target-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.share-target-info strong {
	font-size: .9rem;
}
.share-target-info small {
	font-size: .75rem;
	color: var(--text-muted);
}
.share-target-item.selected .share-target-info small {
	color: rgba(255,255,255,.8);
}
.share-message-input {
	width: 100%;
	resize: none;
	border: 1px solid var(--form-border-color);
	border-radius: var(--border-radius);
	padding: var(--field-pad);
	background: var(--form-field-bg);
	color: var(--form-field-color);
	font-size: .85rem;
}
.share-loading,
.share-empty {
	padding: 1rem;
	text-align: center;
	color: var(--text-muted);
	font-size: .85rem;
}
.share-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 2rem 1rem;
	text-align: center;
}
.share-result svg {
	width: 40px;
	height: 40px;
}
.share-result p {
	margin: 0;
	font-size: .95rem;
}
.share-result-success svg { color: var(--success-color); }
.share-result-error svg { color: var(--error-color); }

/* Two-level dialog: action type buttons (step 1) */
.share-actions-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.share-action-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem;
	cursor: pointer;
	border-radius: var(--border-radius);
	border: 1px solid var(--panel-border-color);
	transition: background .15s, border-color .15s;
}
.share-action-item:hover {
	background: var(--panel-border-color);
	border-color: var(--primary-color);
}
.share-action-item.share-action-disabled,
.share-target-item.share-target-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}
.share-action-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	flex-shrink: 0;
	color: var(--primary-color);
}
.share-action-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.share-action-info strong { font-size: .95rem; }
.share-action-info small {
	font-size: .75rem;
	color: var(--text-muted);
}

/* Copy link display (step 2) */
.share-copy-display {
	display: flex;
	gap: .5rem;
	align-items: center;
}
.share-url-input {
	flex: 1;
	padding: var(--field-pad);
	border: 1px solid var(--form-border-color);
	border-radius: var(--border-radius);
	background: var(--form-field-bg);
	color: var(--form-field-color);
	font-size: .85rem;
}
.share-copy-btn { white-space: nowrap; }

/* ===================================================================
 * Shared Topic Inset Card (rendered inside post-wrapper)
 * =================================================================== */

.share-message {
	padding: .5rem 1rem .25rem;
	font-size: .95rem;
	color: var(--body-color);
	white-space: pre-wrap;
	word-wrap: break-word;
}

.shared-topic-inset {
	display: block;
	margin: 1rem;
	padding: 1rem;
	border: 1px solid var(--panel-border-color);
	border-left: 3px solid var(--accent-color);
	border-radius: var(--border-radius);
	background: var(--panel-bg);
	cursor: pointer;
	transition: background .15s, border-color .15s;
	text-decoration: none;
	color: inherit;
}
.shared-topic-inset:hover {
	background: var(--neutral-3);
	border-left-color: var(--accent-6);
}
.shared-topic-inset.unavailable {
	cursor: default;
	border-left-color: var(--neutral-5);
}
.shared-topic-inset.unavailable:hover {
	background: var(--panel-bg);
	border-left-color: var(--neutral-5);
}

.shared-inset-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .5rem;
}
.shared-inset-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
}
.shared-inset-author {
	display: flex;
	flex-direction: column;
	font-size: .85rem;
}
.shared-inset-author strong {
	font-weight: 600;
	color: var(--body-color);
}
.shared-inset-author small {
	color: var(--text-muted);
	font-size: .75rem;
}

.shared-inset-body {
	font-size: .9rem;
	color: var(--body-color);
	line-height: 1.5;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.shared-inset-images {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-top: .5rem;
}
.shared-inset-image {
	width: 80px;
	height: 80px;
	border-radius: 4px;
	object-fit: cover;
}

.shared-inset-unavailable {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	color: var(--text-muted);
}
.shared-inset-unavailable p {
	margin: 0;
	font-size: .9rem;
	font-style: italic;
}

/* Shared image inset card */
.shared-image-inset .shared-inset-image-preview {
	margin-top: .5rem;
	text-align: center;
}
.shared-image-inset .shared-image-preview {
	max-width: 100%;
	max-height: 300px;
	border-radius: var(--border-radius);
	object-fit: contain;
}

/* Share count in topic stats */
.stat-shares {
	margin-left: .75rem;
	color: var(--text-muted);
	font-size: .85rem;
}

/*****************************/
/*   Link Preview Card       */
/*****************************/
.link-preview-card {
	display: flex;
	flex-direction: column;
	margin: .5rem 1rem;
	border: 1px solid var(--neutral-4);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--panel-bg);
	transition: border-color .15s;
}
.link-preview-card:hover {
	border-color: var(--accent-6);
	color: inherit;
}
.link-preview-image {
	width: 100%;
	height: 180px;
	background-size: cover;
	background-position: center;
	background-color: var(--neutral-3);
}
.link-preview-text {
	padding: .75rem 1rem;
}
.link-preview-title {
	font-weight: 600;
	font-size: .95rem;
	color: var(--body-color);
	margin-bottom: .25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.link-preview-description {
	font-size: .85rem;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: .25rem;
}
.link-preview-site {
	font-size: .75rem;
	color: var(--neutral-6);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* Compose-mode preview (inside dialog) */
.link-preview-compose {
	margin: .5rem 0;
}
.link-preview-compose .link-preview-card {
	margin: 0;
	position: relative;
}
.link-preview-compose .link-preview-image {
	height: 120px;
}
.link-preview-dismiss {
	position: absolute;
	top: .35rem;
	right: .35rem;
	background: rgba(0,0,0,.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	z-index: 1;
}
.link-preview-dismiss:hover {
	background: rgba(0,0,0,.7);
}

/* Comment/reply preview cards: less margin */
.comment-row .link-preview-card,
.reply-row .link-preview-card {
	margin: .35rem 0;
}

@media (width < 512px) {
	.link-preview-image {
		height: 140px;
	}
	.link-preview-compose .link-preview-image {
		height: 100px;
	}
}

/*****************************/
/*  Load Previous / Next     */
.load-topics-button {
	width: 100%;
	padding: 0.75rem;
	margin-block: 1rem;
	background: var(--form-field-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	color: var(--body-color);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.2s ease;
}
.load-topics-button:hover {
	background: var(--cre8-blue);
	color: var(--text-on-dark);
	border-color: var(--cre8-blue);
}
.load-topics-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*****************************/
/*   Timeline empty state    */
.timeline-empty {
	text-align: center;
	padding: 2rem;
	color: var(--neutral-6);
	font-style: italic;
}
.timeline-header {
  margin-bottom: 1rem;
}
.timeline-create-prompt {
	display:flex;
	align-items: center;
	justify-content: flex-start;
	gap:1rem;
	border:1px solid var(--button-primary-border-color);
	border-radius: var(--border-radius);
	padding: .5rem;
	background: var(--button-primary-bg);
	cursor: pointer;
}



/* ============================================
 * Card Definitions (Enhanced/Specialized)
 * ============================================ */
.auth-card {
	display: grid;
	gap: 1rem;

	background-color: var(--panel-bg);
	padding: 3rem;
	border-radius: 2rem;
	border: 2px solid var(--panel-border-color);
	width: min(100% - 4rem, 40rem);
	margin-inline: auto;
}

/* Password requirements list */
#password-requirements {
	margin: 0;
	padding: 0;
}
#password-requirements li {
	color: var(--neutral-5);
	list-style: none;
	margin: 0.25em 0;
	padding-left: 1.5em;
	position: relative;
}
#password-requirements li.met {
	color: var(--viridian);
}
#password-requirements li::before {
	content: "○";
	position: absolute;
	left: 0;
}
#password-requirements li.met::before {
	content: "●";
}

.card-details{
	padding: 0.75rem;
	color: var(--text-on-light);
}
.card-banner {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	max-width: 400px;
}
.card-avatar {
	height: auto;
	max-width:54px;
	width:100%;
	border-radius: 50%;
	margin-top: 5px;
	margin-left: 5px;
	position: relative;
	z-index:1;
	background-color:var(--panel-heading-bg);
	backdrop-filter: blur(4px); 
}
.card-status{
	padding: .25rem;
	margin-top: 5px;
	margin-right: 5px;
	border-radius: 4px;
}
.entity-status-accepted {
	border: 1px solid var(--panel-border-color);
	background: var(--entity-status-accepted);
}
.entity-status-pending {
	border: 1px solid var(--panel-border-color);
	background: var(--entity-status-pending);
}
.entity-status-blocked {
	border: 1px solid var(--panel-border-color);
	background: var(--entity-status-blocked);
}
.group-status-public {
	border: 1px solid var(--panel-border-color);
	background: var(--entity-status-accepted);
}
.group-status-private {
	border: 1px solid var(--panel-border-color);
	background: var(--entity-status-pending);
}
.group-status-secret {
	border: 1px solid var(--panel-border-color);
	background: var(--entity-status-blocked);
}
.card-buttons {
	display: flex;
	justify-content: space-around;
	padding-block:.5rem;
}
.message-window-wrapper {
	width: 100%;
	height: 100vph;
	border: 1px solid var(--panel-border-color);
	border-radius: 12px;
}
.message-window-header {
	background: var(--panel-heading-bg);
	overflow: hidden;
	padding-inline: 0.75rem;
}
.message-window-body {
	font-family: 'Courier New', Courier, monospace;
	background: var(--panel-body-bg);
	padding-inline: 0.75rem;
	overflow-y: auto;
	height:50dvh;
}
.message-window-input {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--form-field-readonly-bg);
	padding-inline: 0.75rem;
	border-top: 1px solid var(--panel-border-color);
	padding-block: 1rem;
}
.message-window-input textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--form-field-readonly-bg);
}
.message-window-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-around;
/* 	border: 1px solid var(--panel-border-color);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px; */
}
/* Message Toolbar Layout */
.message-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.message-toolbar.disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}
.message-toolbar.disabled * {
	pointer-events: none;
}
.message-toolbar.disabled .enter-toggle-wrapper,
.message-toolbar.disabled .enter-toggle-wrapper * {
	pointer-events: auto;
	opacity: 1;
}
.topic-toolbar .toolbar-left {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.topic-toolbar .toolbar-right {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.topic-toolbar .toolbar-separator {
	width: 1px;
	height: 24px;
	background: var(--panel-border-color);
	margin-inline: 0.25rem;
}
.message-toolbar .toolbar-group {
	display: flex;
	align-items: center;
	gap: 0.125rem;
}
.message-toolbar .toolbar-group-emoji {
	gap: 0.125rem;
}
.message-toolbar .camera-icon {
	position: static;
	opacity: 1;
	z-index: auto;
	width: auto;
	height: auto;
}
/* Emoji Picker Popup - Grid layout with search */
.emoji-picker-wrapper {
	position: relative;
	display: inline-block;
}
.emoji-picker-popup {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 8px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 100;
	width: 280px;
	max-height: 320px;
	display: grid;
	grid-template-rows: auto 1fr;
}
.emoji-picker-popup.hidden {
	display: none;
}
.emoji-picker-header {
	padding: 8px;
	border-bottom: 1px solid var(--panel-border-color);
}
.emoji-search {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--form-border-color);
	border-radius: 4px;
	background: var(--form-field-bg);
	color: var(--body-color);
	font-size: 13px;
	box-sizing: border-box;
}
.emoji-search:focus {
	outline: none;
	border-color: var(--button-primary-bg);
}
.emoji-picker-body {
	overflow-y: auto;
	padding: 8px;
}
.emoji-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.emoji-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 24px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.15s;
}
.emoji-item:hover {
	background: var(--neutral-3);
}

/* Reaction Picker Popup (toolbar) - Simple flexbox */
.reaction-picker-wrapper {
	position: relative;
	display: inline-block;
}
.reaction-picker-popup {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 8px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 100;
	max-width: 280px;
	padding: 8px;
}
.reaction-picker-popup.hidden {
	display: none;
}
.reaction-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
  width: 240px;
}
.reaction-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.15s;
}
.reaction-item:hover {
	background: var(--neutral-3);
}
.reaction-item .reaction-icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
}
.emoji-loading,
.emoji-empty {
	text-align: center;
	padding: 20px;
	color: var(--typo-color);
	font-size: 13px;
}
.emoji-empty.hidden {
	display: none;
}
/* Enter-Toggle Popup */
.enter-toggle-wrapper {
	position: relative;
	display: inline-block;
}
.enter-toggle-popup {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 8px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 100;
	min-width: 220px;
}
.enter-toggle-popup.hidden {
	display: none;
}
.enter-toggle-content {
	padding: 0.75rem 1rem;
}
.enter-toggle-content .toggle-row {
	margin: 0;
	gap: 0.75rem;
}
.enter-toggle-content .toggle-row-text {
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.message-enter-toggle.is-active {
	background: var(--button-primary-bg);
	color: var(--button-primary-color);
}
.channel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.open-channel svg{
	display: flex;
	align-items: center;
	fill: currentColor;
	stroke:none;
}
.messages-select {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0.5rem;
	padding-inline: 0.75rem;
}
.channel-search {
	padding-inline: 0.75rem;
}
.channel-search .search-field {
	max-width: none;
	min-width: 0;
	width: 100%;
}
.channel-icon {
	width:54px;
	height: auto;
	background:transparent;
	border-radius: 50%;
	padding-top:6px;
}
.channel-menu-popup {
	width: 24px;
	height: auto;
	color: var(--text-on-dark);
}
.channel-body {
	display: grid;
	gap: 1px;
	grid-template-rows: auto;
	padding: 0.5rem 2px 2px;
	overflow-y: auto;
	overflow-x: hidden;
}
.channel-entry {
	display:flex;
	align-items: center;
	justify-content: space-between;
	padding:0.5rem;
	gap: .5rem;
	color: var(--text-on-light);
	background: var(--neutral-4);
	margin-bottom:4px;
	border:1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	min-width: 0;
}
.channel-name {
	color: var(--text-on-light);
}
.moderator-entry {
	background:var(--warn-color);
}
.channel-system {
	background: transparent;
	border: 2px solid var(--cre8-blue);
	color: var(--cre8-blue);
}
.channel-entry.channel-system:hover {
	background: var(--cre8-blue);
	border-color: var(--cre8-blue);
	color: white;
}
.channel-entry.channel-system.is-active,
.channel-entry.channel-system.is-active:hover {
	background: var(--cre8-blue);
	border-color: var(--cre8-blue);
	color: white;
}
.channel-system .channel-unread-badge {
	background: white;
	color: var(--cre8-blue);
}
.channel-admin {
	background: transparent;
	border: 2px solid var(--warn-color, #e6a817);
	color: var(--warn-color, #e6a817);
}
.channel-entry.channel-admin:hover {
	background: var(--warn-color, #e6a817);
	border-color: var(--warn-color, #e6a817);
	color: white;
}
.channel-entry.channel-admin.is-active,
.channel-entry.channel-admin.is-active:hover {
	background: var(--warn-color, #e6a817);
	border-color: var(--warn-color, #e6a817);
	color: white;
}
.channel-admin .channel-unread-badge {
	background: white;
	color: var(--warn-color, #e6a817);
}

.channel-entry:hover {
	cursor:pointer;
	background: var(--toolbar-hover-bg);
	color:var(--text-on-dark);
	.channel-icon {
		color:var(--text-on-dark);
	}
	p {
		color:var(--text-on-dark);
	}
}
.channel-entry.is-active {
	background: var(--toolbar-hover-bg);
	color: var(--text-on-dark);
}
.channel-entry.is-active .channel-icon {
	color: var(--text-on-dark);
}
.channel-entry.is-active p,
.channel-entry.is-active .channel-name,
.channel-entry.is-active .menu-popup-details span {
	color: var(--text-on-dark);
}
/* Ensure active state persists on hover */
.channel-entry.is-active:hover {
	background: var(--cre8-blue);
}
.channel-entry-details {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5rem;
	justify-content: space-between;
	min-width: 0;
}
.channel-entry-excerpt {
	width: 100%;
	font-size: 0.75rem;
	opacity: 0.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.channel-unread-badge {
	background: var(--cre8-blue);
	color: white;
	border-radius: 12px;
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	min-width: 20px;
	text-align: center;
	flex-shrink: 0;
}
.channel-load-next,.channel-load-previous {
	display: flex;
	padding: .5rem 1rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius);
	cursor: pointer;
	background: var(--button-secondary-bg);
}
.channel-load-next:hover,.channel-load-previous:hover {
	background: var(--button-secondary-hover-bg);
	color: var(--text-on-dark);
}
.message-wrapper {
	max-width: 95%;
	width: 100%;
	margin-bottom: 1rem;
}
.message-entry {
	display:grid;
	grid-template-columns: auto 1fr;
	background-color: var(--form-field-bg);
	border-radius: var(--border-radius);
	border: 0;
	padding: 4px;
}
.message-entry-lt {
	margin-left:auto;
	background-color: var(--form-field-readonly-bg);
	border-radius: var(--border-radius);
	border: 0;
	padding: 4px;
}
.message-controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:0.5rem;
}
.message-window-menu svg:hover,
.message-window-menu svg:focus-visible{
	background: var(--color-btn-secondary-bg-hover);
	border-color: var(--color-btn-secondary-border-hover);
	color:var(--color-btn-secondary-border-hover);
	outline: none;
}
.message-window-menu svg{
	color:var(--button-primary-color);
	cursor: pointer;
}

/* --------------------------------
 * Message Display (Chat Window)
 * -------------------------------- */
.message-list .message-entry {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
	align-items: flex-start;
	grid-template-columns: unset; /* Override existing grid layout */
	background-color: transparent;
	padding: 0;
}

.message-entry.message-self {
	margin-left: 10%;
}
.message-entry.message-other {
	margin-right: 10%;
}
.message-list .message-entry .avatar-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.message-list .message-text {
	flex: 1;
	min-width: 0;
}

.message-list .message-body {
	padding: 0.5rem 0.75rem;
	border-radius: var(--border-radius);
	background: var(--message-bg);
	word-wrap: break-word;
	white-space: pre-line;
}

.message-list .message-self .message-body {
	background: var(--message-self-bg);
/*	color: var(--message-self-color, #fff);*/
}

.message-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 4px;
	margin-bottom: 4px;
}
.message-images img {
	width: 100%;
	border-radius: 6px;
	cursor: pointer;
	object-fit: cover;
	aspect-ratio: 1;
}
.message-image-link {
	display: block;
	line-height: 0;
}
.message-image-wrap {
	position: relative;
}
.message-image-wrap .image-action-btn {
	position: absolute;
	top: 4px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
	padding: 0;
}
.message-image-wrap:hover .image-action-btn {
	opacity: 1;
}
.message-image-wrap .image-action-btn:hover {
	background: rgba(0, 0, 0, 0.8);
}
.message-image-wrap .image-action-btn:first-child {
	right: 4px;
}
.message-image-wrap .image-action-btn.image-action-report {
	right: 32px;
}
.message-image-removed {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 8px;
	border-radius: 6px;
	background: var(--color-bg-alt, #f0f0f0);
	color: var(--color-text-muted, #888);
	font-size: 0.8rem;
	font-style: italic;
	text-align: center;
}

.load-previous-messages {
	width: 100%;
	padding: 0.75rem;
	margin-bottom: 1rem;
	background: var(--form-field-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	color: var(--text-on-light);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.2s ease;
}

.load-previous-messages:hover {
	background: var(--cre8-blue);
	color: var(--text-on-dark);
	border-color: var(--cre8-blue);
}

.load-previous-messages:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.load-previous-messages.loading::after {
	content: "...";
	animation: loading 1s infinite;
}

@keyframes loading {
	0%, 20% { content: "."; }
	40% { content: ".."; }
	60%, 100% { content: "..."; }
}

.message-list .message-meta {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--text-muted, #666);
}

.message-list .message-sender {
	font-weight: 500;
}

.message-list .message-time {
	opacity: 0.7;
}

/* --------------------------------
 * Message Reactions
 * -------------------------------- */
.message-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.message-reactions-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.message-reactions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	background: var(--neutral-3);
	border: 1px solid var(--neutral-4);
	border-radius: 12px;
	padding: 2px 4px;
}

.message-reaction {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 1px 2px;
	font-size: 0.75rem;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.15s ease;
}

.message-reaction:hover {
	background: var(--neutral-4);
}

.message-reaction.user-reacted {
	background: var(--accent-3);
}

.message-reaction .reaction-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.message-reaction .reaction-count {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--text-muted);
}

.message-reactions-total {
	font-size: 0.7rem;
	color: var(--neutral-6);
	padding-left: 4px;
}

.message-react-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: transparent;
	border: 1px dashed var(--neutral-4);
	border-radius: 50%;
	font-size: 0.875rem;
	color: var(--body-color);
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.message-entry:hover .message-react-btn {
	opacity: 1;
}

.message-react-btn:focus-visible {
	opacity: 1;
	outline: 2px solid var(--accent-5);
	outline-offset: 2px;
}

.message-react-btn:hover {
	background: var(--neutral-3);
	border-color: var(--accent-5);
	color: var(--accent-7);
}

/* Floating reaction picker */
.message-reaction-picker {
	position: fixed;
	z-index: 9999;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 8px;
	width: 260px;
}

.message-reaction-picker.hidden {
	display: none;
}

.message-reaction-picker .reaction-picker-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	justify-content: space-between;
	width: 240px;
}

.message-reaction-picker .reaction-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.15s ease;
}

.message-reaction-picker .reaction-item:hover {
	background: var(--neutral-3);
}

.message-reaction-picker .reaction-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.reaction-empty {
	padding: 8px;
	text-align: center;
	color: var(--neutral-6);
	font-size: 0.875rem;
}

/* Reaction Details Popup - shows who reacted */
.reaction-details-popup {
	position: fixed;
	z-index: 9999;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	width: 320px;
	max-height: 400px;
	display: flex;
	flex-direction: column;
}

.reaction-details-popup.hidden {
	display: none;
}

.reaction-details-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border-bottom: 1px solid var(--panel-border-color);
}

.reaction-details-title {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--body-color);
}

.reaction-details-close {
	background: none;
	border: none;
	font-size: 1.25rem;
	cursor: pointer;
	color: var(--neutral-6);
	padding: 0;
	line-height: 1;
}

.reaction-details-close:hover {
	color: var(--body-color);
}

.reaction-details-body {
	overflow-y: auto;
	flex: 1;
	padding: 8px 0;
}

.reaction-details-row {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	gap: 10px;
}

.reaction-details-row:hover {
	background: var(--panel-bg);
}

.reaction-details-row .reaction-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
}

.reaction-details-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.reaction-details-name {
	flex: 1;
	font-size: 0.875rem;
	color: var(--body-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reaction-details-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.reaction-details-user-react {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	color: var(--neutral-6);
}

.reaction-details-user-react .reaction-icon {
	width: 14px;
	height: 14px;
}

.reaction-details-btn {
	padding: 4px 10px;
	font-size: 0.75rem;
	border-radius: 4px;
	border: 1px solid var(--panel-border-color);
	background: var(--panel-bg);
	color: var(--body-color);
	cursor: pointer;
	white-space: nowrap;
}

.reaction-details-btn:hover {
	background: var(--neutral-3);
}

.reaction-details-btn.btn-friend {
	background: var(--accent-5);
	border-color: var(--accent-5);
	color: white;
}

.reaction-details-btn.btn-friend:hover {
	background: var(--accent-6);
}

.reaction-details-btn.btn-unfriend {
	background: var(--neutral-3);
}

.reaction-details-btn.btn-remove-reaction {
	background: var(--danger-bg);
	border-color: var(--danger-border);
	color: var(--danger-text);
}

.reaction-details-btn.btn-remove-reaction:hover {
	background: var(--danger-hover);
}

.reaction-details-loading {
	padding: 20px;
	text-align: center;
	color: var(--neutral-6);
}

.reaction-details-empty {
	padding: 20px;
	text-align: center;
	color: var(--neutral-6);
	font-size: 0.875rem;
}

/* --------------------------------
 * Messages: Open Channel popup + dialog
 * -------------------------------- */
.open-channel-wrapper {
	position: relative;
	display: inline-block;
}
/* JavaScript handles positioning dynamically */
.new-channel-title-wrap.hidden {
	display: none;
}
.selected-members {
	margin-block: 0.375rem;
}
.selected-member {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.375rem 0.5rem;
	border-radius: 8px;
}
.selected-member-remove {
	padding: 2px 8px;
}
.member-search-results {
	display:flex;
	align-items: center;
	justify-content: space-between;
}
.member-search-result {
	display:flex;
	align-items: center;
}
.participant-entry {
	padding: 0.35rem 0;
}
.participant-entry .avatar-icon {
	width: 32px;
	height: 32px;
}
.btn-remove-participant {
	background: none;
	border: 1px solid var(--error-color);
	color: var(--error-color);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
	cursor: pointer;
}
.btn-remove-participant:hover {
	background: var(--error-color);
	color: #fff;
}
/* ================================
 * Popup stacking + overflow fixes
 * ================================ */
.channel-header,
.message-window-header,
.channel-heading,
.message-window-heading {
	overflow: visible;
}
.open-channel-wrapper,
.message-window-menu {
	position: relative; 
}
.open-channel-option {
	cursor:pointer;
}
/* JavaScript handles positioning dynamically */
/* LEGACY DISABLED: old camelCase body selectors */
/*
.channelBody,
	.messageWindowBody {
	position: relative;
	z-index: 1;
	}
*/

.channel-body,
	.message-window-body {
	position: relative;
	z-index: 1;
}

/* ── Image Carousel ── */

.carousel-dialog {
	border: none;
	border-radius: 8px;
	padding: 0;
	background: #1a1a1a;
	color: #fff;
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	overflow: hidden;
}

.carousel-dialog::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.carousel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.75rem;
}

.carousel-counter {
	font-size: 14px;
	opacity: 0.8;
}

.carousel-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	padding: 0 0.25rem;
	line-height: 1;
}

.carousel-close:hover {
	opacity: 0.7;
}

.carousel-body {
	display: flex;
	align-items: center;
	min-height: 200px;
}

.carousel-prev,
.carousel-next {
	background: none;
	border: none;
	color: #fff;
	font-size: 48px;
	cursor: pointer;
	padding: 0 1rem;
	opacity: 0.6;
	flex-shrink: 0;
	user-select: none;
}

.carousel-prev:hover,
.carousel-next:hover {
	opacity: 1;
}

.carousel-prev.hidden,
.carousel-next.hidden {
	visibility: hidden;
}

.carousel-image-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.carousel-full-link {
	display: block;
	line-height: 0;
}

.carousel-image {
	max-width: 80vw;
	max-height: 70vh;
	object-fit: contain;
}

.carousel-info {
	padding: 0.5rem 1rem;
	text-align: center;
}

.carousel-info:empty,
.carousel-info.hidden {
	display: none;
}

.carousel-description {
	margin: 0 0 0.25rem;
	font-size: 14px;
}

.carousel-description:empty {
	display: none;
}

.carousel-tags {
	margin: 0;
	font-size: 12px;
	opacity: 0.6;
}

.carousel-tags:empty {
	display: none;
}

.carousel-toolbar {
	display: flex;
	justify-content: center;
	padding: 0.5rem 1rem 0.75rem;
	position: relative;
}

.carousel-share-btn,
.carousel-edit-btn {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	padding: 0.375rem 1.25rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.carousel-share-btn:hover,
.carousel-edit-btn:hover {
	background: rgba(255, 255, 255, 0.25);
}

.carousel-trigger {
	cursor: pointer;
}


/* ── Image Edit Dialog (content-specific) ── */

.img-edit-body {
	display: flex;
	gap: 0.75rem;
	padding: 1rem;
	align-items: flex-start;
}

.img-edit-preview {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.img-edit-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.img-edit-desc,
.img-edit-tags {
	width: 100%;
	font-size: 14px;
}

/* ── Responsive: Upload Preview Wrap ── */

@media (width < 512px) {
	.img-preview-item {
		flex-wrap: wrap;
	}
	.img-preview-item img {
		width: 100%;
		height: auto;
		max-height: 200px;
	}
	.img-edit-body {
		flex-wrap: wrap;
	}
	.img-edit-preview {
		width: 100%;
		height: auto;
		max-height: 200px;
	}
}

/* ── Notifications System ── */

.notification-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--error-color);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
	line-height: 1.2;
}

.popup-notification-entry {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-bottom: 1px solid var(--panel-border-color);
	cursor: pointer;
	transition: background 0.2s;
}

.popup-notification-entry:hover {
	background: rgba(0, 0, 0, 0.03);
}

.popup-notification-entry:last-child {
	border-bottom: none;
}

/* Read/Unread states */
.notification-unread {
	background: var(--neutral-3);
}

.notification-read {
	background: var(--neutral-4);
}

.notification-unread:hover {
	background: var(--neutral-5);
}

/* Role-based colors (override read/unread) */
.notification-mod {
	background: var(--warn-color, #ff9800) !important;
	color: #000;
}

.notification-admin {
	background: var(--error-color) !important;
	color: #fff;
}

.notification-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
}

.notification-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.notification-details {
	flex: 1;
	min-width: 0;
}

.notification-source {
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 4px;
}

.notification-icon-wrapper {
	display: flex;
	gap: 8px;
	margin: 4px 0;
}

.emoji-icons {
	font-size: 16px;
}

.react-icons {
	display: flex;
	gap: 4px;
}

.react-icons .reaction-img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.notification-url a {
	color: var(--accent-7, #4a90d9);
	text-decoration: none;
	font-weight: 500;
}

.notification-url a:hover {
	text-decoration: underline;
}

.notification-time {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 4px;
}

.notification-options {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.notification-target-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
}

.notification-accept,
.notification-decline {
	padding: 6px 12px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
}

.notification-accept {
	background: var(--accent-7, #4a90d9);
	color: #fff;
}

.notification-accept:hover {
	background: var(--accent-8, #3a7bc8);
}

.notification-decline {
	background: var(--neutral-5);
	color: var(--neutral-9);
}

.notification-decline:hover {
	background: var(--neutral-6);
}
.popup-menu-mark-read:hover {
	background: var(--accent-8, #3a7bc8);
}
/* Empty state */
#menuNotificationsEmptyState {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-muted);
	font-size: 14px;
}
/* Dropdown body scrolling */
#menuNotificationsPopupBody {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

/* ── Locked Notifications ── */

.notification-locked {
	cursor: pointer;
	border-left: 3px solid var(--warn-color, #ff9800);
}

.notification-locked.notification-admin {
	border-left-color: var(--error-color);
}

.notification-lock {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--warn-color, #ff9800);
}

.notification-admin .notification-lock {
	color: #fff;
}

/* ── Report Dialog (content-specific) ── */

#report-dialog .dialog-body {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

#report-dialog #report-subject-input {
	font-size: 14px;
}

#report-dialog #report-body-input {
	font-size: 14px;
	resize: vertical;
}

.report-char-count {
	text-align: right;
	font-size: 12px;
	color: var(--neutral-5);
	margin-top: -4px;
}

.report-submit-btn {
	background: var(--error-color);
	color: var(--text-on-dark);
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.report-submit-btn:hover:not(:disabled) {
	opacity: 0.9;
}

.report-submit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.report-escalated-badge {
	display: inline-block;
	background: var(--error-color);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 4px;
	vertical-align: middle;
	text-transform: uppercase;
}

/* ── Report Review Dialog ── */

.rr-loading {
	text-align: center;
	padding: 1.25rem;
	color: var(--text-muted);
}

.rr-meta {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 1rem;
}

.rr-field {
	font-size: 14px;
}

.rr-body-section {
	margin-bottom: 1rem;
}

.rr-section-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.375rem;
}

.rr-body-text {
	background: var(--panel-heading-bg);
	border-radius: 4px;
	padding: 0.625rem 0.75rem;
	font-size: 14px;
	white-space: pre-wrap;
	word-break: break-word;
}

.rr-source-link {
	margin-bottom: 1rem;
}

.rr-source-link a {
	font-size: 13px;
}

.rr-input-section {
	margin-bottom: 0.75rem;
}

.rr-input-section label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

/* ── Mod Reason Dialog (content-specific) ── */

.mod-reason-description {
	margin: 0 0 0.75rem;
	font-size: 14px;
	color: var(--text-muted);
}

.mod-reason-input {
	width: 100%;
	resize: vertical;
	font-size: 14px;
}

.mod-reason-confirm {
	background: var(--warn-color, #ff9800);
	color: #000;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.mod-reason-confirm:hover:not(:disabled) {
	opacity: 0.9;
}

.mod-reason-confirm:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Appeal Review Dialog (content-specific) ── */

.appeal-review-loading {
	text-align: center;
	padding: 1.5rem;
	color: var(--neutral-7, #888);
}

.appeal-section {
	margin-bottom: 1rem;
}

.appeal-section:last-child {
	margin-bottom: 0;
}

.appeal-section-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--neutral-7, #888);
	margin-bottom: 0.5rem;
	letter-spacing: 0.5px;
}

.appeal-content-card {
	background: var(--neutral-2, #f5f5f5);
	border-radius: 6px;
	padding: 0.75rem;
}

.appeal-author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.appeal-author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.appeal-author-name {
	font-weight: 600;
	font-size: 14px;
}

.appeal-content-date {
	font-size: 12px;
	color: var(--neutral-7, #888);
}

.appeal-content-body {
	font-size: 14px;
	line-height: 1.5;
	word-break: break-word;
}

.appeal-content-images {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.appeal-content-images:empty {
	display: none;
}

.appeal-content-img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
}

.appeal-mod-card {
	background: var(--neutral-2, #f5f5f5);
	border-left: 3px solid var(--warn-color, #ff9800);
	border-radius: 0 6px 6px 0;
	padding: 10px 12px;
}

.appeal-mod-detail {
	font-size: 13px;
	line-height: 1.6;
}

.appeal-reason-card {
	background: var(--neutral-2, #f5f5f5);
	border-left: 3px solid var(--accent-7, #4a90d9);
	border-radius: 0 6px 6px 0;
	padding: 10px 12px;
}

.appeal-user-reason {
	font-size: 14px;
	line-height: 1.5;
	font-style: italic;
}

.appeal-filed-date {
	font-size: 12px;
	color: var(--neutral-7, #888);
	margin-top: 6px;
}

.appeal-approve-btn {
	background: var(--success-color);
	color: #fff;
}

.appeal-approve-btn:hover:not(:disabled) {
	opacity: 0.9;
}

.appeal-deny-btn {
	background: var(--error-color);
	color: #fff;
}

.appeal-deny-btn:hover:not(:disabled) {
	opacity: 0.9;
}

.appeal-approve-btn:disabled,
.appeal-deny-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Mod Action Indicators in Popup Menus ── */

[data-popup-panel] [data-action][data-mod] {
	color: var(--warn-color, #ff9800);
	font-weight: 500;
}

/* =====================================================================
 * Appeal / Moderation-Deleted Placeholders
 * ===================================================================== */

.mod-deleted {
	border-left: 3px solid var(--warn-color, #ff9800);
	opacity: 0.9;
}

.mod-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	background: oklch(from var(--warn-color) l c h / 0.06);
	border-radius: 6px;
	margin: 0.5rem;
}

.comment-row.mod-deleted .mod-notice,
.reply-row.mod-deleted .mod-notice {
	padding: 0.75rem;
	font-size: 0.9rem;
	margin: 0.25rem 0;
}

.mod-notice-icon {
	flex-shrink: 0;
	color: var(--warn-color, #ff9800);
	margin-top: 2px;
}

.mod-notice-text {
	flex: 1;
	min-width: 0;
}

.mod-notice-title {
	font-weight: 600;
	margin: 0 0 0.25rem 0;
}

.mod-notice-reason {
	color: var(--neutral-6);
	font-style: italic;
	margin: 0 0 0.5rem 0;
	word-break: break-word;
}

/* Appeal input section inside the review modal */

.appeal-input-section {
	margin-top: 12px;
}

.appeal-input-textarea {
	width: 100%;
	min-height: 80px;
	font-size: 0.9rem;
	resize: vertical;
}

/* Appeal denial card in review modal */

.appeal-denial-card {
	background: oklch(from var(--error-color) l c h / 0.08);
	border-left: 3px solid var(--error-color);
	border-radius: 0 6px 6px 0;
	padding: 10px 12px;
}

.appeal-denial-note {
	font-size: 14px;
	line-height: 1.5;
}

/* Footer state containers */

.appeal-footer-author,
.appeal-footer-author-input,
.appeal-footer-mod,
.appeal-footer-readonly {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.appeal-readonly-text {
	font-size: 13px;
	color: var(--neutral-7, #888);
	font-style: italic;
}

.appeal-btn-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Controls Bar (shared: all filter/action bars) ──────────────────── */

.controls-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.controls-bar label {
	white-space: nowrap;
}
.controls-bar select {
	width: auto;
	padding: var(--field-pad);
	border-radius: var(--border-radius);
	border: 1px solid var(--form-border-color);
	background: var(--form-field-bg);
	color: var(--form-field-color);
}
.controls-bar-filter {
	display: flex;
	align-items: center;
	gap: .5rem;
}
@media (width < 768px) {
	.controls-bar {
		flex-direction: column;
		align-items: stretch;
	}
}

.card-meta {
	font-size: 0.85rem;
	color: var(--neutral-6, #999);
	margin: 0.25rem 0 0;
}
.card-details .card-meta {
	color: var(--text-on-dark);
	text-shadow: 0px 0px 4px rgb(0, 0, 0, 1);
}
.card-role-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--neutral-6, #999);
	padding: 0.2rem 0.5rem;
}
.card-role-label.pending {
	color: var(--entity-status-pending);
}

/* Group restricted view (private/secret) */
.group-restricted {
	text-align: center;
	padding: 3rem 1rem;
}
.group-restricted i {
	color: var(--neutral-5, #aaa);
}
.group-restricted h3 {
	margin: 1rem 0 0.5rem;
}
.group-restricted p {
	color: var(--neutral-6, #999);
	margin-bottom: 1rem;
}
.group-rules-box {
	text-align: left;
	padding: 0.75rem;
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	margin: 1rem auto;
	max-width: 480px;
}
.group-rules-box h4 {
	margin: 0 0 0.5rem;
}
.invite-response-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-block-start: 1rem;
}

/* Group read-only: hide engagement controls for non-members */
[data-group-readonly] .topic-footer,
[data-group-readonly] .comment-actions button,
[data-group-readonly] .reply-actions button {
	display: none;
}

/* Members section headings */
.members-section {
	margin-bottom: 1.5rem;
}
.members-section h4 {
	margin-bottom: 0.75rem;
}

/* Member role badges on cards */
.role-owner { color: var(--cre8-blue, #3b82f6); font-weight: 600; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.75);}
.role-moderator { color: var(--entity-status-accepted); font-weight: 600; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.75);}
.role-member { color: var(--neutral-6, #999); text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.75);}

/* Danger zone in settings */
.danger-zone {
	padding: 1rem;
	border: 1px solid var(--error-color);
	border-radius: var(--border-radius);
	margin-top: 1rem;
}
.danger-zone h4 {
	color: var(--error-color);
	margin-bottom: 0.5rem;
}
.btn-danger {
	background: var(--error-color);
	color: #fff;
	border: 1px solid var(--error-color);
	padding: var(--btn-pad);
	border-radius: var(--border-radius);
	cursor: pointer;
}
.btn-danger:hover {
	opacity: 0.9;
}

/* Status badges on member management */
.status-pending {
	background: var(--entity-status-pending);
	border: 1px solid var(--panel-border-color);
}

#create-group-dialog,
#create-page-dialog {
	--dlg-w: 440px;
}
#create-group-dialog .dialog-body,
#create-page-dialog .dialog-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
#create-group-dialog label,
#create-page-dialog label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

/* Panel description — shared see-more / see-less clamp */
.panel-description.clamped {
	display: -webkit-box;
	-webkit-line-clamp: 10;
	line-clamp: 10;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.panel-description-toggle {
	background: none;
	border: none;
	padding: 0;
	margin: 0.25rem 0 0;
	color: var(--link-color, #4e9eff);
	cursor: pointer;
	font-size: 0.85em;
}
.panel-description-toggle:hover {
	text-decoration: underline;
}

/* Group left aside info panel */
.group-info-panel .group-description {
	font-size: 0.9em;
	color: var(--neutral-6, #999);
	margin: 0 0 0.75rem;
}
.group-info-panel .group-category {
	font-size: 0.85em;
	color: var(--neutral-6, #999);
	margin: 0 0 0.25rem;
}
.group-info-panel .group-created {
	font-size: 0.85em;
	color: var(--neutral-5, #aaa);
	margin: 0;
}
.group-info-panel .group-join-hint {
	font-size: 0.85em;
	color: var(--accent-1, #4a90d9);
	margin: 0.5rem 0 0;
}
.panel-search {
	margin-top: 0.75rem;
}
.panel-search .search-field {
	max-width: none;
}
.panel-body-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.group-info-panel .panel-body-buttons {
	margin-top: 0.75rem;
}
.panel-body-buttons .btn-secondary {
	width: 100%;
	box-sizing: border-box;
}
.btn-locked {
	opacity: 0.45;
	cursor: not-allowed;
}
.btn-locked:hover,.btn-locked:focus-visible {
	background: var(--button-secondary-bg);
	color: var(--button-secondary-color);
}
.tier-badge {
	font-size: 0.7rem;
	opacity: 0.8;
	margin-left: 0.25rem;
}

/* Group right aside tags panel */
.tag-cloud {
	overflow-y: auto;
	max-height: 300px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tag-item {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--neutral-2, #e5e5e5);
	color: var(--neutral-7, #555);
	font-size: 0.85em;
	cursor: pointer;
}
.tag-item:hover {
	background: var(--neutral-3, #d4d4d4);
}

/* Tag search results header */
.tag-search-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	background: var(--panel-bg, #fff);
	border: 1px solid var(--panel-border-color, #eee);
	border-radius: 8px;
}
.tag-search-header span {
	font-size: 0.95rem;
	color: var(--text-color, #333);
}
.tag-search-back {
	background: none;
	border: 1px solid var(--neutral-3, #d4d4d4);
	border-radius: 6px;
	padding: 4px 12px;
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--text-muted, #888);
}
.tag-search-back:hover {
	background: var(--neutral-2, #e5e5e5);
	color: var(--text-color, #333);
}

/* Group right aside stats panel */
.stat-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--panel-border-color, #eee);
}
.stat-row:last-child {
	border-bottom: none;
}

/* ── Friends Online Panel (right aside) ──────────────────── */
.fo-body { padding: 0.75rem; }
.fo-body .empty-state { padding: 0.5rem; text-align: center; font-size: .85rem; }
.fo-count { font-size: 0.8em; font-weight: normal; opacity: 0.7; }
.fo-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 280px; overflow-y: auto; }
.fo-avatar-link { position: relative; display: inline-block; width: 36px; height: 36px; flex-shrink: 0; }
.fo-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.fo-badge { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel-body-bg, var(--panel-bg)); }
.fo-badge--online { background: var(--success-color); }
.fo-badge--offline { background: var(--panel-body-bg, var(--panel-bg)); border: 1.5px solid var(--neutral-5, #999); }

/* ── Membership Page ──────────────────────────────────────────────── */

.membership-intro {
	color: var(--text-muted);
	margin-bottom: 1rem;
}

.tier-cards-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	margin-block: 1.5rem;
}

.tier-card {
	background: var(--panel-body-bg);
	border: 2px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: border-color 0.2s;
}

.tier-card:hover {
	border-color: var(--accent-6);
}

.tier-card-current {
	border-color: var(--accent-5);
	border-width: 3px;
}

.tier-badge {
	position: absolute;
	top: 2px;
	right: 1rem;
	background: var(--accent-5);
	color: var(--neutral-1);
	padding: 0.25rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.tier-header {
	text-align: center;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--panel-border-color);
}

.tier-name {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--text-primary);
	text-align: center;
	padding: 0 0.5rem;
	margin: 0 auto;
}

.tier-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem;
}

.price-amount {
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent-6);
}

.price-period {
	font-size: 0.95rem;
	color: var(--text-muted);
}

.tier-body {
	flex: 1;
	padding: 1.25rem 0;
}

.tier-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tier-features li {
	padding: 0.4rem 0 0.4rem 1.5rem;
	position: relative;
	color: var(--text-primary);
}

.tier-features li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--accent-5);
	font-weight: bold;
}

.tier-footer {
	padding-top: 0.75rem;
}

.tier-action-form {
	margin: 0;
}

.tier-action-btn {
	width: 100%;
	padding: 0.7rem 1rem;
	font-size: 1rem;
	font-weight: 600;
}

/* Billing info */
.billing-info {
	margin-top: 2rem;
	max-width: 560px;
	margin-inline: auto;
}

.billing-row {
	display: flex;
	justify-content: space-between;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--panel-border-color);
}

.billing-row:last-child {
	border-bottom: none;
}

.billing-label {
	font-weight: 600;
	color: var(--text-muted);
}

.billing-value {
	color: var(--text-primary);
}

.status-active {
	color: var(--accent-5);
	font-weight: 600;
}

.status-warning {
	color: oklch(from var(--warn-color) calc(l - 0.1) c h);
	font-weight: 600;
}

@media (width < 768px) {
	.tier-cards-wrapper {
		grid-template-columns: 1fr;
	}
}

/* ── Admin Panel ────────────────────────────────────────────────── */
.search-field {
	display: inline-flex;
	align-items: center;
	flex: 1;
	min-width: 180px;
	max-width: 300px;
	background: var(--form-field-bg);
	border: 1px solid var(--form-border-color);
	border-radius: var(--border-radius);
	padding-right: 0.25rem;
}
.search-field input {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
}
.search-field input:focus { outline: none; }
.search-field:focus-within {
	border-color: var(--accent-5);
}
.search-field-submit,
.search-field-clear {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	padding: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.search-field-submit svg,
.search-field-clear svg { width: 16px; height: 16px; }
.search-field-submit:hover,
.search-field-clear:hover { color: var(--body-color); }

/* ── Div-based Table Layout ─────────────────────────────────────── */
.dtable-wrap { overflow-x: auto; margin-block: 1rem; container-type: inline-size; }
.dtable { display: table; width: 100%; border-collapse: collapse; }
.dtable-header { display: table-header-group; }
.dtable-body { display: table-row-group; }
.dtable-row { display: table-row; }
.dtable-cell {
	display: table-cell;
	vertical-align: middle;
	padding: .375rem .25rem;
	border-bottom: 1px solid var(--panel-border-color);
}
.dtable-header .dtable-cell {
	font-weight: 600;
	font-size: .85rem;
	color: var(--text-muted);
	white-space: nowrap;
	padding-block: .5rem;
	border-bottom: 1px solid var(--panel-border-color);
}
.dtable-body .dtable-row:hover { background: var(--panel-heading-bg); }
.dtable-cell-avatar { width: 40px; }
.dtable-cell-avatar img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}
/* Reaction image thumbnail with hover preview */
.reaction-thumb {
	width: 28px;
	height: 28px;
	object-fit: contain;
	cursor: pointer;
	border-radius: 4px;
}
.reaction-preview {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	padding: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.reaction-preview img {
	display: block;
	max-width: 128px;
	max-height: 128px;
	object-fit: contain;
}
.dtable-cell-actions { width: 1%; white-space: nowrap; }
.member-action-select,
.table-row-action {
	padding: 0.25rem 0.5rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--form-border-color);
	background: var(--form-field-bg);
	color: var(--form-field-color);
	font-size: .85rem;
	cursor: pointer;
	width: auto;
	min-width: max-content;
}

/* Role badge pills for table rows */
.role-badge {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 10px;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}
.role-badge.role-owner { background: color-mix(in srgb, var(--cre8-blue, #3b82f6) 15%, transparent); color: var(--cre8-blue, #3b82f6); text-shadow: none; }
.role-badge.role-moderator { background: color-mix(in srgb, var(--entity-status-accepted) 15%, transparent); color: var(--entity-status-accepted); text-shadow: none; }
.role-badge.role-member { background: color-mix(in srgb, var(--neutral-6, #999) 15%, transparent); color: var(--neutral-6, #999); text-shadow: none; }

/* Privacy badge pills (reusable) */
.privacy-badge {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 10px;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}
.privacy-badge.privacy-public { background: color-mix(in srgb, var(--entity-status-accepted) 25%, transparent); color: var(--success-color); text-shadow: none; }
.privacy-badge.privacy-private { background: color-mix(in srgb, var(--entity-status-pending) 25%, transparent); color: var(--warn-color); text-shadow: none; }
.privacy-badge.privacy-secret { background: color-mix(in srgb, var(--entity-status-blocked) 25%, transparent); color: var(--error-color); text-shadow: none; }
.privacy-badge.privacy-system { background: color-mix(in srgb, var(--cre8-blue, #3b82f6) 15%, transparent); color: var(--cre8-blue, #3b82f6); text-shadow: none; }

/* Responsive dtable: stack cells as label-value rows
   Uses container query on .dtable-wrap so stacking responds to actual
   available width, not viewport — handles aside show/hide transitions. */
@container (width < 800px) {
	.dtable { display: block; }
	.dtable-header { display: none; }
	.dtable-body { display: block; }
	.dtable-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border: 1px solid var(--panel-border-color);
		border-radius: var(--border-radius);
		padding: .75rem;
		margin-bottom: .75rem;
	}
	.dtable-row:hover { background: none; }
	.dtable-cell {
		display: flex;
		align-items: center;
		padding: .3rem 0;
		border-bottom: none;
		flex: 0 0 100%;
		order: 2;
	}
	.dtable-cell[data-label]::before {
		content: attr(data-label);
		flex: 0 0 35%;
		font-weight: 600;
		font-size: .85rem;
		color: var(--text-muted);
	}
	.dtable-cell-avatar {
		flex: 0 0 auto;
		order: 0;
		justify-content: flex-start;
		padding-bottom: 0;
	}
	.dtable-cell-avatar::before { display: none; }
	.dtable-cell-actions {
		flex: 1 1 auto;
		order: 1;
		justify-content: flex-end;
		padding-top: 0;
	}
	.dtable-cell-actions::before { display: none; }
}

/* Admin menu group labels */
.admin-group-label {
	display: block;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--text-muted);
	padding: .25rem 0 0;
	margin-top: .25rem;
	border-top: 1px solid var(--panel-border-color);
}
.admin-group-label:first-child {
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}

/* Small button variant */
.btn-sm {
	font-size: .8rem;
	padding: var(--btn-pad-sm);
}
.btn-lg {
	padding: var(--btn-pad-lg);
}

/* Admin dialog (categories Add/Edit) */
.admin-dialog h3 { margin: 0 0 1rem; }
.admin-dialog .form-group { margin-bottom: 1rem; }
.admin-dialog .form-group label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .85rem; }
.admin-dialog .form-group input { width: 100%; }
.admin-dialog .dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding-top: .5rem;
}
.admin-dialog form { padding: 1rem 1.25rem; }

/* ─────────────────────────────────────────────
 * Group Chat Panel (center content)
 * ───────────────────────────────────────────── */
.group-chat-panel .message-entry {
	position: relative;
}

/* Mod action buttons — show on hover */
.gc-mod-actions {
	display: none;
	gap: 4px;
	align-items: center;
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 2;
}
.message-entry:hover .gc-mod-actions {
	display: flex;
}
.gc-mod-actions button {
	font-size: 0.65rem;
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid var(--panel-border-color);
	background: var(--panel-bg);
	color: var(--text-muted);
	cursor: pointer;
}
.gc-mod-actions button:hover {
	background: var(--danger-bg);
	color: var(--danger-text);
	border-color: var(--danger-text);
}

/* Join/Rejoin Chat wrapper */
.gc-join-chat-wrapper {
	padding: 1.5rem 1rem;
	text-align: center;
}
.gc-join-chat-wrapper p {
	margin-bottom: 0.75rem;
	color: var(--text-muted);
}

/* ─────────────────────────────────────────────
 * Page Entity — Left Aside Info Panel
 * ───────────────────────────────────────────── */
.page-info-panel .page-description {
	font-size: 0.9em;
	color: var(--neutral-6, #999);
	margin: 0 0 0.75rem;
}
.page-info-panel .page-category {
	font-size: 0.85em;
	color: var(--neutral-6, #999);
	margin: 0 0 0.25rem;
}
.page-info-panel .page-created {
	font-size: 0.85em;
	color: var(--neutral-5, #aaa);
	margin: 0;
}
.page-info-panel .panel-body-buttons {
	margin-top: 0.75rem;
}

/* Page Chat Panel (center content) — mirrors group-chat-panel */
.page-chat-panel .message-entry {
	position: relative;
}

/* ─────────────────────────────────────────────
 * Invite Members Dialog
 * ───────────────────────────────────────────── */
.invite-results {
	max-height: 280px;
	overflow-y: auto;
	margin-top: 0.5rem;
}
.invite-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.25rem;
	border-bottom: 1px solid var(--panel-border-color);
	cursor: pointer;
}
.invite-row:last-child {
	border-bottom: none;
}
.invite-row:hover {
	background: var(--panel-heading-bg);
}
.invite-row-name {
	flex: 1;
	font-size: 0.9rem;
}
.invite-row .invite-checkbox {
	flex-shrink: 0;
}

/* === @Mention Autocomplete Popup === */
.mention-popup {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	max-height: 280px;
	overflow-y: auto;
	z-index: 10000;
}
.mention-popup.hidden {
	display: none;
}
.mention-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	cursor: pointer;
	transition: background 0.1s;
}
.mention-item:hover,
.mention-item.active {
	background: var(--panel-heading-bg);
}
.mention-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.mention-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mention-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--body-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mention-name {
	font-size: 11px;
	color: var(--text-muted);
}

/* Rendered @mention links in body text */
a.mention {
	color: var(--accent-color);
	font-weight: 500;
	text-decoration: none;
}
a.mention:hover {
	text-decoration: underline;
}

/* ── Albums ─────────────────────────────────────────────────── */
/* Album cards use .card-grid / .page-list-grid (shared entity pattern) */

/* Album detail toolbar */
.album-detail-toolbar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	flex-wrap: wrap;
}
.album-detail-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.album-detail-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-shrink: 0;
}

/* Image grid within album detail */
.album-image-grid {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.album-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--border-radius);
	background: var(--neutral-3);
}
.album-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
}

/* Hover actions overlay */
.album-img-actions {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 4px;
	padding: 6px;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.album-image:hover .album-img-actions {
	opacity: 1;
}

.album-img-delete,
.album-img-cover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.album-img-delete:hover {
	background: var(--error-color);
}
.album-img-cover:hover {
	background: var(--cre8-blue);
}

/* Brief highlight when cover is set */
.album-image.cover-set {
	outline: 3px solid var(--cre8-blue);
	outline-offset: -3px;
}

/* Upload dialog sizing */
.album-upload-dialog {
	--dlg-w: 560px;
}

@media (width < 768px) {
	.album-image-grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
	.album-detail-toolbar {
		gap: 0.5rem;
	}
}

/* ==============================
 * Topic Pending Approval Banner
 * ============================= */
.topic-pending-banner {
	background: color-mix(in srgb, var(--warn-color) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--warn-color) 30%, transparent);
	border-radius: var(--border-radius);
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.pending-badge {
	font-size: 0.82rem;
	font-weight: 600;
	color: oklch(from var(--warn-color) calc(l - 0.15) c h);
}
.pending-actions {
	display: flex;
	gap: 0.4rem;
}
.pending-actions .btn-sm {
	font-size: 0.8rem;
	padding: var(--btn-pad-sm);
}
.pending-actions .btn-sm.approve {
	background: var(--entity-status-accepted);
	color: var(--text-on-dark);
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
}
.pending-actions .btn-sm.approve:hover { opacity: 0.9; }
.pending-actions .btn-sm.danger {
	background: var(--error-color);
	color: var(--text-on-dark);
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
}
.pending-actions .btn-sm.danger:hover { opacity: 0.9; }

/* Limited role badge (member list) */
.role-badge.role-limited {
	background: color-mix(in srgb, var(--warn-color) 15%, transparent);
	color: oklch(from var(--warn-color) calc(l - 0.15) c h);
	text-shadow: none;
}

/* ==============================
 * Transfer Ownership Banner
 * ============================= */
.transfer-banner {
	background: color-mix(in srgb, var(--cre8-blue, #3b82f6) 10%, var(--panel-bg, #fff));
	border: 1px solid color-mix(in srgb, var(--cre8-blue, #3b82f6) 30%, transparent);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	margin: 0.5rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.transfer-banner p {
	margin: 0;
	font-weight: 500;
}
.transfer-banner-actions {
	display: flex;
	gap: 0.5rem;
}

/* System entity banner (settings form) */
.system-entity-banner {
	background: color-mix(in srgb, var(--cre8-blue, #3b82f6) 10%, var(--panel-bg, #fff));
	border: 1px solid color-mix(in srgb, var(--cre8-blue, #3b82f6) 30%, transparent);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
}
.system-entity-banner p {
	margin: 0;
	font-weight: 500;
}

/* Announcement banner (newsfeed) */
.announcement-banner {
	background: color-mix(in srgb, var(--cre8-blue, #3b82f6) 10%, var(--panel-bg, #fff));
	border: 1px solid color-mix(in srgb, var(--cre8-blue, #3b82f6) 30%, transparent);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.announcement-content {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	flex: 1;
	min-width: 0;
}
.announcement-icon {
	flex-shrink: 0;
	color: var(--cre8-blue, #3b82f6);
	padding-top: 0.1rem;
}
.announcement-text {
	min-width: 0;
}
.announcement-text strong {
	display: block;
	margin-bottom: 0.25rem;
}
.announcement-text p {
	margin: 0 0 0.25rem;
	color: var(--text-muted);
}
.announcement-actions {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}
@media (width < 512px) {
	.announcement-banner {
		flex-direction: column;
	}
	.announcement-actions {
		width: 100%;
	}
	.announcement-actions button {
		flex: 1;
	}
}

/* Invite banner (page entity) */
.invite-banner {
	background: color-mix(in srgb, var(--cre8-blue, #3b82f6) 10%, var(--panel-bg, #fff));
	border: 1px solid color-mix(in srgb, var(--cre8-blue, #3b82f6) 30%, transparent);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.invite-banner-text {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.invite-banner-text p {
	margin: 0;
}
.invite-banner-text svg {
	flex-shrink: 0;
	color: var(--cre8-blue);
}
.invite-banner-actions {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}
@media (width < 512px) {
	.invite-banner {
		flex-direction: column;
	}
	.invite-banner-actions {
		width: 100%;
	}
	.invite-banner-actions button {
		flex: 1;
	}
}

/* Group mobile action bar — visible only on mobile */
.group-mobile-actions {
	display: none;
}
@media (width < 768px) {
	.group-mobile-actions {
		display: flex;
		gap: 0.5rem;
		padding: 0.5rem 0;
	}
}

/* Transfer search card (dialog) */
.transfer-card {
	cursor: pointer;
}
.transfer-card .transfer-radio {
	margin-right: 0.5rem;
}
.invite-role {
	font-size: 0.8rem;
	color: var(--neutral-6, #999);
}

/* ==============================
 * Report Channels
 * ============================= */

/* Channel list — report channel styling */
.channel-entry.channel-report {
	border-left: 3px solid var(--error-color);
}
.channel-entry.channel-report:hover {
	border-left-color: var(--error-color);
}

/* Channel type badge in channel list */
.channel-type-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
	line-height: 1.2;
	vertical-align: middle;
	margin-left: 0.35rem;
}
.channel-type-badge.report-badge {
	background: color-mix(in srgb, var(--error-color) 15%, transparent);
	color: var(--error-color);
}

/* Report actions bar in message window header */
#report-actions-bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	background: color-mix(in srgb, var(--panel-heading-bg) 60%, transparent);
	border-bottom: 1px solid var(--neutral-2, #e5e5e5);
	flex-wrap: wrap;
}
#report-actions-bar .report-status-badge {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	text-transform: capitalize;
}
#report-actions-bar .report-status-badge.open {
	background: color-mix(in srgb, var(--error-color) 15%, transparent);
	color: var(--error-color);
}
#report-actions-bar .report-status-badge.resolved {
	background: color-mix(in srgb, var(--entity-status-accepted) 15%, transparent);
	color: var(--success-color);
}
#report-actions-bar .report-action-buttons {
	display: flex;
	gap: 0.35rem;
	margin-left: auto;
}
#report-actions-bar .btn-sm {
	font-size: 0.75rem;
	padding: var(--btn-pad-sm);
}
#report-actions-bar .btn-sm.danger {
	background: var(--error-color);
	color: var(--text-on-dark);
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
}
#report-actions-bar .btn-sm.danger:hover { opacity: 0.9; }

/* Report system message card (first message in report channel) */
.report-context-card {
	background: color-mix(in srgb, var(--panel-heading-bg) 40%, var(--panel-bg, #fff));
	border: 1px solid var(--neutral-2, #e5e5e5);
	border-left: 3px solid var(--error-color);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	margin: 0.25rem 0;
	font-size: 0.85rem;
	line-height: 1.5;
}
.report-context-card strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--error-color);
}
.report-context-card .report-preview {
	background: var(--panel-bg, #fff);
	border: 1px solid var(--neutral-2, #e5e5e5);
	border-radius: var(--border-radius);
	padding: 0.5rem 0.75rem;
	margin: 0.5rem 0;
	font-style: italic;
	color: var(--text-on-light);
	max-height: 120px;
	overflow: hidden;
}

/* Admin reports queue status badge */
.report-status-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	text-transform: capitalize;
}
.report-status-badge.open {
	background: color-mix(in srgb, var(--error-color) 15%, transparent);
	color: var(--error-color);
}
.report-status-badge.resolved {
	background: color-mix(in srgb, var(--entity-status-accepted) 15%, transparent);
	color: var(--success-color);
}

/* Report resolution system message */
.report-resolution-msg {
	text-align: center;
	font-size: 0.8rem;
	color: var(--neutral-6, #999);
	font-style: italic;
	padding: 0.5rem 0;
}

/* ============================================================
 * Support Ticketing System
 * ============================================================ */

/* Section shell */
.support-section {
	width: 100%;
}
.support-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.support-header h2 {
	margin: 0;
}

/* Ticket list — user-facing */
.support-ticket-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.support-ticket-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--panel-body-bg);
	border: 1px solid var(--panel-border-color);
	border-radius: var(--border-radius);
	text-decoration: none;
	color: inherit;
	transition: background 0.15s;
}
.support-ticket-row:hover {
	background: color-mix(in srgb, var(--panel-body-bg) 90%, var(--accent-1));
}
.support-ticket-row-main {
	flex: 1;
	min-width: 0;
}
.support-ticket-subject {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.support-ticket-row-meta {
	font-size: 0.8rem;
	color: var(--neutral-6, #999);
	margin-top: 0.15rem;
}

/* Status badges — shared between user and admin views */
.support-status-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	text-transform: capitalize;
	white-space: nowrap;
}
.status-open {
	background: color-mix(in srgb, var(--error-color) 15%, transparent);
	color: var(--error-color);
}
.status-assigned {
	background: color-mix(in srgb, var(--cre8-blue) 15%, transparent);
	color: var(--cre8-blue);
}
.status-closed {
	background: color-mix(in srgb, var(--neutral-6, #999) 15%, transparent);
	color: var(--neutral-6, #999);
}
.active {
	background: color-mix(in srgb, var(--entity-status-accepted) 15%, transparent);
	color: var(--success-color);
}
.past-due {
	background: color-mix(in srgb, var(--warn-color) 15%, transparent);
	color: oklch(from var(--warn-color) calc(l - 0.1) c h);
}

/* Subscription stats grid */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 0.75rem;
	text-align: center;
}
.stats-grid .stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	display: block;
}
.stats-grid .stat-label {
	font-size: 0.8rem;
	color: var(--text-muted);
}

/* Back link */
.support-back-link {
	display: inline-block;
	margin-bottom: 1rem;
	font-size: 0.85rem;
	color: var(--accent-1);
	text-decoration: none;
}
.support-back-link:hover {
	text-decoration: underline;
}

/* Ticket detail header */
.support-ticket-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.25rem;
}
.support-ticket-header h2 {
	margin: 0;
	flex: 1;
	min-width: 0;
	word-break: break-word;
}
.support-ticket-meta {
	font-size: 0.8rem;
	color: var(--neutral-6, #999);
	margin-bottom: 1rem;
}

/* Message thread */
.support-messages {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.support-msg {
	padding: 0.75rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--panel-border-color);
}
.support-msg-user {
	background: var(--panel-body-bg);
}
.support-msg-staff {
	background: color-mix(in srgb, var(--accent-1) 8%, var(--panel-body-bg));
	border-color: color-mix(in srgb, var(--accent-1) 25%, var(--panel-border-color));
}
.support-msg-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
}
.support-msg-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.support-msg-time {
	margin-left: auto;
	color: var(--neutral-6, #999);
	font-size: 0.75rem;
}
.support-msg-body {
	font-size: 0.9rem;
	line-height: 1.5;
	word-break: break-word;
}
.support-staff-label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--accent-1);
	background: color-mix(in srgb, var(--accent-1) 12%, transparent);
	padding: 0.05rem 0.35rem;
	border-radius: 3px;
}

/* Reply form */
.support-reply-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.support-reply-form textarea {
	width: 100%;
	resize: vertical;
	min-height: 80px;
	padding: var(--field-pad);
	border: 1px solid var(--form-border-color);
	border-radius: var(--border-radius);
	background: var(--form-field-bg);
	color: var(--form-field-color);
	font: inherit;
	font-size: 0.9rem;
	box-sizing: border-box;
}
.support-reply-form textarea:focus {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}
.support-reply-form .btn-primary {
	align-self: flex-end;
}

/* Closed notice */
.support-closed-notice {
	text-align: center;
	padding: 1rem;
	border: 1px dashed var(--panel-border-color);
	border-radius: var(--border-radius);
	color: var(--neutral-6, #999);
}
.support-closed-notice p {
	margin: 0 0 0.5rem;
}

/* New ticket dialog */
#support-new-ticket-dialog {
	--dlg-w: 480px;
}
#support-new-ticket-dialog .form-group {
	margin-bottom: 0.75rem;
}
#support-new-ticket-dialog label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}
#support-new-ticket-dialog input[type="text"],
#support-new-ticket-dialog textarea {
	width: 100%;
	padding: var(--field-pad);
	border: 1px solid var(--form-border-color);
	border-radius: var(--border-radius);
	background: var(--form-field-bg);
	color: var(--form-field-color);
	font: inherit;
	font-size: 0.9rem;
	box-sizing: border-box;
}
#support-new-ticket-dialog input[type="text"]:focus,
#support-new-ticket-dialog textarea:focus {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}