:root {
	--bg: #0c1018;
	--panel: #121a28;
	--panel-soft: #1a2436;
	--panel-strong: #0f1623;
	--line: #27344d;
	--text: #edf2ff;
	--muted: #97a7c6;
	--accent: #5a73ff;
	--accent-soft: rgba(90, 115, 255, 0.2);
	--danger: #d55b73;
	--ok: #53d27d;
	--avatar: 42px;
	--message-font: "Space Grotesk", "Segoe UI", sans-serif;
	--message-word-spacing: 0px;
	--message-gap: 2px;
	--input-border: rgba(255, 255, 255, 0.18);
	--input-bg: rgba(255, 255, 255, 0.07);
	--button-border: rgba(255, 255, 255, 0.2);
	--button-bg: rgba(255, 255, 255, 0.08);
	--focus-ring: rgba(115, 140, 255, 0.22);
	--surface-border: rgba(255, 255, 255, 0.1);
	--surface-soft: rgba(255, 255, 255, 0.05);
	--glass-blur: 0px;
	--main-background: linear-gradient(180deg, rgba(20, 27, 40, 0.92), rgba(14, 19, 30, 0.96));
	--custom-lab-blur: 14px;
	--custom-lab-gradient-overlay: linear-gradient(145deg, rgba(110, 133, 255, 0.42), rgba(47, 181, 163, 0.34));
	--custom-lab-main-background: linear-gradient(180deg, rgba(20, 27, 40, 0.92), rgba(14, 19, 30, 0.96));
	--custom-lab-modal-background: linear-gradient(180deg, rgba(24, 29, 40, 0.98), rgba(20, 24, 33, 0.98));
	--custom-lab-composer-background: linear-gradient(180deg, rgba(18, 26, 40, 0.9), rgba(18, 26, 40, 0.98));
	--composer-background-solid: rgba(18, 26, 40, 0.9);
	--custom-lab-sidebar-background: rgba(16, 22, 35, 0.84);
	--custom-lab-chat-item-background: rgba(20, 30, 46, 0.74);
	--custom-lab-me-card-background: rgba(14, 21, 33, 0.84);
	--custom-lab-input-background: rgba(36, 50, 72, 0.2);
	--custom-lab-button-background: rgba(110, 133, 255, 0.22);
	--custom-lab-button-border: rgba(110, 133, 255, 0.36);
	--custom-lab-surface-soft: rgba(31, 47, 70, 0.12);
	--custom-lab-surface-border: rgba(110, 133, 255, 0.26);
	--chat-panel-background: transparent;
	--dm-list-panel-background: transparent;
	--server-list-panel-background: transparent;
}

* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: rgba(172, 178, 191, 0.78) transparent;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	background: transparent;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: rgba(172, 178, 191, 0.78);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: rgba(190, 196, 210, 0.9);
	background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
	background: transparent;
}

html,
body,
#root {
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	font-family: "Space Grotesk", "Segoe UI", sans-serif;
	background:
		radial-gradient(circle at 8% 12%, rgba(90, 115, 255, 0.28), transparent 32%),
		radial-gradient(circle at 90% 85%, rgba(47, 181, 163, 0.22), transparent 28%),
		var(--bg);
	color: var(--text);
	position: relative;
	isolation: isolate;
	overflow-x: hidden;
}

body::before,
body::after {
	content: "";
	position: fixed;
	inset: -20vmax;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.loading-screen {
	position: fixed;
	inset: 0;
	background: #000;
	display: grid;
	place-content: center;
	gap: 20px;
	padding: 24px;
	z-index: 200;
	opacity: 1;
	transition: opacity 0.45s ease;
	overflow: hidden;
}

.loading-screen.done {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.75s ease 0.38s;
}

.loading-screen-symbol-field {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.loading-screen-symbol-canvas {
	width: 100%;
	height: 100%;
	display: block;
	opacity: 1;
	transition: opacity 0.45s ease 0.2s;
}

.loading-screen.done .loading-screen-symbol-canvas {
	opacity: 0;
}

.loading-screen-logo {
	width: min(52vw, 260px);
	max-width: 78vw;
	height: auto;
	justify-self: center;
	animation: loading-logo-breathe 1.65s ease-in-out infinite;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
	position: relative;
	z-index: 2;
}

@keyframes loading-logo-breathe {
	0%,
	100% {
		transform: scale(0.88);
	}
	50% {
		transform: scale(1.06);
	}
}

.loading-screen-progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min(72vw, 360px);
	justify-self: center;
	position: relative;
	z-index: 2;
}

.loading-screen-progress-track {
	height: 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.24);
	overflow: hidden;
}

.loading-screen-progress-fill {
	height: 100%;
	width: 0;
	border-radius: inherit;
	background:
		linear-gradient(
			120deg,
			#0a2b6b 0%,
			#195ed6 22%,
			#74bdff 48%,
			#1f66d9 72%,
			#0a2b6b 100%
		);
	background-size: 220% 100%;
	box-shadow: 0 0 12px rgba(70, 140, 255, 0.65);
	animation: loading-progress-flow 1.05s linear infinite;
	transition: width 0.16s linear;
}

@keyframes loading-progress-flow {
	from {
		background-position: 0% 0%;
	}
	to {
		background-position: 220% 0%;
	}
}

.loading-screen-progress-text {
	align-self: flex-end;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.82);
}

.loading-screen-shell {
	position: relative;
	display: grid;
	place-items: center;
	gap: 24px;
	width: 100%;
	max-width: 100%;
	min-height: calc(100vh - 48px);
}

.loading-screen-main,
.loading-screen-lock-panel {
	transition: transform 0.42s ease, opacity 0.42s ease;
}

.loading-screen-main {
	display: grid;
	place-items: center;
	gap: 24px;
}

.loading-screen-main.shifted {
	transform: translateX(-240px) scale(0.92);
	opacity: 0.92;
	pointer-events: none;
}

.loading-screen-lock-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(92vw, 420px);
	max-width: 100%;
	padding: 28px;
	border-radius: 28px;
	background: rgba(8, 18, 40, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
	transform: translate(calc(-50% + 120px), -50%);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	display: grid;
	gap: 14px;
}

.loading-screen-lock-panel.visible {
	transform: translate(-50%, -50%);
	opacity: 1;
	pointer-events: auto;
}

.loading-screen-lock-panel.unlocking {
	transform: translate(calc(-50% - 120px), -50%);
	opacity: 0;
}

.loading-screen-lock-panel h3 {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
}

.loading-screen-lock-panel p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.6;
}

.loading-screen-lock-panel input {
	width: 100%;
	min-width: 0;
}

.loading-screen-lock-panel .primary-button {
	width: 100%;
}

input,
button,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

input:not([type="range"]),
select {
	border: 1px solid var(--input-border);
	background: var(--input-bg);
	color: var(--text);
	border-radius: 10px;
	padding: 10px 12px;
	outline: none;
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-height: 42px;
	padding: 10px 40px 10px 12px;
	border-radius: 12px;
	border-color: color-mix(in srgb, var(--input-border) 82%, var(--accent) 18%);
	background-image:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--panel-soft) 72%, transparent),
			color-mix(in srgb, var(--panel-strong) 82%, transparent)
		),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DAE4FF' d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
	background-position: 0 0, calc(100% - 12px) 50%;
	background-size: auto, 16px 16px;
	background-repeat: no-repeat;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.09),
		0 1px 1px rgba(0, 0, 0, 0.12);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

select:hover {
	border-color: color-mix(in srgb, var(--accent) 42%, var(--input-border));
}

select:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

select option {
	background: color-mix(in srgb, var(--panel-strong) 88%, black 12%);
	color: var(--text);
}

input[type="range"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	height: 30px;
	cursor: pointer;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--surface-border));
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--accent) 66%, rgba(255, 255, 255, 0.16)),
		color-mix(in srgb, var(--panel-soft) 76%, rgba(255, 255, 255, 0.1))
	);
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -6px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--accent) 72%, white 12%);
	background: linear-gradient(160deg, #ffffff, color-mix(in srgb, var(--accent) 22%, #ffffff));
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

input[type="range"]::-moz-range-track {
	height: 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--surface-border));
	background: color-mix(in srgb, var(--panel-soft) 76%, rgba(255, 255, 255, 0.1));
}

input[type="range"]::-moz-range-progress {
	height: 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--surface-border));
	background: color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, 0.18));
}

input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--accent) 72%, white 12%);
	background: linear-gradient(160deg, #ffffff, color-mix(in srgb, var(--accent) 22%, #ffffff));
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

input[type="range"]:focus-visible::-webkit-slider-runnable-track,
input[type="range"]:focus-visible::-moz-range-track {
	box-shadow: 0 0 0 3px var(--focus-ring);
}

input:not([type="range"]):focus,
select:focus {
	border-color: rgba(115, 140, 255, 0.85);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.primary-button,
.secondary-button,
.danger-button {
	border: 1px solid var(--button-border);
	border-radius: 12px;
	padding: 9px 12px;
	font-weight: 600;
	color: var(--text);
	background: var(--button-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.primary-button {
	border-color: color-mix(in srgb, var(--accent) 62%, white 18%);
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--accent) 78%, white 14%),
		color-mix(in srgb, var(--accent) 86%, black 14%)
	);
	color: #fff;
}

.secondary-button {
	background: var(--button-bg);
}

.secondary-button.active {
	background: var(--accent-soft);
	border-color: rgba(145, 164, 255, 0.75);
}

.danger-button {
	background: rgba(213, 91, 115, 0.2);
	border-color: rgba(213, 91, 115, 0.5);
	color: #ffdbe4;
}

.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
	transform: translateY(-1px);
}

.composer-floating-action:hover {
	transform: var(--composer-button-transform, none);
}

.primary-button i,
.secondary-button i,
.danger-button i {
	font-size: 0.88em;
}

.spin-ring {
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ring .8s linear infinite;
}

@keyframes ring {
	to {
		transform: rotate(360deg);
	}
}

.settings-save-button.saving,
.settings-save-button:disabled {
	background: #7d7d7d;
	border-color: #7d7d7d;
	color: #f1f1f1;
	cursor: not-allowed;
	pointer-events: none;
}

.delete-message-modal {
	width: min(420px, 92vw);
	padding: 16px 18px;
	border: 1px solid rgba(213, 91, 115, 0.72);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
}

.delete-message-modal p {
	margin: 0;
	font-size: 0.96rem;
	color: var(--text);
}

.muted-text {
	margin: 0;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted);
}

.status-text {
	margin: 0;
	color: #ffd58f;
	font-size: 0.9rem;
}

.name-ellipsis {
	display: block;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-block: 0.08em;
	margin-block: -0.08em;
}

.styled-username {
	--name-primary: var(--text);
	--name-secondary: var(--accent);
	display: inline-block;
	max-width: 100%;
	color: var(--name-primary);
	font-weight: inherit;
	font-synthesis: none;
	line-height: 1.14;
}

.decorated-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: visible;
	isolation: isolate;
}

.decorated-avatar-decoration {
	position: absolute;
	inset: var(--decorated-avatar-decoration-inset, 0);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 2;
}

.decorated-avatar-decoration-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
	-webkit-mask-image: radial-gradient(circle at center, transparent 0 32.5%, #000 33.5% 100%);
	mask-image: radial-gradient(circle at center, transparent 0 32.5%, #000 33.5% 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none;
}

.decorated-avatar-image {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	max-width: none;
}

.styled-username-font-normal {
	font-family: inherit;
}

.styled-username-font-pixels {
	font-family: "Pixelify Sans", "Cascadia Mono", "Courier New", monospace;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.styled-username-font-cursive {
	font-family: "Cookie", "Brush Script MT", cursive;
	font-weight: 400;
}

.styled-username-font-cartoon {
	font-family: "Rubik Puddles", "Trebuchet MS", sans-serif;
	font-weight: 400;
}

.styled-username-font-horror {
	font-family: "Rubik Wet Paint", "Impact", fantasy;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.styled-username-color-solid {
	color: var(--name-primary);
}

.styled-username-color-gradient {
	background: linear-gradient(135deg, var(--name-primary), var(--name-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.styled-username-color-glow {
	color: var(--name-primary);
	text-shadow:
		0 0 7px var(--name-secondary),
		0 0 15px var(--name-primary);
}

.styled-username-color-neon {
	color: var(--name-primary);
	text-shadow:
		0 0 4px var(--name-primary),
		0 0 10px var(--name-primary),
		0 0 20px var(--name-secondary),
		0 0 34px var(--name-secondary);
}

.styled-username-color-rotating_gradient,
.styled-username-color-rotating_gradient_glow {
	background: linear-gradient(90deg, var(--name-palette-marquee-stops));
	background-size: 200% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: bonfire-name-gradient-shift 4.2s linear infinite;
	will-change: background-position;
}

.styled-username-color-rotating_gradient_glow {
	filter:
		drop-shadow(0 0 0.26rem color-mix(in srgb, var(--name-glow-primary) 70%, transparent))
		drop-shadow(0 0 0.52rem color-mix(in srgb, var(--name-glow-secondary) 62%, transparent));
}

.chat-message:hover .styled-username-color-rotating_gradient_glow,
.styled-username:hover.styled-username-color-rotating_gradient_glow {
	filter:
		drop-shadow(0 0 0.4rem color-mix(in srgb, var(--name-glow-primary) 78%, transparent))
		drop-shadow(0 0 0.82rem color-mix(in srgb, var(--name-glow-secondary) 74%, transparent));
}

@keyframes bonfire-name-gradient-shift {
	0% {
		background-position: 0% 50%;
	}

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

.auth-screen {
	height: 100%;
	display: grid;
	place-items: center;
	padding: 16px;
}

.auth-card {
	width: min(460px, 100%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border-radius: 16px;
	background: rgba(23, 28, 39, 0.93);
	border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0 22px 46px rgba(6, 10, 18, 0.44);
}

.auth-card h1 {
	margin: 0;
	font-size: 1.6rem;
}

.auth-card label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.9rem;
	color: var(--muted);
}

.saved-accounts-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.saved-account-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.saved-account-item {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	text-align: left;
}

.saved-account-item.active {
	border-color: rgba(115, 140, 255, 0.75);
	background: rgba(90, 115, 255, 0.2);
}

.saved-account-item:disabled {
	cursor: default;
	opacity: 0.78;
}

.saved-account-item img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--panel-soft);
}

.saved-account-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.saved-account-action {
	font-size: 0.78rem;
	color: var(--muted);
}

.upload-preview-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid color-mix(in srgb, var(--surface-border) 86%, var(--accent) 14%);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.upload-preview-banner {
	width: 160px;
	height: 54px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.upload-preview-avatar {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.auth-mode-toggle {
	display: flex;
	gap: 8px;
}

.auth-mode-toggle button {
	flex: 1;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
}

.auth-mode-toggle button.active {
	background: rgba(78, 107, 255, 0.2);
	border-color: rgba(122, 147, 255, 0.9);
}

.app-shell {
	height: 100%;
	height: 100dvh;
	display: grid;
	grid-template-columns: 78px 320px minmax(0, 1fr);
	min-height: 0;
	overflow: hidden;
}

.server-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 14px 10px 12px;
	border-right: 1px solid var(--line);
	background:
		var(--server-list-panel-background),
		color-mix(in srgb, var(--sidebar-background, rgba(15, 22, 34, 0.94)) 88%, black 12%);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	backdrop-filter: blur(var(--glass-blur));
	min-height: 0;
	overflow-y: auto;
	overflow-x: visible;
}

.server-rail-list {
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	overflow-y: auto;
	padding-right: 0;
}

.server-rail-dm-shortcuts {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	margin-bottom: 6px;
}

.server-rail-dm-item {
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(18, 22, 30, 0.84);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.server-rail-dm-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.server-rail-dm-badge {
	position: absolute;
	right: -6px;
	bottom: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #d93f52;
	color: #fff;
	font-size: 0.66rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #0f141d;
}

.server-rail-home,
.server-rail-item,
.server-rail-create {
	position: relative;
	width: 54px;
	height: 54px;
	padding: 0;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.server-rail-home span {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.server-rail-item img,
.server-rail-home img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	display: block;
}

.server-rail-home.active,
.server-rail-item.active,
.server-rail-create:hover,
.server-rail-home:hover,
.server-rail-item:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--accent) 54%, white 16%);
	background: color-mix(in srgb, var(--accent-soft) 48%, rgba(255, 255, 255, 0.06));
}

.server-rail-home.active::after,
.server-rail-item.active::after,
.server-rail-item.has-unread::after {
	content: "";
	position: absolute;
	left: -11px;
	top: 50%;
	width: 4px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.98);
	transform: translateY(-50%);
}

.server-rail-item.has-unread::after {
	height: 12px;
	opacity: 0.92;
}

.server-rail-item.active::after,
.server-rail-home.active::after {
	height: 26px;
}

.server-rail-create {
	margin-top: auto;
	color: color-mix(in srgb, var(--accent) 72%, white 18%);
}

.server-rail-badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	border: 2px solid color-mix(in srgb, var(--sidebar-background, rgba(15, 22, 34, 0.94)) 88%, black 12%);
	background: #ff5e73;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
}

.server-home-alert {
	top: auto;
	left: auto;
	right: 5px;
	bottom: 5px;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-background, var(--panel)) 90%, black 10%);
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	border-right: 1px solid var(--line);
	background: var(--sidebar-background, rgba(15, 22, 34, 0.94));
	backdrop-filter: blur(var(--glass-blur));
	min-height: 0;
}

.sidebar-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.server-sidebar-topbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 10px;
}

.sidebar-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.sidebar-title-stack {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.server-sidebar-meta {
	font-size: 0.76rem;
	color: var(--muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.server-sidebar-banner-shell {
	position: relative;
}

.server-sidebar-banner {
	width: 100%;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: transparent;
	color: var(--text);
	text-align: left;
	box-shadow: none;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.server-sidebar-banner:hover,
.server-sidebar-banner-shell.open .server-sidebar-banner {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
}

.server-sidebar-banner-icon {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
}

.server-sidebar-banner-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.server-sidebar-banner-copy strong,
.server-sidebar-banner-copy small {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.server-sidebar-banner-copy strong {
	font-size: 0.98rem;
	letter-spacing: 0.01em;
}

.server-sidebar-banner-copy small {
	font-size: 0.74rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.server-sidebar-banner-caret {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: color-mix(in srgb, var(--accent) 65%, white 24%);
	font-size: 0.78rem;
}

.server-sidebar-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(9, 13, 20, 0.98);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
	z-index: 11;
}

.server-sidebar-dropdown-item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	text-align: left;
}

.server-sidebar-dropdown-item:hover {
	border-color: rgba(132, 157, 255, 0.3);
	background: rgba(84, 121, 255, 0.14);
}

.server-sidebar-dropdown-item.danger {
	color: #ffd9e1;
	background: rgba(213, 91, 115, 0.12);
}

.server-sidebar-dropdown-item.danger:hover {
	border-color: rgba(255, 143, 168, 0.4);
	background: rgba(213, 91, 115, 0.22);
}

.server-sidebar-dropdown-item:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.mobile-sidebar-close,
.mobile-sidebar-toggle,
.mobile-sidebar-backdrop {
	display: none;
}

.sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-bottom: 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-nav .secondary-button {
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 3px 5px;
	border: 1px solid transparent;
	background: transparent;
	border-radius: 12px;
	box-shadow: none;
	transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.sidebar-nav .secondary-button:hover,
.sidebar-nav .secondary-button.active {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
}

.sidebar-nav .friends-nav-button {
	position: relative;
}

.friends-alert-dot {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff4d62;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-background, var(--panel)) 88%, black 12%);
}

.sidebar-nav .secondary-button i {
	font-size: 0.92rem;
}

.sidebar-nav .secondary-button span {
	font-size: 0.76rem;
	letter-spacing: 0.02em;
}

.sidebar-nav .secondary-button.embers-nav-button {
	flex-direction: row;
	justify-content: flex-start;
	gap: 12px;
	min-height: 46px;
}

.sidebar-nav .secondary-button.embers-nav-button span {
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: 0.02em;
	background: linear-gradient(180deg, #FDFBDD 0%, #FFAF07 50%, #E32100 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sidebar-nav .secondary-button.embers-nav-button img {
	width: 30px !important;
	height: 30px !important;
}

.embers-view {
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
}

.embers-layout {
	display: grid;
	grid-template-columns: minmax(320px, 44%) minmax(0, 1fr);
	gap: 24px;
	min-height: 360px;
}

.embers-art-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.embers-art-image {
	width: min(100%, 520px);
	height: auto;
}

.embers-copy-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.embers-gradient-heading {
	margin: 0;
	font-size: clamp(2.2rem, 4.2vw, 4.5rem);
	line-height: 1.02;
	font-weight: 900;
	background: linear-gradient(180deg, #FDFBDD 0%, #FFAF07 50%, #E32100 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.embers-count-text {
	margin-top: 14px;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--accent);
}

.embers-help-button {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: linear-gradient(180deg, #FDFBDD 0%, #FFAF07 50%, #E32100 100%);
	color: #19120b;
	font-size: 1.2rem;
	font-weight: 900;
}

.embers-info-modal hr {
	width: 100%;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	margin: 8px 0 12px;
}

.embers-shop-list {
	display: grid;
	gap: 18px;
	margin-top: 18px;
	padding-bottom: 42px;
	min-height: 0;
	overflow: visible;
}

.embers-shop-card {
	display: grid;
	grid-template-columns: minmax(120px, 220px) 1fr;
	gap: 16px;
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: linear-gradient(160deg, rgba(255, 198, 110, 0.12), rgba(58, 24, 10, 0.26));
	opacity: 0;
	transform: translateX(46px);
	transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 520ms ease;
	min-height: 150px;
}

.embers-shop-card.left {
	transform: translateX(-46px);
}

.embers-shop-card.visible {
	opacity: 1;
	transform: translateX(0);
}

.embers-shop-demo {
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.25);
	min-height: 114px;
}

.embers-shop-demo.bg {
	background: linear-gradient(135deg, #fdbb2d, #b21f1f, #1a2a6c);
}

.embers-shop-demo.font::after {
	content: "Aa";
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 2.1rem;
	font-weight: 800;
	font-family: "Comic Sans MS", "Trebuchet MS", cursive;
}

.embers-shop-demo.slots::after {
	content: "10 -> 30";
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 1.1rem;
	font-weight: 800;
}

.embers-shop-demo.gif::after {
	content: "GIF x10";
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 1.1rem;
	font-weight: 800;
}

.embers-shop-copy h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.embers-shop-copy p {
	margin: 0 0 12px;
	color: var(--muted);
}

.embers-shop-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.admin-ember-actions {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.admin-ember-actions input {
	width: 92px;
}

.server-sidebar-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chat-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	overflow-y: auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
	margin-left: -12px;
	margin-right: -12px;
}

.server-chat-list {
	padding-top: 0;
}

.server-channel-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 8px 6px;
	margin-bottom: 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.server-channel-list-header span,
.server-channel-list-header small {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.server-channel-item {
	text-align: left;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: transparent;
	color: var(--text);
	position: relative;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.server-channel-item:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}

.server-channel-item.active {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(132, 157, 255, 0.28);
}

.server-channel-item.has-unread::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	width: 4px;
	height: 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.98);
	transform: translateY(-50%);
}

.server-channel-icon {
	width: 32px;
	height: 32px;
	border-radius: 11px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.86rem;
	color: color-mix(in srgb, var(--accent) 62%, white 20%);
}

.server-channel-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.server-channel-copy strong,
.server-channel-copy small {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.server-channel-copy strong {
	font-size: 0.92rem;
	letter-spacing: 0.01em;
}

.server-channel-copy small {
	font-size: 0.74rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.chat-list-item {
	text-align: left;
	display: grid;
	grid-template-columns: var(--avatar) minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin: 2px 3px;
	min-height: calc(var(--avatar) + 16px);
	flex-shrink: 0;
	border-radius: 14px;
	border: 0;
	background: transparent;
	color: var(--text);
	position: relative;
	overflow: visible;
	transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.chat-list-item.has-unread::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 4px;
	border-radius: 0 999px 999px 0;
	background: rgba(255, 255, 255, 0.98);
}

.chat-list-item.active {
	background: rgba(255, 255, 255, 0.08);
}

.chat-list-item:hover {
	background: rgba(255, 255, 255, 0.06);
}

.chat-list-item img {
	/*width: var(--avatar);*/
	/*height: var(--avatar);*/
	object-fit: cover;
	background: none;
}

.chat-avatar-wrap {
	position: relative;
	width: var(--avatar);
	height: var(--avatar);
	display: inline-flex;
}

.presence-indicator {
	position: absolute;
	right: -5px;
	bottom: -5px;
	z-index: 3;
}

.presence-indicator-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 3px solid var(--panel);
	background: #7d879b;
}

.presence-indicator-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 22px;
	min-height: 22px;
	border: none;
	background: transparent;
}

.presence-indicator-icon i {
	font-size: 1.28rem;
	line-height: 1;
	color: #7d879b;
	filter: drop-shadow(0 1px 2px rgba(7, 10, 18, 0.75));
}

.presence-indicator-dot.online {
	background: #49d17f;
}

.presence-indicator-icon.online i {
	color: #49d17f;
}

.presence-indicator-dot.afk {
	background: #f3c15f;
}

.presence-indicator-icon.afk i {
	color: #f3c15f;
}

.presence-indicator-dot.hidden {
	background: #af83ff;
}

.presence-indicator-icon.hidden i {
	color: #af83ff;
}

.presence-indicator-dot.offline {
	background: #7d879b;
}

.presence-indicator-icon.offline i {
	color: #7d879b;
}

.chat-status-indicator {
	right: -3px;
	bottom: -3px;
}

.chat-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chat-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 0.92rem;
	font-weight: 650;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rank-badge {
	width: 16px;
	height: 16px;
	object-fit: contain;
	vertical-align: middle;
}

.rank-badge-stack {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
}

.message-rank-badge {
	margin-left: 4px;
}

.dm-list-rank-badge {
	flex: 0 0 auto;
	width: 0.84em;
	height: 0.84em;
	margin-top: 1px;
	background: none;
}

.hover-info-anchor {
	position: relative;
	display: inline-flex;
	align-items: center;
	z-index: 1;
	overflow: visible;
}

.hover-info-anchor.rank-badge-hover-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	line-height: 0;
}

.rank-badge-hover-target {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.hover-info-anchor.rank-badge-hover-anchor .hover-info-card {
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	bottom: calc(100% + 6px) !important;
	transform: translate(-50%, 0) !important;
}

.hover-info-anchor.rank-badge-hover-anchor .hover-info-card::before,
.hover-info-anchor.rank-badge-hover-anchor .hover-info-card::after {
	left: 50% !important;
	transform: translateX(-50%) !important;
}

.hover-info-anchor:hover,
.hover-info-anchor:focus-within {
	z-index: 50;
}

.hover-info-card {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, 0);
	display: grid;
	gap: 4px;
	min-width: 140px;
	max-width: 280px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background:
		linear-gradient(180deg, rgba(24, 36, 56, 0.96), rgba(14, 20, 36, 0.95)),
		rgba(16, 24, 40, 0.96);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
	color: #eef3ff;
	font-size: 0.78rem;
	line-height: 1.35;
	white-space: normal;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.14s ease, transform 0.14s ease;
	z-index: 9999;
	transform-origin: center bottom;
}

.hover-info-anchor.placement-top .hover-info-card {
	left: 50%;
	bottom: calc(100% + 6px);
	top: auto;
	right: auto;
	transform: translate(-50%, 0);
}

.hover-info-anchor.placement-bottom .hover-info-card {
	left: 50%;
	top: calc(100% + 6px);
	bottom: auto;
	right: auto;
	transform: translate(-50%, 0);
}

.hover-info-anchor.placement-left .hover-info-card {
	right: calc(100% + 6px);
	left: auto;
	top: 50%;
	bottom: auto;
	transform: translate(0, -50%);
}

.hover-info-anchor.placement-right .hover-info-card {
	left: calc(100% + 6px);
	right: auto;
	top: 50%;
	bottom: auto;
	transform: translate(0, -50%);
}

.hover-info-anchor.placement-top.align-left .hover-info-card,
.hover-info-anchor.placement-top.align-right .hover-info-card,
.hover-info-anchor.placement-bottom.align-left .hover-info-card,
.hover-info-anchor.placement-bottom.align-right .hover-info-card {
	left: 50%;
	right: auto;
	transform: translate(-50%, 0);
}

.hover-info-card::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid rgba(255, 255, 255, 0.18);
}

.hover-info-anchor.placement-top .hover-info-card::before {
	bottom: -8px;
	top: auto;
	left: 50%;
	border-top: 8px solid rgba(255, 255, 255, 0.18);
	border-bottom: 0;
}

.hover-info-anchor.placement-bottom .hover-info-card::before {
	top: -8px;
	bottom: auto;
	left: 50%;
	border-bottom: 8px solid rgba(255, 255, 255, 0.18);
	border-top: 0;
}

.hover-info-anchor.placement-left .hover-info-card::before {
	right: -8px;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid rgba(255, 255, 255, 0.18);
	border-right: 0;
}

.hover-info-anchor.placement-right .hover-info-card::before {
	left: -8px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 0;
	border-right: 8px solid rgba(255, 255, 255, 0.18);
}

.hover-info-card::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
	transform: translateX(-50%);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid rgb(16, 24, 40);
}

.hover-info-anchor.placement-top .hover-info-card::after {
	bottom: -7px;
	top: auto;
	border-top: 7px solid rgb(16, 24, 40);
	border-bottom: 0;
}

.hover-info-anchor.placement-bottom .hover-info-card::after {
	top: -7px;
	border-bottom: 7px solid rgb(16, 24, 40);
	border-top: 0;
}

.hover-info-anchor.placement-left .hover-info-card::after {
	right: -7px;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid rgb(16, 24, 40);
	border-right: 0;
}

.hover-info-anchor.placement-right .hover-info-card::after {
	left: -7px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 0;
	border-right: 7px solid rgb(16, 24, 40);
}

.hover-info-card strong {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(208, 221, 255, 0.92);
}

.hover-info-anchor:hover .hover-info-card,
.hover-info-anchor:focus-within .hover-info-card {
	opacity: 1;
}

.hover-info-anchor.placement-top:hover .hover-info-card,
.hover-info-anchor.placement-top:focus-within .hover-info-card {
	transform: translate(-50%, 0);
}

.hover-info-anchor.placement-top.align-left:hover .hover-info-card,
.hover-info-anchor.placement-top.align-left:focus-within .hover-info-card {
	transform: translate(0, 0);
}

.hover-info-anchor.placement-top.align-right:hover .hover-info-card,
.hover-info-anchor.placement-top.align-right:focus-within .hover-info-card {
	transform: translate(0, 0);
}

.hover-info-anchor.placement-bottom:hover .hover-info-card,
.hover-info-anchor.placement-bottom:focus-within .hover-info-card {
	transform: translate(-50%, 0);
}

.hover-info-anchor.placement-bottom.align-left:hover .hover-info-card,
.hover-info-anchor.placement-bottom.align-left:focus-within .hover-info-card {
	transform: translate(0, 0);
}

.hover-info-anchor.placement-bottom.align-right:hover .hover-info-card,
.hover-info-anchor.placement-bottom.align-right:focus-within .hover-info-card {
	transform: translate(0, 0);
}

.hover-info-anchor.placement-left:hover .hover-info-card,
.hover-info-anchor.placement-left:focus-within .hover-info-card {
	transform: translate(0, -50%);
}

.hover-info-anchor.placement-right:hover .hover-info-card,
.hover-info-anchor.placement-right:focus-within .hover-info-card {
	transform: translate(0, -50%);
}

.chat-subtitle {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 0.78rem;
	color: var(--muted);
}

.chat-subtitle-copy {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chat-subtitle-copy.description-fade {
	text-overflow: clip;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
}

.chat-subtitle i {
	font-size: 0.72rem;
	opacity: 0.86;
	flex-shrink: 0;
}

.chat-subtitle span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.unread-badge {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--accent);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
}

.sidebar-footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.userscript-sidebar-panels {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

.userscript-sidebar-panel {
	border: 1px solid var(--surface-border);
	border-radius: 12px;
	background: color-mix(in srgb, var(--panel) 78%, transparent);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.userscript-sidebar-panel-head strong {
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--muted);
}

.userscript-sidebar-panel-body {
	min-height: 18px;
}

.me-card {
	position: relative;
	margin: 0 -12px;
	padding: 0 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 10px;
}

.me-avatar-wrap {
	position: relative;
	display: inline-flex;
	width: var(--avatar);
	height: var(--avatar);
}

.me-button {
	display: grid;
	grid-template-columns: var(--avatar) minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 8px 48px 8px 8px;
	width: 100%;
	border-radius: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	text-align: left;
}

.me-button img {
	width: var(--avatar);
	height: var(--avatar);
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.me-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.me-text strong,
.me-text span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.me-text strong {
	font-size: 1.03rem;
	line-height: 1.18;
}

.me-text span {
	font-size: 0.78rem;
	color: var(--muted);
}

.me-settings-button {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.main-area {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	min-height: 0;
	overflow: hidden;
	background: var(--main-background);
	backdrop-filter: blur(var(--glass-blur));
}

.friends-view,
.chat-view,
.decorations-view,
.admin-view {
	min-height: 0;
	display: grid;
}

.friends-view,
.decorations-view {
	grid-template-rows: auto auto minmax(0, 1fr);
	padding: 16px;
	gap: 12px;
}

.admin-view {
	grid-template-rows: auto auto minmax(0, 1fr);
	padding: 16px;
	gap: 12px;
}

.admin-toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.admin-access-card,
.admin-access-locked {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.04);
}

.admin-access-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.admin-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.admin-controls {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 180px));
	gap: 8px;
	align-items: end;
}

.admin-toolbar label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.86rem;
	color: var(--muted);
}

.admin-users {
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.admin-user-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.03);
}

.admin-user-main {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 10px;
	min-width: 0;
}

.admin-user-main img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-user-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.admin-user-title-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.admin-user-name {
	font-size: 1.02rem;
	line-height: 1.15;
}

.admin-user-text span {
	color: var(--muted);
	font-size: 0.8rem;
}

.admin-badge {
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	background: rgba(115, 140, 255, 0.25);
	color: #dfe7ff;
}

.admin-badge.warning {
	background: rgba(255, 186, 87, 0.22);
	color: #ffe4b1;
}

.admin-user-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.admin-user-temp-password {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
}

.admin-user-temp-password strong {
	font-size: 0.82rem;
}

.admin-user-temp-password code {
	padding: 4px 8px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.22);
	color: var(--text);
}

.admin-tripwires {
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tripwire-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}

.tripwire-row.severity-warning {
	border-color: rgba(255, 201, 126, 0.45);
}

.tripwire-row.severity-high {
	border-color: rgba(255, 146, 95, 0.56);
}

.tripwire-row.severity-critical {
	border-color: rgba(243, 95, 128, 0.62);
}

.tripwire-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.tripwire-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.tripwire-title-row strong {
	font-size: 0.95rem;
}

.tripwire-title-row span {
	font-size: 0.76rem;
	color: var(--muted);
}

.tripwire-message {
	margin: 0;
	font-size: 0.88rem;
}

.tripwire-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tripwire-meta span {
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.74rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--muted);
}

.tripwire-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	align-self: flex-start;
}

.section-header h2 {
	margin: 0;
	font-size: 1.2rem;
}

.section-header p {
	margin: 4px 0 0;
	font-size: 0.88rem;
	color: var(--muted);
}

.add-friend-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.friends-sections {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	min-height: 0;
}

.friends-section {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(17, 24, 36, 0.7);
	padding: 10px;
	overflow-y: auto;
	min-height: 0;
}

.friends-section h3 {
	margin: 0 0 8px;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.friend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	margin-bottom: 8px;
}

.friend-user {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	border: none;
	background: transparent;
	color: var(--text);
	text-align: left;
	padding: 0;
	min-width: 0;
}

.friend-user img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.friend-user-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.friend-user-text strong,
.friend-user-text span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.friend-user-text span {
	font-size: 0.76rem;
	color: var(--muted);
}

.friend-actions {
	display: flex;
	gap: 6px;
}

.chat-view {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: visible;
	min-height: 0;
	height: 100%;
}

.chat-header {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	flex: 0 0 auto;
}

.chat-header-main {
	min-width: 0;
}

.chat-header-main-dm {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.chat-header-avatar-wrap {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

.chat-header-copy {
	min-width: 0;
}

.chat-header-copy h2,
.chat-header-main > h2 {
	margin: 0;
	font-size: 1.1rem;
}

.chat-header-copy p,
.chat-header-main > p {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: var(--muted);
}

.server-chat-header-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.server-chat-header-title i {
	color: color-mix(in srgb, var(--accent) 64%, white 18%);
	font-size: 0.92em;
}

.chat-header-status-indicator {
	right: -2px;
	bottom: -2px;
}

.chat-header-actions {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	flex-wrap: wrap;
	gap: 8px;
}

.chat-activity-panel {
	position: absolute;
	inset: 0 0 100px 0;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	z-index: 4;
	pointer-events: none;
}

.chat-activity-frame-shell {
	height: 100%;
	min-height: 0;
	border-radius: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.22);
	pointer-events: auto;
}

.chat-activity-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #121213;
}

.call-start-button {
	min-width: 42px;
	padding-inline: 11px;
	gap: 0;
}

.call-start-button.active {
	border-color: rgba(255, 125, 125, 0.62);
	background: rgba(213, 91, 115, 0.2);
}

.chat-call-panel {
	margin: 10px 16px 10px;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.035);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.chat-call-panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.chat-call-panel-head strong {
	font-size: 0.9rem;
}

.chat-call-panel-head span {
	font-size: 0.76rem;
	color: var(--muted);
}

.chat-call-participant-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	align-items: stretch;
	gap: 10px;
	padding-bottom: 1px;
}

.chat-call-participant {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	height: 210px;
	min-height: 210px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	border-radius: 16px;
	padding: 10px;
	display: flex;
	align-items: flex-end;
	text-align: left;
	user-select: none;
	cursor: pointer;
	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		min-height 0.24s ease;
}

.chat-call-participant::before {
	content: "";
	position: absolute;
	inset: -18px;
	background-image: var(--call-card-backdrop, linear-gradient(145deg, rgba(90, 115, 255, 0.6), rgba(13, 22, 35, 0.9)));
	background-size: cover;
	background-position: center;
	filter: blur(13px) saturate(1.18);
	transform: scale(1.08);
	z-index: -3;
}

.chat-call-participant::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 18, 0.12) 0%, rgba(8, 12, 18, 0.72) 72%, rgba(8, 12, 18, 0.88) 100%);
	z-index: -2;
}

.chat-call-participant:hover {
	transform: translateY(-1px);
	border-color: rgba(162, 178, 255, 0.55);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.chat-call-participant.self {
	border-color: rgba(115, 140, 255, 0.72);
}

.chat-call-participant.media-active::after {
	background: linear-gradient(180deg, rgba(7, 10, 14, 0.05) 0%, rgba(7, 10, 14, 0.58) 64%, rgba(7, 10, 14, 0.84) 100%);
}

.chat-call-card-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: rgba(5, 8, 14, 0.94);
	z-index: 0;
}

.chat-call-audio {
	display: none;
}

.chat-call-participant.local-stream-active::before {
	opacity: 0;
}

.chat-call-participant.local-stream-active::after {
	background: linear-gradient(180deg, rgba(7, 10, 14, 0.04) 0%, rgba(7, 10, 14, 0.38) 68%, rgba(7, 10, 14, 0.72) 100%);
}

.chat-call-card-live-pill {
	position: absolute;
	right: 10px;
	bottom: 10px;
	max-width: calc(100% - 22px);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.48);
	font-size: 0.72rem;
	line-height: 1;
	white-space: nowrap;
	z-index: 3;
}

.chat-call-expand-button {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(0, 0, 0, 0.42);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.chat-call-participant:hover .chat-call-expand-button,
.chat-call-participant.expanded .chat-call-expand-button,
.chat-call-participant:focus-within .chat-call-expand-button {
	opacity: 1;
	pointer-events: auto;
}

.chat-call-avatar-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	z-index: 3;
	transition: opacity 0.14s ease;
}

.chat-call-participant.local-stream-active .chat-call-avatar-wrap {
	opacity: 0;
	pointer-events: none;
}

.chat-call-avatar {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.1);
}

.chat-call-avatar-mic {
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.34);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.66rem;
	line-height: 1;
}

.chat-call-avatar-mic.on {
	background: rgba(0, 0, 0, 0.64);
	color: #fff;
}

.chat-call-avatar-mic.off {
	background: rgba(207, 58, 78, 0.95);
	border-color: rgba(255, 171, 184, 0.6);
	color: #fff;
}

.chat-call-participant-name-overlay {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 5px 8px;
	border-radius: 9px;
	background: rgba(0, 0, 0, 0.56);
	z-index: 4;
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.14s ease, transform 0.14s ease;
}

.chat-call-participant:hover .chat-call-participant-name-overlay,
.chat-call-participant.expanded .chat-call-participant-name-overlay,
.chat-call-participant:focus-within .chat-call-participant-name-overlay {
	opacity: 1;
	transform: translateY(0);
}

.chat-call-participant-name {
	display: inline-block;
	max-width: 100%;
	font-size: 0.8rem;
	font-weight: 650;
}

.chat-call-participant-row.has-expanded {
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.chat-call-participant-row.has-expanded .chat-call-participant {
	height: 92px;
	min-height: 92px;
}

.chat-call-participant-row.has-expanded .chat-call-participant.expanded {
	grid-column: 1 / -1;
	order: -1;
	height: clamp(250px, 42vh, 460px);
	min-height: clamp(250px, 42vh, 460px);
}

.chat-call-participant-row.has-expanded .chat-call-participant.collapsed {
	opacity: 0.94;
}

.chat-call-participant-row.has-expanded .chat-call-participant.collapsed .chat-call-avatar-wrap {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	left: 50%;
	top: 50%;
}

.chat-call-participant-row.has-expanded .chat-call-participant.collapsed .chat-call-avatar-mic {
	width: 16px;
	height: 16px;
	right: -3px;
	bottom: -3px;
	border-width: 1px;
	font-size: 0.52rem;
}

.chat-call-participant-row.has-expanded .chat-call-participant.collapsed .chat-call-card-live-pill {
	display: none;
}

.chat-call-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
}

.chat-call-controls .call-control-button {
	min-height: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 10px;
	font-size: 0.8rem;
	gap: 6px;
}

.chat-call-controls .call-control-mic {
	position: relative;
	padding-bottom: 8px;
}

.call-control-mic-meter-track {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 4px;
	height: 3px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.42);
	overflow: hidden;
}

.call-control-mic-meter-fill {
	height: 100%;
	min-width: 2px;
	border-radius: inherit;
	background: linear-gradient(90deg, #5ad27d, #f4d36f, #f07f73);
	box-shadow: 0 0 8px rgba(90, 210, 125, 0.38);
	opacity: 0.42;
	transition: width 0.07s linear, opacity 0.12s ease;
}

.call-control-mic-meter-fill.active {
	opacity: 0.94;
}

.group-members-panel {
	margin: 0 16px 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 auto;
}

.group-members-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.group-members-actions {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.group-members-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.group-members-title-wrap strong {
	font-size: 0.9rem;
	line-height: 1.1;
}

.group-members-title-wrap span {
	font-size: 0.78rem;
	color: var(--muted);
}

.group-members-add-toggle {
	min-width: 82px;
}

.group-members-invite-button,
.group-members-leave-button {
	min-width: 88px;
}

.group-members-add-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: min(220px, 30vh);
	overflow-y: auto;
	padding-right: 2px;
}

.group-add-friend-row {
	border: 1px solid rgba(255, 255, 255, 0.11);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	border-radius: 10px;
	padding: 7px 8px;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	text-align: left;
}

.group-add-friend-row.selected {
	border-color: color-mix(in srgb, var(--accent) 70%, white 30%);
	background: color-mix(in srgb, var(--accent-soft) 60%, rgba(255, 255, 255, 0.04));
}

.group-add-friend-row.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.group-add-friend-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.group-add-friend-copy span {
	font-size: 0.74rem;
	color: var(--muted);
}

.group-invite-link-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.group-invite-link-row input {
	width: 100%;
}

.group-members-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: min(300px, 38vh);
	overflow-y: auto;
	padding-right: 2px;
}

.group-member-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 7px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	background: rgba(255, 255, 255, 0.03);
}

.group-member-profile {
	border: none;
	background: transparent;
	color: var(--text);
	padding: 0;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	text-align: left;
	min-width: 0;
}

.group-member-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--panel-soft);
}

.group-member-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.group-member-copy span {
	font-size: 0.74rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.server-voice-stage {
	margin: 10px 10px;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--surface-border) 66%);
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--accent-soft) 62%, rgba(255, 255, 255, 0.03)),
		rgba(255, 255, 255, 0.04)
	);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
}

.server-voice-stage-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.server-voice-stage-copy strong {
	font-size: 0.96rem;
}

.server-voice-stage-copy span {
	font-size: 0.8rem;
	color: var(--muted);
}

.group-member-remove-button {
	min-width: 96px;
}

.message-list-shell {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	display: flex;
	overflow: visible;
}

.message-list {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-anchor: none;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	background: var(--chat-panel-background);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 12px;
}

.message-list-shell.has-unread-banner .message-list {
	padding-top: 64px;
}

.message-unread-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 4px;
}

.message-unread-divider-line {
	height: 1px;
	flex: 1 1 auto;
	background: #ff4a4a;
	opacity: 0.95;
}

.message-unread-divider-label {
	color: #ff4a4a;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.chat-message {
	display: grid;
	grid-template-columns: var(--avatar) minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin-top: var(--message-gap);
	position: relative;
	padding: 0;
	border-radius: 10px;
	transition: background 0.16s ease, box-shadow 0.16s ease;
}

/* subtle highlight for messages on hover */
.chat-message:hover {
	background: rgba(255, 255, 255, 0.02);
	box-shadow: 0 2px 10px rgba(0,0,0,0.035);
}

.chat-message.is-pending {
	background: rgba(255, 255, 255, 0.016);
}

.chat-message.is-pending .message-meta,
.chat-message.is-pending .message-content,
.chat-message.is-pending .message-reply-preview {
	opacity: 0.68;
}

.chat-message.is-failed {
	background: rgba(213, 91, 115, 0.08);
	border: 1px solid rgba(213, 91, 115, 0.2);
}

.chat-message.is-failed .message-meta span,
.chat-message.is-failed .message-delivery-inline {
	color: #ffb4c0;
}

.chat-message.is-first {
	margin-top: 0;
}

.chat-message.compact {
	margin-top: 1px;
}

.chat-message.compact.is-first {
	margin-top: 0;
}

.chat-message.mentioned-for-you {
	background: rgba(147, 108, 14, 0.28);
	border: 1px solid rgba(255, 219, 92, 0.88);
	box-shadow: inset 0 0 0 1px rgba(255, 233, 156, 0.2);
}

.chat-message.jump-highlight {
	animation: jump-highlight-fade 1.3s ease-in-out;
}

.chat-message.message-enter {
	animation: message-slide-in-left 360ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, opacity;
}

@keyframes jump-highlight-fade {
	0% {
		background: rgba(255, 221, 102, 0);
		box-shadow: inset 0 0 0 1px rgba(255, 221, 102, 0);
	}
	22% {
		background: rgba(171, 125, 18, 0.34);
		box-shadow: inset 0 0 0 1px rgba(255, 221, 102, 0.88);
	}
	100% {
		background: rgba(255, 221, 102, 0);
		box-shadow: inset 0 0 0 1px rgba(255, 221, 102, 0);
	}
}

@keyframes message-slide-in-left {
	0% {
		transform: translateX(-24px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.chat-avatar-spacer {
	width: var(--avatar);
	height: 0;
}

.message-body {
	min-width: 0;
	position: relative;
	padding-right: 74px;
}

.message-hover-actions {
	position: absolute;
	top: -2px;
	right: 0;
	display: inline-flex;
	gap: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
	z-index: 10;
}

.chat-message:hover .message-hover-actions,
.chat-message:focus-within .message-hover-actions,
.message-hover-actions.open {
	opacity: 1;
	pointer-events: auto;
}

.chat-message.editing .message-hover-actions {
	display: none;
}

.message-action-button {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	border-radius: 999px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.message-reaction-split-pill {
	height: 28px;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	padding: 0 3px 0 4px;
	gap: 2px;
}

.message-reaction-quick-button,
.message-reaction-picker-button {
	border: none;
	background: transparent;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	min-width: 24px;
	padding: 0;
	border-radius: 999px;
}

.message-reaction-quick-button:hover,
.message-reaction-picker-button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.message-reaction-quick-button:disabled,
.message-reaction-picker-button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.message-reaction-quick-image {
	width: 17px;
	height: 17px;
	object-fit: contain;
}

.message-reaction-quick-emoji {
	font-size: 1rem;
	line-height: 1;
}

.message-reaction-picker-button i {
	font-size: 0.86rem;
}

.message-reaction-split-divider {
	width: 1px;
	align-self: stretch;
	margin: 2px 3px;
	background: rgba(255, 255, 255, 0.28);
	border-radius: 999px;
}

.message-action-button.danger {
	border-color: rgba(213, 91, 115, 0.5);
	background: rgba(213, 91, 115, 0.18);
	color: #ffdbe4;
}

.chat-message > .chat-avatar {
	width: var(--avatar);
	height: var(--avatar);
	border-radius: 50%;
	object-fit: cover;
	background: var(--panel-soft);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.message-meta {
	margin: 0;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: 0.86rem;
	min-width: 0;
	padding: 4px 8px;
}

.sender-name {
	border: none;
	background: transparent;
	font-weight: 700;
	padding: 0;
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.sender-name:hover {
	text-decoration: underline;
}

.sender-name-text {
	max-width: 280px;
	font-size: 1.08rem;
	line-height: 1.16;
}

.message-meta .sender-name .styled-username {
	font-size: 1.08rem;
}

.message-meta span {
	color: var(--muted);
	font-size: 0.78rem;
}

.message-meta-right {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex-wrap: nowrap;
	overflow: hidden;
}

.message-meta-separator {
	opacity: 0.7;
}

.message-read-receipts-label {
	color: rgba(210, 220, 255, 0.9);
	font-size: 0.74rem;
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.message-read-receipts-label,
	.message-meta-separator {
		display: none;
	}

	.message-meta-right > span:first-child {
		/* Hide AM/PM on small screens */
		overflow: hidden;
		text-overflow: clip;
		white-space: nowrap;
		max-width: 80px;
	}
}

.message-read-receipts-collage {
	display: inline-flex;
	align-items: center;
	padding-left: 2px;
	flex-shrink: 0;
}

.message-read-receipt-hover-anchor {
	display: inline-flex;
	margin-left: -10px;
	position: relative;
}

.message-read-receipt-hover-anchor:first-child {
	margin-left: 0;
}

.message-read-receipt-hover-anchor .hover-info-card {
	min-width: 150px;
	max-width: 290px;
}

.message-read-receipt-avatar-wrap {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 2.5px solid var(--panel-strong);
	margin-left: 0;
	overflow: hidden;
	transition: transform 120ms ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transform-origin: center center;
	animation: avatar-pop-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
	z-index: 1;
	flex-shrink: 0;
}

.message-read-receipt-avatar-wrap:first-child {
	margin-left: 0;
}

.message-read-receipt-avatar-wrap:hover {
	transform: translateY(-2px) scale(1.1);
	z-index: 2;
}

.message-read-receipt-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.message-read-receipt-overflow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	margin-left: 0;
	border: 2.5px solid var(--panel-strong);
	background: rgba(255, 255, 255, 0.1);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: rgba(231, 238, 255, 0.95);
}

.message-meta-lock {
	color: rgba(176, 222, 190, 0.95);
	font-size: 0.72rem;
	margin-left: 2px;
}

@keyframes avatar-pop-in {
	0%   { transform: scale(0)    rotate(0deg);                     opacity: 0; }
	32%  { transform: scale(1.28) rotate(0deg);                     opacity: 1; }
	42%  { transform: scale(1.28) rotate(calc(var(--tilt) - 2deg)); }
	51%  { transform: scale(1.28) rotate(calc(var(--tilt) + 4deg)); }
	58%  { transform: scale(1.28) rotate(calc(var(--tilt) - 7deg)); }
	64%  { transform: scale(1.28) rotate(calc(var(--tilt) + 9deg)); }
	69%  { transform: scale(1.28) rotate(calc(var(--tilt) - 9deg)); }
	74%  { transform: scale(1.28) rotate(calc(var(--tilt) + 7deg)); }
	80%  { transform: scale(1.16) rotate(calc(var(--tilt) - 4deg)); }
	87%  { transform: scale(1.07) rotate(calc(var(--tilt) + 2deg)); }
	93%  { transform: scale(1.02) rotate(-1deg);                    }
	100% { transform: scale(1)    rotate(0deg);                     opacity: 1; }
}

.message-content {
	margin: 2px 0 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	line-height: 1.36;
	word-break: break-word;
	font-family: var(--message-font);
	word-spacing: var(--message-word-spacing);
}

.chat-message.compact .message-content {
	margin-top: 0;
}

.message-delivery-inline {
	display: inline-flex;
	margin-top: 6px;
	font-size: 0.74rem;
	letter-spacing: 0.03em;
	color: var(--muted);
}

.message-delivery-inline.failed {
	color: #ffb4c0;
}

.message-text-row {
	display: inline-flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 6px;
	max-width: 100%;
}

.message-body-stack {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(760px, 100%);
}

.message-url-embed {
	max-width: min(600px, 100%);
}

.message-url-embed a {
	color: inherit;
}

.message-url-embed img {
	display: block;
	max-width: 100%;
}

.message-text-row .message-markdown {
	display: inline;
}

.message-text-row .message-markdown.emoji-large {
	display: inline-flex;
}

.message-reply-preview {
	position: relative;
	display: grid;
	grid-template-columns: 18px auto minmax(0, 1fr);
	align-items: center;
	gap: 4px;
	margin: 0 0 4px;
	padding: 0 0 0 12px;
	border: none;
	background: transparent;
	color: var(--text);
	min-width: 0;
	text-align: left;
}

.message-reply-preview-header {
	grid-column: 1 / -1;
	margin: 0 0 2px;
	padding-left: 18px;
}

.message-reply-preview::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 8px;
	height: 10px;
	border-left: 2px solid color-mix(in srgb, var(--accent) 60%, var(--surface-border));
	border-top: 2px solid color-mix(in srgb, var(--accent) 60%, var(--surface-border));
	border-top-left-radius: 8px;
	opacity: 0.9;
}

.message-reply-preview:hover .message-reply-text {
	color: color-mix(in srgb, var(--text) 88%, #ffffff);
}

.message-reply-avatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.08);
}

.message-reply-author {
	font-size: 0.78rem;
	font-weight: 650;
	white-space: nowrap;
}

.message-reply-text {
	font-size: 0.76rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.message-reply-text .composer-mention-chip,
.composer-replying-copy span .composer-mention-chip {
	gap: 4px;
	padding: 1px 6px 1px 3px;
	font-size: 0.72rem;
}

.message-reply-text .composer-mention-chip img,
.composer-replying-copy span .composer-mention-chip img {
	width: 14px;
	height: 14px;
}

.message-reply-text .composer-custom-emoji-chip,
.composer-replying-copy span .composer-custom-emoji-chip {
	width: 1.1em;
	height: 1.1em;
}

.message-edit-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: flex-start;
	gap: 8px;
	padding: 2px;
}

.message-edit-form textarea {
	min-height: 32px;
	max-height: 300px;
	padding: 6px 10px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	resize: none;
	overflow-y: auto;
	word-wrap: break-word;
	white-space: pre-wrap;
	font-weight: 500;
	transition: border-color 0.2s, background 0.2s;
}

.message-edit-form textarea:focus {
	outline: none;
	border-color: rgba(126, 158, 255, 0.5);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 2px rgba(126, 158, 255, 0.2);
}

.message-edit-form textarea::placeholder {
	color: var(--muted);
}

.message-edit-actions {
	display: inline-flex;
	gap: 6px;
}

.message-edit-button {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.message-edit-button.confirm {
	border-color: rgba(83, 210, 125, 0.68);
	background: rgba(83, 210, 125, 0.22);
	color: #d9ffe8;
}

.message-edit-button.cancel {
	border-color: rgba(213, 91, 115, 0.6);
	background: rgba(213, 91, 115, 0.2);
	color: #ffdbe4;
}

.message-edit-form input:disabled,
.message-edit-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.message-attachment {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.message-attachment-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.attachment-audio-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		linear-gradient(135deg, rgba(101, 132, 255, 0.12), rgba(20, 27, 44, 0.26)),
		rgba(255, 255, 255, 0.04);
	max-width: min(520px, 100%);
}

.attachment-video-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		linear-gradient(135deg, rgba(92, 184, 255, 0.12), rgba(20, 27, 44, 0.26)),
		rgba(255, 255, 255, 0.04);
	max-width: min(680px, 100%);
}

.attachment-video-player {
	width: 100%;
	max-height: min(420px, 60vh);
	border-radius: 10px;
	background: #000;
}

.attachment-video-meta {
	font-size: 0.78rem;
	color: var(--muted);
}

.attachment-audio-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.82rem;
}

.attachment-audio-meta strong,
.attachment-audio-meta span {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attachment-audio-meta span {
	color: var(--muted);
}

.attachment-audio-player {
	width: 100%;
}

.message-gif-inline {
	display: inline-flex;
	width: min(980px, 100%);
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	max-width: min(980px, 100%);
	cursor: pointer;
}

.message-gif-inline-shell {
	position: relative;
	display: inline-flex;
	width: min(980px, 100%);
	max-width: min(980px, 100%);
}

.message-gif-inline-image {
	display: block;
	width: 100%;
	max-width: min(980px, 100%);
	max-height: 80vh;
	border-radius: 12px;
	object-fit: contain;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.02);
}

.account-lock-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(2,6,23,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.account-lock-card {
	background: #0f1724;
	padding: 24px;
	border-radius: 12px;
	max-width: 420px;
	width: 100%;
	display: grid;
	gap: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
.account-lock-card input {
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.06);
	background: rgba(255,255,255,0.02);
	color: #fff;
	width: 100%;
}

.message-gif-favorite-button {
	top: 10px;
	left: 10px;
}

.message-gif-inline-shell:hover .message-gif-favorite-button,
.message-gif-favorite-button.active {
	opacity: 1;
}

.inline-invite-card {
	display: grid;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid rgba(116, 145, 255, 0.24);
	background:
		linear-gradient(145deg, rgba(86, 113, 224, 0.16), rgba(36, 46, 76, 0.4)),
		rgba(11, 17, 28, 0.84);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
	max-width: min(420px, 100%);
}

.inline-invite-card.is-unavailable {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
}

.inline-invite-card-server {
	border-color: rgba(126, 200, 255, 0.24);
	background:
		linear-gradient(145deg, rgba(60, 118, 196, 0.18), rgba(27, 41, 70, 0.42)),
		rgba(11, 17, 28, 0.84);
}

.inline-invite-hero {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.inline-invite-server-hero {
	grid-template-columns: 76px minmax(0, 1fr);
}

.inline-invite-fan {
	position: relative;
	width: 76px;
	height: 60px;
}

.inline-invite-fan-avatar {
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(9, 13, 22, 0.96);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.inline-invite-fan-avatar.fan-slot-1 {
	left: 0;
	top: 18px;
	z-index: 1;
	transform: rotate(-14deg);
}

.inline-invite-fan-avatar.fan-slot-2 {
	left: 14px;
	top: 4px;
	z-index: 2;
	transform: rotate(-6deg);
}

.inline-invite-fan-avatar.fan-slot-3 {
	left: 28px;
	top: 18px;
	z-index: 3;
}

.inline-invite-fan-avatar.fan-slot-4 {
	left: 42px;
	top: 6px;
	z-index: 4;
	transform: rotate(8deg);
}

.inline-invite-fan-avatar.fan-slot-5 {
	left: 20px;
	top: 28px;
	z-index: 5;
	transform: rotate(14deg);
}

.inline-invite-server-icon {
	width: 76px;
	height: 76px;
	border-radius: 24px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--panel-soft);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.inline-invite-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.inline-invite-copy strong {
	font-size: 0.96rem;
	line-height: 1.3;
}

.inline-invite-copy span {
	font-size: 0.82rem;
	color: var(--muted);
}

.inline-invite-join-button {
	justify-self: start;
}

.message-reactions {
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	position: relative;
}

.message-edited-inline {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: 0.72rem;
	color: var(--muted);
	opacity: 0.5;
}

.message-edited-inline-standalone {
	margin-top: 4px;
}

.reaction-badge {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	border-radius: 999px;
	height: 28px;
	padding: 0 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 0.83rem;
}

.reaction-badge.active {
	background: var(--accent-soft);
	border-color: rgba(134, 157, 255, 0.7);
}

.reaction-badge .reaction-emoji {
	font-size: 1.15rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.reaction-badge .reaction-emoji-image {
	width: 1.3rem;
	height: 1.3rem;
	object-fit: contain;
	display: inline-flex;
}

.reaction-badge .reaction-count {
	font-size: 0.8rem;
	line-height: 1;
}

.emoji-picker-surface {
	width: min(420px, calc(100vw - 32px));
	height: min(360px, 58vh);
	padding: 8px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(8, 11, 17, 0.96);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	max-height: min(360px, 58vh);
	overflow: hidden;
}

.emoji-picker-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.emoji-picker-search i {
	color: var(--muted);
	font-size: 0.82rem;
}

.emoji-picker-search input {
	flex: 1;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.06);
}

.emoji-add-button {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.emoji-add-button.active {
	border-color: color-mix(in srgb, var(--accent) 68%, white 12%);
	background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
}

.emoji-custom-creator {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--surface-border) 84%, var(--accent) 16%);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.emoji-custom-creator-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 140px);
	gap: 8px;
}

.emoji-custom-creator-grid label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.76rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--muted);
}

.emoji-custom-upload-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.76rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 8px;
	border-radius: 10px;
	border: 1px dashed rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.03);
}

.emoji-custom-upload-label input[type="file"] {
	color: var(--text);
	font-size: 0.78rem;
}

.emoji-custom-upload-label input[type="file"]::file-selector-button {
	margin-right: 8px;
	padding: 5px 9px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--surface-border));
	background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
	color: var(--text);
	cursor: pointer;
}

.emoji-custom-creator-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: stretch;
}

.emoji-custom-preview {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 3px;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
}

.emoji-custom-preview img,
.emoji-custom-preview > span {
	width: 44px;
	height: 44px;
	grid-row: 1 / span 2;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	object-fit: contain;
	color: var(--muted);
	font-size: 0.68rem;
	text-align: center;
	padding: 3px;
}

.emoji-custom-preview strong {
	font-size: 0.9rem;
	line-height: 1.1;
}

.emoji-custom-preview small {
	font-size: 0.74rem;
	color: var(--muted);
}

.emoji-custom-creator-actions {
	display: inline-flex;
	align-items: center;
}

.emoji-custom-existing {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
	gap: 6px;
}

.emoji-custom-existing-item {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
}

.emoji-custom-existing-item img {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	object-fit: contain;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.emoji-custom-existing-item span {
	font-size: 0.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.emoji-custom-delete-button {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	border: 1px solid rgba(213, 91, 115, 0.5);
	background: rgba(213, 91, 115, 0.2);
	color: #ffdbe4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.custom-emoji-modal {
	width: min(700px, 96vw);
	max-height: 86vh;
	overflow-y: auto;
}

.dm-search-modal {
	width: min(760px, 96vw);
	max-height: 86vh;
	overflow-y: auto;
}

.dm-search-controls {
	display: grid;
	gap: 10px;
	margin-top: 12px;
	margin-bottom: 12px;
}

.dm-search-results {
	max-height: 420px;
	overflow: auto;
	display: grid;
	gap: 8px;
}

.dm-search-result-row {
	text-align: left;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.03);
	border-radius: 10px;
	padding: 10px;
	color: inherit;
}

.dm-search-result-row p {
	margin: 6px 0 0;
	opacity: 0.9;
}

.custom-emoji-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--surface-border);
}

.custom-emoji-modal-head h2 {
	margin: 0;
	font-size: 1.06rem;
}

.custom-emoji-modal-head .settings-note {
	margin-top: 4px;
}

.custom-emoji-creator-modal {
	margin-top: 10px;
	margin-bottom: 0;
}

.emoji-picker-layout {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 8px;
	flex: 1 1 auto;
	height: min(320px, 48vh);
	min-height: 0;
	overflow: hidden;
}

.emoji-picker-sections {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	padding-right: 2px;
}

.emoji-section-button {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.emoji-section-button.active {
	background: rgba(90, 115, 255, 0.5);
	border-color: rgba(145, 164, 255, 0.86);
}

.emoji-grid-shell {
	display: flex;
	flex-direction: column;
	min-height: 0;
	gap: 6px;
	overflow: hidden;
}

.emoji-frequent-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.emoji-frequent-header {
	padding-top: 2px;
}

.emoji-frequent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
	grid-auto-rows: 34px;
	align-content: start;
	gap: 6px;
	max-height: calc(34px * 4 + 6px * 3);
	overflow-y: auto;
	padding-right: 2px;
}

.emoji-grid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--muted);
}

.emoji-grid-header strong {
	font-size: 0.78rem;
	color: var(--text);
}

.emoji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
	grid-auto-rows: 34px;
	align-content: start;
	gap: 6px;
	overflow-y: auto;
	min-height: 0;
	height: 100%;
	padding-right: 2px;
}

.emoji-grid-item {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.emoji-grid-item img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.emoji-grid-item span {
	font-size: 1.15rem;
	line-height: 1;
}

.emoji-empty {
	margin: 8px 0;
	color: var(--muted);
	font-size: 0.8rem;
	grid-column: 1 / -1;
	text-align: center;
}

.message-reaction-picker {
	position: absolute;
	top: auto;
	bottom: calc(100% + 6px);
	right: 0;
	z-index: 4;
}

/* place the picker below the message when there's not enough space above */
.message-reaction-picker.message-reaction-picker-below {
    top: calc(100% + 6px);
    bottom: auto;
    right: 0;
}

.emoji-token-suggestion-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.45rem;
	height: 1.45rem;
	font-size: 1.1rem;
}

img.twemoji,
img.emoji {
	width: 1.1em;
	height: 1.1em;
	margin: 0 0.05em;
	vertical-align: -0.18em;
	object-fit: contain;
}

.reaction-badge img.twemoji,
.reaction-badge img.emoji {
	width: 1.28em;
	height: 1.28em;
	margin: 0;
	vertical-align: middle;
}

.composer-emoji-picker {
	position: absolute;
	left: 16px;
	bottom: calc(100% + 8px);
	z-index: 6;
}

.composer-picker-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	padding: 0px 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.composer-picker-tabs + .emoji-picker-search {
	margin-top: 8px;
}

.composer-picker-tab {
	position: relative;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.48);
	padding: 10px 8px 10px;
	font-size: 0.9rem;
	font-weight: 700;
}

.composer-picker-tab.active {
	color: #fff;
}

.composer-picker-tab.active::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: -1px;
	height: 2px;
	border-radius: 999px;
	background: #fff;
}

.gif-picker-shell {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-right: 2px;
}

.gif-picker-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.gif-picker-card-shell {
	position: relative;
}

.gif-picker-card {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.gif-picker-card img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.04);
}

.gif-favorite-button {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.46);
	color: rgba(255, 255, 255, 0.82);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
	z-index: 1;
}

.gif-picker-card-shell:hover .gif-favorite-button,
.gif-favorite-button.active {
	opacity: 1;
}

.gif-favorite-button.active {
	background: rgba(255, 72, 116, 0.2);
	color: #ff8ea8;
}

.attachment-image-button {
	display: inline-flex;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	cursor: zoom-in;
	max-width: min(800px, 100%);
}

.attachment-image {
	display: block;
	max-width: min(800px, 100%);
	max-height: 800px;
	width: auto;
	height: auto;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	object-fit: contain;
	background: rgba(255, 255, 255, 0.04);
	transition: transform 0.18s ease, filter 0.18s ease;
}

.attachment-image-button:hover .attachment-image {
	transform: scale(1.01);
	filter: brightness(1.03);
}

.attachment-download {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 11px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	text-decoration: none;
	font-size: 0.86rem;
	cursor: pointer;
	width: min(520px, 100%);
	text-align: left;
}

.attachment-download:hover {
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.08);
}

.attachment-download-copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.attachment-download-copy i {
	font-size: 0.8rem;
	opacity: 0.88;
	flex-shrink: 0;
}

.attachment-download-copy span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.message-markdown {
	display: block;
	white-space: normal;
}

.message-markdown.emoji-large {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.16em;
	line-height: 1;
}

.message-markdown.emoji-large-1 {
	font-size: 4rem;
}

.message-markdown.emoji-large-2 {
	font-size: 3.2rem;
}

.message-markdown.emoji-large-3 {
	font-size: 2.6rem;
}

.message-markdown.emoji-large img.twemoji,
.message-markdown.emoji-large img.emoji {
	width: 1em;
	height: 1em;
	margin: 0;
	vertical-align: middle;
}

.custom-emoji-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	vertical-align: -0.2em;
}

.custom-emoji-chip-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.message-markdown a {
	color: var(--accent);
	text-decoration: none;
}

.message-markdown a:hover {
	text-decoration: underline;
}

.chat-system-message {
	margin-top: 6px;
	padding: 0 4px 0 calc(var(--avatar) + 8px);
}

.chat-system-message.is-first {
	margin-top: 0;
}

.chat-system-message p {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
	color: var(--muted);
	font-size: 0.8rem;
}

.chat-system-message p i {
	color: color-mix(in srgb, var(--accent) 68%, white 14%);
	font-size: 0.84rem;
}

.mention-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0 3px 0 1px;
	margin: 0 0px;
	border-radius: 999px;
	border: 1px solid rgba(126, 158, 255, 0.86);
	background: rgba(73, 118, 255, 0.38);
	color: #edf3ff;
	text-decoration: none;
	vertical-align: baseline;
	cursor: pointer;
	line-height: 1;
	height: fit-content;
}

.mention-chip:focus-visible {
	outline: 2px solid rgba(172, 194, 255, 0.88);
	outline-offset: 1px;
}

.mention-chip-avatar {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(0, 0, 0, 0.2);
	flex-shrink: 0;
}

.mention-chip-name {
	font-size: 0.8rem;
	line-height: 1;
	font-weight: 650;
	white-space: nowrap;
	display: inline;
}

.md-inline-code {
	padding: 1px 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.11);
	font-family: "Cascadia Code", "Courier New", monospace;
	font-size: 0.9em;
}

.md-codeblock {
	margin: 4px 0 0;
	padding: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	font-family: "Cascadia Code", "Courier New", monospace;
	font-size: 0.85rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow-x: auto;
	border: 1px solid rgba(255, 255, 255, 0.05);
	display: flex;
	flex-direction: column;
}

.md-codeblock-lang {
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 0.7rem;
	color: #7d8590;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
	border-radius: 8px 8px 0 0;
}

.md-codeblock code {
	background: transparent;
	padding: 8px 10px;
	display: block;
	color: #c9d1d9;
	border-radius: 0 0 8px 8px;
	margin: 0;
}

/* Language-specific styling */
.md-codeblock code.language-javascript {
	background: rgba(240, 184, 56, 0.06);
}

.md-codeblock code.language-js {
	background: rgba(240, 184, 56, 0.06);
}

.md-codeblock code.language-python {
	background: rgba(53, 114, 165, 0.06);
}

.md-codeblock code.language-py {
	background: rgba(53, 114, 165, 0.06);
}

.md-codeblock code.language-typescript {
	background: rgba(43, 116, 137, 0.06);
}

.md-codeblock code.language-ts {
	background: rgba(43, 116, 137, 0.06);
}

.md-codeblock code.language-java {
	background: rgba(245, 130, 32, 0.06);
}

.md-codeblock code.language-cpp {
	background: rgba(243, 179, 73, 0.06);
}

.md-codeblock code.language-c {
	background: rgba(243, 179, 73, 0.06);
}

.md-codeblock code.language-csharp {
	background: rgba(154, 92, 187, 0.06);
}

.md-codeblock code.language-cs {
	background: rgba(154, 92, 187, 0.06);
}

.md-codeblock code.language-rust {
	background: rgba(206, 140, 99, 0.06);
}

.md-codeblock code.language-rs {
	background: rgba(206, 140, 99, 0.06);
}

.md-codeblock code.language-go {
	background: rgba(0, 173, 216, 0.06);
}

.md-codeblock code.language-ruby {
	background: rgba(206, 61, 36, 0.06);
}

.md-codeblock code.language-rb {
	background: rgba(206, 61, 36, 0.06);
}

.md-codeblock code.language-php {
	background: rgba(119, 123, 180, 0.06);
}

.md-codeblock code.language-html {
	background: rgba(255, 76, 48, 0.06);
}

.md-codeblock code.language-css {
	background: rgba(91, 183, 255, 0.06);
}

.md-codeblock code.language-sql {
	background: rgba(255, 165, 0, 0.06);
}

.md-codeblock code.language-json {
	background: rgba(255, 200, 50, 0.06);
}

.md-quote {
	margin: 4px 0 0;
	padding-left: 8px;
	border-left: 3px solid rgba(255, 255, 255, 0.3);
	color: var(--muted);
}

.empty-state {
	margin: auto;
	padding: 20px;
	text-align: center;
	color: var(--muted);
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: 12px;
}

.typing-indicator-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	padding: 28px 16px 8px;
	margin: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease;
}

.typing-indicator-bar.active {
	opacity: 1;
	pointer-events: none;
}

.typing-indicator-line {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	font-size: 0.82rem;
	line-height: 1.2;
	color: var(--muted);
	background: transparent !important;
	box-shadow: none !important;
}

.typing-user-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: none;
	background: transparent !important;
	color: var(--text);
	padding: 0 1px;
	border-radius: 8px;
	box-shadow: none !important;
	pointer-events: auto;
}

.typing-user-chip img {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent !important;
}

.typing-user-name {
	font-size: 0.82rem;
	font-weight: 650;
}

.typing-tail-text {
	color: var(--muted);
	letter-spacing: 0.01em;
	background: transparent !important;
}

.composer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	align-items: stretch;
	border-top: 1px solid var(--line);
	position: relative;
	z-index: 1;
	background: var(--composer-background, linear-gradient(180deg, rgba(18, 26, 40, 0.9), rgba(18, 26, 40, 0.98)));
	backdrop-filter: blur(var(--glass-blur));
	flex: 0 0 auto;
}

.composer-replying {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
}

.composer-pending-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.composer-tunnel-transfers {
	display: grid;
	gap: 10px;
}

.composer-tunnel-card {
	display: grid;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
		radial-gradient(circle at top right, rgba(93, 177, 255, 0.12), transparent 52%);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
	animation: tunnel-card-rise 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.composer-tunnel-card.status-waiting .composer-tunnel-progress-bar,
.composer-tunnel-card.status-connecting .composer-tunnel-progress-bar {
	background: linear-gradient(90deg, rgba(122, 181, 255, 0.88), rgba(76, 226, 198, 0.9));
	animation: tunnel-wait-pulse 1.4s ease-in-out infinite;
}

.composer-tunnel-card.status-denied,
.composer-tunnel-card.status-cancelled,
.composer-tunnel-card.status-failed,
.composer-tunnel-card.status-needs_reupload {
	border-color: rgba(255, 126, 126, 0.2);
}

.composer-tunnel-card-head,
.composer-tunnel-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.composer-tunnel-card-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.composer-tunnel-card-copy strong,
.composer-tunnel-card-copy span,
.composer-tunnel-card-size {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.composer-tunnel-card-copy strong {
	font-size: 0.88rem;
}

.composer-tunnel-card-copy span,
.composer-tunnel-card-size,
.composer-tunnel-card-foot > span,
.composer-tunnel-reason {
	font-size: 0.76rem;
	color: var(--muted);
}

.composer-tunnel-progress-shell {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.composer-tunnel-progress-bar {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #6bc8ff, #58f1c0);
	transition: width 0.22s ease;
}

.composer-tunnel-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.composer-tunnel-actions .primary-button,
.composer-tunnel-actions .secondary-button {
	padding: 8px 12px;
	min-height: 34px;
}

.composer-tunnel-reason {
	margin: 0;
}

@keyframes tunnel-card-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes tunnel-wait-pulse {
	0%,
	100% {
		opacity: 0.72;
	}
	50% {
		opacity: 1;
	}
}

.composer-pending-attachment {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
}

.composer-pending-attachment-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.composer-pending-attachment-copy strong,
.composer-pending-attachment-copy span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.composer-pending-attachment-copy strong {
	font-size: 0.82rem;
}

.composer-pending-attachment-copy span {
	font-size: 0.74rem;
	color: var(--muted);
}

.composer-pending-attachment-remove {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.composer-replying-preview {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	border: none;
	background: transparent;
	padding: 0;
	color: var(--text);
	text-align: left;
	min-width: 0;
}

.composer-replying-preview img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.24);
	margin-left: 2px;
}

.composer-replying-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.composer-replying-copy strong {
	font-size: 0.78rem;
	font-weight: 650;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.composer-replying-copy span {
	font-size: 0.74rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.composer-replying-cancel {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.mention-suggestions {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: calc(100% + 8px);
	max-height: min(280px, 44vh);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
		rgba(10, 14, 22, 0.97);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
	z-index: 9;
}

.mention-suggestion-item {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	text-align: left;
}

.mention-suggestion-item:hover {
	border-color: rgba(132, 157, 255, 0.86);
	background: rgba(84, 121, 255, 0.18);
}

.mention-suggestion-item img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.mention-suggestion-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.mention-suggestion-copy > span {
	font-size: 0.74rem;
	color: var(--muted);
}

.emoji-token-suggestions {
	max-height: min(220px, 36vh);
}

.slash-command-suggestions {
	max-height: min(220px, 34vh);
}

.slash-command-item {
	grid-template-columns: 28px minmax(0, 1fr);
}

.slash-command-icon {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	border: 1px solid rgba(143, 164, 255, 0.34);
	background: rgba(93, 118, 226, 0.2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.96rem;
}

.composer-command-count,
.composer-command-status {
	font-size: 0.76rem;
	color: var(--muted);
}

.composer-command-status {
	margin: 0;
}

.composer-command-status.error {
	color: #ffb6c2;
}

.composer-gif-inline-box {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--input-border);
	border-radius: 12px;
	background: transparent;
	margin-right: 0;
}

.composer-gif-inline-command {
	display: inline-block;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1;
}

.composer-gif-inline-query {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
	color: var(--muted);
	font-size: 0.76rem;
}

.composer-gif-inline-query span {
	font-weight: 700;
	white-space: nowrap;
}

.composer-gif-inline-query input {
	width: min(220px, 100%);
	max-width: 100%;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	font: inherit;
	outline: none;
}

.composer-gif-results {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(132px, 156px);
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

.composer-gif-result {
	display: block;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	text-align: left;
	min-width: 0;
}

.composer-gif-result img {
	width: 100%;
	height: 126px;
	border-radius: 10px;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.05);
}

.emoji-token-suggestion-item {
	grid-template-columns: 30px minmax(0, 1fr);
}

.emoji-token-suggestion-item img {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	object-fit: contain;
	background: rgba(255, 255, 255, 0.06);
}

.emoji-token-suggestion-item .mention-suggestion-copy strong {
	font-size: 0.84rem;
	line-height: 1.1;
}

.composer-input-shell {
	position: relative;
	min-width: 0;
	overflow: visible;
	margin-left: 104px;
	margin-right: 104px;
	transition: margin 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.composer.expanded .composer-input-shell {
	margin-left: 0;
	margin-right: 0;
}

.composer-input-overlay {
	position: absolute;
	inset: 0;
	display: block;
	padding: 11px 12px;
	pointer-events: none;
	overflow: hidden auto;
	scrollbar-width: none;
	white-space: pre-wrap;
	word-break: break-word;
	z-index: 3;
	line-height: 1.34;
	font-family: var(--message-font);
	font-size: 16px;
	word-spacing: var(--message-word-spacing);
	transition: opacity 0.12s ease;
}

.composer-input-overlay::-webkit-scrollbar {
	display: none;
}

.composer-input-rendered {
	display: block;
	min-height: 22px;
	color: var(--text);
	line-height: 1.34;
}

.composer-mention-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0 3px 0 1px;
	margin: 0 0px;
	border-radius: 999px;
	border: 1px solid rgba(122, 153, 255, 0.82);
	background: rgba(69, 113, 255, 0.34);
	color: #edf2ff;
	vertical-align: baseline;
	line-height: 1;
	height: fit-content;
}

.composer-mention-chip img {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background: rgba(0, 0, 0, 0.2);
	flex-shrink: 0;
}

.composer-custom-emoji-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	vertical-align: -0.2em;
}

.composer-custom-emoji-chip img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.composer-input-placeholder {
	display: block;
	color: var(--muted);
	opacity: 0.9;
}

.composer-text-input {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: 44px;
	max-height: 200px;
	resize: none;
	overflow-y: auto;
	border: 1px solid var(--input-border);
	border-radius: 12px;
	padding: 11px 12px;
	line-height: 1.34;
	font-family: var(--message-font);
	font-size: 16px;
	word-spacing: var(--message-word-spacing);
	background: transparent;
	color: transparent;
	-webkit-text-fill-color: transparent;
	caret-color: var(--text);
	text-shadow: none;
}

.composer-text-input::-webkit-scrollbar {
	display: none;
}

.composer-text-input::placeholder {
	color: transparent;
}

.composer.focused .composer-input-overlay {
	opacity: 1;
}

.composer.focused .composer-text-input {
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.composer.focused .composer-text-input::placeholder {
	color: var(--muted);
	opacity: 0.9;
}

.hidden-file-input {
	display: none;
}

.attachment-button {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	font-size: 1rem;
	line-height: 1;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.composer-floating-action {
	position: absolute;
	top: 50%;
	transition:
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		width 0.2s ease,
		height 0.2s ease,
		box-shadow 0.2s ease;
	z-index: 5;
}

.composer-upload-button {
	left: 0;
	--composer-button-transform: translate(calc(-100% - 56px), -50%);
	transform: translate(calc(-100% - 56px), -50%);
}

.composer-emoji-button {
	left: 0;
	--composer-button-transform: translate(calc(-100% - 8px), -50%);
	transform: translate(calc(-100% - 8px), -50%);
}

.composer-send-button {
	right: 0;
	--composer-button-transform: translate(calc(100% + 10px), -50%);
	transform: translate(calc(100% + 10px), -50%);
	height: 44px;
	min-width: 94px;
	border-radius: 12px;
}

.composer-send-button span {
	white-space: nowrap;
}

.composer.expanded .composer-input-overlay,
.composer.expanded .composer-text-input {
	padding-left: 84px;
	padding-right: 50px;
}

.composer.expanded .composer-upload-button,
.composer.expanded .composer-emoji-button,
.composer.expanded .composer-send-button {
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.composer.expanded .composer-upload-button {
	--composer-button-transform: translate(8px, -50%);
	transform: translate(8px, -50%);
}

.composer.expanded .composer-emoji-button {
	--composer-button-transform: translate(42px, -50%);
	transform: translate(42px, -50%);
}

.composer.expanded .composer-send-button {
	--composer-button-transform: translate(-8px, -50%);
	transform: translate(-8px, -50%);
	min-width: 0;
}

.composer.expanded .composer-send-button span {
	width: 0;
	opacity: 0;
	overflow: hidden;
}

.composer.expanded .composer-send-button i {
	font-size: 1.04rem;
}

.composer input:disabled,
.composer textarea:disabled,
.composer button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.status-banner {
	margin: 0;
	padding: 8px 12px;
	font-size: 0.9rem;
	color: #ffd58f;
	background: rgba(20, 24, 33, 0.95);
	border: 1px solid rgba(255, 213, 143, 0.35);
	border-radius: 10px;
	position: fixed;
	right: 16px;
	top: calc(16px + env(safe-area-inset-top, 0px));
	z-index: 90;
	max-width: min(92vw, 420px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.in-app-notification-stack {
	position: fixed;
	top: calc(10px + env(safe-area-inset-top, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 96;
	width: min(94vw, 440px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}

.in-app-notification-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(10, 15, 25, 0.92);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	pointer-events: auto;
	animation: notification-drop-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.in-app-notification-main {
	border: none;
	background: transparent;
	color: var(--text);
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
	padding: 9px 8px 9px 10px;
	text-align: left;
	min-width: 0;
}

.in-app-notification-main:hover {
	background: rgba(255, 255, 255, 0.06);
}

.in-app-notification-main img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: var(--panel-soft);
}

.in-app-notification-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.in-app-notification-copy strong {
	font-size: 0.86rem;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.in-app-notification-copy > span {
	font-size: 0.78rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.in-app-notification-kind {
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.in-app-notification-dismiss {
	width: 34px;
	border: none;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.in-app-notification-dismiss:hover {
	background: rgba(213, 91, 115, 0.22);
	color: #ffe4eb;
}

@keyframes notification-drop-in {
	0% {
		opacity: 0;
		transform: translateY(-18px) scale(0.98);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.context-menu-backdrop {
	position: fixed;
	inset: 0;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	z-index: 118;
}

.chat-list-context-menu {
	position: fixed;
	width: 230px;
	max-width: calc(100vw - 16px);
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(9, 14, 24, 0.96);
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	z-index: 119;
	animation: context-menu-in 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.context-menu-item {
	width: 100%;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: transparent;
	color: var(--text);
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	text-align: left;
	font-size: 0.82rem;
}

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

.context-menu-item:hover {
	background: rgba(88, 114, 255, 0.16);
}

.context-menu-item i {
	color: var(--muted);
	text-align: center;
}

@keyframes context-menu-in {
	0% {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.overlay {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.5);
	z-index: 60;
	padding:
		max(12px, calc(env(safe-area-inset-top, 0px) + 8px))
		max(12px, calc(env(safe-area-inset-right, 0px) + 8px))
		max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px))
		max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
}

.modal {
	width: min(640px, 96vw);
	max-height: 84vh;
	overflow: auto;
	border-radius: 12px;
	padding: 12px;
	background: var(--modal-background, linear-gradient(180deg, rgba(24, 29, 40, 0.98), rgba(20, 24, 33, 0.98)));
	border: 1px solid var(--surface-border);
	backdrop-filter: blur(var(--glass-blur));
}

.activities-modal {
	width: min(560px, 96vw);
	display: grid;
	gap: 14px;
}

.activities-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.activities-modal-head h2 {
	margin: 0;
}

.activities-modal-list {
	display: grid;
	gap: 10px;
}

.activities-modal-item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.activities-modal-item:hover {
	border-color: rgba(138, 175, 255, 0.52);
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.07);
}

.activities-modal-item.active {
	border-color: rgba(138, 175, 255, 0.62);
	background: rgba(110, 133, 255, 0.18);
}

.activities-modal-item-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.activities-modal-item-copy strong,
.activities-modal-item-copy span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.activities-modal-item-copy span {
	font-size: 0.83rem;
	color: var(--muted);
}

.image-viewer-overlay {
	z-index: 175;
	background: rgba(3, 6, 12, 0.34);
	backdrop-filter: blur(2px);
	overscroll-behavior: contain;
}

.image-viewer-shell {
	position: relative;
	width: min(96vw, 1220px);
	height: min(88vh, 920px);
	padding: 10px;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 8px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(10, 14, 22, 0.6);
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.35);
}

.image-viewer-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	background: rgba(0, 0, 0, 0.42);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 2;
}

.image-viewer-toolbar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-right: 42px;
}

.image-viewer-toolbar-button {
	width: 38px;
	height: 34px;
	padding: 0;
}

.image-viewer-zoom-label {
	min-width: 58px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--muted);
}

.image-viewer-viewport {
	position: relative;
	min-height: 0;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
	display: grid;
	place-items: center;
	touch-action: none;
	cursor: grab;
}

.image-viewer-viewport.panning {
	cursor: grabbing;
}

.image-viewer-viewport.magnifier-enabled {
	cursor: crosshair;
}

.image-viewer-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
	transform-origin: center center;
	pointer-events: none;
}

.image-viewer-lens {
	position: absolute;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.72);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
	background-repeat: no-repeat;
	pointer-events: none;
}

.invite-overlay {
	z-index: 170;
}

.invite-modal {
	width: min(680px, 96vw);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.invite-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.invite-modal-head h2 {
	margin: 0;
	font-size: 1.08rem;
}

.invite-chat-summary {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.04);
}

.invite-chat-banner {
	height: 80px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		linear-gradient(135deg, rgba(92, 116, 220, 0.54), rgba(47, 181, 163, 0.34)),
		var(--panel-soft);
	background-size: cover;
	background-position: center;
}

.invite-chat-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.invite-chat-copy strong {
	font-size: 1rem;
}

.invite-chat-copy span {
	font-size: 0.85rem;
	color: var(--muted);
}

.invite-chat-copy small {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.invite-members-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: min(320px, 42vh);
	overflow-y: auto;
	padding-right: 2px;
}

.invite-member-item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	text-align: left;
}

.invite-member-item img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: var(--panel-soft);
}

.invite-member-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.invite-member-copy small {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.invite-actions {
	margin-top: 2px;
}

.server-invite-modal {
	width: min(520px, 94vw);
}

.server-invite-summary {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.04);
}

.server-invite-summary-icon {
	width: 68px;
	height: 68px;
	border-radius: 22px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--panel-soft);
}

.server-invite-summary-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.server-invite-summary-copy strong,
.server-invite-summary-copy span,
.server-invite-summary-copy small {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.server-invite-summary-copy strong {
	font-size: 1rem;
}

.server-invite-summary-copy span,
.server-invite-summary-copy small {
	font-size: 0.82rem;
	color: var(--muted);
}

.server-create-modal {
	width: min(460px, 94vw);
	padding: 14px;
}

.server-create-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--surface-border);
	margin-bottom: 12px;
}

.server-create-head h2 {
	margin: 0;
	font-size: 1.08rem;
}

.server-create-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.server-create-preview {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--surface-border) 76%);
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--accent-soft) 52%, rgba(255, 255, 255, 0.03)),
		rgba(255, 255, 255, 0.04)
	);
}

.server-create-preview-icon {
	width: 68px;
	height: 68px;
	border-radius: 22px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: var(--panel-soft);
}

.server-create-preview-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.server-create-preview-copy strong {
	font-size: 1rem;
}

.server-create-preview-copy span {
	font-size: 0.82rem;
	color: var(--muted);
	line-height: 1.4;
}

.server-manager-modal {
	width: min(1120px, 96vw);
}

.server-manager-head {
	margin-bottom: 0;
}

.server-manager-summary {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px 2px 12px;
	border-bottom: 1px solid var(--surface-border);
	margin-bottom: 12px;
}

.server-manager-icon {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--panel-soft);
}

.server-manager-summary-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.server-manager-summary-copy strong,
.server-manager-summary-copy span {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.server-manager-summary-copy strong {
	font-size: 1rem;
}

.server-manager-summary-copy span,
.server-manager-summary-meta small {
	font-size: 0.8rem;
	color: var(--muted);
}

.server-manager-layout {
	height: min(74vh, 760px);
}

.server-manager-panel {
	display: flex;
	flex-direction: column;
}

.server-overview-card {
	background:
		radial-gradient(circle at top right, rgba(118, 154, 255, 0.18), transparent 34%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.server-overview-heading {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.server-overview-heading i {
	color: color-mix(in srgb, var(--accent) 72%, white 14%);
	font-size: 0.92em;
}

.server-overview-hero {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(6, 10, 18, 0.34);
}

.server-overview-preview-icon {
	width: 88px;
	height: 88px;
	border-radius: 28px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

.server-overview-hero-copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.server-overview-hero-copy strong {
	font-size: 1.08rem;
}

.server-overview-hero-copy span {
	font-size: 0.84rem;
	color: var(--muted);
}

.server-overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
	gap: 12px;
}

.server-overview-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.server-overview-field span,
.server-overview-upload {
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--muted);
}

.server-overview-upload {
	height: 100%;
	justify-content: center;
}

.server-overview-stats {
	background: rgba(255, 255, 255, 0.04);
}

.server-overview-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.server-overview-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 12px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
}

.server-overview-stat strong {
	font-size: 1.25rem;
}

.server-overview-stat span {
	font-size: 0.78rem;
	color: var(--muted);
}

.server-danger-card {
	border-color: rgba(213, 91, 115, 0.28);
	background: linear-gradient(180deg, rgba(213, 91, 115, 0.08), rgba(255, 255, 255, 0.03));
}

.server-danger-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.server-danger-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.server-section-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.server-manager-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.03);
}

.server-manager-split {
	display: grid;
	grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
	gap: 12px;
	min-height: 0;
}

.server-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.server-section-head h3 {
	margin: 0;
}

.server-inline-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.server-inline-form > input,
.server-inline-form > select {
	flex: 1 1 180px;
}

.server-inline-form > button {
	flex: 0 0 auto;
}

.server-manager-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: min(44vh, 420px);
	overflow-y: auto;
	padding-right: 2px;
}

.server-manager-list-item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	text-align: left;
}

.server-manager-list-item.active {
	border-color: color-mix(in srgb, var(--accent) 56%, var(--surface-border) 44%);
	background: color-mix(in srgb, var(--accent-soft) 48%, rgba(255, 255, 255, 0.03));
}

.server-manager-list-icon {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.84rem;
	color: color-mix(in srgb, var(--accent) 62%, white 18%);
}

.server-manager-list-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.server-manager-list-copy strong,
.server-manager-list-copy small {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.server-manager-list-copy strong {
	font-size: 0.88rem;
}

.server-manager-list-copy small {
	font-size: 0.75rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.server-permission-toolbar {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) auto;
	gap: 8px;
}

.server-permission-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: min(42vh, 420px);
	overflow-y: auto;
	padding-right: 2px;
}

.server-permission-row {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(92px, 1fr)) auto;
	gap: 8px;
	align-items: center;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}

.server-permission-subject {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.server-permission-subject strong,
.server-permission-subject small {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.server-permission-subject small {
	color: var(--muted);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.server-role-edit-form {
	min-height: 0;
}

.server-role-header-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 132px;
	gap: 10px;
}

.server-color-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--muted);
}

.server-color-field input[type="color"] {
	width: 100%;
	height: 42px;
	padding: 4px;
	border-radius: 12px;
	border: 1px solid var(--input-border);
	background: var(--input-bg);
}

.server-role-preview,
.server-role-chip,
.server-role-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.server-role-preview {
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}

.server-role-preview-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.server-role-preview-copy span {
	font-size: 0.8rem;
	color: var(--muted);
}

.server-role-swatch {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	flex: 0 0 auto;
}

.server-role-swatch.large {
	width: 18px;
	height: 18px;
}

.server-role-permissions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.server-checkbox-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.03);
}

.server-checkbox-row span {
	font-size: 0.84rem;
}

.server-member-list,
.server-ban-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	overflow-y: auto;
	padding-right: 2px;
}

.server-member-card,
.server-ban-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}

.server-member-card.owner {
	border-color: color-mix(in srgb, var(--accent) 36%, var(--surface-border) 64%);
}

.server-member-head,
.server-ban-card {
	align-items: center;
	justify-content: space-between;
}

.server-member-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.server-member-identity,
.server-ban-identity {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	border: none;
	background: transparent;
	color: var(--text);
	padding: 0;
	text-align: left;
	min-width: 0;
}

.server-member-copy,
.server-ban-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.server-member-copy span,
.server-member-copy small,
.server-ban-copy span,
.server-ban-copy small {
	font-size: 0.78rem;
	color: var(--muted);
}

.server-role-chip-list,
.server-role-toggle-list,
.server-member-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.server-role-chip {
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.78rem;
}

.server-role-toggle {
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.78rem;
	color: var(--text);
	cursor: pointer;
}

.server-role-toggle.selected {
	border-color: color-mix(in srgb, var(--accent) 58%, var(--surface-border) 42%);
	background: color-mix(in srgb, var(--accent-soft) 42%, rgba(255, 255, 255, 0.03));
}

.server-role-toggle.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.server-role-toggle input {
	display: none;
}

.server-ban-card {
	flex-direction: row;
}

.server-ban-copy strong {
	font-size: 0.9rem;
}

.server-invite-link-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.server-empty-state {
	margin: 0;
	padding: 12px;
	border-radius: 12px;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.02);
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

.update-required-overlay {
	z-index: 260;
	background: rgba(0, 0, 0, 0.78);
}

.update-required-modal {
	width: min(480px, 96vw);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-color: rgba(255, 210, 120, 0.45);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.update-required-modal h2 {
	margin: 0;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}

.update-required-copy {
	margin: 0;
	font-size: 0.95rem;
	color: #ffe5b0;
}

.update-required-detail {
	margin: 0;
	font-size: 0.85rem;
	color: var(--muted);
}

.update-required-version {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
}

.panel-form form,
.panel-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.panel-form h2 {
	margin: 0;
	font-size: 0.96rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.settings-modal {
	width: min(900px, 96vw);
	padding: 14px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.settings-head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 2px 12px;
	border-bottom: 1px solid var(--surface-border);
	margin-bottom: 12px;
}

.settings-head h2 {
	margin: 0;
	font-size: 1.22rem;
}

.settings-head p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 0.86rem;
}

.settings-close-button {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--button-border);
	background: var(--button-bg);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.settings-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 14px;
	height: min(76vh, 780px);
	min-height: 480px;
}

.settings-nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.settings-nav-button {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	border: 1px solid var(--surface-border);
	border-radius: 12px;
	background: var(--surface-soft);
	color: var(--text);
	padding: 10px;
	text-align: left;
}

.settings-nav-button.active {
	border-color: color-mix(in srgb, var(--accent) 60%, white 15%);
	background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.settings-nav-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.06);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.98rem;
}

.settings-nav-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.settings-nav-copy strong {
	font-size: 0.9rem;
}

.settings-nav-copy small {
	font-size: 0.76rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.settings-panel {
	background: none;
	overflow-y: auto;
}

.settings-panel h3 {
	margin: 0;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.settings-stack {
	gap: 12px;
}

.settings-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.04);
}

.dev-log-card {
	gap: 14px;
}

.dev-log-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.dev-log-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dev-log-composer {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dev-log-label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}

.dev-log-textarea {
	width: 100%;
	min-height: 220px;
	resize: vertical;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--surface-border));
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
		rgba(12, 14, 19, 0.74);
	color: #f5f7ff;
	padding: 14px 16px;
	font: 0.88rem/1.6 "Cascadia Code", "Courier New", monospace;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dev-log-textarea:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--accent) 72%, white 16%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent);
}

.dev-log-entry-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 520px;
	overflow-y: auto;
	padding-right: 4px;
}

.dev-log-entry-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: linear-gradient(135deg, rgba(90, 115, 255, 0.08), rgba(47, 181, 163, 0.06)),
		rgba(18, 26, 40, 0.5);
	transition: all 0.2s ease;
}

.dev-log-entry-card:hover {
	border-color: var(--accent);
	background: linear-gradient(135deg, rgba(90, 115, 255, 0.12), rgba(47, 181, 163, 0.1)),
		rgba(18, 26, 40, 0.6);
	box-shadow: 0 4px 12px rgba(90, 115, 255, 0.15);
}

.dev-log-entry-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.4;
}

.dev-log-entry-description {
	font-size: 0.9rem;
	color: var(--muted);
	line-height: 1.5;
}

.dev-log-entry-date {
	font-size: 0.8rem;
	color: var(--accent);
	margin-top: 4px;
}

.settings-note {
	margin: 0;
	color: var(--muted);
	font-size: 0.84rem;
	line-height: 1.38;
}

.settings-session-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 260px;
	overflow-y: auto;
	padding-right: 4px;
}

.settings-session-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.03);
}

.settings-session-card.current {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border) 45%);
	background: color-mix(in srgb, var(--accent-soft) 36%, rgba(255, 255, 255, 0.02));
}

.settings-session-card.disabled {
	border-style: dashed;
	opacity: 0.82;
}

.settings-session-heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.settings-session-heading strong {
	font-size: 0.86rem;
	letter-spacing: 0.02em;
}

.settings-session-heading span {
	font-size: 0.8rem;
	color: var(--muted);
}

.settings-session-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.settings-session-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	font-size: 0.8rem;
}

.settings-session-row span {
	color: var(--muted);
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.settings-session-row code,
.settings-session-row time {
	font-size: 0.8rem;
	color: var(--text);
}

.settings-push-device-actions {
	justify-content: flex-end;
}

.spotify-activity-card {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, #1db954 45%, var(--surface-border) 55%);
	background: linear-gradient(
		145deg,
		rgba(29, 185, 84, 0.14),
		rgba(18, 23, 33, 0.74)
	);
}

.spotify-activity-cover-wrap {
	width: 58px;
	height: 58px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.2);
}

.spotify-activity-cover-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.spotify-activity-cover-placeholder {
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: #1db954;
}

.spotify-activity-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.spotify-activity-copy strong,
.spotify-activity-copy span,
.spotify-activity-copy small {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.spotify-activity-copy strong {
	font-size: 0.88rem;
}

.spotify-activity-copy span {
	font-size: 0.8rem;
	color: var(--muted);
}

.spotify-activity-copy small {
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--muted) 78%, white 22%);
}

.spotify-activity-progress {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	overflow: hidden;
}

.spotify-activity-progress-bar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #1db954, #58d68d);
}

.spotify-activity-time {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.72rem;
	color: color-mix(in srgb, var(--muted) 78%, white 22%);
}

.spotify-activity-link {
	font-size: 0.74rem;
	color: #8ff1b8;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.spotify-activity-link:hover {
	text-decoration: underline;
}

.settings-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.settings-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.settings-field select {
	width: 100%;
}

.settings-field > span {
	font-size: 0.82rem;
	color: var(--muted);
}

.name-style-color-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.name-style-color-grid .settings-field input[type="color"] {
	width: 100%;
	height: 42px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: var(--input-bg);
	padding: 4px;
}

.name-style-palette-card {
	display: grid;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.04);
}

.name-style-palette-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.name-style-palette-head > span {
	font-size: 0.82rem;
	color: var(--muted);
}

.name-style-palette-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
}

.name-style-palette-item {
	gap: 8px;
}

.name-style-palette-input-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
}

.name-style-palette-input-row input[type="color"] {
	width: 100%;
	height: 42px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: var(--input-bg);
	padding: 4px;
}

.name-style-preview {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.03);
}

.name-style-preview > span {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}

.name-style-preview .styled-username {
	font-size: 1.14rem;
	font-weight: 400;
}

.settings-slider-label {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	font-size: 0.82rem;
	color: var(--muted);
}

.settings-slider-label strong {
	font-size: 0.86rem;
	color: var(--text);
}

.settings-slider-label input[type="range"] {
	grid-column: 1 / -1;
	padding: 0;
	height: 32px;
	background: transparent;
}

.theme-preset-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.theme-preset-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	min-height: 118px;
	transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.theme-preset-card:hover {
	transform: translateY(-1px);
}

.theme-preset-card.active {
	border-color: color-mix(in srgb, var(--accent) 62%, white 15%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent);
}

.theme-preset-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.92rem;
}

.theme-preset-title {
	font-weight: 650;
	font-size: 0.88rem;
}

.theme-preset-description {
	font-size: 0.76rem;
	color: var(--muted);
	line-height: 1.35;
}

.theme-card-bonfire {
	background: linear-gradient(145deg, rgba(86, 118, 255, 0.24), rgba(35, 45, 74, 0.42));
}

.theme-card-ember {
	background: linear-gradient(145deg, rgba(255, 121, 59, 0.24), rgba(62, 29, 18, 0.46));
}

.theme-card-forest {
	background: linear-gradient(145deg, rgba(59, 207, 158, 0.24), rgba(23, 55, 39, 0.46));
}

.theme-card-aurora {
	background: linear-gradient(145deg, rgba(120, 240, 255, 0.25), rgba(82, 108, 255, 0.26), rgba(37, 45, 84, 0.44));
}

.theme-card-midnight {
	background: linear-gradient(145deg, rgba(63, 123, 255, 0.22), rgba(13, 19, 41, 0.52));
}

.theme-card-custom {
	background: linear-gradient(145deg, rgba(208, 208, 255, 0.16), rgba(44, 44, 74, 0.5));
}

.custom-lab-card {
	gap: 12px;
}

.custom-lab-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.custom-lab-reset {
	padding: 5px 10px;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.custom-lab-preview {
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 120px;
	position: relative;
	overflow: hidden;
}

.custom-lab-preview::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 45%);
	pointer-events: none;
}

.custom-lab-preview-chip {
	width: fit-content;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(0, 0, 0, 0.2);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.custom-lab-preview strong {
	font-size: 1rem;
}

.custom-lab-preview-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.custom-lab-preview-meta span {
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(0, 0, 0, 0.18);
	font-size: 0.74rem;
}

.custom-lab-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.84rem;
	color: var(--text);
}

.custom-lab-toggle input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--accent);
}

.asterisk-auto-edit-toggle code {
	font-size: 0.78rem;
	padding: 1px 5px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.2);
}

.custom-lab-gradient-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.03);
	transition: opacity 0.15s ease;
}

.custom-lab-gradient-fields.disabled {
	opacity: 0.62;
}

.custom-lab-color-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.custom-lab-color-grid label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--muted);
}

.custom-lab-palette-grid {
	margin-top: 2px;
}

.upload-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.86rem;
	color: var(--muted);
	padding: 10px;
	border: 1px dashed color-mix(in srgb, var(--surface-border) 82%, var(--accent) 18%);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
}

.upload-label input[type="file"] {
	margin-top: 4px;
	color: var(--text);
	font-size: 0.82rem;
}

.upload-label input[type="file"]::file-selector-button {
	margin-right: 8px;
	padding: 6px 10px;
	border-radius: 9px;
	border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--surface-border));
	background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.06));
	color: var(--text);
	cursor: pointer;
}

.banner-mode-toggle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.banner-gradient-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--surface-border);
	background: rgba(255, 255, 255, 0.03);
}

.theme-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.theme-grid label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--muted);
}

.theme-grid input[type="color"] {
	padding: 0;
	height: 38px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: transparent;
}

.profile-modal {
	position: relative;
	width: min(440px, 96vw);
	max-width: min(440px, 96vw);
	padding: 0;
	overflow: hidden;
}

.profile-card-shell {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background: var(--panel);
}

.profile-banner {
	height: 118px;
	border-radius: 14px 14px 0 0;
	background-color: var(--panel-soft);
	background-size: 100% 100%, cover;
	background-position: center, center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.profile-relation-button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(11, 16, 24, 0.6);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 2;
}

.profile-relation-button.danger {
	border-color: rgba(213, 91, 115, 0.6);
	background: rgba(213, 91, 115, 0.2);
	color: #ffdce5;
}

.profile-relation-button.pending {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: var(--muted);
	cursor: not-allowed;
}

.profile-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 14px 16px 18px;
	margin-top: 0;
	text-align: left;
	background: var(--panel);
}

.profile-avatar {
	width: 98px;
	height: 98px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--panel);
	background: var(--panel-soft);
}

.profile-avatar-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-top: -49px;
}

.profile-status-indicator {
	position: absolute;
	right: 2px;
	bottom: 2px;
}

.profile-status-indicator .presence-indicator {
	position: static;
	right: auto;
	bottom: auto;
}

.profile-status-bubble {
	position: absolute;
	left: calc(100% - 8px);
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: min(280px, calc(100vw - 160px));
	padding: 8px 10px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: color-mix(in srgb, var(--panel-strong) 92%, black 8%);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	font-size: 0.78rem;
	color: var(--text);
}

.profile-status-bubble::before {
	content: "";
	position: absolute;
	left: -7px;
	bottom: 11px;
	width: 12px;
	height: 12px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	background: color-mix(in srgb, var(--panel-strong) 92%, black 8%);
	transform: rotate(45deg);
}

.profile-status-bubble i {
	flex-shrink: 0;
	font-size: 0.8rem;
	color: var(--muted);
}

.profile-status-bubble span {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-name-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
}

.profile-nickname-pen {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	flex-shrink: 0;
}

.profile-nickname-pen:hover {
	background: rgba(255, 255, 255, 0.11);
}

.profile-name {
	margin: 0;
	font-size: 1.2rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.profile-rank-badge {
	width: 18px;
	height: 18px;
}

.moderation-muted,
.moderation-suspended {
	outline: 4px solid rgba(227, 70, 70, 0.75);
	outline-offset: 6px;
}

.moderation-warning {
	margin: 8px 0 0;
	color: #ff8585;
	font-weight: 650;
}

.moderation-dashboard {
	display: grid;
	gap: 16px;
}

.moderation-hero-card {
	padding: 18px;
	display: grid;
	gap: 16px;
	grid-template-columns: 1.3fr 1fr;
}

.moderation-hero-graph {
	min-height: 180px;
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	align-items: end;
	gap: 6px;
}

.moderation-hero-graph span {
	display: block;
	border-radius: 8px 8px 2px 2px;
	background: linear-gradient(180deg, rgba(255, 108, 108, 0.95), rgba(255, 79, 79, 0.35));
}

.moderation-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.moderation-metric-card,
.moderation-list-card {
	padding: 14px;
}

.moderation-metric-card strong {
	display: block;
	font-size: 1.5rem;
	margin-top: 6px;
}

.moderation-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.moderation-list {
	display: grid;
	gap: 10px;
}

.moderation-user-row {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	text-align: left;
}

.moderation-user-row img {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
}

.moderation-user-copy {
	display: grid;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.moderation-modal textarea {
	width: 100%;
	min-height: 120px;
}

.moderation-modal select,
.moderation-modal input,
.appeal-modal textarea,
.moderation-list-card input[type="search"],
.moderation-list-card textarea {
	width: 100%;
}

.appeal-modal textarea,
.moderation-modal textarea,
.moderation-list-card textarea {
	resize: vertical;
	border-radius: 14px;
	padding: 12px 14px;
}

.appeal-row {
	align-items: stretch;
}

.appeal-row textarea {
	flex: 1;
	min-width: 0;
}

.profile-ember-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 175, 7, 0.45);
	background: linear-gradient(180deg, rgba(253, 251, 221, 0.12), rgba(227, 33, 0, 0.16));
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
}

.profile-ember-badge img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.profile-created-at {
	margin: 0;
	font-size: 0.78rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.profile-username-note {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
}

.profile-nickname-editor {
	width: 100%;
	display: grid;
	gap: 8px;
}

.profile-nickname-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.profile-nickname-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.profile-nickname-preview {
	font-size: 0.76rem;
	color: var(--muted);
}

.profile-nickname-form {
	width: 100%;
	display: grid;
	gap: 8px;
}

.profile-nickname-form label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.profile-nickname-actions {
	display: flex;
	gap: 8px;
}

.profile-nickname-popup-backdrop {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(6, 9, 16, 0.6);
	z-index: 3;
}

.profile-nickname-popup {
	width: min(340px, 100%);
	display: grid;
	gap: 10px;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--surface-border);
	background: var(--panel);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.profile-nickname-popup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.profile-nickname-popup-close {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.composer-upload-control {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 6;
}

.composer-upload-control .composer-upload-button,
.composer-upload-control.open .composer-upload-menu {
	pointer-events: auto;
}

.composer-upload-menu {
	position: absolute;
	left: -100px;
	bottom: calc(100% + 18px);
	width: min(320px, 78vw);
	display: grid;
	gap: 8px;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background:
		linear-gradient(180deg, rgba(28, 32, 45, 0.96), rgba(14, 18, 28, 0.94)),
		radial-gradient(circle at top left, rgba(116, 178, 255, 0.22), transparent 54%);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.96);
	pointer-events: none;
	transition:
		opacity 0.22s ease,
		transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 18;
}

.composer.expanded .composer-upload-menu {
	left: 0;
}

.composer-upload-menu.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.composer-upload-menu-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	text-align: left;
}

.composer-upload-menu-item strong {
	font-size: 0.9rem;
}

.composer-upload-menu-item span {
	font-size: 0.78rem;
	color: var(--muted);
	line-height: 1.45;
}

.composer-upload-menu-item.stream {
	background: transparent;
	border-color: rgba(120, 186, 255, 0.26);
}

.composer-upload-menu-item:disabled {
	opacity: 0.46;
}

.decorations-view {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	padding: 16px;
	gap: 12px;
}

.decorations-view.embers-view {
	display: block;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
}

.decorations-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.decorations-current-pill {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.8rem;
	color: var(--muted);
	white-space: nowrap;
}

.decorations-current-pill.active {
	border-color: rgba(124, 168, 255, 0.62);
	background: rgba(90, 115, 255, 0.16);
	color: var(--text);
}

.decorations-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.decorations-search {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
		radial-gradient(circle at left center, rgba(95, 139, 255, 0.12), transparent 52%);
}

.decorations-search i {
	font-size: 0.86rem;
	color: var(--muted);
}

.decorations-search input {
	flex: 1 1 auto;
	background: transparent;
	border: none;
	color: var(--text);
	padding: 12px 0;
	min-width: 0;
}

.decorations-search input:focus {
	outline: none;
}

.decorations-search:focus-within {
	border-color: rgba(93, 177, 255, 0.55);
	/* Avoid applying an outer or inset box-shadow so the inner input isn't visually highlighted
	   — keep focus styling subtle and limited to the container border only. */
	box-shadow: none;
}

/* Unread banner in chat view */
.unread-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	margin: 0;
	border-radius: 10px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.04);
	position: absolute;
	top: 8px;
	left: 12px;
	right: 12px;
	z-index: 2;
}
.unread-banner-left {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--text);
}
.unread-banner-left strong {
	font-weight: 700;
}
.unread-banner-actions button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.decorations-toolbar-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: right;
}

.decorations-toolbar-copy strong {
	font-size: 0.84rem;
}

.decorations-toolbar-copy span {
	max-width: 340px;
	font-size: 0.78rem;
	color: var(--muted);
}

.decorations-results {
	min-height: 0;
	overflow-y: auto;
	padding-right: 4px;
}

.decorations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	align-content: start;
}

.decoration-card {
	display: grid;
	gap: 12px;
	padding: 15px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
		radial-gradient(circle at top right, rgba(119, 167, 255, 0.12), transparent 56%);
	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.decoration-card:hover {
	transform: translateY(-2px);
	border-color: rgba(138, 173, 255, 0.34);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.decoration-card.active {
	border-color: rgba(124, 168, 255, 0.72);
	box-shadow: 0 0 0 1px rgba(124, 168, 255, 0.3);
}

.decoration-preview-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 102px;
	padding: 14px 10px;
	border-radius: 14px;
	position: relative;
	background:
		radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 58%),
		linear-gradient(180deg, rgba(8, 12, 20, 0.8), rgba(19, 26, 40, 0.72));
}

.decoration-preview-avatar {
	border-radius: 50%;
}

.decoration-cycle-button {
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(6, 10, 18, 0.7);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transform: translateY(-50%);
	z-index: 3;
}

.decoration-cycle-button.left {
	left: 10px;
}

.decoration-cycle-button.right {
	right: 10px;
}

.decoration-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.decoration-title-stack {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.decoration-card-head strong {
	font-size: 0.92rem;
	line-height: 1.2;
}

.decoration-title-stack span {
	font-size: 0.74rem;
	color: var(--muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.decoration-color-row {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 0;
}

.decoration-color-swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(14, 18, 28, 0.92);
	margin-left: -4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.decoration-color-swatch:first-child {
	margin-left: 0;
}

.decoration-color-swatch.selected {
	transform: translateY(-1px) scale(1.12);
	border-color: rgba(255, 255, 255, 0.96);
	box-shadow:
		0 0 0 1px rgba(88, 122, 255, 0.5),
		0 4px 12px rgba(0, 0, 0, 0.28);
}

.decorations-empty {
	grid-column: 1 / -1;
	display: grid;
	gap: 4px;
	padding: 20px;
	border-radius: 16px;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.03);
	text-align: center;
}

.decorations-empty strong {
	font-size: 0.92rem;
}

.decorations-empty span {
	font-size: 0.8rem;
	color: var(--muted);
}

.decoration-color-swatch.neutral {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(155, 169, 189, 0.9));
}

.profile-mutual-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	min-height: 34px;
}

.profile-mutual-avatars {
	display: flex;
	align-items: center;
	min-height: 30px;
}

.profile-mutual-avatars img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--panel);
	object-fit: cover;
	margin-left: -8px;
	background: var(--panel-soft);
}

.profile-mutual-avatars img:first-child {
	margin-left: 0;
}

.profile-mutual-empty {
	font-size: 0.76rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.profile-mutual-count {
	min-width: 28px;
	padding: 4px 8px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text);
}

.profile-description {
	margin: 0;
	color: var(--muted);
	line-height: 1.36;
	width: 100%;
}

.profile-server-roles-card {
	width: 100%;
	display: grid;
	gap: 10px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
}

.profile-server-roles-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.profile-server-roles-head > div {
	display: grid;
	gap: 4px;
}

.profile-server-roles-head strong {
	font-size: 0.9rem;
}

.profile-server-roles-head span {
	font-size: 0.76rem;
	color: var(--muted);
}

.profile-server-role-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.profile-role-add-button {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.profile-role-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.profile-activity-card {
	width: 100%;
	margin-top: 2px;
}

.profile-dm-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	padding: 12px 14px 14px;
}

.profile-dm-form input {
	min-width: 0;
}

.profile-dm-form .primary-button {
	min-width: 42px;
	padding: 0 12px;
}

.server-members-modal {
	width: min(560px, 96vw);
	max-height: 80vh;
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	gap: 12px;
}

.server-members-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.server-members-modal-head h2 {
	margin: 0;
}

.server-members-modal-list {
	min-height: 0;
	overflow-y: auto;
	display: grid;
	gap: 8px;
	padding-right: 4px;
}

.server-members-modal-row {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	text-align: left;
}

.server-members-modal-row:hover {
	border-color: rgba(132, 157, 255, 0.28);
	background: rgba(84, 121, 255, 0.1);
}

.server-members-modal-copy {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.server-members-modal-copy strong,
.server-members-modal-copy span {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.server-members-modal-copy span {
	font-size: 0.76rem;
	color: var(--muted);
}

@keyframes driftBlob {
	0% { transform: translate3d(-4%, -2%, 0) scale(1); }
	50% { transform: translate3d(5%, 4%, 0) scale(1.06); }
	100% { transform: translate3d(-4%, -2%, 0) scale(1); }
}

@keyframes emberSparks {
	0% { transform: translate3d(0, 0, 0); opacity: 0.15; }
	50% { transform: translate3d(0, -8%, 0); opacity: 0.42; }
	100% { transform: translate3d(0, -14%, 0); opacity: 0.08; }
}

@keyframes forestMist {
	0% { transform: translate3d(-2%, 0, 0); }
	50% { transform: translate3d(2%, -1%, 0); }
	100% { transform: translate3d(-2%, 0, 0); }
}

@keyframes auroraWave {
	0% { transform: translate3d(-2%, 0, 0) rotate(0deg); filter: hue-rotate(0deg); }
	50% { transform: translate3d(2%, 1%, 0) rotate(1deg); filter: hue-rotate(18deg); }
	100% { transform: translate3d(-2%, 0, 0) rotate(0deg); filter: hue-rotate(0deg); }
}

@keyframes gridDrift {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(30px, 16px, 0); }
}

:root[data-motion="calm"] {
	--glass-blur: 10px;
}

:root[data-motion="standard"] {
	--glass-blur: 12px;
}

:root[data-motion="lively"] {
	--glass-blur: 14px;
}

:root[data-theme="bonfire"] {
	--input-bg: rgba(255, 255, 255, 0.1);
	--button-bg: rgba(255, 255, 255, 0.09);
	--main-background: linear-gradient(180deg, rgba(16, 24, 40, 0.62), rgba(10, 15, 30, 0.72));
	--sidebar-background: rgba(12, 20, 35, 0.54);
	--chat-item-background: rgba(17, 26, 43, 0.56);
	--me-card-background: rgba(16, 24, 40, 0.62);
	--modal-background: linear-gradient(180deg, rgba(16, 24, 42, 0.7), rgba(10, 16, 30, 0.72));
	--composer-background: linear-gradient(180deg, rgba(16, 24, 40, 0.62), rgba(14, 22, 36, 0.74));
}

:root[data-theme="bonfire"] body::before {
	opacity: 1;
	background:
		radial-gradient(circle at 18% 18%, rgba(110, 133, 255, 0.45), transparent 40%),
		radial-gradient(circle at 82% 85%, rgba(87, 210, 255, 0.28), transparent 35%);
	animation: driftBlob 28s ease-in-out infinite;
}

:root[data-theme="bonfire"] .sidebar,
:root[data-theme="bonfire"] .main-area,
:root[data-theme="bonfire"] .modal,
:root[data-theme="bonfire"] .composer {
	backdrop-filter: blur(var(--glass-blur));
}

:root[data-theme="ember"] {
	--main-background: linear-gradient(180deg, rgba(40, 18, 11, 0.9), rgba(20, 9, 7, 0.94));
	--sidebar-background: rgba(45, 20, 12, 0.88);
	--chat-item-background: rgba(56, 24, 14, 0.74);
	--me-card-background: rgba(46, 20, 12, 0.82);
	--modal-background: linear-gradient(180deg, rgba(52, 22, 13, 0.92), rgba(26, 12, 9, 0.94));
	--composer-background: linear-gradient(180deg, rgba(43, 19, 12, 0.9), rgba(31, 13, 9, 0.94));
	--input-bg: rgba(255, 176, 130, 0.09);
	--button-bg: rgba(255, 156, 99, 0.12);
	--button-border: rgba(255, 169, 110, 0.3);
}

:root[data-theme="ember"] body {
	background:
		radial-gradient(circle at 15% 88%, rgba(255, 108, 52, 0.35), transparent 34%),
		radial-gradient(circle at 84% 10%, rgba(255, 176, 128, 0.2), transparent 28%),
		var(--bg);
}

:root[data-theme="ember"] body::after {
	opacity: 1;
	background:
		radial-gradient(circle, rgba(255, 179, 118, 0.95) 0 1.2px, transparent 1.3px) 0 0/30px 30px,
		radial-gradient(circle, rgba(255, 113, 62, 0.8) 0 1.3px, transparent 1.4px) 16px 10px/36px 36px;
	animation: emberSparks 22s linear infinite;
}

:root[data-theme="forest"] {
	--main-background: linear-gradient(180deg, rgba(15, 39, 27, 0.88), rgba(8, 24, 17, 0.95));
	--sidebar-background: rgba(15, 42, 29, 0.85);
	--chat-item-background: rgba(17, 49, 33, 0.74);
	--me-card-background: rgba(12, 34, 25, 0.82);
	--modal-background: linear-gradient(180deg, rgba(20, 49, 35, 0.9), rgba(10, 27, 20, 0.95));
	--composer-background: linear-gradient(180deg, rgba(14, 35, 24, 0.9), rgba(9, 24, 18, 0.95));
	--input-bg: rgba(119, 204, 159, 0.09);
	--button-bg: rgba(103, 197, 146, 0.12);
}

:root[data-theme="forest"] body {
	background:
		radial-gradient(circle at 15% 15%, rgba(78, 183, 137, 0.32), transparent 36%),
		radial-gradient(circle at 85% 80%, rgba(67, 135, 99, 0.25), transparent 33%),
		linear-gradient(150deg, #07150f, #0b1e16 34%, #0f2a1e 62%, #06120d);
}

:root[data-theme="forest"] body::before {
	opacity: 1;
	background: linear-gradient(
		120deg,
		rgba(113, 214, 172, 0.12),
		rgba(40, 102, 75, 0.22),
		rgba(22, 56, 40, 0.14)
	);
	filter: blur(6px);
	animation: forestMist 36s ease-in-out infinite;
}

:root[data-theme="aurora"] {
	--main-background: linear-gradient(180deg, rgba(24, 30, 70, 0.84), rgba(20, 22, 52, 0.9));
	--sidebar-background: rgba(29, 36, 82, 0.82);
	--chat-item-background: rgba(32, 39, 91, 0.72);
	--me-card-background: rgba(26, 32, 74, 0.8);
	--modal-background: linear-gradient(180deg, rgba(31, 38, 93, 0.88), rgba(22, 27, 65, 0.92));
	--composer-background: linear-gradient(180deg, rgba(24, 31, 72, 0.86), rgba(19, 26, 58, 0.92));
	--input-bg: rgba(124, 197, 255, 0.11);
	--button-bg: rgba(124, 197, 255, 0.14);
	--button-border: rgba(142, 207, 255, 0.36);
	--glass-blur: 18px;
}

:root[data-theme="aurora"] body {
	background:
		radial-gradient(circle at 15% 20%, rgba(106, 229, 255, 0.35), transparent 34%),
		radial-gradient(circle at 75% 12%, rgba(135, 105, 255, 0.28), transparent 30%),
		radial-gradient(circle at 86% 85%, rgba(84, 255, 205, 0.24), transparent 33%),
		var(--bg);
}

:root[data-theme="aurora"] body::before {
	opacity: 1;
	background:
		conic-gradient(from 35deg at 25% 35%, rgba(117, 245, 255, 0.25), rgba(130, 126, 255, 0.18), rgba(110, 255, 211, 0.2), rgba(117, 245, 255, 0.25));
	animation: auroraWave 28s ease-in-out infinite;
	filter: blur(12px);
}

:root[data-theme="midnight"] {
	--main-background: linear-gradient(180deg, rgba(7, 13, 29, 0.92), rgba(4, 9, 22, 0.96));
	--sidebar-background: rgba(8, 13, 28, 0.94);
	--chat-item-background: rgba(12, 19, 39, 0.8);
	--me-card-background: rgba(9, 15, 32, 0.86);
	--modal-background: linear-gradient(180deg, rgba(10, 17, 35, 0.95), rgba(6, 11, 26, 0.96));
	--composer-background: linear-gradient(180deg, rgba(10, 17, 35, 0.92), rgba(6, 10, 24, 0.96));
	--input-bg: rgba(76, 132, 255, 0.1);
	--button-bg: rgba(76, 132, 255, 0.12);
	--button-border: rgba(102, 150, 255, 0.34);
}

:root[data-theme="midnight"] body {
	background:
		radial-gradient(circle at 20% 14%, rgba(77, 144, 255, 0.22), transparent 26%),
		linear-gradient(180deg, #040812, #040810 52%, #03050c);
}

:root[data-theme="midnight"] body::after {
	opacity: 1;
	background:
		linear-gradient(rgba(68, 122, 255, 0.08) 1px, transparent 1px) 0 0/34px 34px,
		linear-gradient(90deg, rgba(68, 122, 255, 0.08) 1px, transparent 1px) 0 0/34px 34px;
	animation: gridDrift 32s linear infinite;
}

:root[data-theme="custom"] {
	--glass-blur: var(--custom-lab-blur);
	--main-background: var(--custom-lab-main-background);
	--sidebar-background: var(--custom-lab-sidebar-background);
	--chat-item-background: var(--custom-lab-chat-item-background);
	--me-card-background: var(--custom-lab-me-card-background);
	--modal-background: var(--custom-lab-modal-background);
	--composer-background: var(--custom-lab-composer-background);
	--input-bg: var(--custom-lab-input-background);
	--button-bg: var(--custom-lab-button-background);
	--button-border: var(--custom-lab-button-border);
	--surface-soft: var(--custom-lab-surface-soft);
	--surface-border: var(--custom-lab-surface-border);
}

:root[data-theme="custom"] body::before {
	opacity: 1;
	background: var(--custom-lab-gradient-overlay);
	filter: blur(var(--custom-lab-blur));
	animation: driftBlob 30s ease-in-out infinite;
}

:root[data-motion="calm"] body::before,
:root[data-motion="calm"] body::after {
	animation-duration: 46s !important;
	opacity: 0.5 !important;
}

:root[data-motion="lively"] body::before,
:root[data-motion="lively"] body::after {
	animation-duration: 16s !important;
	opacity: 0.95 !important;
}

@media (max-width: 1040px) {
	.friends-sections {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.app-shell {
		--mobile-server-rail-width: 72px;
		--mobile-sidebar-stagger: 120ms;
		display: block;
		position: relative;
		height: 100dvh;
	}

	.server-rail {
		position: fixed;
		inset: 0 auto 0 0;
		width: var(--mobile-server-rail-width);
		padding-top: calc(12px + env(safe-area-inset-top, 0px));
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 90;
		transform: translateX(calc(-100% - 18px));
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) var(--mobile-sidebar-stagger),
			opacity 0.2s ease var(--mobile-sidebar-stagger),
			visibility 0s linear calc(0.32s + var(--mobile-sidebar-stagger));
	}

	.app-shell.mobile-sidebar-open .server-rail {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: var(--mobile-sidebar-stagger), var(--mobile-sidebar-stagger), 0s;
	}

	.sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(calc(100vw - var(--mobile-server-rail-width)), 340px);
		border-right: 1px solid var(--line);
		border-bottom: none;
		z-index: 80;
		transform: translateX(calc(-100% - var(--mobile-server-rail-width) - 28px));
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
		box-shadow: 0 24px 46px rgba(0, 0, 0, 0.42);
	}

	.app-shell.mobile-sidebar-open .sidebar {
		transform: translateX(var(--mobile-server-rail-width));
	}

	.main-area {
		height: 100dvh;
		margin-left: 0;
	}

	.mobile-sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.42);
		border: none;
		opacity: 0;
		pointer-events: none;
		z-index: 70;
		transition: opacity 0.2s ease;
	}

	.app-shell.mobile-sidebar-open .mobile-sidebar-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.mobile-sidebar-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.22);
		background: rgba(255, 255, 255, 0.08);
		color: var(--text);
		font-size: 0.86rem;
	}

	.mobile-sidebar-toggle {
		display: inline-flex;
		position: fixed;
		left: 12px;
		top: calc(8px + env(safe-area-inset-top, 0px));
		z-index: 85;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: none;
		border-radius: 0;
		background: transparent;
		color: var(--text);
		box-shadow: none;
	}

	.chat-view .chat-header > div,
	.friends-view .section-header,
	.decorations-view .section-header,
	.admin-view .section-header {
		padding-left: 42px;
	}

	.chat-header {
		flex-direction: column;
	}

	.chat-header-actions {
		width: 100%;
	}

	.chat-call-panel {
		margin: 8px 8px 10px;
	}

	.chat-activity-panel {
		inset: 0 0 100px 0;
	}

	.chat-activity-frame-shell {
		height: 100%;
		min-height: 0;
	}

	.group-members-panel {
		margin: 8px 8px 10px;
	}

	.server-voice-stage {
		margin: 8px 8px 10px;
		flex-direction: column;
		align-items: stretch;
	}

	.group-members-actions {
		width: 100%;
		justify-content: flex-end;
	}

	.group-members-add-form {
		grid-template-columns: 1fr;
	}

	.embers-layout {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.embers-art-wrap {
		justify-content: flex-start;
	}

	.embers-art-image {
		width: min(100%, 700px);
	}

	.embers-copy-wrap {
		align-items: flex-start;
	}

	.group-invite-link-row {
		grid-template-columns: 1fr;
	}

	.group-member-row {
		grid-template-columns: 1fr;
	}

	.group-member-remove-button {
		justify-self: end;
	}

	.chat-call-participant-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.chat-call-participant {
		height: 186px;
		min-height: 186px;
	}

	.server-manager-layout,
	.server-manager-split,
	.server-overview-grid,
	.server-overview-stat-grid,
	.server-role-header-fields,
	.server-permission-toolbar,
	.server-permission-row,
	.server-invite-link-row {
		grid-template-columns: 1fr;
	}

	.server-manager-layout {
		height: auto;
		min-height: 0;
	}

	.server-role-permissions {
		grid-template-columns: 1fr;
	}

	.server-member-head,
	.server-ban-card {
		flex-direction: column;
		align-items: stretch;
	}

	.server-member-actions {
		justify-content: flex-start;
	}

	.server-overview-hero,
	.server-danger-row {
		grid-template-columns: 1fr;
		flex-direction: column;
		align-items: stretch;
	}

	.server-overview-preview-icon {
		width: 72px;
		height: 72px;
		border-radius: 22px;
	}

	.server-members-modal {
		width: min(96vw, 560px);
	}

	.profile-server-roles-head {
		flex-direction: column;
		align-items: stretch;
	}

	.chat-call-participant-row.has-expanded {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.chat-call-participant-row.has-expanded .chat-call-participant.expanded {
		height: 230px;
		min-height: 230px;
	}

	.chat-call-controls {
		gap: 6px;
	}

	.app-shell.mobile-sidebar-open .mobile-sidebar-toggle {
		opacity: 0;
		pointer-events: none;
	}

	.composer-emoji-picker {
		left: 8px;
		bottom: calc(100% + 6px);
	}

	.typing-indicator-bar {
		margin: 0;
		padding-top: 24px;
		padding-left: max(12px, calc(env(safe-area-inset-left, 0px) + 4px));
		padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 4px));
		border: none;
		border-radius: 0;
	}

	.message-meta {
		gap: 6px;
	}

	.message-content {
		margin-top: 0;
	}

	.mention-suggestions {
		left: 8px;
		right: 8px;
		bottom: calc(100% + 6px);
	}

	.message-reaction-picker {
		right: 0;
	}

	.profile-avatar {
		width: 84px;
		height: 84px;
	}

	.profile-content {
		margin-top: -38px;
		padding: 0 12px;
	}

	.profile-dm-form {
		padding: 10px 12px 12px;
	}

	.settings-layout {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.settings-modal {
		width: min(900px, calc(100vw - 24px));
		height: calc(100dvh - 24px);
		max-height: calc(100dvh - 24px);
		align-self: stretch;
		padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
		border-radius: 18px;
	}

	.settings-panel {
		overflow-y: visible;
		max-height: none;
	}

	.settings-nav {
		flex-direction: column;
		flex-wrap: nowrap;
		max-width: 100%;
		padding: 0;
		border: none;
		border-radius: 0;
		background: transparent;
	}

	.settings-nav-button {
		width: 100%;
		min-width: 0;
	}

	.settings-nav-copy small {
		white-space: normal;
	}

	.decorations-header {
		flex-direction: column;
	}

	.decorations-toolbar {
		grid-template-columns: 1fr;
	}

	.decorations-current-pill {
		justify-self: start;
	}

	.decorations-toolbar-copy {
		align-items: flex-start;
		text-align: left;
	}

	.composer {
		margin: 0 8px 8px;
		padding-left: max(12px, calc(env(safe-area-inset-left, 0px) + 4px));
		padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 4px));
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		border: none;
		border-radius: 0;
		background: transparent !important;
		backdrop-filter: none !important;
	}

	.composer-input-shell {
		margin-left: 104px;
		margin-right: 104px;
	}

	.composer-gif-results {
		grid-auto-columns: minmax(128px, 144px);
	}

	.settings-field-grid,
	.theme-preset-grid,
	.name-style-color-grid,
	.name-style-palette-grid,
	.custom-lab-color-grid,
	.theme-grid {
		grid-template-columns: 1fr;
	}

	.emoji-custom-creator-grid,
	.emoji-custom-creator-row {
		grid-template-columns: 1fr;
	}

	.emoji-custom-creator-actions {
		width: 100%;
	}

	.emoji-custom-creator-actions .primary-button {
		width: 100%;
	}

	.upload-preview-wrap {
		flex-wrap: wrap;
	}

	.admin-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.admin-controls {
		grid-template-columns: 1fr;
	}

	.admin-user-row {
		flex-direction: column;
	}

	.admin-user-actions {
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	.tripwire-row {
		flex-direction: column;
	}

	.tripwire-actions {
		justify-content: flex-end;
	}

	.invite-chat-summary {
		grid-template-columns: 1fr;
	}

	.inline-invite-hero {
		grid-template-columns: 1fr;
	}

	.inline-invite-fan {
		margin: 0 auto;
	}

	.invite-chat-banner {
		height: 94px;
	}

	.image-viewer-shell {
		width: 98vw;
		height: min(92dvh, 92vh);
		padding: 8px;
	}

	.image-viewer-toolbar {
		flex-wrap: wrap;
		gap: 6px;
		padding-right: 40px;
	}

	.image-viewer-lens {
		display: none;
	}
}

.temporary-down-page {
	position: fixed;
	inset: 0;
	z-index: 240;
	background: #000;
	display: grid;
	place-content: center;
	gap: 18px;
	padding: 24px;
	text-align: center;
}

.temporary-down-page-logo {
	width: min(52vw, 260px);
	max-width: 78vw;
	height: auto;
	justify-self: center;
	animation: loading-logo-breathe 1.65s ease-in-out infinite;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}

.temporary-down-page-copy {
	margin: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.6rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.92);
}