/*
                                               :
                                              ::
   © ponkis.xyz 2026                         ::
                                             ::
                                            ::
                                            ::
                              __           ::
   _..-'/-¯¯--/_          ,.--. ''.     |`\=,..
-:--.---''-..  /_         |\\_\..  \    `-.=._/
.-|¯         '.  \         \_ \-`/\ |    ::`
  /  @  \      \  -_   _..--|-\¯¯``'--.-/_\
  |   .-'|      \  \\-'\_/     ¯/-.|-.\_\_/
  \_./` /        \_//-''/    .-'
       |           '-/'@====/              _.--.
   __.'             /¯¯'-. \-'.          _/   /¯'
.''____|   /       |'--\__\/-._        .'    |
 \ \_. \  |       _| -/        \-.__  /     /
  \___\ '/   _.  ('-..| /       '_  ''   _.'
        /  .'     ¯¯¯¯ /        | ``'--''
       (  / ¯```¯¯¯¯¯|-|        |
        \ \_.         \ \      /
         \___\         '.'.   /
                         /    |
                        /   .'
                       /  .' |
                     .'  / \  \
                    /___| /___'
*/

@import url('https://fonts.googleapis.com/css2?family=Over+the+Rainbow&display=swap');
@import 'context-menu.css';
@import 'link-card.css';
@import 'announcements.css';
@import 'list-filters.css';
@import 'star-meter.css?v=5';
@import 'bar-graph.css';
@import 'movie-case.css';
@import 'world-map.css';
@import 'shares.css';
@import 'markdown.css';
@import '../pages/settings.css?v=4';
@import '../pages/changelog.css';
@import '../pages/roadmap.css';
@import '../pages/help.css';
@import '../pages/bulletin.css';
@import '../pages/credits.css';
@import '../pages/games.css?v=5';
@import '../pages/discovery.css?v=2';
@import '../pages/auth.css';
@import '../pages/video-area.css';
@import '../pages/profile-views.css';
@import '../pages/blog.css';
@import '../pages/movies.css';
@import '../pages/scrobbles.css';

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

textarea::placeholder {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
}

.henny-penny-regular {
	font-family: "Henny Penny", system-ui;
	font-weight: 400;
	font-style: normal;
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
	animation-duration: 0.01s !important;
	animation-delay: 0s !important;
	transition-duration: 0.01s !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01s !important;
		animation-delay: 0s !important;
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.message.ghost,
.wall-post-item.ghost,
.status-update-item.ghost,
.system-message.ghost,
.gw-comment-item.ghost {
	opacity: 0.5;
	filter: grayscale(1);
	transition: none !important;
	pointer-events: none;
}

.gw-comment-item.ghost-deleting,
.gw-comment-thread.ghost-deleting {
	opacity: 0.4;
	filter: grayscale(0.8);
	pointer-events: none;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

.gw-loading-comments {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.5rem 0;
	padding: 0.5rem 0;
	font-size: 10px;
}

.gw-loading-comments .throbber {
	--throbber-size: 28px;
}

body[data-active-view="auth-page"] .auth-shell {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 18px;
	align-items: stretch;
	width: 100%;
}

body[data-active-view="auth-page"] .auth-hero,
body[data-active-view="auth-page"] .auth-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

body[data-active-view="auth-page"] .auth-hero-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

body[data-active-view="auth-page"] .auth-panel {
	height: 100%;
	min-width: 0;
	min-height: 0;
}

body[data-active-view="auth-page"] .auth-panel>.form-container {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

body[data-active-view="auth-page"] .auth-hero-card {
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	padding: 16px;
}

body[data-active-view="auth-page"] .auth-brand {
	border: 1px solid var(--border-primary);
	background: linear-gradient(to bottom, var(--surface-subtle), var(--bg-body));
	padding: 14px 14px 12px 14px;
	position: relative;
}

body[data-active-view="auth-page"] .auth-brand-badge {
	position: absolute;
	top: 8px;
	right: 10px;
	opacity: 0.35;
	font-size: 22px;
}

body[data-active-view="auth-page"] .auth-brand-title {
	margin: 0;
	font-size: 28px;
	letter-spacing: 1px;
	color: var(--color-primary, #3b5998);
	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
	font-weight: 700;
	user-select: none;
	line-height: 1.1;
}

body[data-active-view="auth-page"] .auth-cursor {
	font-family: 'Courier New', monospace;
	color: var(--color-primary, #3b5998);
	animation: authCursorBlink 1s step-end infinite !important;
}

@keyframes authCursorBlink {

	0%,
	50% {
		opacity: 1;
	}

	50.01%,
	100% {
		opacity: 0;
	}
}

body[data-active-view="auth-page"] .auth-brand-subtitle {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	color: var(--text-muted);
	user-select: none;
}

body[data-active-view="auth-page"] .auth-brand-subtitle .auth-subtitle-left {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
}

body[data-active-view="auth-page"] .auth-brand-subtitle .auth-powered-by {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--text-muted);
}

body[data-active-view="auth-page"] .auth-brand-subtitle .auth-powered-by-link {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

body[data-active-view="auth-page"] .auth-brand-subtitle .auth-powered-by img {
	height: 14px;
	width: auto;
	filter: invert(1);
	opacity: 0.6;
	pointer-events: none;
	-webkit-user-drag: none;
	transition: opacity 0.2s ease;
}

body[data-active-view="auth-page"] .auth-brand-subtitle .auth-powered-by-link:hover img {
	opacity: 1;
}

body[data-active-view="auth-page"] .auth-brand-subtitle #app-version,
body[data-active-view="auth-page"] .auth-brand-subtitle #user-count-text {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: inherit;
}

body[data-active-view="auth-page"] .auth-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
}

body[data-active-view="auth-page"] .auth-meta-item {
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
	padding: 10px;
}

body[data-active-view="auth-page"] .auth-meta-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--text-muted);
	margin-bottom: 4px;
}

body[data-active-view="auth-page"] .auth-meta-value {
	font-size: 12px;
	color: var(--text-primary);
	font-weight: 700;
}

body[data-active-view="auth-page"] .auth-hero-list {
	margin: 14px 0 0 0;
	padding-left: 18px;
	color: var(--text-secondary);
	font-size: 12px;
	line-height: 1.6;
}

body[data-active-view="auth-page"] .auth-recent-members {
	margin-top: 14px;
	border: 1px solid var(--border-primary);
	background: linear-gradient(0deg, rgb(247 247 247) 0%, rgba(255, 255, 255, 0) 100%);
	box-shadow: var(--shadow-light, 0 1px 2px rgba(0, 0, 0, 0.1));
	display: block;
}

body[data-active-view="auth-page"] .auth-recent-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	user-select: none;
	padding: 8px 10px;
	border-bottom: 1px solid var(--border-primary);
	background: linear-gradient(to bottom, var(--surface-subtle), var(--bg-body));
}

body[data-active-view="auth-page"] .auth-recent-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-primary, #3b5998);
	text-transform: lowercase;
}

body[data-active-view="auth-page"] .auth-recent-hint {
	font-size: 10px;
	color: var(--text-muted);
}

body[data-active-view="auth-page"] .recent-members-columns {
	display: flex;
	gap: 0;
	padding: 0;
}

body[data-active-view="auth-page"] .recent-members-column {
	flex: 1 1 0;
	min-width: 0;
}

body[data-active-view="auth-page"] .recent-members-column:not(:last-child) {
	border-right: 1px solid var(--line-soft);
}

body[data-active-view="auth-page"] .recent-members-viewport {
	overflow: hidden;
	position: relative;
}

body[data-active-view="auth-page"] .recent-members-track {
	display: block;
	will-change: transform;
}

body[data-active-view="auth-page"] .recent-members-list {
	display: block;
}

body[data-active-view="auth-page"] .recent-member-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	user-select: none;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, transparent, var(--border-primary), transparent) 1;
	background: transparent;
}

body[data-active-view="auth-page"] .recent-member-card:hover {
	background: var(--surface-subtle);
}

body[data-active-view="auth-page"] .recent-member-pfp {
	width: 28px;
	height: 28px;
	-webkit-user-drag: none;
	border: 1px solid var(--border-primary);
	object-fit: cover;
	background: var(--bg-body);
	flex-shrink: 0;
}

body[data-active-view="auth-page"] .recent-member-name {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-link, #3b5998);
}

body[data-active-view="auth-page"] .recent-member-skeleton {
	padding: 10px;
	font-size: 11px;
	text-align: center;
	color: var(--text-muted);
}

body[data-active-view="auth-page"] .auth-hero-gif {
	margin-top: 14px;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
	overflow: hidden;
}

body[data-active-view="auth-page"] .auth-hero-gif img {
	display: block;
	width: 100%;
	height: auto;
}

body[data-active-view="auth-page"] .auth-hero-gif-caption {
	padding: 8px 10px;
	border-top: 1px solid var(--border-primary);
	background: linear-gradient(to bottom, var(--surface-subtle), var(--bg-body));
	color: var(--text-secondary);
	font-size: 11px;
}

body[data-active-view="auth-page"] .auth-panel {
	width: 100%;
}

body[data-active-view="auth-page"] .auth-card {
	background-color: var(--bg-container);
	border: 1px solid var(--border-primary);
	padding: 18px;
}

body[data-active-view="auth-page"] .auth-card .alert {
	font-family: 'Tahoma', 'Verdana', 'Helvetica Neue', Arial, sans-serif;
	border-style: solid;
}

body[data-active-view="auth-page"] .auth-choice-subtitle {
	margin: 0 0 14px 0;
	color: var(--text-secondary);
	font-size: 12px;
}

body[data-active-view="auth-page"] .auth-choice-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

body[data-active-view="auth-page"] .auth-choice-note {
	margin-top: 12px;
	color: var(--text-muted);
	font-size: 11px;
	border-top: 1px solid var(--line-soft);
	padding-top: 10px;
}

body[data-active-view="auth-page"] .auth-card-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--border-primary);
}

body[data-active-view="auth-page"] .auth-card-top h2 {
	margin-bottom: 0;
	padding-bottom: 0;
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
}

body[data-active-view="auth-page"] .auth-card-top h2::before,
body[data-active-view="auth-page"] .auth-card-top h2::after {
	content: none !important;
	display: none !important;
}

body[data-active-view="auth-page"] .auth-welcome-split {
	padding: 18px;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

body[data-active-view="auth-page"] .auth-split-scroll {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	overscroll-behavior: contain;
	padding-bottom: 8px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

body[data-active-view="auth-page"] .auth-split-scroll::-webkit-scrollbar {
	width: 0;
	height: 0;
}

body[data-active-view="auth-page"] .auth-split-footer {
	margin-top: 10px;
	text-align: center;
	font-size: 11px;
	color: var(--text-muted);
	user-select: none;
}

body[data-active-view="auth-page"] .auth-welcome-split .auth-welcome-header h2 {
	margin: 0 0 10px 0;
}

body[data-active-view="auth-page"] .auth-welcome-split .auth-choice-subtitle {
	margin: 0 0 16px 0;
}

body[data-active-view="auth-page"] .auth-split-grid {
	display: flex;
	gap: 0;
	width: 100%;
}

body[data-active-view="auth-page"] .auth-split-grid>form {
	margin: 0;
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: center;
}

body[data-active-view="auth-page"] .auth-split-grid>form+form {
	border-left: none;
	padding-left: 0;
}

body[data-active-view="auth-page"] .auth-split-form.form-container {
	padding: 0;
	border: none;
	box-shadow: none;
	background: transparent;
}

body[data-active-view="auth-page"] .auth-split-form {
	padding: 0;
	border: none;
	box-shadow: none;
	background: transparent;
}

body[data-active-view="auth-page"] .auth-split-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}

body[data-active-view="auth-page"] .auth-split-top h3 {
	margin: 0;
	font-size: 16px;
	color: var(--text-primary, #1c1e21);
}

body[data-active-view="auth-page"] .auth-top-link {
	background: none;
	border: none;
	color: var(--text-link, #3b5998);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	padding: 0;
}

body[data-active-view="auth-page"] .auth-top-link:hover {
	text-decoration: underline;
}

.cf-turnstile {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.turnstile-status {
	font-size: 11px;
	color: var(--text-muted);
	text-align: center;
	margin-bottom: 12px;
	user-select: none;
	font-style: italic;
	transition: color 0.3s ease;
}

.turnstile-status.success {
	color: #42b72a;
	font-style: normal;
}

.turnstile-status.warning {
	color: #f5a623;
	font-style: normal;
}

.turnstile-status.error {
	color: #fa3e3e;
}

body[data-active-view="auth-page"] .auth-links {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

body[data-active-view="auth-page"] .auth-link {
	background: none;
	border: none;
	color: var(--text-link, #3b5998);
	font-size: 12px;
	cursor: pointer;
	padding: 0;
}

body[data-active-view="auth-page"] .auth-link:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	body[data-active-view="auth-page"] .auth-shell {
		grid-template-columns: 1fr;
	}

	body[data-active-view="auth-page"] .auth-meta {
		grid-template-columns: 1fr;
	}
}

* {
	box-sizing: border-box;
}

/* Full-page banner wash when viewing a user profile (opt-in via settings; image URL set from JS). */
body[data-active-view="user-profile-view"].profile-body-banner-backdrop,
body[data-active-view="user-profile-view"].profile-body-banner-backdrop-forced {
	background-color: var(--bg-body);
	background-image:
		linear-gradient(to bottom,
			color-mix(in srgb, var(--bg-body, #e9eaed) 96%, transparent) 0%,
			color-mix(in srgb, var(--bg-body, #e9eaed) 55%, transparent) 28%,
			transparent 52%),
		var(--profile-body-banner-image, none);
	background-size: auto, cover;
	background-position: center top, var(--profile-body-banner-position, center center);
	background-repeat: no-repeat;
	background-attachment: scroll;
}

body {
	font-family: 'Tahoma', 'Verdana', 'Helvetica Neue', Arial, sans-serif;
	background-color: var(--bg-body);
	background-image:
		repeating-linear-gradient(90deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.015) 2px,
			rgba(0, 0, 0, 0.015) 4px),
		repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.015) 2px,
			rgba(0, 0, 0, 0.015) 4px),
		repeating-linear-gradient(45deg,
			transparent,
			transparent 3px,
			rgba(255, 255, 255, 0.025) 3px,
			rgba(255, 255, 255, 0.025) 6px),
		linear-gradient(135deg,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(200, 200, 200, 0.15) 50%,
			rgba(255, 255, 255, 0.2) 100%);
	background-size: 4px 4px, 4px 4px, 6px 6px, 100% 100%;
	color: var(--text-primary);
	margin: 0;
	flex-direction: column;
	display: flex;
	font-size: 12px;
	height: 100vh;
	overflow: hidden;
	width: 100%;
	isolation: isolate;
}

.app-wrapper {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	max-width: 1040px;
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	/* Let every fixed mobile/sidebar drawer outrank the announcement bar. */
	.app-wrapper {
		z-index: auto;
	}
}

.top-placeholder-bar {
	height: 26px;
	background: var(--bg-topbar-placeholder, #3a3a3a);
	border-bottom: 1px solid var(--border-topbar-placeholder, #252525);
	display: flex;
	align-items: center;
	padding: 0 12px;
	gap: 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-topbar-placeholder, #f1f1f1);
	user-select: none;
}

.top-placeholder-bar a {
	color: var(--text-topbar-placeholder, #f1f1f1);
	text-decoration: none;
	opacity: 0.85;
}

.top-placeholder-bar a:hover {
	text-decoration: underline;
	opacity: 1;
}

body > footer {
	user-select: none;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	body {
		padding: 0;
		height: auto;
		overflow: auto;
		min-height: 100vh;
		min-height: 100dvh;
	}

	body[data-active-view="auth-page"],
	body[data-active-view="chat-page"],
	body[data-active-view="global-wall-page"],

	body[data-active-view="admin-page"],
	body[data-active-view="user-profile-view"],
	body[data-active-view="profile-page"],
	body[data-active-view="settings-page"],
	body[data-active-view="games-page"],
	body[data-active-view="terms-page"],
	body[data-active-view="privacy-page"],
	body[data-active-view="about-page"],
	body[data-active-view="region-notice-page"],
	body[data-active-view="changelog-page"],
	body[data-active-view="roadmap-page"],
	body[data-active-view="help-page"] {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
		min-height: 0;
		position: fixed;
		width: 100%;
	}

	.profile-about-me-text,
	.profile-info-grid,
	.admin-table td,
	.admin-stat-number {
		word-break: break-word;
		overflow-wrap: break-word;
		word-wrap: break-word;
		max-width: 100%;
	}

	.admin-table td,
	.profile-about-me-text {
		word-break: break-all;
	}

	body .container {
		border-top: none;
		border-left: none;
		border-right: none;
	}
}

.container {
	width: 100%;
	background-color: var(--bg-container);
	border: 1px solid var(--line-blue);
	border-top: none;
	border-bottom: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.container:has(#user-profile-view) {
	overflow: visible;
}

@keyframes containerEntrance {
	0% {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes borderGlow {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.container:hover::before {
	opacity: 0.3;
}

body[data-active-view="auth-page"] .container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

body[data-active-view="auth-page"] #auth-choice-container {
	width: 100%;
}

@keyframes formContractSlide {
	0% {
		opacity: 0;
		max-width: 900px;
		transform: translateX(-30px);
	}

	50% {
		opacity: 0.8;
		transform: translateX(0);
	}

	100% {
		opacity: 1;
		max-width: 420px;
		transform: translateX(0);
	}
}

body[data-active-view="terms-page"] .container,
body[data-active-view="privacy-page"] .container,
body[data-active-view="about-page"] .container,
body[data-active-view="region-notice-page"] .container,
body[data-active-view="changelog-page"] .container,
body[data-active-view="roadmap-page"] .container,
body[data-active-view="help-page"] .container {
	background-color: var(--bg-container);
	box-shadow: var(--shadow-light);
}

body[data-active-view="auth-page"] {
	background-color: var(--bg-body);
	background-image:
		repeating-linear-gradient(90deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.015) 2px,
			rgba(0, 0, 0, 0.015) 4px),
		repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.015) 2px,
			rgba(0, 0, 0, 0.015) 4px),
		repeating-linear-gradient(45deg,
			transparent,
			transparent 3px,
			rgba(255, 255, 255, 0.025) 3px,
			rgba(255, 255, 255, 0.025) 6px),
		linear-gradient(135deg,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(200, 200, 200, 0.15) 50%,
			rgba(255, 255, 255, 0.2) 100%);
	background-size: 4px 4px, 4px 4px, 6px 6px, 100% 100%;
}

@keyframes subtleClothShift {

	0%,
	100% {
		background-position: 0 0, 0 0, 0 0, 0 0;
	}

	25% {
		background-position: 2px 2px, -2px -2px, 1px 1px, 0 0;
	}

	50% {
		background-position: -2px -2px, 2px 2px, -1px -1px, 0 0;
	}

	75% {
		background-position: 1px -1px, -1px 1px, 2px -2px, 0 0;
	}
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.header {
	background: linear-gradient(to bottom, #4e69a2, #3b5998);
	padding: 8px 12px;
	border-bottom: 1px solid #29487d;
	position: relative;
	overflow: visible;
	min-height: 40px;
}

#header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

#typing-text {
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	font-family: 'Over the Rainbow', regular;
	user-select: none;
	letter-spacing: 1px;
	display: inline-block;
}

#header-search-container {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
}

#header-search-input {
	width: 100%;
	background: color-mix(in srgb, var(--text-header) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--text-header) 25%, transparent);
	padding: 6px 10px 6px 30px;
	color: var(--text-header);
	font-size: 12px;
	font-family: inherit;
	transition: all 0.2s ease;
	box-shadow: var(--shadow-input, inset 0 1px 2px rgba(0, 0, 0, 0.1));
}

#header-search-input::placeholder {
	color: color-mix(in srgb, var(--text-header) 65%, transparent);
}

#header-search-input:focus {
	outline: none;
	background: var(--bg-input);
	color: var(--text-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-header) 20%, transparent), var(--shadow-input);
	padding-left: 10px;
}

#header-search-input:focus::placeholder {
	color: var(--text-muted);
}

#header-search-container .search-icon {
	position: absolute;
	left: 10px;
	color: color-mix(in srgb, var(--text-header) 65%, transparent);
	font-size: 14px;
	pointer-events: none;
	transition: all 0.2s ease;
	border-radius: 0;
}

#header-search-container:focus-within .search-icon {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-5px);
}

@media (max-width: 800px) {
	#header-search-container {
		display: none !important;
	}

	/* Remove global search UI completely on mobile */
	#mobile-search-nav-link {
		display: none !important;
	}

	.header.mobile-search-open #header-search-container {
		display: none !important;
	}

	/* Mobile polish for the global search dropdown */
	#header-search-input {
		height: 28px;
		padding: 4px 8px 4px 28px;
		font-size: 12px;
		box-sizing: border-box;
	}

	.global-search-dropdown {
		max-height: 70vh;
		font-size: 13px;
	}

	.gsearch-section-header {
		font-size: 11px;
		padding: 8px 12px 6px;
	}

	.gsearch-result-item {
		min-height: 44px;
		padding: 8px 12px;
	}

	.gsearch-item-icon {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.gsearch-item-avatar {
		width: 32px;
		height: 32px;
	}
}

/* Mobile search open state (works regardless of exact viewport width) */
/* Make the mobile search icon button always consistent when visible */

.header.mobile-search-open #typing-text {
	display: none;
}

.header.mobile-search-open #header-content {
	flex-wrap: nowrap;
	gap: 10px;
}

.header.mobile-search-open #header-search-container {
	display: flex !important;
	flex: 1;
	min-width: 0;
	position: relative;
	align-items: center;
}

.header.mobile-search-open #header-search-input {
	height: 36px;
	font-size: 13px;
	padding: 6px 10px 6px 32px;
	box-sizing: border-box;
	background: var(--bg-input);
	color: var(--text-primary, #111);
	border-color: color-mix(in srgb, var(--text-header) 25%, transparent);
	box-shadow: var(--shadow-input, inset 0 1px 2px rgba(0, 0, 0, 0.1));
	border-radius: 0;
}

.header.mobile-search-open #header-search-container .search-icon {
	left: 10px;
	font-size: 16px;
}

.header.mobile-search-open .global-search-dropdown {
	/* Avoid odd absolute positioning inside a flex container */
	position: fixed;
	top: 52px;
	left: 8px;
	right: 8px;
	max-height: 70vh;
	font-size: 13px;
}

.header.mobile-search-open .gsearch-section-header {
	font-size: 11px;
}

.header.mobile-search-open .gsearch-result-item {
	min-height: 48px;
	padding: 10px 12px;
}

.header.mobile-search-open .gsearch-item-title,
.header.mobile-search-open .gsearch-display-name,
.header.mobile-search-open .gsearch-item-sub {
	font-size: inherit;
}

@media (min-width: 801px) {
	.mobile-search-nav-btn {
		display: none !important;
	}
}

/* ═══════════════════════════════════════════════
   Global Search Dropdown
   ═══════════════════════════════════════════════ */

.global-search-dropdown {
	position: absolute;
	top: calc(100% + 0px);
	left: 0;
	right: 0;
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	box-shadow: var(--shadow-hover, 0 2px 4px rgba(0, 0, 0, 0.1));
	z-index: 9999;
	max-height: 480px;
	overflow-y: auto;
	font-size: 12px;
	color: var(--text-primary);
	animation: gsearchFadeIn 0.15s ease;
}

@keyframes gsearchFadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.gsearch-section {
	border-bottom: 1px solid var(--border-primary);
}

.gsearch-section:last-child {
	border-bottom: none;
}

.gsearch-section-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 4px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--text-muted);
	background: var(--bg-message);
	border-bottom: 1px solid var(--border-primary);
	user-select: none;
}

.gsearch-section-header i {
	font-size: 12px;
}

.gsearch-result-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--border-message);
	transition: background 0.1s ease;
	min-height: 44px;
}

.gsearch-result-item:last-child {
	border-bottom: none;
}

.gsearch-result-item:hover,
.gsearch-result-item.active {
	background: var(--bg-sidebar-item-hover, #eef3fc);
}

.gsearch-item-icon {
	width: 30px;
	height: 30px;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-size: 14px;
	opacity: 0.85;
}

.gsearch-item-avatar {
	width: 32px;
	height: 32px;
	border-radius: 0;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--border-primary);
}

.gsearch-item-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gsearch-item-game-thumb {
	width: 40px;
	height: 30px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--text-primary, #1d2129);
}

.gsearch-item-game-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gsearch-item-body {
	flex: 1;
	min-width: 0;
}

.gsearch-item-title {
	font-weight: bold;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.gsearch-item-title .gsearch-title-inner {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

.gsearch-display-name {
	font-weight: normal;
	color: var(--text-muted);
	font-size: 11px;
}

.gsearch-item-sub {
	color: var(--text-secondary);
	font-size: 11px;
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gsearch-room-badge {
	font-size: 10px;
	padding: 1px 5px;
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
	color: var(--color-primary);
	border-radius: 3px;
	font-weight: normal;
}

.gsearch-item-meta {
	color: var(--text-muted);
	font-size: 10px;
	flex-shrink: 0;
	white-space: nowrap;
}

.gsearch-item-play-btn {
	color: var(--color-primary);
	font-size: 20px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.gsearch-result-item:hover .gsearch-item-play-btn {
	opacity: 1;
}

mark.gsearch-highlight,
span.gsearch-highlight {
	background: color-mix(in srgb, var(--color-primary) 18%, transparent);
	color: inherit;
	font-weight: inherit;
	padding: 0;
	margin: 0;
	display: inline;
	border-radius: 0;
	letter-spacing: 0;
	word-spacing: 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.gsearch-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	color: var(--text-muted);
}

.gsearch-loading .throbber {
	--throbber-size: 14px;
}

.gsearch-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 24px 16px;
	color: var(--text-muted);
	text-align: center;
}

.gsearch-empty i {
	font-size: 24px;
	opacity: 0.5;
}

.gsearch-harlem-prompt kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 24px;
	border: 1px solid var(--border-primary);
	border-bottom-width: 3px;
	background: var(--bg-message);
	color: var(--text-secondary);
	font: bold 18px/1 monospace;
	user-select: none;
}

body.harlem-shake-active .app-wrapper,
body.harlem-shake-active .site-announcement,
body.harlem-shake-active .header,
body.harlem-shake-active .chat-main,
body.harlem-shake-active .user-sidebar,
body.harlem-shake-active .online-sidebar,
body.harlem-shake-active .highlights-right-sidebar,
body.harlem-shake-active #user-profile-view,
body.harlem-shake-active .profile-card,
body.harlem-shake-active .profile-left-column,
body.harlem-shake-active .profile-right-column,
body.harlem-shake-active .game-card,
body.harlem-shake-active .ad-item,
body.harlem-shake-active .user-profile-popover,
body.harlem-shake-active #user-hover-preview-card,
body.harlem-shake-active .emoji-picker-popup,
body.harlem-shake-active .sticker-picker-popup,
body.harlem-shake-active .sticker-info-card {
	transform-origin: center;
	will-change: transform;
	backface-visibility: hidden;
}

body.harlem-shake-active .online-user-item,
body.harlem-shake-active .wall-post-item,
body.harlem-shake-active .status-update-item,
body.harlem-shake-dance .online-user-item,
body.harlem-shake-dance .wall-post-item,
body.harlem-shake-dance .status-update-item {
	opacity: 1 !important;
}

body.harlem-shake-active .online-user-item.offline,
body.harlem-shake-dance .online-user-item.offline {
	opacity: 0.5 !important;
}

body.harlem-shake-onset #typing-text {
	animation: harlemLogoOnset 0.43s ease-in-out 1.5s infinite;
	will-change: transform;
}

body.harlem-shake-onset #header-search-container {
	animation: harlemSearchOnset 0.43s ease-in-out 1.5s infinite;
	will-change: margin-left;
}

body.harlem-shake-dance .header,
body.harlem-shake-dance .chat-main,
body.harlem-shake-dance .page-main,
body.harlem-shake-dance .profile-edit-main,
body.harlem-shake-dance .games-main,
body.harlem-shake-dance #user-profile-view,
body.harlem-shake-dance .profile-card,
body.harlem-shake-dance .profile-right-column,
body.harlem-shake-dance .global-wall-content,
body.harlem-shake-dance .games-hero-spotlight {
	animation: harlemDanceA 0.24s linear infinite;
}

body.harlem-shake-dance .user-sidebar,
body.harlem-shake-dance .online-sidebar,
body.harlem-shake-dance .highlights-right-sidebar,
body.harlem-shake-dance .page-sidebar,
body.harlem-shake-dance .sponsored-sidebar,
body.harlem-shake-dance .profile-left-column,
body.harlem-shake-dance .profile-header-bg,
body.harlem-shake-dance .ads-sidebar,
body.harlem-shake-dance #user-hover-preview-card,
body.harlem-shake-dance .user-profile-popover,
body.harlem-shake-dance .emoji-picker-popup,
body.harlem-shake-dance .sticker-picker-popup,
body.harlem-shake-dance #emoji-picker:not(.hidden),
body.harlem-shake-dance #wall-emoji-picker:not(.hidden),
body.harlem-shake-dance .comment-emoji-picker:not(.hidden),
body.harlem-shake-dance .sticker-info-card {
	animation: harlemDanceB 0.31s ease-in-out infinite;
}

body.harlem-shake-dance #typing-text,
body.harlem-shake-dance .message:nth-child(odd),
body.harlem-shake-dance .online-user-item:nth-child(odd),
body.harlem-shake-dance .scrobble-item:nth-child(odd),
body.harlem-shake-dance .mini-post-container:nth-child(odd),
body.harlem-shake-dance .wall-post-item:nth-child(odd),
body.harlem-shake-dance .status-update-item:nth-child(odd),
body.harlem-shake-dance .game-card:nth-child(odd),
body.harlem-shake-dance .ad-item:nth-child(odd),
body.harlem-shake-dance .profile-info-item:nth-child(odd),
body.harlem-shake-dance .profile-details-column,
body.harlem-shake-dance .user-profile-popover-section:nth-child(odd),
body.harlem-shake-dance .user-profile-popover-detail:nth-child(odd),
body.harlem-shake-dance .sticker-button:nth-child(odd),
body.harlem-shake-dance #emoji-picker button:nth-child(odd) {
	animation: harlemDanceC 0.19s ease-in-out infinite alternate;
	will-change: transform;
}

body.harlem-shake-dance .message:nth-child(even),
body.harlem-shake-dance .online-user-item:nth-child(even),
body.harlem-shake-dance .scrobble-item:nth-child(even),
body.harlem-shake-dance .mini-post-container:nth-child(even),
body.harlem-shake-dance .wall-post-item:nth-child(even),
body.harlem-shake-dance .status-update-item:nth-child(even),
body.harlem-shake-dance .game-card:nth-child(even),
body.harlem-shake-dance .ad-item:nth-child(even),
body.harlem-shake-dance .profile-info-item:nth-child(even),
body.harlem-shake-dance .profile-pic-container,
body.harlem-shake-dance .user-profile-popover-section:nth-child(even),
body.harlem-shake-dance .user-profile-popover-detail:nth-child(even),
body.harlem-shake-dance .sticker-button:nth-child(even),
body.harlem-shake-dance #emoji-picker button:nth-child(even) {
	animation: harlemDanceD 0.27s ease-in-out infinite alternate-reverse;
	will-change: transform;
}

@keyframes harlemLogoOnset {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(16px);
	}
}

@keyframes harlemSearchOnset {
	0%, 100% {
		margin-left: 0;
	}
	50% {
		margin-left: 16px;
	}
}

@keyframes harlemDanceA {
	0% { transform: translate(-3px, 0) rotate(-0.8deg); }
	25% { transform: translate(2px, -3px) rotate(1.2deg); }
	50% { transform: translate(4px, 2px) rotate(-1.4deg); }
	75% { transform: translate(-2px, 3px) rotate(1deg); }
	100% { transform: translate(-3px, 0) rotate(-0.8deg); }
}

@keyframes harlemDanceB {
	0%, 100% { transform: translate(0, -3px) rotate(1.6deg); }
	35% { transform: translate(4px, 2px) rotate(-2deg); }
	70% { transform: translate(-4px, 1px) rotate(1.2deg); }
}

@keyframes harlemDanceC {
	from { transform: translate(-3px, -2px) rotate(-2deg) scale(0.99); }
	to { transform: translate(4px, 3px) rotate(2.4deg) scale(1.01); }
}

@keyframes harlemDanceD {
	from { transform: translate(3px, -3px) rotate(2deg); }
	to { transform: translate(-4px, 2px) rotate(-2.5deg); }
}

@keyframes searchHighlightPulse {

	0%,
	100% {
		background: transparent;
	}

	30% {
		background: rgba(59, 89, 152, 0.15);
	}
}

.search-highlight-pulse {
	animation: searchHighlightPulse 2s ease;
}

#header-links,
#header-start-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

#header-start-links:empty {
	display: none;
}

/* The header's buttons are .btn-nav (global/buttons.css). */
#header-links > .btn-nav {
	margin-right: 4px;
}

#back-to-chat-link,
#settings-nav-link,
#legal-header-back-link {
	margin-right: 0 !important;
}

/* The header's profile link is the member's picture and name on the bar
   itself, without a button's box (App.syncProfileNavLink); the phone's
   bottom bar keeps its glyph and label. */
#header-links > #profile-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 180px;
	min-height: 28px;
	margin: 0 6px 0 2px;
	color: var(--text-header, #fff);
	font-size: 11px;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

#header-links > #profile-nav-link,
#header-links > #profile-nav-link:hover {
	text-decoration: none;
}

#header-links > #profile-nav-link.header-link-active .nav-profile-avatar {
	border-color: #fff;
}

#header-links > #profile-nav-link > i,
#profile-nav-link:not(#header-links > *) :is(.nav-profile-avatar, .nav-profile-name) {
	display: none;
}

#profile-nav-link .nav-profile-avatar {
	display: block;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-sizing: border-box;
}

#profile-nav-link .nav-profile-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.nav-text {
		display: none;
	}
}

#header-links .nav-separator {
	width: 1px;
	height: 20px;
	background-color: rgba(255, 255, 255, 0.3);
	margin: 0 4px;
	display: inline-block;
}

.nav-notification-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background-color: #e41e3f;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	z-index: 10;
	pointer-events: none;
	animation: badgePop 0.3s ease-out;
	box-sizing: border-box;
}

@keyframes badgePop {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.chat-layout {
	display: flex;
	flex: 1;
	height: 100%;
	overflow: hidden;
}

.chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
}

.online-sidebar {
	width: 240px;
	background: var(--bg-sidebar);
	border-left: 1px solid var(--border-sidebar);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.user-sidebar {
	width: 200px;
	background: var(--bg-sidebar);
	border-right: 1px solid var(--border-sidebar);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.user-sidebar-banner {
	height: 80px;
	background-size: cover;
	background-position: center;
	background-color: var(--line-strong);
}

.user-sidebar-profile {
	text-align: center;
	position: relative;
}

.user-sidebar-avatar-wrapper {
	width: 70px;
	height: 70px;
	border: 4px solid var(--bg-sidebar);
	overflow: hidden;
	margin: -35px auto 8px;
	background: var(--bg-container);
	position: relative;
	z-index: 1;
}

#sidebar-user-avatar {
	width: 100%;
	height: 100%;
	user-select: none;
	object-fit: cover;
	-webkit-user-drag: none;
}

#sidebar-user-name {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: bold;
	color: var(--text-primary);
}

#sidebar-user-username {
	font-size: 11px;
	color: var(--text-secondary);
	display: block;
	margin-bottom: 5px;
}

.user-sidebar-roles {
	display: flex;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
	padding-bottom: 10px;
}

.user-sidebar-role-badge {
	font-size: 10px;
	padding: 2px 6px;
	color: white;
	font-weight: bold;
	text-transform: lowercase;
}

.role-admin {
	background-color: #d9534f;
}

.role-dev {
	background-color: #f0ad4e;
}

.role-og {
	background-color: #5bc0de;
}

.role-vip {
	background-color: #5cb85c;
}

.role-tester {
	background-color: #10b981;
}

.role-bot {
	background-color: #06b6d4;
}

.role-mod,
.role-moderator {
	background-color: #8b5cf6;
}

.role-helper {
	background-color: #f97316;
}

.role-support {
	background-color: #ec4899;
}

.role-founder {
	background-color: #eab308;
}

.role-supporter {
	background-color: #db2777;
}

.user-sidebar-role-badge.role-generic {
	background: linear-gradient(135deg, #94a3b8, #475569);
}

/* Chat Badge Selector (Settings) */
.chat-badges-selector {
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Personal Info: selector is last in section – no bottom margin */
#profile-badges-selector.chat-badges-selector {
	margin-bottom: 0;
}

.chat-badges-selector-inner {
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.08);
	padding: 10px 12px;
}

.chat-badges-hint {
	font-size: 11px;
	color: var(--text-muted);
	margin: 0 0 8px 0;
}

.chat-badges-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chat-badge-option {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 11px;
	font-weight: bold;
	color: white;
	opacity: 0.45;
	transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
	user-select: none;
}

.chat-badge-option:hover {
	opacity: 0.7;
}

.chat-badge-option.selected {
	opacity: 1;
	box-shadow: 0 0 0 2px rgba(155, 155, 155, 0.4);
}

.chat-badge-option.disabled {
	cursor: not-allowed;
	opacity: 0.25;
}

/* Message Badges (in message-info) */
.message-badges {
	display: inline-flex;
	gap: 3px;
	margin-left: 4px;
	vertical-align: middle;
}

.member-name .message-badges {
	flex-wrap: wrap;
}

.message-badge {
	font-size: 9px;
	padding: 1px 5px;
	color: white;
	font-weight: bold;
	text-transform: lowercase;
	line-height: 1.3;
	vertical-align: middle;
}

.user-sidebar-content {
	flex: 1;
	padding: 10px 0px;
	overflow-y: auto;
}

.message-text {
	white-space: pre-wrap;
}

#sidebar-user-bio {
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	font-size: 12px;
	color: var(--text-primary);
	font-style: italic;
	text-align: center;
	margin: 0 0 15px;
	word-wrap: break-word;
	padding: 0px 10px 10px;
	border-bottom: 1px solid var(--border-sidebar);
}

.user-sidebar-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0px 15px;
}

.sidebar-detail-item {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding-bottom: 2px;
}

.sidebar-detail-item .label {
	color: var(--text-secondary);
	font-weight: bold;
}

.sidebar-detail-item .value {
	color: var(--text-primary);
	text-align: right;
	max-width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.online-sidebar.visible {
	display: flex;
}

.online-users-section {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

.online-sidebar-header,
/* ── sidebar header distribution ──
   Every sidebar header on the site, and every sub-header inside one, lays out
   the same way: the glyph pinned to the left edge, the label centred in the
   bar, and any action pinned to the right. Add new headers to these lists
   rather than laying one out by hand. See README, "page sidebars". */
.mini-post-header,
.scrobble-sidebar-header,
.pokes-history-header,
.page-sidebar-header {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	position: relative !important;
}

.online-sidebar-header i:first-child,
.online-sidebar-header .online-dot,
.mini-post-header i:nth-child(-n+2):not(.collapse-icon),
.scrobble-sidebar-header .scrobble-header-icon,
.pokes-history-header i:first-child,
.page-sidebar-header i:first-child {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.mini-post-header .collapse-icon,
.mini-post-header .mini-post-header-link,
.scrobble-sidebar-header .scrobble-refresh-btn,
.pokes-history-header .pokes-history-link {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.online-sidebar-header {
	flex-shrink: 0;
	background: var(--bg-sidebar-header);
	color: var(--text-sidebar-header);
	padding: 8px 12px;
	font-weight: bold;
	border-bottom: 1px solid var(--border-sidebar-header);
	user-select: none;
	gap: 6px;
}

.online-count {
	font-weight: bold;
}

/* The members list, and the scrobbles list drawn the same way. */
.online-users-list,
.scrobble-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	user-select: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sidebar-category-separator {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 5px 10px 3px;
	color: var(--text-muted, #777);
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 0.35px;
	line-height: 1.2;
	text-transform: lowercase;
	user-select: none;
}

.sidebar-category-separator::after {
	content: '';
	height: 1px;
	flex: 1;
	background: var(--border-sidebar);
}

/* A member row; a scrobble row is the same row with its album art for a
   picture, and a recent scrobble fades like an offline member. */
.online-user-item,
.scrobble-item {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	transition: background 0.2s ease;
	gap: 8px;
	animation: none;
	opacity: 1;
}

.online-user-item {
	cursor: pointer;
}

.online-user-item.offline,
.scrobble-item-recent {
	opacity: 0.5 !important;
}

@keyframes userItemSlideIn {
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Skeleton Loading */
.online-user-item-skeleton {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	gap: 8px;
	pointer-events: none;
	user-select: none;
}

/* Highlights (Global Wall) Skeleton */
.wall-post-item-skeleton {
	pointer-events: none;
	user-select: none;
}

.skeleton-pfp {
	width: 32px;
	height: 32px;
	background: var(--bg-message);
	flex-shrink: 0;
	border: 1px solid var(--border-sidebar-pfp, transparent);
}

.skeleton-info {
	flex: 1;
	height: 12px;
	background: var(--bg-message);
}

.skeleton-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bg-message);
	margin-left: auto;
}

.skeleton-shimmer {
	overflow: hidden;
	position: relative;
}

.skeleton-shimmer::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0,
			rgba(255, 255, 255, 0.4) 50%,
			rgba(255, 255, 255, 0) 100%);
	animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* Generic Skeletons */
.skeleton-text {
	height: 12px;
	background: var(--bg-message);
	margin-bottom: 8px;
	position: relative;
	overflow: hidden;
}

.skeleton-text.short {
	width: 40%;
}

.skeleton-text.medium {
	width: 60%;
}

.skeleton-text.long {
	width: 80%;
}

.user-sidebar-banner.skeleton-shimmer {
	background: var(--bg-message);
	border-bottom: 1px solid var(--border-sidebar, transparent);
}

.user-sidebar-avatar-wrapper.skeleton-shimmer {
	background: var(--bg-message);
}

.chat-message-skeleton {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
	align-items: flex-start;
}

.chat-message-skeleton.own {
	flex-direction: row-reverse;
}

.chat-message-skeleton .skeleton-pfp {
	width: 32px;
	height: 32px;
	border-radius: 0;
}

.chat-message-skeleton .skeleton-bubble {
	padding: 10px;
	background: var(--bg-message);
	border: 1px solid var(--border-primary);
	min-width: 120px;
	max-width: 70%;
	position: relative;
}

.chat-message-skeleton.own .skeleton-bubble {
	background: var(--bg-message-own, #dfe3ee);
	border-color: var(--border-message-own);
}

.chat-message-skeleton .skeleton-bubble::before {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	top: 12px;
	left: -5px;
	background: inherit;
	border-left: 1px solid var(--border-primary);
	border-bottom: 1px solid var(--border-primary);
	transform: rotate(45deg);
}

.chat-message-skeleton.own .skeleton-bubble::before {
	left: auto;
	right: -5px;
	border-left: none;
	border-bottom: none;
	border-top: 1px solid var(--border-message-own);
	border-right: 1px solid var(--border-message-own);
}

/* Scrobble & Mini-Post Skeletons */
.scrobble-item-skeleton {
	border: none;
	background: transparent;
	user-select: none;
	padding: 8px 12px;
	pointer-events: none;
}

.mini-post-item-skeleton {
	border: 1px solid var(--border-sidebar);
	background: transparent;
	user-select: none;
}

.scrobble-item-skeleton:last-child,
.mini-post-item-skeleton:last-child {
	margin-bottom: 0;
}

.scrobble-skeleton-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2px;
}

.scrobble-skeleton-track {
	display: flex;
	gap: 8px;
	align-items: center;
}

.scrobble-skeleton-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.scrobble-item-skeleton .skeleton-pfp,
.mini-post-item-skeleton .skeleton-pfp {
	border-radius: 0;
}

.sidebar-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	user-select: none;
	justify-content: center;
	padding: 20px 10px;
	text-align: center;
	color: var(--text-muted, #888);
}

.sidebar-empty-state i {
	font-size: 28px;
	margin-bottom: 8px;
	opacity: 0.6;
}

.sidebar-empty-state p {
	margin: 0 0 4px 0;
	font-size: 11px;
	font-style: italic;
}

.sidebar-empty-state small {
	font-size: 10px;
	display: block;
	margin-top: 4px;
}

.sidebar-edit-link {
	color: var(--text-link, #3b5998);
	text-decoration: none;
	font-weight: bold;
}

.sidebar-edit-link:hover {
	text-decoration: underline;
}

.online-user-item:hover,
.scrobble-item:hover {
	background: var(--bg-sidebar-item-hover);
}

.online-user-pfp,
.scrobble-album-art {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border: 1px solid var(--border-sidebar-pfp);
	flex-shrink: 0;
	-webkit-user-drag: none;
}

.online-user-item.offline .online-user-pfp,
.scrobble-item-recent .scrobble-album-art {
	filter: grayscale(60%);
}

.online-user-info,
.scrobble-track-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.online-user-listening,
.scrobble-track-name,
.scrobble-artist {
	font-size: 10px;
	line-height: 1.3;
	color: var(--text-muted, #888);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.online-user-listening-emoji {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	vertical-align: -1px;
}

.online-user-listening-emoji img,
.online-user-listening-emoji .emoji-wrapper {
	width: 12px !important;
	height: 12px !important;
	max-width: 12px;
	max-height: 12px;
}

.online-user-name,
.scrobble-user-link {
	font-size: 12px;
	font-weight: bold;
	color: var(--text-sidebar-username);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.online-user-item.offline .online-user-name {
	color: var(--text-muted);
}

.online-user-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-online);
	flex-shrink: 0;
	margin-left: auto;
}

/* ── sidebar search ──
   The search box. One of them, for every sidebar on the site: settings,
   games, discovery, pokes, birthdays, and the pokes and birthdays panels in
   the highlights rail. No variants — a sidebar that needs a search box uses
   this and gets the same box as everywhere else. See README, "page sidebars".

   The measurements are the settings sidebar's, unchanged, because that box
   was the one that looked right. Note that it has to out-rank the site-wide
   `input[type="text"]` rule further down this file, which is why that rule
   excludes anything inside here — matching specificity plus source order is
   what quietly broke this box the first time it stopped being an id. */
.sidebar-search {
	padding: 6px 8px;
	border-top: 1px solid var(--border-sidebar);
	background: var(--bg-message);
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.sidebar-search .search-icon {
	position: absolute;
	left: 18px;
	color: #999;
	font-size: 13px;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.sidebar-search:focus-within .search-icon {
	opacity: 0;
}

.sidebar-search input {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	padding: 6px 8px 6px 26px;
	border: 1px solid var(--border-input);
	background: var(--bg-input);
	font-size: 11px;
	color: var(--text-secondary);
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
	height: 28px;
	transition: all 0.2s ease;
}

.sidebar-search input:focus {
	border-color: var(--border-input-focus, #8b9dc3);
	padding-left: 8px;
}

.sidebar-search input::placeholder {
	color: #999;
	font-style: italic;
}

/* The bare glyph, for the search boxes that are not in a sidebar (the header
   bar sets its own offset). */
.search-icon {
	position: absolute;
	left: 14px;
	color: #999;
	font-size: 13px;
	pointer-events: none;
}

.online-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-online);
	display: inline-block;
}

.online-status-indicator,
.offline-status-indicator {
	font-size: 10px;
	vertical-align: middle;
	margin-right: 4px;
}

/* Me Container (Chat Sidebar) */
.me-container {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: var(--bg-sidebar-header);
	user-select: none;
}

.me-avatar-wrapper {
	position: relative;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
}

.me-avatar-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 2px solid var(--border-sidebar);
}

.me-status-dot {
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-online);
	border: 2px solid var(--bg-sidebar-header);
	box-sizing: content-box;
	z-index: 1;
}

.me-status-dot.offline {
	background: var(--text-muted, #90949c);
}

.me-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.me-username {
	font-size: 12px;
	font-weight: bold;
	color: var(--text-sidebar-header);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.me-status-text {
	font-size: 10px;
	color: var(--text-sidebar-header);
	opacity: 0.5;
	text-transform: lowercase;
	letter-spacing: 0.3px;
}

.me-status-text.online {
	opacity: 0.5;
}

.me-status-text.offline {
	opacity: 0.5;
}

.me-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

/* Status color classes — only apply background to dot/indicator elements */
.me-status-dropdown-dot.status-online,
.me-status-dot.status-online,
.online-user-status.status-online {
	background: var(--color-online, #42b72a) !important;
}

.me-status-dropdown-dot.status-idle,
.me-status-dot.status-idle,
.online-user-status.status-idle {
	background: #f5a623 !important;
}

.me-status-dropdown-dot.status-dnd,
.me-status-dot.status-dnd,
.online-user-status.status-dnd {
	background: #ed4245 !important;
}

/* Invisible: connected, but everyone else sees you offline. */
.me-status-dropdown-dot.status-invisible,
.me-status-dot.status-invisible,
.online-user-status.status-invisible {
	background: #90949c !important;
}

.me-avatar-wrapper {
	cursor: pointer;
}

.me-container {
	position: relative;
}

/* Status Dropdown — anchored to .me-container */
.me-status-dropdown {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background: var(--bg-sidebar-header, #1a1a2e);
	border-bottom: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	transform: translateY(4px);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

.me-status-dropdown.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.me-status-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	cursor: pointer;
	font-size: 12px;
	color: var(--text-sidebar-header, #ccc);
	transition: background 0.12s ease;
	white-space: nowrap;
}

.me-status-dropdown-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

.me-status-dropdown-item.active {
	background: rgba(255, 255, 255, 0.12);
	font-weight: 600;
}

.me-status-dropdown-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.me-dropdown-separator {
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	margin: 4px 0;
}

/* Profile page status colors */
.profile-status-container .online-dot.status-idle {
	background-color: #f5a623 !important;
}

.profile-status-container .online-dot.status-dnd {
	background-color: #ed4245 !important;
}

.profile-status-container .online-dot.status-invisible {
	background-color: #90949c !important;
}

.mini-post-container {
	background: var(--bg-container);
	overflow: hidden;
}

.mini-post-header {
	background: var(--bg-sidebar-header);
	color: var(--text-sidebar-header);
	padding: 8px 12px;
	border-bottom: 1px solid var(--border-sidebar-header);
	min-height: 31px;
}

.mini-post-title {
	font-size: 11px;
	font-weight: bold;
	text-transform: lowercase;
	margin: 0;
	letter-spacing: 0.3px;
	user-select: none;
}

.mini-post-header-link {
	font-size: 10px;
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.2s ease;
	font-weight: normal;
	margin-left: auto;
}

.birthdays-sidebar-list {
	padding: 0 !important;
	flex: 1;
	overflow-y: auto;
	gap: 0 !important;
}

.birthday-item {
	padding: 7px 10px;
	user-select: none;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, transparent, var(--border-primary), transparent) 1;
}

.birthday-item:last-child {
	border-bottom: none;
}

.pokes-sidebar {
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	padding: 0 !important;
	gap: 0 !important;
}

/* Suggestions list */
.pokes-suggestions-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pokes-scroll {
	max-height: 220px;
	overflow-y: auto;
}

.poke-suggestion-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, transparent, var(--border-primary), transparent) 1;
	cursor: default;
	transition: background 0.15s ease;
	user-select: none;
}

.poke-suggestion-item:last-child {
	border-bottom: none;
}

.poke-suggestion-item:hover {
	background: var(--bg-sidebar-item-hover);
}

.poke-suggestion-pfp {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border: 1px solid var(--border-sidebar-pfp);
	flex-shrink: 0;
	-webkit-user-drag: none;
}

.poke-suggestion-info {
	flex: 1;
	min-width: 0;
}

.poke-suggestion-name {
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: lowercase;
	color: var(--text-sidebar-username);
}

@keyframes pokeSent {
	0% {
		transform: scale(1);
	}

	30% {
		transform: scale(1.18) rotate(-4deg);
	}

	60% {
		transform: scale(0.95) rotate(2deg);
	}

	100% {
		transform: scale(1) rotate(0);
	}
}

.poke-sent-flash {
	animation: pokeSent 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.pokes-history-section {
	border-top: 1px solid var(--border-sidebar);
}

/* Distribution comes from the shared header rules above; this is only the
   sub-header's own smaller, dimmer treatment. */
.pokes-history-header {
	padding: 5px 10px;
	background: var(--bg-sidebar-header);
	color: var(--text-sidebar-header);
	font-size: 10px;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: 0.3px;
	opacity: 0.75;
	user-select: none;
}

.pokes-history-header i {
	font-size: 12px;
}

/* "see all": opens the pokes page. Pinned right by the shared header rules. */
.pokes-history-link {
	color: inherit;
	font-weight: normal;
	text-decoration: none;
}

.pokes-history-link:hover {
	text-decoration: underline;
}

.pokes-history-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-height: 200px;
	overflow-y: auto;
	user-select: none;
	-webkit-user-drag: none;
}

@keyframes poke-history-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.poke-history-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(255, 230, 100, 0.13);
	border-bottom: 1px solid rgba(255, 200, 50, 0.18);
	font-size: 10px;
	color: var(--text-primary);
	position: relative;
	animation: poke-history-in 0.3s ease forwards;
	user-select: none;
	-webkit-user-drag: none;
}

.poke-history-item:last-child {
	border-bottom: none;
}

.poke-history-pfp {
	width: 26px;
	height: 26px;
	object-fit: cover;
	border: 1px solid rgba(255, 200, 50, 0.4);
	flex-shrink: 0;
	-webkit-user-drag: none;
}

.poke-history-text {
	flex: 1;
	min-width: 0;
	line-height: 1.35;
}

.poke-history-user {
	font-weight: bold;
	text-transform: lowercase;
	cursor: pointer;
	transition: text-decoration 0.1s ease;
}

.poke-history-user:hover {
	text-decoration: underline;
}

.poke-history-time {
	font-size: 9px;
	color: var(--text-muted);
	display: block;
	margin-top: 1px;
}

/* The pokes rail's header count is the nav badge (.nav-notification-badge,
   painted by nav-badge.service.js), sitting after the title instead of on a
   corner. See docs/pokes.md. */
.mini-post-title .nav-notification-badge {
	position: static;
	display: inline-block;
	margin-left: 5px;
	vertical-align: 1px;
	text-transform: none;
}

.birthday-user-name {
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: lowercase;
	width: 100%;
}

.birthday-info-text {
	font-size: 10px;
	color: var(--text-secondary);
	line-height: 1.3;
}

.birthday-today {
	color: var(--border-sidebar-header);
	font-weight: bold;
	display: block;
}

.birthday-countdown {
	font-style: italic;
	opacity: 0.4;
}

.status-update-item {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	column-span: all;
	-webkit-column-span: all;
	padding: 10px 15px;
	user-select: none;
	font-size: 11px;
	color: var(--text-muted);
	box-sizing: border-box;
	animation: wallPostFadeIn 0.4s ease-out forwards;
	break-inside: avoid;
	gap: 8px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.status-update-item::before,
.status-update-item::after {
	content: '';
	flex: 1;
	height: 1px;
	max-width: 100px;
	margin-top: 7px;
	background: linear-gradient(to var(--line-direction, right), rgba(180, 185, 195, 0.4), transparent);
}

.status-update-item::before {
	--line-direction: left;
}

.status-update-item::after {
	--line-direction: right;
}

.status-update-icon {
	width: 14px;
	height: 14px;
	object-fit: contain;
	opacity: 0.8;
	margin-top: -1px;
	margin-right: 4px;
	vertical-align: middle;
	-webkit-user-drag: none;
	user-select: none;
}

/* The status update's × is a .btn-delete (buttons.css). */
.status-update-delete-btn {
	margin-left: 3px;
}

.status-update-text {
	font-style: italic;
	margin-right: 6px;
	vertical-align: middle;
}

.status-update-text a {
	font-style: normal;
}

.status-update-timestamp {
	color: #ccc;
	font-size: 10px;
	vertical-align: middle;
}

.status-update-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}

.status-update-header {
	display: flex;
	align-items: center;
	gap: 2px;
}

.status-update-images {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.status-thumb-wrapper {
	background: var(--bg-container);
	border: 1px solid var(--line-blue);
	padding: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: zoom-in;
}

.status-thumb-wrapper:hover {
	transform: scale(1.08);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
	border-color: #8b9dc3;
}

.status-thumb {
	width: 80px;
	height: 80px;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
}

.status-thumb.is-banner {
	width: 142px;
	height: 80px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mini-post-header-link:hover {
	opacity: 1;
	text-decoration: underline;
}

.collapsible-header {
	user-select: none;
}

.collapse-icon {
	display: inline-block;
	font-size: 14px;
	transition: transform 0.3s ease, opacity 0.2s ease;
	margin-left: 8px;
	cursor: pointer;
	opacity: 0.8;
}

.collapse-icon:hover {
	opacity: 1;
}

.collapsible-header.collapsed .collapse-icon {
	transform: translateY(-50%) rotate(180deg) !important;
}

.collapsible-content {
	max-height: 1000px;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.collapsible-content.collapsed {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.mini-post-content {
	padding: 12px;
	font-size: 12px;
	color: var(--text-primary);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#my-latest-post,
.my-latest-post-container {
	gap: 0;
}

.mini-post-empty {
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
	padding: 20px 10px;
	user-select: none;
}

.mini-post-empty p {
	margin: 0 0 12px 0;
	font-size: 11px;
}

.mini-posts-scroll {
	max-height: 300px;
	overflow-y: auto;
	padding: 8px;
}

.mini-post-item {
	background: var(--bg-message);
	border: 1px solid var(--border-primary);
	padding: 10px;
	transition: box-shadow 0.2s ease;
	cursor: pointer;
	user-select: none;
}

.mini-post-item:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mini-post-item-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.mini-post-avatar {
	width: 24px;
	height: 24px;
	object-fit: cover;
	border: 2px solid var(--border-primary);
	flex-shrink: 0;
	-webkit-user-drag: none;
}

.mini-post-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.mini-post-author {
	font-size: 11px;
	font-weight: bold;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mini-post-time {
	font-size: 10px;
	color: var(--text-muted);
}

.mini-post-text {
	font-size: 11px;
	color: var(--text-primary);
	line-height: 1.4;
	margin: 0;
	word-wrap: break-word;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

h2,
.section-header {
	font-size: 16px;
	color: var(--text-secondary);
	margin-top: 20px;
	margin-bottom: 15px;
	padding-bottom: 5px;
	font-weight: bold;
	border-bottom: 1px solid var(--bg-body);
	position: relative;
	overflow: hidden;
}

h2::before,
.section-header::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #3b5998, transparent);
}

.input-group {
	margin-bottom: 12px;
}

.input-group label {
	display: block;
	margin-bottom: 5px;
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: bold;
}

/* The default look for a form field. It is written on the element rather than
   on a class, so it reaches every input in the document — including ones that
   belong to a component with its own field styling. A component whose rule is
   also a class plus an element ties on specificity and then loses on source
   order, which is exactly how the sidebar search box lost its padding when it
   stopped being styled by id. Components that own their fields are excluded
   here rather than having to out-shout this from a distance. The exclusion is
   wrapped in `:where()` so it costs nothing: a bare `:not()` would inherit its
   argument's weight and start winning against component rules that beat this
   one today. */
input[type="text"]:not(:where(.sidebar-search *)),
input[type="password"]:not(:where(.sidebar-search *)),
input[type="date"]:not(:where(.sidebar-search *)),
select,
.file-chooser-container {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--line-blue);
	font-size: 12px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

input[type="text"]:focus:not(:where(.sidebar-search *)),
input[type="url"]:focus:not(:where(.sidebar-search *)),
input[type="password"]:focus:not(:where(.sidebar-search *)),
input[type="date"]:focus:not(:where(.sidebar-search *)),
select:focus {
	outline: none;
	border-color: var(--border-input-focus);
}

.recovery-code-info p {
	font-size: 12px;
	color: var(--text-secondary);
	margin: 10px 0;
	line-height: 1.5;
}

.recovery-code-box {
	font-family: "Courier New", monospace;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 3px;
	padding: 16px 20px;
	background: linear-gradient(to bottom, #fdfefe 0%, #eef1f4 100%);
	border: 1px dashed #cfd6e0;
	color: #2f4a7d;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
	user-select: all;
	cursor: text;
	text-align: center;
}

.recovery-warning {
	font-size: 11px;
	color: #d9534f;
	font-weight: bold;
	background: #fff3cd;
	padding: 8px;
	border: 1px solid #ffc107;
	margin-top: 10px;
	text-align: center;
}

.form-info {
	font-size: 12px;
	color: #666;
	margin-bottom: 15px;
	line-height: 1.4;
}

#forgot-recovery-code {
	font-family: 'Courier New', monospace;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.profile-header-info h2 {
	margin: 0;
	font-size: 24px;
	font-weight: bold;
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

#sidebar-user-roles {
	user-select: none;
}

#chat-page,
#profile-page,
#theme-page,
#user-profile-view {
	display: none;
}

#app-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

#chat-page {
	flex-direction: column;
	height: 100% !important;
	max-height: none !important;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Every routed view (showView in utils/dom.js marks it .app-view) fills the
   app container and scrolls inside it. Without a height the body clips it and
   the page cannot scroll at all, which is what happened to each page added by
   hand to a list of ids here. :where keeps this at zero specificity, so the
   views that lay themselves out (#chat-page, #global-wall-page) still win. */
:where(.app-view) {
	height: 100%;
	overflow-y: auto;
	flex: 1;
}

#global-wall-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.highlights-scroll-container {
	flex: 1;
	overflow-y: auto;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	height: 100%;
}

.highlights-header-container {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	user-select: none;
	-webkit-user-drag: none;
}

.highlights-header-icon {
	width: 82px;
	height: 82px;
	margin-right: 10px;
	object-fit: contain;
	pointer-events: none;
	padding: 5px;
	background: var(--bg-container);
}

.highlights-header-text {
	display: flex;
	flex-direction: column;
}

.highlights-header-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--text-secondary);
	margin: 0;
	padding: 0;
	line-height: 1.2;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.highlights-header-description {
	font-size: 15px;
	color: var(--text-muted);
	margin: 5px 0 0 0;
	padding: 0;
	font-family: 'Over the Rainbow', regular;
}

/* The header's buttons: the order (docs/highlights.md) and the rss feed. */
.highlights-header-actions {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.highlights-sort-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

@media (max-width: 480px) {
	.highlights-header-actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* The order's chip, on its own between the composer and the posts. */
.highlights-active-filters {
	margin-bottom: 15px;
	border: 1px solid var(--border-primary);
}

/* ── cards between the highlights' posts ──
   Ads, today's birthdays and new members (docs/highlights.md): framed panels
   whose rows are the birthdays sidebar's. */
.highlights-feed-card-text {
	margin: 0;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-secondary);
	user-select: none;
}

.highlights-feed-card-people {
	border-top: 1px solid var(--line-soft);
}

@media (max-width: 768px) {
	#global-wall-page .chat-layout {
		flex-direction: column;
	}

	#global-wall-page .user-sidebar,
	#global-wall-page .highlights-right-sidebar {
		display: none !important;
	}

}

.form-container h2 {
	text-align: left;
	color: var(--text-secondary);
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 18px;
	padding-bottom: 10px;
}

@keyframes formTitleSlide {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.cf-turnstile {
	margin: 15px 0;
	display: flex;
	justify-content: center;
}

.cf-turnstile iframe {
	border: 1px solid var(--line-blue) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
	background: linear-gradient(to bottom, var(--surface-subtle) 0%, var(--bg-body) 100%) !important;
}

.chat-main {
	position: relative;
}

#chat-window {
	flex-grow: 1;
	padding: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	border-bottom: 1px solid var(--border-primary);
	position: relative;
	transform: translateZ(0);
	contain: layout paint;
}

.system-message {
	text-align: center;
	font-style: italic;
	color: var(--text-muted);
	color: #a8adb5;
	font-size: 11px;
	margin-bottom: 10px;
	user-select: none;
	animation: systemMessageFade 0.6s ease-out;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 4px 0;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.system-message.loading-history-indicator {
	gap: 16px;
}

.system-message::before,
.system-message::after {
	content: '';
	flex: 1;
	height: 1px;
	max-width: 150px;
	background: linear-gradient(to var(--line-direction, right), rgba(180, 185, 195, 0.6), transparent);
}

.system-message::before {
	--line-direction: left;
}

.system-message::after {
	--line-direction: right;
}

@keyframes systemMessageFade {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.message {
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	animation: messageSlideInLeft 0.4s ease-out;
}

@keyframes messageSlideInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes messageSlideInRight {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.message.own {
	animation: messageSlideInRight 0.4s ease-out;
}

.message.ghost {
	opacity: 0.5 !important;
	filter: grayscale(0.8) !important;
	pointer-events: none;
	user-select: none;
}

.message-body {
	display: flex;
	align-items: flex-start;
}

.message-pfp {
	width: 32px;
	height: 32px;
	margin-right: 8px;
	border: 1px solid var(--line-soft);
	background-color: var(--bg-container);
	flex-shrink: 0;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.message-pfp:hover {
	transform: scale(1.15) rotate(5deg);
	border-color: var(--color-primary);
	box-shadow: 0 2px 6px var(--shadow-hover);
}

.message-bubble {
	padding: 6px 10px;
	background-color: var(--surface-tint);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.04) 100%),
		radial-gradient(120% 60% at 50% -20%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.04);
	border: 1px solid var(--line-soft);
	word-wrap: break-word;
	min-width: 0;
	line-height: 1.3;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
	border-radius: 3px;
}

.message-bubble:hover {
	will-change: transform;
}

@keyframes rainbow-text {
	0% {
		color: #ff4d4d;
	}

	16% {
		color: #ff9a4d;
	}

	33% {
		color: #ffe24d;
	}

	50% {
		color: #4dff88;
	}

	66% {
		color: #4dd2ff;
	}

	83% {
		color: #9b4dff;
	}

	100% {
		color: #ff4d4d;
	}
}

@keyframes rainbow-border {
	0% {
		border-color: #ff4d4d;
	}

	16% {
		border-color: #ff9a4d;
	}

	33% {
		border-color: #ffe24d;
	}

	50% {
		border-color: #4dff88;
	}

	66% {
		border-color: #4dd2ff;
	}

	83% {
		border-color: #9b4dff;
	}

	100% {
		border-color: #ff4d4d;
	}
}

@keyframes rainbow-bubble {
	0% {
		background-color: color-mix(in srgb, rgb(255, 77, 77) 20%, var(--bg-chat-window));
		border-color: rgba(255, 77, 77, 0.35);
	}

	16% {
		background-color: color-mix(in srgb, rgb(255, 154, 77) 20%, var(--bg-chat-window));
		border-color: rgba(255, 154, 77, 0.35);
	}

	33% {
		background-color: color-mix(in srgb, rgb(255, 226, 77) 20%, var(--bg-chat-window));
		border-color: rgba(255, 226, 77, 0.35);
	}

	50% {
		background-color: color-mix(in srgb, rgb(77, 255, 136) 20%, var(--bg-chat-window));
		border-color: rgba(77, 255, 136, 0.35);
	}

	66% {
		background-color: color-mix(in srgb, rgb(77, 210, 255) 20%, var(--bg-chat-window));
		border-color: rgba(77, 210, 255, 0.35);
	}

	83% {
		background-color: color-mix(in srgb, rgb(155, 77, 255) 20%, var(--bg-chat-window));
		border-color: rgba(155, 77, 255, 0.35);
	}

	100% {
		background-color: color-mix(in srgb, rgb(255, 77, 77) 20%, var(--bg-chat-window));
		border-color: rgba(255, 77, 77, 0.35);
	}
}

@keyframes rainbow-bubble-own {
	0% {
		background-color: color-mix(in srgb, rgb(255, 77, 77) 28%, var(--bg-chat-window));
		border-color: rgba(255, 77, 77, 0.45);
	}

	16% {
		background-color: color-mix(in srgb, rgb(255, 154, 77) 28%, var(--bg-chat-window));
		border-color: rgba(255, 154, 77, 0.45);
	}

	33% {
		background-color: color-mix(in srgb, rgb(255, 226, 77) 28%, var(--bg-chat-window));
		border-color: rgba(255, 226, 77, 0.45);
	}

	50% {
		background-color: color-mix(in srgb, rgb(77, 255, 136) 28%, var(--bg-chat-window));
		border-color: rgba(77, 255, 136, 0.45);
	}

	66% {
		background-color: color-mix(in srgb, rgb(77, 210, 255) 28%, var(--bg-chat-window));
		border-color: rgba(77, 210, 255, 0.45);
	}

	83% {
		background-color: color-mix(in srgb, rgb(155, 77, 255) 28%, var(--bg-chat-window));
		border-color: rgba(155, 77, 255, 0.45);
	}

	100% {
		background-color: color-mix(in srgb, rgb(255, 77, 77) 28%, var(--bg-chat-window));
		border-color: rgba(255, 77, 77, 0.45);
	}
}

.rainbow-text {
	animation: rainbow-text 6s linear infinite;
}

.rainbow-border {
	animation: rainbow-border 6s linear infinite;
}

.rainbow-bubble {
	animation: rainbow-bubble 6s linear infinite;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.45) 35%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.04) 100%),
		radial-gradient(120% 60% at 50% -20%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%);
}

.message.own .rainbow-bubble,
.rainbow-bubble.rainbow-bubble-own {
	animation: rainbow-bubble-own 6s linear infinite;
}

.message-bubble.rainbow-bubble::before {
	background-color: inherit;
	border-color: inherit;
}

.message-bubble::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	top: 11px;
	left: -6px;
	background-color: var(--bubble-bg, var(--surface-tint));
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
	transform: rotate(45deg);
	border-left: 1px solid;
	border-bottom: 1px solid;
	border-color: inherit;
	z-index: 1;
}

.message-bubble::after {
	display: none;
}

.message-bubble:hover {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05),
		0 2px 6px rgba(0, 0, 0, 0.12);
	border-color: var(--line-strong);
}

.message-info {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 3px;
	user-select: none;
}

.message-info .username {
	font-weight: bold;
	color: #3b5998;
	cursor: pointer;
}

.message-info .username:hover {
	text-decoration: underline;
}

.message.own .message-body {
	flex-direction: row-reverse;
}

.message.own .message-pfp {
	margin-right: 0;
	margin-left: 8px;
}

.message.own .message-content {
	align-items: flex-end;
}

.message.own .message-bubble {
	background-color: #dfe3ee;
	border-color: var(--line-blue-medium);
}

.message.own .message-bubble::before {
	left: auto;
	right: -6px;
	border-left: none;
	border-bottom: none;
	border-top: 1px solid;
	border-right: 1px solid;
	border-color: inherit;
	/*background-image: linear-gradient(315deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);*/
}

.message.own .message-bubble::after {
	display: none;
}

.message.own .message-info {
	text-align: right;
}

.message-bubble.deleted {
	border: 1px dashed var(--line-strong) !important;
	background-color: transparent !important;
	color: var(--text-muted);
	user-select: none;
}

.message-bubble.deleted::before {
	display: none !important;
}

.message-bubble.deleted i {
	font-style: italic;
}

.message-bubble.editing {
	background-color: transparent !important;
	border-style: dashed;
	border-color: var(--line-blue-medium);
}

.edited-indicator {
	font-size: 10px;
	color: var(--text-muted);
	margin-left: 4px;
	font-style: italic;
}

.custom-emoji {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
}

.emoticon-img {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	display: inline-block;
}

.emoji-category {
	margin-bottom: 15px;
}

.emoji-category-header {
	text-align: left;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--text-sidebar-username);
	margin: 8px 0 6px 0;
	padding: 4px 6px;
	background: var(--bg-message);
	border-left: 2px solid var(--text-sidebar-username);
	grid-column: 1 / -1;
}

.emoji-category-grid {
	display: contents;
}

.emoji-button img {
	width: 20px;
	height: 20px;
}

.message-link {
	word-break: break-all;
}

#message-form {
	display: flex;
	padding: 8px;
	background-color: var(--bg-message);
	gap: 8px;
	position: relative;
}

#message-form .input-wrapper {
	flex-grow: 1;
	position: relative;
	background: var(--bg-input);
	border: 1px solid var(--line-medium);
	display: flex;
	align-items: center;
	min-height: 34px;
}

#message-form .input-wrapper:focus-within {
	outline: none;
	border-color: var(--border-input-focus);
}

.message-input-icons {
	position: absolute;
	right: 5px;
	top: 0;
	height: 34px;
	display: flex;
	gap: 2px;
	z-index: 2;
	align-items: center;
}

#submit-edit-btn,
#message-action-btn {
	--btn-h: 36px;
	--btn-glyph: 18px;
	height: 36px;
}

#message-input {
	flex-grow: 1;
	width: 100%;
	border: none;
	background: transparent;
	padding: 7px 90px 7px 10px;
	font-size: 12px;
	transition: all 0.3s ease;
	font-family: inherit;
	resize: none;
	overflow-y: auto;
	min-height: 34px;
	max-height: 150px;
	line-height: 1.4;
	outline: none;
}

#message-input:disabled {
	background-color: #f8f8f8;
	color: #999;
	cursor: not-allowed;
}

#user-profile-view {
	display: flex;
	justify-content: center;
	align-items: stretch;
	background: var(--bg-body);
}

/* A profile fills the page. Only the full layout, whose page spans the
   whole window, makes it a column like an old timeline, with blank room at
   its sides. */
.profile-card {
	width: 100%;
	min-height: 100%;
	background: var(--bg-body);
	text-align: center;
}

body.full-layout .profile-card {
	max-width: 1160px;
	/* The blank room on the left is half the room on the right. */
	margin-left: max(0px, calc((100% - 1160px) / 3));
	margin-right: auto;
}


.profile-overview-band {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 460px minmax(0, 1fr);
	align-items: start;
	gap: 28px;
	box-sizing: border-box;
	padding: 15px;
	background: var(--bg-container);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14);
}

.profile-visitor-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	width: 100%;
	margin: 8px 0 0;
	user-select: none;
}

.profile-visitor-actions[hidden],
.profile-overview-action-btn[hidden] {
	display: none !important;
}

/* The banner's "more" and the scroll summary's button share one menu
   (.profile-actions-trigger). .profile-edit-btn sets display: flex, which
   would beat the hidden attribute. */
.profile-actions-trigger[hidden] {
	display: none !important;
}

/* Logged-out visitors get the pair as "log in" and "sign up"
   (data-guest-href), both in the poke button's live style. */

.profile-scroll-summary-shell {
	position: sticky;
	top: 0;
	z-index: 30;
	height: 0;
	pointer-events: none;
}

/* Light toolbar: matted picture, then one framed group holding the name and
   the section dropdown, and full-height divided actions on the right. */
.profile-scroll-summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 12px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--border-primary);
	background: var(--bg-container);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition: opacity 150ms ease, transform 180ms ease, visibility 0s linear 180ms;
	user-select: none;
}
.profile-scroll-summary-shell.is-visible { pointer-events: auto; }
.profile-scroll-summary-shell.is-visible .profile-scroll-summary { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }

.profile-scroll-summary-avatar {
	display: block;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	box-sizing: content-box;
	padding: 2px;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
	object-fit: cover;
}

/* One continuous frame, split by hairlines, the way the reference groups the
   name and its dropdowns. */
.profile-scroll-summary-identity {
	display: flex;
	align-items: stretch;
	flex: 0 1 auto;
	min-width: 0;
	min-height: 28px;
	margin-left: 10px;
	border: 1px solid var(--border-primary);
	background: linear-gradient(to bottom, var(--bg-container), var(--bg-message));
}
.profile-scroll-summary-username {
	display: flex;
	align-items: center;
	min-width: 0;
	max-width: 240px;
	padding: 0 12px;
	border-right: 1px solid var(--border-primary);
	color: var(--text-primary);
	font: bold 13px/1.2 Arial, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-scroll-summary-nav { position: relative; display: flex; align-items: stretch; min-width: 0; }
.profile-scroll-summary-tools { display: flex; flex: 0 0 auto; align-items: center; min-width: 0; margin-left: auto; padding-left: 10px; }
.profile-scroll-summary [hidden] { display: none !important; }
@media (max-width: 480px) {
	.profile-scroll-summary-nav-btn { gap: 5px; padding: 0 7px; font-size: 11px; }
}

@media (max-width: 900px) {
	.profile-scroll-summary { padding: 0 10px; }
	.profile-scroll-summary-identity { margin-left: 9px; }
	.profile-scroll-summary-username { max-width: 140px; padding: 0 10px; }
}

@media (max-width: 480px) {
	.profile-scroll-summary { padding: 0 8px; }
	.profile-scroll-summary-avatar { width: 26px; height: 26px; }
	.profile-scroll-summary-identity { margin-left: 8px; }
	.profile-scroll-summary-username { max-width: 96px; padding: 0 8px; font-size: 12px; }
}

/* The profile nav (docs/profile-nav.md). Four cards fill the row; a fifth (the
   map) scrolls sideways in the same room, with the scrollbar hidden and a
   fade on whichever side has more (initHorizontalShelf). */
.profile-view-nav {
 align-self: end;
 min-width: 0;
 width: 100%;
 user-select: none;
 overflow-x: auto;
 overflow-y: hidden;
 overscroll-behavior-x: contain;
 scrollbar-width: none;
 /* Room for the cards' focus outline, which the scrolling would clip. */
 padding: 4px;
 margin: -4px;
}
.profile-view-nav::-webkit-scrollbar { display: none; }
/* Rows that scroll sideways through initHorizontalShelf (utils/scroll.util.js)
   fade the edge that has more: the profile nav and the video zone's tabs. */
.profile-view-nav.has-more-end, .yt-tabs.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
.profile-view-nav.has-more-start, .yt-tabs.has-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 26px); mask-image: linear-gradient(to right, transparent, #000 26px); }
.profile-view-nav.has-more-start.has-more-end, .yt-tabs.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
.profile-view-nav-track { width: 100%; }
.profile-view-nav-set { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; }
/* The full layout's narrower profile column fits three. */
body.full-layout .profile-view-nav-set { grid-auto-columns: calc((100% - 24px) / 3); }
.profile-view-nav-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--text-link); font: 13px/1.25 Arial, sans-serif; text-align: left; }
.profile-view-nav-item[hidden] { display: none; }
.profile-view-nav-item[role="button"] { cursor: pointer; }
.profile-view-nav-item:focus-visible { outline: 1px dotted var(--text-link); outline-offset: 3px; }
.profile-view-nav-label { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; opacity: .72; }
.profile-view-nav-label > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-view-nav-item.is-active .profile-view-nav-label { opacity: 1; }
.profile-view-nav-item[role="button"]:is(:hover, :focus-visible) .profile-view-nav-label { opacity: 1; text-decoration: underline; }
.profile-view-nav-count, .profile-view-nav-count-value { color: var(--border-primary); font-weight: 400; }
/* The wall and about cards' "edit": the owner's way to their cover. */
.profile-view-nav-edit { margin-left: auto; }
.profile-view-nav-thumb { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; box-sizing: border-box; overflow: hidden; border: 1px solid var(--border-primary); background: var(--bg-message-own); }
/* Each card's own face: its icon, with the count beside it on wall and blog. */
.profile-view-nav-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-link); pointer-events: none; }
.profile-view-nav-face i { font-size: 34px; line-height: 1; }
.profile-view-nav-face.is-about i { font-size: 52px; color: #fff; }
.profile-view-nav-face-count { font: bold 28px/1 Arial, sans-serif; color: var(--text-primary); }
.profile-view-nav-face-count:empty { display: none; }
.profile-view-nav-face-count .profile-view-nav-count-value { color: inherit; font-weight: inherit; }
.profile-view-nav-cover { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.profile-view-nav-thumb.has-cover .profile-view-nav-cover { display: block; }
/* The photo mosaic: up to six pictures on six columns and two rows, so every
   count fills the box: one covers it, two split it, three are one big and two
   stacked, four a 2×2, five two over three, six a 3×2. `data-count` says how
   many show. The profile nav's thumbnails (utils/nav-thumb-grid.js) and the
   pictures under posts, comments and messages (embeddedImagesHTML in
   utils/helpers.js) both use it. */
.photo-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.photo-mosaic > * { min-width: 0; min-height: 0; grid-column: span 2; }
.photo-mosaic[data-count="1"] > * { grid-column: 1 / -1; grid-row: 1 / -1; }
.photo-mosaic[data-count="2"] > * { grid-column: span 3; grid-row: 1 / -1; }
.photo-mosaic:is([data-count="3"], [data-count="4"]) > *,
.photo-mosaic[data-count="5"] > :nth-child(-n+2) { grid-column: span 3; }
.photo-mosaic[data-count="3"] > :first-child { grid-row: 1 / -1; }
/* The newest pictures of a nav tab, over the card's face. */
.profile-view-nav-grid { position: absolute; inset: 0; display: none; background: var(--bg-body); pointer-events: none; }
.profile-view-nav-photo-thumb.has-photo .profile-view-nav-grid { display: grid; }
.profile-view-nav-grid-cell { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The map card: the world map's tiles around the member's country
   (stillWorldMap in utils/world-map.js, .world-map-still-tile), and its
   pushpin. */
.profile-view-nav-map { position: absolute; inset: 0; overflow: hidden; background: #b1bdd6; pointer-events: none; }
.profile-view-nav-map-pin { position: absolute; width: 20px; height: 29px; transform: translate(-50%, -100%); background: url('/assets/img/discovery/maps_pin.png') center bottom / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); pointer-events: none; }
/* The country names around it (.map-place-label, global/world-map.css). */
.profile-view-nav-map-labels { position: absolute; inset: 0; pointer-events: none; }

/* A card's tag (.nav-tag): a short line in the site blue on a thumbnail's
   left edge, halfway down, standing a little out past the edge so it reads
   as laid on top, like "3 entries" on the profile nav's blog card. Any nav
   card can carry one; empty, it does not show. */
.nav-tag { position: absolute; top: 50%; left: -5px; z-index: 1; max-width: calc(100% - 4px); padding: 4px 9px 4px 8px; transform: translateY(-50%); box-sizing: border-box; overflow: hidden; background: var(--color-primary, #3b5998); border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; font: bold 12px/1.25 Arial, sans-serif; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); pointer-events: none; }
.nav-tag:empty { display: none; }
.profile-view-nav-thumb:has(> .nav-tag:not(:empty)) { overflow: visible; }

/* ── the nav cover editor (components/nav-cover-editor.component.js) ──
   The picture on the left, and the card now and with it on the right, split
   by a handle you drag across. */
.nav-cover-overlay,
.nav-cover-dialog { --site-popup-width: 640px; }
.nav-cover-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.nav-cover-columns > section { min-width: 0; }
.nav-cover-columns > section + section { border-left: 1px solid var(--line-soft); }
.nav-cover-pane { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 20px 16px; }
.nav-cover-source { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; box-sizing: border-box; overflow: hidden; border: 1px dashed var(--border-primary); background: var(--bg-body); cursor: pointer; }
.nav-cover-source.is-dragging { border-style: solid; border-color: var(--text-link); }
.nav-cover-source img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nav-cover-source .global-no-results { width: auto; padding: 10px; }
.nav-cover-compare { --split: 50%; position: relative; width: 100%; aspect-ratio: 2 / 1; }
.nav-cover-compare:focus-within { outline: 1px dotted var(--text-link); outline-offset: 2px; }
.nav-cover-compare-layer { position: absolute; inset: 0; }
.nav-cover-compare-layer > .profile-view-nav-thumb { height: 100%; }
.nav-cover-compare-layer.is-after { clip-path: inset(0 0 0 var(--split)); }
.nav-cover-compare-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); pointer-events: none; }
.nav-cover-compare-tag { position: absolute; top: 6px; padding: 1px 5px; background: rgba(0, 0, 0, 0.55); color: #fff; font: bold 10px/1.4 Arial, sans-serif; text-transform: lowercase; pointer-events: none; }
.nav-cover-compare-tag.is-before { left: 6px; }
.nav-cover-compare-tag.is-after { right: 6px; }
.nav-cover-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.nav-cover-hint { margin: 0; color: var(--text-muted); font-size: 11px; }
@media (max-width: 600px) {
 .nav-cover-columns { grid-template-columns: minmax(0, 1fr); }
 .nav-cover-columns > section + section { border-left: 0; border-top: 1px solid var(--line-soft); }
}

.profile-header-bg {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent), var(--bg-message);
	height: 240px;
	border-bottom: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	overflow: visible;
}

.profile-two-column-layout {
	display: grid;
	grid-template-columns: 460px minmax(0, 1fr);
	gap: 28px;
	/* The overview band's side padding, so its columns and the band's line up
	   (the band's gap over the dotted separator). */
	padding: 15px;
	margin-top: 0;
	position: relative;
	background: var(--bg-body);
}

/* The full layout's content has no side padding. Its band keeps its own, so
   the band's first column is 15px narrower to keep its gap over the columns'
   separator. */
@media (min-width: 769px) {
	body.full-layout .profile-two-column-layout {
		padding: 15px 0;
	}

	body.full-layout .profile-overview-band {
		grid-template-columns: 445px minmax(0, 1fr);
	}
}

/* Phones, your own wall: "write post" and "photo or video" under the profile
   nav, taking you to the composer (ProfileComponent.openProfileComposerShortcut). */
.profile-composer-shortcuts {
	display: none;
}

@media (max-width: 768px) {
	.profile-composer-shortcuts:not([hidden]) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: relative;
		margin: 10px 10px 0;
		background: var(--bg-container);
		border: 1px solid var(--border-primary);
	}

	.profile-composer-shortcuts .btn-action {
		justify-content: center;
		min-height: 40px;
	}

	.profile-composer-shortcuts::before {
		content: '';
		position: absolute;
		top: 9px;
		bottom: 9px;
		left: 50%;
		width: 1px;
		background: var(--line-soft);
	}

	.profile-overview-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 10px 10px 13px;
	}

 .profile-view-nav { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
 .profile-view-nav-track { width: max-content; min-width: 100%; animation: none; }
 .profile-view-nav-set { display: flex; gap: 10px; padding: 2px 0 5px; }
 .profile-view-nav-item { flex: 0 0 clamp(130px, 38vw, 190px); width: clamp(130px, 38vw, 190px); }
	.profile-two-column-layout {
		grid-template-columns: minmax(0, 1fr);
		padding: 10px;
		gap: 10px;
	}

	.profile-header-bg {
		height: 180px;
	}

	.profile-content {
		margin-top: -90px;
		width: 100%;
	}

	.profile-identity-container {
		flex-direction: column;
		align-items: center;
		gap: 10px !important;
		width: 100%;
	}

	.profile-pic-container {
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.profile-details-column {
		height: auto;
		text-align: center;
		align-items: center;
		width: 100%;
	}

	.profile-identity-text {
		width: 100% !important;
		max-width: 100% !important;
		align-items: center;
		flex: none !important;
		padding-bottom: 0;
		flex: none;
	}

	.profile-identity-main {
		color: #000 !important;
		text-shadow: none !important;
		white-space: normal !important;
		word-break: break-all !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 5px !important;
		width: 100% !important;
	}

	.profile-identity-primary {
		font-size: 1.5rem !important;
		font-weight: 800 !important;
		text-align: center !important;
	}

	.profile-identity-secondary {
		opacity: 0.6 !important;
		font-size: 0.95rem !important;
		font-weight: 500 !important;
		text-align: center !important;
	}

	.profile-identity-pronouns {
		margin-left: 0 !important;
		opacity: 0.5 !important;
		font-size: 0.85rem !important;
		text-align: center !important;
	}

	.profile-username-view {
		text-align: center !important;
		align-items: center !important;
		color: #000 !important;
		text-shadow: none !important;
		white-space: normal !important;
		width: 100% !important;
		display: flex !important;
	}

	.profile-badges-row {
		justify-content: center;
		flex-wrap: wrap !important;
	}

	.profile-about-me-container {
		padding: 10px;
		margin-top: 10px;
		justify-content: center;
	}

	.profile-about-me-text {
		text-align: center;
		color: #000 !important;
		line-clamp: 3;
		-webkit-line-clamp: 3;
	}

	.profile-about-me-container::before {
		width: 28px;
		height: 28px;
		align-self: center;
	}

	.profile-pic-view {
		width: 160px;
		height: 160px;
	}

	.profile-info-grid {
		column-count: 1;
	}

	.profile-header-actions {
		display: none !important;
	}

	.wall-post-box.fb-style {
		width: 100%;
		max-width: 100%;
	}

	.wall-image-preview {
		margin-left: 0;
		margin-right: 0;
		padding: 8px;
	}

	.wall-post-footer {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		flex-wrap: wrap;
		gap: 10px;
	}

	.profile-recent-track-item {
		margin-left: 0;
		margin-right: 0;
	}
}

body.reduce-motion .profile-view-nav-track {
	animation: none;
}

body.reduce-motion .profile-scroll-summary {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.profile-view-nav-track {
		animation: none;
	}

	.profile-scroll-summary {
		transition: none;
	}

}

.profile-left-column {
	display: flex;
	flex-direction: column;
}

/* Stays on screen while the wall scrolls (utils/sticky-column.js moves its
   top); wide windows only, where it sits beside the wall. */
.profile-left-column.is-sticky-column {
	position: sticky;
	align-self: start;
}

.profile-left-column > #view-profile-info {
	margin-top: 0;
}

.profile-right-column {
	display: flex;
	flex-direction: column;
	min-height: 400px;
	min-width: 0;
	position: relative;
}

.profile-right-column::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15px;
	width: 1px;
	background: var(--border-primary);
	pointer-events: none;
}

@media (max-width: 768px) {
	.profile-right-column::before {
		display: none;
	}
}

.profile-content {
	position: relative;
	text-align: center;
	margin-top: -120px;
	z-index: 2;
}

.profile-pic-container {
	position: relative;
	display: inline-block;
}

.profile-identity-container {
	display: flex;
	user-select: none;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
	width: 100%;
}

.profile-details-column {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"identity"
		"about";
	grid-template-rows: 115px minmax(0, 1fr);
	flex: 1;
	min-width: 0;
	height: auto;
	overflow: visible;
}

.profile-identity-text {
	grid-area: identity;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: fit-content;
	max-width: 80vw;
	padding-bottom: 5px;
	min-width: 0;
	z-index: 10;
	overflow: visible;
}

.profile-about-me-container {
	grid-area: about;
	padding: 12px 0px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 0;
	gap: 12px;
	margin-top: 5px;
	overflow: hidden;
}

.profile-about-me-container::before {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	background-image: url('/assets/img/profile/quote.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.2;
	flex-shrink: 0;
}

.profile-identity-container .profile-username-view {
	margin-top: 0;
	padding-bottom: 5px;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
	border: none !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
	white-space: nowrap;
	overflow: visible;
}

.profile-pic-view {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border: 4px solid var(--bg-container);
	box-shadow: var(--shadow-light);
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-o-user-drag: none;
	user-select: none;
	display: block;
}

/* The .btn-profile buttons over the banner and picture sit in their corners. */
.profile-edit-btn {
	position: absolute;
	z-index: 10;
}

.profile-edit-banner-btn {
	top: 10px;
	right: 10px;
}

.profile-edit-pfp-btn {
	top: 4px;
	right: 4px;
}

.profile-username-view {
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	padding: 4px 0px;
	margin-top: 10px;
	padding-bottom: 4px;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 6px;
	word-break: break-word;
	overflow: visible;
}

/* Profile username is a semantic h2; disable global h2 decorative line here. */
#view-profile-username::before {
	content: none !important;
}

.og-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to bottom, #6d84b4, #3b5998);
	padding: 3px 8px;
	margin-left: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #29487d;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	text-transform: lowercase;
	user-select: none;
	-webkit-user-drag: none;
	transition: all 0.3s ease;
}

.og-badge:hover {
	background: linear-gradient(to bottom, #7d94c4, #4b69a8);
	transform: scale(1.1) rotate(-3deg);
	animation: none;
}

.admin-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to bottom, #d64545, #c62828);
	padding: 3px 8px;
	margin-left: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #a01f1f;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	text-transform: lowercase;
	user-select: none;
	-webkit-user-drag: none;
	transition: all 0.3s ease;
}

.admin-badge:hover {
	background: linear-gradient(to bottom, #e65555, #d63838);
	transform: scale(1.1) rotate(3deg);
	animation: none;
}

.tester-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to bottom, #22c55e, #16a34a);
	padding: 3px 8px;
	margin-left: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #15803d;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	text-transform: lowercase;
	user-select: none;
	-webkit-user-drag: none;
	transition: all 0.3s ease;
}

.tester-badge:hover {
	background: linear-gradient(to bottom, #34d670, #22c55e);
	transform: scale(1.1) rotate(-2deg);
	animation: none;
}

.dev-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to bottom, #fbbf24, #f59e0b);
	padding: 3px 8px;
	margin-left: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #d97706;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	text-transform: lowercase;
	user-select: none;
	-webkit-user-drag: none;
	transition: all 0.3s ease;
}

.dev-badge:hover {
	background: linear-gradient(to bottom, #fcd34d, #fbbf24);
	transform: scale(1.1) rotate(3deg);
	animation: none;
}

.bot-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to bottom, #22d3ee, #06b6d4);
	padding: 3px 8px;
	margin-left: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #0891b2;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	text-transform: lowercase;
	user-select: none;
	-webkit-user-drag: none;
	transition: all 0.3s ease;
}

.bot-badge:hover {
	background: linear-gradient(to bottom, #67e8f9, #22d3ee);
	transform: scale(1.1) rotate(3deg);
	animation: none;
}

.founder-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to bottom, #facc15, #eab308);
	padding: 3px 8px;
	margin-left: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #ca8a04;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	text-transform: lowercase;
	user-select: none;
	-webkit-user-drag: none;
	transition: all 0.3s ease;
}

.founder-badge:hover {
	background: linear-gradient(to bottom, #fde047, #facc15);
	transform: scale(1.1) rotate(3deg);
	animation: none;
}

.supporter-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to bottom, #ec4899, #db2777);
	padding: 3px 8px;
	margin-left: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #be185d;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	text-transform: lowercase;
	user-select: none;
	-webkit-user-drag: none;
	transition: all 0.3s ease;
}

.supporter-badge:hover {
	background: linear-gradient(to bottom, #f472b6, #ec4899);
	transform: scale(1.1) rotate(-3deg);
	animation: none;
}

.admin-badge,
.dev-badge,
.tester-badge,
.bot-badge,
.og-badge,
.founder-badge,
.supporter-badge {
	font-size: 11px !important;
	line-height: 1.1 !important;
}

/* Text links (docs/links.md): every link in text looks like this, in the
   link colour and a little faded, full strength and underlined on hover.
   Mentions share the look and keep their own behaviour; leaving the site
   asks first (utils/external-links.js). A new kind of text link joins this
   list instead of getting its own colour or hover. */
.profile-custom-link,
.message-link,
.mention,
.markdown-content a,
.status-update-text a,
.legal-section a,
.cookie-consent-body a,
.user-profile-popover-detail a,
footer a,
.auth-tos-notice a,
.auth-tos-checkbox a,
.copyright-note a,
.roadmap-cta-footer a,
.profile-sidebar-footer a,
.page-sidebar-footer a,
.support-standing-text a,
.support-contact a,
.wall-post-blog-entry > .wall-post-timestamp a,
.shared-post-view-more,
.lastfm-connected-username a,
.profile-now-playing-track a,
.profile-recent-track-name a,
.music-card-track a,
.profile-weekly-obsession-track a,
.music-text-link {
	color: var(--text-link, #3b5998);
	opacity: 0.8;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

:is(.profile-custom-link,
.message-link,
.mention,
.markdown-content a,
.status-update-text a,
.legal-section a,
.cookie-consent-body a,
.user-profile-popover-detail a,
footer a,
.auth-tos-notice a,
.auth-tos-checkbox a,
.copyright-note a,
.roadmap-cta-footer a,
.profile-sidebar-footer a,
.page-sidebar-footer a,
.support-standing-text a,
.support-contact a,
.wall-post-blog-entry > .wall-post-timestamp a,
.shared-post-view-more,
.lastfm-connected-username a,
.profile-now-playing-track a,
.profile-recent-track-name a,
.music-card-track a,
.profile-weekly-obsession-track a,
.music-text-link):is(:hover, :focus-visible) {
	opacity: 1;
	text-decoration: underline;
}

.profile-bio {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 10px;
	margin-bottom: 20px;
	line-height: 1.4;
}

.profile-about-me-text {
	font-size: 13px;
	color: var(--text-secondary);
	text-align: left;
	line-height: 1.5;
	position: relative;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	align-self: center;
	word-break: break-word;
	overflow-wrap: break-word;
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

.edit-about-me-link-wrap {
	font-style: normal;
	font-size: 11px;
	color: var(--text-secondary);
	user-select: none;
	margin-left: 4px;
	display: inline-block;
	align-self: flex-end;
	margin-bottom: 2px;
}

.edit-about-me-link-text {
	color: var(--text-link, #3b5998);
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.edit-about-me-link-text:hover {
	text-decoration: underline;
	opacity: 1;
}

.profile-info-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 15px;
	font-size: 12px;
	color: var(--text-primary);
	text-align: left;
}

#view-profile-info > *,
#view-blog-info > * {
	position: relative;
	overflow: visible;
}

#view-profile-info > *::before,
#view-blog-info > *::before {
	content: '';
	position: absolute;
	top: 17px;
	right: -14px;
	width: 14px;
	border-top: 1px solid var(--border-primary);
	pointer-events: none;
}

#view-profile-info > *::after,
#view-blog-info > *::after {
	content: '';
	position: absolute;
	top: 14px;
	right: -17px;
	width: 7px;
	height: 7px;
	box-sizing: border-box;
	border: 0;
	border-radius: 50%;
	background: var(--border-primary);
	box-shadow: 0 0 0 4px var(--bg-body, #e9eaed);
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 768px) {
	#view-profile-info > *::before,
	#view-profile-info > *::after,
	#view-blog-info > *::before,
	#view-blog-info > *::after {
		display: none;
	}
}

.profile-info-grid strong {
	color: var(--text-muted);
	font-weight: normal;
}

.profile-info-item:not(:last-child),
.profile-social-row:not(:last-child) {
border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, var(--border-primary), transparent) 1;
}

.profile-info-section {
    background: var(--bg-container);
	border: 1px solid var(--border-primary);
	box-shadow: var(--shadow-light);
	padding: 0;
	overflow: hidden;
}

.profile-section-title {
	background: var(--bg-sidebar-header-hover, var(--bg-sidebar-header));
	color: var(--text-sidebar-header);
	font-size: 11px;
	font-weight: bold;
	padding: 8px 10px;
	margin-bottom: 0;
	display: flex;
	user-select: none;
	justify-content: space-between;
	align-items: center;
}

/* Profile information cards are presentation UI, including their content and artwork. */
#user-profile-view #view-profile-info,
#user-profile-view #view-profile-info *,
#user-profile-view #view-blog-info,
#user-profile-view #view-blog-info *,
#user-profile-view #view-profile-section,
#user-profile-view #view-profile-section *,
#user-profile-view .profile-custom-link,
#user-profile-view .banner-custom-link,
#user-profile-view .banner-custom-link * {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#user-profile-view #view-profile-info img,
#user-profile-view #view-profile-info a,
#user-profile-view #view-blog-info a,
#user-profile-view #view-profile-section :is(img, a) {
	-webkit-user-drag: none;
}

#user-profile-view #view-profile-info :is(input, textarea, [contenteditable="true"], [contenteditable="true"] *) {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.profile-section-title-balanced .profile-section-title-text {
	grid-column: 2;
	display: block;
	min-width: 0;
	justify-self: stretch;
	text-align: center;
}

.profile-section-title-balanced .profile-section-title-spacer {
	grid-column: 3;
	width: 12px;
	visibility: hidden;
}

.profile-section-title.collapsed {
	border-bottom: none;
}

/* Drag-to-reorder profile sections (own profile only) */
.profile-info-grid.drag-reorder-enabled .profile-section-drag-handle {
	cursor: grab;
	display: grid;
	grid-template-columns: 12px 1fr 12px;
	column-gap: 6px;
	justify-content: initial;
}

.profile-info-grid.drag-reorder-enabled .profile-section-drag-handle:active {
	cursor: grabbing;
}

.profile-info-grid.drag-reorder-enabled .profile-section-drag-handle::before {
	content: '\22EE\22EE';
	margin-right: 0;
	opacity: 0.5;
	font-size: 12px;
	line-height: 1;
	display: inline-block;
	transform: translateY(-1px);
	grid-column: 1;
	justify-self: start;
}

.profile-info-grid.drag-reorder-enabled .profile-section-drag-handle .profile-section-toggle-icon {
	cursor: pointer;
	grid-column: 3;
	justify-self: end;
}

.profile-section-draggable {
	transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}

.profile-section-draggable.dragging {
	opacity: 0.5;
	transform: scale(0.985);
	background: transparent !important;
	border: 2px dashed var(--border-primary);
	box-shadow: none;
}

.profile-section-draggable.dragging>* {
	opacity: 0.3;
}

body > footer {
	text-align: center;
	font-size: 70%;
	margin: 0;
	padding: 0;
	height: 0;
	position: static;
	pointer-events: none;
}

body > footer::before {
	content: '';
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background-image: url('https://ponkis.xyz/assets/img/global/fence.png');
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: auto 100%;
	opacity: 0.55;
	z-index: 0;
	pointer-events: none;
}

body > footer p {
	position: relative;
	z-index: 1;
}

body > footer img {
	display: inline-block;
	vertical-align: middle;
}

body > footer p {
	vertical-align: middle;
	margin: 10px 0 0 0;
	font-size: 90%;
}

body > footer .copyright {
	font-size: 80%;
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
}

.profile-section-toggle-icon {
	font-size: 14px;
	transition: transform 0.3s ease;
	cursor: pointer;
}

.profile-section-toggle-icon.collapsed {
	transform: rotate(180deg);
}

.profile-section-content {
	max-height: 500px;
	overflow: hidden;
	opacity: 1;
}

.profile-section-content.collapsed {
	max-height: 0;
	opacity: 0;
}

.profile-info-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 8px 10px;
	gap: 12px;
}

.profile-info-item-full {
	flex-direction: column;
	gap: 6px;
}

.profile-info-label {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 600;
	text-transform: lowercase;
	min-width: 90px;
	flex-shrink: 0;
}

.profile-info-value {
	font-size: 12px;
	color: var(--text-primary);
	text-align: right;
	word-break: break-word;
	overflow-wrap: break-word;
	text-transform: lowercase;
	flex: 1;
	min-width: 0;
}

.profile-info-item-full .profile-info-value {
	text-align: left;
}

.profile-info-grid {
	column-count: 2;
	column-gap: 15px;
}

.profile-info-section {
	break-inside: avoid;
	margin-bottom: 0;
}

.profile-info-item.profile-info-human {
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0;
	text-align: left;
	flex-wrap: wrap;
}

.profile-info-human .profile-info-text {
	font-size: 13px;
	color: var(--text-primary);
	text-transform: none;
	word-break: break-word;
	overflow-wrap: break-word;
	flex: 1;
	min-width: 0;
}

.profile-info-human .profile-info-text strong {
	color: var(--text-link, #3b5998);
	word-break: break-word;
}

/* "recent activity" (loadProfileRecentActivity): the wall's status icon
   beside its words, one update a row. */
.profile-recent-activity-item {
	flex-wrap: nowrap;
	align-items: center;
}

.profile-recent-activity-item .status-update-icon {
	flex-shrink: 0;
	margin: 0 8px 0 0;
	opacity: 1;
}

.profile-recent-activity-item .profile-info-text {
	font-size: 12px;
	color: var(--text-secondary);
}

.profile-recent-activity-item .status-update-inline-icon,
.profile-recent-activity-item .status-inline-icon {
	width: 12px;
	height: 12px;
	vertical-align: -2px;
}

.profile-info-human i {
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* A member's country flag (countryFlagHTML), in place of the pin. */
.country-flag {
	flex-shrink: 0;
	width: 20px;
	height: 15px;
	pointer-events: none;
}

.profile-info-human .country-flag {
	margin: 3px 8px 0 0;
}

.profile-header-actions {
	position: absolute;
	bottom: 15px;
	right: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 10;
}

.profile-header-actions .profile-edit-btn {
	position: relative;
	top: auto;
	right: auto;
}

.profile-actions {
	margin-top: 15px;
	padding: 0 15px 20px 15px;
}

.profile-wall-section {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.wall-post-input-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.wall-post-input-wrapper {
	flex-grow: 1;
	position: relative;
	background: var(--bg-input);
	border: 1px solid var(--line-medium);
	display: flex;
	align-items: center;
	min-height: 32px;
}

.wall-post-input-wrapper:focus-within {
	outline: none;
	border-color: var(--border-input-focus, #4267b2);
}

.wall-post-input {
	width: 100%;
	border: none;
	background: transparent;
	min-height: 32px;
	height: 32px;
	max-height: 150px;
	resize: none;
	outline: none;
	user-select: none;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	overflow-y: hidden;
	margin: 0;
}

.wall-post-input-icons {
	position: absolute;
	right: 5px;
	top: 0;
	height: 32px;
	display: flex;
	gap: 2px;
	z-index: 2;
	align-items: center;
}

.wall-post-input-icons .wall-char-count {
	font-size: 10px;
	color: var(--text-muted);
	user-select: none;
	margin-right: 5px;
	min-width: 35px;
	text-align: right;
}

.comment-form-footer {
	display: flex;
	align-items: center;
	padding: 8px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	opacity: 0;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	visibility: hidden;
	transition: all 0.3s ease;
	gap: 8px;
	justify-content: flex-end;
}

.comment-form-container.active .comment-form-footer {
	opacity: 1;
	max-height: 200px;
	padding: 10px;
	visibility: visible;
}

.comment-input-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 16px;
	margin-bottom: 5px;
}

.comment-avatar {
	width: 32px;
	user-select: none;
	-webkit-user-drag: none;
	height: 32px;
	object-fit: cover;
	flex-shrink: 0;
}

.comment-input-wrapper {
	flex-grow: 1;
	position: relative;
	background: var(--bg-input);
	border: 1px solid var(--line-medium);
	display: flex;
	align-items: center;
	min-height: 32px;
}

.comment-input-wrapper:focus-within {
	outline: none;
	border-color: var(--border-input-focus, #4267b2);
}

.comment-input-wrapper .comment-input {
	width: 100%;
	border: none;
	background: transparent;
	padding: 6px 110px 6px 10px;
	min-height: 32px;
	height: 32px;
	max-height: 150px;
	resize: none;
	outline: none;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	overflow-y: hidden;
	margin: 0;
}

.comment-input:focus {
	min-height: 32px;
}

.comment-input-icons {
	position: absolute;
	right: 5px;
	top: 0;
	height: 32px;
	display: flex;
	gap: 2px;
	z-index: 2;
	align-items: center;
}

.comment-form-footer {
	display: none;
}

.comment-input-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 5px;
}

.comment-char-count {
	font-size: 11px;
	user-select: none;
	color: #999;
	margin-right: 4px;
	margin-top: 1px;
}

.character-counter {
	font-variant-numeric: tabular-nums;
	user-select: none;
	transition: color 0.15s ease;
}

.character-counter.temp-cold {
	color: #999;
}

.character-counter.temp-warm {
	color: #e67e22;
}

.character-counter.temp-hot {
	color: #d9534f;
}

.emoji-picker-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.emoji-picker-content {
	user-select: none;
	height: 280px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, #ffffff) 0%, rgba(255, 255, 255, 100) 100%);
}

.emoji-picker-category-content {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	display: none;
}

.emoji-picker-category-content.active {
	display: grid;
}

.emoji-picker-tab-bar {
	display: flex;
	gap: 0;
	background: linear-gradient(180deg, var(--surface-sunken), #d8d8d8);
	border-top: 1px solid #999;
	padding: 0;
	min-height: 34px;
}

.wall-char-count {
	font-size: 11px;
	color: var(--text-muted);
	user-select: none;
}

.notifications-container {
	animation: notificationSlideDown 0.3s ease-out;
}

/* The inbox (ChatComponent.loadNotificationInbox) is a flat list: "new"
   then "earlier" (seen, not dismissed), each under a grey bar. A row is the
   picture with a badge for what happened, the words with when under them,
   and the x. New rows are tinted blue; only they count toward the badge.
   It is drawn in the bell's drop-down and the full layout's column. */
.notification-inbox {
	display: flex;
	flex-direction: column;
	gap: 0;
	box-sizing: border-box;
}
.notification-group {
	display: flex;
	flex-direction: column;
}

.notification-group[hidden] {
	display: none;
}

.notification-group-title {
	padding: 4px 10px;
	background: linear-gradient(to bottom, #f6f7f9, #e9ebee);
	border-bottom: 1px solid var(--line-soft);
	color: var(--text-muted);
	font: bold 10px/1.3 Arial, sans-serif;
	text-transform: lowercase;
	user-select: none;
}

.notification-group + .notification-group .notification-group-title {
	border-top: 1px solid var(--line-soft);
}

.notification-inbox .notification-item {
	align-items: flex-start;
	gap: 9px;
	padding: 8px 6px 8px 10px;
	background: color-mix(in srgb, #3b5998 9%, var(--bg-container));
	border: 0;
	border-bottom: 1px solid var(--line-soft);
	box-shadow: none;
	animation: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.notification-inbox .notification-item:last-child {
	border-bottom: 0;
}

.notification-inbox .notification-item:hover {
	background: color-mix(in srgb, #3b5998 15%, var(--bg-container));
}

.notification-inbox .notification-item.is-old {
	background: var(--bg-container);
}

.notification-inbox .notification-item.is-old:hover {
	background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-container));
}

.notification-inbox .notification-actor-pic {
	width: 36px;
	height: 36px;
}

.notification-inbox .notification-message {
	font-size: 11px;
	line-height: 1.35;
}

.notification-inbox .notification-time {
	font-size: 10px;
}

/* A new one says when in blue, like the badge that counted it. */
.notification-inbox .notification-item:not(.is-old) .notification-time {
	color: #3b5998;
	font-weight: bold;
}

/* The x shows on hover (always on touch screens). */
.notification-inbox .notification-close {
	opacity: 0;
}

.notification-inbox .notification-item:hover .notification-close,
.notification-inbox .notification-close:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.notification-inbox .notification-close {
		opacity: 1;
	}
}

.notification-inbox .notification-item.is-expanded .notification-message {
	display: block;
	-webkit-line-clamp: unset;
}

.notification-inbox .notifications-empty {
	padding: 26px 10px;
}

.notification-inbox .notifications-empty[hidden] {
	display: none;
}

@keyframes notificationSlideDown {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.notification-item {
	background: linear-gradient(to bottom, #fff9d7, #fffbea);
	border: 1px solid #e2c822;
	padding: 10px 8px 10px 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	animation: notificationPulse 0.5s ease-out;
	user-select: none;
}

@keyframes notificationPulse {
	0% {
		transform: scale(0.98);
		opacity: 0.9;
	}

	50% {
		transform: scale(1.01);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* The x (a .btn-delete) at the end of the row. */
.notification-close {
	align-self: flex-start;
}

/* New notifications drop in at the top centre of the page as their inbox
   item, for a few seconds (ChatComponent.showNotificationToast). */
.notification-toasts {
	position: fixed;
	top: 50px;
	left: 50%;
	z-index: 2147483150;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min(340px, calc(100vw - 32px));
	transform: translateX(-50%);
	pointer-events: none;
}

.notification-toasts:empty {
	display: none;
}

.notification-toasts .notification-toast {
	cursor: pointer;
	pointer-events: auto;
	animation: notificationSlideDown 0.3s ease-out;
}

.notification-toasts .notification-toast:hover {
	background: linear-gradient(to bottom, #fff3d0, #fffae0);
}

/* The picture, with a badge in its corner for what happened (a like, a
   comment, a mention, a poll vote, a poke; the bell for anything else). */
.notification-avatar {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
}

.notification-actor-pic {
	width: 28px;
	height: 28px;
	object-fit: cover;
	flex-shrink: 0;
	-webkit-user-drag: none;
}

.notification-item.is-system .notification-actor-pic {
	object-fit: contain;
	background: var(--bg-container);
}

.notification-kind {
	--notification-kind: #3b5998;
	position: absolute;
	right: -4px;
	bottom: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	background: var(--notification-kind);
	border: 1px solid var(--bg-container);
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

.notification-item[data-kind="like"] .notification-kind { --notification-kind: #e0245e; }
.notification-item[data-kind="mention"] .notification-kind { --notification-kind: #6d84b4; }
.notification-item[data-kind="poll"] .notification-kind { --notification-kind: #42b72a; }
.notification-item[data-kind="poke"] .notification-kind { --notification-kind: #f0a30a; }
.notification-item[data-kind="other"] .notification-kind { --notification-kind: #90949c; }

/* The words, with when it came under them. */
.notification-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.notification-message {
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.notification-message strong {
	font-weight: bold;
	color: #3b5998;
}

.notification-time {
	color: var(--text-muted);
	font-size: 10px;
	white-space: nowrap;
}

.global-wall-title {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	color: var(--text-header);
}

.global-wall-actions {
	display: flex;
	gap: 10px;
}

.global-wall-content {
	padding: 10px;
}

@keyframes contentFadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.global-wall-title {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	color: var(--text-header);
}

.wall-posts-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1;
	min-width: 0;
	width: 100%;
}

.wall-posts-container.single-column {
	column-count: 1 !important;
	column-width: auto !important;
}

.wall-empty-state {
	position: relative;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	border: 1px solid var(--border-primary);
	padding: 14px;
	box-shadow: var(--shadow-light);
	transition: box-shadow 0.2s ease;
	margin-bottom: 15px;
	break-inside: avoid;
	display: inline-block;
	width: 100%;
	animation: wallPostFadeIn 0.4s ease-out forwards;
	opacity: 0;
	color: var(--text-muted);
	font-size: 12px;
	font-style: italic;
}

.wall-post-item {
	position: relative;
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	padding: 0;
	box-shadow: var(--shadow-light);
	transition: box-shadow 0.2s ease;
	break-inside: avoid;
	display: inline-block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	animation: wallPostFadeIn 0.4s ease-out forwards;
	opacity: 0;
}

.wall-post-main {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 14px 14px 0;
	background: var(--bg-container);
}

.wall-post-misc {
	box-sizing: border-box;
	width: 100%;
	border-top: 1px solid var(--border-primary);
	background: var(--bg-message);
}

.wall-post-item:nth-child(1) {
	animation-delay: 0.1s;
}

.wall-post-item:nth-child(2) {
	animation-delay: 0.15s;
}

.wall-post-item:nth-child(3) {
	animation-delay: 0.2s;
}

.wall-post-item:nth-child(4) {
	animation-delay: 0.25s;
}

.wall-post-item:nth-child(n+5) {
	animation-delay: 0.3s;
}

@keyframes wallPostFadeIn {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.wall-post-item:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.wall-post-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	position: relative;
	min-width: 0;
}

.highlights-right-sidebar {
	width: 200px;
	background: var(--bg-sidebar);
	border-left: 1px solid var(--border-primary);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
}

.highlights-birthday-container {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	/* Must be visible (not hidden/auto) or position:sticky on children won't work */
	overflow: visible;
	/*
	 * min-height:100% ensures this container is always at least as tall as the sidebar.
	 * This forces the sidebar to always have scrollable overflow, which means
	 * position:sticky;bottom:0 on the search bar ALWAYS activates — even when
	 * the birthday list has zero/few results.
	 */
	min-height: 100%;
}

/* Birthday search bar always sticks to the visible bottom of the sidebar.
   Only the sticking is stated here; the box itself is .sidebar-search. */
.highlights-birthday-container>.sidebar-search {
	position: sticky;
	bottom: 0;
	z-index: 1;
}

.highlights-right-sidebar .mini-post-container {
	margin-bottom: 0;
	flex-shrink: 0;
}

.coming-soon-text {
	margin: 0;
	font-size: 11px;
	color: var(--text-muted);
	font-style: italic;
	text-align: center;
	padding: 10px 0;
}

.wall-post-avatar {
	width: 40px;
	height: 40px;
	object-fit: cover;
	user-select: none;
	border: 2px solid var(--border-primary);
	flex-shrink: 0;
	-webkit-user-drag: none;
}

.wall-post-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
	user-select: none;
}

.wall-post-author {
	font-size: 13px;
	font-weight: bold;
	color: var(--text-primary);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	user-select: none;
}

.wall-post-kind {
	font-size: 13px;
	color: var(--text-muted);
	font-weight: normal;
}

.wall-post-kind strong {
	color: var(--color-primary, #3b5998);
	font-weight: 600;
}

/* ── feelings (utils/feelings.js, docs/feelings.md) ──
   "is 😃 feeling happy." after the author's name, and the composer's feeling
   row: the feeling on the left, the search box (while picking) or a note,
   under a dashed rule, with the picker dropping down beneath it. */
.wall-post-feeling-chosen {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px -12px 0;
	padding: 6px 12px;
	border-top: 1px dashed var(--border-primary);
	font: 11px 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
	color: var(--text-muted);
	user-select: none;
}

.wall-post-feeling-chosen[hidden],
.wall-post-feeling-chosen [hidden],
.wall-post-tab[data-feeling-tab][hidden] {
	display: none;
}

.wall-post-feeling-current {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	background: none;
	color: var(--text-secondary);
	font: inherit;
	white-space: nowrap;
	cursor: pointer;
}

.wall-post-feeling-current strong {
	color: var(--text-primary);
}

.wall-post-feeling-current i {
	font-size: 14px;
}

.wall-post-feeling-search {
	flex: 1;
	min-width: 0;
	height: 22px;
	padding: 0 6px;
	border: 1px solid var(--border-primary);
	border-radius: 0;
	background: var(--bg-input);
	color: var(--text-primary);
	font: inherit;
	outline: none;
}

.wall-post-feeling-search:focus {
	border-color: var(--color-primary);
}

.wall-post-feeling-note {
	flex: 1;
	min-width: 0;
	font-style: italic;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wall-post-feeling-remove {
	margin-left: auto;
}

/* A panel that drops down inside a composer (PostboxDropdown in
   utils/postbox.js), full width under the row that opened it. */
.postbox-dropdown {
	margin: 0 -12px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	border-top: 1px solid var(--line-soft);
	background: var(--surface-sunken);
	transition: max-height 220ms ease, opacity 160ms ease;
}

.postbox-dropdown[hidden] {
	display: none;
}

.postbox-dropdown.is-open {
	max-height: 240px;
	opacity: 1;
}

.postbox-dropdown-body {
	max-height: 220px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.feeling-picker-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	min-height: 60px;
	padding: 6px;
}

.feeling-picker-list > .global-no-results {
	grid-column: 1 / -1;
}

.feeling-picker-option {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 7px 9px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-primary);
	font: inherit;
	font-size: 12px;
	text-align: left;
	cursor: pointer;
}

.feeling-picker-option:hover,
.feeling-picker-option:focus-visible {
	background: var(--surface-sunken);
	border-color: var(--line-soft);
	outline: none;
}

.feeling-picker-option.active {
	background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-container));
	border-color: color-mix(in srgb, var(--color-primary) 30%, var(--bg-container));
	font-weight: bold;
}

.feeling-picker-emoji {
	display: inline-flex;
	flex: 0 0 auto;
}

.feeling-picker-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wall-post-author:hover {
	text-decoration: underline;
}

#user-profile-view .wall-post-author {
	cursor: default !important;
	pointer-events: none;
	user-select: none;
}

#user-profile-view .wall-post-author:hover {
	text-decoration: none !important;
}

.wall-post-timestamp {
	font-size: 10px;
	color: var(--text-muted);
}

/* Tiny chip rendered next to .wall-post-timestamp showing post visibility.
   Globe = public (default), lock = private. Inline so it sits right
   beside the timestamp text without breaking the line. Both states use
   the same muted color — the icon shape carries the meaning. */
.wall-post-visibility {
	display: inline-flex;
	align-items: center;
	margin-left: 4px;
	color: var(--text-muted);
	font-size: 11px;
	line-height: 1;
	vertical-align: -1px;
	cursor: help;
}

.wall-post-visibility i {
	font-size: 11px;
}

.wall-post-content {
	font-size: 13px;
	color: var(--text-primary);
	line-height: 1.6;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	margin: 12px 0 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

.wall-post-text {
	white-space: pre-wrap;
}

.wall-post-text:empty {
	display: none;
}

.wall-post-actions {
	display: flex;
	align-items: center;
	user-select: none;
	margin: 0 -14px !important;
	width: calc(100% + 28px) !important;
	padding: 10px 6px !important;
	box-sizing: border-box !important;
}

.profile-header {
	display: flex;
	align-items: center;
	gap: 15px;
}

#profile-pic-preview {
	width: 80px;
	height: 80px;
	border: 1px solid var(--line-strong);
	object-fit: cover;
	flex-shrink: 0;
}

.profile-details {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 10px;
}

.profile-details .input-group {
	margin-bottom: 0;
}

.banner-preview {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border: 1px solid var(--line-strong);
	background-color: var(--surface-tint);
	margin-bottom: 10px;
}

.birthday-picker,
.gender-picker {
	margin-bottom: 12px;
}

.input-group-color {
	display: flex;
	align-items: center;
	gap: 10px;
}

.input-group-color>* {
	margin: 0;
}

#profile-color {
	width: 40px;
	height: 34px;
	padding: 2px;
	border: 1px solid var(--line-strong);
	cursor: pointer;
}

#color-preview-bubble {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--line-medium);
	font-size: 12px;
	color: var(--text-secondary);
	word-break: break-word;
}

footer .links {
	margin: 0;
	text-transform: lowercase;
	list-style: none;
}

footer .links {
	font-size: 0.875em;
	margin: 16px 0 5px 0;
	padding: 0;
	text-align: center;
}

footer .links li {
	display: inline-block;
}

.icon,
.award img {
	display: inline-block;
	height: 1.4em;
	width: 1.4em;
	aspect-ratio: 1 / 1;
	margin: 0 .05em 0 .1em;
	vertical-align: -0.3em;
	color: rgba(0, 0, 0, 0);
}

footer .links li:not(:last-child)::after {
	content: " | ";
	color: black;
}

.alert {
	text-align: center;
	color: #a94442;
	background-color: #f2dede;
	border: 1px solid #ebccd1;
	padding: 8px;
	margin-bottom: 15px;
	font-size: 12px;
	display: none;
	position: relative;
	overflow: hidden;
}

@keyframes alertPulse {

	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}
}

@keyframes logoutFadeOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.5;
		transform: scale(0.98);
	}

	100% {
		opacity: 0;
		transform: scale(0.95);
	}
}

.logout-animation {
	animation: logoutFadeOut 0.6s ease-out forwards;
}

.alert.success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

.username,
.message-pfp {
	cursor: pointer;
}

@keyframes typing-blink {
	0% {
		opacity: 0.2;
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: 0.2;
	}
}

.reply-snippet {
	background-color: var(--bg-body);
	padding: 4px 8px;
	border-left: 2px solid var(--line-blue);
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.forwarded-source-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-right: 4px;
	color: var(--color-primary);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.35px;
	text-transform: lowercase;
}

.forwarded-source-label i {
	font-size: 10px;
}

.reply-snippet strong {
	font-weight: bold;
}

.message-highlight {
	animation: highlight-pulse 2s ease;
}

@keyframes highlight-pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.7);
	}

	50% {
		transform: scale(1.02);
		box-shadow: 0 0 0 10px rgba(59, 89, 152, 0);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(59, 89, 152, 0);
	}
}

/* The comment box's reply indicator (.comment-reply-indicator) reuses the
   chat's indicator content and cancel button. */
#cancel-reply-btn,
.comment-reply-indicator .reply-indicator-close {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--text-muted);
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#cancel-reply-btn:hover,
.comment-reply-indicator .reply-indicator-close:hover {
	color: #e41e3f;
}

#cancel-reply-btn i,
.comment-reply-indicator .reply-indicator-close i {
	font-size: 14px;
}

#typing-indicator.active,
#reply-indicator.active {
	display: flex;
	align-items: center;
	height: auto;
	user-select: none;
	padding: 10px 15px !important;
	background-color: var(--bg-message);
	padding: 15px 15px !important;
	overflow: hidden;
}

/* Note: indicator ordering is handled by DOM order in `chat.html`. */

#typing-indicator img {
	-webkit-user-drag: none;
}

#reply-indicator.active {
	justify-content: space-between;
}

#typing-indicator.active+#reply-indicator.active {
	border-top: none;
}

#reply-indicator .reply-indicator-content,
.comment-reply-indicator .reply-indicator-content {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	font-size: 12px;
	color: var(--text-muted);
}

#reply-indicator .reply-indicator-content i,
.comment-reply-indicator .reply-indicator-content i {
	font-size: 14px;
	color: var(--text-link, #3b5998);
}

#reply-indicator .reply-indicator-content strong,
.comment-reply-indicator .reply-indicator-content strong {
	color: var(--text-link, #3b5998);
}

/* ── Jump-to-current handle ─────────────────────────────── */

#jump-to-current {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 15px;
	background-color: var(--bg-message);
	font-size: 12px;
	color: var(--text-link, #3b5998);
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease;
}

#jump-to-current.active {
	display: flex;
}

#jump-to-current:hover {
	background-color: var(--bg-hover, #eaeaea);
	color: var(--text-link, #3b5998);
	filter: brightness(0.94);
}

#jump-to-current i {
	font-size: 15px;
	flex-shrink: 0;
}

#jump-to-current span {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#attached-files-indicator.wall-image-preview {
	margin: 0 !important;
	border-top: none !important;
	background: var(--bg-message);
	width: 100%;
	height: auto;
	min-height: 105px;
	padding: 12px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.typing-pfp-stack {
	display: flex;
	align-items: center;
	margin-right: 8px;
}

.typing-pfp {
	width: 32px;
	height: 32px;
	border: 1px solid var(--line-soft);
	background-color: var(--bg-container);
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* Cascade is applied to the stack's flex children (which may be the imgs or
   the .img-loader-container wrappers added by applyImageLoaders), not to the
   imgs directly — otherwise wrapped imgs are each :first-child of their own
   span and never get the negative margin. */
.typing-pfp-stack > * + * {
	margin-left: -10px;
}

.typing-info {
	font-size: 11px;
	color: var(--text-muted);
}

.typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 4px;
}

.typing-dots span {
	display: inline-block;
	width: 5px;
	height: 5px;
	background-color: #999;
	border-radius: 50%;
	animation: typing-blink 1.4s infinite both;
}

.typing-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

/* Inline typing indicator: composes existing .typing-pfp-stack + .typing-pfp
   (cascade) + .message-bubble (gray bubble) + .typing-info (muted names). The
   wrapper just supplies the message-row spacing and entrance animation. */
.typing-message {
	margin-bottom: 10px;
	animation: messageSlideInLeft 0.3s ease-out;
}

.typing-message .message-bubble .typing-dots {
	margin: 0;
}

.typing-message .message-bubble .typing-dots span {
	width: 6px;
	height: 6px;
	animation-duration: 1.2s;
}

#emoji-picker {
	display: grid;
	position: absolute;
	bottom: 100%;
	right: 0;
	background: linear-gradient(0deg, rgb(211 211 211 / 23%) 0%, rgba(255, 255, 255, 0) 100%);
	border: 1px solid var(--line-blue);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	width: 280px;
	max-height: 300px;
	overflow-y: auto;
	padding: 8px;
	z-index: 1000;
	grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
	gap: 2px;
	margin-bottom: 5px;
	transform-origin: bottom right;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

#emoji-picker.hidden {
	visibility: hidden;
	transform: scale(0.8) translateY(10px);
	opacity: 0;
}

#emoji-picker button {
	background: transparent;
	padding: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

#emoji-picker button:hover {
	border-color: var(--line-soft);
	z-index: 1;
}

#emoji-picker img {
	width: 100%;
	height: 100%;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-select: none;
}

#wall-emoji-picker {
	transform-origin: top left;
}

/* The nudge glyph is a .btn-tool; while it cools down it carries a count. */
#nudge-btn {
	overflow: visible;
}

#nudge-btn.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

#nudge-btn.cooldown {
	animation: nudgeCooldown 0.3s ease;
}

#nudge-btn.cooldown::after {
	content: attr(data-countdown);
	position: absolute;
	top: -8px;
	right: -8px;
	background: #ff6b35;
	color: white;
	width: 18px;
	height: 18px;
	font-size: 10px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: countdownPulse 1s infinite;
}

@keyframes nudgeCooldown {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.9);
	}

	100% {
		transform: scale(1);
	}
}

#image-upload-btn.uploading {
	animation: uploadPulse 1s infinite;
	pointer-events: none;
}

@keyframes uploadPulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

@keyframes countdownPulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

.embedded-image-container {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 8px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 0;
}

.embedded-image-container.has-sticker {
	justify-content: center;
}

.message-text:not(:empty)+.embedded-image-container {
	padding-top: 0;
	margin-top: 5px;
}

.embedded-image-container::-webkit-scrollbar {
	display: none;
}

.embedded-image-container a {
	display: inline-block;
	flex-shrink: 0;
}

/* Two or more pictures under a post, comment or message share a photo mosaic
   (.photo-mosaic above, embeddedImagesHTML in utils/helpers.js); every cell
   is cropped to fill. Past six, the sixth says how many more there are, and
   the viewer pages through all of them. The width is a length capped by
   max-width, not min(100%, …): a percentage does not count while a chat
   bubble sizes itself, so the cells' full-size pictures would stretch it. */
.embedded-image-container.photo-mosaic {
	display: grid;
	width: 400px;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	gap: 2px;
	padding: 0;
	margin-top: 4px;
	overflow: hidden;
}

.embedded-image-container.photo-mosaic > a {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--bg-body);
}

.embedded-image-container.photo-mosaic > a:nth-child(n+7) {
	display: none;
}

.photo-mosaic .img-loader-container {
	display: block;
	width: 100%;
	height: 100%;
}

.photo-mosaic img.embedded-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.photo-mosaic > a[data-more]::after {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font: bold 22px/1 Arial, sans-serif;
	pointer-events: none;
}

.image-viewer-link,
.image-viewer-link img,
.embedded-image-container img:not(.sticker-image) {
	cursor: zoom-in;
}

/* ── videos (docs/media.md) ──
   Every video plays inline in Plyr (utils/video-player.js), below the
   pictures; videos never join a mosaic or a viewer. Plyr keeps its own
   controls; the rules below only give it the site's colours and square
   corners. The play mark is for video thumbnails (attachment chips, the
   profile's videos section). */
.embedded-video-mark,
.attachment-video-mark {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: #fff;
	font-size: 16px;
	pointer-events: none;
}

/* The width is a length capped by max-width, like the mosaic's, so a chat
   bubble hugs the player instead of the video's full size. */
.embedded-image-container + .embedded-image-container.has-video-player {
	margin-top: 4px;
}

.video-player {
	flex: 0 0 auto;
	width: 400px;
	max-width: 100%;
	border: 1px solid var(--border-header);
	background: #000;
	line-height: normal;
}

.video-player video {
	display: block;
	width: 100%;
	max-height: 300px;
	background: #000;
}

/* A post's own pictures and videos fill the post (comments, chat bubbles,
   chat post cards and reported content keep the sizes above). Kept at low
   specificity so reported content's smaller sizes still apply. */
:where(.wall-post-item) .wall-post-content > .embedded-image-container.photo-mosaic,
:where(.wall-post-item) .wall-post-content > .embedded-image-container > .video-player {
	width: 100%;
}

:where(.wall-post-item) .wall-post-content > .embedded-image-container > .video-player video {
	max-height: 480px;
}

.video-player .plyr:fullscreen video,
.video-player .plyr--fullscreen-fallback video {
	max-height: none;
}

/* Plyr in the site's colours and square corners. */
.plyr {
	--plyr-color-main: var(--color-primary, #3b5998);
	--plyr-control-radius: 0;
	--plyr-tooltip-radius: 0;
	--plyr-menu-radius: 0;
	--plyr-font-family: inherit;
	--plyr-font-size-time: 11px;
	--plyr-range-track-height: 4px;
	--plyr-range-thumb-height: 11px;
	--plyr-video-controls-background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
}

.plyr__control--overlaid {
	border-radius: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: rgba(0, 0, 0, 0.55);
}

.plyr--video .plyr__control--overlaid:hover,
.plyr--video .plyr__control--overlaid:focus-visible {
	background: var(--color-primary, #3b5998);
}

/* Game thumbnails sit inside that same scroller but open a game, so they keep
   the pointer rather than the magnifier. */
.embedded-image-container .game-card img,
.embedded-image-container .game-card-thumb img {
	cursor: pointer;
}

.scroll-hint-btn {
	position: sticky;
	right: 0;
	flex-shrink: 0;
	align-self: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	margin-left: -28px;
	background: var(--bubble-bg, var(--surface-tint));
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, background 0.2s ease, filter 0.2s ease;
	z-index: 5;
	border: none;
	padding: 0;
}

.scroll-hint-btn:hover {
	filter: brightness(0.92);
}

.message-bubble.rainbow-bubble .scroll-hint-btn {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0) 60%);
	animation: rainbow-bubble 6s linear infinite;
}

.message.own .message-bubble.rainbow-bubble .scroll-hint-btn,
.message-bubble.rainbow-bubble.rainbow-bubble-own .scroll-hint-btn {
	animation: rainbow-bubble-own 6s linear infinite;
}

.wall-post-item .scroll-hint-btn,
.comments-container .scroll-hint-btn {
	background: var(--bg-message);
}

.scroll-hint-btn:active {
	transform: scale(0.95);
}

.embedded-image {
	max-width: 400px;
	max-height: 250px;
	object-fit: cover;
	cursor: pointer;
}

.sticker-image {
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.sticker-info-target {
	cursor: pointer;
	border-radius: 6px;
	outline: none;
	transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sticker-info-target:hover {
	filter: brightness(1.05);
}

.sticker-info-target:focus-visible {
	box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.32);
}

.sticker-info-popup {
	--site-popup-z: 10000;
	--site-popup-width: 360px;
}

.sticker-info-card {
	--site-popup-width: 360px;
}

.sticker-info-body {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 12px;
	padding: 14px;
	align-items: center;
}

.sticker-info-preview {
	min-height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sticker-info-preview img {
	max-width: 96px;
	max-height: 96px;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.sticker-info-details {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sticker-info-pack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.sticker-info-label {
	display: block;
	font-size: 11px;
	color: var(--text-muted, #606770);
	text-transform: uppercase;
	line-height: 1.2;
}

.sticker-info-pack-name {
	display: block;
	font-size: 16px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.sticker-info-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sticker-info-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 7px;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
	font-size: 12px;
	color: var(--text-secondary, #4b4f56);
	min-height: 26px;
}

.sticker-info-chip i {
	font-size: 14px;
	color: var(--color-primary, #3b5998);
}

.sticker-info-footer {
	display: flex;
	justify-content: flex-end;
	padding: 10px 12px;
	background: var(--bg-container);
	border-top: 1px solid var(--border-primary);
}

.sticker-info-market-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--border-button, #29487d);
	background: var(--bg-button, linear-gradient(to bottom, #5b74a8, #3b5998));
	color: var(--text-button, #fff);
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-transform: lowercase;
}

.sticker-info-market-link:hover,
.sticker-info-market-link:focus-visible {
	background: var(--bg-button-hover, linear-gradient(to bottom, #6b84b8, #4b69a8));
	color: var(--text-button, #fff);
	text-decoration: none;
	outline: none;
}

@media (max-width: 420px) {
	.sticker-info-body {
		grid-template-columns: 1fr;
	}

	.sticker-info-preview {
		min-height: 120px;
	}
}

.message-text code.inline-code {
	background-color: rgba(0, 0, 0, 0.06);
	padding: 1px 4px;
	font-family: 'Consolas', 'Monaco', monospace;
	font-size: 0.9em;
}

.message-text del {
	text-decoration: line-through;
	opacity: 0.7;
}

.message-actions {
	display: none;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--bg-container);
	border: 1px solid var(--border-primary);
	box-shadow: var(--shadow-light);
	padding: 2px;
	z-index: 10;
}

.message-body:hover .message-actions {
	display: flex;
}

.own .message-body .message-actions {
	right: 100%;
	margin-right: 5px;
}

.message-body:not(.own) .message-actions {
	left: 100%;
	margin-left: 5px;
}

.message-actions button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-size: 14px;
	line-height: 1;
	color: var(--color-primary);
	width: 26px;
	height: 26px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.message-actions button i {
	line-height: 1;
}

.message-actions button:hover {
	background-color: var(--bg-message);
}

/* Extra action buttons hidden until more is toggled */
.message-actions .edit-btn,
.message-actions .pin-btn,
.message-actions .info-btn,
.message-actions .report-btn,
.message-actions .delete-btn {
	display: none;
}

/* more-active: swap — show extra, hide primary */
.message-actions.more-active .reply-btn,
.message-actions.more-active .forward-btn,
.message-actions.more-active .react-btn {
	display: none;
}

.message-actions.more-active .edit-btn,
.message-actions.more-active .pin-btn,
.message-actions.more-active .info-btn,
.message-actions.more-active .report-btn,
.message-actions.more-active .delete-btn {
	display: flex;
}

/* Keep actions bar visible while in more-active state */
.message-body:hover .message-actions.more-active,
.message-actions.more-active {
	display: flex !important;
}

/* Keep message-actions and react button active while quick-reaction-picker is open */
.message-actions.reaction-picker-open {
	display: flex !important;
}

.message-actions .danger {
	color: #e53e3e;
}

/* Separator between delete and the rest — visible when delete is shown (more-active) */
.message-actions .message-actions-sep {
	display: none;
	width: 0.5px;
	align-self: stretch;
	background-color: var(--border-primary);
	margin: 4px 4px;
}

.message-actions.more-active .message-actions-sep {
	display: block;
}

.site-popup-overlay {
	position: fixed;
	inset: var(--site-popup-anchor-top, 0px) 0 0;
	z-index: var(--site-popup-z, 10000);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 16px 16px;
	overflow-y: auto;
	background: transparent;
}

.site-popup-surface {
	box-sizing: border-box;
	background: var(--bg-container);
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	user-select: none;
}

.site-popup-surface :is(input, textarea, select, [contenteditable="true"]) {
	user-select: text;
}

.site-popup-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: var(--bg-sidebar-header, linear-gradient(to bottom, #5b74a8, #3b5998));
	border-bottom: 1px solid var(--border-sidebar-header, #29487d);
	color: var(--text-sidebar-header, #fff);
	user-select: none;
}

.site-popup-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-family: 'Over the Rainbow', cursive, sans-serif;
}

.site-popup-title {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
	text-transform: lowercase;
}

.site-popup-body {
	min-width: 0;
	min-height: 0;
	background: var(--bg-message);
}

.site-popup-dialog {
	width: min(var(--site-popup-width, 430px), 100%);
	max-height: calc(100dvh - 32px);
	display: flex;
	flex-direction: column;
}

.site-popup-modal {
	--site-popup-z: 10001;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 180ms, opacity 0s linear 180ms;
}

.site-popup-modal.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.site-popup-modal .site-popup-dialog {
	position: relative;
	width: 100%;
	max-height: calc(100dvh - var(--site-popup-anchor-top, 0px) - 16px);
	transform: translateY(calc(-100% - 1px));
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-popup-modal.active .site-popup-dialog {
	border-top: none;
	transform: translateY(0);
	animation: sitePopupSheetIn 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sitePopupSheetIn {
	from {
		transform: translateY(calc(-100% - 1px));
	}

	to {
		transform: translateY(0);
	}
}

/* ── Sheet parts for the larger modal sheets ──
   One dress for every sheet that needs more than a form: a pale hero with
   the title (a sprite icon beside it) and a line under it, small section
   headings, and a grey footer bar that stays at the bottom of the scrolling
   body. The changelog's compare dialog and the list filters dialog use it;
   pass bodyClass 'site-popup-scroll-body' to createSitePopupWindow. */
.site-popup-scroll-body {
	flex: 1 1 auto;
	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--bg-container);
}

.site-popup-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: linear-gradient(to bottom,
			var(--bg-container) 0%,
			color-mix(in srgb, var(--color-primary) 7%, var(--bg-container)) 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--bg-container));
}

.site-popup-hero-text {
	min-width: 0;
}

.site-popup-hero-title {
	display: flex;
	font-family: 'Over the Rainbow', regular;
	align-items: center;
	gap: 8px;
	margin: 0;
	border-bottom: none;
	font-size: 22px;
	font-weight: normal;
	line-height: 1.2;
	color: var(--text-primary);
	text-transform: lowercase;
}

.site-popup-hero-title i {
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.site-popup-hero-subtitle {
	margin: 5px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-muted);
}

/* A boxed picture on the hero's right. A sprite icon inside is shown at twice
   its size, pixel for pixel. */
.site-popup-hero-art {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.site-popup-hero-art i {
	display: inline-block;
	width: 18px;
	height: 18px;
	zoom: 2;
	image-rendering: pixelated;
}

.site-popup-section-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 20px;
	background: var(--bg-message);
	border-bottom: 1px solid var(--border-primary);
	font-size: 11px;
	font-weight: bold;
	color: var(--text-link);
	text-transform: lowercase;
}

.site-popup-section-title i {
	font-size: 13px;
	color: var(--text-muted);
}

/* Stays in reach at the foot of a long list. */
.site-popup-footer {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 20px;
	background: var(--surface-subtle);
	border-top: 1px solid var(--line-soft);
	font-size: 11px;
}

.site-popup-footer .btn {
	min-width: 86px;
}

@media (max-width: 430px) {
	.site-popup-footer .btn {
		min-width: 74px;
	}
}

.site-popup-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: bold;
	color: var(--text-link);
	text-decoration: none;
}

.site-popup-footer-link:hover,
.site-popup-footer-link:focus-visible {
	text-decoration: underline;
}

.site-popup-footer-note {
	color: var(--text-muted);
}

@media (max-width: 600px) {
	.site-popup-hero {
		padding: 14px;
	}

	.site-popup-hero-title {
		font-size: 18px;
	}

	.site-popup-hero-subtitle {
		font-size: 12px;
	}

	.site-popup-hero-art {
		display: none;
	}

	.site-popup-section-title,
	.site-popup-footer {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Forward dialog: one padded column of content with the composer docked to the
   bottom edge, the way the note modal docks its action row. */
.forward-message-overlay {
	--site-popup-width: 400px;
}

.forward-message-dialog {
	--site-popup-width: 400px;
	font: 11px/1.4 Arial, sans-serif;
}

.forward-message-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var(--bg-container);
	overflow-y: auto;
}

/* The forwarded message, drawn like a report's copy (reported-content.js),
   in the same frame (.reported-content-frame). */
.forward-message-preview {
	min-width: 0;
	flex: 0 0 auto;
	margin: 0;
}

.forward-message-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 3px 10px;
	margin: 2px 0 0;
	color: var(--text-secondary, #666);
	font: bold 10px/1.4 Arial, sans-serif;
}

.forward-message-hint {
	color: var(--text-muted);
	font-size: 10px;
	font-weight: normal;
}

/* One plain list inside an inset panel, not a grid of boxed cards. */
.forward-message-rooms {
	min-height: 0;
	max-height: min(210px, 38dvh);
	border: 1px solid var(--border-primary);
	background: var(--bg-input);
	overflow-y: auto;
}

.forward-message-room {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	min-height: 36px;
	box-sizing: border-box;
	padding: 6px 9px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
	background: none;
	color: var(--text-primary);
	text-align: left;
	cursor: pointer;
}

.forward-message-room:last-child { border-bottom: 0; }
.forward-message-room-icon { flex: 0 0 16px; color: var(--text-muted); font-size: 16px; text-align: center; }
.forward-message-room-copy { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 3px 8px; }
.forward-message-room-name { color: var(--text-link); font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forward-message-room-copy small { margin-left: auto; flex: 0 0 auto; color: var(--text-muted); font-size: 10px; }
.forward-message-room-copy small:empty { display: none; }
.forward-message-room:hover { background: color-mix(in srgb, var(--text-primary) 7%, var(--bg-input)); }

.forward-message-room.selected { background: var(--bg-message-own, #dfe3ee); }
.forward-message-room.selected::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--color-primary, #3b5998); }
.forward-message-room.selected .forward-message-room-icon { color: var(--color-primary, #3b5998); }
.forward-message-room:has(:focus-visible) { outline: 1px dotted var(--text-link); outline-offset: -2px; }

/* Same shape as the site comment row: one-line field with its counter and
   emoji tucked inside on the right, and the send button beside it. */
.forward-message-composer {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 9px 12px;
	background: linear-gradient(to bottom, var(--bg-container), var(--bg-message));
	border-top: 1px solid var(--border-primary);
}

.forward-message-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	min-height: 30px;
	background: var(--bg-input);
	border: 1px solid var(--border-primary);
}

.forward-message-input-wrap:focus-within {
	border-color: var(--border-input-focus, #4d69a1);
}

.forward-message-comment {
	display: block;
	width: 100%;
	min-height: 28px;
	max-height: 118px;
	box-sizing: border-box;
	resize: none;
	margin: 0;
	padding: 6px 62px 6px 9px;
	border: 0;
	background: transparent;
	color: var(--text-primary);
	font: inherit;
	font-size: 12px;
	line-height: 1.3;
	outline: none;
	overflow-y: auto;
}

.forward-message-counter {
	position: absolute;
	right: 30px;
	top: 0;
	display: flex;
	align-items: center;
	height: 28px;
	font-size: 9px;
	white-space: nowrap;
	pointer-events: none;
}

.forward-message-emoji {
	position: absolute;
	right: 3px;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 2px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--text-muted, #ccc);
	opacity: 0.75;
	font-size: 17px;
	cursor: pointer;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* The note modal reuses this button inside a taller textarea. */
.note-modal-text-row .forward-message-emoji {
	top: 3px;
	right: 4px;
	height: auto;
	padding: 4px;
}

.forward-message-emoji:hover,
.forward-message-emoji:focus-visible {
	color: var(--text-secondary, #666);
	opacity: 1;
	background: transparent;
	outline: none;
}

.forward-message-emoji.active {
	color: var(--color-primary, #3b5998);
	opacity: 1;
}

.forward-message-comment:disabled,
.forward-message-emoji:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@media (max-width: 430px) {
	.site-popup-modal {
		padding: 0 10px 10px;
	}

	.site-popup-dialog {
		max-height: calc(100vh - 20px);
	}

	.site-popup-modal .site-popup-dialog {
		max-height: calc(100dvh - var(--site-popup-anchor-top, 0px) - 10px);
	}

	.forward-message-body {
		padding: 10px;
	}

	.forward-message-rooms {
		max-height: min(210px, 34vh);
	}

	.forward-message-composer {
		padding: 8px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-popup-modal,
.site-popup-modal .site-popup-dialog {
		transition: none;
	}

	.site-popup-modal.active .site-popup-dialog {
		animation: none;
	}
}

.system-message.timestamp-divider {
	font-size: 10px;
	color: #b0b5bd;
	margin: 6px 0;
	font-style: normal;
	letter-spacing: 0.4px;
	text-transform: lowercase;
	opacity: 0.85;
}

.system-message.timestamp-divider .timestamp-divider-icon {
	font-size: 12px;
	margin-right: 2px;
	vertical-align: -2px;
	opacity: 0.85;
}

.system-message.timestamp-divider::before,
.system-message.timestamp-divider::after {
	max-width: 90px;
	background: linear-gradient(to var(--line-direction, right), rgba(180, 185, 195, 0.45), transparent);
}

.system-message a.navigate-user,
.system-message a.system-username-link {
	font-weight: 600;
	font-style: normal;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.system-message a.navigate-user:hover,
.system-message a.system-username-link:hover {
	text-decoration: underline;
	opacity: 0.85;
}

#pinned-message-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

#pinned-message-bar:hover {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
	border-color: rgba(255, 193, 7, 0.5);
}

#pinned-message-bar.hidden {
	display: none;
}

.pinned-message-icon {
	color: #ffc107;
	font-size: 16px;
	flex-shrink: 0;
}

.pinned-message-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pinned-message-label {
	user-select: none;
	font-size: 11px;
	color: #ff9800;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pinned-message-text {
	font-size: 13px;
	color: var(--color-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pinned-message-unpin {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 6px;
	color: var(--color-secondary);
	font-size: 14px;
	transition: background 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.pinned-message-unpin:hover {
	background: rgba(255, 0, 0, 0.1);
	color: #ff4136;
}

.pinned-message-unpin.hidden {
	display: none;
}

.message-actions .pin-btn:hover {
	background-color: var(--bg-message);
}

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

/* A flex box, so the gap really separates the emoji from its count. */
.reaction-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border: none;
	border-radius: 12px;
	background: var(--bg-message);
	cursor: pointer;
	font-size: 12px;
	line-height: 1.2;
	transition: background 0.15s ease, box-shadow 0.15s ease;
	position: relative;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.reaction-pill:hover {
	background: var(--bg-container);
	box-shadow: 0 0 0 1px var(--border-primary);
}

.reaction-pill.own {
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.reaction-pill.own:hover {
	background: color-mix(in srgb, var(--color-primary) 18%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Its box hugs the emoji image, so the pill centres the count on the emoji. */
.reaction-emoji {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 1;
}

.reaction-pill .reaction-emoji img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
}

.reaction-count {
	line-height: 1;
	font-size: 11px;
	color: var(--color-secondary);
	font-weight: 600;
	min-width: 6px;
	text-align: center;
}

.reaction-pill.own .reaction-count {
	color: var(--color-primary);
}

.reaction-pill.reaction-more {
	cursor: help;
	color: var(--color-secondary);
	font-weight: 600;
	overflow: visible;
}

.reaction-pill.reaction-more .reaction-emoji {
	font-size: 11px;
	font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
}

/* Reaction overflow tooltip: do NOT use Over the Rainbow */
.reaction-overflow-floating,
.reaction-overflow-floating .reaction-overflow-item {
	font-family: Tahoma, 'Segoe UI', Verdana, sans-serif !important;
}

.reaction-overflow-floating {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	background: var(--bg-sidebar);
	border: 1px solid var(--border-sidebar);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	padding: 6px 10px;
	display: flex;
	gap: 8px;
	white-space: nowrap;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	font-size: 12px;
}

.reaction-pill.reaction-more:hover .reaction-overflow-floating {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-5px);
}

.reaction-overflow-item {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--color-primary);
	font-weight: 500;
}

.reaction-overflow-floating .reaction-emoji img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
}

.own .message-reactions {
	padding-left: 0;
	padding-right: 42px;
	justify-content: flex-end;
}

.app-wrapper {
	display: flex;
	align-items: stretch;
	gap: 20px;
	width: 100%;
	justify-content: center;
}

textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--line-blue);
	font-size: 12px;
	font-family: 'Tahoma', 'Verdana', 'Helvetica Neue', Arial, sans-serif;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: border-color 0.2s ease;
	resize: vertical;
	min-height: 60px;
}

textarea:focus {
	outline: none;
	border-color: var(--border-input-focus);
}

.profile-likes-dislikes {
	grid-column: 1 / -1;
	text-align: left;
	line-height: 1.4;
}

.profile-likes-dislikes strong {
	color: var(--text-muted);
	font-weight: normal;
	display: block;
	margin-bottom: 2px;
}

.theme-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: var(--bg-header);
	color: var(--text-header);
	border-bottom: 1px solid var(--border-header);
}

.theme-page-title {
	font-size: 18px;
	font-weight: bold;
	color: var(--text-header);
	margin: 0;
	text-transform: lowercase;
}

.theme-page-actions {
	display: flex;
	gap: 10px;
}

#profile-form {
	padding: 15px;
}

.theme-page-content {
	padding: 15px;
}

.settings-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: var(--bg-header);
	color: var(--text-header);
	border-bottom: 1px solid var(--border-header);
}

.settings-page-title {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	color: var(--text-header);
}

.settings-page-actions {
	display: flex;
	gap: 10px;
}

.settings-page-content {
	padding: 15px;
	animation: contentFadeIn 0.5s ease-out;
}

.profile-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: var(--bg-header);
	color: var(--text-header);
	border-bottom: 1px solid var(--border-header);
}

.profile-page-title {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	color: var(--text-header);
}

.profile-page-actions {
	display: flex;
	gap: 10px;
}

.chat-settings-section,
.accessibility-settings-section {
	padding: 20px;
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
}

.accessibility-settings-section {
	margin-top: 20px;
}

.settings-section-title {
	font-size: 14px;
	font-weight: bold;
	color: var(--color-primary);
	margin: 0 0 15px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-primary);
}

.setting-item {
	margin-bottom: 15px;
	animation: settingItemFadeIn 0.4s ease-out forwards;
	opacity: 0;
}

.setting-item:nth-child(1) {
	animation-delay: 0.1s;
}

.setting-item:nth-child(2) {
	animation-delay: 0.2s;
}

@keyframes settingItemFadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.setting-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	color: var(--color-primary);
}

.setting-description {
	margin: 5px 0 0 24px;
	font-size: 11px;
	color: var(--color-secondary);
}

.theme-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

.theme-option {
	cursor: pointer;
	text-align: center;
	padding: 10px;
	border: 2px solid var(--line-soft);
	background-color: var(--bg-container);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	animation: themeOptionFadeIn 0.4s ease-out forwards;
	opacity: 0;
}

.theme-option.disabled {
	cursor: not-allowed;
	pointer-events: auto;
}

.theme-option.disabled:hover {
	border-color: #b0b0b0;
}

.theme-option.disabled .theme-preview,
.theme-option.disabled .theme-name {
	opacity: 0.5;
	filter: grayscale(100%);
}

@keyframes themeOptionFadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.theme-option:nth-child(1) {
	animation-delay: 0s;
}

.theme-option:nth-child(2) {
	animation-delay: 0.05s;
}

.theme-option:nth-child(3) {
	animation-delay: 0.1s;
}

.theme-option:nth-child(4) {
	animation-delay: 0.15s;
}

.theme-option:nth-child(5) {
	animation-delay: 0.2s;
}

.theme-option:nth-child(6) {
	animation-delay: 0.25s;
}

.theme-option:hover::before {
	opacity: 0.6;
	transform: scale(1) rotate(0deg);
}

.theme-option:hover {
	border-color: var(--border-input-focus);
	background-color: var(--surface-subtle);
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.theme-option.active {
	border-color: var(--border-input-focus);
	background-color: var(--surface-tint);
	box-shadow: 0 0 0 3px var(--border-input-focus);
	animation: themeSelected 0.6s ease;
	opacity: 1 !important;
}

@keyframes themeSelected {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05) rotate(2deg);
	}

	100% {
		transform: scale(1);
	}
}

.theme-preview {
	width: 100%;
	height: 80px;
	border: 1px solid #bdc7d8;
	margin-bottom: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.theme-preview-header {
	height: 30%;
	width: 100%;
}

.theme-preview-body {
	height: 70%;
	width: 100%;
	background-color: #fff;
}

.theme-preview[data-theme-preview="default"] .theme-preview-header {
	background: linear-gradient(to bottom, #4e69a2, #3b5998);
}

.theme-preview[data-theme-preview="custom"] .theme-preview-header {
	background: linear-gradient(90deg, #FFB3BA 0%, #FFCCCB 14%, #FFFFBA 28%, #BAFFC9 42%, #BAE1FF 56%, #E0BBE4 70%, #D5AAFF 100%);
}

.theme-preview[data-theme-preview="custom"] .theme-preview-body {
	background-color: #fff;
}

.theme-name {
	font-size: 12px;
	font-weight: bold;
	color: var(--text-secondary);
	user-select: none;
	text-transform: lowercase;
}

.custom-css-editor {
	margin-top: 20px;
	border: 1px solid var(--border-primary);
	animation: customCssEditorFadeIn 0.3s ease-out;
}

.custom-css-editor.hidden {
	display: none;
}

@keyframes customCssEditorFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.custom-css-title {
	font-size: 14px;
	font-weight: bold;
	color: var(--color-primary);
	margin: 0 0 8px 0;
}

.custom-css-description {
	font-size: 12px;
	color: var(--color-secondary);
}

.custom-css-textarea {
	width: 100%;
	min-height: 200px;
	max-height: 400px;
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.5;
	padding: 12px;
	border: 1px solid var(--border-primary);
	background: var(--bg-message);
	color: var(--color-primary);
	resize: vertical;
	tab-size: 2;
}

.custom-css-textarea:focus {
	outline: none;
	border-color: var(--border-input-focus);
}

.custom-css-validation {
	margin-top: 10px;
	padding: 8px 12px;
	font-size: 12px;
	min-height: 20px;
}

.custom-css-validation.valid {
	color: #28a745;
	background: rgba(40, 167, 69, 0.1);
	border: 1px solid rgba(40, 167, 69, 0.3);
}

.custom-css-validation.invalid {
	color: #dc3545;
	background: rgba(220, 53, 69, 0.1);
	border: 1px solid rgba(220, 53, 69, 0.3);
}

.custom-css-actions {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	justify-content: flex-end;
}

@media screen and (max-width: 768px) {
	.app-wrapper {
		flex-direction: column;
		align-items: center;
		max-width: 450px;
	}

	.theme-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.theme-page-header {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.theme-page-title {
		text-align: center;
	}

	.theme-page-actions {
		justify-content: center;
	}
}

#terms-page,
#privacy-page,
#about-page {
	overflow-y: auto;
}

.legal-page-content {
	padding: 20px !important;
}

.legal-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: var(--bg-header);
	color: var(--text-header);
	border-bottom: 1px solid var(--border-header);
}

.legal-page-title {
	font-size: 18px;
	font-weight: bold;
	color: var(--text-header);
	margin: 0;
	text-transform: lowercase;
}

.legal-page-actions {
	display: flex;
	gap: 10px;
}

.legal-page-content {
	padding: 0 10px;
	line-height: 1.6;
}

.legal-section {
	margin-bottom: 25px;
}

/* Who owns what a page shows when globe does not (the games, the blinkies):
   a small boxed note at the foot of the list, pointing at the terms. */
.copyright-note {
	margin: 18px 0 4px;
	padding: 10px 12px;
	border: 1px solid var(--line-soft);
	background: var(--surface-subtle);
	font-size: 10px;
	line-height: 1.5;
	color: var(--text-muted);
}

.legal-section h2 {
	font-size: 15px;
	font-weight: bold;
	color: var(--color-primary);
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--border-primary);
	padding-bottom: 5px;
}

/* The parts of a long section (terms, section 7). */
.legal-section h3 {
	margin: 14px 0 0;
	font-size: 12px;
	font-weight: bold;
	color: var(--text-primary);
}

.legal-section p {
	margin: 10px 0;
	color: var(--text-primary);
	font-size: 12px;
}

.legal-section ul {
	margin: 10px 0;
	padding-left: 25px;
	color: var(--text-primary);
	font-size: 12px;
}

.legal-section li {
	margin: 5px 0;
}

.legal-section strong {
	font-weight: bold;
	color: var(--text-secondary);
}

.legal-section em {
	color: var(--text-muted);
	font-size: 11px;
}

/* A block to copy (terms, section 6: the takedown notice template). */
.legal-section pre.legal-template {
	margin: 10px 0;
	padding: 10px 12px;
	background: var(--bg-message);
	border: 1px solid var(--border-primary);
	color: var(--text-primary);
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 11px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	user-select: text;
}

@media (max-width: 768px) {
	.legal-page-header {
		gap: 12px;
	}

	.legal-page-actions {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	.legal-page-content {
		padding: 0 5px;
	}
}

.welcome-header {
	text-align: center;
	margin-bottom: 25px;
	padding: 15px 20px;
	background: linear-gradient(135deg, #6d84b4 0%, #3b5998 50%, #5d7cb8 100%);
	position: relative;
	overflow: hidden;
	margin-top: -10px;
	margin-left: -15px;
	margin-right: -15px;
}

.glowing-text {
	color: #fff !important;
	font-size: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	font-weight: bold;
	letter-spacing: 2px;
	position: relative;
	z-index: 1;
	animation: textGlow 2s ease-in-out infinite, textEntrance 1.2s ease-out;
}

@keyframes textEntrance {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(20px);
		letter-spacing: 10px;
	}

	50% {
		opacity: 0.8;
		transform: scale(1.05) translateY(-5px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
		letter-spacing: 2px;
	}
}

@keyframes textGlow {

	0%,
	100% {
		text-shadow:
			0 0 10px rgba(255, 255, 255, 0.8),
			0 0 20px rgba(255, 255, 255, 0.6),
			0 0 30px rgba(109, 132, 180, 0.8),
			0 3px 5px rgba(0, 0, 0, 0.4);
	}

	50% {
		text-shadow:
			0 0 15px rgba(255, 255, 255, 1),
			0 0 30px rgba(255, 255, 255, 0.8),
			0 0 45px rgba(255, 200, 100, 0.9),
			0 3px 5px rgba(0, 0, 0, 0.4);
	}
}

.blinking-cursor {
	animation: blink 1s step-end infinite;
	font-weight: normal;
	opacity: 1;
}

@keyframes blink {

	0%,
	50% {
		opacity: 1;
	}

	50.01%,
	100% {
		opacity: 0;
	}
}

#typing-text {
	display: inline-block;
}

@keyframes textFloat {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes colorShift {

	0%,
	100% {
		text-shadow:
			0 0 10px rgba(255, 255, 255, 0.8),
			0 0 20px rgba(255, 255, 255, 0.6),
			0 0 30px rgba(109, 132, 180, 0.8),
			0 3px 5px rgba(0, 0, 0, 0.4);
	}

	50% {
		text-shadow:
			0 0 15px rgba(255, 255, 255, 1),
			0 0 30px rgba(255, 255, 255, 0.8),
			0 0 45px rgba(255, 200, 100, 0.9),
			0 3px 5px rgba(0, 0, 0, 0.4);
	}
}

.tagline {
	color: #d8dfea;
	font-size: 11px;
	font-style: italic;
	margin-top: 3px;
	position: relative;
	z-index: 1;
}

.stats-banner {
	display: flex;
	justify-content: space-around;
	margin: 20px 0;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.welcome-left-column .stats-banner {
	flex-direction: column;
	margin: 0;
}

.stat-bubble {
	flex: 1;
	background: linear-gradient(135deg, #f25ca2, #d31876);
	padding: 15px 10px;
	border: 2px solid #b01565;
	text-align: center;
	transition: all 0.3s ease;
	transform-origin: center;
}

.stat-bubble:nth-child(2) {
	background: linear-gradient(135deg, #5ba4f5, #3b88e8);
	border-color: #2970cc;
}

.stat-bubble:nth-child(3) {
	background: linear-gradient(135deg, #5dd879, #3cb454);
	border-color: #2f9642;
}

.stat-number {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 0 10px rgba(255, 255, 255, 0.3);
}

.stat-label {
	font-size: 10px;
	color: #fff;
	text-transform: uppercase;
	margin-top: 5px;
	font-weight: bold;
	letter-spacing: 0.8px;
}

.stat-bubble:hover {
	transform: scale(1.05) !important;
}

.features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 15px 0;
}

.feature-box {
	background: linear-gradient(to bottom, #fff5e6, #ffe4b3);
	padding: 12px;
	border: 1px solid #d9a744;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-box:nth-child(2) {
	background: linear-gradient(to bottom, #e6f2ff, #b3d9ff);
	border-color: #5a9fd4;
}

.feature-box:nth-child(3) {
	background: linear-gradient(to bottom, #ffe6f7, #ffb3e6);
	border-color: #d6499f;
}

.feature-box:nth-child(4) {
	background: linear-gradient(to bottom, #ffffcc, #ffff99);
	border-color: #cccc00;
}

.feature-box:hover {
	transform: translateY(-2px) rotate(1deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.feature-icon {
	font-size: 32px;
	display: block;
	margin-bottom: 5px;
	animation: bounce 2s ease-in-out infinite;
}

.feature-box:nth-child(2) .feature-icon {
	animation-delay: 0.2s;
}

.feature-box:nth-child(3) .feature-icon {
	animation-delay: 0.4s;
}

.feature-box:nth-child(4) .feature-icon {
	animation-delay: 0.6s;
}

@keyframes bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

.feature-text {
	font-size: 11px;
	font-weight: bold;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.promo-section {
	margin: 20px 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	border: 2px solid #3b5998;
	z-index: 1;
	position: relative;
}

.welcome-right-column .promo-section {
	margin: 0;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-5px);
	}
}

.promo-text {
	background: linear-gradient(90deg, #6d84b4, #5a72a8, #6d84b4);
	background-size: 200% auto;
	padding: 10px;
	margin-top: 0;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
	animation: gradientSlide 3s linear infinite;
}

@keyframes gradientSlide {
	0% {
		background-position: 0% center;
	}

	100% {
		background-position: 200% center;
	}
}

.promo-text marquee {
	font-size: 13px;
	text-align: center;
}

.badges-section {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 20px 0;
	z-index: 1;
	position: relative;
}

.welcome-left-column .badges-section {
	margin: 0;
}

.badge {
	display: inline-block;
	padding: 5px 12px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	border: 2px solid;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.2),
		0 0 10px rgba(255, 255, 255, 0.1);
	animation: wiggle 2s ease-in-out infinite, pulse 2s ease-in-out infinite;
	cursor: pointer;
	transition: all 0.3s ease;
}

.badge:hover {
	transform: scale(1.15) rotate(0deg) !important;
	animation: none;
}

.badge:nth-child(2) {
	animation-delay: 0.3s;
}

.badge:nth-child(3) {
	animation-delay: 0.6s;
}

.badge:nth-child(4) {
	animation-delay: 0.9s;
}

@keyframes wiggle {

	0%,
	100% {
		transform: rotate(-3deg) scale(1);
	}

	25% {
		transform: rotate(3deg) scale(1.02);
	}

	50% {
		transform: rotate(-2deg) scale(1);
	}

	75% {
		transform: rotate(2deg) scale(1.02);
	}
}

@keyframes pulse {

	0%,
	100% {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.1);
	}

	50% {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
	}
}

.badge-new {
	background: linear-gradient(to bottom, #ff69b4, #ff1493);
	border-color: #d10072;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.badge-hot {
	background: linear-gradient(to bottom, #ff6347, #ff4500);
	border-color: #cc3700;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.badge-cool {
	background: linear-gradient(to bottom, #00bfff, #1e90ff);
	border-color: #0066cc;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.badge-free {
	background: linear-gradient(to bottom, #90ee90, #32cd32);
	border-color: #228b22;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.cta-section {
	text-align: center;
	margin-top: 20px;
	padding: 20px;
	background: linear-gradient(135deg, rgba(59, 89, 152, 0.05), rgba(109, 132, 180, 0.1));
	border: 2px dashed #6d84b4;
	position: relative;
	z-index: 1;
}

@keyframes wave {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(20deg);
	}

	75% {
		transform: rotate(-10deg);
	}
}

@keyframes rocket {

	0%,
	100% {
		transform: translateY(0) rotate(-45deg);
	}

	50% {
		transform: translateY(-10px) rotate(-35deg);
	}
}

.wobbly-text span {
	display: inline-block;
	animation: wobble 1.5s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.1s);
}

#profile-now-playing-container {
	animation: none !important;
	transform: none !important;
}

.profile-now-playing {
	display: flex;
	border: 1px solid var(--line-soft);
	padding: 10px;
	margin-bottom: 12px;
	position: relative;
	box-shadow: inset 0 1px 0 #fff;
}

@keyframes wobble {

	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}

	20% {
		transform: translateY(-3px) rotate(-8deg);
	}

	40% {
		transform: translateY(3px) rotate(8deg);
	}

	60% {
		transform: translateY(-2px) rotate(-5deg);
	}

	80% {
		transform: translateY(2px) rotate(5deg);
	}
}

.subtext {
	margin-top: 12px;
	font-size: 13px;
	color: #3b5998;
	font-weight: bold;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

@keyframes textBounce {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

.disclaimer {
	font-size: 10px;
	color: #999;
	font-style: italic;
	margin-top: 6px;
}

#auth-choice-container {
	position: relative;
	overflow: visible;
	margin: 0 auto;
}

@keyframes fadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.welcome-two-column {
	display: flex;
	gap: 25px;
	margin-top: 20px;
	position: relative;
	z-index: 1;
}

.welcome-left-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.welcome-right-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 768px) {
	.welcome-two-column {
		flex-direction: column;
	}

	.welcome-right-column {
		display: none;
	}

	body:has(#auth-choice-container:not([style*="display: none"])) .container {
		max-width: 600px;
	}
}

#auth-choice-container::before {
	content: '🌍';
	position: absolute;
	font-size: 150px;
	opacity: 0.05;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(15deg);
	pointer-events: none;
	z-index: 0;
}

@keyframes rotateGlobe {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.floating-decorations {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.float-emoji {
	position: absolute;
	font-size: 20px;
	opacity: 0.5;
	left: var(--x);
	top: var(--y);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes floatAround {

	0%,
	100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	25% {
		transform: translate(15px, -15px) rotate(10deg) scale(1.1);
	}

	50% {
		transform: translate(0, -25px) rotate(-10deg) scale(0.9);
	}

	75% {
		transform: translate(-15px, -15px) rotate(5deg) scale(1.05);
	}
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10px);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(10px);
	}
}

.shake {
	animation: shake 0.5s ease-in-out;
}

.receipt-container {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

.receipt-paper {
	background: var(--surface-subtle);
	padding: 30px 25px;
	position: relative;
	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.1),
		0 10px 30px rgba(0, 0, 0, 0.15),
		inset 0 0 50px rgba(0, 0, 0, 0.02);
	font-family: 'Courier New', Courier, monospace;
}

.receipt-paper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		repeating-linear-gradient(0deg,
			transparent,
			transparent 29px,
			rgba(0, 0, 0, 0.02) 29px,
			rgba(0, 0, 0, 0.02) 30px);
	pointer-events: none;
}

.receipt-torn-edge {
	position: absolute;
	left: 0;
	right: 0;
	height: 20px;
	background: var(--surface-subtle);
}

.receipt-torn-edge.top {
	top: -10px;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,20 Q5,10 10,20 T20,20 T30,20 T40,20 T50,20 T60,20 T70,20 T80,20 T90,20 T100,20 L100,0 L0,0 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,20 Q5,10 10,20 T20,20 T30,20 T40,20 T50,20 T60,20 T70,20 T80,20 T90,20 T100,20 L100,0 L0,0 Z' fill='black'/%3E%3C/svg%3E");
	mask-size: 30px 20px;
	-webkit-mask-size: 30px 20px;
}

.receipt-torn-edge.bottom {
	bottom: -10px;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,0 Q5,10 10,0 T20,0 T30,0 T40,0 T50,0 T60,0 T70,0 T80,0 T90,0 T100,0 L100,20 L0,20 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,0 Q5,10 10,0 T20,0 T30,0 T40,0 T50,0 T60,0 T70,0 T80,0 T90,0 T100,0 L100,20 L0,20 Z' fill='black'/%3E%3C/svg%3E");
	mask-size: 30px 20px;
	-webkit-mask-size: 30px 20px;
}

.receipt-header {
	text-align: center;
	margin-bottom: 15px;
}

.receipt-logo {
	font-size: 28px;
	font-weight: bold;
	color: #1a1a1a;
	letter-spacing: 4px;
	margin-bottom: 5px;
}

.receipt-address {
	font-size: 11px;
	color: #555;
	line-height: 1.6;
}

.powered-by-logo {
	height: 1.2em;
	vertical-align: middle;
	margin-left: 3px;
	filter: invert();
}

.receipt-divider {
	text-align: center;
	color: #888;
	font-size: 10px;
	letter-spacing: 2px;
	margin: 15px 0;
	overflow: hidden;
}

.receipt-title {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #1a1a1a;
	letter-spacing: 3px;
}

.receipt-items {
	margin: 20px 0;
}

.receipt-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px dotted var(--line-medium);
	font-size: 13px;
	color: var(--text-secondary);
}

.receipt-item:last-child {
	border-bottom: none;
}

.item-desc {
	flex: 1;
}

.item-price {
	font-weight: bold;
	text-align: right;
	min-width: 60px;
}

.receipt-total {
	background: var(--surface-sunken);
	padding: 10px;
	margin: 10px -10px;
}

.receipt-total .receipt-item.total {
	font-size: 18px;
	font-weight: bold;
	color: #1a1a1a;
	border-bottom: 2px solid #333;
	padding-bottom: 10px;
	margin-bottom: 8px;
}

.receipt-total .receipt-item.total .item-price {
	font-size: 20px;
}

.receipt-footer-info {
	text-align: center;
	margin: 15px 0;
}

.receipt-footer-info p {
	font-size: 11px;
	color: #666;
	margin: 0;
}

.receipt-thanks {
	text-align: center;
	line-height: 1;
	min-height: 32px;
	font-weight: bold;
	color: #1a1a1a;
	margin: 20px 0 15px;
	letter-spacing: 2px;
}

.receipt-barcode {
	text-align: center;
	margin-top: 15px;
}

.barcode-lines {
	height: 50px;
	background: repeating-linear-gradient(90deg,
			#1a1a1a 0px,
			#1a1a1a 2px,
			transparent 2px,
			transparent 4px,
			#1a1a1a 4px,
			#1a1a1a 5px,
			transparent 5px,
			transparent 8px,
			#1a1a1a 8px,
			#1a1a1a 9px,
			transparent 9px,
			transparent 11px,
			#1a1a1a 11px,
			#1a1a1a 14px,
			transparent 14px,
			transparent 16px,
			#1a1a1a 16px,
			#1a1a1a 17px,
			transparent 17px,
			transparent 20px);
	margin: 0 auto;
	max-width: 200px;
}

.barcode-text {
	display: block;
	font-size: 10px;
	color: var(--text-secondary);
	margin-top: 5px;
	letter-spacing: 3px;
}

.receipt-form-group {
	margin: 15px 0;
}

.receipt-label {
	display: block;
	font-size: 11px;
	color: #666;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.receipt-input {
	width: 100%;
	padding: 12px;
	border: 1px dashed var(--line-strong);
	background: var(--bg-input);
	font-family: 'Courier New', Courier, monospace;
	font-size: 14px;
	color: var(--text-secondary);
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.receipt-input:focus {
	outline: none;
	border-color: #333;
	border-style: solid;
	background: #fefefe;
}

.receipt-input::placeholder {
	color: #aaa;
	font-style: italic;
}

.receipt-links {
	text-align: center;
	margin: 15px 0;
}

.receipt-link {
	display: inline-block;
	font-family: 'Courier New', Courier, monospace;
	font-size: 12px;
	color: #666;
	cursor: pointer;
	padding: 5px 10px;
	margin: 0 5px;
	border-bottom: 1px dotted #999;
	transition: all 0.2s ease;
}

.receipt-link:hover {
	color: var(--text-secondary);
	border-bottom-color: #333;
}

.receipt-notice {
	text-align: center;
	padding: 15px;
	background: var(--surface-subtle);
	margin: 10px 0;
	font-size: 12px;
	line-height: 1.6;
}

.receipt-notice p {
	margin: 5px 0;
}

.receipt-code-display {
	text-align: center;
	padding: 20px;
	background: var(--bg-container);
	border: 2px dashed #333;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 3px;
	margin: 15px 0;
	word-break: break-all;
}

.receipt-warning {
	text-align: center;
	font-size: 12px;
	color: #c0392b;
	font-weight: bold;
	margin: 10px 0;
}

.receipt-info {
	text-align: center;
	font-size: 11px;
	color: #666;
	margin: 10px 0 20px;
	line-height: 1.5;
}

.receipt-barcode.small {
	margin-top: 10px;
}

.receipt-barcode.small .barcode-lines {
	height: 35px;
	max-width: 150px;
}

.receipt-barcode.small .barcode-text {
	font-size: 9px;
}

#auth-page {
	background-color: var(--bg-container);
}

body[data-active-view="auth-page"] .alert {
	font-family: 'Courier New', Courier, monospace;
	border: none;
	border: 1px dashed;
	text-align: center;
	font-size: 12px;
}

body[data-active-view="auth-page"] .alert.error {
	border-color: #c0392b;
	background: #fdf2f2;
	color: #c0392b;
}

body[data-active-view="auth-page"] .alert.success {
	border-color: #27ae60;
	background: #f2fdf5;
	color: #27ae60;
}

@media (max-width: 420px) {
	.receipt-container {
		max-width: 100%;
	}

	.receipt-paper {
		padding: 25px 15px;
	}

	.receipt-logo {
		font-size: 22px;
		letter-spacing: 2px;
	}

	.receipt-item {
		font-size: 12px;
	}
}

#auth-choice-container::before {
	display: none;
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10px);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(10px);
	}
}

.shake {
	animation: shake 0.5s ease-in-out;
}

#logout-nav-link {
	margin-right: 0 !important;
}

@media (max-width: 480px) {
	.header {
		padding: 10px 8px;
	}

	#header-content {
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center !important;
	}

	#user-stats {
		font-size: 10px;
		flex: 0 0 100%;
		text-align: center;
		margin-bottom: 5px;
	}

	#header-links {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		justify-content: center !important;
		flex: 0 1 100%;
		width: 100%;
	}

	#online-users-pfp {
		padding-left: 0;
		margin-left: 0;
		flex: 0 0 100%;
		justify-content: center;
		margin-top: 5px;
	}

	.header-pfp {
		display: none;
	}
}

@media (max-width: 600px) and (min-width: 481px) {
	#header-links {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
}

#admin-page {
	width: 100%;
	max-width: 100%;
}

#admin-page .legal-page-content {
	max-width: 100%;
	margin: 0 auto;
	width: 100%;
	padding: 15px 20px;
}

.admin-section {
	margin-bottom: 30px;
	padding: 20px;
	background: var(--bg-primary);
	border: 1px solid var(--border-primary);
	width: 100%;
	box-sizing: border-box;
	animation: adminSectionSlideIn 0.5s ease-out forwards;
	opacity: 0;
}

@keyframes adminSectionSlideIn {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.admin-section:nth-child(1) {
	animation-delay: 0s;
}

.admin-section:nth-child(2) {
	animation-delay: 0.1s;
}

.admin-section:nth-child(3) {
	animation-delay: 0.2s;
}

.admin-section:nth-child(4) {
	animation-delay: 0.3s;
}

.admin-section h2 {
	font-size: 16px;
	font-weight: bold;
	margin-top: 0;
	color: var(--text-primary);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--border-primary);
}

.admin-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
}

.admin-stat-card {
	background: var(--bg-secondary);
	padding: 15px;
	text-align: center;
	border: 1px solid var(--border-primary);
	animation: statCardPopIn 0.4s ease-out forwards;
	opacity: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@keyframes statCardPopIn {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.admin-stat-card:nth-child(1) {
	animation-delay: 0s;
}

.admin-stat-card:nth-child(2) {
	animation-delay: 0.05s;
}

.admin-stat-card:nth-child(3) {
	animation-delay: 0.1s;
}

.admin-stat-card:nth-child(4) {
	animation-delay: 0.15s;
}

.admin-stat-card:nth-child(5) {
	animation-delay: 0.2s;
}

.admin-stat-number {
	font-size: 24px;
	font-weight: bold;
	color: var(--color-primary);
	margin-bottom: 5px;
}

.admin-stat-label {
	font-size: 11px;
	color: var(--text-secondary);
	text-transform: uppercase;
}

.admin-stat-card:nth-child(6) {
	animation-delay: 0.25s;
}

.admin-stat-card:nth-child(7) {
	animation-delay: 0.3s;
}

.admin-stat-card:nth-child(8) {
	animation-delay: 0.35s;
}

.admin-stat-card:nth-child(9) {
	animation-delay: 0.4s;
}

.admin-stats-section {
	margin-top: 30px;
	padding: 20px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
}

.admin-stats-section h3 {
	margin: 0 0 15px 0;
	font-size: 14px;
	color: var(--text-primary);
	text-transform: lowercase;
}

.admin-top-users-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.admin-top-user-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	transition: background 0.2s ease;
}

.admin-top-user-item:hover {
	background: var(--bg-hover);
}

.admin-rank {
	font-weight: bold;
	font-size: 12px;
	color: var(--text-secondary);
	min-width: 32px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.admin-top-user-pfp {
	width: 32px;
	height: 32px;
	object-fit: cover;
}

.admin-top-user-name {
	font-weight: bold;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.admin-top-user-count {
	margin-left: auto;
	font-size: 11px;
	color: var(--text-secondary);
}

/* ── members by country ──
   The discovery map's distribution, as a ranked list. Same flag source the
   discovery country list uses. */
.admin-country-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
}

.admin-country-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
}

.admin-country-flag {
	width: 20px;
	height: 15px;
	object-fit: cover;
	border: 1px solid var(--line-soft);
	flex-shrink: 0;
	background: var(--surface-subtle);
}

.admin-country-name {
	font-size: 12px;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 0 1 auto;
}

.admin-country-bar {
	display: block;
	flex: 1 1 60px;
	min-width: 40px;
	height: 4px;
	margin-left: auto;
	background: var(--line-soft);
}

.admin-country-bar > span {
	display: block;
	height: 100%;
	background: var(--color-primary);
}

.admin-country-count {
	font-size: 11px;
	font-weight: bold;
	color: var(--text-secondary);
	min-width: 32px;
	text-align: right;
	flex-shrink: 0;
}

.admin-posts-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.admin-post-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 15px;
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.admin-post-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.admin-post-user-pfp {
	width: 40px;
	height: 40px;
	object-fit: cover;
	flex-shrink: 0;
}

.admin-post-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.admin-post-author {
	font-weight: bold;
	font-size: 13px;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.admin-post-text {
	font-size: 12px;
	color: var(--text-primary);
	margin: 0;
	line-height: 1.5;
	word-break: break-word;
}

.admin-post-stats {
	font-size: 11px;
	color: var(--text-secondary);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.admin-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
	gap: 10px;
}

.admin-section-header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
	color: var(--text-primary);
}

/* The small view link at the end of an admin list row. */
.admin-action-btn {
	margin-left: 8px;
	flex-shrink: 0;
}

.admin-section-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

/* The buttons sheet (docs/buttons.md): each kind in a row, on the surface it
   is made for. Only the stages are drawn here; the buttons are buttons.css. */
.admin-buttons-row {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--line-soft);
}

.admin-buttons-name {
	font-size: 12px;
	font-weight: bold;
	color: var(--text-secondary);
}

.admin-buttons-name code {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: normal;
	color: var(--text-muted);
	white-space: normal;
}

.admin-buttons-demo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.admin-buttons-bar {
	flex: 1 1 100%;
	gap: 6px;
}

.admin-buttons-meta {
	gap: 4px;
	font-size: 11px;
	color: var(--text-muted);
}

.admin-buttons-photo {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 6px;
	width: 180px;
	height: 70px;
	padding: 8px;
	box-sizing: border-box;
	background: var(--bg-header);
}

.admin-buttons-thumb {
	position: relative;
	width: 72px;
	height: 72px;
	border: 1px solid var(--border-primary);
	background: var(--surface-sunken);
}

.admin-buttons-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid var(--border-primary);
	font-size: 12px;
}

.admin-buttons-strip {
	display: flex;
	align-items: stretch;
	min-height: 28px;
	border: 1px solid var(--border-primary);
	background: linear-gradient(to bottom, var(--bg-container), var(--bg-message));
}

@media (max-width: 600px) {
	.admin-buttons-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* The guides and help Markdown editor (admin-guides.component.js). */
.admin-guide-editor {
	margin-bottom: 15px;
}

#admin-guide-select {
	flex: 1 1 220px;
}

#admin-guide-meta {
	align-self: center;
	margin: 0;
}

/* The admin panel's catalogs: a form above a list of items, each with its
   picture, name, details and actions. Blinkies, games and the bulletin board
   (admin-blinkies, admin-games, admin-bulletin components). */
.admin-catalog [hidden] {
	display: none !important;
}

.admin-catalog-picture {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.admin-catalog-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
}

.admin-catalog-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 8px;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
}

.admin-catalog-item.is-editing {
	border-color: var(--color-primary);
}

.admin-catalog-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 11px;
}

.admin-catalog-info strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-primary);
}

.admin-catalog-info span {
	color: var(--text-muted);
}

.admin-catalog-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* The visual tests' empty states, side by side (admin-visual-tests.component.js). */
.admin-visual-empty .global-no-results {
	flex: 1 1 180px;
	margin: 0;
}

/* The sample sheet's own text and buttons, padded like a real dialog's. */
.admin-visual-sheet-text {
	margin: 0;
	padding: 12px 20px;
}

/* A catalog item's picture when it is not a blinkie: a game's cover. */
.admin-catalog-thumb {
	flex: none;
	width: 72px;
	height: 54px;
	object-fit: cover;
	border: 1px solid var(--border-primary);
	background: var(--surface-sunken);
}

.admin-catalog-item.is-hidden .admin-catalog-thumb,
.admin-catalog-item.is-hidden .admin-catalog-info {
	opacity: 0.55;
}

.admin-catalog-order {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* The games form's checkbox and radio rows (the browser's own controls). */
.admin-game-label {
	font-weight: bold;
}

.admin-game-checks,
.admin-game-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}

.admin-announcement-form .admin-game-check {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: normal;
}

.admin-announcement-form .admin-game-check input {
	padding: 0;
}

.admin-game-file input[type="file"],
.admin-game-file select {
	flex: 1 1 100%;
}

/* The attachments explorer (admin-media.component.js, docs/media.md): a
   framed panel with the folder tree (the sidebars' nav items) beside the
   files, as icons or a details list. */
.admin-media [hidden] {
	display: none !important;
}

/* The storage dashboard above the explorer: headline numbers and charts.
   Single-series marks are the site blue; the scan's split uses blue (used),
   red (unused) and amber (not scanned), always beside a legend with values. */
.admin-media-dashboard {
	--media-used: var(--color-primary);
	--media-unused: #d64545;
	--media-unscanned: #c8901e;
	margin-bottom: 14px;
}

.admin-media-dashboard-note {
	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
	font-size: 10px;
	color: var(--text-header);
	opacity: 0.85;
}

.admin-media-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-bottom: 1px solid var(--border-primary);
}

.admin-media-tile-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px 14px;
	border-right: 1px solid var(--line-soft);
}

.admin-media-tile-stat:last-child {
	border-right: none;
}

.admin-media-stat-label,
.admin-media-stat-note {
	font-size: 10px;
	color: var(--text-muted);
}

.admin-media-stat-value {
	font-size: 20px;
	line-height: 1.2;
	color: var(--text-primary);
}

.admin-media-charts {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.admin-media-chart {
	min-width: 0;
	padding: 10px 14px 12px;
	border-right: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}

.admin-media-chart:nth-child(2n),
.admin-media-chart.is-wide {
	border-right: none;
}

.admin-media-chart.is-wide {
	grid-column: 1 / -1;
	border-bottom: none;
}

.admin-media-chart-title {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: bold;
	color: var(--text-secondary);
	text-transform: lowercase;
}

.admin-media-chart-title:not(:first-child) {
	margin-top: 12px;
}

.admin-media-chart-caption {
	margin: 4px 0 0;
	font-size: 10px;
	color: var(--text-muted);
}

.admin-media-chart-caption strong {
	color: var(--text-primary);
}

.admin-media-meter,
.admin-media-split {
	position: relative;
	display: flex;
	gap: 2px;
	height: 14px;
	background: var(--surface-sunken);
	border: 1px solid var(--border-primary);
}

.admin-media-meter-fill {
	background: var(--media-used);
}

.admin-media-meter-fill.is-full {
	background: var(--media-unused);
}

.admin-media-split {
	background: var(--bg-container);
}

.admin-media-split-part {
	flex-basis: 0;
	min-width: 3px;
}

.admin-media-split-part.is-used,
.admin-media-swatch.is-used {
	background: var(--media-used);
}

.admin-media-split-part.is-unused,
.admin-media-swatch.is-unused {
	background: var(--media-unused);
}

.admin-media-split-part.is-unscanned,
.admin-media-swatch.is-unscanned {
	background: var(--media-unscanned);
}

.admin-media-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	color: var(--text-secondary);
}

.admin-media-legend li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.admin-media-swatch {
	width: 10px;
	height: 10px;
}

.admin-media-legend-value {
	color: var(--text-muted);
}

.admin-media-bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.admin-media-bar-row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) 62px;
	align-items: center;
	gap: 8px;
	font-size: 11px;
}

.admin-media-bar-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-secondary);
}

.admin-media-bar-track {
	height: 10px;
	background: var(--surface-sunken);
}

.admin-media-bar {
	display: block;
	height: 100%;
	min-width: 1px;
	background: var(--media-used);
}

.admin-media-bar-row:hover .admin-media-bar,
.admin-media-column-slot:hover .admin-media-column {
	background: var(--color-primary-dark);
}

.admin-media-bar-value {
	text-align: right;
	color: var(--text-muted);
}

.admin-media-columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2px;
	height: 110px;
	border-bottom: 1px solid var(--border-primary);
}

.admin-media-column-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	padding-bottom: 14px;
	cursor: default;
}

.admin-media-column {
	display: block;
	background: var(--media-used);
}

.admin-media-column-label {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	font-size: 9px;
	text-align: center;
	color: var(--text-muted);
}

@media (max-width: 768px) {
	.admin-media-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.admin-media-tile-stat:nth-child(2n) {
		border-right: none;
	}

	.admin-media-charts {
		grid-template-columns: 1fr;
	}

	.admin-media-chart {
		border-right: none;
	}

	.admin-media-bar-row {
		grid-template-columns: 90px minmax(0, 1fr) 56px;
	}
}

.admin-media-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border-primary);
}

.admin-media-search {
	flex: 1 1 220px;
}

.admin-media-selection {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--text-secondary);
}

.admin-media-body {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	min-height: 360px;
}

.admin-media-tree {
	max-height: 640px;
	border-right: 1px solid var(--border-primary);
	background: var(--bg-primary);
}

.admin-media-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.admin-media-files {
	flex: 1;
	max-height: 640px;
	padding: 10px;
	overflow-y: auto;
}

.admin-media-files[data-view="grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	align-content: start;
	gap: 8px;
}

.admin-media-files > .global-no-results {
	grid-column: 1 / -1;
}

.admin-media-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 6px;
	border: 1px solid var(--border-primary);
	background: var(--bg-message);
	font-size: 10px;
	cursor: pointer;
	user-select: none;
}

.admin-media-tile:hover,
.admin-media-row:not(.is-head):hover {
	border-color: var(--color-primary-light);
}

.admin-media-tile.is-selected,
.admin-media-row.is-selected {
	border-color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-message));
}

.admin-media-thumb,
.admin-media-row-thumb,
.admin-media-dialog .site-popup-hero-art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--surface-sunken);
}

.admin-media-thumb {
	aspect-ratio: 1;
}

.admin-media-thumb img,
.admin-media-thumb video,
.admin-media-row-thumb img,
.admin-media-row-thumb video,
.admin-media-dialog .site-popup-hero-art img,
.admin-media-dialog .site-popup-hero-art video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.admin-media-thumb > i,
.admin-media-row-thumb > i {
	font-size: 28px;
	color: var(--text-muted);
}

.admin-media-row-thumb .attachment-video-mark {
	width: 16px;
	height: 16px;
	font-size: 9px;
}

.admin-media-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
	color: var(--text-primary);
}

.admin-media-meta {
	color: var(--text-muted);
}

.admin-media-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.admin-media-badge {
	padding: 0 4px;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
	color: var(--text-secondary);
	font-size: 9px;
	font-weight: bold;
}

.admin-media-badge.is-unused,
.admin-media-row .is-unused {
	border-color: #e3b3b3;
	color: #b03a2e;
}

/* The tile's checkbox and "more" button show on hover, focus or selection. */
.admin-media-tile .admin-media-check,
.admin-media-tile .admin-media-more {
	position: absolute;
	top: 9px;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.admin-media-tile .admin-media-check {
	left: 9px;
	margin: 0;
}

.admin-media-tile .admin-media-more {
	right: 9px;
}

.admin-media-tile:hover .admin-media-check,
.admin-media-tile:hover .admin-media-more,
.admin-media-tile:focus-within .admin-media-check,
.admin-media-tile:focus-within .admin-media-more,
.admin-media-tile.is-selected .admin-media-check {
	opacity: 1;
}

.admin-media-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
	color: var(--text-secondary);
	cursor: pointer;
}

.admin-media-more:hover {
	color: var(--color-primary);
}

.admin-media-files[data-view="list"] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0;
}

.admin-media-row {
	display: grid;
	grid-template-columns: 18px 32px minmax(120px, 2fr) minmax(70px, 1fr) 64px minmax(70px, 1fr) 70px 120px 22px;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border: 1px solid transparent;
	border-bottom-color: var(--line-soft);
	font-size: 11px;
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
}

.admin-media-row > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.admin-media-row.is-head {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--bg-message);
	font-weight: bold;
	color: var(--text-muted);
	cursor: default;
}

.admin-media-row-thumb {
	width: 32px;
	height: 32px;
}

.admin-media-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 12px;
	border-top: 1px solid var(--border-primary);
	font-size: 11px;
	color: var(--text-muted);
}

.admin-media-dialog {
	--site-popup-width: 680px;
}

.admin-media-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	padding: 14px 20px;
}

.admin-media-preview {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
}

.admin-media-preview-open {
	display: block;
	padding: 0;
	border: 1px solid var(--border-primary);
	background: var(--surface-sunken);
	cursor: zoom-in;
}

.admin-media-preview-open img {
	display: block;
	max-width: 100%;
	max-height: 320px;
	object-fit: contain;
}

.admin-media-preview .video-player {
	width: 100%;
	max-height: 320px;
}

.admin-media-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 10px;
	margin: 0;
	font-size: 11px;
}

.admin-media-facts dt {
	font-weight: bold;
	color: var(--text-muted);
}

.admin-media-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--text-primary);
}

.admin-media-facts code {
	font-size: 10px;
}

.admin-media-references {
	padding: 10px 20px 14px;
	font-size: 11px;
}

.admin-media-reference-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.admin-media-reference-where {
	margin-left: 6px;
	color: var(--text-muted);
	font-size: 10px;
}

@media (max-width: 768px) {
	.admin-media-body {
		grid-template-columns: 1fr;
	}

	.admin-media-tree {
		max-height: 220px;
		border-right: none;
		border-bottom: 1px solid var(--border-primary);
	}

	.admin-media-files[data-view="grid"] {
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	}

	.admin-media-row {
		grid-template-columns: 18px 32px minmax(0, 1fr) 64px 22px;
	}

	.admin-media-row > span:nth-of-type(n + 4):not(:nth-of-type(5)) {
		display: none;
	}

	.admin-media-details {
		grid-template-columns: 1fr;
	}

	.admin-media-tile .admin-media-check,
	.admin-media-tile .admin-media-more {
		opacity: 1;
	}
}

.admin-users-container,
.admin-reports-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.admin-loading,
.admin-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-secondary);
	font-size: 12px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
}

.admin-user-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	transition: all 0.2s ease;
	animation: cardSlideIn 0.3s ease-out;
}

@keyframes cardSlideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.admin-user-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border-primary);
	flex-wrap: wrap;
	gap: 12px;
}

.admin-user-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 150px;
}

.admin-user-pfp {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border: 1px solid var(--border-primary);
	flex-shrink: 0;
}

.admin-user-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.admin-user-name {
	font-weight: bold;
	font-size: 13px;
	color: var(--text-primary);
	word-break: break-all;
	white-space: normal;
}

.admin-user-id {
	font-size: 10px;
	color: var(--text-secondary);
}

.admin-user-stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

.admin-user-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.admin-user-stat-label {
	font-size: 9px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.admin-user-stat-value {
	font-size: 12px;
	font-weight: bold;
	text-transform: lowercase;
	color: var(--color-primary);
}

.admin-user-card-body {
	padding: 15px;
}

.admin-role-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.admin-role-section-label {
	font-size: 11px;
	font-weight: bold;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.admin-role-selector {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.admin-role-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px;
	background: var(--bg-primary);
	border: 1px solid var(--border-primary);
}

.admin-role-checkbox {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	cursor: pointer;
	transition: all 0.2s;
	font-size: 11px;
	user-select: none;
	color: var(--text-primary);
	white-space: nowrap;
}

.admin-role-checkbox:hover {
	background: var(--bg-hover);
	border-color: var(--color-primary);
}

.admin-role-checkbox.active {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

.admin-role-checkbox input[type="checkbox"] {
	margin: 0;
}

.admin-role-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.admin-role-badge {
	display: inline-block;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: bold;
	white-space: nowrap;
}

.admin-role-badge.role-admin {
	background: #d64545;
	color: white;
}

.admin-role-badge.role-dev {
	background: #f59e0b;
	color: white;
}

.admin-role-badge.role-tester {
	background: #10b981;
	color: white;
}

.admin-role-badge.role-bot {
	background: #06b6d4;
	color: white;
}

.admin-role-badge.role-user {
	background: #6b7280;
	color: white;
}

.admin-role-badge.role-supporter {
	background: #ec4899;
	color: white;
}

/* Account standing on the user cards (docs/moderation.md). */
.admin-role-badge.role-suspended {
	background: #b8173f;
	color: white;
}

.admin-role-badge.role-strikes {
	background: #e2b714;
	color: #3b2f00;
}

.admin-user-card-footer {
	display: flex;
	gap: 8px;
	padding: 12px 15px;
	background: var(--bg-primary);
	border-top: 1px solid var(--border-primary);
	flex-wrap: wrap;
}

.admin-report-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	transition: all 0.2s ease;
	animation: cardSlideIn 0.3s ease-out;
}

.admin-report-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border-primary);
	flex-wrap: wrap;
	gap: 12px;
}

.admin-report-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 200px;
}

.admin-report-icon {
	font-size: 24px;
	flex-shrink: 0;
}

.admin-report-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.admin-report-name {
	font-weight: bold;
	font-size: 12px;
	color: var(--text-primary);
}

.admin-report-meta {
	font-size: 10px;
	color: var(--text-secondary);
	white-space: nowrap;
	text-transform: lowercase;
	overflow: hidden;
	text-overflow: ellipsis;
}

.admin-report-size {
	font-size: 11px;
	font-weight: bold;
	color: var(--color-primary);
	padding: 4px 10px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
}

.admin-report-card-footer {
	padding: 12px 15px;
	background: var(--bg-primary);
}

.admin-search-input {
	padding: 6px 12px;
	border: 1px solid var(--border-primary);
	font-size: 11px;
	background: var(--bg-container);
	color: var(--text-primary);
	width: 200px;
}

.admin-search-input:focus {
	border-color: var(--color-primary);
	outline: none;
}

#admin-page .legal-page-header {
	position: unset;
}

.admin-report-viewer {
	margin-top: 20px;
}

#admin-report-iframe {
	width: 100%;
	height: 600px;
	border: 1px solid var(--border-primary);
	background: var(--bg-primary);
}

@media (max-width: 768px) {
	.user-sidebar {
		display: none !important;
	}

	#admin-page .legal-page-content {
		max-width: 100%;
		padding: 10px;
	}

	.admin-stats-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 10px;
	}

	.admin-stat-number {
		font-size: 20px;
	}

	.admin-section-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.admin-section-actions {
		width: 100%;
	}

	.admin-section-actions button {
		flex: 1;
	}

	.admin-user-card-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.admin-user-stats {
		width: 100%;
		justify-content: space-around;
	}

	.admin-role-checkboxes {
		flex-direction: column;
	}

	.admin-role-checkbox {
		width: 100%;
		justify-content: flex-start;
	}

	.admin-user-card-footer {
		flex-direction: column;
	}

	.admin-user-card-footer button {
		width: 100%;
	}

	.admin-report-card-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.admin-report-size {
		align-self: flex-end;
	}
}

@media (max-width: 768px) {
	#typing-text {
		display: none;
	}

	footer .social-icons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
		margin-bottom: 10px;
		width: 100%;
	}

	footer p {
		text-align: center;
		margin: 8px 0;
		width: 100%;
	}

	footer .links {
		text-align: center;
		padding: 0;
		margin: 12px 0;
		width: 100%;
	}

	footer .links li {
		display: inline-block;
	}
}

.sponsors-sidebar {
	width: 180px;
	flex-shrink: 0;
	display: none;
}

body[data-active-view="chat-page"] .sponsors-sidebar,
body[data-active-view="profile-page"] .sponsors-sidebar,
body[data-active-view="user-profile-view"] .sponsors-sidebar,

body[data-active-view="message-page"] .sponsors-sidebar {
	display: block;
}

.sponsors-header {
	background: linear-gradient(to bottom, #6d84b4, #5c74a4);
	border: 1px solid #3b5998;
	border-bottom: 1px solid #29447e;
	color: #fff;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sponsors-content {
	background-color: var(--bg-container);
	border: 1px solid var(--line-blue);
	border-top: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sponsor-ad {
	padding: 10px;
	border-bottom: 1px solid #e8ebf0;
	transition: background-color 0.2s ease;
}

.sponsor-ad:last-child {
	border-bottom: none;
}

.sponsor-ad:hover {
	background-color: var(--surface-subtle);
}

.sponsor-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.sponsor-image {
	width: 100%;
	height: auto;
	border: 1px solid #d3d6db;
	margin-bottom: 6px;
	display: block;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.sponsor-text {
	font-size: 11px;
	font-weight: bold;
	color: #3b5998;
	margin-bottom: 3px;
	line-height: 1.3;
}

.sponsor-description {
	font-size: 10px;
	color: #666;
	line-height: 1.4;
	margin-top: 2px;
}

.sponsor-link:hover .sponsor-text {
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.sponsors-sidebar {
		display: none !important;
	}
}

@media (min-width: 1025px) {
    .app-wrapper {
        max-width: 1420px;
    }
}

/* Settings > theme options > full layout: no centered column, the page
   fills the window. */
body.full-layout .app-wrapper {
	max-width: none;
}

/* With nothing beside it, the page is the window: the boxed column's side
   borders and drop shadow, and the fence painted under it, go. */
body.full-layout .container {
	border: 0;
	box-shadow: none;
}

body.full-layout > footer::before {
	content: none;
}

/* Full layout's sidebar (components/full-layout-sidebar.component.js): down
   the window's right edge on every signed-in page of a wide window, the
   notifications inbox over the members list over the scrobbles, and the
   members search, settings and log out at the foot. The page and the mini
   chat make room. */
body.has-full-sidebar {
	--full-sidebar-width: 240px;
}

body.has-full-sidebar .app-wrapper {
	width: calc(100% - var(--full-sidebar-width));
	margin-left: 0;
	margin-right: var(--full-sidebar-width);
}

/* The chat room's own members list would be the same list twice, and its
   scrobbles have moved into the full sidebar, so its sidebar goes. */
body.has-full-sidebar #chat-page #online-users-sidebar {
	display: none;
}

.full-layout-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	width: var(--full-sidebar-width, 240px);
	box-sizing: border-box;
	background: var(--bg-sidebar);
	border-left: 1px solid var(--border-sidebar);
}

.full-layout-sidebar[hidden] {
	display: none;
}

.full-sidebar-notifications {
	flex: 0 0 42%;
	min-height: 80px;
	min-height: 0;
	overflow-y: auto;
	background: var(--bg-container);
}

/* The grip between the inbox and the members, like the old ticker's: drag it
   (or use the arrow keys) to give either more room. */
.full-sidebar-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 16px;
	border-top: 1px solid var(--border-sidebar);
	border-bottom: 1px solid var(--border-sidebar);
	background: linear-gradient(to bottom, var(--bg-container), var(--bg-message));
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1;
	cursor: row-resize;
	touch-action: none;
	user-select: none;
}

.full-sidebar-handle:is(:hover, .is-dragging, :focus-visible) {
	color: var(--text-primary);
	background: var(--bg-message);
}

.full-sidebar-handle:focus-visible {
	outline: 1px dotted var(--text-link);
	outline-offset: -2px;
}

.full-sidebar-notifications .notification-inbox {
	min-height: 100%;
}

.full-sidebar-members {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}

.full-sidebar-members-list,
.full-sidebar-scrobbles .scrobble-list {
	padding-top: 4px;
}

/* The chat page's scrobbles section, moved here; the handle above draws its
   top line. */
.full-sidebar-scrobbles {
	display: flex;
	flex-direction: column;
	flex: 0 0 26%;
	min-height: 0;
}

.full-sidebar-scrobbles .scrobble-section {
	border-top: 0;
}

/* Here the list stands alone: no title bar or refresh button (it still
   refreshes itself). The chat page keeps both. Important against the shared
   sidebar header rule's forced flex. */
.full-sidebar-scrobbles .scrobble-sidebar-header {
	display: none !important;
}

/* The column's lists scroll without a scrollbar, by wheel or touch. */
.full-layout-sidebar :is(.full-sidebar-notifications, .online-users-list, .scrobble-list) {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.full-layout-sidebar :is(.full-sidebar-notifications, .online-users-list, .scrobble-list)::-webkit-scrollbar {
	display: none;
}

.full-sidebar-footer {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	border-top: 1px solid var(--border-sidebar);
	background: var(--bg-message);
}

.full-sidebar-footer .sidebar-search {
	flex: 1;
	min-width: 0;
	border-top: 0;
	background: none;
}

.full-sidebar-button {
	align-self: stretch;
	padding: 0 9px;
	border-left: 1px solid var(--border-sidebar);
}

.status-done {
	background: #a8e063;
	color: #fff;
}

.status-done::before {
	content: "✔ ";
	font-weight: bold;
	margin-right: 2px;
}

#mention-suggestions {
 display: none;
 position: absolute;
 bottom: calc(100% + 6px);
 left: -1px;
 right: -1px;
 max-height: min(260px, 35dvh);
 overflow-y: auto;
 overscroll-behavior: contain;
 background: var(--bg-container);
 border: 1px solid var(--border-primary);
 z-index: 1000;
 font-family: Arial, sans-serif;
 text-align: left;
}
.mention-menu-heading { padding: 8px 10px; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border-primary); }
.mention-item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 10px; box-sizing: border-box; cursor: pointer; }
.mention-item:is(:hover, .is-selected) { background: var(--bg-message-own); }
.mention-pfp { width: 28px; height: 28px; object-fit: cover; }
.mention-special-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 18px; color: var(--text-secondary); background: var(--bg-message); }
.mention-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-size: 12px; font-weight: bold; }
.mention-item small { margin-left: auto; color: var(--text-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
/* Rich textareas (utils/rich-textarea.js): the textarea keeps its caret,
   selection and placeholder while its glyphs go transparent, and the layer
   after it draws the same text with the site's emojis, Markdown, links and
   mentions. Nothing here may change a glyph's width, or the caret drifts. */
.rich-textarea { -webkit-text-fill-color: transparent; }
.rich-textarea::placeholder { -webkit-text-fill-color: currentColor; }
.rich-textarea-layer { position: absolute; box-sizing: border-box; margin: 0; border: 0; overflow: hidden; background: transparent; pointer-events: none; user-select: none; }
.rich-textarea-layer .rich-emoji { color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; }
.rich-textarea-layer .rich-marker { opacity: 0.45; }
.rich-textarea-layer .rich-bold { -webkit-text-stroke: 0.04em currentColor; }
.rich-textarea-layer .rich-italic { font-style: italic; }
.rich-textarea-layer .rich-strike { text-decoration: line-through; }
.rich-textarea-layer .rich-code { background: color-mix(in srgb, currentColor 12%, transparent); }
.rich-textarea-layer .rich-link { color: var(--text-link); text-decoration: underline; }
.rich-textarea-layer .rich-mention { background: color-mix(in srgb, var(--color-primary) 18%, transparent); }
#message-form .input-wrapper { background: var(--bg-input); }
#message-form #message-input { position: relative; z-index: 1; transition: none; background: transparent; }
#message-form #message-input:disabled { background: var(--bg-message); }

/* Mentions on the walls (docs/mentions.md): one floating menu for every post
   and comment box, placed under the box (or above it, .is-above) by
   placeWallMenu. The chat's menu, a little more compact. */
#wall-mention-suggestions {
 display: none;
 position: fixed;
 max-height: min(232px, 40dvh);
 overflow-y: auto;
 overscroll-behavior: contain;
 background: var(--bg-container);
 border: 1px solid var(--border-primary);
 z-index: 11000;
 font-family: Arial, sans-serif;
 text-align: left;
}
#wall-mention-suggestions .mention-menu-heading { padding: 6px 8px; }
#wall-mention-suggestions .mention-item { min-height: 32px; gap: 6px; padding: 4px 8px; }
#wall-mention-suggestions .mention-pfp { width: 22px; height: 22px; }

.mention {
	background-color: transparent;
	font-weight: normal;
}

/* @everyone (docs/mentions.md) reads like a mention but opens nobody. */
.mention-everyone {
	cursor: default;
}

.profile-actions-divider {
	border-bottom: 1px solid var(--bg-body);
	margin: 20px 0;
}

.data-management-section {
	margin-top: 20px;
	padding-top: 20px;
	text-align: center;
}

.data-management-section h2 {
	font-size: 16px;
	color: var(--text-secondary);
	margin-bottom: 10px;
}

.data-management-section p {
	font-size: 12px;
	color: #666;
	margin-bottom: 20px;
}

.load-more-container {
	text-align: center;
	margin-top: 20px;
	padding-bottom: 20px;
}

#load-more-members-btn {
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
}

.comment-emoji-picker {
	position: absolute;
	bottom: 100%;
	left: 14px;
	margin-bottom: 5px;
	background: linear-gradient(180deg, #f9f9f9, var(--surface-sunken));
	border: 1px solid var(--line-strong);
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	z-index: 1000;
	width: 300px;
	display: flex;
	flex-direction: column;
	transform-origin: bottom left;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.comment-emoji-picker.hidden {
	visibility: hidden;
	transform: scale(0.95) translateY(5px);
	opacity: 0;
	pointer-events: none;
}

.comment-emoji-picker .emoji-picker-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.comment-emoji-picker .emoji-picker-content {
	height: 280px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px;
	background: linear-gradient(180deg, var(--bg-container), var(--surface-subtle));
	border-bottom: 1px solid var(--line-medium);
}

.comment-emoji-picker .emoji-picker-category-content {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	display: none;
}

.comment-emoji-picker .emoji-picker-category-content.active {
	display: grid;
}

.comment-emoji-picker button {
	background: var(--bg-container);
	border: 1px solid var(--line-soft);
	padding: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	transition: all 0.15s linear;
	position: relative;
}

.comment-emoji-picker button:hover {
	border-color: #b3b3b3;
	transform: translateY(-2px);
}

.comment-emoji-picker button:active {
	transform: translateY(0);
	background: var(--line-soft);
}

.comment-emoji-picker img {
	width: 28px;
	height: 28px;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	display: block;
	pointer-events: none;
}

.comment-emoji-picker .emoji-picker-tab-bar {
	display: flex;
	gap: 0;
	background: linear-gradient(180deg, var(--surface-sunken), #d8d8d8);
	border-top: 1px solid #999;
	padding: 0;
	min-height: 34px;
}

.emoji-picker-container {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	width: 352px;
	max-height: 400px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.emoji-picker-search {
	position: relative;
	flex-shrink: 0;
	padding: 8px;
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border-primary);
}

.emoji-picker-search > i {
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
}

.picker-search-empty {
	margin: 0;
	padding: 20px 8px;
	text-align: center;
	color: var(--text-muted);
	font-size: 12px;
}

.emoji-search-input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 7px 8px 7px 30px;
	background: var(--bg-primary);
	border: 1px solid var(--border-primary);
	color: var(--text-primary);
	font-family: inherit;
	font-size: 12px;
	outline: none;
}

.emoji-search-input:focus {
	border-color: #3b5998;
}

.emoji-picker-tabs {
	display: flex;
	gap: 4px;
	padding: 8px;
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-tertiary);
	overflow-x: auto;
}

.emoji-tab {
	background: transparent;
	border: none;
	padding: 6px 10px;
	font-size: 20px;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.emoji-tab:hover {
	opacity: 0.8;
	background: var(--bg-hover);
}

.emoji-tab.active {
	opacity: 1;
	background: var(--bg-primary);
}

.emoji-picker-content {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
	max-height: 280px;
}

.emoji-category-panel {
	display: block;
}

.emoji-category-panel.hidden {
	display: none;
}

.emoji-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
}

.emoji-item {
	background: transparent;
	border: none;
	padding: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
	width: 36px;
	height: 36px;
}

.emoji-item:hover {
	background: var(--bg-hover);
	transform: scale(1.1);
}

.emoji-item img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

#chat-window.dragover {
	border-bottom-color: var(--border-primary);
}

.drag-drop-overlay {
	position: absolute;
	inset: 6px;
	z-index: 100;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.48);
	border: 2px dotted rgba(255, 255, 255, 0.9);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease, visibility 0.12s ease;
}

.chat-main.chat-dragover > .drag-drop-overlay {
	opacity: 1;
	visibility: visible;
}

.drag-drop-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 18px 24px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
	user-select: none;
}

.drag-drop-glyph {
	display: block;
	font-size: 54px;
	line-height: 0.8;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}

.drag-drop-title {
	font-size: 15px;
	font-weight: bold;
	text-transform: lowercase;
}

.drag-drop-hint {
	font-size: 10px;
	opacity: 0.8;
}

.wall-post-box.dragover,
.comment-form-container.dragover {
	border-color: var(--accent-primary) !important;
	border-style: dashed !important;
	background-color: rgba(59, 89, 152, 0.05) !important;
}

/* ── the overlay ──
   One dimmed layer with something in the middle of it. The loading screen,
   the offline screen and the discovery map's own loading layer are the same
   element with different tints and depths — not three copies of the same
   thirty lines, which is what they were. What differs is declared as custom
   properties below; everything else is shared.

   `.is-inline` scopes an overlay to a panel instead of the viewport. That is
   the only structural variant: an inline overlay is positioned against its
   container and sits under the site chrome rather than over it. */
.loading-overlay,
.offline-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--overlay-tint, rgba(0, 0, 0, 0.6));
	backdrop-filter: blur(4px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--overlay-depth, 99999);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}

.loading-overlay::before,
.offline-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 200px 200px;
	opacity: var(--overlay-grain, 0.08);
	pointer-events: none;
}

.loading-overlay.active,
.offline-overlay.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

/* Pinned to its panel rather than the viewport: the discovery map's loader.
   1100 clears Leaflet, whose control corners sit at 1000, and stays under the
   mobile bottom bar (1200) and the sidebar drawers (2005). */
.loading-overlay.is-inline,
.offline-overlay.is-inline {
	position: absolute;
	--overlay-depth: 1100;
}

/* The offline screen is darker and grainier, and outranks everything. */
.offline-overlay {
	--overlay-tint: rgba(0, 0, 0, 0.8);
	--overlay-grain: 0.15;
	--overlay-depth: 999999;
}

.loading-content,
.offline-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	user-select: none;
	animation: loadingFadeIn 0.3s ease;
	color: #fff;
	text-align: center;
	z-index: 1;
}

@keyframes loadingFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.offline-icon {
	font-size: 80px;
	animation: pulse 2s infinite;
	margin-bottom: 8px;
}

@keyframes pulse {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.7;
		transform: scale(0.95);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.loading-text {
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	animation: loadingPulse 2s ease-in-out infinite;
}

@keyframes loadingPulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}

.loader-buffer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.2);
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.loader-buffer.hidden {
	opacity: 0;
	display: flex !important;
	/* Keep it flex for the transition if we use opacity, but hide it eventually */
	pointer-events: none;
}

.img-loader-container {
	position: relative;
	max-width: 100%;
	vertical-align: middle;
}

.poll-option-voters .img-loader-container {
	display: flex;
}

/* The site's small icons: one sheet of original 18x18 sprites (ss2.png, a
   vertical strip). Each icon is `site-sprite-icon sprite-<name>`; a new one is
   a new tile at the bottom of the sheet, a new class here, and a new ?v= so
   the service worker fetches the grown sheet. One drawing per meaning: do not
   borrow another section's icon. */
.site-sprite-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-image: url('/assets/img/ss2.png?v=2');
	background-repeat: no-repeat;
	background-size: 18px auto;
	background-position: 0 calc(var(--sprite-index, 0) * -18px);
}

.sprite-welcome { --sprite-index: 0; }
.sprite-basic-info { --sprite-index: 1; }
.sprite-profile-picture { --sprite-index: 2; }
.sprite-about-me { --sprite-index: 3; }
.sprite-personal-info { --sprite-index: 4; }
.sprite-socials { --sprite-index: 5; }
.sprite-display { --sprite-index: 6; }
.sprite-lastfm { --sprite-index: 7; }
.sprite-security { --sprite-index: 8; }
.sprite-data-management { --sprite-index: 9; }
.sprite-chat-settings { --sprite-index: 10; }
.sprite-accessibility { --sprite-index: 11; }
.sprite-themes { --sprite-index: 12; }
.sprite-theme-options { --sprite-index: 13; }
.sprite-market { --sprite-index: 14; }
.sprite-support { --sprite-index: 15; }
.sprite-help { --sprite-index: 16; }
.sprite-content-actions { --sprite-index: 17; }
.sprite-list-filters { --sprite-index: 18; }
.sprite-pokes { --sprite-index: 19; }
.sprite-poked { --sprite-index: 20; }
.sprite-poke-suggestions { --sprite-index: 21; }
.sprite-everywhere { --sprite-index: 22; }
.sprite-neighbors { --sprite-index: 23; }
.sprite-changelog-legacy { --sprite-index: 24; }
.sprite-changelog-compare { --sprite-index: 25; }
.sprite-view-on-github { --sprite-index: 26; }
.sprite-documentation { --sprite-index: 27; }
.sprite-features { --sprite-index: 28; }
.sprite-other { --sprite-index: 29; }
.sprite-refactors { --sprite-index: 30; }
.sprite-all-commits { --sprite-index: 31; }
.sprite-style-changes { --sprite-index: 32; }
.sprite-bug-fixes { --sprite-index: 33; }
.sprite-all-games { --sprite-index: 34; }
.sprite-new-games { --sprite-index: 35; }
.sprite-action-games { --sprite-index: 36; }
.sprite-adventure-games { --sprite-index: 37; }
.sprite-puzzle-games { --sprite-index: 38; }
.sprite-strategy-games { --sprite-index: 39; }
.sprite-rated-games { --sprite-index: 40; }
.sprite-all-items { --sprite-index: 41; }
.sprite-in-progress { --sprite-index: 42; }
.sprite-planned { --sprite-index: 43; }
.sprite-ideas { --sprite-index: 44; }
.sprite-high-priority { --sprite-index: 45; }
.sprite-community { --sprite-index: 46; }
.sprite-profile { --sprite-index: 47; }
.sprite-chat-messaging { --sprite-index: 48; }
.sprite-technical { --sprite-index: 49; }
.sprite-ideas-concepts { --sprite-index: 50; }
.sprite-miscellaneous { --sprite-index: 51; }
.sprite-suggest { --sprite-index: 52; }
.sprite-recently-played { --sprite-index: 53; }
.sprite-plays { --sprite-index: 54; }
.sprite-covers { --sprite-index: 55; }
.sprite-like { --sprite-index: 56; }
.sprite-comment { --sprite-index: 57; }
.sprite-picture { --sprite-index: 58; }
.sprite-info { --sprite-index: 59; }
.sprite-poll { --sprite-index: 60; }
.sprite-reports { --sprite-index: 61; }
.sprite-wave { --sprite-index: 62; }
.sprite-blog { --sprite-index: 63; }
.sprite-music-and-movies { --sprite-index: 64; }
.sprite-feed { --sprite-index: 65; }
.sprite-posting { --sprite-index: 66; }
.sprite-bell { --sprite-index: 67; }
.sprite-privacy { --sprite-index: 68; }
.sprite-settings { --sprite-index: 69; }
.sprite-lingo { --sprite-index: 70; }
.sprite-faq { --sprite-index: 71; }
.sprite-overview { --sprite-index: 72; }
.sprite-coming-up { --sprite-index: 73; }
.sprite-cake { --sprite-index: 74; }
.sprite-this-month { --sprite-index: 75; }
.sprite-rip-disc { --sprite-index: 76; }
.sprite-shelf { --sprite-index: 77; }
.sprite-now-playing { --sprite-index: 78; }
.sprite-headphones { --sprite-index: 79; }
.sprite-music-post { --sprite-index: 80; }
.sprite-microphone { --sprite-index: 81; }
.sprite-album { --sprite-index: 82; }
.sprite-songs { --sprite-index: 83; }
.sprite-affinity { --sprite-index: 84; }
.sprite-chart-maker { --sprite-index: 85; }
.sprite-music-search { --sprite-index: 86; }
.sprite-blocked { --sprite-index: 87; }
.sprite-hard-drive { --sprite-index: 88; }
.sprite-folder { --sprite-index: 89; }
.sprite-folder-open { --sprite-index: 90; }
.sprite-trash { --sprite-index: 91; }
.sprite-duplicates { --sprite-index: 92; }
.sprite-unscanned { --sprite-index: 93; }

.sprite-loader-container {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

.emoji-wrapper,
.emoticon-wrapper {
	display: inline-flex;
	vertical-align: middle;
	line-height: 0;
}

.image-wrapper {
	display: block;
	width: 100%;
	max-width: 100%;
}

.avatar-wrapper {
	display: inline-block;
	line-height: 0;
}

.sticker-wrapper {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

/* The site's one loading throbber: twelve bars fading in turn. An animated
   SVG mask draws it from a single element in the current text colour, so it
   is `<span class="throbber"></span>` wherever something is loading; size it
   with --throbber-size. */
.throbber {
	--throbber-size: 18px;
	display: inline-block;
	flex-shrink: 0;
	width: var(--throbber-size);
	height: var(--throbber-size);
	vertical-align: middle;
	color: var(--text-muted);
	background-color: currentColor;
	-webkit-mask: var(--throbber-mask) center / contain no-repeat;
	mask: var(--throbber-mask) center / contain no-repeat;
	--throbber-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(0 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='0s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(30 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.9167s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(60 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.8333s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(90 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.75s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(120 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.6667s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(150 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.5833s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(180 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(210 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.4167s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(240 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.3333s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(270 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.25s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(300 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.1667s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='47' y='21' width='6' height='16' rx='3' transform='rotate(330 50 50)'%3E%3Canimate attributeName='opacity' values='1;.25' dur='1s' begin='-0.0833s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
}

button .throbber {
	--throbber-size: 14px;
	color: inherit;
}

.global-no-results .throbber {
	--throbber-size: 32px;
	margin-bottom: 10px;
}

.loading-content .throbber {
	--throbber-size: 54px;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {

	.loading-overlay,
	.offline-overlay,
	.loading-content,
	.offline-content,
	.loading-text {
		animation: none !important;
		transition: opacity 0.2s ease !important;
	}
}

.turnstile-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-muted);
	min-height: 20px;
	justify-content: center;
}

.turnstile-status i {
	font-size: 16px;
}

.turnstile-status.success {
	color: var(--color-online, #42b72a);
}

.turnstile-status.warning {
	color: var(--color-warning, #f5a623);
}

.turnstile-status.error {
	color: var(--text-alert, #a94442);
}

body.hide-join-leave .system-message.join-leave {
	display: none !important;
}

.settings-page-header,

.legal-page-header,
.profile-page-header {
	position: sticky;
	top: 0;
	z-index: 100;
	user-select: none;
	;
	background-color: var(--bg-container);
	border-bottom: 1px solid var(--border-primary);
}

.profile-status-container {
	position: absolute;
	bottom: 4px;
	left: 4px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	padding: 4px 8px;
	color: #fff;
	user-select: none;
	text-shadow: none;
	margin: 0;
}

/* Your own status pill doubles as the status picker. */
.profile-status-container.is-actionable {
	cursor: pointer;
}

.profile-status-container.is-actionable:hover,
.profile-status-container.is-actionable:focus-visible {
	background: rgba(0, 0, 0, 0.85);
}

.profile-status-container.is-actionable:focus-visible {
	outline: 1px solid var(--bg-container);
	outline-offset: 1px;
}

.profile-status-container .online-dot,
.profile-status-container .offline-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	animation: none !important;
}

.profile-status-container .online-dot {
	background-color: var(--color-online, #42b72a);
	box-shadow: none;
}

.profile-status-container .offline-dot {
	background-color: var(--text-muted, #90949c);
}

.profile-status-container.online {
	color: #fff;
}

.profile-status-container.offline {
	color: #ccc;
}

.like-status-bar {
	align-items: center;
	user-select: none;
	font-size: 13px;
	color: #65676b;
	font-weight: 600;
}

.like-link {
	color: var(--text-link);
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
	opacity: 0.8;
}

.like-link:hover {
	text-decoration: underline;
	opacity: 1;
}

.like-base-text {
	color: var(--text-link);
	font-weight: bold;
	opacity: 0.8;
}

.like-more-text {
	color: var(--text-link);
	font-weight: bold;
	cursor: pointer;
	opacity: 0.8;
	text-decoration: none;
	position: relative;
}

.like-more-text:hover {
	text-decoration: underline;
	opacity: 1;
}

.like-voter-avatar-small {
	width: 33px;
	height: 33px;
	-webkit-user-drag: none;
	border: 1px solid var(--bg-message);
	object-fit: cover;
	margin-top: -4px;
}

.like-voter-avatar-small:first-child {
	margin-top: 0;
}

.like-status-bar i {
	color: var(--text-sidebar-username);
	font-size: 16px;
	margin-right: 6px;
}

.post-pinned-bookmark {
	position: absolute;
	top: -4px;
	right: 10px;
	width: 24px;
	height: auto;
	user-select: none;
	z-index: 15;
	pointer-events: none;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	transition: opacity 0.2s ease;
}

.post-pinned-bookmark.can-yield.hovered {
	opacity: 0.3;
}

.wall-post-item.pinned {
	border: 1px solid rgba(245, 166, 35, 0.3);
}

.gw-comment-item {
	display: flex !important;
	gap: 8px !important;
	padding: 2px 0px !important;
	margin-bottom: 2px !important;
	position: relative !important;
	align-items: flex-start !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: transparent !important;
	border: none !important;
}

.gw-comment-avatar-link {
	flex-shrink: 0 !important;
	display: block !important;
	text-decoration: none !important;
}

.gw-comment-avatar-img {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	user-select: none;
	-webkit-user-drag: none;
	object-fit: cover !important;
	display: block !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.gw-comment-body {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	padding-top: 0 !important;
	align-items: flex-start !important;
	text-align: left !important;
}

.gw-comment-text-block {
	display: block !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	color: var(--text-primary) !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	text-align: left !important;
	width: 100% !important;
}

.gw-comment-author {
	font-weight: bold !important;
	color: var(--color-primary, #3b5998);
	text-decoration: none !important;
	margin-right: 4px !important;
	user-select: none;
	display: inline !important;
	cursor: pointer !important;
}

.gw-comment-author:hover {
	text-decoration: underline !important;
}

.gw-comment-content {
	display: block !important;
	color: var(--text-primary) !important;
	white-space: pre-wrap !important;
	margin-top: 2px !important;
}

.gw-comment-content p {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: pre-wrap !important;
}

.gw-comment-meta {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	margin-top: 2px !important;
	user-select: none;
	font-size: 11px !important;
	color: var(--text-muted) !important;
	line-height: 1.2 !important;
}

.gw-comment-time {
	color: var(--text-muted) !important;
	white-space: nowrap !important;
}

.gw-meta-separator {
	margin: 0 4px !important;
	font-weight: bold !important;
}

/* A comment's like and reply are .btn-link; a liked comment's like is red. */
.gw-comment-like.is-active {
	color: #e0245e;
}

/* "view N more" / "hide" under a thread: a .btn-link on its own row. */
.gw-view-more-btn,
.gw-show-less-btn {
	display: flex;
	width: 100%;
	padding: 8px 0;
	font-size: 13px;
	line-height: 1.4;
}

.gw-comment-replies :is(.gw-view-more-btn, .gw-show-less-btn) {
	padding: 2px 0 4px;
	font-size: 12px;
}

.comments-container {
	background: transparent !important;
	border-top: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	padding: var(--comment-gutter) !important;
	box-sizing: border-box !important;
}

.comment-form-container {
	box-sizing: border-box;
	width: 100%;
	padding: var(--comment-gap) var(--comment-gutter) var(--comment-gutter);
	background: var(--bg-message);
}

.comment-form-container .comment-input-row {
	margin: 0;
}

/* Quick reaction picker (6 presets + "more" button) */
.quick-reaction-picker {
	position: fixed;
	z-index: 9999;
	display: flex;
	align-items: center;
	padding: 0 6px 0 6px;
	animation: emojiPickerFadeInUp 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.quick-reaction-picker.hidden {
	display: none !important;
}

.quick-reaction-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: none;
	/* Square, to match the popup it sits in. */
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.quick-reaction-btn:hover {
	background-color: var(--bg-message);
}

.quick-reaction-btn:not(.quick-reaction-more):hover {
	transform: scale(1.2);
	background: none !important;
}

.quick-reaction-btn img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	pointer-events: none;
}

/* + button: no vertical padding (container has none), flush right */
.quick-reaction-more {
	color: var(--text-muted);
	font-size: 16px;
	border-left: 1px solid var(--border-primary);
	margin: 0 -6px 0 2px;
	padding: 0;
	min-width: 28px;
	height: 32px;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.quick-reaction-more i {
	line-height: 0;
	display: block;
}

.quick-reaction-more:hover {
	color: var(--color-primary);
}

.emoji-picker-popup {
	--site-popup-width: 320px;
	height: 320px;
	padding: 0;
}

.emoji-picker-popup {
	position: fixed;
	z-index: 9999;
	max-width: calc(100vw - 20px);
	max-height: calc(100dvh - 20px);
}

@keyframes emojiPickerFadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes emojiPickerFadeInDown {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.emoji-picker-popup:not(.hidden) {
	animation: emojiPickerFadeInUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.emoji-picker-popup.animate-up {
	animation: emojiPickerFadeInUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.emoji-picker-popup.animate-down {
	animation: emojiPickerFadeInDown 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.emoji-picker-popup.hidden {
	display: none !important;
}

/* A message toolbar's react button while its picker is open. Composer
   glyphs are .btn-tool, which has its own on state. */
.message-actions button.is-active,
.message-actions button.is-active i {
	color: var(--color-primary) !important;
	outline: none !important;
}

.emoji-picker-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 8px 4px 8px 8px;
}

.emoji-category-section {
	margin-bottom: 12px;
}

.emoji-category-title {
	font-size: 11px;
	font-weight: bold;
	color: var(--text-muted);
	padding: 4px 8px;
	margin-bottom: 4px;
	text-transform: uppercase;
	background: transparent;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, var(--border-primary), transparent) 1;
}

.emoji-category-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
}

.emoji-button {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	padding: 0;
	font-size: 24px;
}

.emoji-button:hover {
	filter: brightness(1.1);
}

.emoji-button img {
	width: 24px;
	height: 24px;
	pointer-events: none;
}

.emoji-button.emoticon-btn img {
	width: auto;
	height: auto;
	max-width: 90%;
	max-height: 90%;
}

.emoji-picker-footer {
	height: 40px;
	min-height: 40px;
	background-color: var(--bg-container);
	border-top: 1px solid var(--border-primary);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	scrollbar-width: none;
}

.emoji-picker-footer::-webkit-scrollbar { display: none; }

.emoji-nav-btn {
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 18px;
	padding: 8px;
	cursor: pointer;
	flex: 0 0 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s;
	height: 100%;
	border-bottom: 2px solid transparent;
}

.emoji-nav-btn:not(.active):hover {
	background-color: var(--surface-subtle);
	color: #4b4f56;
}

.emoji-nav-btn.active {
	color: var(--text-sidebar-username);
	border-bottom-color: var(--text-sidebar-username);
	background-color: var(--surface-subtle);
}

.profile-pic-container {
	position: relative;
	width: 200px;
	height: 200px;
	border: 4px solid var(--bg-container);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	background-color: var(--bg-container);
	z-index: 1;
}

.profile-edit-pfp-btn {
	top: 0;
	right: 0;
	margin: 0;
}

.profile-status-container {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
}

.profile-pic-container.editing .profile-status-container {
	display: none !important;
}

.profile-pic-crop-area {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Keep loader container filling the crop area so the temporary edit preview is visible */
.profile-pic-crop-area .img-loader-container.profile-pic-loader {
	display: block !important;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

.profile-pic-crop-area .img-loader-container.profile-pic-loader img {
	position: relative;
	z-index: 0;
	object-fit: cover;
}

/* Fill crop area when not in edit mode (edit mode uses .draggable-pfp and inline styles) */
.profile-pic-crop-area .img-loader-container.profile-pic-loader img:not(.draggable-pfp) {
	width: 100% !important;
	height: 100% !important;
}

.profile-pic-view {
	border: none !important;
	box-shadow: none !important;
}

.profile-pic-view.draggable-pfp {
	cursor: grab;
	transform-origin: center center;
	will-change: transform;
}

.profile-pic-view.draggable-pfp:active {
	cursor: grabbing;
}

.profile-header-bg.draggable-banner {
	cursor: ns-resize;
}

.profile-header-bg.draggable-banner:active {
	cursor: grabbing;
}

.pfp-zoom-control {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	background: rgba(0, 0, 0, 0.6);
	padding: 5px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: fadeIn 0.3s ease;
}

.pfp-zoom-control input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.3);
	outline: none;
}

.pfp-zoom-control input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bg-input);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.1s;
}

.pfp-zoom-control input[type='range']::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate(-50%, 10px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.profile-cancel-pfp-btn {
	top: 0;
	left: 0;
	right: auto;
	margin: 0;
	z-index: 20;
	display: none;
}

.profile-cancel-banner-btn {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 20;
	display: none;
}

.profile-reset-pfp-btn {
	top: 0;
	right: 32px;
	z-index: 20;
	display: none;
}

.profile-reset-banner-btn {
	top: 10px;
	right: 42px;
	z-index: 20;
	display: none;
}

.profile-identity-text {
	pointer-events: none;
	position: relative;
	z-index: 2;
}

.profile-identity-text>* {
	pointer-events: auto;
}

/* The profile's identity rises over the banner's lower half, so only what it
   draws (the picture, the name, the note, the about text, the visitor
   buttons) takes the pointer; the empty rest of it, and the full-width name
   line on phones, let the banner be dragged and clicked through them. */
.profile-content,
.profile-identity-text>.profile-username-view {
	pointer-events: none;
}

.profile-pic-container,
.profile-username-view>*,
.profile-about-me-container,
.profile-visitor-actions {
	pointer-events: auto;
}

.profile-socials-table {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.profile-social-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	gap: 12px;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, transparent, var(--border-primary), transparent) 1;
}

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

.profile-social-col-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	min-width: 90px;
	user-select: none;
	-webkit-user-select: none;
}

.profile-social-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	-webkit-user-drag: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.profile-social-col-value {
	flex: 1;
	text-align: right;
	min-width: 0;
}

.profile-social-link {
	font-size: 13px;
	color: var(--text-link, #3b5998);
	text-decoration: none;
	word-break: break-all;
	opacity: 0.8;
	transition: opacity 0.15s;
	user-select: none;
	-webkit-user-select: none;
}

.profile-social-link:hover {
	opacity: 1;
	text-decoration: underline;
	color: var(--text-link, #3b5998);
}

.sidebar-user-socials {
	display: flex;
	flex-wrap: nowrap;
	user-select: none;
	gap: 5px;
	margin-top: 5px;
	border-top: 1px solid var(--border-light);
	min-width: 0;
	max-width: 100%;
	/* overflow-x: auto would clip icons at the top edge because the browser
	   forces overflow-y: auto when overflow-x is set. Use overflow: clip with
	   a clip margin so icons render fully (no clipping) while horizontal
	   overflow still doesn't propagate to the parent sidebar. */
	overflow-x: clip;
	overflow-y: visible;
	overflow-clip-margin: 6px;
}

/* Inner row scrolls horizontally so icons can be browsed; padding+negative
   margin gives the icons breathing room from the scroll gutter so they
   don't visually touch a clipping edge. */
.sidebar-user-socials-inner {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	overflow-x: auto;
	overflow-y: visible;
	padding: 4px 0;
	margin: -4px 0;
	scrollbar-width: none;
	min-width: 0;
	flex: 1;
}

.sidebar-user-socials-inner::-webkit-scrollbar {
	display: none;
}

.sidebar-user-socials::-webkit-scrollbar {
	display: none;
}

.sidebar-social-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	transition: transform 0.2s;
}

.sidebar-social-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.profile-badges-row {
	gap: 6px;
	flex-wrap: nowrap;
	margin-top: 5px;
	margin-left: 0;
	text-shadow: none;
	overflow: visible;
}

.profile-badges-row .message-badge {
	font-size: 13px;
	padding: 3px 8px;
}

.banner-special-section {
	display: flex;
	align-items: center;
	padding: 0;
	z-index: 10;
	position: static !important;
	right: auto !important;
	bottom: auto !important;
	height: 28px;
	user-select: none;
	-webkit-user-select: none;
}

.banner-custom-link {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	padding: 0 10px;
	color: #fff;
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	transition: background 0.2s;
	height: 100%;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-drag: none;
}

.banner-custom-link:hover {
	background: rgba(0, 0, 0, 0.6);
}

.banner-custom-link:hover .link-text {
	text-decoration: underline;
}

.banner-custom-link i {
	font-size: 14px;
}

.banner-section-separator {
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	margin: 0;
}

.banner-socials {
	display: flex;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	padding: 0 4px;
	height: 100%;
	box-sizing: border-box;
}

.banner-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 5px;
	transition: background 0.2s;
	cursor: pointer;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-drag: none;
}

.banner-social-icon:hover {
	background: rgba(255, 255, 255, 0.1);
}

.banner-social-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

@media (max-width: 600px) {
	.banner-special-section {
		display: none;
	}
}

.wall-post-box.fb-style {
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	box-shadow: var(--shadow-light);
	padding: 0;
	margin-bottom: 12px;
	overflow: visible;
	box-sizing: border-box;
	animation: wallPostFadeIn 0.4s ease-out forwards;
	opacity: 0;
}

.wall-post-tabs {
	display: flex;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	border-bottom: 1px solid var(--line-soft);
	padding: 0;
	overflow: visible;
}

/* A .btn-tool in the now-playing section's green accent, at rest and hovered. */
.btn-tool.profile-now-playing-quote-btn,
.btn-tool.profile-now-playing-quote-btn:hover {
	top: 0;
	right: 8px;
	color: #1db954;
}

.profile-now-playing {
	position: relative;
}

.profile-now-playing-quote-btn i {
	font-size: 26px;
}

.wall-post-tab {
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 700;
	color: #4b4f56;
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	border-right: 1px solid var(--bg-body);
	position: relative;
	user-select: none;
}

.wall-post-tab.active {
	background: var(--bg-container);
	cursor: default !important;
	color: var(--text-primary);
}

.wall-post-tab.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--bg-container);
}

.wall-post-tab i,
.wall-tab-icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
	-webkit-user-drag: none;
	object-fit: contain;
	color: inherit;
}

/* The labels are lowercase, whose letters sit below the middle of their line
   box, so a centred icon reads as riding high; one pixel down lines it up
   with the letters. */
.wall-post-tab .wall-tab-icon {
	transform: translateY(1px);
}

/* The composers' tabs stay on one row. When they don't fit, the row turns
   compact and every tab shows its icon only (fitTabLabels, utils/dom.js);
   the tab's title still names it. */
.wall-post-tab {
	flex: 0 0 auto;
	white-space: nowrap;
}

.wall-post-tabs.is-compact .wall-post-tab {
	flex: 1 1 0;
	justify-content: center;
	gap: 0;
	font-size: 0;
}

.wall-post-content-area {
	padding: 12px;
}

.wall-post-input {
	width: 100%;
	box-shadow: none;
	border: none;
	resize: none;
	font-family: inherit;
	font-size: 14px;
	outline: none;
	min-height: 40px;
	margin-bottom: 8px;
	display: block;
	padding: 0;
	box-sizing: border-box;
}

.wall-image-preview {
	display: flex;
	overflow-x: auto;
	gap: 8px;
	margin-left: -12px;
	margin-right: -12px;
	margin-top: 10px;
	padding: 12px;
	background: var(--bg-message);
	border-top: 1px solid var(--border-primary);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wall-image-preview::-webkit-scrollbar {
	display: none;
}

.comment-form-container .wall-image-preview {
	box-sizing: border-box;
	margin: 0 calc(-1 * var(--comment-gutter)) calc(-1 * var(--comment-gutter));
	padding: 12px var(--comment-gutter);
	background: inherit;
}

.wall-image-preview-item {
	position: relative;
	flex: 0 0 80px;
	height: 80px;
	border: 1px solid var(--line-medium);
	background: var(--bg-container);
}

.wall-image-preview-item :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wall-image-preview-item video {
	background: #000;
}

.wall-image-preview-item :is(img, video)[data-attachment-preview] {
	cursor: zoom-in;
}

.wall-image-preview-item :is(img, video)[data-attachment-preview]:focus-visible {
	outline: 2px solid var(--color-primary, #3b5998);
	outline-offset: -2px;
}

.attached-image-preview-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: zoom-in;
}

.attached-image-preview-btn.is-video {
	cursor: default;
}

.attached-image-preview-btn:focus-visible {
	outline: 2px solid var(--color-primary, #3b5998);
	outline-offset: -2px;
}

.wall-image-add-btn {
	flex: 0 0 80px;
	height: 80px;
	border: 2px dashed var(--border-primary);
	background: rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--text-muted);
}

.wall-image-add-btn:hover {
	background: rgba(255, 255, 255, 0.8);
	border-color: var(--text-sidebar-username);
	color: var(--text-sidebar-username);
}

.wall-image-add-btn i {
	font-size: 24px;
}

.wall-post-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid transparent;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	margin-left: -12px;
	margin-right: -12px;
	margin-bottom: -12px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0 12px;
	pointer-events: none;
	transform: translateY(-6px);
	visibility: hidden;
	transition:
		max-height 260ms ease,
		padding 260ms ease,
		border-color 180ms ease,
		opacity 180ms ease,
		transform 260ms ease,
		visibility 0s linear 260ms;
}

.wall-post-box.active .wall-post-footer {
	border-top-color: var(--line-soft);
	max-height: 160px;
	opacity: 1;
	overflow: visible;
	padding: 8px 12px;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
	transition-delay: 0s;
}

.wall-post-footer-right {
	display: flex;
	gap: 10px;
	align-items: center;
}

/* ── Postbox visibility selector ──────────────────────────────────────────
   Sits left of the post button in .wall-post-footer-right. The button is the
   "secondary" sibling of .wall-post-btn — same height, same dark navy border,
   but a light Facebook-2010s gradient so the post CTA still wins. The popup
   keeps a tight 2010s look: small text, hairline dividers, no rounded
   corners. */
.wall-visibility-selector {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* The menu is anchored above the button. Compact 2010s-FB picker — narrower,
   tighter padding, smaller text than the previous attempt, raised z-index
   so it always sits above neighbouring postbox chrome. */
.wall-visibility-menu {
	position: fixed;
	min-width: 220px;
	background: var(--bg-input);
	border: 1px solid var(--border-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	padding: 0;
	z-index: 9999;
	overflow: hidden;
	animation: wallVisibilityMenuFade 0.12s ease;
}

@keyframes wallVisibilityMenuFade {
	from {
		opacity: 0;
		transform: translateY(2px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wall-visibility-menu-header {
	font-size: 11px;
	font-weight: bold;
	color: var(--text-sidebar-username, #3b5998);
	padding: 6px;
	text-align: center;
	background: var(--bg-message);
	border-bottom: 1px solid var(--border-primary);
	letter-spacing: 0;
	text-transform: none;
}

/* Each option is a full row: check (left) → icon → title + subtitle stack.
   Active state takes the row to the theme accent color with white text. */
.wall-visibility-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: var(--bg-input);
	border: 0;
	border-bottom: 1px solid var(--border-primary);
	padding: 7px 10px 7px 26px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: var(--text-primary);
	transition: background 0.1s ease;
}

.wall-visibility-option:last-of-type {
	border-bottom: 0;
}

.wall-visibility-option:hover {
	background: color-mix(in srgb, var(--text-sidebar-username, #3b5998) 10%, var(--bg-input));
}

/* The leading icon (globe / lock). Tight + readable at a glance. */
.wall-visibility-option>i:first-child {
	font-size: 14px;
	color: var(--text-primary);
	flex-shrink: 0;
	width: 16px;
	text-align: center;
}

.wall-visibility-option-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	line-height: 1.25;
}

.wall-visibility-option-title {
	font-size: 12px;
	font-weight: bold;
	color: inherit;
}

.wall-visibility-option-desc {
	font-size: 10px;
	color: var(--text-muted, #999);
	margin-top: 1px;
}

/* Check appears on the LEFT of the row, only on the active option. */
.wall-visibility-option-check {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: inherit;
	opacity: 0;
}

.wall-visibility-option.active {
	background: var(--text-sidebar-username, #3b5998);
	color: #fff;
}

.wall-visibility-option.active:hover {
	background: color-mix(in srgb, var(--text-sidebar-username, #3b5998) 85%, #000);
}

.wall-visibility-option.active>i:first-child,
.wall-visibility-option.active .wall-visibility-option-title,
.wall-visibility-option.active .wall-visibility-option-desc {
	color: #fff;
}

.wall-visibility-option.active .wall-visibility-option-desc {
	color: rgba(255, 255, 255, 0.85);
}

.wall-visibility-option.active .wall-visibility-option-check {
	opacity: 1;
}

.wall-char-count {
	color: var(--text-muted);
	user-select: none;
	font-size: 11px;
}

.wall-poll-container {
	padding: 10px 0;
}

.poll-creator {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.poll-question-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-sidebar);
	font-size: 14px;
	font-family: inherit;
	background: var(--bg-message);
	color: var(--text-primary);
	box-sizing: border-box;
}

.poll-question-input:focus {
	outline: none;
	border-color: var(--text-sidebar-username);
}

.poll-question-input::placeholder {
	color: var(--text-muted);
}

.poll-options-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.poll-option-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.poll-option-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--border-sidebar);
	font-size: 13px;
	font-family: inherit;
	background: var(--bg-message);
	color: var(--text-primary);
}

.poll-option-input:focus {
	outline: none;
	border-color: var(--text-sidebar-username);
}

.poll-option-input::placeholder {
	color: var(--text-muted);
}

.poll-option-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.poll-option-input-row .btn-remove {
	margin-left: 6px;
}

.poll-add-option-btn {
	background: none;
	border: 1px dashed var(--border-sidebar);
	color: var(--text-muted);
	padding: 8px 12px;
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s;
}

.poll-add-option-btn:hover {
	border-color: var(--text-sidebar-username);
	color: var(--text-sidebar-username);
}

.poll-allow-multiple-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted);
	user-select: none;
	padding: 4px 0;
}

.poll-multiple-footer {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 8px;
	padding-top: 8px;
	user-select: none;
	border-top: 1px dashed var(--border-sidebar);
}

.poll-multiple-footer i {
	font-size: 14px;
}

.poll-container {
	margin-top: 10px;
	padding: 12px;
	background: var(--bg-sidebar);
	border: 1px solid var(--border-sidebar);
}

.poll-question {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 12px;
}

.poll-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.poll-vote-option {
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s;
}

.poll-vote-option:hover {
	border-color: var(--text-sidebar-username);
}

.poll-vote-option.voted {
	border-color: var(--text-sidebar-username);
	border-width: 2px;
}

.poll-option-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: color-mix(in srgb, var(--text-sidebar-username) 15%, transparent);
	transition: width 0.3s ease;
	z-index: 0;
}

.poll-vote-option.voted .poll-option-bar {
	background: color-mix(in srgb, var(--text-sidebar-username) 25%, transparent);
}

.poll-option-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 10px 12px;
	gap: 10px;
}

.poll-vote-checkbox {
	width: 18px;
	height: 18px;
	border: 2px solid var(--border-sidebar);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s;
}

.poll-vote-option.voted .poll-vote-checkbox {
	background: var(--text-sidebar-username);
	border-color: var(--text-sidebar-username);
	color: white;
}

.poll-vote-checkbox i {
	font-size: 12px;
	opacity: 0;
}

.poll-vote-option.voted .poll-vote-checkbox i {
	opacity: 1;
}

.poll-option-text {
	flex: 1;
	font-size: 14px;
	color: var(--text-primary);
	word-break: break-word;
}

.poll-option-stats {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.poll-option-voters {
	display: flex;
	align-items: center;
}

.poll-voter-avatar {
	width: 22px;
	height: 22px;
	border: 2px solid var(--bg-sidebar);
	object-fit: cover;
	margin-left: -8px;
}

.poll-voter-avatar:first-child {
	margin-left: 0;
}

.poll-more-voters {
	width: 22px;
	height: 22px;
	background: var(--bg-message);
	border: 2px solid var(--bg-sidebar);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--text-muted);
	margin-left: -8px;
	cursor: pointer;
	transition: background 0.2s;
}

.poll-more-voters:hover {
	background: var(--border-sidebar);
}

.poll-option-percentage {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	min-width: 38px;
	text-align: right;
}

.poll-option-count {
	font-size: 12px;
	color: var(--text-muted);
	min-width: 20px;
	text-align: right;
}

.poll-total-votes {
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.poll-total-votes i {
	display: flex;
	align-items: center;
	justify-content: center;
}

.post-separator {
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
}

.wall-post-tab.disabled-in-poll,
.disabled-in-poll {
	opacity: 0.4;
	cursor: not-allowed !important;
}

#global-poll-question-preview {
	text-align: center;
}

.poll-post .poll-question,
.poll-creator .poll-question {
	font-size: 15px;
	font-weight: 600;
	font-style: italic;
	font-family: 'Over the Rainbow';
	color: var(--text-muted, #65676b);
	margin-bottom: 10px;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.poll-post .poll-options-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.poll-post .poll-vote-option {
	display: flex;
	user-select: none;
	align-items: center;
	gap: 8px;
}

.poll-post .poll-option-content {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	border: 1px solid var(--border-sidebar);
	background: var(--bg-main);
	overflow: hidden;
	min-height: 26px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 8px;
}

.poll-post .poll-vote-option.selected .poll-option-content {
	border-color: var(--text-sidebar-username);
}

.poll-post .poll-option-bar-container {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 0;
}

.poll-post .poll-option-bar {
	height: 100%;
	background: color-mix(in srgb, var(--text-sidebar-username) 25%, transparent);
	transition: width 0.3s ease;
}

.poll-post .poll-option-text {
	position: relative;
	z-index: 1;
	font-size: 13px;
	color: var(--text-sidebar-username);
	font-weight: 600;
	flex: 1;
	min-width: 0;
}

.poll-post .poll-option-vote-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	white-space: nowrap;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.poll-post .poll-option-voters {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
	align-items: flex-end;
	position: relative;
	overflow: visible;
}

.poll-post .poll-vote-option {
	overflow: visible;
}

.poll-voter-avatar-small {
	width: 33px;
	height: 33px;
	-webkit-user-drag: none;
	border: 1px solid var(--bg-main);
	object-fit: cover;
	margin-top: -4px;
}

.poll-voter-avatar-small:first-child {
	margin-top: 0;
}

.poll-post .poll-show-more-voters {
	width: 33px;
	height: 33px;
	border: 1px solid var(--border-primary);
	background: var(--bg-message);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	color: rgb(0 0 0 / 30%);

	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	overflow: visible;
}

.poll-post .poll-show-more-voters:hover {
	cursor: help;
}

.poll-post .poll-show-more-voters:hover .poll-voters-floating {
	opacity: 1;
	visibility: visible;
	transform: translateY(-5px);
}

.poll-post .poll-show-more-voters .poll-voters-floating {
	position: absolute;
	bottom: 100%;
	right: 0;
	left: auto;
	top: auto;
	padding: 6px 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	width: max-content;
	max-width: 300px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	background: var(--bg-sidebar);
	border: 1px solid var(--border-sidebar);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	transform: translateY(0);
}

.poll-post .poll-show-more-voters .poll-voters-floating::after {
	left: auto;
	right: 8px;
	transform: rotate(45deg);
}

.seen-status {
	font-family: 'Over the Rainbow', cursive;
	font-size: 14px;
	color: var(--text-muted);
	opacity: 0.7;
	text-align: right;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	user-select: none;
	pointer-events: none;
}

.seen-status i {
	font-size: 16px;
}

.seen-status.seen-by-others i {
	color: var(--text-sidebar-username);
	opacity: 1;
}

/* ── cookie notice ──
   The site's floating popup (utils/cookie-consent.js), pinned to a corner:
   above the phone nav on small screens. */
.cookie-consent-popup {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 2147483000;
	width: min(360px, calc(100vw - 24px));
	font: 11px/1.45 Arial, sans-serif;
}

.cookie-consent-body {
	padding: 10px 12px 12px;
	background: var(--bg-container);
}

.cookie-consent-body p {
	margin: 0 0 8px;
	color: var(--text-secondary);
}

.cookie-consent-current {
	color: var(--text-muted) !important;
}

.cookie-consent-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
}

.cookie-consent-essential {
	min-height: 30px;
	padding: 0 12px;
	border: 1px solid var(--border-primary);
	background: var(--bg-button-secondary, linear-gradient(to bottom, #f7f7f7, #e8e8e8));
	color: var(--text-primary);
	font: bold 11px/1 Arial, sans-serif;
	text-transform: lowercase;
	cursor: pointer;
}

.cookie-consent-essential:hover,
.cookie-consent-essential:focus-visible {
	background: var(--bg-button-secondary-hover, linear-gradient(to bottom, #fff, #eee));
	outline: none;
}

@media (max-width: 800px) {
	.cookie-consent-popup {
		right: 8px;
		bottom: calc(52px + env(safe-area-inset-bottom, 0px));
		left: 8px;
		width: auto;
	}
}

/* ── the sign-in gate ──
   Closes a signed-out list (the read-only highlights, a public profile's
   wall; utils/guest-gate.js): the last posts fade out under a log in / sign
   up call and nothing further loads. The fade sits over the posts above it. */
.guest-gate {
	--guest-gate-fade: 320px;
	position: relative;
	z-index: 2;
	margin-top: calc(var(--guest-gate-fade) * -1);
	pointer-events: none;
}

.guest-gate-fade {
	height: var(--guest-gate-fade);
	background: linear-gradient(to bottom, transparent, var(--bg-container) 85%);
}

.guest-gate-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 8px 24px 32px;
	background: var(--bg-container);
	pointer-events: auto;
}

.guest-gate-copy {
	min-width: 0;
}

h2.guest-gate-title {
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	font-size: 20px;
	color: var(--text-primary);
	overflow: visible;
}

h2.guest-gate-title::before {
	content: none;
}

.guest-gate-text {
	margin: 0;
	color: var(--text-secondary);
}

.guest-gate-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 260px;
}

@media (max-width: 768px) {
	.guest-gate {
		--guest-gate-fade: 220px;
	}

	.guest-gate-panel {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 4px 16px 24px;
	}

	.guest-gate-actions {
		flex-basis: auto;
	}
}

/* ── empty states ──
   The one "nothing here" block (emptyStateHTML in helpers.js): a glyph and a
   line, centred. Games, discovery, the blinkies market and settings > support
   all use it. */
.global-no-results {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding: 30px 20px;
	background: color-mix(in srgb, var(--bg-container) 60%, transparent);
	border: 1px dashed var(--border-primary);
	color: var(--text-muted);
	text-align: center;
}

/* In a sidebar the empty block sits flat, without its dashed box, in the
   middle of the room it has. */
:is(.page-sidebar, .full-layout-sidebar, .online-sidebar, .highlights-right-sidebar, .user-sidebar, .scrobble-section) .global-no-results {
	flex: 1 1 auto;
	margin-block: auto;
	border: 0;
	background: none;
}

.global-no-results i {
	margin-bottom: 10px;
	font-size: 32px;
	opacity: 0.5;
}

.global-no-results span {
	font-family: 'Over the Rainbow';
	font-size: 12px;
	font-weight: bold;
}

/* ── Hover text (used site-wide) ──
   A .has-floating-text element keeps its words in a hidden
   .dock-floating-text child. On hover, floating-tooltip.util.js shows them in
   the shared context menu's tooltip variant (.context-menu.is-tooltip in
   context-menu.css), so there is one panel style for menus and hover text. */
.has-floating-text {
	position: relative;
}

.dock-floating-text {
	display: none !important;
}

/* ── Chat main header bar ───────────────────────────── */
.chat-amin-header {
	display: flex;
	align-items: center;
	padding: 0 10px 0 14px;
	height: 38px;
	min-height: 38px;
	flex-shrink: 0;
	background: var(--bg-sidebar-header);
	border-bottom: 1px solid var(--border-sidebar-header);
	position: relative;
	z-index: 20;
	gap: 8px;
}

.chat-amin-room-name {
	flex: 1;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-sidebar-header);
	text-transform: lowercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
}

/* The mini chat's "open full chat" is a .btn-glyph at the bar's size. */
.chat-preview-settings-btn {
	width: 24px;
	height: 24px;
	padding: 0;
	font-size: 14px;
}

.chat-amin-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

/* ── Room dock drop-down panel (top-anchored) ────────── */
.room-dock-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 19;
	overflow: hidden;
	max-height: 0;
	background: var(--bg-sidebar-header);
	box-shadow: none;
}

.room-dock-panel.expanded {
	max-height: 52px;
}

/* ── Room tabs: flat pill grid ───────────────────────── */
.room-dock-tabs {
	display: flex;
	align-items: stretch;
	height: 100%;
	min-height: 32px;
	background: transparent;
	user-select: none;
	text-transform: lowercase;
	gap: 0;
	position: relative;
	z-index: 1;
}

.room-tab {
	flex: 1;
	display: flex;
	color: rgba(255, 255, 255, 0.65);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition: background 0.15s ease, color 0.15s ease;
	z-index: 1;
	padding: 0 8px;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.room-tab:last-child {
	border-right: none;
}

.room-tab:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.room-tab.active {
	color: var(--text-sidebar-username);
	background: var(--bg-sidebar);
	font-weight: 700;
}

.room-tab-content {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	z-index: 2;
	max-width: 100%;
}

.room-tab.active .room-tab-content {
	color: inherit;
}

.room-tab.has-unread .room-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.room-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: #e41e3f;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
	.room-tab {
		padding: 0 4px;
	}

	.chat-amin-room-name {
		display: none;
	}

	.chat-amin-header {
		justify-content: center;
		padding: 0 10px;
	}

	.room-tab-content {
		font-size: 10px;
		justify-content: center;
	}

	.room-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chat-main {
		width: 100% !important;
	}

	.online-sidebar {
		display: none;
	}

	.online-sidebar.visible {
		display: flex !important;
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		width: 50vw;
		z-index: 2000;
		transform: translateX(100%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		border-left: 1px solid var(--border-sidebar);
		background: var(--bg-sidebar);
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
		overflow: visible !important;
	}

	.online-sidebar.visible.revealed {
		transform: translateX(0);
	}

	.online-sidebar-handle {
		display: flex !important;
		position: absolute !important;
		left: 0 !important;
		top: 37px !important;
		height: 22px !important;
		padding: 3px 12px !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer !important;
		transform-origin: top left !important;
		transform: rotate(90deg) !important;

		z-index: -1 !important;

		box-shadow: none !important;
		user-select: none !important;
		white-space: nowrap !important;
		transition: height 0.2s ease, padding 0.2s ease !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	.online-sidebar-handle:hover {
		height: 24px !important;
		padding-top: 5px !important;
		padding-bottom: 3px !important;
	}

	.online-sidebar-handle:active {
		transform: rotate(90deg) !important;
		background: transparent !important;
	}

	.online-sidebar-handle::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;

		background: var(--text-sidebar-username);
		border: 1px solid var(--border-primary);
		border-top: none;
		border-radius: 0 0 4px 4px;
		transform: perspective(100px) rotateX(-15deg) scaleY(1.2);
		transform-origin: top center;
		backface-visibility: hidden;
		width: 110%;
		margin-left: -5%;
		transition: transform 0.2s ease, background 0.2s ease;
	}

	.online-sidebar-handle:hover::before {
		transform: perspective(100px) rotateX(-15deg) scaleY(1.2);
		background: var(--text-sidebar-username);
	}

	.handle-text {
		font-size: 10px !important;
		font-weight: bold !important;
		color: white !important;
		text-transform: lowercase !important;
		writing-mode: horizontal-tb !important;
		transform: rotate(180deg) !important;
		pointer-events: none !important;
	}

	.chat-main {
		width: 100% !important;
	}

	#global-wall-page .highlights-right-sidebar {
		display: flex !important;
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		width: 50vw;
		z-index: 2000;
		flex-direction: column;
		background: transparent !important;
		transform: translateX(100%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		border-left: 1px solid var(--border-sidebar);
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
		overflow: visible !important;
	}

	#global-wall-page .highlights-right-sidebar .mini-post-container:first-child {
		overflow: visible !important;
		background: transparent !important;
	}

	#global-wall-page .highlights-right-sidebar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--bg-sidebar);
		z-index: -1;
	}

	#global-wall-page .highlights-right-sidebar.revealed {
		transform: translateX(0);
	}

	.highlights-sidebar-handle {
		display: flex !important;
		position: absolute !important;
		left: 0 !important;
		top: 100% !important;
		height: 22px !important;
		padding: 3px 12px !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer !important;

		transform-origin: top left !important;
		transform: rotate(90deg) !important;
		z-index: -2 !important;

		box-shadow: none !important;
		user-select: none !important;
		white-space: nowrap !important;
		transition: height 0.2s ease, padding 0.2s ease !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	.highlights-sidebar-handle:hover {
		height: 24px !important;
		padding-top: 5px !important;
		padding-bottom: 3px !important;
	}

	.highlights-sidebar-handle:active {
		transform: rotate(90deg) !important;
		background: transparent !important;
	}

	.highlights-sidebar-handle::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		background: var(--text-sidebar-username);
		border: 1px solid var(--border-primary);
		border-top: none;
		border-radius: 0 0 4px 4px;
		transform: perspective(100px) rotateX(-15deg) scaleY(1.2);
		transform-origin: top center;
		backface-visibility: hidden;
		width: 110%;
		margin-left: -5%;
		transition: transform 0.2s ease, background 0.2s ease;
	}

	.highlights-sidebar-handle:hover::before {
		transform: perspective(100px) rotateX(-15deg) scaleY(1.2);
		background: var(--text-sidebar-username);
	}
}

@media (max-width: 768px) {

	.chat-layout #current-user-sidebar {
		position: fixed !important;
		left: 0;
		top: 0;
		bottom: 0;
		width: 70vw;
		z-index: 3000;
		transform: translateX(-100%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		border-right: 1px solid var(--border-sidebar);
		box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
		overflow: visible !important;
		display: flex !important;
		flex-direction: column;
		background: var(--bg-sidebar);
	}

	.chat-layout #current-user-sidebar.revealed {
		transform: translateX(0);
	}

	.user-sidebar-handle {
		display: flex !important;
		position: absolute !important;
		left: 100% !important;
		top: 37px !important;
		height: 22px !important;
		padding: 3px 12px !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer !important;

		transform-origin: top left !important;
		transform: rotate(-90deg) translateX(-100%) !important;

		z-index: -2 !important;

		box-shadow: none !important;
		user-select: none !important;
		white-space: nowrap !important;
		transition: height 0.2s ease, padding 0.2s ease !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	.user-sidebar-handle .handle-text {
		transform: rotate(0deg) !important;
	}

	.user-sidebar-handle:hover {
		height: 24px !important;
		padding-top: 5px !important;
		padding-bottom: 3px !important;
	}

	.user-sidebar-handle:active {
		transform: rotate(-90deg) translateX(-100%) !important;
		background: transparent !important;
	}

	.user-sidebar-handle::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		background: var(--text-sidebar-username);
		border: 1px solid var(--border-primary);
		border-top: none;
		border-bottom: 1px solid var(--border-primary);
		border-radius: 0 0 4px 4px;

		transform: perspective(100px) rotateX(-15deg) scaleY(1.2);
		transform-origin: top center;
		backface-visibility: hidden;
		width: 110%;
		margin-left: -5%;
		transition: transform 0.2s ease, background 0.2s ease;
	}

	.user-sidebar-handle:hover::before {
		transform: perspective(100px) rotateX(-15deg) scaleY(1.2);
		background: var(--text-sidebar-username);
	}
}

.online-sidebar-handle,
.highlights-sidebar-handle,
.user-sidebar-handle {
	display: none;
}

.sticker-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 8px !important;
	padding: 8px;
}

.sticker-button {
	width: 100%;
	aspect-ratio: 1;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.sticker-button:hover {
	filter: brightness(1.1);
}

.sticker-button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

img[src*="/api/stickers/"] {
	width: 135px !important;
	height: 138px !important;
	object-fit: contain;
	vertical-align: middle;
}

.sticker-button img[src*="/api/stickers/"],
.emoji-picker-content img[src*="/api/stickers/"],
.sticker-market-view img[src*="/api/stickers/"] {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hidden {
	display: none !important;
}

.sticker-picker-footer {
	justify-content: flex-start;
	padding: 0 8px 0 0;
	gap: 0;
	overflow: hidden;
}

.footer-left-group,
.footer-right-group {
	display: flex;
	height: 100%;
	align-items: center;
}

.footer-left-group {
	flex-shrink: 0;
}

.footer-right-group {
	flex-grow: 1;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.footer-right-group::-webkit-scrollbar {
	display: none;
}

.footer-vertical-divider {
	width: 1px;
	height: 24px;
	background-color: var(--line-soft);
	margin: 0 8px;
	flex-shrink: 0;
}

.sticker-picker-footer .emoji-nav-btn {
	flex: 0 0 40px;
	width: 40px;
}

.sticker-market-view {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message) 100%, #ffffff) 0%, rgba(255, 255, 255, 100) 100%);
	display: flex;
	flex-direction: column;
	padding: 20px 15px;
}

.sticker-market-header {
	text-align: center;
	margin-bottom: 15px;
	user-select: none;
	flex-shrink: 0;
}

.market-big-icon {
	font-size: 42px;
	color: var(--text-muted);
	margin-bottom: 12px;
}

.market-title {
	font-size: 20px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.5);
	margin: 0 0 8px;
	border: none !important;
	padding: 0;
}

.market-description {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.2);
	margin: 0;
}

.sticker-market-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

.sticker-pack-card {
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	padding: 12px;
	display: flex;
	user-select: none;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@keyframes stickerPackFocusPulse {
	0%,
	100% {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		border-color: var(--border-primary);
	}

	50% {
		box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12);
		border-color: #3b5998;
	}
}

.sticker-pack-card.sticker-pack-card-focus {
	animation: stickerPackFocusPulse 0.75s ease-in-out 2;
}

.card-previews {
	display: flex;
	gap: 8px;
	height: 110px;
}

.card-previews img {
	-webkit-user-drag: none;
}

.card-preview-big {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-width: 0;
}

.card-preview-big img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block;
}

.sticker-pack-card.expanded {
	height: auto;
}

.sticker-pack-card.expanded .card-previews {
	display: block;
	height: auto;
}

.sticker-pack-card.expanded .card-preview-big {
	display: none;
}

.sticker-pack-card.expanded .card-preview-small-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	height: auto;
	max-height: 220px;
	overflow-y: auto;
}

.card-preview-small-grid {
	width: 150px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 4px;
	flex-shrink: 0;
}

.card-preview-small-grid img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 2px;
	display: block;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.card-info {
	flex: 1;
	min-width: 0;
}

.card-name {
	font-size: 14px;
	font-weight: 600;
	color: #1c1e21;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.status-update-item {
	text-align: left;
	width: 100%;
}

.status-inline-icon {
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	margin: 0 4px;
	object-fit: contain;
}

.status-update-header {
	display: flex;
	align-items: flex-start;
}

.status-update-text {
	margin-left: 6px;
	color: var(--text-muted);
	font-style: italic;
	line-height: 1.4;
}

.status-update-text a {
	font-style: normal;
}

.status-update-timestamp {
	font-size: 0.95em;
	color: var(--text-muted);
	margin-left: 8px;
	margin-top: 1px;
	white-space: nowrap;
	font-style: normal;
}

.status-update-icon {
	margin-top: 2px;
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.status-update-icon.site-sprite-icon {
	width: 18px;
	height: 18px;
	background-size: 18px auto;
	margin-top: 0;
	opacity: 1;
}

.status-update-list {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 0;
	padding-left: 0;
	vertical-align: baseline;
}

.status-update-line {
	font-size: 11px;
	line-height: 1.4;
	color: var(--text-muted);
	font-style: italic;
}

.status-update-line i {
	margin-right: 4px;
}

/* What a status update is about (utils/status-updates.js): the comment or
   post it quotes, and the post's picture or video beside it, like an old
   mini-feed story. */
.status-update-detail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: min(440px, 100%);
	margin-top: 6px;
	text-align: left;
}

.status-update-quote {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--text-muted);
	font-size: 11px;
	font-style: normal;
	line-height: 1.45;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.status-update-quote::before {
	content: '\201C';
	color: var(--text-sidebar-username);
	font-weight: bold;
}

.status-update-quote::after {
	content: '\201D';
	color: var(--text-sidebar-username);
	font-weight: bold;
}

.status-detail-thumb {
	position: relative;
	flex: 0 0 auto;
}

.status-detail-thumb .status-thumb {
	width: 64px;
	height: 64px;
}

.status-detail-thumb.is-video {
	display: block;
	cursor: pointer;
}

.status-thumb-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 24px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

.chat-preview-container {
	position: fixed;
	bottom: 0;
	right: 20px;
	width: 320px;
	max-height: 420px;
	height: 420px;
	background: var(--bg-container);
	border: 1px solid var(--border-primary);
	border-bottom: none;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	z-index: 1000;
	overflow: visible;
}

/* With the full layout's sidebar, the mini chat docks beside it. */
body.has-full-sidebar .chat-preview-container {
	right: calc(var(--full-sidebar-width) + 12px);
}

/* Closed, the mini chat is a small tab with the chat's globe (the roadmap's
   "all items" glyph) and its unread badge, like an old chat bar's tabs.
   Opening and closing are instant. Open, its header is unchanged. */
.chat-preview-container.collapsed {
	width: auto;
	height: auto;
	max-height: none;
	background: none;
	border: 0;
	box-shadow: none;
}

.chat-preview-container.collapsed .chat-preview-body,
.chat-preview-container.collapsed :is(.chat-preview-online-dot, .chat-preview-online-count, .chat-preview-title, .chat-preview-header-right),
.chat-preview-container:not(.collapsed) .chat-preview-tab-icon {
	display: none;
}

.chat-preview-container.collapsed .chat-preview-header {
	justify-content: center;
	width: 34px;
	height: 30px;
	min-height: 30px;
	padding: 0;
	cursor: pointer;
	background: linear-gradient(to bottom, var(--bg-container), var(--bg-message));
	border: 1px solid var(--border-primary);
	border-bottom: 0;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12);
}

.chat-preview-container.collapsed .chat-preview-header:hover {
	background: var(--bg-container);
}

.chat-preview-container.collapsed .chat-preview-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
}

.chat-preview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 12px;
	cursor: alias;
	user-select: none;
	min-height: 36px;
	box-sizing: border-box;
	position: relative;
	overflow: visible;

	background: var(--bg-sidebar-header);
	color: var(--text-sidebar-header);
	font-size: 12px;
	font-weight: bold;
	border-bottom: 1px solid var(--border-sidebar-header);
}

.chat-preview-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.chat-preview-title {
	font-size: 12px;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: 0.5px;
}

.chat-preview-badge {
	background: #e41e3f;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: badgePop 0.3s ease-out;
}

.chat-preview-header-right {
	display: flex;
	align-items: center;
	gap: 4px;
}

.chat-preview-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	height: calc(420px - 36px);
	max-height: calc(420px - 36px);
}

.chat-preview-window {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px;
	background: linear-gradient(0deg,
			color-mix(in srgb, var(--bg-message, #f2f2f2) 100%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
	min-height: 0;
}

.chat-preview-window .message {
	margin-bottom: 8px;
}

.chat-preview-window .message-pfp {
	width: 28px;
	height: 28px;
	margin-right: 6px;
}

.chat-preview-window .message.own .message-pfp {
	margin-right: 0;
	margin-left: 6px;
}

/* Align reactions with smaller avatar in preview (28px + 6px = 34px, not 42px) */
.chat-preview-window .message-reactions {
	padding: 2px 0 0 34px;
}

.chat-preview-window .message.own .message-reactions {
	padding-left: 0;
	padding-right: 34px;
}

.chat-preview-window .message-bubble {
	font-size: 11px;
	padding: 5px 8px;
	max-width: 200px;
}

.chat-preview-window .message-bubble::before {
	width: 8px;
	height: 8px;
	top: 9px;
	left: -5px;
}

.chat-preview-window .message.own .message-bubble::before {
	left: auto;
	right: -5px;
}

.chat-preview-window .system-message {
	font-size: 10px;
	margin-bottom: 6px;
	padding: 2px 0;
}

.chat-preview-window .system-message::before,
.chat-preview-window .system-message::after {
	max-width: 60px;
}

.chat-preview-typing-indicator {
	padding: 4px 10px;
	font-size: 10px;
	user-select: none !important;
	color: var(--text-muted);
	font-style: italic;
	display: none;
	border-top: 1px solid var(--border-primary);
	background: var(--bg-message);
}

.chat-preview-form {
	display: flex;
	padding: 6px;
	gap: 6px;
	background: var(--bg-message);
	border-top: 1px solid var(--border-primary);
}

.chat-preview-input-wrapper {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	background: var(--bg-input);
	border: 1px solid var(--line-medium);
}

.chat-preview-input-wrapper:focus-within {
	border-color: var(--border-input-focus, #5890ff);
}

#chat-preview-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 6px 30px 6px 8px;
	font-size: 11px;
	font-family: inherit;
	resize: none;
	overflow-y: auto;
	min-height: 28px;
	max-height: 80px;
	line-height: 1.4;
	outline: none;
}

.chat-preview-input-icons {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 2px;
}

#chat-preview-send-btn {
	--btn-h: 28px;
	height: 28px;
}

body[data-active-view="chat-page"] .chat-preview-container,
body[data-active-view="auth-page"] .chat-preview-container {
	display: none !important;
}

@media (max-width: 768px) {
	.chat-preview-container {
		display: none !important;
	}
}

.chat-preview-online-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #44b700;
	display: inline-block;
}

.chat-preview-online-count {
	font-size: 10px;
	font-weight: normal;
	opacity: 0.9;
}

.chat-preview-typing {
	display: none;
	padding: 5px 10px;
	user-select: none;
	background: var(--bg-message);
	border-top: 1px solid var(--border-primary);
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--text-muted);
}

.chat-preview-typing .typing-pfp-stack {
	display: flex;
	align-items: center;
}

.chat-preview-typing .typing-pfp {
	width: 18px;
	height: 18px;
	border: 1px solid var(--bg-container);
	margin-left: -6px;
	object-fit: cover;
	background-color: var(--line-soft);
}

.chat-preview-typing .typing-pfp:first-child {
	margin-left: 0;
}

.chat-preview-typing .typing-info {
	margin-left: 6px;
	font-size: 10px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 4px;
}

.chat-preview-typing .typing-dots {
	display: inline-block;
}

.chat-preview-typing .typing-dots span {
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #999;
	margin: 0 1px;
	animation: typing-blink 1.4s infinite both;
}

.chat-preview-typing .typing-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.chat-preview-typing .typing-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

.chat-preview-reply-indicator {
	display: flex;
	align-items: center;
	user-select: none;
	justify-content: space-between;
	padding: 5px 10px;
	background: var(--bg-message);
	border-top: 1px solid var(--border-primary);
	font-size: 11px;
	color: var(--text-muted);
	gap: 8px;
}

.chat-preview-typing.active+.chat-preview-reply-indicator {
	border-top: none;
}

.chat-preview-typing.active~.chat-preview-form,
.chat-preview-reply-indicator~.chat-preview-form {
	border-top: none;
}

.chat-preview-reply-indicator .reply-indicator-content {
	display: flex;
	align-items: center;
	gap: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.chat-preview-reply-indicator .reply-indicator-content i {
	font-size: 12px;
	color: var(--text-link)
}

.chat-preview-reply-indicator .reply-indicator-content strong {
	color: var(--text-link, #3b5998);
}

.chat-preview-reply-indicator .reply-indicator-close {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.chat-preview-reply-indicator .reply-indicator-close:hover {
	color: #e41e3f;
}

/* Disable custom font (Over the Rainbow) - accessibility setting */
body.disable-custom-font .page-nav-category,
body.disable-custom-font .page-header-description,
body.disable-custom-font .unsaved-changes-text,
body.disable-custom-font .css-editor-header-title,
body.disable-custom-font .welcome-step-title,
body.disable-custom-font .framed-panel-header,
body.disable-custom-font .roadmap-feed-header,
body.disable-custom-font .auth-header-title,
body.disable-custom-font .auth-form-header-description,
body.disable-custom-font #typing-text,
body.disable-custom-font .highlights-header-description,
body.disable-custom-font .poll-post .poll-question,
body.disable-custom-font .poll-creator .poll-question,
body.disable-custom-font .seen-status,
body.disable-custom-font .context-menu.is-tooltip {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.profile-header-bg.draggable-banner {
	cursor: move !important;
}

#user-hover-preview-card.user-hover-preview-card {
	position: absolute;
	width: 328px;
	max-width: calc(100vw - 16px);
	z-index: 3500;
	display: none;
	max-height: calc(100dvh - 16px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	pointer-events: auto;
	isolation: isolate;
}

#user-hover-preview-card.visible {
	display: block;
	animation: profilePopoverIn var(--animation-duration, 0.14s) ease-out;
}

@keyframes profilePopoverIn {
	from {
		opacity: 0;
		transform: translateY(4px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.user-hover-preview-loading {
	min-height: 72px;
	padding: 14px;
	font-size: 11px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--bg-container), var(--bg-message, #f4f6f8));
}

.user-hover-preview-banner {
	position: relative;
	height: 76px;
	background-color: var(--bg-sidebar-header, #3b5998);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--border-primary);
}

.user-hover-preview-main {
	position: relative;
	padding: 0 12px 12px;
}

/* The full profile's banner "more" button (.profile-edit-btn), in the mini
   profile's banner corner: report and block (docs/blocking.md). */
.user-hover-preview-more-btn {
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	font-size: 15px;
}

/* A profile hidden from the viewer by a block: only that it is unavailable. */
.user-hover-preview-unavailable {
	padding-top: 12px;
}

.user-hover-profile-mini {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.user-hover-preview-top {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-end;
	margin-top: -24px;
	min-width: 0;
}

.user-hover-preview-pfp-wrap {
	position: relative;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
}

.user-hover-preview-pfp {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: var(--bg-container);
	border: 3px solid var(--bg-container);
	border-radius: 0;
	box-shadow: none;
}

.hover-status-dot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border: none;
	border-radius: 50%;
	box-shadow: none;
}

.hover-status-online { background: #43b581; }
.hover-status-idle { background: #faa61a; }
.hover-status-dnd { background: #f04747; }
.hover-status-offline { background: #747f8d; }

.user-hover-preview-meta {
	flex: 1;
	min-width: 0;
	padding: 0 0 3px;
	font-size: 11px;
	color: var(--text-secondary);
}

.user-hover-preview-headline {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 5px;
	min-width: 0;
	margin-bottom: 3px;
	line-height: 1.2;
	overflow: hidden;
}

.user-hover-preview-headline .user-hover-preview-username {
	display: block;
	flex: 0 1 auto;
	max-width: 100%;
	min-width: 0;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-hover-preview-name {
	max-width: 100%;
	min-width: 0;
	color: var(--text-secondary, #555);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.user-hover-preview-pronouns {
	flex: 0 1 auto;
	max-width: 45%;
	min-width: 0;
	font-size: 10px;
	opacity: 0.72;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-hover-preview-subline {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	font-size: 10px;
	line-height: 1.2;
}

.user-profile-popover-handle,
.user-hover-preview-status {
	min-width: 0;
	color: var(--text-muted, #8b8f95);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-profile-popover-status-separator {
	color: var(--border-primary, #bdc7d8);
}

.user-hover-preview-status {
	text-transform: lowercase;
}

.user-hover-preview-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
	padding-top: 1px;
}

.user-hover-preview-badges .user-sidebar-role-badge {
	max-width: 100%;
	margin: 0;
	font-size: 9px;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.user-profile-popover-theme-consent {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 8px;
	background: color-mix(in srgb, #fff2bd 44%, var(--bg-container));
	border: 1px solid color-mix(in srgb, #b36b00 38%, var(--border-primary));
	color: var(--text-primary);
	font-size: 10px;
	line-height: 1.35;
}

.user-profile-popover-theme-consent-copy {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.user-profile-popover-theme-consent-copy i {
	flex: 0 0 auto;
	margin-top: 1px;
	color: #b36b00;
	font-size: 13px;
}

.user-profile-popover-theme-consent-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.user-profile-popover-section {
	padding: 7px 8px;
	background: color-mix(in srgb, var(--bg-message, #f2f3f5) 86%, transparent);
	border-left: 3px solid var(--color-primary, #3b5998);
}

.user-profile-popover-label {
	display: block;
	margin-bottom: 3px;
	color: var(--text-muted, #777);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
}

.user-hover-preview-about {
	display: -webkit-box;
	overflow: hidden;
	color: var(--text-primary);
	font-size: 11px;
	line-height: 1.35;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.user-hover-preview-row {
	overflow: hidden;
	color: var(--text-primary);
	font-size: 10px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-profile-popover-now-playing {
	display: flex;
	align-items: center;
	gap: 8px;
	border-left-color: #1db954;
	color: inherit;
	text-decoration: none;
}

a.user-profile-popover-now-playing {
	cursor: alias;
}

a.user-profile-popover-now-playing:hover,
a.user-profile-popover-now-playing:focus-visible {
	background: color-mix(in srgb, #1db954 10%, var(--bg-message, #f2f3f5));
	outline: 1px solid color-mix(in srgb, #1db954 55%, var(--border-primary));
	outline-offset: -1px;
}

.user-profile-popover-cover {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	object-fit: cover;
	border: 1px solid var(--border-primary);
	-webkit-user-drag: none;
}

.user-profile-popover-track-info {
	flex: 1;
	min-width: 0;
}

.user-profile-popover-now-playing .user-profile-popover-label {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #1db954;
}

.user-profile-popover-now-playing .user-profile-popover-label i {
	font-size: 11px;
}

.user-profile-popover-artist {
	color: var(--text-muted, #777);
}

.user-hover-preview-socials {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 18px;
	padding: 1px 2px;
}

.hover-social-icon {
	width: 15px;
	height: 15px;
	object-fit: contain;
	opacity: 0.8;
	transition: opacity 0.15s ease;
}

.user-hover-preview-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.user-hover-preview-social-link:hover .hover-social-icon,
.user-hover-preview-social-link:focus-visible .hover-social-icon {
	opacity: 1;
}

.user-hover-preview-social-link:focus-visible {
	outline: 1px solid var(--color-primary, #3b5998);
	outline-offset: 2px;
}

.user-hover-preview-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 7px;
	padding-top: 2px;
}

@media (max-width: 420px) {
	#user-hover-preview-card.user-hover-preview-card {
		width: calc(100vw - 16px);
	}

	.user-hover-preview-banner {
		height: 68px;
	}
}

body.global-loading-cursor,
body.global-loading-cursor * {
	cursor: progress !important;
}

/* ===== Public read-only mode (logged-out /users/:username and /highlights) ===== */

/* Hide search bar and any auth-gated nav elements. The public header
   (highlights, log in and sign up links) is rendered by app.js — keep it
   visible. Signed-out highlights has no "my profile", pokes or birthdays. */
body.public-profile-mode #header-search-container,
body.public-profile-mode #online-users-sidebar,
body.public-profile-mode #roadmap-container,
body.public-profile-mode #chat-preview-container,
body.public-profile-mode #user-profile-sidebar,
body.public-profile-mode #global-wall-page #current-user-sidebar,
body.public-profile-mode #global-wall-page .highlights-right-sidebar,
body.public-profile-mode #global-wall-page .highlights-sort-btn,
body.public-profile-mode #global-wall-page .highlights-active-filters,
body.public-profile-mode .mobile-search-nav-btn {
	display: none !important;
}

/* Hide all interactive controls inside the public profile view. A post's
   actions row stays, empty, so the post keeps its spacing; only its buttons
   go. The like-status-bar is intentionally NOT hidden — it lives inside the
   .comment-form-container (so we hide that container's *children* instead),
   keeping "X people like this." visible for public viewers. */
body.public-profile-mode .wall-post-box,
body.public-profile-mode .wall-post-actions .btn-action,
body.public-profile-mode .comment-form-container .comment-input-row,
body.public-profile-mode .comment-form-container .wall-image-preview,
body.public-profile-mode .gw-comment-like,
body.public-profile-mode .gw-comment-reply:not(.is-view-only),
body.public-profile-mode .item-more-btn,
body.public-profile-mode .status-update-delete-btn,
body.public-profile-mode .profile-edit-btn,
body.public-profile-mode #poke-btn,
body.public-profile-mode .poke-btn {
	display: none !important;
}

body.public-profile-mode .profile-scroll-summary-actions-btn {
	display: none !important;
}

/* Hide the orphan "·" separator that used to sit between the time and the
   now-hidden like/delete buttons. */
body.public-profile-mode .gw-comment-meta .gw-meta-separator {
	display: none !important;
}

/* Public polls display aggregate results without voting or voter identities. */
body.public-profile-mode .poll-vote-option,
body.public-profile-mode .poll-option-checkbox,
body.public-profile-mode .poll-show-more-voters {
	pointer-events: none !important;
}

body.public-profile-mode .poll-option-checkbox,
body.public-profile-mode .poll-option-voters {
	display: none !important;
}

/* Subtle visual cue that you're peeking — keep it minimal. */
body.public-profile-mode .header {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* Note editor content inside the shared site popup window. */
.note-modal-overlay {
	--site-popup-z: 2147483200;
	--site-popup-width: 380px;
}

.note-modal {
	--site-popup-width: 380px;
	max-height: calc(100dvh - 32px);
	font: 11px/1.35 Arial, sans-serif;
}

.note-modal-form {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	padding: 12px;
	overflow-y: auto;
}

.note-modal-preview {
	position: relative;
	align-self: center;
	width: fit-content;
	min-width: 64px;
	max-width: min(100%, 320px);
	min-height: 30px;
	margin: 7px 0 9px;
	box-sizing: border-box;
	pointer-events: none;
}

.note-modal-label {
	color: var(--text-secondary, #666);
	font-size: 10px;
	font-weight: bold;
	user-select: none;
}

.note-modal-text-row { position: relative; }
.note-modal-text,
.note-modal-duration {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--border-primary);
	border-radius: 0;
	background: var(--bg-input);
	color: var(--text-primary);
	font: inherit;
}

.note-modal-text {
	min-height: 70px;
	padding: 7px 32px 7px 7px;
	resize: vertical;
}

.note-modal-text:focus,
.note-modal-duration:focus {
	border-color: var(--border-input-focus, #3b5998);
	outline: none;
}

.note-modal-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 13px;
	margin-top: -4px;
	color: var(--text-muted, #777);
	font-size: 9px;
	user-select: none;
}

.note-modal-duration { height: 29px; padding: 4px 6px; }
.note-color-picker.custom-color-picker {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 7px;
	background: linear-gradient(to bottom, var(--bg-container), var(--bg-message));
	border-color: var(--border-primary);
	box-shadow: none;
}

.note-color-picker .color-picker-left-group { min-width: 0; margin: 0; }
.note-color-picker .color-swatch-wrapper,
.note-color-picker .rainbow-swatch-wrapper {
	display: block;
	box-sizing: border-box;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
}

.note-color-picker .color-swatch,
.note-color-picker .rainbow-swatch {
	display: block;
	box-shadow: none;
}

.note-color-picker .color-value { color: var(--text-primary, #333); }
.note-color-picker .note-modal-color {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.note-color-picker .note-rainbow-trigger {
	appearance: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font: inherit;
}

.note-color-picker .rainbow-swatch {
	background: #f4aaaa;
	animation: note-paper-hue 8s linear infinite;
}

.note-color-picker .rainbow-picker-group.active .rainbow-swatch-wrapper {
	border-color: var(--color-primary, #3b5998);
	outline: 1px solid var(--color-primary, #3b5998);
	box-shadow: none;
}

.note-color-picker .swatch-overlay i { filter: none; }
.note-color-picker .rainbow-overlay { text-shadow: none; }
.note-modal-error {
	margin: 0;
	padding: 5px 7px;
	border-left: 2px solid #b33;
	color: #b33;
	font-size: 10px;
}

.note-modal-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: 3px -12px -12px;
	padding: 8px 12px;
	background: var(--bg-container);
	border-top: 1px solid var(--border-primary);
}

.note-modal-clear,
.note-modal-save {
	min-width: 0;
	min-height: 28px;
	margin: 0;
	padding: 5px 10px;
	border-radius: 0;
	font: 700 10px/1.2 Arial, sans-serif;
	cursor: pointer;
}

.note-modal-clear {
	background: linear-gradient(to bottom, var(--bg-container), var(--bg-message));
	border: 1px solid var(--border-primary);
	color: var(--text-primary);
}

.note-modal-clear:hover { border-color: #b44; color: #a22; }
.note-modal-clear:disabled,
.note-modal-save:disabled { opacity: 0.55; cursor: wait; }

.profile-note-postit,
.user-profile-popover-note {
	--note-color: #fff2a8;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: fit-content;
	min-width: 64px;
	max-width: 100%;
	padding: 7px 9px;
	background: var(--note-color);
	border: 1px solid color-mix(in srgb, var(--note-color) 62%, #776d34);
	border-radius: 0;
	box-shadow: none;
	color: var(--note-ink, #3e381e);
	font: 11px/1.25 'Comic Sans MS', 'Segoe Print', cursive;
	text-align: center;
	transform: rotate(1.5deg);
	transform-origin: top center;
	user-select: none;
	pointer-events: auto;
}

.profile-note-postit::before,
.user-profile-popover-note::before {
	content: '';
	position: absolute;
	top: -5px;
	left: calc(50% - 17px);
	width: 34px;
	height: 10px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(120, 120, 120, 0.14);
	transform: rotate(-4deg);
	pointer-events: none;
}

.profile-note-text,
.user-profile-popover-note-text,
.note-modal-preview-text {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.profile-note-postit[hidden],
.user-profile-popover-note[hidden] { display: none; }
.profile-note-postit.rainbow,
.user-profile-popover-note.rainbow {
	--note-color: #f4aaaa;
	background: #f4aaaa;
	animation: note-paper-hue 8s linear infinite;
}

.profile-note-postit[data-note-edit],
.user-profile-popover-note[data-note-edit] {
	cursor: pointer;
}

.profile-note-postit:focus-visible,
.user-profile-popover-note:focus-visible {
	outline: 1px dotted var(--color-primary, #3b5998);
	outline-offset: 2px;
}

.profile-note-postit:hover .profile-note-text,
.user-profile-popover-note:hover .user-profile-popover-note-text {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
}

.profile-note-postit:hover,
.user-profile-popover-note:hover {
	z-index: 40;
}

.profile-note-slot {
	position: absolute;
	grid-area: about;
	inset: -14px 0 auto;
	z-index: 20;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	min-width: 0;
	pointer-events: none;
}

.profile-note-slot > .profile-note-postit {
	max-width: min(100%, 260px);
	pointer-events: auto;
}

.user-hover-preview-note-slot {
	position: absolute;
	top: 24px;
	right: 0;
	display: flex;
	justify-content: center;
	width: 160px;
	max-width: calc(100% - 74px);
	min-width: 0;
	margin: 0;
	flex: none;
	z-index: 5;
}

.user-hover-preview-note-slot > .user-profile-popover-note {
	max-width: 100%;
	margin: 0;
	padding: 6px 8px;
	font-size: 10px;
	transform: rotate(2deg);
}

.me-status-note-item {
	width: 100%;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	text-align: left;
}

.me-status-note-item > i { width: 8px; font-size: 13px; }
@keyframes note-paper-hue {
	from { filter: hue-rotate(0deg); }
	to { filter: hue-rotate(360deg); }
}

@media (max-width: 768px) {
	.profile-content {
		margin-top: -90px;
	}

	.profile-identity-container {
		--mobile-profile-pfp-size: 151px;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		gap: 12px !important;
		width: 100%;
	}

	.profile-pic-container {
		box-sizing: border-box;
		display: block;
		flex: 0 0 var(--mobile-profile-pfp-size);
		width: var(--mobile-profile-pfp-size);
		height: var(--mobile-profile-pfp-size);
		margin: 0;
	}

	.profile-pic-view {
		width: 100%;
		height: 100%;
	}

	.profile-details-column {
		position: relative;
		display: grid;
		flex: 1 1 auto;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"identity"
			"about";
		grid-template-rows: 80px minmax(0, 1fr);
		align-items: stretch;
		width: auto;
		min-width: 0;
		padding-top: 0;
		text-align: left;
	}

	.profile-identity-text {
		grid-area: identity;
		align-items: flex-start;
		justify-content: flex-end;
		width: 100%;
		max-width: 100%;
		padding-bottom: 4px;
	}

	.profile-username-view {
		margin-bottom: 0;
		align-items: flex-start !important;
		gap: 4px;
		text-align: left !important;
		color: #fff !important;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
	}

	.profile-identity-main {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		width: 100%;
		align-items: baseline !important;
		gap: 4px !important;
		text-align: left !important;
		word-break: break-word !important;
		color: #fff !important;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
	}

	.profile-identity-primary {
		font-size: 1.25rem !important;
		line-height: 1.1;
		text-align: left !important;
	}

	.profile-identity-secondary {
		font-size: 0.8rem !important;
		text-align: left !important;
	}

	.profile-identity-pronouns {
		font-size: 0.75rem !important;
		text-align: left !important;
	}

	.profile-badges-row {
		justify-content: flex-start;
		flex-wrap: wrap !important;
		gap: 4px;
		margin-top: 2px;
	}

	.profile-badges-row .message-badge {
		padding: 2px 5px;
		font-size: 10px;
	}

	.profile-note-slot {
		grid-area: about;
		inset: -10px 0 auto;
		width: 100%;
	}

	.profile-about-me-container {
		grid-area: about;
		box-sizing: border-box;
		width: 100%;
		margin-top: 5px;
		padding: 8px 4px;
		justify-content: flex-start;
		gap: 8px;
	}

	.profile-about-me-text {
		text-align: left;
	}

	.profile-status-container {
		gap: 4px;
		padding: 3px 5px;
		font-size: 9px;
		letter-spacing: 0.25px;
		white-space: nowrap;
	}

	.profile-status-container .online-dot,
	.profile-status-container .offline-dot {
		width: 7px;
		height: 7px;
	}

	.user-hover-preview-note-slot {
		width: 132px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.note-color-picker .rainbow-swatch,
	.profile-note-postit.rainbow,
	.user-profile-popover-note.rainbow {
		animation: none;
	}
}

/* Unified header-attached modal behavior. */
html.site-popup-modal-open,
body.site-popup-modal-open {
	overflow: hidden;
}

body.site-popup-modal-open #global-emoji-picker {
	z-index: 2147483201;
}

.site-popup-modal {
	--site-popup-z: 2147483200;
}

.site-popup-modal .site-popup-dialog {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* A stationary, modal-width seam: never a shadow on the whole header. */
.site-popup-sheet {
	position: relative;
	width: min(var(--site-popup-width, 430px), 100%);
	min-width: 0;
	flex: 0 1 auto;
}
.site-popup-sheet::after {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.27), transparent);
	pointer-events: none;
}

#mobile-header-page-title,
.mobile-app-nav-label,
#mobile-bottom-nav,
#public-account-link {
	display: none;
}

@media (max-width: 800px) {
	.header {
		flex: 0 0 auto;
		height: 44px;
		min-height: 44px;
		padding: 6px 8px;
		box-sizing: border-box;
	}

	#header-content {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr) 34px;
		align-items: center;
		gap: 8px;
		width: 100%;
		height: 32px;
	}

	#typing-text {
		display: none;
	}

	#mobile-header-page-title {
		display: block;
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
		overflow: hidden;
		color: var(--text-header, #fff);
		font: 700 15px/1.1 'Over the Rainbow', cursive, sans-serif;
		letter-spacing: 0.5px;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		user-select: none;
	}

	#header-links {
		display: contents;
	}

	#header-links > * {
		display: none !important;
	}

	#header-links #mobile-search-nav-link,
	#header-links #settings-nav-link,
	#header-links #legal-header-back-link,
	#header-links #public-highlights-link,
	body.public-profile-mode #header-links #public-account-link {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 34px;
		min-width: 34px;
		height: 32px;
		min-height: 32px;
		margin: 0 !important;
		padding: 0 !important;
	}

	#header-links #mobile-search-nav-link {
		grid-column: 1;
		grid-row: 1;
	}

	#header-links #settings-nav-link {
		grid-column: 3;
		grid-row: 1;
	}

	/* Signed out on sign-in and the legal pages: highlights on the right. */
	#header-links #public-highlights-link {
		grid-column: 3;
		grid-row: 1;
	}

	#header-links #legal-header-back-link {
		grid-column: 1;
		grid-row: 1;
	}

	/* Signed out: highlights on the left, the title, then one account
	   button whose menu holds log in and sign up. */
	body.public-profile-mode #header-links #public-highlights-link {
		grid-column: 1;
		grid-row: 1;
	}

	body.public-profile-mode #header-links #public-account-link {
		grid-column: 3;
		grid-row: 1;
	}

	#header-search-container {
		display: none !important;
	}

	.header.mobile-search-open #mobile-header-page-title {
		display: none;
	}

	.header.mobile-search-open #header-content {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr) 34px;
		gap: 8px;
	}

	.header.mobile-search-open #header-search-container {
		display: flex !important;
		grid-column: 2;
		grid-row: 1;
		height: 32px;
	}

	.header.mobile-search-open #header-search-input {
		height: 30px;
		box-sizing: border-box;
	}

	.header.mobile-search-open .global-search-dropdown {
		top: var(--site-popup-anchor-top, 52px);
		max-height: calc(100dvh - var(--site-popup-anchor-top, 52px) - 62px);
		z-index: 2147483100;
	}

 #mobile-bottom-nav:not([hidden]) {
  position: relative;
  z-index: 1200;
  display: grid;
  flex: 0 0 56px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 56px;
  padding: 0;
  background: #30353b;
  border-top: 1px solid #20242a;
 }
 #mobile-bottom-nav :is(a, button) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 5px 2px;
  border: 0;
  border-right: 1px solid rgba(0,0,0,.2);
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.11), transparent 80%), linear-gradient(#41464d, #30353b);
  color: #c4c8cd;
  font: bold 10px/1 Arial, sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 1px #25292e;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
 }
 #mobile-bottom-nav :is(a, button):last-child { border-right: 0; }
 /* One hairline across the top, fading down the sides: no nested frames. */
 #mobile-bottom-nav :is(a, button)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,.27), rgba(255,255,255,.27)) top / 100% 1px no-repeat,
   linear-gradient(rgba(255,255,255,.19), transparent) left top / 1px 80% no-repeat,
   linear-gradient(rgba(255,255,255,.08), transparent) right top / 1px 80% no-repeat;
  pointer-events: none;
 }
 #mobile-bottom-nav :is(a, button) > i { font-size: 23px; line-height: 1; color: inherit; background: none; filter: none; text-shadow: 0 1px 1px #20242a; }
 @supports (background-clip: text) {
  #mobile-bottom-nav :is(a, button):not(#mobile-post-nav-link) > i {
   background: linear-gradient(#e1e4e7 5%, #c6cbd0 45%, #aeb5bd);
   background-clip: text;
   color: transparent;
   text-shadow: none;
   filter: drop-shadow(0 1px 1px rgba(0,0,0,.65));
  }
  #mobile-bottom-nav :is(a, button).header-link-active:not(#mobile-post-nav-link) > i { background-image: linear-gradient(#f0f2f4, #cbd0d6); }
 }
 #mobile-bottom-nav .mobile-app-nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 #mobile-bottom-nav :is(a, button).header-link-active { background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .06), transparent 80%), linear-gradient(#16191c, #474d54); color: #e2e5e8; }
 #mobile-bottom-nav :is(a, button).header-link-active::after { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--color-primary); pointer-events: none; }
 #mobile-bottom-nav :is(a, button):active { background-color: #262b31; background-image: none; }
 #mobile-bottom-nav :is(a, button):focus-visible { outline: 1px solid #cbd0d5; outline-offset: -3px; }
 #mobile-bottom-nav #mobile-post-nav-link { background: var(--bg-button); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
 #mobile-bottom-nav #mobile-post-nav-link:active { background: var(--bg-button-active); }

	#mobile-bottom-nav .nav-notification-badge,
	.mobile-nav-subpage-item .nav-notification-badge {
		position: absolute !important;
		top: 4px !important;
		right: calc(50% - 24px) !important;
		z-index: 3;
		margin: 0 !important;
		transform: none !important;
	}

	/* ── the sub-page dropdown ──
	   The highlights button opens its sub-pages as a stack of the same nav
	   buttons, standing on the bar. A floating context menu over a thumb rail
	   reads as something else entirely, so mobile gets this instead. */
	.mobile-nav-subpage-menu {
		position: fixed;
		z-index: 1300;
		display: flex;
		flex-direction: column;
		background: #30353b;
		border: 1px solid #20242a;
		border-bottom: 0;
		box-shadow: 0 -6px 16px rgba(0, 0, 0, .4);
		animation: mobileNavMenuRise .16s ease-out;
	}

	@keyframes mobileNavMenuRise {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	body.reduce-motion .mobile-nav-subpage-menu {
		animation: none;
	}

	.mobile-nav-subpage-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 100%;
		margin: 0;
		/* The panel is exactly the nav button's column, so the items have to
		   live inside that width the way the buttons below them do. */
		padding: 8px 2px;
		box-sizing: border-box;
		border: 0;
		border-bottom: 1px solid rgba(0, 0, 0, .25);
		border-radius: 0;
		background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .11), transparent 80%), linear-gradient(#41464d, #30353b);
		color: #c4c8cd;
		font: bold 10px/1 Arial, sans-serif;
		text-shadow: 0 1px 1px #25292e;
		appearance: none;
		cursor: pointer;
	}

	.mobile-nav-subpage-item:last-child {
		border-bottom: 0;
	}

	.mobile-nav-subpage-item::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(rgba(255, 255, 255, .27), rgba(255, 255, 255, .27)) top / 100% 1px no-repeat;
		pointer-events: none;
	}

	.mobile-nav-subpage-item > i {
		font-size: 20px;
		line-height: 1;
		color: inherit;
		text-shadow: 0 1px 1px #20242a;
	}

	@supports (background-clip: text) {
		.mobile-nav-subpage-item > i {
			background: linear-gradient(#e1e4e7 5%, #c6cbd0 45%, #aeb5bd);
			background-clip: text;
			color: transparent;
			text-shadow: none;
			filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65));
		}

		.mobile-nav-subpage-item.header-link-active > i {
			background-image: linear-gradient(#f0f2f4, #cbd0d6);
		}
	}

	.mobile-nav-subpage-menu .mobile-app-nav-label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mobile-nav-subpage-item.header-link-active {
		background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .06), transparent 80%), linear-gradient(#16191c, #474d54);
		color: #e2e5e8;
	}

	.mobile-nav-subpage-item.header-link-active::after {
		content: '';
		position: absolute;
		inset: 0 0 auto;
		height: 3px;
		background: var(--color-primary);
		pointer-events: none;
	}

	.mobile-nav-subpage-item:active {
		background-color: #262b31;
		background-image: none;
	}

	.mobile-nav-subpage-item:focus-visible {
		outline: 1px solid #cbd0d5;
		outline-offset: -3px;
	}

	body.public-profile-mode #mobile-bottom-nav {
		display: none !important;
	}
}

/* Shared search transitions keep the field mounted on mobile, as on desktop. */
.global-search-dropdown {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(-6px);
 animation: none;
 transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.global-search-dropdown.is-open {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
 transition-delay: 0s;
}
/* Tabs are rendered once at the viewport level, outside page stacking contexts. */
#mobile-sidebar-tabs { display: none; }
@media (max-width: 900px) {
 body.global-sidebar-tabs-ready [id$="-sidebar-handle"],
 body.global-sidebar-tabs-ready [id$="-ads-handle"] { visibility: hidden !important; }
 #mobile-sidebar-tabs:not([hidden]) {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2147483300;
  pointer-events: none;
 }
 .mobile-sidebar-tab-rail { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
 .mobile-sidebar-tab-rail.right { margin-left: auto; align-items: flex-end; }
 .mobile-sidebar-tab {
  display: block;
  width: 23px;
  min-height: 62px;
  margin: 0;
  padding: 9px 4px;
  border: 1px solid var(--border-primary);
  border-radius: 0;
  background: var(--bg-button, #3b5998);
  color: var(--text-button, #fff);
  font: 700 10px/1.2 Arial, sans-serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  cursor: pointer;
  pointer-events: auto;
 }
 .mobile-sidebar-tab-rail.left .mobile-sidebar-tab { transform: rotate(180deg); }
 .mobile-sidebar-tab:disabled { opacity: 1; pointer-events: none; }
 .mobile-sidebar-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
}
@media (max-width: 800px) {
 .header #header-search-container,
 .header.mobile-search-open #header-search-container {
  display: flex !important;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  height: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
 }
 .header.mobile-search-open #header-search-container {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
 }
 .header #mobile-header-page-title {
  transition: opacity 180ms ease, visibility 0s linear 180ms;
 }
 .header.mobile-search-open #mobile-header-page-title {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
 }
 .header #header-search-input,
 .header.mobile-search-open #header-search-input {
  height: 30px;
  box-sizing: border-box;
  padding: 6px 10px 6px 30px;
  background: color-mix(in srgb, var(--text-header) 12%, transparent);
  color: var(--text-header);
  transition: background-color 220ms ease, color 220ms ease, padding 220ms ease, box-shadow 220ms ease;
 }
 .header #header-search-input:focus,
 .header.mobile-search-open #header-search-input:focus {
  background: var(--bg-input);
  color: var(--text-primary);
  padding-left: 10px;
 }
 .header.mobile-search-open .global-search-dropdown { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
 .global-search-dropdown,
 .header #header-search-container,
 .header #header-search-input,
 .header #mobile-header-page-title { transition: none !important; }
}
body.reduce-motion .global-search-dropdown,
body.reduce-motion .header #header-search-container,
body.reduce-motion .header #header-search-input,
body.reduce-motion .header #mobile-header-page-title { transition: none !important; }

/* Let iOS reserve its native status/home-indicator areas. The app fills only
   the usable viewport; theme-color remains available to browser chrome. */
@media (max-width: 800px) {
 html { background-color: var(--browser-chrome-color, var(--color-primary)); }
 body[data-active-view] { top: 0; left: 0; height: 100dvh; min-height: 0; }
}

/* Compact profile-popover parity */
#typing-text,
#typing-text:visited {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

#typing-text:hover,
#typing-text:focus-visible {
	color: #fff;
	text-decoration: none;
}

.user-hover-preview-pfp-button {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
}

.user-hover-preview-pfp-button:focus-visible {
	outline: 2px solid var(--color-primary, #3b5998);
	outline-offset: 2px;
}

.user-hover-preview-pfp-button .user-hover-preview-pfp {
	box-sizing: border-box;
}

.user-profile-popover-detail-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.user-profile-popover-detail {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	min-width: 0;
	color: var(--text-primary);
	font-size: 10px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.user-profile-popover-detail > i {
	flex: 0 0 12px;
	width: 12px;
	margin-top: 1px;
	color: var(--text-muted, #666);
	text-align: center;
}

.user-profile-popover-detail .country-flag {
	width: 16px;
	height: 12px;
	margin-top: 1px;
}

.user-profile-popover-detail strong {
	color: var(--text-link, #3b5998);
	font-weight: normal;
}

.user-profile-popover-detail a {
	min-width: 0;
	overflow-wrap: anywhere;
}

.user-profile-popover-detail small {
	color: var(--text-muted, #888);
	font-size: 9px;
}

.user-profile-popover-blinkies {
	min-width: 0;
	width: 100%;
	padding-block: 4px;
}

/* ── framed panel ──
   The bordered box with a gradient title bar, first built for the game player
   and now the shared shape for any page that needs one (the discovery map, and
   whatever comes next). Page stylesheets add only what is theirs. */
.framed-panel {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
	animation: wallPostFadeIn 0.4s ease-out forwards;
}

/* The display above would otherwise outrank the hidden attribute. */
.framed-panel[hidden] {
	display: none;
}

.framed-panel-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--bg-sidebar-header);
	border-bottom: 1px solid var(--border-header);
	font-family: 'Over the Rainbow';
}

.framed-panel-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: bold;
	color: var(--text-header);
	text-transform: lowercase;
}

.framed-panel-actions {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.framed-panel-body {
	position: relative;
}

/* ── boxed search ──
   A search field with its glyph and a small .btn inside one bordered box,
   for searches that sit in a page's panel (the movies ripper, the scrobbles
   page's music look-up) rather than in a sidebar (.sidebar-search). */
.boxed-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 8px;
	border: 1px solid var(--border-primary);
	background: var(--bg-message);
}

.boxed-search i {
	color: var(--text-muted);
	font-size: 14px;
}

.boxed-search input {
	flex: 1;
	min-width: 0;
	padding: 4px 2px;
	border: 0;
	background: transparent;
	color: var(--text-primary);
	font: inherit;
	font-size: 12px;
	outline: none;
}

.boxed-search input::-webkit-search-cancel-button {
	cursor: pointer;
}

/* ── comments and replies ──
   Shared spacing for a post's comments area and its comment box:
   - --comment-gutter: the boxes' edges (sides, and the bottom of both);
   - --comment-gap: the one vertical gap between the comment box's parts
     (like status, reply indicator, input, image preview);
   - --reply-indent: how far replies sit in.
   Rows that reach edge to edge (the image preview, the reply indicator's
   border, the highlight) bleed out through the gutter. */
.comments-container,
.comment-form-container {
	--comment-gutter: 14px;
	--comment-gap: 10px;
	--reply-indent: 40px; /* a comment's avatar (32px) plus its gap (8px) */
}

/* The comment box stacks its parts with one gap. Hidden parts (the like
   status with no likes, the image preview with nothing attached) are not
   laid out, so they leave no stray space. The box's top padding is the same
   gap, from the post's actions; while the comments area is open its bottom
   gutter already separates them, so the box drops that padding
   (CommentThreads.setOpen toggles .comments-open). */
.comment-form-container {
	display: flex;
	flex-direction: column;
	gap: var(--comment-gap);
}

.comment-form-container.comments-open {
	padding-top: 0;
}

/* Comments turned off by the post's owner or an admin (docs/comments.md):
   what is there stays readable, with no box to write in. */
.wall-post-item.comments-closed .comment-form-container :is(.comment-input-row, .wall-image-preview) {
	display: none !important;
}

.wall-post-item.comments-closed .comment-form-container::after {
	content: 'comments are turned off.';
	/* Centered on its own, so every wall draws it alike. */
	text-align: center;
	font-size: 12px;
	color: #65676b;
	user-select: none;
}

/* Public profiles hide the comment input, leaving at most the like status;
   with no likes to show, the box goes too. */
body.public-profile-mode .comment-form-container:not(:has(> .like-status-bar:not([hidden]))) {
	display: none;
}

/* Replies are children of their comment: each top-level comment is wrapped
   in a .gw-comment-thread with its replies in .gw-comment-replies, which is
   hidden until the comment's "reply (N)" button opens it, like a post's
   comments (utils/comment-threads.js). The replies container is indented by
   the parent's avatar and gap instead of widening the reply rows, so nothing
   overflows the wall. Leave .gw-comment-replies without a display rule: it
   is toggled with the hidden attribute. */
.gw-comment-replies {
	margin-left: var(--reply-indent);
}

.gw-comment-item.is-reply .gw-comment-avatar-img {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
}

/* The comment or reply a notification points at lights up like a hovered
   link card, then fades back. The tint is a layer behind the row that spans
   the whole comments area: out through the area's gutter on both sides, and
   for a reply also back over its indent. `isolation` keeps the layer above
   the post's background but under the row's content. */
.gw-comment-item {
	isolation: isolate;
}

.gw-comment-item::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--comment-gutter));
	right: calc(-1 * var(--comment-gutter));
	z-index: -1;
	background: #eeb;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.gw-comment-replies .gw-comment-item::before {
	left: calc(-1 * (var(--comment-gutter) + var(--reply-indent)));
}

.gw-comment-item.comment-highlight::before {
	opacity: 1;
	transition: none;
}

/* The like status is shown and hidden with the hidden attribute (the post
   templates and the like/unlike update), so its display rule must not apply
   while hidden. */
.like-status-bar:not([hidden]) {
	display: flex;
}

/* Reply mode: the post's comment box shows the chat's "replying to"
   indicator above its input (utils/comment-item.js). The content and cancel
   button share the #reply-indicator rules. Like the image preview, it bleeds
   through the box's gutter so its top border spans the box, separating it
   from the like status. The box's gap sits on both sides of that border
   (the gap above it, this padding below it). */
.comment-reply-indicator {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 calc(-1 * var(--comment-gutter));
	padding: var(--comment-gap) var(--comment-gutter) 0;
	border-top: 1px solid var(--border-primary);
	user-select: none;
}

/* ── "more" menus and reporting ──
   Posts, comments and replies carry one three-dots button that opens the
   shared context menu with what the viewer may do: pin, delete, report
   (utils/item-menu.js). A post's sits in its top-right corner strip; a
   comment's at the right end of its row. */
.post-corner-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	gap: 2px;
	z-index: 10;
}

.gw-comment-more {
	width: 20px;
	height: 20px;
	margin-left: auto;
	font-size: 16px;
	opacity: 0.45;
}

.gw-comment-item:hover .gw-comment-more {
	opacity: 0.8;
}

@media (max-width: 768px) {
	/* No hover on a touch screen: the more button stays readable. */
	.gw-comment-more {
		opacity: 0.8;
	}
}

/* The comment box's tools on phones: the photo, emoji and sticker buttons
   fold into one three-dots button whose menu opens them
   (openCommentToolsMenu in utils/item-menu.js). Like and reply stay in the
   comment rows. */
.comment-input-icons .comment-emoji-btn.comment-tools-more {
	display: none;
}

@media (max-width: 768px) {
	.comment-input-icons .comment-image-btn,
	.comment-input-icons .comment-emoji-btn:not(.comment-tools-more) {
		display: none;
	}

	.comment-input-icons .comment-emoji-btn.comment-tools-more {
		display: flex;
	}
}

.message-actions .report-btn:hover {
	color: #e0245e;
}

/* The report dialog is the site's modal sheet laid out like the forward
   dialog (utils/report.js): it reuses the forward quote, list and docked
   composer, and only adds radio rows and its width. */
.report-dialog-overlay,
.report-dialog {
	--site-popup-width: 420px;
}

.report-dialog {
	font: 11px/1.4 Arial, sans-serif;
}

.report-dialog-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var(--bg-container);
	overflow-y: auto;
}

/* The reported item as drawn on the page, copied without its controls
   (utils/report.js), in the same frame the moderation queue uses. */
.report-dialog-preview {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
}

.report-dialog-preview[hidden] {
	display: none;
}

.report-dialog-reasons {
	max-height: min(300px, 46dvh);
}

.report-dialog-reason .forward-message-room-copy small {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 0 1 auto;
}

.report-dialog-reason.selected {
	background: color-mix(in srgb, #e0245e 10%, var(--bg-input));
}

.report-dialog-reason.selected::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: #e0245e;
}

.report-dialog-reason.selected .forward-message-room-icon {
	color: #e0245e;
}

.report-dialog .forward-message-comment {
	padding-right: 52px;
}

.report-dialog .forward-message-counter {
	right: 8px;
}

/* Destructive confirmation in a site sheet (admin termination). */

/* ── account standing ──
   Limits from the member's own standing grey out what the server would
   refuse (utils/standing.js, docs/moderation.md). Reading stays open.
   - limited: nudges and pokes;
   - very limited: comment boxes, notes, and photo, song, link and poll tabs,
     the chat's photo button, movie ripping, quoting and posting chart images
     on the scrobbles page, and poll voting (results stay readable), and
     sharing posts;
   - at risk: post composers and the phone nav's post button. */
body.standing-no-comment .comment-form-container .comment-input-row,
body.standing-no-comment .comment-form-container .wall-image-preview,
body.standing-no-post .wall-post-box,
body.standing-no-post :is(.scrobbles-quote-compose, .scrobbles-maker-post),
body.standing-no-post #mobile-post-nav-link,
body.standing-no-media :is(#wall-image-btn, #wall-quote-btn, #wall-poll-btn),
body.standing-no-media :is(#global-wall-image-btn-tab, #global-wall-quote-btn-tab, #global-wall-poll-btn-tab),
body.standing-no-media :is(#image-upload-btn, .profile-now-playing-quote-btn, .scrobbles-quote-compose, .scrobbles-maker-post),
body:is(.standing-no-post, .standing-no-media) .movies-rip-button,
body:is(.standing-no-post, .standing-no-media) .wall-post-actions .share-btn,
body.standing-no-nudge #nudge-btn,
body.standing-no-poke :is(.profile-poke-btn, .poke-row-action, .poke-btn),
body.standing-no-note .me-status-note-item,
body.standing-no-vote .wall-post-item:not(.reported-mini, .shared-post-item) .poll-options-list,
body.standing-no-vote .star-meter.is-interactive .star-meter-stars {
	opacity: 0.45;
	filter: grayscale(1);
	pointer-events: none;
	user-select: none;
}

/* "At risk" accounts cannot edit messages; drawn toolbars lose the button. */
body.standing-no-edit .message-actions .edit-btn {
	display: none !important;
}

/* The yellow notice bar: it cannot be dismissed and stays at the top while
   its page scrolls. A suspended account's profile has one, above the scroll
   summary, which sticks just under it (--profile-suspended-offset, the bar's
   height, set by renderSuspendedBar). The popup uses the custom-theme notice
   (is-notice). Both lead with the warning emoji, drawn by the global emoji
   parser. The same bar greets logged-out visitors of a profile or the
   highlights with a wave and sign-up/log-in links. */
.notice-bar {
	position: sticky;
	top: 0;
	z-index: 31;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: linear-gradient(to bottom, #fff9d7, #fff3b8);
	border-bottom: 1px solid #e2c822;
	color: #5c4a00;
	font-size: 12px;
	line-height: 1.35;
	user-select: none;
}

.profile-scroll-summary-shell {
	top: var(--profile-suspended-offset, 0px);
}

.notice-bar[hidden] {
	display: none;
}

.notice-bar a {
	color: inherit;
	font-weight: bold;
	text-decoration: underline;
}

/* At the foot of a column instead (settings' unsaved changes): it sticks to
   the bottom while the column scrolls, edge to edge over the column's own
   padding (--notice-bar-inset, the column's padding: sticky offsets count
   from inside it), with its actions on the right. */
.notice-bar.is-bottom {
	--notice-bar-inset: 10px;
	top: auto;
	bottom: calc(-1 * var(--notice-bar-inset));
	margin: auto -10px calc(-1 * var(--notice-bar-inset));
	border-top: 1px solid #e2c822;
	border-bottom: none;
}

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

.notice-bar-hint {
	color: #7a6512;
}

.notice-bar-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

/* The glyph of the yellow notices (the suspended bar, the profile popup's
   suspended and custom-theme notices), drawn by the global emoji parser. */
.notice-emoji {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.notice-emoji img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.user-profile-popover-theme-consent.is-notice {
	gap: 0;
}

/* ── reported content, in miniature ──
   What the moderation queue and settings > support show of a report
   (utils/reported-content.js). The originals' markup, scaled down and made
   inert: nothing inside is a working control. */
.reported-content {
	position: relative;
	padding: 8px;
	background: var(--bg-container);
	/* The page's own typography (body's font, normal line height), so the
	   copy reads the same inside a dialog that sets its own font. */
	font-family: 'Tahoma', 'Verdana', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	line-height: normal;
	color: var(--text-primary);
	text-align: left;
	user-select: none;
}

/* The frame every copy sits in: settings > support's items and the report
   and forward dialogs' previews, so a copy looks the same in each. */
.reported-content-frame {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--border-primary);
	background: var(--bg-message);
}

.reported-content.is-missing,
.reported-content.is-loading {
	color: var(--text-muted);
	font-style: italic;
}

/* Content a moderator acted on (removed, left up or its account
   terminated), or that is gone, is greyed out whole. */
.reported-content.is-removed,
.reported-content.is-decided,
.reported-content.is-gone {
	filter: grayscale(1);
	opacity: 0.6;
}

/* Wall posts fade in from opacity 0 on the walls; a copy has no fade, so it
   starts visible. */
.reported-content .reported-mini {
	margin: 0 !important;
	animation: none !important;
	opacity: 1 !important;
	pointer-events: none;
}

.reported-content .wall-post-item.reported-mini {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.reported-content .wall-post-item.reported-mini .wall-post-avatar {
	width: 32px;
	height: 32px;
}

.reported-content .wall-post-item.reported-mini .wall-post-text,
.reported-content .gw-comment-item.reported-mini .gw-comment-content {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	font-size: 12px !important;
}

/* Shared photos shrink; avatars, card art and emoji keep their own sizes. */
.reported-content .embedded-image-container:not(.photo-mosaic) img:not(.emoji-img):not(.emoticon-img) {
	max-height: 90px;
	max-width: 160px;
	width: auto;
	object-fit: cover;
}

.reported-content .embedded-image-container.photo-mosaic {
	width: 160px;
}

.reported-content .embedded-image-container > .video-player {
	width: 220px;
}

.reported-content .embedded-image-container > .video-player video {
	max-height: 120px;
}

.reported-content .link-embeds {
	width: 260px;
}

.reported-content .message.reported-mini .message-pfp:hover {
	transform: none;
	box-shadow: none;
}

/* A profile is its real header (user-profile.html, the same classes and
   rules), scaled down with zoom so the proportions stay the profile's own. */
.reported-content.is-user {
	padding: 0;
	overflow: hidden;
}

.reported-mini-profile .profile-card {
	zoom: 0.5;
	min-height: 0;
	background: var(--bg-container);
}

.reported-mini-profile .profile-overview-band {
	padding-bottom: 20px;
}

.reported-mini-profile .profile-username-view::before {
	content: none;
}

/* ── the moderation queue ──
   One card per report: what it is, who filed it, a look at the content, and
   the three decisions a moderator can make about it. */
.admin-queue-count[hidden] {
	display: none;
}

.admin-queue-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 6px;
	background: #d64545;
	border-radius: 9px;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	vertical-align: middle;
}

.admin-moderation-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.admin-moderation-card {
	padding: 10px 12px;
	background: var(--surface-subtle);
	border: 1px solid var(--border-primary);
	border-left: 3px solid #d64545;
	animation: cardSlideIn 0.3s ease-out;
}

.admin-moderation-card.is-closed {
	border-left-color: var(--line-medium);
	opacity: 0.75;
}

.admin-moderation-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 11px;
	color: var(--text-secondary);
}

.admin-moderation-kind {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: bold;
	color: var(--text-primary);
	text-transform: lowercase;
}

.admin-moderation-reason {
	padding: 1px 6px;
	background: var(--surface-tint);
	border: 1px solid var(--line-soft);
}

.admin-moderation-when {
	margin-left: auto;
	white-space: nowrap;
}

.admin-moderation-who {
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-primary);
}

.admin-moderation-preview {
	margin-top: 6px;
	padding: 6px 8px;
	background: var(--surface-sunken);
	border: 1px solid var(--line-soft);
	font-size: 12px;
	color: var(--text-primary);
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 120px;
	overflow-y: auto;
}

.admin-moderation-preview.is-missing {
	color: var(--text-muted);
	font-style: italic;
}

.admin-moderation-details {
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-secondary);
}

.admin-moderation-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.admin-moderation-outcome {
	font-size: 12px;
	color: var(--text-muted);
	text-transform: lowercase;
}

.admin-moderation-card .reported-content {
	margin-top: 6px;
}

/* "go to" leads the row; the decisions follow it. */
.admin-moderation-goto {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: auto;
	text-decoration: none;
}

.admin-subheading {
	margin: 18px 0 4px;
	font-size: 13px;
	/* --text-header is the blue bars' white; these sit on the page. */
	color: var(--text-primary);
}

.member-list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-primary);
	background: var(--bg-container);
}

.member-list-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--line-soft);
}

.member-list-row:last-child {
	border-bottom: 0;
}

.member-list-name {
	flex: 1;
	min-width: 0;
	font-weight: bold;
	color: var(--text-link);
	overflow: hidden;
	text-overflow: ellipsis;
}

.member-list-meta {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-muted);
	font-size: 11px;
}

.member-list .admin-empty {
	padding: 10px;
}

/* Lists that show the member's picture too (settings > blocked members). */
.member-list-avatar {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	object-fit: cover;
	border: 1px solid var(--border-primary);
	background: var(--bg-message, #f4f6f8);
}

.member-list-row .support-item-action {
	flex: 0 0 auto;
}