/* css/tokens.css */
:root {
	--main-width: 640px;

	--font-size-logo: 2.0em;
	--font-size-huge: 1.3em;
	--font-size-large: 1.15em;
	--font-size-default: 14px;
	--font-size-small: 0.9em;
	--font-size-smaller: 0.8em;
	--font-size-tiny: 0.7em;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
	--font-weight-avatar: 600;

	--line-height-default: 1.4em;

	--avatar-bg-color-0: hsl(0, 17%, 53%);
	--avatar-bg-color-1: hsl(36, 17%, 53%);
	--avatar-bg-color-2: hsl(72, 17%, 53%);
	--avatar-bg-color-3: hsl(108, 17%, 53%);
	--avatar-bg-color-4: hsl(144, 17%, 53%);
	--avatar-bg-color-5: hsl(180, 17%, 53%);
	--avatar-bg-color-6: hsl(216, 17%, 53%);
	--avatar-bg-color-7: hsl(252, 17%, 53%);
	--avatar-bg-color-8: hsl(288, 17%, 53%);
	--avatar-bg-color-9: hsl(324, 17%, 53%);
	--avatar-color: #fafafa;
	--avatar-font-size: 0.5;
	--avatar-max-width: 0.75;

	--profile-cover-background: radial-gradient(circle, hsl(210 20% 35% / 1) 20%, hsl(210 20% 30% / 1) 60%, hsl(210 20% 25% / 1) 100%);

	--mobile-display-block: none;
	--mobile-display-flex: none;

	--badge-background-red: #b3261e;

	/* Предел высоты превью записи в ленте */
	--post-preview-max-height: 500px;
}

body {
	background-color: var(--background-body);
	color: var(--color-text-default);
	-webkit-tap-highlight-color: transparent;
	word-break: break-word;
	overflow-x: hidden;
	margin: 0;
}

body, input, select, textarea, button {
	font-family: Inter, "Segoe UI", sans-serif;
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-regular);
}


/* css/theme.css */
body.light {
	--background-body: hsl(215, 25%, 95%);
	--background-card: hsl(0, 0%, 100%);
	--border-card: hsl(0, 0%, 92%);

	--color-brand: rgba(0, 0, 0, 0.8);
	--background-nav-hover: rgb(255 255 255 / 60%);
	--background-nav-active: rgb(255 255 255 / 90%);
	--background-nav-mobile: #f3f2f8;

	--color-text-important: rgb(29, 29, 31);
	--color-text-default: hsl(0, 0%, 20%);
	--color-text-secondary: hsl(0, 0%, 45%);
	--color-text-sidebar: hsl(0, 0%, 30%);
	
	--color-icon-important: hsl(0, 0%, 15%);
	--color-icon-default: hsl(0, 0%, 35%);
	--color-icon-secondary: hsl(0, 0%, 55%);
	--color-icon-tertiary: hsl(0, 0%, 75%);
	--color-icon-mute: hsl(0, 0%, 90%);

	--color-icon-userbar: hsl(0, 0%, 50%);
	--color-icon-userbar-hover: hsl(0, 0%, 35%);
	--color-icon-nav: var(--color-icon-userbar);

	--color-blue: hsl(211, 100%, 44%);
	--color-green: hsl(139, 47%, 44%);
	--color-orange: hsl(30, 83%, 59%);
	--color-red: hsl(359, 83%, 59%);

	--button-blue: hsl(209, 90%, 50%);
	--button-blue-hover: hsl(209, 90%, 48%);
	--button-blue-border: var(--button-blue);
	--button-blue-disabled: hsl(209, 60%, 40%);

	--button-colored-text-color: hsl(0, 0%, 100%);
	--button-colored-disabled-text-color: hsl(0, 0%, 75%);

	--button-secondary-blue: rgb(232, 242, 250);

	--background-default: rgba(0, 0, 0, 0.05);
	--background-blue: hsla(209, 100%, 50%, 0.1);
	--background-blue-hover: hsla(209, 100%, 50%, 0.18);
	--border-blue: hsla(209, 100%, 50%, 0.12);

	--color-post-check: hsl(204, 82%, 49%);
	--color-post-inner-bg: #f2f8fc;
	--color-quote-border: hsl(0, 0%, 90%);

	--input-background: var(--background-card);
	--input-background-focus: hsl(0, 0%, 100%);
	--input-border: hsl(0, 0%, 90%);
	--input-border-focus: rgba(0, 133, 255);

	--discussion-highlighted: hsl(56, 89%, 93%);
	--discussion-item-hover-background: inherit;
	--collapse-hover-background: rgb(0 0 0 / .0275);
	--collapse-border-color: rgba(0, 0, 0, 0.075);

	--context-background: rgb(255 255 255 / 85%);
	--context-item-hover: rgb(0 0 0 / 5%);
	--context-shadow-color: rgb(114 114 114 / 25%); 
	--context-divider-color: rgb(0 0 0 / 10%);
	--context-text-color: var(--color-text-important);

	--poll-option-border-color: rgb(0 0 0 / 10%);
	--poll-option-hover-border-color: rgb(0 0 0 / 30%);
	--poll-option-selected-border-color: hsla(209, 100%, 50%, 0.3);
	--poll-fill-color: hsla(209, 100%, 50%, 0.1);

	--post-alert-background: #e6effd;
	--servers-hover-background: hsl(0, 0%, 98%);
	--servers-inner-background: hsl(0, 0%, 97%);
	--servers-table-border: hsl(0, 0%, 95%);
	--settings-section-border: hsl(0, 0%, 90%);
	--mention-background: rgb(229, 243, 255);
	--warning-background: #fac746;
	--warning-color: #704926;
}

body.dark {
	--background-body: rgb(18, 18, 18);
	--background-card: rgb(28, 28, 30);
	--border-card: rgb(36, 36, 38);

	--color-brand: hsl(0, 0%, 90%);
	--background-nav-hover: rgb(255 255 255 / 5%);
	--background-nav-active: rgb(255 255 255 / 8%);
	--background-nav-mobile: #1c1c1e;

	--color-text-important: hsl(209, 5%, 95%);
	--color-text-default: hsl(209, 5%, 85%);
	--color-text-secondary: hsl(209, 5%, 65%);
	--color-text-sidebar: hsl(209, 5%, 80%);

	--color-icon-important: hsl(0, 0%, 95%);
	--color-icon-default: hsl(0, 0%, 80%);
	--color-icon-secondary: hsl(0, 0%, 60%);
	--color-icon-tertiary: hsl(0, 0%, 40%);
	--color-icon-mute: hsl(0, 0%, 21%);

	--color-icon-userbar: hsl(0, 0%, 60%);
	--color-icon-userbar-hover: hsl(0, 0%, 80%);
	--color-icon-nav: var(--color-icon-userbar);

	--color-blue: #71aaeb;
	--color-green: #78b757;
	--color-orange: #e7893a;
	--color-violet: #9a54a3;
	--color-red: #ec5e5d;

	--button-blue: hsl(209, 90%, 44%);
	--button-blue-hover: hsl(209, 100%, 46%);
	--button-blue-border: hsl(209, 100%, 30%);
	--button-blue-disabled: hsl(209, 90%, 22%);

	--button-colored-text-color: hsl(0, 0%, 90%);
	--button-colored-disabled-text-color: hsl(0, 0%, 45%);

	--background-default: rgb(255 255 255 / 5%);
	--background-blue: rgb(109 165 243 / 12%);
	--background-blue-hover: rgb(109 165 243 / 22%);
	--border-blue: rgb(109 165 243 / 30%);

	--color-post-check: hsl(277, 35%, 52%);
	--color-post-inner-bg: rgb(255 255 255 / 5%);
	--color-quote-border: hsl(0, 0%, 26%);

	--input-background: rgb(36, 36, 38);
	--input-background-focus: rgb(44, 44, 46);
	--input-border: rgb(44, 44, 46);
	--input-border-focus: rgb(52, 52, 50);

	--discussion-highlighted: rgb(247 200 69 / 25%);
	--discussion-item-hover-background: inherit;
	--collapse-hover-background: rgb(255 255 255 / .0275);
	--collapse-border-color: rgba(255, 255, 255, 0.075);

	--context-background: rgba(43, 43, 43, 0.74);
	--context-item-hover: rgb(255 255 255 / 10%);
	--context-shadow-color: rgb(0 0 0 / 25%);
	--context-divider-color: rgb(255 255 255 / 10%);
	--context-text-color: var(--color-text-important);
	
	--poll-option-border-color: rgb(255 255 255 / 10%);
	--poll-option-hover-border-color: rgb(255 255 255 / 30%);
	--poll-option-selected-border-color: hsla(219, 100%, 65%, 0.5);
	--poll-fill-color: hsla(219, 100%, 65%, 0.15);

	--post-alert-background: hsla(219, 100%, 65%, 0.20);
	--servers-hover-background: hsl(0, 0%, 13%);
	--servers-inner-background: hsl(240, 2%, 13%);
	--servers-table-border: hsl(0, 0%, 20%);
	--settings-section-border: var(--border-card);
	--mention-background: hsl(212, 40%, 25%);
	--warning-background: #fac746;
	--warning-color: #704926;
}

::selection {
	background-color: hsl(215, 89%, 86%);
	color: hsl(0, 0%, 25%);
}


/* css/base.css */
*, *::before, *::after {
	box-sizing: border-box;
}

a, a:hover, a:focus, a:visited {
	text-decoration: none;
	color: var(--color-blue);
	cursor: pointer;
}

p {
	line-height: var(--line-height-default);
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

h2 {
	color: var(--color-text-important);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-huge);
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

h3 {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-large);
	margin-block-start: 1.5em;
	margin-block-end: 0.5em;
}

h4 {
	font-weight: var(--font-weight-bold);
	margin-block-start: 1.25em;
	margin-block-end: 0.5em;
}

b, strong {
	font-weight: var(--font-weight-bold);
}

mark {
	padding: 0 4px;
	background-color: #fdeccc;
	color: var(--color-text-default);
}

.dark mark {
	background-color: #624000;
}

hr {
	border: 0;
	border-top: 2px dashed rgb(0 0 0 / 20%);
	margin: 20px 20px;
}

ul {
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 2em;
}

img, video {
	user-select: none;
}

img[loading="lazy"] {
	transition: opacity 150ms ease;
	opacity: 0;
}

img[loading="lazy"].loaded {
	opacity: 1;
}

img.emoji {
	vertical-align: middle;
	max-width: none;
	width: 1em;
	height: 1em;
	scale: 1.35;
	transform: translateY(-0.075em);
	margin: 0 0.25em;
	user-select: text;
}

textarea, input {
	margin: 0;
	outline: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	appearance: none;
	resize: none;
}

textarea::placeholder, input::placeholder {
	color: var(--color-text-secondary);
}

code, kbd {
	font-family: "Source Code Pro", monospace;
	font-style: normal;
	font-weight: 400;
}

code {
	padding: 0 4px;
	border-radius: 4px;
	background: rgb(242, 242, 247);
	color: var(--color-text-secondary);
}

.dark code {
	background: rgb(58, 58, 60);
}

kbd {
	color: var(--color-text-important);
	background-color: #eef3f6;
	border: 1px solid #dce1e7;
	border-radius: 4px;
	padding: 0 4px;
}

.dark kbd {
	background: rgb(58, 58, 60);
	border: 1px solid rgb(72, 72, 74);
}

blockquote {
	quotes: none;
	position: relative;
	padding: 8px 0 8px 8px;
	margin: 0 0 2px 0;
	color: var(--color-text-secondary);
}

blockquote::before {
	content: "";
	flex-shrink: 0;
	background-color: var(--color-quote-border);
	border-radius: 4px 0 0 4px;
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 4px;
}

svg {
	height: 1em;
	color: var(--color-icon-default);
}

svg.secondary {
	color: var(--color-icon-secondary);
}


/* css/layout.css */
/* Layout */
.layout {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.main {
	width: var(--main-width);
	max-width: var(--main-width);
	overflow: hidden;
}

.content {
	width: 100%;
}

.content > .feed,
.content > .page {
	margin-bottom: 20px;
}

.card.site-updates { margin-bottom: 20px; overflow: hidden; }
/* Заголовка у блока нет, поэтому отступы держит сам .body — со строк их
   снимать нельзя, иначе подсветка при наведении обрежется по краям */
.card.site-updates > .body { background: var(--background-card); padding: 10px 0; }
.card.site-updates .site-update { display: flex; align-items: flex-start; gap: 12px; padding: 7px 20px; color: inherit; transition: background-color 150ms ease; }
.card.site-updates .site-update:hover { background: rgba(255, 255, 255, 2%); }
.card.site-updates .site-update > .avatar { flex: none; width: 32px; height: 32px; border-radius: 4px; }
.card.site-updates .site-update-content { min-width: 0; flex: 1; overflow: hidden; }
.card.site-updates .site-update.single-line .site-update-content { display: flex; align-items: center; min-height: 32px; }
.card.site-updates .site-update.single-line .site-update-line { width: 100%; }
.card.site-updates .site-update-line { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.card.site-updates .site-update-summary { min-width: 0; flex: 1 1 auto; overflow: hidden; font-size: var(--font-size-small); text-overflow: ellipsis; }
.card.site-updates .site-update-name { color: var(--color-text-default); font-weight: var(--font-weight-medium); }
.card.site-updates .site-update-action { color: var(--color-text-default); }
.card.site-updates .site-update-target { color: var(--color-text-important); }
.card.site-updates .site-update-time { flex: 0 0 auto; padding-left: 12px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); }
.card.site-updates .site-update-text { margin-top: 1px; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-small); white-space: nowrap; text-overflow: ellipsis; }
.card.site-updates .site-updates-loading { padding: 12px; color: var(--color-text-secondary); text-align: center; }

.card.feed-empty .body { padding: 24px 16px; color: var(--color-text-secondary); text-align: center; line-height: 1.5; }

@media only screen and (max-width: 600px) {
	.card.site-updates .site-update { align-items: center; gap: 10px; padding: 7px 12px; }
	.card.site-updates .site-update-time { padding-left: 8px; }
}

/* Sidebar */
.sidebar {
	display: flex;
	flex-flow: column;
	position: fixed;
	overflow: auto;
	width: 200px;
	top: 0;
	bottom: 0;
	user-select: none;
	margin-right: 940px; /* 640px feed, 200px self, 100px margin */
}

.sidebar a.brand {
	min-height: 100px;
	color: inherit;
	display: flex;
	align-items: center;
	padding-left: 20px;

	font-size: var(--font-size-logo);
	font-weight: var(--font-weight-bold);
	color: var(--color-brand);
}

.sidebar .brand svg {
	max-height: 30px;
	color: var(--color-brand);
}

.sidebar > .nav {
	display: flex;
	flex-direction: column;
}

.sidebar > .nav > a {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	color: var(--color-text-sidebar);
	transition: background-color 150ms ease,
		opacity 300ms ease;
	border-radius: 8px;
	margin-bottom: 4px;
	cursor: pointer;
	opacity: 1;
}

.sidebar > .nav > a > span {
	margin-left: 30px;
}

.sidebar > .nav svg {
	color: var(--color-icon-nav);
	transition: color 150ms ease;
	position: absolute;
	height: 1.4em;
}

.sidebar > .nav a.active > svg:not(.active) {
	display: none;
}

.sidebar > .nav a:not(.active) > svg.active {
	display: none;
}

.sidebar > .nav a.active:not(.nav-return) svg {
	color: var(--color-icon-default);
}

.sidebar > .nav a:hover,
.sidebar > .nav a:focus {
	background-color: var(--background-nav-hover);
	outline: none;
}

.sidebar > .nav a.active {
	background-color: var(--background-nav-active);
}

body.inpost .sidebar .nav-feed,
body:not(.inpost) .sidebar .nav-return {
	transition: none;
	opacity: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.sidebar > .nav-footer {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	margin-bottom: 16px;
	padding-top: 16px;
}

.sidebar > .nav-footer a {
	display: flex;
	align-items: center;
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	padding: 5px 0px 5px 20px;
}

.sidebar > .nav-footer a:hover,
.sidebar > .nav-footer a:focus {
	color: var(--color-text-secondary);
	outline: none;
}

.sidebar > .nav-footer > a > svg {
	color: var(--color-icon-nav);
	position: absolute;
	height: 1.2em;
}

.sidebar > .nav-footer > a > span {
	margin-left: 1.5em;
}


/* css/components/010-userbar.css */
/* Userbar */
.userbar {
	height: 100px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.userbar .wrapper {
	display: flex;
	align-items: center;	
}

.userbar .avatar {
	width: 32px;
	height: 32px;
	margin-left: 12px;
	margin-right: 20px;
	border-radius: 8px;
	cursor: pointer;
}

.userbar .button {
	width: 40px;
	height: 32px;
	margin-right: 10px;
	border-radius: 4px;
	transition: background-color 150ms ease;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.userbar .button:hover {
	background-color: var(--background-nav-hover);
	cursor: pointer;
}

.userbar .button svg {
	color: var(--color-icon-userbar);
	transition: color 150ms ease;
	height: 22px;
	width: 22px;
}

.userbar .button:hover svg {
	color: var(--color-icon-userbar-hover);
}

.userbar .button.login {
	padding: 0 8px;
	width: auto;
	margin: 0;
}

.userbar .button.login svg {
	margin-right: 8px;
}

.userbar.logged .for-quest {
	display: none;
}

.userbar:not(.logged) .for-user {
	display: none;
}

.userbar .button > .badge {
	display: grid;
	place-items: center;
	font-size: var(--font-size-tiny);
	background-color: var(--badge-background-red);
	color: #fff;
	border-radius: 9999px;
	min-height: 1.75em;
	min-width: 1.75em;
	padding: 0 0.4em;
	position: absolute;
	right: 0;
	top: 0;
}

.userbar .button > .badge:not(.visible) {
	display: none;
}


/* css/components/020-avatar.css */
/* Avatar */
div.avatar {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

div.avatar > img {
	vertical-align: bottom;
	height: 100%;
	width: 100%;
}

/* Заглушка вместо аватарки у анонимных уведомлений об оценке записи */
div.avatar.anonymous {
	display: grid;
	place-items: center;
	background-color: var(--background-nav-hover);
	color: var(--color-text-secondary);
}

div.avatar.anonymous > svg {
	height: 45%;
	width: 45%;
}

div.avatar.placeholder::before {
	position: absolute;
	top: 50%;
	left: 50%;
	content: attr(data-initial);
	transform: translate(-50%, -50%);
	color: var(--avatar-color);
	text-transform: uppercase;
	font-weight: bolder;
	white-space: nowrap;
	overflow: hidden;
}

div.avatar[data-variant="0"] {
	background-color: var(--avatar-bg-color-0);
}

div.avatar[data-variant="1"] {
	background-color: var(--avatar-bg-color-1);
}

div.avatar[data-variant="2"] {
	background-color: var(--avatar-bg-color-2);
}

div.avatar[data-variant="3"] {
	background-color: var(--avatar-bg-color-3);
}

div.avatar[data-variant="4"] {
	background-color: var(--avatar-bg-color-4);
}

div.avatar[data-variant="5"] {
	background-color: var(--avatar-bg-color-5);
}

div.avatar[data-variant="6"] {
	background-color: var(--avatar-bg-color-6);
}

div.avatar[data-variant="7"] {
	background-color: var(--avatar-bg-color-7);
}

div.avatar[data-variant="8"] {
	background-color: var(--avatar-bg-color-8);
}

div.avatar[data-variant="9"] {
	background-color: var(--avatar-bg-color-9);
}

div.avatar[data-size="32"]::before {
	font-size: calc(32px * var(--avatar-font-size));
	max-width: calc(32px * var(--avatar-max-width));
}

div.avatar[data-size="36"]::before {
	font-size: calc(36px * var(--avatar-font-size));
	max-width: calc(36px * var(--avatar-max-width));
}

div.avatar[data-size="42"]::before {
	font-size: calc(42px * var(--avatar-font-size));
	max-width: calc(42px * var(--avatar-max-width));
}

div.avatar[data-size="150"]::before {
	font-size: calc(150px * var(--avatar-font-size));
	max-width: calc(150px * var(--avatar-max-width));
}


/* css/components/030-context.css */
/* Context */
.context {
	position: fixed;
	color: var(--context-text-color);
	background-color: var(--context-background);
	box-shadow: 0 0.25rem 0.5rem 0.125rem var(--context-shadow-color);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	overflow: hidden;
	user-select: none;
	z-index: 11000;

	transition: opacity 150ms ease-in-out,
		transform 150ms ease-in-out;
}

.context, .context a {
	color: var(--color-text-default);
}

.context:not(.visible) {
	pointer-events: none;
	transform: translateX(-30%) translateY(-40%) scale(0.25);
	transition: opacity 150ms ease-in-out,
		transform 150ms ease-in-out,
		left 0ms 150ms,
		top 0ms 150ms;

	left: 0!important;
	top: 0!important;
	opacity: 0;
}

.context:not(.visible).left {
	transform: translateX(30%) translateY(-40%) scale(0.25);
}

.context:not(.visible).center {
	transform: translateY(-40%) scale(0.25);
}

.context.preparing {
	transform: none;
	transition: none;
	opacity: 0;
}

.context .item {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 6px 16px;
}

.context > .item:first-child,
.context > a:first-child > .item {
	border-radius: 12px 12px 0 0;
}

.context > .item:last-child,
.context > a:last-child > .item {
	border-radius: 0 0 12px 12px;
}

.context .item:hover {
	background-color: var(--context-item-hover);
	cursor: pointer;
}

.context .item svg {
	margin-right: 12px;
	height: 1em;
	scale: 1.1;
}

.context .divider {
	border-top: 1px solid var(--context-divider-color);
	margin: 4px 8px;
}

/* Действия модератора — красным, чтобы не кликнуть по привычке */
.context .item.danger,
.context .item.danger svg {
	color: var(--color-red);
}

/* Удалённый пост виден только модератору — помечаем, чтобы
   не спутать его с обычным */
.card.post[removed] {
	outline: 1px dashed var(--badge-background-red);
	outline-offset: -1px;
	opacity: 0.7;
}

.context.reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: 13.6rem;
	padding: 0.2rem;
	border-radius: 8px;
	box-shadow: 0 0 0.5rem 0.125rem var(--context-shadow-color);
}

.context.reactions > .reaction {
	padding: 0.32rem;
	cursor: pointer;
}

.context.reactions > .reaction > img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	transition: scale 100ms ease-out;	
}

.context.reactions > .reaction:hover > img {
	scale: 1.2;
}


/* css/components/040-notification.css */
/* Notification */
.notification {
	position: fixed;
	color: #fff;
	background-color: rgb(33 33 33 / 85%);
	backdrop-filter: blur(10px);
	border-radius: 4px;
	display: flex;
	align-items: center;
	padding: 8px 20px;
	pointer-events: none;
	user-select: none;
	z-index: 12000;

	animation-name: anim-notification;
	animation-fill-mode: both;
	animation-duration: 5s;
}

.notification svg {
	color: #fff;
	margin-right: 8px;
	height: 1.5em;
	flex-shrink: 0;
}

@keyframes anim-notification {
	0% {
		opacity: 0;
		transform: translate(-50%, -150%);
		left: 50%;
		top: 50px;
	}

	20% {
		opacity: 1;
		transform: translate(-50%, -50%);
	}

	80% {
		opacity: 1;
	}

	99% {
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50px;
	}

	100% {
		opacity: 0;
		left: 0;
		top: 0;
	}
}


/* css/components/050-tooltip.css */
/* Tooltip */
.tooltip {
	color: #fff;
	font-size: var(--font-size-small);
	background-color: rgb(33 33 33 / 85%);
	padding: 5px 10px;
	border-radius: 4px;
	position: absolute;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	transform: translate(-50%, -100%);
	transition: opacity 150ms ease;
	backdrop-filter: blur(10px);
}

.tooltip:not(.visible) {
	transition: opacity 500ms ease,
		left 0ms 500ms,
		top 0ms 500ms;
	left: 0!important;
	top: 0!important;
	opacity: 0;
}

/* Tooltip.Rating */
.tooltip > .rating {
	padding: 3px 2px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tooltip > .rating > .values {
	display: flex;
	gap: 8px;
}

.tooltip > .rating > .values > .likes,
.tooltip > .rating > .values > .dislikes {
	display: flex;
	align-items: center;
	gap: 4px;
}

.tooltip > .rating > .values svg {
	height: 1.2em;
}

.tooltip > .rating > .values > .likes > svg {
	color: #77bd99;
}

.tooltip > .rating > .values > .dislikes > svg {
	color: #BD7777;
}

.tooltip > .rating > .values span {
	font-weight: var(--font-weight-bold);
}

.tooltip > .rating > .values > .divider {
	background-color: rgb(255 255 255 / 15%);
	flex-grow: 1;
	width: 1px;
	margin: 4px 0;
}

.tooltip > .rating > .bar {
	height: 4px;
	border-radius: 4px;
	background-color: rgb(150, 150, 150);
	width: 100%;
}

.tooltip > .rating > .bar > .fill {
	height: 4px;
	border-radius: 4px;
	background-color: rgb(255, 255, 255);
}


/* css/components/060-card.css */
/* Card */
.card {
	background-color: var(--background-card);
	border: 1px solid var(--border-card);
	border-radius: 8px;
	margin-bottom: 20px;
	cursor: default;
}

.page .card {
	display: flex;
	flex-direction: column;
	min-height: 350px;
}

.card ul {
	list-style-type: disc;
	padding: 0 20px 0 30px;
}

body.inpost .card:not(.expanded) {
	display: none;
}

.card > .header.title {
	border-bottom: 1px solid var(--border-card);
	font-size: var(--font-size-large);
	padding: 16px 20px;
	margin-bottom: 14px;
}

/* Post.Header */
.card.post > .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 0 20px;
}

.card.post > .header .wrapper {
	display: flex;
	align-items: center;
}

.card.post > .header .section {
	display: flex;
	align-items: center;
	gap: 8px;
}

.card.post > .header > .section > .details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.card.post > .header .section .name {
	font-weight: var(--font-weight-medium);
	color: inherit;
}

.card.post > .header .section .date {
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
}

.card.post > .header .section .date::after {
	content: "\B7";
	display: inline-block;
	color: var(--color-text-secondary);
	padding: 0 4px;
}

.card.post > .header .section .author {
	font-size: var(--font-size-small);
	/*color: inherit;*/
}

.card.post > .header .logo {
	line-height: 0;
	user-select: none;
}

.card.post > .header .logo img {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	outline: 1px solid rgb(0 0 0 / 10%);
	outline-offset: -1px;
}

.dark .card.post > .header .logo img {
	outline: 1px solid rgb(255 255 255 / 10%);
}

.card.post > .header > .more {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.card.post > .header > .more:hover {
	cursor: pointer;
}

.card.post > .header > .more svg.dots {
	color: var(--color-icon-secondary);
	transition: color 150ms ease;
	pointer-events: none;
	height: 20px;
	width: 20px;
}

.card.post > .header > .more:hover svg.dots {
	color: var(--color-icon-default);
}

.card.post > .header .wrapper-for-second-line {
	display: flex;
}

.card.post > .header svg.check {
	scale: 1.2;
	height: 1em;
	margin-right: 0.15em;
	color: var(--color-post-check);
	user-select: none;
}

/* Card.Content */
.card > .body {
	position: relative;
}

.card > .body h2, .card h3, .card h4, .card p {
	padding: 0 20px;
}

.card > .body li {
	margin: 0.5em 0 0.5em 10px;
	word-wrap: break-word;
}

/* Длинный пост в ленте обрезаем по высоте и затеняем низ: видно, что
   текст продолжается, а всё целиком открывается по клику. Класс ставит
   JS и только при реальном переполнении — иначе градиент лёг бы
   и на короткие записи. */
.card:not(.expanded) > .body > .blocks.clamped {
	max-height: var(--post-preview-max-height);
	overflow: hidden;
}

.card:not(.expanded) > .body > .blocks.clamped::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(to bottom, transparent, var(--background-card));
	pointer-events: none;
}

.card > .body a.expand {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.card.expanded > .body a.expand {
	display: none;
}

.card > .body .delimiter {
	text-align: center;
	margin: 1.75em 0 1em 0;
}

.card > .body .delimiter::before {
	content: "***";
	font-size: 30px;
	letter-spacing: 0.2em;
}

.card > .body .incut {
	background-color: var(--color-post-inner-bg);
	padding: 40px 10%;
	margin: 1em 0;
}

.card > .body .alert {
	background-color: var(--post-alert-background);
	padding: 16px 20px;
}

.card > .body .blocks > *:last-child {
	margin-bottom: 0;
}

/* Card.Footer */
.card > .footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-bold);
	padding: 12px 20px;
	user-select: none;
}

.card > .footer svg {
	scale: 1.2;
	height: 1.2em;
	line-height: 1.2em;
	color: var(--color-icon-secondary);
	transition: color 150ms ease;
    	transform: translateY(0.025em);
}

.card > .footer .comments {
	display: flex;
	align-items: center;
}

.card > .footer .comments svg {
	margin-right: 0.3em;
}

.card > .footer .comments {
	transition: color 150ms ease;
	white-space: nowrap;
}

.card > .footer .comments:hover,
.card > .footer .comments:hover svg {
	color: var(--color-blue);
	cursor: pointer;
}

/* Синяя точка «появились новые комментарии» — та же, что у непрочитанных
   уведомлений. Показывается только тем, кто уже заходил в запись */
.card > .footer .comments > .new-dot {
	background-color: var(--button-blue);
	border-radius: 9999px;
	height: 7px;
	width: 7px;
	margin-left: 6px;
	flex-shrink: 0;
}

.card > .footer .comments:not(.has-new) > .new-dot {
	display: none;
}

/* Точка нужна только в ленте: в раскрытой записи комментарии и так
   перед глазами, отмечать там нечего */
.card.expanded > .footer .comments > .new-dot {
	display: none;
}

.card.expanded > .footer .comments {
	pointer-events: none;
}

.card > .footer .rating {
	display: flex;
	align-items: center;
}

.card > .footer .rating svg:not(.for-guest) {
	scale: 1.5;
}

.card > .footer .rating .num {
	margin-inline: 0.3em;
}

.card > .footer .rating .button {
	width: 1.5em;
	display: flex;
	justify-content: center;
}

.card > .footer .rating .button:hover {
	cursor: pointer;
}

.card > .footer .rating .button:hover svg {
	color: var(--color-icon-default);
}

.card.uprated > .footer .rating .num {
	color: var(--color-green);
}

.card.uprated > .footer .rating .button.up svg {
	color: var(--color-green);
	filter: drop-shadow(0px 0px 5px var(--color-green));
}

.card.downrated > .footer .rating .num {
	color: var(--color-red);
}

.card.downrated > .footer .rating .button.down svg {
	color: var(--color-red);
	filter: drop-shadow(0px 0px 5px var(--color-red));
}

.guest .card > .footer .rating .button {
	display: none;
}

body:not(.guest) .card > .footer .rating .for-guest {
	display: none;
}

.card.expanded.has-comments > .footer {
	border-bottom: 2px solid var(--border-card);
}

/* Card.Quote */
.card .quote {
	background-color: var(--color-post-inner-bg);
	padding: 20px;
	margin: 1em 0;
}

.card .quote .box {
	padding: 20px;
	position: relative;
	overflow: hidden;
}

.card .quote .text {
	margin-left: 40px;
}

.card .quote .text.huge {
	font-size: 1.2em;
}

.card .quote svg {
	height: 20px;
	position: absolute;
}

.card .quote .author {
	display: flex;
	margin-top: 10px;
	margin-left: 40px;
}

.card .quote .author .details {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card .quote .author img {
	max-width: 42px;
	max-height: 42px;
	border-radius: 4px;
	margin-right: 10px;
	align-self: center;
}

.card .quote .author .name {
	font-weight: var(--font-weight-medium);
}

.card .quote .author .name::before {
	content: '— ';
}

.card .quote .author .description {
	color: var(--color-text-secondary);
}

/* Card.Comment */
.card .comment {
	padding: 20px;
	position: relative;
}

.card:not(.expanded) .comment {
	display: none;
}

/* Форма, переехавшая под комментарий, — отдельная панель, а не врезка
   во всю ширину: поля по бокам не дают ей упереться в границу карточки,
   подложка и скругление показывают, что это ответ именно на этот
   комментарий, а не продолжение обсуждения.

   Форма живёт в колонке ответов своей ветки и наследует её отступ —
   ширину для неё держит ограничение отступов глубоких веток
   (см. .collapse в 070-discussion.css). */
.card .comment.inline {
	margin: 0 12px 12px;
	padding: 8px 8px 10px;
	border-radius: 12px;
	background-color: var(--background-default);
}

/* Пока форма отвечает кому-то в ветке, её место в шапке обсуждения
   занимает заглушка: клик по ней отменяет ответ и возвращает форму
   обратно вместе с набранным текстом — передумать можно на любом шаге */
.card .comment-stub {
	margin: 20px;
	padding: 0 1em;
	height: 40px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	border: 1px solid var(--input-border);
	background-color: var(--input-background);
	color: var(--color-text-secondary);
	cursor: text;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.card:not(.expanded) .comment-stub {
	display: none;
}

.card .comment-stub:hover {
	background-color: var(--input-background-focus);
	border-color: var(--input-border-focus);
}

.card .comment .wrapper-for-textarea {
	position: relative;
}

.card .comment > .attachments-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.card .comment > .attachments-preview:empty {
	display: none;
}

.card .comment .attachment-preview {
	position: relative;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--background-default);
	outline: 1px solid var(--input-border);
	outline-offset: -1px;
}

.card .comment .attachment-preview > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card .comment .attachment-preview > .remove {
	display: grid;
	place-items: center;
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 65%);
	color: white;
	cursor: pointer;
}

.card .comment .attachment-preview > .remove > svg {
	display: block;
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.card .comment .attachment-preview > .remove:hover {
	background: var(--badge-background-red);
}

.card .comment textarea {
	display: block;
	overflow: hidden;
	resize: none;
	width: 100%;
	min-width: 0; /* у textarea своя минимальная ширина по cols — без сброса
	                 форма в узкой колонке вылезает за край карточки */
	
	border-radius: 10px;
	min-height: 3.52em; /* padding + lineHeight + .02em extra workaround to prevent height decrease after script update */
	padding: 1em 6em 1em 1em; /* справа — место под плавающие кнопки .controls */
	transition: border 150ms ease, background-color 150ms ease;
	background-color: var(--input-background);
	border: 1px solid var(--input-border);
	color: var(--color-text-default);
}

/* В режиме ответа кнопок три (отмена + скрепка + отправка), а не две —
   иначе текст заезжает под крестик */
.card .comment.inline[replying] textarea {
	padding-right: 8.75em;
}

.card .comment textarea:focus {
	background-color: var(--input-background-focus);
	border: 1px solid var(--input-border-focus);
}

.guest .card .comment {
	padding: 8px;
}

.guest .card .comment textarea {
	display: none;
}

/* Кнопки лежат в поле, прижатые к его нижнему краю: пока текст растёт,
   они остаются под рукой и не растягиваются на всю высоту textarea.
   Отступ 8px — половина разницы между высотой пустого поля (3.52em)
   и кнопкой (32px): в однострочном состоянии ряд стоит по центру. */
.card .comment .controls {
	display: flex;
	gap: 4px;
	position: absolute;
	right: 8px;
	bottom: 8px;
}

.card .comment .controls.hidden {
	display: none;
}

/* Форма ответа переезжает внутрь .discussion > .comments, где .item —
   это комментарий с padding: 10px 20px. Иконки контролов тоже .item,
   поэтому явно гасим чужой padding, иначе svg выдавливает за пределы */
.card .comment .controls .item {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 150ms ease,
		background-color 150ms ease;
}

.card .comment .controls .item:hover {
	background-color: var(--background-default);
	cursor: pointer;
}

/* Отправка — единственное действие с акцентом: её видно сразу,
   не наводя мышь */
.card .comment .controls .item.send,
.card .comment .controls .item.confirm {
	background-color: var(--background-blue);
}

.card .comment .controls .item.send:hover,
.card .comment .controls .item.confirm:hover {
	background-color: var(--background-blue-hover);
}

.card .comment .controls .item svg {
	color: var(--color-icon-secondary);
	height: 18px;
	width: 18px;
}

.card .comment .controls .item.attach:hover svg {
	color: var(--color-icon-default);
}

.card .comment .controls .item.send svg,
.card .comment .controls .item.confirm svg {
	color: var(--color-blue);
}

.card .comment .controls .item.cancel {
	display: none;
}

/* Шапки с цитатой у переехавшей формы нет, поэтому отмена — здесь */
.card .comment.inline[replying] .controls .item.cancel {
	display: flex;
}

.card .comment .controls .item.cancel:hover svg {
	color: var(--color-red);
}

.card .comment:not([editing]) .controls .item.confirm {
	display: none;
}

.card .comment[editing] .controls .item.send {
	display: none;
}

.card .comment.target-visible textarea {
	border-radius: 0 0 10px 10px;
	border-top: 0;
}

/* Форма стоит прямо под комментарием — цитата в шапке дублирует строку
   выше, поэтому её прячем, а полю возвращаем цельный вид. На мобильном
   форма живёт отдельной панелью внизу экрана: там цитата остаётся
   единственным указанием, кому отвечаешь (см. mobile.css). */
.card .comment.inline > .target {
	display: none;
}

.card .comment.inline.target-visible textarea {
	border-radius: 10px;
	border-top: 1px solid var(--input-border);
}

.card .comment.inline.target-visible textarea:focus {
	border-top-color: var(--input-border-focus);
}

.card .comment .target {
	display: flex;
	justify-content: space-between;
	border: 1px solid var(--input-border);
	border-radius: 10px 10px 0 0;
	border-bottom: none;
	width: 100%;
}

.card .comment:not(.target-visible) .target {
	display: none;
}

.card .comment .target svg {
	color: var(--color-icon-secondary);
	height: 1.2em;
}

.card .comment .target .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25em;
}

.card .comment:not([replying]) .target .icon.reply {
	display: none;
}

.card .comment:not([editing]) .target .icon.edit {
	display: none;
}

.card .comment .target .message {
	padding: 0.5em 0 0.5em 0.75em;
	font-size: var(--font-size-smaller);
	transition: background-color 150ms ease;
	position: relative;
	min-width: 0;
	flex: auto;
}

.card .comment .target .message:hover {
	background-color: var(--background-default);
	cursor: pointer;
}

.card .comment .target .message::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	background-color: var(--color-icon-secondary);
	border-radius: 4px 0 0 4px;
}

.card .comment .target .message .name {
	font-weight: var(--font-weight-medium);
}

.card .comment .target .message .text {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.card .comment .target .cancel {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 150ms ease;
	border-radius: 0 4px 0 0;
	width: 2.25em;
}

.card .comment .target .cancel:hover {
	background-color: var(--background-default);
	cursor: pointer;
}


/* css/components/070-discussion.css */
/* Discussion */
.discussion > *:last-of-type {
	padding-bottom: 20px;
}

.card:not(.expanded) .discussion {
	display: none;
}

.discussion > .comments .item {
	position: relative;
	padding: 10px 20px;
}

/* Модератор видит в том числе комментарии, скрытые от обычной ленты.
   Повторяем оформление удалённого поста, чтобы этот режим был очевиден. */
.discussion > .comments .item.moderator-only {
	outline: 1px dashed var(--badge-background-red);
	outline-offset: -1px;
	opacity: 0.7;
}

.discussion > .comments .item > .header {
	display: flex;
	margin-bottom: 8px;
	height: 36px;
}

.discussion > .comments .item > .header .avatar {
	width: 36px;
	height: 36px;
	border-radius: 4px;
}

.discussion [online] .header .avatar::after {
	content: '';
	position: absolute;
	background-color: var(--color-green);
	border-left: 2px solid var(--background-card);
	border-top: 2px solid var(--background-card);
	border-radius: 0 0 4px 0;
	height: 7px;
	width: 7px;
	bottom: 0;
	right: 0;
	pointer-events: none;
}

.discussion > .comments .item > .header .wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin-left: 8px;
	min-width: 0;
}

.discussion > .comments .item > .header .name {
	font-weight: var(--font-weight-medium);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color: inherit;
}

.discussion > .comments .item > .header .date {
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
}

.discussion > .comments .item .action {
	transition: background-color 150ms ease;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	pointer-events: none;
}

.discussion > .comments .item:hover .action {
	background: var(--discussion-item-hover-background);
}

.discussion > .comments .item .wrapper-1 {
	display: flex;
	flex-direction: column;
	margin-left: 10px;
}

.discussion > .comments .item .wrapper-2 {
	display: flex;
	flex-direction: row;
}

.discussion > .comments .item:not([online]) .avatar .status {
	display: none;
}

.discussion > .comments .item .message {
	line-height: var(--line-height-default);
}

.discussion .removed-comment-notice {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 9px;
	border: 1px solid var(--border-card);
	border-radius: 7px;
	background: var(--background-default);
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	font-style: italic;
}

.discussion .removed-comment-notice > svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.reaction-chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

.reaction-chips:not(.visible) {
	display: none;
}

.reaction-chips .reaction {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	height: 24px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--color-text-secondary);
	background-color: var(--background-default);
	font-weight: var(--font-weight-medium);
	transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
	user-select: none;
}

.light .reaction-chips .reaction {
	border-color: rgb(0 0 0 / 6%);
}

.dark .reaction-chips .reaction {
	background-color: rgb(40, 40, 42);
	border-color: rgb(48, 48, 50);
}

.reaction-chips .reaction.selected {
	background-color: var(--background-blue);
	border-color: var(--border-blue);
	color: var(--color-blue);
}

.reaction-chips .reaction:hover {
	background-color: var(--background-nav-hover);
	cursor: pointer;
}

.discussion [owning] .reaction-chips .reaction {
	pointer-events: none;
}

.guest .reaction-chips .reaction {
	pointer-events: none;
}

.reaction-chips .reaction img {
	display: block;
	width: 18px;
	height: 18px;
	max-width: 18px;
	max-height: 18px;
	object-fit: contain;
	flex: none;
	scale: 1.85;
}

.reaction-chips .reaction .num {
	font-size: var(--font-size-smaller);
	margin-left: 4px;
}

.discussion .reaction-chips {
	min-height: 24px;
	margin-top: 8px;
}

.discussion .reaction-chips:not(.visible) {
	min-height: 0;
	margin-top: 0;
}

.reaction-trigger {
	flex: none;
	min-height: 30px;
	padding: 0 9px;
	border: 0;
	border-radius: 4px;
	color: var(--color-text-secondary);
	background: transparent;
	font: inherit;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

.reaction-trigger:hover {
	color: var(--color-text-default);
	background: var(--background-nav-hover);
}

.reaction-picker {
	position: absolute;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(6, 34px);
	gap: 2px;
	padding: 6px;
	border: 1px solid var(--border-card);
	border-radius: 8px;
	background: var(--context-background);
	box-shadow: 0 8px 28px rgb(0 0 0 / 32%);
}

.reaction-picker[hidden] { display: none; }
.reaction-picker img { display: block; width: 34px; height: 34px; max-width: 34px; max-height: 34px; padding: 4px; border-radius: 6px; object-fit: contain; cursor: pointer; }
.reaction-picker img:hover { background: var(--context-item-hover); }

.discussion .branch {
	display: flex;
	flex-direction: row;
}

.discussion .branch .collapse {
	width: 20px;
	flex-shrink: 0;
	border-right: 1px solid var(--collapse-border-color);
	transition: background-color 150ms ease;

	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.discussion .branch.collapsed .collapse {
	display: none;
}

.discussion .branch:not(.collapsed) .collapse:hover {
	background: var(--collapse-hover-background);
	cursor: pointer;
}

.discussion .branch .collapse svg {
	margin-bottom: 10px;
	height: 16px;
	width: 16px;
	color: transparent;
	transition: color 150ms ease;
}

.discussion .branch .collapse:hover svg {
	color: var(--color-icon-tertiary);
}

.discussion .branch.collapsed .collapse svg {
	display: none;
}

.discussion .branch.collapsed .replies {
	display: none;
}

.discussion .branch .expand {
	color: var(--color-text-secondary);
	transition: color 150ms ease;
	margin: 4px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	white-space: nowrap;
	user-select: none;
}

.discussion .branch:not(.collapsed) > .expand {
	display: none;
}

.discussion .branch .expand svg {
	transition: color 150ms ease;
	margin-right: 0.3em;
	height: 1em;
	scale: 1.1;
}

.discussion .branch .expand:hover,
.discussion .branch .expand:hover svg {
	cursor: pointer;
}

.discussion .replies {
	width: 100%;
	/* Флексовый min-width: auto не даёт колонке сжиматься уже своего
	   содержимого — глубокая ветка вылезала за правый край карточки */
	min-width: 0;
}

/* Отступ вложенности не может расти бесконечно: на восьмом уровне от
   колонки ответов оставалась полоска, в которой не помещались ни текст,
   ни форма ответа — кнопки уезжали за границу карточки. Первые четыре
   уровня отступают как раньше, дальше полоса сворачивания вдвое уже.
   Сворачивать ветку по-прежнему можно на любой глубине. */
.discussion .branch .branch .branch .branch .branch .collapse {
	width: 10px;
}

.discussion .branch .branch .branch .branch .branch .collapse svg {
	height: 10px;
	width: 10px;
	margin-bottom: 8px;
}

.discussion img.attachment {
	display: block;
	width: 100%;
	max-width: 400px;
	max-height: 300px;
	border-radius: 4px;
	margin-top: 6px;
	outline: 1px solid rgb(0 0 0 / 10%);
	outline-offset: -1px;
	cursor: pointer;
}

.discussion > .comments .item.highlighted {
	animation-name: anim-highlighted;
	animation-fill-mode: both;
	animation-duration: 5s;
}

.discussion.blurred > .comments .item:not(.context-owner),
.discussion.blurred .collapse,
.discussion.blurred .expand {
	filter: opacity(0.35) grayscale(0.5) blur(3px);
	transition: filter 350ms ease;
	pointer-events: none;
	user-select: none;
}

@keyframes anim-highlighted {
	0% {
		background-color: var(--discussion-highlighted);
	}

	30% {
		background-color: var(--discussion-highlighted);
	}

	100% {
		background-color: var(--background-card);
	}
}

@media (pointer: coarse) {
	.discussion > .comments .item {
		user-select: none;
	}
}

/* Discussion Order */
.discussion > .order {
	position: relative;
}

.discussion > .order > .selector {
	display: flex;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-smaller);
	color: var(--color-text-default);
	user-select: none;
	position: absolute;
	right: 20px;
	top: 16px;
	z-index: 1;
}

.discussion > .order > .selector > div {
	padding: 4px 8px;
	transition: background-color 150ms ease;
	background-color: var(--input-background);
	border: 1px solid var(--input-border);
}

.discussion > .order > .selector > div:first-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.discussion > .order > .selector> div:nth-child(2) {
	border-left: none;
	border-right: none;
}

.discussion > .order > .selector > div:last-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.discussion > .order > .selector > div.active {
	background-color: var(--input-background-focus);
}

.discussion > .order > .selector > div:not(.active) {
	cursor: pointer;
}

.post:not(.has-comments) .discussion > .order {
	display: none;
}

/* Discussion Reactions Details */
.discussion .reactions-details {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--servers-inner-background);
	border: 1px solid var(--collapse-border-color);
	border-radius: 8px;
	max-width: 280px;
	margin-top: 8px;

	opacity: 0;
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: opacity 500ms ease, max-height 750ms ease;
}

.discussion .reactions-details.fade {
	visibility: visible;
	max-height: 1200px;
	opacity: 1;
}

.discussion .reactions-details .row {
	color: inherit;
	display: flex;
	align-items: center;
	padding: 4px 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.discussion .reactions-details .row:not(:last-child) {
	border-bottom: 1px solid var(--collapse-border-color);
}

.discussion .reactions-details .row:hover {
	background-color: var(--collapse-hover-background);
}

.discussion .reactions-details .name-date-wrapper {
	display: flex;
	flex-direction: column;
	margin-left: 8px;
	overflow: hidden;
}

.discussion .reactions-details .avatar {
	height: 28px;
	width: 28px;
	flex-shrink: 0;
	border-radius: 4px;
	background-size: cover;
	position: relative;
}

.discussion .reactions-details .name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.discussion .reactions-details .date {
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.discussion .reactions-details .type {
	margin-left: auto;
}

.discussion .reactions-details .type img {
	height: 36px;
	width: 36px;
}

.discussion .reactions-details .header {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--collapse-border-color);
}

.discussion .reactions-details .header .title {
	display: flex;
    	align-items: center;
	overflow: hidden;
	margin-left: 16px;
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
}

.discussion .reactions-details .header .close {
	display: flex;
	padding: 8px 23px;
}

.discussion .reactions-details .header .close:hover {
	cursor: pointer;
}

.discussion .reactions-details .header .close svg {
	color: var(--color-icon-tertiary);
	height: 20px;
	width: 20px;
}

.discussion .reactions-details .header .close:hover svg {
	color: var(--color-icon-secondary);
}


/* css/components/080-zooming.css */
/* Zooming */
body.zooming {
	overflow: hidden;
}

.zooming-background {
	object-fit: cover;
	position: fixed;
	background-size: cover;
	background-position: center center;
	filter: brightness(0.3);
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 4;
}

.zooming-background::after {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(20px);
	pointer-events: none;
}

.zooming-image {
	position: fixed;
	object-fit: contain;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* pointer-events нужны: без них правый клик уходит на фон и
	   контекстное меню картинки не появляется. Клик закрывает просмотр,
	   боковые кнопки лежат выше по DOM и перехватывают свои зоны. */
	pointer-events: all;
	z-index: 5;
}

.zooming-controls {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 4;
	transition: opacity 350ms ease;
	opacity: 0;
}

/* Стрелки теперь только подсказка: клики принимает картинка, лежащая выше,
   а :hover на самих контролах уже не сработал бы. */
body.zooming:hover .zooming-controls {
	opacity: 1;
}

.zooming-controls .sidebutton {
	width: 25%;
	height: 100%;
	display: grid;
	place-items: center;
}

.zooming-controls .sidebutton.right {
	justify-items: end;
}

.zooming-controls .sidebutton:first-child {
	justify-items: start;
}

.zooming-controls .sidebutton.inactive {
	pointer-events: none;
	opacity: 0;
}

.zooming-controls svg {
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
	color: rgba(255, 255, 255, 0.25);
	transition: color 150ms ease;
	height: 36px;
	width: auto;
	margin: 8px;
}

.zooming-controls.hover-left .sidebutton:first-child svg,
.zooming-controls.hover-right .sidebutton.right svg {
	color: rgba(255, 255, 255, 0.5);
}

.zooming-controls .info {
	color: rgb(255 255 255);
	background-color: rgb(0 0 0 / 25%);
	text-shadow: 0px 0px 1px rgb(0 0 0);
	place-self: flex-end;
	margin-bottom: 30px;
	border-radius: 4px;
	padding: 10px;
	user-select: none;
}

@media (pointer: coarse) {
	.zooming-controls {
		pointer-events: none;
		justify-content: center;
	}

	.zooming-controls .sidebutton,
	.zooming-controls .sidebutton.right {
		display: none;
	}
}


/* css/components/090-album.css */
/* Album */
.card .single-media {
	display: grid;
	place-items: center;
	cursor: pointer;
	margin: 1em 0;
	width: 100%;
}

.card .single-media img,
.card .single-media video {
	max-height: 460px;
	max-width: 100%;
}


/* css/components/100-youtube.css */
/* YouTube: сначала обложка с кнопкой, iframe подставляется по клику */
.card .youtube {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	max-height: 460px;
	width: 100%;
	margin: 1em 0;
	overflow: hidden;
	background: #000;
	cursor: pointer;

	/* Тело поста в ленте накрыто ссылкой-раскрытием a.expand.
	   Поднимаемся над ней, иначе клик по плееру открывает пост —
	   так же сделано у карусели (.post:not(.expanded) .splide) */
	z-index: 1;
}

.card .youtube > .thumb {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.card .youtube > .play {
	position: relative;
	width: 68px;
	height: 48px;
	transition: opacity 150ms ease;
	opacity: 0.85;
}

.card .youtube:hover > .play {
	opacity: 1;
}

.card .youtube > .play svg {
	width: 100%;
	height: 100%;
}

.card .youtube > .play svg > .bg {
	fill: #212121;
	fill-opacity: 0.8;
}

.card .youtube:hover > .play svg > .bg {
	fill: #f00;
	fill-opacity: 1;
}

.card .youtube > .play svg > .arrow {
	fill: #fff;
}

.card .youtube.playing {
	cursor: default;
}

.card .youtube > iframe {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	border: 0;
}

.card .multiple-media {
	margin: 1em 0;
}

.card .multiple-media img {
	max-height: 460px;
	max-width: 100%;
	cursor: pointer;
	margin: 0.2em 0;
}

.card .album {
	display: flex;
	justify-content: space-between;
	margin: 1em 0;
}

.card .album .item {
	min-height: 100px;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.card .album .more-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;

	background-color: rgb(0 0 0 / 50%);
	font-size: 40px;
	color: #fff;

	pointer-events: none;
}

.hidden-album {
	display: none;
}


/* css/components/110-poll.css */
/* Poll */
.poll {
	padding: 20px;
	margin: 1em 0;
}

.poll .title {
	font-weight: var(--font-weight-medium);
	margin-bottom: 20px;
	padding: 0 8px;
	display: flex;
	align-items: center;
}

.poll .title svg {
	height: 1em;
	scale: 1.1;
	color: var(--color-text-secondary);
	margin-right: 4px;
	flex-shrink: 0
}

.poll .option {
	position: relative;
	outline: 1px solid var(--poll-option-border-color);
	transition: outline 150ms ease;
	border-radius: 4px;
	margin-top: 10px;
	padding: 8px;
}

.poll:not(.revealed) .option:hover {
	outline: 1px solid var(--poll-option-hover-border-color);
	cursor: pointer;
}

.poll.revealed .option.selected {
	outline: 1px solid var(--poll-option-selected-border-color);
}

body:not(.inpost) .poll:not(.revealed) .option {
	z-index: 1;
}

.poll .option .fill {
	background-color: var(--poll-fill-color);
	transition: width 500ms ease;
	border-radius: 4px;
	height: 100%;
	width: 0%;

	position: absolute;
	left: 0;
	top: 0;
}

.poll .option .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: inherit;
	z-index: 1;
}

.poll .option .percentage {
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	margin-left: 8px;
	transition: opacity 150ms ease;
	opacity: 0;
}

.poll.revealed .option .percentage {
	opacity: 1;
}

.poll .option .numvotes {
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.poll.revealed .option .numvotes::before {
	content: "\B7";
	display: inline-block;
	color: rgb(0 0 0 / 80%);
	padding: 0 4px;
}


/* css/components/120-notifications.css */
/* Notifications */
.card > .empty-state,
.card > .loading-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.card > .empty-state > svg,
.card > .loading-state > svg {
	width: 100px;
	height: 100px;
	margin-bottom: 16px;
}

.card > .empty-state > .text,
.card > .loading-state > .text {
	color: var(--color-text-secondary);
}


/* css/components/130-splide.css */
/* Splide */
.splide {
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.splide__slide {
	overflow: hidden;
}

.splide__slide::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 110vw;
	height: 110vh;
	transform: translate(-5vw, -5vh);
	background: var(--bg) no-repeat center center;
	background-size: cover;
	filter: blur(5px) brightness(25%);
	z-index: 0;
}

.splide__slide img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center;
	position: relative;
	z-index: 1;
}

/* Только подсказка: клики принимает картинка под этим слоем, иначе
   overlay съедал бы правый клик и контекстное меню картинки. */
.splide .controls {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	justify-content: space-between;
	transition: opacity 350ms ease;
	opacity: 0;
}

.splide:hover .controls {
	opacity: 1;
}

.splide .controls.first > .left,
.splide .controls.last > .right {
	opacity: 0;
}

.splide .controls > .left, 
.splide .controls > .right {
	width: 25%;
	display: grid;
	place-items: center;
}

.splide .controls > .left {
	justify-content: start;
}

.splide .controls > .right {
	justify-content: end;
}

.splide .controls > .left > svg,
.splide .controls > .right > svg {
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
	color: rgba(255, 255, 255, 0.25);
	transition: color 150ms ease;
	height: 36px;
	margin: 8px;
}

.splide .controls.hover-left > .left > svg,
.splide .controls.hover-right > .right > svg {
	color: rgba(255, 255, 255, 0.5);
}

.splide .controls .middle {
	flex-grow: 1;
}

.splide__slide img {
	cursor: pointer;
}

.splide.fullscreen {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 2;
	margin: 0;
}

body.fullscreen-album-open {
	overflow: hidden;
}

.fullscreen-album {
	position: fixed;
	inset: 0;
	z-index: 10000;
}

.fullscreen-album .splide.fullscreen {
	z-index: 1;
}

@media (pointer: coarse), (max-width: 800px) {
	.fullscreen-album .splide__pagination {
		bottom: calc(14px + env(safe-area-inset-bottom));
		z-index: 3;
	}
}

.splide.fullscreen .splide__list,
.splide.fullscreen img {
	height: 100vh;
}

.post:not(.expanded) .splide {
	z-index: 1;
}


@media only screen and (max-width: 640px) {
	.splide .controls > .left, 
	.splide .controls > .right {
		display: none;
	}
}

.card > .body li.splide__slide {
	margin: 0;
}


/* css/components/140-mentions.css */
/* Mentions */
.mention-suggestions {
	display: none;
	position: fixed;
	z-index: 13000;
	max-height: min(320px, 45vh);
	overflow-y: auto;
	border: 1px solid var(--border-card);
	background: var(--context-background);
	box-shadow: 0 0.25rem 0.5rem 0.125rem var(--context-shadow-color);
	backdrop-filter: blur(10px);
	border-radius: 8px;
}

.mention-suggestions > .item {
	padding: 6px 16px;
	white-space: nowrap;
	user-select: none;
	cursor: pointer;
}

.mention-suggestions > .item:first-child {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.mention-suggestions > .item:last-child {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

.mention-suggestions > .item:hover,
.mention-suggestions > .item.active {
	background-color: var(--context-item-hover);
}

.mention-suggestions.visible {
	display: block;
}

.mention {
	color: var(--color-blue);
	background-color: var(--mention-background);
	border-radius: 256px;
	padding: 2px 8px;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}


/* css/components/145-emote-picker.css */
.emote-picker {
	display: none;
	position: absolute;
	z-index: 20;
	border: 1px solid var(--input-border);
	border-radius: 8px;
	background: var(--background-card);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 35%);
	overflow: hidden;
	box-sizing: border-box;
}

.emote-picker.visible { display: block; }
.emote-picker > .categories { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--input-border); overflow: hidden; }
.emote-picker > .categories > button { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 5px; color: var(--color-text-secondary); background: transparent; cursor: pointer; }
.emote-picker > .categories > button.active, .emote-picker > .categories > button:hover { color: var(--color-text-default); background: var(--input-background-focus); }
.emote-picker > .items { display: grid; grid-template-columns: repeat(8, 1fr); max-height: 220px; padding: 6px; overflow-y: auto; }
.emote-picker > .items::-webkit-scrollbar { width: 8px; }
.emote-picker > .items::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgba(255, 255, 255, 3%); }
.emote-picker > .items::-webkit-scrollbar-track { background-color: transparent; }
.emote-picker > .items > button { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 5px; background: transparent; font-size: 22px; cursor: pointer; }
.emote-picker > .items > button:hover { background: var(--input-background-focus); }
.emote-picker button > img { display: block; width: 22px; height: 22px; object-fit: contain; }


/* css/components/150-select2.css */
/* Оформление select2 под тему сайта.

   Тот же самый блок правило в правило лежал и в редакторе поста,
   и в редакторе статьи — выбор раздела там один и тот же виджет.
   Версии успели разойтись: в статье не было полосы прокрутки
   у выпадающего списка. Общая версия — по редактору поста, она полнее. */

.select2-container--default .select2-selection--single {
	color: var(--color-text-default);
	background-color: var(--input-background);
	border: 1px solid var(--input-border);
	border-radius: 4px;
	height: 100%;
}

.select2-container--default .select2-selection--single:hover {
	background-color: var(--input-background);
}

.select2-container--default .select2-selection--single:focus {
	background-color: var(--input-background-focus);
	border: 1px solid var(--input-border-focus);
}

.select2-dropdown {
	background-color: var(--input-background);
	border: 1px solid var(--input-border);
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}

.select2-container--default .select2-results>.select2-results__options {
	max-height: 360px;
}

.select2-results__option {
	padding: 0;
}

.select2-container--default .select2-results__option--selected {
	background-color: var(--background-blue);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--background-blue);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	height: 100%;
	color: inherit;
	line-height: inherit;
	padding-left: 0;
	padding-right: 1.5em;
}

.section-select-option {
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
	gap: 0.5em;
}

.section-select-option > img {
	border-radius: 4px;
	height: 32px;
}

.section-select-option.selected > .info {
	white-space: nowrap;
	overflow: hidden;
}

.section-select-option > .info > .title {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-default);
}

.section-select-option > .info > .subtitle {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.section-select-option.selected > .info > .subtitle {
	text-overflow: ellipsis;
	overflow: hidden;
}

.section-select-placeholder {
	min-height: calc(32px + 1em);
	display: flex;
	align-items: center;
	color: var(--color-text-secondary);
	padding: 0 1em;
}

.section-select-selected {
	display: flex;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	width: 1.2em;
	right: 0.5em;
}

.select2-container:not(.select2-container--open) .select2-selection__arrow {
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yLjIyIDQuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEw2IDcuMTlsMi43Mi0yLjcyYS43NS43NSAwIDAgMSAxLjA2IDEuMDZMNi41MyA4Ljc4YS43NS43NSAwIDAgMS0xLjA2IDBMMi4yMiA1LjUzYS43NS43NSAwIDAgMSAwLTEuMDYiLz48L3N2Zz4=') no-repeat center;
	background-size: contain;
}

.select2-container.select2-container--open .select2-selection__arrow {
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yLjIyIDcuNTNhLjc1Ljc1IDAgMCAwIDEuMDYgMEw2IDQuODFsMi43MiAyLjcyYS43NS43NSAwIDAgMCAxLjA2LTEuMDZMNi41MyAzLjIyYS43NS43NSAwIDAgMC0xLjA2IDBMMi4yMiA2LjQ3YS43NS43NSAwIDAgMCAwIDEuMDYiLz48L3N2Zz4=') no-repeat center;
	background-size: contain;
}

.light .select2-container .select2-selection__arrow {
	filter: contrast(0%);
}

.dark .select2-container .select2-selection__arrow {
	filter: invert(1) brightness(50%);
}

/* Стилизация скроллбара */
.select2-container--default .select2-results__options::-webkit-scrollbar {
	width: 8px;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-track {
	background-color: transparent;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 10%);
	border-radius: 8px;
}

.light .select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 10%);
}

.select2-container--default .select2-results__options::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 12%);
}

.light .select2-container--default .select2-results__options::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 12%);
}


/* css/mobile.css */
/* Mobile Navbar */
:root {
	--mobile-navbar-height: calc(50px + env(safe-area-inset-bottom, 0px));
}

.nav-mobile {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--mobile-navbar-height);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	display: var(--mobile-display-flex);
	justify-content: space-around;
	font-size: var(--font-size-smaller);
	font-weight: var(--font-weight-medium);
	border-top: thin solid rgb(0 0 0 / 7%);
	background-color: rgb(255 255 255 / 75%);
	backdrop-filter: saturate(180%) blur(20px);
	z-index: 3;
}

.dark .nav-mobile {
	border-top: 1px solid rgb(255 255 255 / 7%);
	background-color: rgb(28, 28, 28, 90%);
	backdrop-filter: blur(20px);
}

.nav-mobile a {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	padding: 4px 10px 2px 10px;
	min-width: 64px;
}

.nav-mobile a span {
	color: var(--color-text-secondary);
	font-size: var(--font-size-tiny);
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
}

.nav-mobile a.active span {
	color: var(--color-text-default);
}

.nav-mobile a svg {
	height: 28px;
	color: var(--color-icon-secondary);
}

.nav-mobile a.active svg {
	color: var(--color-icon-default);
}

.nav-mobile a:not(.active) svg.icon-active {
	display: none;
}

.nav-mobile a.active svg:not(.icon-active) {
	display: none;
}

.nav-mobile.hidden,
body.inpost .nav-mobile {
	display: none;
}

.nav-mobile.opened #mobMenuOpen {
	display: none;
}

.nav-mobile:not(.opened) #mobMenuClose {
	display: none;
}

body.guest .nav-mobile #mobProfile span:not(.for-guest),
body:not(.guest) .nav-mobile #mobProfile span.for-guest {
	display: none;
}

.nav-mobile > a {
	position: relative;
}

.nav-mobile > a > .badge {
	height: 8px;
	min-width: 8px;
	border-radius: 4px;
	background-color: var(--badge-background-red);
	transform: translate(12px, 0px);
	position: absolute;
}

.nav-mobile > a > .badge:not(.visible) {
	display: none;
}

/* Mobile Userbar */
.userbar-mobile {
	display: none;
	background-color: #252525;
	color: #fff;

	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1);

	padding: 16px;
	gap: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	z-index: 4;
	user-select: none;
}

.light .userbar-mobile {
	background-color: #f2f2f2;
}

.userbar-mobile.visible {
	transform: translateY(0);
}

.userbar-mobile > .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.userbar-mobile > .header > .user {
	display: flex;
	align-items: center;
	margin-left: 4px;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
}

.userbar-mobile > .header > .user > .avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.userbar-mobile > .header > .user > .name {
	font-size: var(--font-size-huge);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	text-overflow: ellipsis;
	overflow: hidden;
}

.userbar-mobile > .header > .close {
	display: grid;
	place-items: center;
	background-color: rgb(120, 120, 128, .24);
	border-radius: 50%;
	height: 40px;
	width: 40px;
	flex-shrink: 0;
}

.light .userbar-mobile > .header > .close {
	background-color: rgb(120, 120, 128, .12);
}

.userbar-mobile > .header > .close > svg {
	color: rgb(235, 235, 245, .60);
	height: 20px;
	width: 20px;
}

.light .userbar-mobile > .header > .close > svg {
	color: rgb(60, 60, 67, .60);
}

.userbar-mobile > .list {
	background-color: #1c1c1e;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.light .userbar-mobile > .list {
	background-color: #fff;
}

.userbar-mobile > .list > a {
	font-size: var(--font-size-large);
	height: 2.4em;
	color: var(--color-text-default);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #252525;
}

.light .userbar-mobile > .list > a {
	border-bottom: 1px solid #f2f2f2;
}

.userbar-mobile > .list > a > span {
	margin: 0 1em;
	display: inline-flex;
	gap: 8px;
}

.userbar-mobile > .list > a > svg {
	color: var(--color-icon-important);
	height: 1.2em;
	margin: 0 1em;
}

.userbar-mobile > .list > a > span > .badge {
	display: grid;
	place-items: center;
	font-size: var(--font-size-tiny);
	background-color: var(--badge-background-red);
	color: #fff;
	border-radius: 9999px;
	min-height: 1.75em;
	min-width: 1.75em;
	padding: 0 0.4em;
}

.userbar-mobile > .list > a > span > .badge:not(.visible) {
	display: none;
}

/* Mobile Blackout */
.blackout-mobile {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out;
	z-index: 1;
}

.blackout-mobile.visible {
	visibility: visible;
	opacity: 1;
}

/* Notifications — строки один в один со списком чатов */
.card.notifications > .header.title {
	margin: 0;
}

.card.notifications > .body > .row {
	display: flex;
	color: inherit;
	user-select: none;
	position: relative;
}

.card.notifications > .body > .row:hover {
	background-color: rgba(255, 255, 255, 2%);
	cursor: pointer;
}

.card.notifications > .body > .row > .avatar {
	border-radius: 50%;
	height: 48px;
	width: 48px;
	margin: 12px;
	flex-shrink: 0;
}

.card.notifications > .body > .row > .right-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: 1px solid var(--border-card);
	flex-grow: 1;
	overflow: hidden;
}

.card.notifications > .body > .row:last-child > .right-side {
	border-bottom: none;
}

.card.notifications > .body > .row > .right-side > .first-line {
	display: flex;
	align-items: flex-end;
}

.card.notifications > .body > .row > .right-side > .first-line > .name {
	font-weight: var(--font-weight-bold);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Непрочитанное — синей точкой у ника, как счётчик в чатах */
.card.notifications > .body > .row > .right-side > .first-line > .dot {
	background-color: var(--button-blue);
	border-radius: 9999px;
	height: 8px;
	width: 8px;
	margin-left: 8px;
	margin-bottom: 0.35em;
	flex-shrink: 0;
}

.card.notifications > .body > .row:not([unread]) > .right-side > .first-line > .dot {
	visibility: hidden;
}

.card.notifications > .body > .row > .right-side > .first-line > .time {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	margin-left: auto;
	margin-right: 12px;
	padding-left: 8px;
	white-space: nowrap;
}

/* В чатах вторую строку держит счётчик непрочитанных — 20px.
   Без этой высоты обе строки съезжали, и ник стоял не так, как в сообщениях */
.card.notifications > .body > .row > .right-side > .second-line {
	display: flex;
	align-items: center;
	margin-top: 4px;
	min-height: 20px;
}

.card.notifications > .body > .row > .right-side > .second-line > .message {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	/* место под эмоут, прижатый к правому краю */
	margin-right: 60px;
}

/* Эмоут вынесен из потока и прижат к правому краю строки: в потоке он
   растягивал вторую строку, и записи с реакцией вставали не так,
   как записи без неё. Теперь его размер ни на что не влияет. */
.card.notifications > .body > .row > .right-side > .second-line > .reaction {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-15%);
	height: 36px;
	width: 36px;
}

/* Mobile Layout */
@media only screen and (max-width: 1200px) {
	:root {
		--font-size-default: 16px;
		--mobile-display-block: block;
		--mobile-display-flex: flex;
	}

	.userbar {
		display: none;
	}

	.sidebar {
		display: none;
	}

	.sidebar.mobile {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0 30px 50px 30px;
		background-color: var(--background-nav-mobile);
		color: var(--color-text-important);
		display: flex;
		flex-direction: column;
		z-index: 2;
	}

	.sidebar.mobile > .nav {
		margin-bottom: 12px;
	}

	.sidebar.mobile > .nav a {
		padding: 14px 20px;
	}

	body.inpost .sidebar .nav-feed,
	body:not(.inpost) .sidebar .nav-return {
		padding: 0;
	}

	.sidebar.mobile > .nav-footer {
		border-top: 1px solid var(--border-card);
	}

	.sidebar.mobile > .nav-footer a {
		font-size: var(--font-size-default);
		padding: 10px 0px 10px 20px;
	}

	.rightbar {
		display: none;
	}

	.content > .feed {
		margin-top: 20px;
		margin-bottom: 70px;
	}

	.content > .page {
		margin-top: 0;
		margin-bottom: 50px;
	}

	.context .item {
		padding: 12px 16px;
	}

	.context.reactions {
		max-width: 100%;
		padding: 0.4rem;
		width: 17.6rem;
	}

	.context.reactions > .reaction {
		padding: 0.4rem;
	}

	.context.reactions > .reaction > img {
		width: 2rem;
		height: 2rem;
	}

	.card.post .comment[data-comment-source="post"] {
		position: fixed;
		left: 0;
		right: 0;
		/* Chrome двигает visual viewport отдельно от layout viewport при
		   прокрутке адресной строки и открытии клавиатуры. Значение обновляет
		   040-comments.js, чтобы панель оставалась над видимой нижней границей. */
		bottom: var(--mobile-comment-viewport-bottom, 0px);
		width: auto;
		padding: 0 0 env(safe-area-inset-bottom, 0px);
		/* На мобильном форма — панель у нижнего края экрана, а не врезка
		   в обсуждении: переезд под комментарий (.inline) на неё не влияет */
		margin: 0;
		border-radius: 0;
		background-color: var(--input-background);
		border-left: 0;
		z-index: 1;
		opacity: 0;
		transition: opacity 200ms ease;
		pointer-events: none;
	}

	.card.post .comment[data-comment-source="post"].visible {
		opacity: 1;
		pointer-events: all;
	}

	.card.post .comment[data-comment-source="post"] textarea {
		border-radius: 0;
		padding: 0.8em 5.5em 0.8em 1em;
		min-height: 50px;
	}

	/* Панель внизу экрана стоит далеко от комментария, которому отвечают,
	   поэтому цитата в шапке здесь остаётся (на десктопе форма переезжает
	   под комментарий и цитата не нужна), а вместе с ней и крестик отмены
	   в шапке — дублировать его кнопкой в поле не надо */
	.card.post .comment[data-comment-source="post"].inline > .target {
		display: flex;
	}

	.card.post .comment[data-comment-source="post"].inline.target-visible textarea {
		border-radius: 0;
		border-top: 0;
	}

	.card.post .comment[data-comment-source="post"] .controls .item.cancel {
		display: none;
	}

	.card.post > .comment-stub {
		display: none;
	}

	.card.post .comment[data-comment-source="post"] > .target {
		background: var(--input-background);
		border-radius: 16px 16px 0 0;
	}

	.card.post .comment[data-comment-source="post"] > .target > .message {
		background-color: transparent;
	}

	.card.post .comment[data-comment-source="post"] > .target > .cancel {
		padding: 0 0.75em;
		width: auto;
	}
	
	.card.post .comment[data-comment-source="post"] > .target > .cancel > svg {
		height: 1.2em;
	}
}

@media only screen and (max-width: 640px) {
	.card {
		border-radius: unset;
		border: none;
	}

	.content > .feed {
		margin-top: 0;
	}

	.content > .feed.page,
	.inpost .content > .feed {
		margin-bottom: 50px;
	}

	.page .card {
		min-height: calc(100svh - 50px);
		margin: 0;
	}

	.discussion > .order > .selector {
		position: static;
		margin-left: 20px;
		margin-bottom: 12px;
		margin-top: 20px;
	}
}


/* css/pages/article.css */
.article-editor {
	--editor-accent: var(--color-blue);
	--editor-accent-soft: var(--background-blue);
	--editor-surface: var(--background-card);
	--editor-field: var(--input-background);
	--editor-line: var(--border-card);
}

.article-editor .article-workspace { display: grid; gap: 20px; width: 100%; min-width: 0; max-width: 100%; }
.article-editor .article-compose { width: 100%; min-width: 0; max-width: 100%; overflow: clip; }
.article-editor .article-compose > *,
.article-editor .publication-settings > *,
.article-editor .document-heading > *,
.article-editor .blocks-editor,
.article-editor .ablock { min-width: 0; max-width: 100%; }
.article-editor .card > .header.title.editor-hero { margin-bottom: 0; padding: 18px 20px; font-size: var(--font-size-default); }

.article-editor .editor-hero {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: linear-gradient(135deg, var(--editor-accent-soft), transparent 68%);
	border-bottom: 1px solid var(--editor-line);
}

.article-editor .editor-hero-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--editor-accent); }
.article-editor .editor-hero-icon svg { width: 18px; height: 18px; color: white; }
.article-editor .editor-hero-copy { min-width: 0; flex: 1; }
.article-editor .editor-title { color: var(--color-text-important); font-size: var(--font-size-large); font-weight: var(--font-weight-bold); line-height: 1.25; }
.article-editor .editor-subtitle { margin-top: 2px; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-smaller); font-weight: var(--font-weight-regular); text-overflow: ellipsis; white-space: nowrap; }

.article-editor .publication-settings { margin: 20px; padding: 18px; border: 1px solid var(--editor-line); border-radius: 12px; background: color-mix(in srgb, var(--editor-field) 56%, transparent); }
.article-editor .settings-heading, .article-editor .document-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.article-editor .settings-heading { margin-bottom: 16px; }
.article-editor .settings-title { color: var(--color-text-important); font-weight: var(--font-weight-bold); }
.article-editor .field-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.article-editor .field-label { color: var(--color-text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); }
.article-editor .select-container { display: block; padding: 0; }
.article-editor .meta { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; padding: 16px 0 0; }
.article-editor .alias-control { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--input-border); border-radius: 8px; background: var(--editor-field); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.article-editor .alias-control:focus-within { border-color: color-mix(in srgb, var(--editor-accent) 42%, var(--input-border)); box-shadow: 0 0 0 3px var(--editor-accent-soft); background: var(--input-background-focus); }
.article-editor .alias-prefix { display: grid; place-items: center; padding-left: 12px; color: var(--color-text-secondary); }
.article-editor input[type="text"] { width: 100%; min-width: 0; padding: .72em .85em; border: 1px solid var(--input-border); border-radius: 8px; background: var(--editor-field); color: var(--color-text-default); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.article-editor .alias-control input { border: 0; border-radius: 0; background: transparent; }
.article-editor input[type="text"]:focus { outline: none; border-color: color-mix(in srgb, var(--editor-accent) 42%, var(--input-border)); box-shadow: 0 0 0 3px var(--editor-accent-soft); background: var(--input-background-focus); }
.article-editor .alias-control input:focus { box-shadow: none; background: transparent; }
.article-editor .verified-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 43px; padding: 8px 10px; border: 1px solid var(--editor-line); border-radius: 9px; cursor: pointer; user-select: none; }
.article-editor .verified-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.article-editor .toggle-control { position: relative; width: 36px; height: 21px; flex: none; border-radius: 999px; background: var(--color-icon-tertiary); transition: background-color 150ms ease; }
.article-editor .toggle-control::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform 150ms ease; }
.article-editor .verified-toggle input:checked + .toggle-control { background: var(--editor-accent); }
.article-editor .verified-toggle input:checked + .toggle-control::after { transform: translateX(15px); }
.article-editor .verified-toggle input:focus-visible + .toggle-control { box-shadow: 0 0 0 3px var(--editor-accent-soft); }
.article-editor .verified-toggle strong { display: block; white-space: nowrap; }
.article-editor .verified-toggle strong { color: var(--color-text-default); font-size: var(--font-size-small); }

.article-editor .document-heading { padding: 2px 20px 10px; }
.article-editor .editor-stats { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); white-space: nowrap; }
.article-editor .editor-stats i { width: 3px; height: 3px; border-radius: 50%; background: var(--color-icon-tertiary); }
.article-editor .blocks-editor { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 14px; }
.article-editor .ablock { position: relative; display: flex; align-items: stretch; gap: 8px; padding: 9px 8px; border: 1px solid transparent; border-radius: 11px; background: transparent; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.article-editor .ablock:hover, .article-editor .ablock:focus-within { border-color: var(--editor-line); background: color-mix(in srgb, var(--editor-field) 62%, transparent); box-shadow: 0 5px 18px rgb(0 0 0 / 4%); }
.article-editor .ablock.invalid { border-color: color-mix(in srgb, var(--color-red) 65%, transparent); background: color-mix(in srgb, var(--color-red) 6%, transparent); animation: article-shake 240ms ease; }
@keyframes article-shake { 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
.article-editor .ablock > .side, .article-editor .ablock > .tools { display: flex; flex-direction: column; flex-shrink: 0; gap: 3px; padding-top: 2px; }
.article-editor .ablock .tool { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--color-icon-secondary); opacity: .38; cursor: pointer; transition: opacity 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease; }
.article-editor .ablock:hover .tool, .article-editor .ablock:focus-within .tool { opacity: 1; }
.article-editor .ablock .tool:hover { color: var(--editor-accent); background: var(--editor-accent-soft); }
.article-editor .ablock .tool:active { transform: scale(.92); }
.article-editor .ablock .tool.remove:hover, .article-editor .ablock .tool.remove-row:hover { color: var(--color-red); background: color-mix(in srgb, var(--color-red) 10%, transparent); }
.article-editor .ablock .tool.handle { cursor: grab; }
.article-editor .ablock .tool.handle:active { cursor: grabbing; }
.article-editor .ablock .tool svg { width: 16px; height: 16px; }
.article-editor .ablock > .main { flex: 1 1 auto; min-width: 0; }
.article-editor .ablock > .main > .label { margin: 0 0 5px 2px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); font-weight: var(--font-weight-medium); letter-spacing: .02em; user-select: none; }
.article-editor .ablock-ghost { opacity: .35; background: var(--editor-accent-soft); }
.article-editor .atext { display: block; width: 100%; min-height: 2em; padding: .52em .6em; border: 1px solid transparent; border-radius: 7px; color: var(--color-text-default); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.article-editor .atext:hover { cursor: text; }
.article-editor .atext:focus { outline: none; border-color: color-mix(in srgb, var(--editor-accent) 32%, transparent); background: var(--input-background-focus); box-shadow: 0 0 0 3px var(--editor-accent-soft); }
.article-editor .atext:empty::before { content: attr(data-placeholder); color: var(--color-text-secondary); opacity: .72; }
.article-editor .atext.as-title { padding-top: .3em; font-size: 1.8em; font-weight: var(--font-weight-bold); line-height: 1.25; letter-spacing: -.02em; }
.article-editor .atext.as-heading { font-size: 1.35em; font-weight: var(--font-weight-bold); }
.article-editor .atext.as-subheading { font-size: 1.12em; font-weight: var(--font-weight-medium); }
.article-editor .atext.as-incut, .article-editor .atext.as-alert { padding: 1em; border-radius: 9px; background: var(--color-post-inner-bg); }
.article-editor .atext.as-incut { border-left: 3px solid var(--editor-accent); }
.article-editor .atext.as-alert { background: var(--post-alert-background); }
.article-editor .ablock[data-type="delimiter"] > .main { padding: .7em 0; color: var(--color-text-secondary); text-align: center; letter-spacing: .4em; user-select: none; }
.article-editor .alist-item { display: flex; align-items: flex-start; gap: 6px; }
.article-editor .alist-item::before { content: "•"; padding-top: .45em; color: var(--editor-accent); font-size: 1.25em; line-height: 1; }
.article-editor .alist-item > .atext { flex: 1 1 auto; }
.article-editor .row-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 7px; border-radius: 6px; color: var(--editor-accent); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; user-select: none; }
.article-editor .row-add:hover { background: var(--editor-accent-soft); }
.article-editor .row-add svg { width: 14px; height: 14px; }
.article-editor .fields { display: grid; gap: 8px; margin-top: 8px; }
.article-editor .agrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 8px; }
.article-editor .agrid > .item { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 8px; cursor: move; }
.article-editor .agrid > .item > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-editor .agrid > .item > .delete { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(0 0 0 / 42%); cursor: pointer; transition: background-color 150ms ease, transform 150ms ease; }
.article-editor .agrid > .item > .delete:hover { background: rgb(0 0 0 / 68%); transform: scale(1.05); }
.article-editor .agrid > .item > .delete > svg { width: 15px; height: 15px; color: white; }
.article-editor .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 22px; border: 2px dashed var(--color-icon-mute); border-radius: 10px; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.article-editor .dropzone:hover { border-color: var(--editor-accent); background: var(--editor-accent-soft); color: var(--editor-accent); }
.article-editor .dropzone svg { height: 30px; }
.article-editor .thumb-preview { width: 44px; height: 44px; flex-shrink: 0; border: 2px solid var(--editor-line); border-radius: 50%; object-fit: cover; }
.article-editor .with-thumb { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.article-editor .with-thumb > input,
.article-editor .with-thumb > .fields { min-width: 0; }
.article-editor .quote-image-upload { display: inline-flex; align-items: center; gap: 7px; margin: 9px 0 0 54px; padding: 7px 10px; border: 1px solid var(--editor-line); border-radius: 7px; background: var(--editor-field); color: var(--color-text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.article-editor .quote-image-upload:hover { border-color: var(--editor-accent); background: var(--editor-accent-soft); color: var(--editor-accent); }
.article-editor .quote-image-upload svg { width: 15px; height: 15px; color: currentColor; }

.article-editor .add-block { display: flex; align-items: center; justify-content: center; gap: 11px; width: calc(100% - 40px); margin: 0 20px 20px; padding: 13px; border: 1px dashed color-mix(in srgb, var(--editor-accent) 38%, var(--editor-line)); border-radius: 10px; background: transparent; color: var(--color-text-secondary); cursor: pointer; user-select: none; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.article-editor .add-block:hover { border-color: var(--editor-accent); background: var(--editor-accent-soft); color: var(--editor-accent); }
.article-editor .add-block:active { transform: scale(.99); }
.article-editor .add-block-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--editor-accent-soft); }
.article-editor .add-block-icon svg { width: 16px; height: 16px; color: var(--editor-accent); }
.article-editor .add-block strong, .article-editor .add-block small { display: block; text-align: left; }
.article-editor .add-block strong { color: inherit; font-size: var(--font-size-small); }
.article-editor .add-block small { margin-top: 1px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); }
.article-blocks-menu { position: fixed; z-index: 1200; display: none; width: min(360px, calc(100vw - 20px)); max-height: min(520px, calc(100vh - 20px)); overflow-y: auto; padding: 7px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--input-background); box-shadow: 0 16px 42px rgb(0 0 0 / 24%); }
.article-blocks-menu.visible { display: block; animation: article-menu-in 120ms ease-out; }
@keyframes article-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.article-blocks-menu .menu-heading { padding: 8px 9px 9px; border-bottom: 1px solid var(--border-card); }
.article-blocks-menu .menu-heading strong, .article-blocks-menu .menu-heading small { display: block; }
.article-blocks-menu .menu-heading strong { color: var(--color-text-important); }
.article-blocks-menu .menu-heading small { margin-top: 2px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); }
.article-blocks-menu .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding-top: 6px; }
.article-blocks-menu .item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border-radius: 8px; color: var(--color-text-default); cursor: pointer; }
.article-blocks-menu .item:hover { background: var(--background-blue); color: var(--color-blue); }
.article-blocks-menu .item > svg { width: 17px; height: 17px; flex: none; color: var(--color-icon-secondary); }
.article-blocks-menu .item:hover > svg { color: var(--color-blue); }
.article-blocks-menu .item > span { overflow: hidden; font-size: var(--font-size-small); text-overflow: ellipsis; white-space: nowrap; }
.article-format { position: absolute; z-index: 1300; display: none; align-items: center; gap: 2px; max-width: calc(100vw - 16px); padding: 5px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--input-background); box-shadow: 0 10px 28px rgb(0 0 0 / 26%); }
.article-format.visible { display: flex; }
.article-format .button { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; color: var(--color-icon-secondary); cursor: pointer; }
.article-format .button:hover { background: var(--background-blue); color: var(--color-blue); }
.article-format .button svg { width: 16px; height: 16px; }
.article-format .divider { width: 1px; height: 18px; margin: 0 2px; background: var(--border-card); }
.article-format input { width: 220px; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 7px; background: var(--input-background-focus); color: var(--color-text-default); }
.article-format input:focus { outline: none; }
.article-format .link-row { display: none; align-items: center; gap: 4px; }
.article-format .link-row input { min-width: 0; }
.article-format.link-mode .main-row { display: none !important; }
.article-format.link-mode .link-row { display: flex; }

.article-editor .card > .footer.editor-actions { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--editor-line); border-radius: 0 0 10px 10px; background: var(--editor-surface); box-shadow: 0 -8px 22px rgb(0 0 0 / 4%); }
.article-editor .footer-note { display: flex; align-items: center; gap: 7px; margin-right: auto; color: var(--color-text-secondary); font-size: var(--font-size-smaller); }
.article-editor .footer-note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-orange); }
.article-editor .card > .footer > .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 0; border-radius: 8px; font-weight: var(--font-weight-medium); cursor: pointer; user-select: none; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.article-editor .card > .footer > .button:active { transform: translateY(1px); }
.article-editor .card > .footer > .button svg { width: 16px; height: 16px; color: currentColor; }
.article-editor .card > .footer > .button.preview { border: 1px solid var(--editor-line); background: var(--editor-field); color: var(--color-text-secondary); }
.article-editor .card > .footer > .button.preview:hover { border-color: var(--editor-accent); color: var(--editor-accent); }
.article-editor .card > .footer > .button.preview kbd { margin-left: 2px; padding: 1px 5px; border: 0; border-radius: 4px; background: var(--background-default); color: inherit; font-size: var(--font-size-smaller); }
.article-editor .card > .footer > .button.publish { min-width: 125px; background: var(--button-blue); color: var(--button-colored-text-color); box-shadow: 0 5px 14px rgb(0 105 220 / 18%); }
.article-editor .card > .footer > .button.publish:hover { background: var(--button-blue-hover); }
.article-editor .card > .footer > .button.publish.disabled, .article-editor .card > .footer > .button.publish.disabled:hover { background: var(--button-blue-disabled); box-shadow: none; color: var(--button-colored-disabled-text-color); cursor: default; }
.article-editor .preview-card { display: none; overflow: hidden; }
.article-editor .preview-card.visible { display: block; animation: article-preview-in 200ms ease-out; }
@keyframes article-preview-in { from { opacity: 0; transform: translateY(8px); } }
.article-editor .preview-card > .preview-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; }
.article-editor .preview-card > .header.title.preview-header { margin-bottom: 0; }
.article-editor .preview-header strong, .article-editor .preview-kicker { display: block; }
.article-editor .preview-kicker { margin-bottom: 2px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); font-weight: var(--font-weight-regular); }
.article-editor .preview-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--color-icon-secondary); cursor: pointer; }
.article-editor .preview-close:hover { background: var(--background-default); color: var(--color-text-default); }
.article-editor .preview-close svg { width: 17px; height: 17px; color: currentColor; }

@media only screen and (min-width: 641px) { .article-editor .fields.two { grid-template-columns: 1fr 1fr; } }
@media only screen and (max-width: 640px) {
	.article-editor .card > .header.title.editor-hero { align-items: flex-start; padding: 18px 14px; }
	.article-editor .editor-hero-icon { width: 36px; height: 36px; border-radius: 10px; }
	.article-editor .editor-subtitle { display: none; }
	.article-editor .publication-settings { margin: 14px; padding: 14px; }
	.article-editor .meta { grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
	.article-editor .verified-toggle strong { white-space: normal; }
	.article-editor .document-heading { padding: 4px 14px 10px; }
	.article-editor .editor-stats { display: none; }
	.article-editor .blocks-editor { padding-inline: 5px; }
	.article-editor .ablock { gap: 3px; padding-inline: 3px; }
	.article-editor .ablock > .tools { flex-direction: row; position: absolute; top: -5px; right: 6px; z-index: 2; padding: 2px; border: 1px solid var(--editor-line); border-radius: 8px; background: var(--editor-surface); box-shadow: 0 4px 12px rgb(0 0 0 / 8%); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms ease; }
	.article-editor .ablock:focus-within > .tools, .article-editor .ablock:hover > .tools { opacity: 1; pointer-events: auto; transform: translateY(0); }
	.article-editor .ablock .tool { width: 32px; height: 32px; opacity: .75; }
	.article-editor .agrid { grid-template-columns: repeat(2, 1fr); }
	.article-editor .quote-author { align-items: flex-start; }
	.article-editor .quote-image-upload { margin-left: 0; }
	.article-editor .add-block { width: calc(100% - 28px); margin-inline: 14px; }
	.article-blocks-menu .menu-grid { grid-template-columns: 1fr; }
	.article-editor .card > .footer.editor-actions { padding: 10px 14px; }
	.article-editor .footer-note, .article-editor .button.preview kbd { display: none; }
	.article-editor .card > .footer > .button { flex: 1 1 0; }
	.article-editor .card > .footer > .button.publish { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .article-editor *, .article-blocks-menu, .article-format { scroll-behavior: auto !important; animation: none !important; transition-duration: 0s !important; } }


/* css/pages/download.css */
/* Иконки-картинки размером со строку внутри блочного контента.
   Раньше правило жило инлайном в download.htm и действовало только там;
   в общем бандле его нужно держать в рамках .blocks, иначе оно ужимало
   бы до 1em любую картинку в абзаце — в постах, комментариях и т.д. */
.blocks p > img {
	vertical-align: middle;
	max-width: none;
	width: 1em;
	height: 1em;
	margin: 0 0.25em;
}


/* css/pages/editor.css */
.quick-editor .post-compose { overflow: visible; }
.quick-editor .card > .header.title.compose-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 0; padding: 18px 20px; font-size: var(--font-size-default); background: linear-gradient(135deg, var(--background-blue), transparent 72%); }
.quick-editor .compose-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.quick-editor .compose-heading > span:last-child { min-width: 0; }
.quick-editor .compose-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--color-blue); }
.quick-editor .compose-icon svg { width: 18px; height: 18px; color: white; }
.quick-editor .compose-title, .quick-editor .compose-heading small { display: block; }
.quick-editor .compose-title { color: var(--color-text-important); font-size: var(--font-size-large); line-height: 1.25; }
.quick-editor .compose-heading small { margin-top: 2px; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-smaller); font-weight: var(--font-weight-regular); text-overflow: ellipsis; white-space: nowrap; }
.quick-editor .compose-body { display: grid; gap: 16px; padding: 18px 20px 20px; }
.quick-editor .compose-field { display: flex; flex-direction: column; gap: 7px; }
.quick-editor .select-container { display: block; padding: 0; }

.quick-editor .poster, .quick-editor .sortable { width: 100%; padding: 0; }
.quick-editor .poster.hidden, .quick-editor .sortable.hidden { display: none; }
.quick-editor .poster .dropzone { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; padding: 13px; border: 1px dashed color-mix(in srgb, var(--color-blue) 38%, var(--border-card)); border-radius: 10px; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
.quick-editor .poster .dropzone:hover { border-color: var(--color-blue); background: var(--background-blue); color: var(--color-blue); }
.quick-editor .media-add-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--background-blue); }
.quick-editor .media-add-icon svg { width: 19px; height: 19px; color: var(--color-blue); }
.quick-editor .poster .dropzone strong, .quick-editor .poster .dropzone small { display: block; text-align: left; }
.quick-editor .poster .dropzone strong { color: inherit; font-size: var(--font-size-small); }
.quick-editor .poster .dropzone small { margin-top: 1px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); }
.quick-editor .sortable > .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.quick-editor .sortable > .grid > .item { position: relative; overflow: hidden; width: auto; aspect-ratio: 1; border: 0; border-radius: 9px; cursor: move; }
.quick-editor .sortable > .grid > .item > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.quick-editor .sortable > .grid > .item.upload { padding: 0; }
.quick-editor .sortable > .grid > .item.upload > .dropzone { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 1px dashed var(--color-icon-mute); border-radius: 9px; background: transparent; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.quick-editor .sortable > .grid > .item.upload:hover > .dropzone { border-color: var(--color-blue); background: var(--background-blue); }
.quick-editor .sortable > .grid > .item.upload > .dropzone > svg { width: 25px; height: 25px; color: var(--color-icon-secondary); }
.quick-editor .sortable > .grid > .item.upload:hover > .dropzone > svg { color: var(--color-blue); }
.quick-editor .sortable-img-ghost { opacity: .4; }
.quick-editor .sortable > .grid > .item > .delete { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(0 0 0 / 42%); cursor: pointer; transition: background-color 150ms ease, transform 150ms ease; }
.quick-editor .sortable > .grid > .item > .delete:hover { background: rgb(0 0 0 / 68%); transform: scale(1.05); }
.quick-editor .sortable > .grid > .item > .delete > svg { width: 15px; height: 15px; color: white; }

.quick-editor .text-container { overflow: hidden; padding: 0; border: 1px solid var(--input-border); border-radius: 10px; background: var(--input-background); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.quick-editor .text-container:focus-within { border-color: color-mix(in srgb, var(--color-blue) 42%, var(--input-border)); background: var(--input-background-focus); box-shadow: 0 0 0 3px var(--background-blue); }
.quick-editor .format-toolbar { display: flex; align-items: center; min-height: 42px; padding: 5px 7px; border-bottom: 1px solid var(--input-border); background: color-mix(in srgb, var(--input-background) 74%, var(--background-default)); }
.quick-editor .format-main { display: flex; align-items: center; gap: 2px; }
.quick-editor .format-toolbar button { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--color-icon-secondary); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.quick-editor .format-toolbar button:hover { background: var(--background-default); color: var(--color-text-default); }
.quick-editor .format-toolbar button.active { background: var(--background-blue); color: var(--color-blue); }
.quick-editor .format-toolbar button > svg { width: 16px; height: 16px; color: currentColor; }
.quick-editor .format-divider { width: 1px; height: 18px; margin: 0 3px; background: var(--input-border); }
.quick-editor .format-link { display: none; align-items: center; flex: 1; gap: 5px; }
.quick-editor .format-toolbar.link-mode .format-main { display: none; }
.quick-editor .format-toolbar.link-mode .format-link { display: flex; }
.quick-editor .format-link input { flex: 1; min-width: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: var(--input-background-focus); color: var(--color-text-default); }
.quick-editor .format-link input:focus { outline: none; box-shadow: 0 0 0 2px var(--background-blue); }
.quick-editor .format-link .apply-link { display: block; padding-inline: 10px; background: var(--button-blue); color: var(--button-colored-text-color); font-size: var(--font-size-small); }
.quick-editor .format-link .apply-link:hover { background: var(--button-blue-hover); color: var(--button-colored-text-color); }
.quick-editor .text-counter { margin-left: auto; padding-left: 8px; color: var(--color-text-secondary); font-size: var(--font-size-smaller); white-space: nowrap; }
.quick-editor .text-counter.limit { color: var(--color-red); }
.quick-editor .editor { display: block; overflow: hidden; width: 100%; min-height: 128px; padding: 13px 14px; border: 0; border-radius: 0; background: transparent; color: var(--color-text-default); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.quick-editor .editor:hover { cursor: text; }
.quick-editor .editor:focus { outline: none; background: transparent; border: 0; box-shadow: none; }
.quick-editor .editor:empty::before { content: attr(data-placeholder); color: var(--color-text-secondary); opacity: .75; }
.quick-editor .editor a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-blue) 45%, transparent); text-underline-offset: 2px; }

.quick-editor .card.post-compose > .footer.compose-footer { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--border-card); border-radius: 0 0 8px 8px; background: var(--background-card); box-shadow: 0 -7px 20px rgb(0 0 0 / 4%); }
.quick-editor .card.post-compose > .footer > .publish { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 132px; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--button-blue); color: var(--button-colored-text-color); box-shadow: 0 5px 14px rgb(0 105 220 / 18%); font-weight: var(--font-weight-medium); cursor: pointer; user-select: none; transition: background-color 150ms ease, transform 150ms ease; }
.quick-editor .card.post-compose > .footer > .publish:hover { background: var(--button-blue-hover); }
.quick-editor .card.post-compose > .footer > .publish:active { transform: translateY(1px); }
.quick-editor .card.post-compose > .footer > .publish svg { width: 16px; height: 16px; color: currentColor; }
.quick-editor .card.post-compose > .footer > .publish.disabled, .quick-editor .card.post-compose > .footer > .publish.disabled:hover { background: var(--button-blue-disabled); box-shadow: none; color: var(--button-colored-disabled-text-color); cursor: default; }

@media only screen and (max-width: 640px) {
	.quick-editor .card > .header.title.compose-header { padding: 16px 14px; }
	.quick-editor .compose-heading small { display: none; }
	.quick-editor .compose-body { gap: 14px; padding: 14px; }
	.quick-editor .card.post-compose > .footer.compose-footer { padding-inline: 14px; }
	.quick-editor .sortable > .grid { grid-template-columns: repeat(3, 1fr); }
	.quick-editor .format-toolbar { padding-inline: 5px; }
	.quick-editor .format-toolbar button { min-width: 32px; }
	.quick-editor .text-counter { font-size: var(--font-size-tiny); }
	.quick-editor .editor { min-height: 150px; padding: 12px; }
	.quick-editor .card.post-compose > .footer > .publish { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.quick-editor * { transition-duration: 0s !important; }
}


/* css/pages/messages.css */
body.light {
	--chat-body-background: #edf1f5;
	--chat-message-sent-background: #d8ecfb;
	--chat-message-sent-color: var(--color-text-default);
	--chat-message-received-background: #fff;
	--chat-message-received-color: var(--color-text-default);
	--chat-message-sent-border: rgb(26 117 174 / 10%);
	--chat-message-received-border: rgb(0 0 0 / 7%);
	--chat-message-sent-time-color: rgb(0 0 0 / 58%);
	--chat-message-received-time-color: rgb(0 0 0 / 58%);
	--chat-message-sent-status-svg-color: rgb(0 0 0 / 58%);
	--chat-message-received-status-svg-color: rgb(0 0 0 / 58%);
	--chat-date-divider-color: rgb(0 0 0 / 55%);
	--chat-date-divider-background: rgb(255 255 255 / 88%);
}

body.dark {
	--chat-body-background: #151619;
	--chat-message-sent-background: #2868a8;
	--chat-message-sent-color: #f5f8fb;
	--chat-message-received-background: #2b2d31;
	--chat-message-received-color: #eceef1;
	--chat-message-sent-border: rgb(255 255 255 / 8%);
	--chat-message-received-border: rgb(255 255 255 / 7%);
	--chat-message-sent-time-color: rgb(255 255 255 / 68%);
	--chat-message-received-time-color: rgb(255 255 255 / 62%);
	--chat-message-sent-status-svg-color: rgb(255 255 255 / 68%);
	--chat-message-received-status-svg-color: rgb(255 255 255 / 62%);
	--chat-date-divider-color: rgb(255 255 255 / 68%);
	--chat-date-divider-background: #25272b;
}

.content > .messages {
	min-height: 600px;
	position: relative;
	overflow: hidden;
}

@media only screen and (max-width: 1200px) {
	.content > .messages {
		min-height: 0;
		height: calc(100svh - var(--mobile-navbar-height));
		height: calc(100dvh - var(--mobile-navbar-height));
	}

	.content > .messages.in-chat {
		min-height: 0;
		height: 100svh;
		height: 100dvh;
	}

}

.messages > .card.chats,
.messages > .card.chat {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.messages.skip-animation > .card.chats,
.messages.skip-animation > .card.chat {
	transition: none;
}

.messages > .card.chats {
	transform: translateX(0);
}

.messages > .card.chat {
	transform: translateX(100%);
}

.messages > .card.chats.slide-left {
	transform: translateX(-100%);
}

.messages > .card.chat.slide-left {
	transform: translateX(0);
}

.messages > .card.chats.slide-right {
	transform: translateX(0);
}

.messages > .card.chat.slide-right {
	transform: translateX(100%);
}

.card.chats > .header {
	flex-shrink: 0;
}

/* Индикатор не должен делить высоту с пустым списком чатов: это
   оверлей всей карточки, поэтому он всегда в центре окна. */
.card.chats > .loading-state {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card.chats > .body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.card.chats > .body > .row {
	display: flex;
	user-select: none;
}

.card.chats > .body > .row:hover {
	background-color: rgba(255,255, 255, 2%);
	cursor: pointer;
}

.card.chats > .body > .row > .avatar {
	border-radius: 50%;
	height: 48px;
	width: 48px;
	margin: 12px;
}

.card.chats > .body > .row > .right-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: 1px solid var(--border-card);
	flex-grow: 1;
	overflow: hidden;
}

.card.chats > .body > .row > .right-side > .first-line {
	display: flex;
	align-items: flex-end;
}

.card.chats > .body > .row > .right-side > .first-line > .name {
	font-weight: var(--font-weight-bold);
}

.card.chats > .body > .row > .right-side > .first-line > .status {
	margin-left: auto;
	margin-right: 4px;
}

.card.chats > .body > .row > .right-side > .first-line > .status > svg {
	vertical-align: bottom;
	color: var(--color-blue);
}

.card.chats > .body > .row > .right-side > .first-line > .status > svg:not(.read) {
	height: 1.17em;
}

.card.chats > .body > .row > .right-side > .first-line > .status > svg.read {
	height: 1.2em;
}

.card.chats > .body > .row:not(.sent) > .right-side > .first-line > .status > svg.read,
.card.chats > .body > .row:not(.sent-read) > .right-side > .first-line > .status > svg.read {
	display: none;
}

.card.chats > .body > .row:not(.sent) > .right-side > .first-line > .status > svg:not(.read),
.card.chats > .body > .row.sent-read > .right-side > .first-line > .status > svg:not(.read) {
	display: none;
}	

.card.chats > .body > .row > .right-side > .first-line > .time {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	margin-right: 12px;
}

.card.chats > .body > .row > .right-side > .second-line {
	display: flex;
	align-items: center;
	margin-top: 4px;
}

.card.chats > .body > .row > .right-side > .second-line > .message {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-right: 16px;
}

.card.chats > .body > .row > .right-side > .second-line > .unread {
	font-size: var(--font-size-smaller);
	background-color: var(--button-blue);
	color: var(--button-colored-text-color);

	display: grid;
	justify-items: center;
	border-radius: 9999px;
	min-height: 1.75em;
	min-width: 1.75em;
	padding: 0.25em 0.4em;
	margin-left: auto;
	margin-right: 12px;
}

.card.chats > .body > .row:not(.unread) > .right-side > .second-line > .unread,
.card.chats.slide-left > .body > .row > .right-side > .second-line > .unread {
	visibility: hidden;
}

.card.chats > .body::-webkit-scrollbar {
	width: 8px;
}

.card.chats > .body::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 3%);
	border-radius: 8px;
}

.card.chats > .body::-webkit-scrollbar-track {
	background-color: transparent;
}

	.card.chat > .header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--border-card);
		padding: 0;
		width: 100%;
		user-select: none;
		cursor: pointer;
	}

	.card.chat > .header > .back {
		padding: 16px;
	}

	.card.chat > .header > .back > svg {
		vertical-align: bottom;
		height: 28px;
		width: 28px;
	}

	.card.chat > .header > .back:hover > svg {
		color: var(--color-icon-important);
	}

	.card.chat > .header > .profile {
		display: flex;
		align-items: center;
    	flex-grow: 1;
	}

	.card.chat > .header > .profile > .avatar {
		border-radius: 50%;
		height: 36px;
		width: 36px;
	}

	.card.chat > .header > .profile > .wrapper-for-name-status {
		flex-grow: 1;
		display: flex;
		flex-flow: column;
		margin-left: 12px;
	}

	.card.chat > .header > .profile > .wrapper-for-name-status > .name {
		font-weight: var(--font-weight-bold);
		color: var(--color-text-default);
	}

	.card.chat > .header > .profile > .wrapper-for-name-status > .status {
		font-size: var(--font-size-small);
		color: var(--color-text-secondary);
	}

	.card.chat > .header > .profile > .wrapper-for-name-status > .typing {
		display: flex;
		align-items: center;
		font-size: var(--font-size-small);
		color: var(--color-blue);
	}

	.card.chat > .header > .profile > .wrapper-for-name-status > .typing > svg {
		color: var(--color-blue);
	}

	.card.chat > .header > .profile > .wrapper-for-name-status > .typing > svg {
		margin-right: 4px;
	}

	.card.chat.peer-typing > .header > .profile > .wrapper-for-name-status > .status {
		display: none;
	}

	.card.chat:not(.peer-typing) > .header > .profile > .wrapper-for-name-status > .typing {
		display: none;
	}

	.card.chat > .header > .more {
		padding: 16px;
	}

	.card.chat > .header > .more > svg {
		vertical-align: bottom;
		color: var(--color-icon-secondary);
		height: 24px;
		width: 24px;
	}

	.card.chat > .header > .more:hover > svg {
		color: var(--color-icon-default);
	}

	.card.chat > .body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow-y: auto;
		padding: 12px;
		height: 100%;
		width: 100%;
		background: var(--chat-body-background);
	}

	.card.chat > .body > .message {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		border-radius: 16px;
		padding: 8px 12px;
		max-width: min(28rem, 80%);
		word-break: break-word;
		white-space: pre-wrap;
		position: relative;
		margin-top: 8px;
		gap: 4px 8px;
	}

	.card.chat > .body > .message.sent + .message.sent,
	.card.chat > .body > .message.received + .message.received {
		margin-top: 4px;
	}

	.card.chat > .body > .message.sent {
		background-color: var(--chat-message-sent-background);
		align-self: flex-end;
	}

	.card.chat > .body > .message.received {
		background-color: var(--chat-message-received-background);
	}

	.card.chat > .body > .message.sent > .text {
		color: var(--chat-message-sent-color);
	}

	.card.chat > .body > .message.received > .text {
		color: var(--chat-message-received-color);
	}

	.card.chat > .body > .message > .status {
		display: inline-flex;
		align-items: center;
		margin-left: auto;
		user-select: none;
		gap: 2px;
	}

	.card.chat > .body > .message > .status > .time {
		font-size: var(--font-size-tiny);
		white-space: nowrap;
	}

	.card.chat > .body > .message.sent > .status > .time {
		color: var(--chat-message-sent-time-color);
	}

	.card.chat > .body > .message.received > .status > .time {
		color: var(--chat-message-received-time-color);
	}

	.card.chat > .body > .message:not(.sent) > .status > .read,
	.card.chat > .body > .message:not(.sent) > .status > .unread {
		height: 1em;
	}

	.card.chat > .body > .message.sent > .status > .read,
	.card.chat > .body > .message.sent > .status > .unread {
		color: var(--chat-message-sent-status-svg-color);
	}

	.card.chat > .body > .message.received > .status > .read,
	.card.chat > .body > .message.received > .status > .unread {
		color: var(--chat-message-received-status-svg-color);
	}

	.card.chat > .body > .message:not(.sent) > .status > .read,
	.card.chat > .body > .message:not(.sent) > .status > .unread,
	.card.chat > .body > .message:not(.read) > .status > .read,
	.card.chat > .body > .message.read > .status > .unread {
		display: none;
	}

	.card.chat > .body > .date-divider {
		display: flex;
		align-items: center;
		color: var(--chat-date-divider-color);
		font-size: var(--font-size-smaller);
		font-weight: var(--font-weight-medium);
		margin-top: 8px;
		width: 100%;
	}

	.card.chat > .body > .date-divider::before,
	.card.chat > .body > .date-divider::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--chat-date-divider-background);
	}

	.card.chat > .body > .date-divider::before {
		margin-right: 8px;
	}

	.card.chat > .body > .date-divider::after {
		margin-left: 8px;
	}

	.card.chat > .compose {
		position: relative;
		margin-top: auto;
		width: 100%;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-top: 1px solid var(--input-border);
		background-color: var(--input-background);

		display: flex;
		align-items: center;
	}

	.card.chat > .compose > textarea {
		display: block;
		overflow: hidden;
		resize: none;
		width: 100%;
		border-radius: 4px;
		padding-left: 0.425em;
		padding-right: 0.75em;
		padding-bottom: 0.75em;
		padding-top: 0.75em;
		color: var(--color-text-default);
		background-color: transparent;
		border-color: transparent;
	}

	.card.chat > .compose > .emotes {
		padding-top: 0.75em;
		padding-bottom: 0.75em;
		padding-right: 0.425em;
		padding-left: 0.85em;
		cursor: pointer;
	}

	.card.chat > .compose > .emotes > svg {
		vertical-align: bottom;
		color: var(--color-icon-secondary);
		height: 1.5em;
		width: 1.5em;
	}

	.card.chat > .compose > .emotes:hover > svg {
		color: var(--color-icon-default);
	}

	.card.chat > .emote-picker {
		display: none;
		position: absolute;
		z-index: 3;
		bottom: 52px;
		left: 8px;
		width: min(360px, calc(100% - 16px));
		border: 1px solid var(--input-border);
		border-radius: 8px;
		background: var(--background-card);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 35%);
		overflow: hidden;
		box-sizing: border-box;
	}

	.card.chat > .emote-picker.visible {
		display: block;
	}

	/* Общие правила .emote-picker убраны отсюда: они слово в слово
	   повторяли css/components/145-emote-picker.css. Здесь остаётся
	   только то, что относится к панели именно в окне чата. */

	.card.chat > .compose > .attach {
		padding-top: 0.75em;
		padding-bottom: 0.75em;
		padding-right: 0.85em;
		padding-left: 0.85em;
		cursor: pointer;

		transition: opacity 350ms ease;
		visibility: visible;
		opacity: 1;
	}

	.card.chat > .compose > .attach > svg {
		vertical-align: bottom;
		color: var(--color-icon-secondary);
		height: 1.5em;
		width: 1.5em;
	}

	.card.chat > .compose > .attach:hover > svg {
		color: var(--color-icon-default);
	}

	.card.chat > .compose > .send {
		padding-top: 0.75em;
		padding-bottom: 0.75em;
		padding-right: 0.85em;
		padding-left: 0.85em;
		cursor: pointer;

		transition: opacity 350ms ease;
		visibility: visible;
		opacity: 1;
	}

	.card.chat > .compose > .send > svg {
		vertical-align: bottom;
		color: var(--color-blue);
		height: 1.5em;
		width: 1.5em;
	}

	.card.chat > .compose:not(.has-input) > .send {
		visibility: hidden;
		opacity: 0;
		width: 0;
		padding: 0;
		pointer-events: none;
	}

	.card.chat > .body::-webkit-scrollbar {
		width: 8px;
	}

	.card.chat > .body::-webkit-scrollbar-thumb {
		background-color: rgba(255, 255, 255, 3%);
		border-radius: 8px;
	}

	.card.chat > .body::-webkit-scrollbar-track {
		background-color: transparent;
	}

	.card.chat > .attachments-preview {
		display: flex;
		flex: 0 0 auto;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 12px;
		max-width: 100%;
		box-sizing: border-box;
		border-top: 1px solid var(--input-border);
		background-color: var(--input-background);
	}

	.card.chat > .attachments-preview.hidden {
		display: none;
	}

	.card.chat > .attachments-preview > .item {
		position: relative;
		flex: 0 0 auto;
		width: 72px;
		height: 72px;
		border-radius: 8px;
		overflow: hidden;
		background-color: var(--background-default);
		outline: 1px solid var(--input-border);
		outline-offset: -1px;
	}

	.card.chat > .attachments-preview > .item > img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.card.chat > .attachments-preview > .item > .remove {
		display: grid;
		place-items: center;
		position: absolute;
		top: 4px;
		right: 4px;
		width: 22px;
		height: 22px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		color: white;
		background: rgb(0 0 0 / 65%);
		cursor: pointer;
	}

	.card.chat > .attachments-preview > .item > .remove:hover {
		background: var(--badge-background-red);
	}

	.card.chat > .attachments-preview > .item > .remove > svg {
		display: block;
		width: 12px;
		height: 12px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.card.chat > .body > .message > .attachments {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
		margin-bottom: 6px;
	}

	.card.chat > .body > .message > .attachments > img {
		display: block;
		width: 100%;
		max-width: 300px;
		max-height: 300px;
		object-fit: cover;
		border-radius: 8px;
	}

/* Полировка окна личных сообщений */
.messages > .card {
	border: 1px solid var(--border-card);
	box-shadow: 0 12px 36px rgb(0 0 0 / 8%);
}

.card.chats > .chat-search {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0 12px 10px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--input-background);
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.card.chats > .chat-search:focus-within {
	border-color: var(--input-border-focus);
	background: var(--input-background-focus);
	box-shadow: 0 0 0 3px rgb(36 145 235 / 10%);
}

.card.chats > .chat-search > svg {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: var(--color-icon-secondary);
}

.card.chats > .chat-search > input {
	min-width: 0;
	height: 40px;
	flex: 1 1 auto;
	padding: 0 8px;
	border: 0;
	outline: 0;
	color: var(--color-text-default);
	background: transparent;
	font: inherit;
	font-size: var(--font-size-small);
}

.card.chats > .chat-search > input::placeholder {
	color: var(--color-text-secondary);
}

.card.chats > .chat-search > .clear {
	display: none;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	color: var(--color-icon-secondary);
	background: transparent;
	cursor: pointer;
}

.card.chats > .chat-search.has-query > .clear { display: grid; }
.card.chats > .chat-search > .clear:hover { color: var(--color-icon-default); background: var(--background-nav-hover); }
.card.chats > .chat-search > .clear > svg { width: 16px; height: 16px; }

.card.chats > .body > .row {
	position: relative;
	min-height: 72px;
	outline: none;
	transition: background-color 120ms ease;
}

.card.chats > .body > .row[hidden] { display: none; }

.card.chats > .body > .row:hover,
.card.chats > .body > .row:focus-visible {
	background: var(--background-nav-hover);
}

.card.chats > .body > .row:focus-visible::before {
	content: "";
	position: absolute;
	inset: 8px auto 8px 3px;
	width: 3px;
	border-radius: 3px;
	background: var(--button-blue);
}

.card.chats > .body > .row > .avatar {
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px rgb(127 127 127 / 12%);
}

.card.chats > .body > .row > .right-side {
	min-width: 0;
	padding: 10px 0;
}

.card.chats > .body > .row > .right-side > .first-line {
	align-items: center;
	min-width: 0;
}

.card.chats > .body > .row > .right-side > .first-line > .name {
	min-width: 0;
	overflow: hidden;
	color: var(--color-text-important);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.card.chats > .body > .row.unread > .right-side > .second-line > .message {
	color: var(--color-text-default);
	font-weight: var(--font-weight-medium);
}

.card.chats > .empty-state,
.card.chats > .search-empty-state {
	position: absolute;
	inset: 122px 0 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px;
	text-align: center;
	pointer-events: none;
}

.card.chats > .empty-state[style*="block"] { display: flex !important; }
.card.chats > .search-empty-state.visible { display: flex; }

.card.chats > .empty-state > svg,
.card.chats > .search-empty-state > svg {
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	color: var(--color-icon-secondary);
	opacity: 0.65;
}

.card.chats > .empty-state > .text,
.card.chats > .search-empty-state > .text {
	color: var(--color-text-default);
	font-weight: var(--font-weight-medium);
}

.card.chats > .empty-state > .hint,
.card.chats > .search-empty-state > .hint {
	max-width: 280px;
	margin-top: 5px;
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	line-height: 1.45;
}

.card.chat > .header {
	min-height: 64px;
	background: var(--background-card);
}

.card.chat > .header > .back,
.card.chat > .header > .more,
.card.chat > .compose > .emotes,
.card.chat > .compose > .attach,
.card.chat > .compose > .send {
	border: 0;
	background: transparent;
	font: inherit;
}

.card.chat > .header > .back,
.card.chat > .header > .more {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 10px;
	padding: 6px;
	border-radius: 8px;
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease;
}

.card.chat > .header > .back:hover,
.card.chat > .header > .more:hover,
.card.chat > .header > .back:focus-visible,
.card.chat > .header > .more:focus-visible {
	background: var(--background-nav-hover);
	outline: none;
}

.card.chat > .header > .back { margin-right: 4px; }
.card.chat > .header > .more { margin-left: 4px; }
.card.chat > .header > .back > svg { width: 24px; height: 24px; }
.card.chat > .header > .more > svg { width: 20px; height: 20px; }
.card.chat > .header > .profile { min-width: 0; }
.card.chat > .header > .profile > .wrapper-for-name-status { min-width: 0; }
.card.chat > .header > .profile > .wrapper-for-name-status > .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.card.chat > .body {
	position: relative;
	padding: 16px clamp(12px, 3vw, 28px);
	background: var(--chat-body-background);
	scrollbar-color: rgb(127 127 127 / 18%) transparent;
}

.card.chat.history-loading > .body::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px;
	border: 2px solid rgb(127 127 127 / 18%);
	border-top-color: var(--button-blue);
	border-radius: 50%;
	animation: chat-spin 800ms linear infinite;
}

@keyframes chat-spin { to { transform: rotate(360deg); } }

.card.chat > .body > .conversation-start {
	align-self: center;
	margin: auto;
	padding: 28px 24px;
	text-align: center;
}

.card.chat > .body > .conversation-start > .avatar {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}

.card.chat > .body > .conversation-start > .title {
	color: var(--color-text-important);
	font-weight: var(--font-weight-bold);
}

.card.chat > .body > .conversation-start > .hint {
	margin-top: 5px;
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
}

.card.chat > .body > .message {
	border: 1px solid transparent;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
	line-height: 1.42;
}

.card.chat > .body > .message.sent { border-color: var(--chat-message-sent-border); border-bottom-right-radius: 5px; }
.card.chat > .body > .message.received { border-color: var(--chat-message-received-border); border-bottom-left-radius: 5px; }
.card.chat > .body > .message.sent + .message.received,
.card.chat > .body > .message.received + .message.sent { margin-top: 12px; }

.card.chat > .body > .date-divider {
	position: sticky;
	top: 0;
	z-index: 2;
	justify-content: center;
	align-self: center;
	width: auto;
	margin: 14px 0 6px;
	padding: 4px;
	background: transparent;
	pointer-events: none;
}

.card.chat > .body > .date-divider::before,
.card.chat > .body > .date-divider::after { display: none; }

.card.chat > .body > .date-divider {
	color: var(--chat-date-divider-color);
}

.card.chat > .body > .date-divider.covered {
	visibility: hidden;
}

.card.chat > .body > .date-divider > span {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: auto;
	padding: 4px 9px;
	border-radius: 8px;
	background: var(--chat-date-divider-background);
	box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.card.chat > .compose {
	display: block;
	min-height: 64px;
	padding: 8px 12px;
	border-top-color: var(--border-card);
	background: var(--background-card);
}

.card.chat > .compose > textarea {
	min-height: 48px;
	max-height: 112px;
	padding: 12px 84px 12px 44px;
	border: 1px solid var(--input-border);
	border-radius: 10px;
	line-height: 22px;
	background: var(--input-background);
	transition: height 80ms ease;
}

.card.chat > .compose > textarea:focus {
	border-color: var(--input-border-focus);
	background: var(--input-background-focus);
}

.card.chat > .compose > .emotes,
.card.chat > .compose > .attach,
.card.chat > .compose > .send {
	display: grid;
	place-items: center;
	position: absolute;
	bottom: 16px;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease;
}

.card.chat > .compose > .emotes > svg,
.card.chat > .compose > .attach > svg,
.card.chat > .compose > .send > svg {
	width: 18px;
	height: 18px;
}

.card.chat > .compose > .emotes { left: 20px; }
.card.chat > .compose > .attach { right: 56px; }
.card.chat > .compose > .send { right: 20px; }
.card.chat > .compose:not(.has-input) > .attach { right: 20px; }

.card.chat > .compose > .emotes:hover,
.card.chat > .compose > .attach:hover { background: var(--background-default); }

.card.chat > .compose > .send { background: var(--background-blue); }
.card.chat > .compose > .send:hover { background: var(--background-blue-hover); }
.card.chat > .compose.sending > .send { cursor: wait; opacity: 0.55; }

.card.chat > .attachments-preview {
	overflow-x: auto;
	flex-wrap: nowrap;
	padding: 10px 12px;
	background: var(--background-card);
}

.card.chat > .body > .message:has(> .attachments) {
	width: min(330px, 78%);
	padding: 5px;
}

.card.chat > .body > .message > .attachments {
	width: 100%;
	margin: 0 0 5px;
}

.card.chat > .body > .message > .attachments.count-1 {
	grid-template-columns: minmax(0, 1fr);
}

.card.chat > .body > .message > .attachments.count-1 > img {
	width: 100%;
	height: auto;
	max-width: none;
	max-height: 360px;
	object-fit: contain;
}

.card.chat > .body > .message > .attachments.count-2 > img,
.card.chat > .body > .message > .attachments.count-3 > img,
.card.chat > .body > .message > .attachments.count-4 > img {
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.card.chat > .body > .message > .attachments.count-3 > img:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 2 / 1;
}

.card.chat > .body > .message > .attachments + .text:not(:empty) { padding: 3px 7px 0; }
.card.chat > .body > .message > .attachments ~ .status { padding: 0 7px 3px; }

@media only screen and (max-width: 1200px) {
	.messages > .card { border: 0; border-radius: 0; box-shadow: none; }
	.card.chats > .chat-search > input { font-size: 16px; }
	.card.chat > .header { padding-top: env(safe-area-inset-top); }
	.card.chat > .compose { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
	.card.chat > .compose > .emotes,
	.card.chat > .compose > .attach,
	.card.chat > .compose > .send { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 8px); }
}

@media only screen and (max-width: 520px) {
	.card.chats > .body > .row > .avatar { width: 46px; height: 46px; margin: 11px 10px 11px 12px; }
	.card.chat > .body { padding-inline: 8px; }
	.card.chat > .body > .message { max-width: 87%; }
	.card.chat > .compose > .emotes { display: none; }
	.card.chat > .compose > textarea { padding-left: 12px; }
	.card.chat > .header > .back, .card.chat > .header > .more { margin-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.messages > .card.chats,
	.messages > .card.chat { transition: none; }
	.card.chat.history-loading > .body::after { animation-duration: 1.5s; }
}


/* css/pages/notifications.css */
/* Индикатор — оверлей всей карточки, чтобы не делить высоту
   со скрытым пустым состоянием и всегда быть по центру. */
.card.notifications > .loading-state {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card.notifications {
	position: relative;
}


/* css/pages/profile.css */
	.card.profile {
		position: relative;

		/* Свой стекинг-контекст: у аватара z-index: 4, чтобы лежать поверх
		   обложки в редакторе. Без изоляции этот z-index уходил на корневой
		   уровень (родители — z-index: auto) и аватар вылезал поверх
		   мобильного сайдбара (z-index: 2) и панели. isolate держит его
		   внутри карточки — над обложкой, но под оверлеями страницы. */
		isolation: isolate;
	}

	.card.profile .header {
		min-height: 90px;
		position: relative;
		align-items: flex-start;
		padding: 16px 20px 16px 20px;
	}

	.cover {
		aspect-ratio: 16 / 5;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background: var(--profile-cover-background);
		position: relative;
		overflow: hidden;
	}

	.cover > img.cover-image {
		position: absolute;
		max-width: none;
		user-select: none;
		-webkit-user-drag: none;
	}

	.cover .upload-button {
		display: inline-flex;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: var(--font-size-small);
		font-weight: var(--font-weight-bold);
		background: rgba(0 0 0 / 35%);
		color: hsl(0, 0%, 95%);
		border-radius: 4px;
		padding: 6px 8px;
		cursor: pointer;
		user-select: none;
	}

	.cover .upload-button:hover {
		background: rgba(0 0 0 / 40%);
	}

	.cover .upload-button svg {
		width: 16px;
		height: 16px;
		margin-right: 4px;
		color: hsl(0, 0%, 95%);
	}

	.cover .cropper {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 3;
	}

	.cover .cropper .editor-stage {
		position: absolute;
		inset: 0;
		cursor: grab;
		touch-action: none;
	}

	.cover .cropper .editor-stage:active {
		cursor: grabbing;
	}

	.cover .cropper .editor-stage .cr-boundary {
		margin: 0;
	}

	.cover .cropper .editor-stage .cr-viewport {
		box-shadow: none;
		border: 0;
	}

	.cover .cropper .editor-actions {
		position: absolute;
		bottom: 8px;
		right: 8px;
		z-index: 4;
		display: flex;
		gap: 6px;
		pointer-events: auto;
	}

	.cover .cropper .save-button,
	.cover .cropper .cancel-button {
		display: inline-flex;
		align-items: center;
		border: 0;
		font-size: var(--font-size-small);
		font-weight: var(--font-weight-medium);
		background: rgba(0 0 0 / 35%);
		color: hsl(0, 0%, 95%);
		border-radius: 4px;
		padding: 6px 8px;
		cursor: pointer;
		user-select: none;
	}

	.cover .cropper .save-button:hover,
	.cover .cropper .cancel-button:hover {
		background: rgba(0 0 0 / 40%);
	}

	.cover .cropper .save-button:disabled,
	.cover .cropper .cancel-button:disabled {
		opacity: .55;
		cursor: default;
	}

	.cover .cropper button svg {
		width: 16px;
		height: 16px;
		margin-right: 4px;
		color: hsl(0, 0%, 95%);
	}

	.cover .cropper .cancel-button svg {
		margin-right: 0;
	}

	.cover.cover-uploading .upload-button,
	.cover.cover-uploading .more-button {
		pointer-events: none;
		opacity: .55;
	}

	.card.profile .avatar {
		position: absolute;
		width: 150px;
		height: 150px;
		border-radius: 50%;
		border: 3px solid var(--background-card);
		top: -76.5px; /* 150px size + 3px border / 2 */
		box-sizing: unset;
		cursor: pointer;
		/* Аватар всегда лежит поверх обложки, в том числе во время её перемещения:
		   редактор должен показывать фактический итоговый кадр профиля. */
		z-index: 4;
	}

	.card.profile .avatar > img {
		overflow: hidden;
	}

	.card.profile:not(.owner) .avatar.placeholder {
		pointer-events: none;
		cursor: default;
	}

	.card.profile .post-avatar {
		height: 100%;
		margin-left: 162px;
		margin-top: 4px;
	}

	.card.profile .name {
		font-size: var(--font-size-huge);
		font-weight: var(--font-weight-bold);
	}

	.card.profile .signature {
		margin-top: 4px;
		color: var(--color-text-secondary);
	}

	.cover .more-button {
		position: absolute;
		right: 8px;
		top: 8px;
		width: 24px;
		height: 30px;
		background: rgba(0 0 0 / 35%);
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.cover .more-button svg {
		fill: hsl(0, 0%, 80%);
		height: 20px;
		width: 20px;
	}

	.cover .more-button:hover svg {
		fill: hsl(0, 0%, 90%);
	}

	@media only screen and (max-width: 1200px) {
		.cover .more-button {
			width: 40px;
			height: 40px;
		}

		.cover .more-button svg {
			height: 28px;
			width: 28px;
		}
	}

	.card.avatar-cropper .header {
		display: flex;
		justify-content: space-between;
	}

	.card.avatar-cropper .cropper {
		border-top: 1px solid var(--settings-section-border);
		border-bottom: 1px solid var(--settings-section-border);
	}

	.card.avatar-cropper .wrapper-for-button {
		width: 100%;
		display: flex;
    	justify-content: center;
	}

	.card.avatar-cropper .save-button {
		border: 0;
		background-color: var(--button-blue);
		color: var(--button-colored-text-color);
		font-weight: var(--font-weight-medium);
		border-radius: 16px;
		display: inline-flex;
		padding: 8px 16px;
		margin: 20px 0;
		cursor: pointer;
		user-select: none;
	}

	.card.avatar-cropper .save-button:hover {
		background-color: var(--button-blue-hover);
	}

	.card.avatar-cropper button:disabled {
		opacity: .55;
		cursor: default;
	}

	.card.avatar-cropper .close-button {
		border: 0;
		background: none;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.card.avatar-cropper .close-button svg {
		color: var(--color-icon-tertiary);
		width: 18px;
		height: 18px;
	}

	.card.avatar-cropper .close-button:hover svg {
		color: var(--color-icon-default);
	}

	/* Chat */
	.cover .chat-button {
		position: absolute;
		right: 8px;
		bottom: 8px;
		background: rgba(0 0 0 / 35%);
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		font-size: var(--font-size-small);
		padding: 6px 12px;
		user-select: none;
		backdrop-filter: blur(3px);
	}

	.cover .chat-button svg {
		margin-right: 4px;
		height: 1.2em;
	}

	.cover .chat-button span,
	.cover .chat-button svg {
		color: hsl(0, 0%, 95%);
	}

	.cover .chat-button:hover span,
	.cover .chat-button:hover svg {
		color: hsl(0, 0%, 100%);
	}

	/* Лента активности */
	.card.activity > .header.title {
		margin: 0;
	}

	.card.activity > .loading-state {
		color: var(--color-text-secondary);
		font-size: var(--font-size-small);
		padding: 16px 20px;
	}

	.card.activity > .user-online-state,
	.card.activity > .steam-game-state {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 8px 20px;
		border-top: 1px solid var(--border-card);
		color: inherit;
	}

	.card.activity > .user-online-state > .icon {
		display: grid;
		place-items: center;
		height: 32px;
		width: 32px;
		flex-shrink: 0;
	}

	.card.activity > .user-online-state .dot {
		height: 10px;
		width: 10px;
		border-radius: 50%;
		background-color: var(--color-text-secondary);
	}

	.card.activity > .user-online-state.online .dot {
		background-color: #32d583;
		box-shadow: 0 0 0 3px rgba(50, 213, 131, 14%);
	}

	.card.activity > .steam-game-state > .icon {
		color: #66c0f4;
	}

	.card.activity > .user-online-state > .right-side {
		min-width: 0;
		flex-grow: 1;
	}

	.card.activity > .user-online-state .action {
		font-size: var(--font-size-small);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-default);
	}

	.card.activity > .user-online-state .text {
		font-size: var(--font-size-small);
		color: var(--color-text-secondary);
	}

	.card.activity > .body > .day-title {
		color: var(--color-text-secondary);
		font-size: var(--font-size-smaller);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding: 14px 20px 6px 20px;
		border-top: 1px solid var(--border-card);
	}

	.card.activity > .body > .day-title:first-child {
		border-top: none;
	}

	.card.activity > .body > .items > .item {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 8px 20px;
		color: inherit;
	}

	.card.activity > .body > .items > .item:hover {
		background-color: rgba(255, 255, 255, 2%);
	}

	.card.activity .item > .icon {
		display: grid;
		place-items: center;
		height: 32px;
		width: 32px;
		flex-shrink: 0;
		color: var(--color-text-secondary);
	}

	.card.activity .item > .icon svg {
		height: 18px;
		width: 18px;
	}

	/* У реакций значок заменён самим эмоутом — ему нужен полный размер */
	.card.activity .item > .icon.reaction img {
		height: 28px;
		width: 28px;
	}

	.card.activity .item > .right-side {
		min-width: 0;
		flex-grow: 1;
	}

	.card.activity .item.single-line > .right-side {
		display: flex;
		align-items: center;
		min-height: 32px;
	}

	.card.activity .item .first-line {
		display: flex;
		align-items: baseline;
		gap: 8px;
	}

	.card.activity .item .action {
		font-size: var(--font-size-small);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		min-width: 0;
	}

	/* Заголовок записи или ник, к которому относится действие */
	.card.activity .item .action > .target {
		color: var(--color-text-important);
		font-weight: var(--font-weight-medium);
	}

	.card.activity .item .time {
		font-size: var(--font-size-smaller);
		color: var(--color-text-secondary);
		margin-left: auto;
		white-space: nowrap;
	}

	.card.activity .item .text {
		font-size: var(--font-size-small);
		color: var(--color-text-secondary);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.card.activity .item .text:empty {
		display: none;
	}

	.profile-statuses { display: none; }
	.profile-statuses.visible { display: block; }
	.profile-statuses .status-publisher { display: none; overflow: visible; }
	.profile-statuses.owner .status-publisher { display: block; }
	.profile-statuses .status-publisher > .header.title { display: flex; align-items: center; margin: 0; }
	.profile-statuses .status-list { display: flex; flex-direction: column; gap: 20px; }
	.profile-statuses .status-entry { margin-bottom: 0; overflow: hidden; }
	.profile-statuses .status-list .status-entry:last-child { margin-bottom: 20px; }
	.profile-statuses.has-previous .status-list .status-entry:last-child { margin-bottom: 10px; }
	.profile-statuses .status-main { display: block; padding: 0; }
	.profile-statuses .status-entry-head { display: flex; align-items: center; min-width: 0; padding: 16px 20px 0; }
	.profile-statuses .status-avatar { flex: none; width: 36px; height: 36px; color: inherit; line-height: 0; }
	.profile-statuses .status-avatar > .avatar { width: 36px; height: 36px; border-radius: 6px; }
	.profile-statuses .status-author-details { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-left: 8px; }
	.profile-statuses .status-author-name { min-width: 0; overflow: hidden; color: inherit; font-weight: var(--font-weight-medium); white-space: nowrap; text-overflow: ellipsis; }
	.profile-statuses .status-date { color: var(--color-text-secondary); font-size: var(--font-size-small); white-space: nowrap; }
	.profile-statuses .status-body { padding: 0; }
	.profile-statuses .status-text { margin-top: 12px; padding: 0 20px; color: var(--color-text-default); line-height: var(--line-height-default); white-space: pre-wrap; overflow-wrap: anywhere; }
	.profile-statuses .status-text:empty { display: none; }
	.profile-statuses .status-edit-form { display: none; margin: 12px 20px 0; }
	.profile-statuses .status-entry.editing .status-text { display: none; }
	.profile-statuses .status-entry.editing .status-edit-form { display: block; }
	.profile-statuses .status-edit-form textarea { display: block; width: 100%; min-height: 54px; padding: 9px 10px; overflow: hidden; resize: none; border: 1px solid var(--input-border); border-radius: 4px; color: var(--color-text-default); background: var(--input-background); font: inherit; line-height: var(--line-height-default); }
	.profile-statuses .status-edit-form textarea:focus { border-color: var(--input-border-focus); background: var(--input-background-focus); }
	.profile-statuses .status-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
	.profile-statuses .status-edit-actions button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 4px; font: inherit; font-size: var(--font-size-small); cursor: pointer; }
	.profile-statuses .status-edit-cancel { color: var(--color-text-secondary); background: transparent; }
	.profile-statuses .status-edit-cancel:hover { color: var(--color-text-default); background: var(--background-nav-hover); }
	.profile-statuses .status-edit-save { color: var(--button-colored-text-color); background: var(--button-blue); }
	.profile-statuses .status-edit-save:hover { background: var(--button-blue-hover); }
	.profile-statuses .status-edit-save:disabled { color: var(--button-colored-disabled-text-color); background: var(--button-blue-disabled); cursor: default; }
	.profile-statuses .status-media { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3px; margin: 10px 20px 0; overflow: hidden; border-radius: 8px; }
	.profile-statuses .status-media:empty { display: none; }
	.profile-statuses .status-media[data-count="1"] { grid-template-columns: 1fr; }
	.profile-statuses .status-media[data-count="2"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.profile-statuses .status-media .media-item { position: relative; min-width: 0; aspect-ratio: 1.25; overflow: hidden; background: var(--background-default); cursor: pointer; }
	.profile-statuses .status-media img { width: 100%; height: 100%; object-fit: cover; }
	.profile-statuses .status-media .more-count { position: absolute; inset: 0; display: grid; place-items: center; color: white; background: rgb(0 0 0 / 52%); font-size: var(--font-size-large); font-weight: var(--font-weight-medium); }
	.profile-statuses .status-reactions { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 7px; padding: 0 20px; }
	.profile-statuses .status-reactions .reactions { flex: 1; display: flex; gap: 4px; height: auto; margin: 0; }
	.profile-statuses .status-body > .reactions-details { margin: 10px 20px 12px; }
	.profile-statuses .status-comments.empty { display: none; }
	.profile-statuses .status-comments .loading-state { padding: 12px; color: var(--color-text-secondary); text-align: center; }
	.profile-statuses .status-comments > .comments:empty { display: none; }
	.profile-statuses .status-compose-host { border-top: 1px solid var(--border-card); }
	.profile-statuses .previous-status { display: none; width: 100%; min-height: 42px; margin: 0 0 20px; border: 1px solid var(--border-card); border-radius: 8px; color: var(--color-text-secondary); background: var(--background-card); font: inherit; cursor: pointer; }
	.profile-statuses .previous-status.visible { display: block; }
	.profile-statuses .previous-status:hover { color: var(--color-text-default); background: var(--background-nav-hover); }
	.profile-statuses .status-composer { position: relative; padding: 10px 12px; }
	.profile-statuses .status-composer textarea { display: block; width: 100%; min-height: 40px; padding: 8px 10px; overflow: hidden; resize: none; border: 1px solid var(--input-border); border-radius: 4px; color: var(--color-text-default); background: var(--input-background); line-height: var(--line-height-default); }
	.profile-statuses .status-composer textarea:focus { border-color: var(--input-border-focus); background: var(--input-background-focus); }
	.profile-statuses .status-media-preview { display: flex; gap: 4px; margin-top: 8px; overflow-x: auto; }
	.profile-statuses .status-media-preview:empty { display: none; }
	.profile-statuses .status-media-preview img { width: 64px; height: 64px; flex: none; border-radius: 4px; object-fit: cover; }
	.profile-statuses .status-composer-footer { display: none; align-items: center; gap: 4px; margin-top: 8px; }
	.profile-statuses .status-publisher.active .status-composer-footer { display: flex; }
	.profile-statuses .status-composer-footer .attach, .profile-statuses .status-composer-footer .emotes { display: grid; place-items: center; width: 36px; height: 32px; border: 0; border-radius: 4px; color: var(--color-icon-userbar); background: transparent; cursor: pointer; }
	.profile-statuses .status-composer-footer .attach:hover, .profile-statuses .status-composer-footer .emotes:hover { color: var(--color-icon-userbar-hover); background: var(--background-nav-hover); }
	.profile-statuses .status-composer-footer .attach svg, .profile-statuses .status-composer-footer .emotes svg { width: 20px; height: 20px; }
	.profile-statuses .status-composer-count { display: none; margin-right: auto; color: var(--color-text-secondary); font-size: var(--font-size-small); }
	.profile-statuses .status-composer-count.visible { display: block; }
	.profile-statuses .status-composer-footer .publish { min-height: 32px; margin-left: auto; padding: 0 12px; border: 1px solid var(--input-border); border-radius: 4px; color: var(--color-text-secondary); background: var(--background-default); font: inherit; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; }
	.profile-statuses .status-composer-footer .publish:hover { border-color: var(--input-border-focus); color: var(--color-text-default); background: var(--background-nav-hover); }
	.profile-statuses .status-composer-footer .publish:disabled { opacity: .55; cursor: default; }
	.profile-statuses .status-emote-picker { bottom: 52px; left: 14px; width: min(360px, calc(100% - 28px)); }

	@media only screen and (max-width:800px) {
		.profile-statuses .status-media { grid-template-columns:1fr; }
		.profile-statuses .status-media .media-item:nth-child(n+2) { display:none; }
	}

	@media (pointer: coarse) {
		.profile-statuses .status-main,
		.profile-statuses .status-main * {
			-webkit-user-select: none;
			user-select: none;
			-webkit-touch-callout: none;
		}
	}

	.screenshot-showcase { display: none; position: relative; margin-bottom: 20px; }
	body.screenshot-viewer-open { overflow: hidden; }
	.screenshot-showcase.visible { display: block; }
	.screenshot-showcase:not(.empty) > .screenshot-empty { display: none; }
	.screenshot-showcase .add-screenshots { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 2; right: 8px; top: 8px; width: 24px; height: 30px; padding: 0; border: 0; border-radius: 4px; background: rgba(0 0 0 / 35%); cursor: pointer; }
	.screenshot-showcase .add-screenshots svg { width: 20px; height: 20px; color: hsl(0, 0%, 80%); }
	.screenshot-showcase .add-screenshots:hover svg { color: hsl(0, 0%, 90%); }
	.screenshot-showcase.empty > .add-screenshots { display: none !important; }
	.screenshot-showcase .screenshots-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.screenshot-showcase .screenshots-grid .item { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; cursor: pointer; background: var(--border-card); }
	.screenshot-showcase .screenshots-grid img { width: 100%; height: 100%; object-fit: cover; }
	.screenshot-showcase.empty .screenshots-grid { display: none; }
	.screenshot-showcase .screenshot-empty { display: flex; align-items: center; min-height: 88px; padding: 14px 16px; }
	.screenshot-showcase .screenshot-empty-visual { display: grid; flex: none; place-items: center; position: relative; width: 44px; height: 44px; margin-right: 14px; border: 1px solid var(--border-card); border-radius: 8px; color: var(--color-icon-secondary); background: var(--background-default); }
	.screenshot-showcase .screenshot-empty-visual > svg { width: 23px; height: 23px; color: currentColor; }
	.screenshot-showcase .screenshot-empty-content { display: flex; flex: 1; align-items: center; min-width: 0; }
	.screenshot-showcase .screenshot-empty-copy { flex: 1; min-width: 0; }
	.screenshot-showcase .screenshot-empty-title { color: var(--color-text-default); font-weight: var(--font-weight-medium); }
	.screenshot-showcase .screenshot-empty-text { margin-top: 3px; color: var(--color-text-secondary); font-size: var(--font-size-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.screenshot-showcase .screenshot-empty-upload { flex: none; min-height: 32px; margin-left: 16px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: 4px; color: var(--color-text-secondary); background: var(--background-default); font-family: inherit; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; }
	.screenshot-showcase .screenshot-empty-upload:hover { border-color: var(--input-border-focus); color: var(--color-text-default); background: var(--background-nav-hover); }

	.screenshot-viewer { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); background: rgba(0,0,0,.94); }
	.screenshot-viewer .splide { margin: 0; min-width: 0; outline: none; }
	.screenshot-viewer .splide__track, .screenshot-viewer .splide__list, .screenshot-viewer .splide__slide { height: 100%; }
	.screenshot-viewer .splide__slide { display: grid; place-items: center; }
	.screenshot-viewer .splide__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
	.screenshot-viewer .social { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; background: var(--background-default); color: var(--color-text-default); box-shadow: -12px 0 32px rgb(0 0 0 / 24%); }
	.screenshot-viewer .social-header { display: flex; align-items: center; min-height: 64px; padding: 10px 10px 10px 14px; background: var(--background-card); border-bottom: 1px solid var(--border-card); }
	.screenshot-viewer .screenshot-author { display: flex; align-items: center; min-width: 0; color: inherit; }
	.screenshot-viewer .screenshot-author .avatar { flex: none; width: 36px; height: 36px; border-radius: 4px; }
	.screenshot-viewer .screenshot-author .details { min-width: 0; margin-left: 10px; }
	.screenshot-viewer .screenshot-author .name { overflow: hidden; color: var(--color-text-default); font-weight: var(--font-weight-medium); white-space: nowrap; text-overflow: ellipsis; }
	.screenshot-viewer .screenshot-author .date { margin-top: 3px; color: var(--color-text-secondary); font-size: var(--font-size-small); }
	.screenshot-viewer .panel-controls { display: flex; align-items: center; gap: 2px; margin-left: auto; }
	.screenshot-viewer .screenshot-position { min-width: 44px; color: var(--color-text-secondary); font-size: var(--font-size-small); text-align: center; }
	.screenshot-viewer .panel-controls button { display: grid; place-items: center; width: 40px; height: 32px; padding: 0; border: 0; border-radius: 4px; color: var(--color-icon-userbar); background: transparent; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
	.screenshot-viewer .panel-controls button:hover { color: var(--color-icon-userbar-hover); background: var(--background-nav-hover); }
	.screenshot-viewer .panel-controls button svg { display: block; width: 19px; height: 19px; }
	.screenshot-viewer .panel-controls .remove:hover { color: var(--color-red); }
	.screenshot-viewer .screenshot-caption { display: none; padding: 10px 14px; background: var(--background-card); border-bottom: 1px solid var(--border-card); }
	.screenshot-viewer .screenshot-caption.visible { display: block; }
	.screenshot-viewer .screenshot-caption-view { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; }
	.screenshot-viewer .screenshot-caption-text { flex: 1; align-self: center; min-width: 0; line-height: var(--line-height-default); white-space: pre-wrap; overflow-wrap: anywhere; }
	.screenshot-viewer .screenshot-caption-text:empty { display: none; }
	.screenshot-viewer .caption-edit { flex: none; min-height: 32px; margin-left: auto; padding: 0 10px; border: 0; border-radius: 4px; color: var(--color-text-secondary); background: transparent; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; }
	.screenshot-viewer .caption-edit:hover, .screenshot-viewer .caption-cancel:hover { color: var(--color-text-default); background: var(--background-nav-hover); }
	.screenshot-viewer .screenshot-caption-form { display: none; }
	.screenshot-viewer .screenshot-caption.editing .screenshot-caption-view { display: none; }
	.screenshot-viewer .screenshot-caption.editing .screenshot-caption-form { display: block; }
	.screenshot-viewer .screenshot-caption textarea { display: block; width: 100%; min-height: 72px; padding: 9px 10px; overflow: hidden; border: 1px solid var(--input-border); border-radius: 4px; color: var(--color-text-default); background: var(--input-background); line-height: var(--line-height-default); resize: none; transition: border-color 150ms ease, background-color 150ms ease; }
	.screenshot-viewer .screenshot-caption textarea:focus { border-color: var(--input-border-focus); background: var(--input-background-focus); }
	.screenshot-viewer .screenshot-caption-footer { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
	.screenshot-viewer .screenshot-caption-count { margin-right: auto; color: var(--color-text-secondary); font-size: var(--font-size-small); }
	.screenshot-viewer .screenshot-caption-footer button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 4px; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; }
	.screenshot-viewer .caption-cancel { color: var(--color-text-secondary); background: transparent; }
	.screenshot-viewer .caption-save { color: var(--button-colored-text-color); background: var(--button-blue); }
	.screenshot-viewer .caption-save:hover { background: var(--button-blue-hover); }
	.screenshot-viewer .caption-save:disabled { color: var(--button-colored-disabled-text-color); background: var(--button-blue-disabled); cursor: default; }
	.screenshot-viewer .screenshot-reactions { position: relative; padding: 10px 14px; background: var(--background-card); border-bottom: 1px solid var(--border-card); }
	.screenshot-viewer .screenshot-reactions-line { display: flex; align-items: center; min-width: 0; min-height: 24px; }
	.screenshot-viewer .screenshot-reactions .reactions { flex: 1; min-width: 0; height: auto; min-height: 24px; margin: 0; overflow: visible; }
	.screenshot-viewer .screenshot-reactions .reaction { pointer-events: auto; cursor: pointer; }
	.screenshot-viewer.own-screenshot .screenshot-reactions .reaction:not(.selected) { pointer-events: none; cursor: default; }
	.screenshot-viewer .screenshot-reactions.is-empty { display: none; }
	.screenshot-viewer .screenshot-reaction-details-host { background: var(--background-card); border-bottom: 1px solid var(--border-card); }
	.screenshot-viewer .screenshot-reaction-details-host:empty { display: none; }
	.screenshot-viewer .screenshot-reaction-details-host .reactions-details { margin: 10px 14px; }
	.screenshot-viewer .screenshot-comments { flex: 1; min-height: 0; overflow-y: auto; padding: 0; background: var(--background-card); }
	.screenshot-viewer .screenshot-comments.discussion > .comments .item { padding: 12px 14px; border-bottom: 1px solid var(--border-card); }
	.screenshot-viewer .screenshot-comments.discussion > .comments > .item:last-child,
	.screenshot-viewer .screenshot-comments.discussion > .comments > .branch:last-child > .replies > .item:last-child { border-bottom: 0; }
	.screenshot-viewer .screenshot-comments .loading-state { padding: 24px 14px; color: var(--color-text-secondary); text-align: center; }
	.screenshot-viewer .screenshot-comments .item.removed > .body > .message { color: var(--color-text-secondary); }
	.screenshot-viewer .screenshot-compose-host.card { flex: none; margin: 0; padding-bottom: 0; border: 0; border-top: 1px solid var(--border-card); border-radius: 0; background: var(--background-card); }
	.screenshot-viewer .screenshot-compose-host .comment { padding: 10px; }
	@media only screen and (max-width: 800px) {
		.screenshot-viewer { display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
		.screenshot-viewer > .splide { height: 58svh; }
		.screenshot-viewer .social { display: block; min-height: 42svh; box-shadow: 0 -10px 28px rgb(0 0 0 / 20%); }
		.screenshot-viewer .screenshot-comments { overflow: visible; min-height: 0; }
		.screenshot-viewer .social-header { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
		.screenshot-viewer .screenshot-author .avatar { width: 32px; height: 32px; }
		.screenshot-showcase { margin-right: 10px; margin-left: 10px; }
		.screenshot-showcase .screenshots-grid { grid-template-columns: 1fr; gap: 0; }
		.screenshot-showcase .screenshots-grid .item:nth-child(n + 2) { display: none; }
		.screenshot-showcase .screenshot-empty { min-height: 80px; padding: 12px 14px; }
		.screenshot-showcase .screenshot-empty-text { display: none; }
		.screenshot-showcase .screenshot-empty-upload { margin-left: 10px; }
	}
	@media only screen and (max-width: 1200px) {
		.screenshot-showcase .add-screenshots { width: 40px; height: 40px; }
		.screenshot-showcase .add-screenshots svg { width: 28px; height: 28px; }
	}
	@media (pointer: coarse) {
		.screenshot-viewer .splide__slide img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
	}

	/* Модерация — видна только администратору на чужом профиле */
	.cover .mod-button {
		display: grid;
		place-items: center;
		position: absolute;
		right: 8px;
		bottom: 48px;
		height: 32px;
		width: 32px;
		border-radius: 9999px;
		background: rgba(0 0 0 / 35%);
		color: hsl(0, 0%, 95%);
		backdrop-filter: blur(3px);
		cursor: pointer;
	}

	.cover .mod-button:hover {
		background: rgba(0 0 0 / 55%);
		color: hsl(0, 0%, 100%);
	}

	.cover .mod-button svg {
		height: 17px;
		width: 17px;
	}

	.card.profile > .ban-notice {
		display: none;
		align-items: center;
		gap: 8px;
		margin: 0 20px 16px;
		padding: 8px 12px;
		border-radius: 8px;
		border-left: 3px solid var(--badge-background-red);
		background: var(--background-nav-hover);
		color: var(--color-text-secondary);
		font-size: var(--font-size-small);
		line-height: var(--line-height-default);
		overflow-wrap: anywhere;
	}

	.card.profile > .ban-notice.visible {
		display: flex;
	}

	.card.profile > .ban-notice svg {
		flex-shrink: 0;
		height: 16px;
		width: 16px;
		color: var(--badge-background-red);
	}


/* css/pages/servers.css */
.wrapper-for-servers {
	padding: 0 20px 0 20px;
}

table.servers {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	user-select: none;
}

table.servers > thead > tr > th:first-child,
table.servers > tbody > tr.server > td:first-child {
	width: 40%;
}

table.servers > thead > tr > th:nth-child(2),
table.servers > tbody > tr.server > td:nth-child(2) {
	width: 10%;
}

table.servers > thead > tr > th:last-child,
table.servers > tbody > tr.server > td:last-child {
	width: 50%;
	padding-left: 24px;
}

table.servers > thead > tr > th,
table.servers > tbody > tr > td {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

table.servers thead th {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-bold);
	text-align: start;
}

table.servers tbody td {
	color: var(--color-text-default);
}

table.servers tr {
	height: 32px;
}

table.servers > tbody > tr > td > img {
	height: 1em;
	transform: translateY(2px);
	border-radius: 50%;
	padding: 0px 4px;
	height: 16px;
}

table.servers tbody tr {
	border-bottom: 1px solid var(--servers-table-border);
	border-top: 1px solid var(--servers-table-border);
	cursor: pointer;
}

table.servers tbody tr.server:hover {
	background: var(--servers-hover-background);
}

table.servers td:nth-child(2),
table.servers th:nth-child(2) {
	text-align: right;
}

table.servers .details {
	background-color: var(--servers-inner-background);
	border: none;
	cursor: default;
}

table.servers .details:not(.visible) {
	display: none;
}

table.servers .details:hover {
	border: none;
}

table.servers .details .container {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 16px 20px 64px 20px;
}

table.servers .no-players,
table.servers .not-responding {
	text-align: center;
}

table.servers .no-players.hidden,
table.servers .not-responding.hidden {
	display: none;
}

table.servers .mobile-map {
	display: none;
}

table.servers svg.warning {
	color: var(--color-red);
	vertical-align: bottom;
	height: 1.1em;
}

table.players {
	table-layout: fixed;
	width: 100%;
	max-width: 420px;
	border-radius: 4px;
	background: var(--background-card);
	border: 1px solid var(--servers-table-border);
	padding-bottom: 8px;
	padding-top: 4px;
}

table.players.hidden {
	display: none;
}

table.players tr {
	height: 24px;
}

table.players thead tr {
	height: 30px;
}

table.players thead tr:hover {
	background: inherit;
	cursor: default;
}

table.players thead th:first-child,
table.players tbody td:first-child {
	padding-left: 16px;
}

table.players thead th:last-child,
table.players tbody td:last-child {
	text-align: right;
	padding-right: 16px;
}

table.players tbody tr:hover {
	background: var(--servers-hover-background);
	user-select: text;
}

table.players thead th,
table.players tbody td {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

table.players > thead > tr > th:first-child,
table.players > tbody > tr > td:first-child {
	width: 50%;
}

table.players > thead > tr > th:nth-child(2),
table.players > tbody > tr > td:nth-child(2) {
	width: 35%;
}

table.players > thead > tr > th:last-child,
table.players > tbody > tr > td:last-child {
	width: 15%;
}

table.players > tbody > tr > td > .wrapper-for-name {
	display: flex;
	align-items: center;
}

table.players img {
	padding-right: 4px;
	height: 12px;
}

table.players .mobile-playtime {
	display: none;
}

.connectors {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
}

.connector {
	margin: 32px 32px 0 32px;
}

.connector .title {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-smaller);
	padding: 0px 0px 2px 2px;
}

.connector .input {
	color: var(--color-text-default);
	border: 1px solid var(--input-border);
	border-bottom: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 8px 16px;
	background: var(--background-card);
	user-select: all;

	display: flex;
	align-items: center;
	justify-content: center;
}

/* Флаг — картинка внутри блока с user-select: all, поэтому при копировании
   адреса в буфер попадает только текст */
.connector .input .flag {
	height: 12px;
	padding-right: 6px;
	user-select: none;
	opacity: 0.8;
}

.connector .connect {
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: var(--font-size-small);
	border: 1px solid var(--input-border);

	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding: 4px 8px;
	cursor: pointer;
}

.connector.primary .connect {
	background: var(--button-blue);
	color: var(--button-colored-text-color);
}

.connector.primary .connect:hover {
	background: var(--button-blue-hover);
}

.connector.alternative .connect {
	color: var(--color-text-secondary);
	background: rgba(0, 0, 0, 0.035);
}

.dark .connector.alternative .connect {
	background: rgb(48, 48, 50);
}

.connector.alternative .connect:hover {
	background: rgba(0, 0, 0, 0.05);
}

.dark .connector.alternative .connect:hover {
	background: rgb(52, 52, 54);
}

.connector .connect svg {
	width: 14px;
	height: 14px;
	margin-right: 4px;
}

.connector.primary .connect svg {
	color: var(--button-colored-text-color);
}

.connector.alternative .connect svg {
	color: var(--color-icon-default);
}

@media only screen and (max-width: 640px) {
	table.servers > thead > tr > th:first-child,
	table.servers > tbody > tr.server > td:first-child {
		width: 80%;
	}

	table.servers > thead > tr > th:nth-child(2),
	table.servers > tbody > tr.server > td:nth-child(2) {
		width: 20%;
	}

	table.servers > thead > tr > th:last-child,
	table.servers > tbody > tr.server > td:last-child {
		display: none;
	}

	table.servers > tbody > tr {
		height: 54px;
	}

	table.servers .mobile-map {
		display: block;
		color: var(--color-text-secondary);
		margin-left: 24px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	table.players > thead > tr > th:first-child,
	table.players > tbody > tr > td:first-child {
		width: 75%;
	}

	table.players > thead > tr > th:nth-child(2),
	table.players > tbody > tr > td:nth-child(2) {
		display: none;
	}

	table.players > thead > tr > th:last-child,
	table.players > tbody > tr > td:last-child {
		width: 25%;
	}

	table.players > tbody > tr {
		height: 54px;
	}

	table.players > tbody > tr > td {
		border-bottom: 1px solid var(--servers-table-border);
	}

	table.players > tbody > tr:last-child > td {
		border-bottom: none;
	}

	table.players .playtime {
		display: none;
	}

	table.players .mobile-playtime {
		display: block;
		margin-left: 20px;
		color: var(--color-text-secondary);
	}
}


/* css/pages/settings.css */
.card.settings .element {
	padding: 16px 20px;
	border-bottom: 1px solid var(--settings-section-border);
}

.card.settings .label {
	font-weight: var(--font-weight-medium);
}

.card.settings .result {
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	user-select: none;
}

.card.settings .result.success {
	color: var(--color-green);
}

.card.settings .result.fail {
	color: var(--color-red);
}

.card.settings input {
	display: block;
	padding: 0 1em;
	height: 32px;
	width: 100%;
	border-radius: 4px;
	transition: border 150ms ease, background-color 150ms ease;
	background-color: var(--input-background);
	border: 1px solid var(--input-border);
	color: var(--color-text-default);
}

.card.settings input:focus {
	background-color: var(--input-background-focus);
	border: 1px solid var(--input-border-focus);
}

.card.settings #name {
	max-width: 260px;
	margin: 6px 0;
}

.card.settings #signature {
	max-width: 100%;
	margin: 6px 0;
}

.card.settings #city {
	max-width: 260px;
	margin: 6px 0;
}

.card.settings #steam-profile {
	max-width: 100%;
	margin: 6px 0;
}

.card.settings select {
	height: 32px;
	width: 100%;
	max-width: 260px;
	margin: 6px 0;
	padding: 0 1em;
	transition: border 150ms ease, background-color 150ms ease;
	background-color: var(--input-background);
	border: 1px solid var(--input-border);
	color: var(--color-text-default);
	border-radius: 4px;
}

.card.settings select:focus {
	background-color: var(--input-background-focus);
	border: 1px solid var(--input-border-focus);
}

.card.settings select:focus {
	outline: none;
}

.card.settings select.date {
	max-width: 100px;
}


/* css/pages/vip.css */
span.profit {
	color: hsl(0, 0%, 95%);
	background-color: rgb(81, 86, 190);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-smaller);
	border-radius: 8px;
	padding: 2px 5px;
	position: relative;
	bottom: 0.1em;
}