/*
 * Оформление страницы групп.
 *
 * Отдельным файлом, а не в style.css темы: подключается только на /groups/
 * (см. gurmatika_gruppy_assets в plugin-social/includes/ajax-gruppy.php).
 *
 * Все цвета — переменные темы (--accent, --surface, --line, ...), поэтому
 * тёмная тема работает без отдельных правил.
 *
 * Вёрстка: от 360 до 1440 пикселей, без горизонтальной прокрутки.
 * Всё, что может оказаться длинным (название, адрес человека), переносится.
 */

/* ================= Общее ================= */

.gm-gr-spisok-golova,
.gm-gr-knopki,
.gm-gr-upravlenie-knopki,
.gm-gr-ludi .gm-gr-deystviya {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.gm-gr-spisok-golova {
	justify-content: space-between;
	margin: 0 0 14px;
}

.gm-gr-knopki .btn,
.gm-gr-upravlenie-knopki .btn,
.gm-gr-spisok-golova .btn,
.gm-gr-panel .btn {
	max-width: 100%;
}

.gm-gr-znachok {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--warm);
	color: var(--ink-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
}

.gm-gr-znachok-zakr {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.gm-gr-znachok-chtenie {
	background: transparent;
	border-style: dashed;
}

.gm-gr-otkaz {
	color: var(--accent);
	font-size: 13.5px;
	font-weight: 600;
}

.gm-gr-zhdet {
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 600;
}

/* ================= Поиск и фильтры ================= */

.gm-gr-poisk {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 6px 5px 14px;
	box-shadow: var(--shadow);
}

.gm-gr-poisk svg {
	color: var(--ink-3);
	flex: none;
}

.gm-gr-poisk input[type=search] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	padding: 8px 0;
	outline: none;
}

.gm-gr-poisk input[type=search]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.gm-gr-filtry {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.gm-gr-filtr {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13.5px;
	text-decoration: none;
}

.gm-gr-filtr:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.gm-gr-filtr.on {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.gm-gr-vsego {
	margin: 0 0 12px;
	color: var(--ink-2);
	font-size: 14px;
}

/* ================= Карточки в списке ================= */

.gm-gr-spisok {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.gm-gr-karta {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gm-gr-karta-ssylka {
	display: flex;
	gap: 12px;
	padding: 12px;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.gm-gr-karta-ssylka:hover .gm-gr-karta-nazvanie {
	color: var(--accent);
}

.gm-gr-karta-foto {
	flex: none;
	width: 74px;
	height: 74px;
	border-radius: var(--radius-s);
	object-fit: cover;
	background: var(--warm);
}

.gm-gr-karta-pusto {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 700;
	color: var(--accent);
}

.gm-gr-karta-telo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	flex: 1 1 auto;
}

.gm-gr-karta-nazvanie {
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.gm-gr-karta-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	font-size: 12.5px;
	color: var(--ink-2);
}

.gm-gr-karta-uchastnikov,
.gm-gr-karta-zayavki {
	white-space: nowrap;
}

.gm-gr-karta-zayavki {
	color: var(--accent);
	font-weight: 600;
}

.gm-gr-karta-opisanie {
	color: var(--ink-2);
	font-size: 13.5px;
	overflow-wrap: anywhere;
}

.gm-gr-karta-knopki {
	padding: 0 12px 12px;
	margin-top: auto;
}

/* ================= Одна группа ================= */

.gm-gr-nazad-roditel {
	margin: 0 0 10px;
	font-size: 14px;
}

.gm-gr-nazad-roditel a {
	color: var(--ink-2);
}

.gm-gr-nazad-roditel a:hover {
	color: var(--accent);
}

.gm-gr-odna {
	min-width: 0;
}

/*
 * Шапка группы — компактная, поверх обложки.
 *
 * Просьба владельца 9 октября 2026: «шапку в самой группе сделать значительно
 * компактней. Может быть, на картинке разместить всю информацию, которая идёт
 * вторым блоком под картинкой? Но основное место должен занимать именно сам
 * чат на страничке».
 *
 * Как сделано: обложка стала фоном шапки (лежит под содержимым), а вся
 * информация — аватарка с буквой, название, описание, значки «Открытая /
 * Закрытая», владелец, число участников и ряд их аватарок — стоит поверх неё
 * на затемнении. Отдельной белой карточки под обложкой больше нет: вместо
 * примерно 430 точек шапка занимает около 150. Текст на затемнении всегда
 * светлый, поэтому в тёмной теме читается так же, как в светлой.
 */

.gm-gr-shapka.profile-head {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	margin: 0 0 12px;
	min-height: 148px;
	background: var(--warm);
}

/* Обложка — фон шапки, а не отдельный блок сверху. */
.gm-gr-obl {
	position: absolute;
	inset: 0;
	height: auto;
	max-height: none;
	margin: 0;
	border-radius: 0;
}

/* Внутри — <picture>: на телефоне подставляется своя, узкая обрезка. */
.gm-gr-obl picture {
	display: block;
	width: 100%;
	height: 100%;
}

.gm-gr-obl img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Обложки нет — буква группы как большой водяной знак справа. */
.gm-gr-obl-pustaya {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 24px;
}

.gm-gr-obl-pustaya span {
	font-size: 110px;
	line-height: 1;
	opacity: .16;
}

/* Затемнение: светлый текст читается на любой картинке. */
.gm-gr-shapka .gm-gr-shapka-telo {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 14px 18px;
	min-height: 148px;
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 55%, rgba(20,16,12,.80) 100%);
	color: #fff;
}

.gm-gr-ava {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.20);
	color: #fff;
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 700;
}

.gm-gr-shapka .gm-gr-ava {
	order: 0;
	width: 64px;
	height: 64px;
	flex: none;
	border: 2px solid rgba(255,255,255,.85);
	box-shadow: none;
}

/* Владелец загрузил иконку — в шапке круглая картинка вместо буквы. */
.gm-gr-shapka .gm-gr-ava-kartinka {
	display: block;
	object-fit: cover;
	border-radius: 50%;
	background: var(--warm);
}

.gm-gr-shapka .gm-gr-shapka-info {
	order: 1;
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gm-gr-nazvanie {
	margin: 0;
	font-size: 26px;
	overflow-wrap: anywhere;
}

.gm-gr-shapka .gm-gr-nazvanie {
	font-size: 23px;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* Описание — не длиннее двух строк: шапка не растёт из-за текста. */
.gm-gr-shapka .gm-gr-opisanie {
	color: rgba(255,255,255,.9);
	font-size: 13.5px;
	line-height: 1.4;
}

.gm-gr-shapka .gm-gr-opisanie p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gm-gr-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	color: var(--ink-2);
	font-size: 13.5px;
}

.gm-gr-shapka .gm-gr-meta {
	color: rgba(255,255,255,.92);
	font-size: 13px;
	gap: 5px 10px;
}

/* Значки «Открытая / Закрытая / Только чтение» — светлые, на затемнении. */
.gm-gr-shapka .gm-gr-znachok {
	background: rgba(255,255,255,.20);
	border-color: rgba(255,255,255,.34);
	color: #fff;
	padding: 1px 8px;
	line-height: 1.6;
}

.gm-gr-shapka .gm-gr-znachok-zakr {
	background: rgba(255,255,255,.30);
	border-color: rgba(255,255,255,.5);
}

.gm-gr-shapka .gm-gr-znachok-chtenie {
	background: transparent;
	border-style: dashed;
	border-color: rgba(255,255,255,.5);
}

/* Владелец — ссылкой с маленькой аватаркой, как в списке участников. */
.gm-gr-vladelets {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gm-gr-vladelets-ssylka {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.gm-gr-vladelets-ssylka:hover {
	color: var(--accent);
}

.gm-gr-vladelets-ava {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
}

/* Подсказка под полем в панели группы (например, про размер обложки). */
.gm-gr-panel-podskazka {
	display: block;
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink-3);
}

/*
 * Владелец в шапке — поскромнее (просьба владельца 9 октября 2026).
 *
 * Раньше имя владельца стояло белым полужирным и с яркой аватаркой — заметнее
 * самой группы. Теперь это обычная мелкая строка: приглушённый цвет, обычный
 * шрифт, подчёркивание (видно, что ссылка) и аватарка 18 точек.
 */
.gm-gr-shapka .gm-gr-vladelets {
	color: rgba(255, 255, 255, .72);
	font-size: 12.5px;
}

.gm-gr-shapka .gm-gr-vladelets-ssylka {
	color: rgba(255, 255, 255, .92);
	font-weight: 400;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-underline-offset: 2px;
}

.gm-gr-shapka .gm-gr-vladelets-ssylka:hover {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, .85);
}

.gm-gr-shapka .gm-gr-vladelets-ava {
	width: 18px;
	height: 18px;
	border: 0;
	opacity: .95;
}

/* Значок владельца на аватарке в шапке — тоже тише: не красный, а светлый. */
.gm-gr-shapka .gm-gr-sostav-znak {
	width: 13px;
	height: 13px;
	line-height: 13px;
	font-size: 8.5px;
	background: rgba(255, 255, 255, .9);
	color: #2a211c;
}

/* Число участников — в одну строку: «1 участник», а не число над словом. */
.gm-gr-shapka .gm-gr-statistika {
	order: 2;
	margin-left: auto;
	gap: 0;
}

.gm-gr-shapka .gm-gr-statistika .pstat {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	text-align: left;
}

.gm-gr-shapka .gm-gr-statistika b {
	font-family: var(--font-serif);
	font-size: 17px;
	line-height: 1;
	color: #fff;
}

.gm-gr-shapka .gm-gr-statistika span {
	font-size: 12.5px;
	color: rgba(255,255,255,.82);
	white-space: nowrap;
}

/* Участники прямо в шапке: ряд круглых аватарок (без подписи — рядом число). */
.gm-gr-sostav {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.gm-gr-shapka .gm-gr-sostav {
	order: 3;
	flex: 0 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	gap: 6px;
}

.gm-gr-shapka .gm-gr-sostav-nadpis {
	display: none;
}

.gm-gr-sostav-ryad {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.gm-gr-sostav-chelovek {
	position: relative;
	display: block;
	line-height: 0;
	text-decoration: none;
}

.gm-gr-sostav-chelovek img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.gm-gr-shapka .gm-gr-sostav-chelovek img {
	width: 30px;
	height: 30px;
	border-color: rgba(255,255,255,.8);
	box-shadow: none;
}

.gm-gr-sostav-chelovek:hover img {
	border-color: var(--accent);
}

.gm-gr-shapka .gm-gr-sostav-chelovek:hover img {
	border-color: #fff;
}

.gm-gr-sostav-znak {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 9px;
	font-style: normal;
	line-height: 14px;
	text-align: center;
}

.gm-gr-sostav-znak-moder {
	background: var(--ink-2);
}

.gm-gr-sostav-eshche {
	font-size: 13px;
	color: var(--ink-2);
	font-weight: 600;
}

.gm-gr-shapka .gm-gr-sostav-eshche {
	color: #fff;
}

/* Кнопка («Вступить», «Выйти из группы») — тоже на затемнении. */
.gm-gr-shapka .gm-gr-knopki {
	order: 4;
	margin-left: 0;
}

.gm-gr-shapka .gm-gr-knopki .btn-ghost {
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.55);
	color: #fff;
}

.gm-gr-shapka .gm-gr-knopki .btn-ghost:hover {
	background: rgba(255,255,255,.26);
	color: #fff;
}

/*
 * Статус в шапке — скромно (просьба владельца 9 октября 2026: владельца
 * не выделять). «Вы владелец группы» / «Вы забанены…» — обычный шрифт,
 * чуть приглушённый: это справка, а не кнопка.
 */
.gm-gr-shapka .gm-gr-zhdet {
	color: rgba(255, 255, 255, .78);
	font-size: 12.5px;
	font-weight: 400;
}

.gm-gr-shapka .gm-gr-otkaz {
	color: #fff;
	font-size: 12.5px;
}

.gm-gr-opisanie {
	color: var(--ink-body);
	overflow-wrap: anywhere;
}

.gm-gr-opisanie p:first-child {
	margin-top: 0;
}

.gm-gr-opisanie p:last-child {
	margin-bottom: 0;
}

/* Меню действий владельца и модератора */
.gm-gr-upravlenie {
	border-top: 1px dashed var(--line);
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gm-gr-upravlenie-nadpis {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-3);
}

.gm-gr-opasno {
	color: var(--accent);
	border-color: var(--accent);
}

.gm-gr-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: 12px;
	margin-top: 6px;
}

/*
 * Панель правки (название, описание, обложка) скрыта, пока человек не нажал
 * кнопку. Без этого правила display:flex перебивает служебный атрибут hidden,
 * и все три панели открыты сразу.
 */
.gm-gr-panel[hidden] {
	display: none;
}

.gm-gr-panel > label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 13.5px;
	color: var(--ink-2);
}

.gm-gr-panel input[type=text],
.gm-gr-panel input[type=search],
.gm-gr-panel textarea,
.gm-gr-panel select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

.gm-gr-panel input:focus,
.gm-gr-panel textarea:focus,
.gm-gr-panel select:focus {
	border-color: var(--accent);
	outline: none;
}

/* Лента сообщений группы: разметка та же, что в общем чате,
   поэтому пузыри и меню рисует общее оформление сообщений. */
.gm-gr-lenta-blok {
	margin: 0 0 18px;
}

.gm-gr-chat {
	max-width: 820px;
}

/* Окно ленты. Класс свой, а не gm-chat-box: по этому имени общий
   скрипт сообщений ищет общий чат и обслужил бы ленту группы. */
.gm-gr-lenta {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow);
	max-height: 620px;
	overflow-y: auto;
	/*
	 * Сообщения прижимаются к низу окна, как в мессенджере: если переписка
	 * короче окна, пустое место остаётся сверху, а не под последним
	 * сообщением. Псевдоэлемент с margin-top:auto забирает свободное место,
	 * а когда сообщений много — схлопывается и прокрутка работает как обычно.
	 */
	display: flex;
	flex-direction: column;
}

.gm-gr-lenta::before {
	content: '';
	margin-top: auto;
}

.gm-gr-okno {
	position: relative;
}

.gm-gr-lenta .gm-empty {
	padding: 10px;
}

.gm-gr-lenta-podskazka {
	margin: 12px 0 0;
	color: var(--ink-2);
	font-size: 14px;
}

/* Сообщение убрал модератор: не вырываем из ленты, а помечаем. */
.chat-message.gm-udaleno-moderatorom .message-box {
	background: var(--warm);
	border-style: dashed;
}

.chat-message .message-text.gm-udaleno-tekst {
	margin: 0;
	color: var(--ink-2);
	font-style: italic;
}

/* Строка ввода в группе. Класс свой: форма gm-pm-form обслуживается
   общим скриптом сообщений, а у группы свои точки. */
.gm-gr-form {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: nowrap;
	position: relative;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.gm-gr-form textarea {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 13px;
	font: inherit;
	font-size: 16px;
	resize: none;
	overflow: hidden;
	outline: none;
	min-height: 52px;
	max-height: 160px;
}

.gm-gr-form textarea:focus {
	border-color: var(--accent);
}

.gm-gr-form .gm-otpravit-znak {
	display: none;
}

@media (max-width: 760px) {
	/*
	 * Лента группы — главное на странице (просьба владельца 9 октября):
	 * на телефоне она тоже занимает больше половины экрана и прокручивается
	 * внутри себя. Раньше высота зависела от числа сообщений, и при одном
	 * сообщении чат сжимался до 130 точек.
	 */
	.gm-gr-lenta {
		min-height: 54vh;
		max-height: 62vh;
		padding: 14px;
	}

	/*
	 * Поле ввода больше не «прилипает» к низу экрана: при короткой ленте
	 * оно накрывало сообщения (нашлось при проверке 9 октября). Теперь
	 * стоит сразу под лентой, как на компьютере.
	 */
	.gm-gr-form {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: 8px;
		padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
	}

	.gm-gr-form textarea {
		flex: 1 1 auto;
		min-width: 150px;
	}

	.gm-gr-form .gm-privyaz-knopka {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: var(--surface);
		color: var(--ink-2);
		cursor: pointer;
	}

	.gm-gr-form .gm-privyaz-knopka[aria-expanded="true"] {
		border-color: var(--accent);
		color: var(--accent);
		background: var(--warm);
	}

	.gm-gr-form.gm-privyaz-otkryto .gm-privyaz {
		display: flex;
	}

	.gm-gr-form button[type="submit"] {
		flex: none;
		width: 44px;
		height: 44px;
		min-width: 44px;
		padding: 0;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.gm-gr-form .gm-otpravit-podpis {
		display: none;
	}

	.gm-gr-form .gm-otpravit-znak {
		display: block;
	}

	/* Телефон: страница не прокручивается (общее правило оформления),
	   поэтому прокрутку отдаём колонке группы — иначе шапка, вкладки и
	   список участников остались бы за краем экрана. Сама лента при этом
	   прокручивается в своём окне, как в общем чате.
	   Классы свои (gm-gr-*): по gm-chat-box общий скрипт сообщений ищет
	   общий чат и принял бы ленту группы за него. */
	body.gm-messendzher .gm-gr-odna {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.gm-messendzher .gm-gr-lenta-blok {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
	}

	body.gm-messendzher .gm-gr-chat {
		max-width: none;
		display: flex;
		flex-direction: column;
	}

	body.gm-messendzher .gm-gr-okno {
		display: flex;
		flex-direction: column;
	}

	body.gm-messendzher .gm-gr-lenta {
		max-height: 60vh;
		min-height: 180px;
		flex: 0 0 auto;
		overflow-y: auto;
		border-radius: var(--radius) var(--radius) 0 0;
		-webkit-overflow-scrolling: touch;
	}

	body.gm-messendzher .gm-gr-lenta-blok .gm-gr-podpis,
	body.gm-messendzher .gm-gr-lenta-podskazka {
		display: none;
	}

	/* На телефоне у сообщения одна кнопка «…», а «Пожаловаться»
	   оставляем снаружи: в общее меню она не попадает. */
	.chat-message .gm-deystviya > button.gm-zhaloba-knopka {
		display: inline-flex;
	}
}


/* ================= Вкладки ================= */

.gm-gr-vkladki {
	margin-bottom: 12px;
}

.gm-gr-vkladki-telo {
	min-height: 60px;
}

.gm-gr-vkladka-gruzim {
	opacity: .5;
}

.gm-gr-podpis {
	margin: 18px 0 10px;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gm-gr-skolko {
	display: inline-block;
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--warm);
	color: var(--ink-2);
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

/* ================= Люди ================= */

.gm-gr-ludi,
.gm-gr-zhaloby,
.gm-gr-zhurnal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gm-gr-chelovek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: 8px 12px;
	min-width: 0;
}

.gm-gr-chelovek-zab {
	border-style: dashed;
}

.gm-gr-chelovek-ssylka {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 170px;
	color: inherit;
	text-decoration: none;
}

.gm-gr-chelovek-ssylka:hover .gm-gr-chelovek-imya {
	color: var(--accent);
}

.gm-gr-avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--warm);
}

.gm-gr-avatar-bukva {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--accent);
}

.gm-gr-chelovek-imya {
	font-weight: 600;
	overflow-wrap: anywhere;
	min-width: 0;
}

.gm-gr-rol {
	font-size: 12.5px;
	color: var(--ink-2);
	white-space: nowrap;
}

.gm-gr-rol-owner {
	color: var(--accent);
	font-weight: 700;
}

.gm-gr-rol-moder {
	color: var(--accent);
}

.gm-gr-deystviya {
	margin-left: auto;
}

.gm-gr-mini {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	border-radius: 999px;
	padding: 3px 11px;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	max-width: 100%;
}

.gm-gr-mini:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.gm-gr-mini-ok {
	border-color: var(--accent);
	color: var(--accent);
}

.gm-gr-mini-opasno {
	color: var(--accent);
}

.gm-gr-mini[disabled] {
	opacity: .55;
	cursor: default;
}

/* ================= Жалобы и журнал ================= */

.gm-gr-zhaloby li,
.gm-gr-zhurnal li {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: 9px 12px;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.gm-gr-zhaloba-vremya,
.gm-gr-zhurnal-kogda {
	color: var(--ink-3);
	font-size: 12.5px;
	white-space: nowrap;
}

.gm-gr-zhaloba-tekst {
	margin: 6px 0 0;
	color: var(--ink-2);
}

.gm-gr-zhurnal li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}

.gm-gr-zhurnal-kto {
	font-weight: 600;
}

.gm-gr-zhurnal-chto {
	color: var(--ink-2);
}

.gm-gr-zhurnal-komu {
	color: var(--accent);
}

.gm-gr-zhurnal-kogda {
	margin-left: auto;
}

/* ================= Плашка ответа ================= */

.gm-gr-plashka {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 20px);
	max-width: min(92vw, 460px);
	padding: 11px 16px;
	border-radius: var(--radius-s);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	color: var(--ink);
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 9999;
	overflow-wrap: anywhere;
}

.gm-gr-plashka-vidno {
	opacity: 1;
	transform: translate(-50%, 0);
}

.gm-gr-plashka-plokho {
	border-color: var(--accent);
	color: var(--accent);
}

.gm-gr-zhdem-otvet {
	opacity: .6;
}

/* ================= Экраны ================= */

@media (min-width: 560px) {
	.gm-gr-spisok {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.gm-gr-spisok {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.gm-gr-spisok-golova {
		flex-direction: column;
		align-items: stretch;
	}

	.gm-gr-poisk {
		flex: 1 1 auto;
		border-radius: var(--radius-s);
	}

	.gm-gr-poisk .btn {
		padding: 7px 12px;
	}

	/* Шапка группы на телефоне — такая же компактная, поверх обложки. */
	.gm-gr-shapka.profile-head,
	.gm-gr-shapka .gm-gr-shapka-telo {
		min-height: 138px;
	}

	.gm-gr-shapka .gm-gr-shapka-telo {
		padding: 12px 14px;
		gap: 10px;
	}

	.gm-gr-shapka .gm-gr-ava {
		width: 52px;
		height: 52px;
		font-size: 25px;
	}

	.gm-gr-shapka .gm-gr-shapka-info {
		flex: 1 1 calc(100% - 66px);
	}

	.gm-gr-nazvanie {
		font-size: 21px;
	}

	.gm-gr-shapka .gm-gr-nazvanie {
		font-size: 19px;
	}

	.gm-gr-shapka .gm-gr-opisanie {
		font-size: 13px;
	}

	.gm-gr-shapka .gm-gr-statistika {
		margin-left: 0;
	}

	.gm-gr-shapka .gm-gr-statistika .pstat {
		text-align: left;
	}

	.gm-gr-shapka .gm-gr-knopki,
	.gm-gr-shapka .gm-gr-knopki .btn {
		width: auto;
	}

	.gm-gr-obl-pustaya {
		padding-right: 14px;
	}

	.gm-gr-obl-pustaya span {
		font-size: 84px;
	}

	.gm-gr-karta-foto {
		width: 60px;
		height: 60px;
	}

	.gm-gr-deystviya {
		margin-left: 0;
		width: 100%;
	}

	.gm-gr-chelovek-ssylka {
		flex: 1 1 100%;
	}

	.gm-gr-zhurnal-kogda {
		margin-left: 0;
	}
}

@media (max-width: 380px) {
	.gm-gr-shapka-telo,
	.gm-gr-karta-ssylka {
		padding: 11px;
	}

	.gm-gr-nazvanie {
		font-size: 19px;
	}
}

/* Заявка на новую группу: ссылка ведёт на форму связи с администрацией. */
.gm-gr-zayavka {
	max-width: 460px;
	margin: 0;
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1.45;
}

.gm-gr-zayavka a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
}

/*
 * «Мои группы» в личном кабинете: сюда переехало управление группой,
 * чтобы оно не мешало читать переписку на странице группы.
 */
.lk-gruppy .lk-gruppa {
	margin-top: 12px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
}

.lk-gruppa-shapka {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.lk-gruppa-nazvanie {
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.lk-gruppa-nazvanie:hover {
	color: var(--accent);
}

.lk-gruppa-tip {
	padding: 1px 8px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink-3);
	font-size: 12px;
}

.lk-gruppy .gm-gr-upravlenie {
	margin-top: 4px;
}

/* ------------------------------------------------------------------
 * Страница групп: сверху только заявка и список.
 *
 * Просьба владельца 9 октября 2026 (сначала для компьютера, затем и для
 * телефона): на странице групп не должно быть поиска, кнопки «Создать
 * группу», надписи «Тематические группы» и кнопок «Все / Открытые /
 * Закрытые». Сверху — переключатель разделов и одна строка «Подать заявку
 * на открытие группы», ниже — сразу группы.
 *
 * Самих блоков в разметке больше нет (поиск и кнопки убраны из файла,
 * форма создания переехала в личный кабинет администратора), а здесь
 * остаётся страховка на случай, если их вернут: заголовок страницы и
 * подвал на этой странице не показываем.
 * ------------------------------------------------------------------ */

body.page-template-page-groups-php .cat-head,
body.page-template-page-groups-php .site-footer{display:none}

/* Заявка — первая строка страницы, поэтому отступ сверху поменьше. */
body.page-template-page-groups-php .gm-gr-spisok-golova{margin:0 0 14px}
body.page-template-page-groups-php .gm-gr-zayavka{margin:0}

/* ------------------------------------------------------------------
 * Панель администратора группы: участники, жалобы, журнал.
 *
 * Просьба владельца 9 октября 2026: эти кнопки не должны висеть на виду
 * у всех. Панель свёрнута (обычный <details>, работает без скриптов),
 * открывается нажатием и есть только у владельца, модераторов и
 * администратора сайта.
 * ------------------------------------------------------------------ */

.gm-gr-panel-admin {
	margin: 0 0 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface);
	overflow: hidden;
}

.gm-gr-panel-admin-knopka {
	cursor: pointer;
	padding: 12px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-2);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gm-gr-panel-admin-knopka::-webkit-details-marker {
	display: none;
}

.gm-gr-panel-admin-knopka::before {
	content: '▸';
	font-size: 12px;
	color: var(--ink-3);
}

.gm-gr-panel-admin[open] .gm-gr-panel-admin-knopka::before {
	content: '▾';
}

.gm-gr-panel-admin-knopka:hover {
	color: var(--ink);
}

.gm-gr-panel-admin-telo {
	padding: 0 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * «Сообщения группы» — подпись над лентой. После того как шапка стала
 * компактной (9 октября), подпись только отнимала место: внутри группы и так
 * понятно, что это переписка. У закрытой группы текст «видят только участники»
 * остаётся — он важнее подписи.
 */
body.page-template-page-groups-php .gm-gr-lenta-blok > .gm-gr-podpis {
	display: none;
}

/* Лента группы — главное на странице: делаем её выше. */
@media(min-width:761px) {
	.gm-gr-lenta {
		min-height: 62vh;
		max-height: 74vh;
	}
}

/* ===============================================================
   Компактная шапка группы и значок «сколько групп».
   Просьба владельца 22 октября 2026: убрать строку «Всего групп» и
   показать число значком в правом верхнем углу рядом с заявкой; шапку
   группы сделать компактнее, кнопку — меньше и под логотипом; убрать
   стрелку «Все группы» и поднять шапку вплотную к меню.
   =============================================================== */

/* Заявка и значок со числом групп — в одной строке, значок справа. */
.gm-gr-spisok-golova {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
}

.gm-gr-spisok-golova .gm-gr-zayavka {
	margin: 0;
}

/* Шапка группы ниже, шапка вплотную к меню. */
.gm-gr-shapka.profile-head {
	min-height: 112px;
	margin: 0 0 10px;
}

.gm-gr-shapka .gm-gr-shapka-telo {
	min-height: 112px;
	padding: 12px 16px;
	gap: 12px;
}

/* Логотип и кнопка под ним — один столбик. */
.gm-gr-ava-stolb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: none;
}

.gm-gr-ava-stolb .gm-gr-knopki {
	padding: 0;
	margin: 0;
}

.gm-gr-ava-stolb .gm-gr-knopki .btn {
	height: 26px;
	min-height: 0;
	padding: 0 10px;
	font-size: 12px;
	border-radius: 999px;
}

@media (max-width: 760px) {
	.gm-gr-shapka.profile-head,
	.gm-gr-shapka .gm-gr-shapka-telo {
		min-height: 92px;
	}

	.gm-gr-shapka .gm-gr-shapka-telo {
		padding: 10px 12px;
		gap: 10px;
	}

	.gm-gr-shapka .gm-gr-ava {
		width: 54px;
		height: 54px;
		font-size: 24px;
	}

	.gm-gr-shapka .gm-gr-nazvanie {
		font-size: 19px;
	}

	.gm-gr-ava-stolb .gm-gr-knopki .btn {
		height: 24px;
		padding: 0 9px;
		font-size: 11.5px;
	}
}
/* Кнопка в карточке группы — чуть меньше, низ карточки компактнее. */
.gm-gr-karta-knopki {
	padding: 0 10px 10px;
}

.gm-gr-karta-knopki .btn {
	height: 28px;
	min-height: 0;
	padding: 0 12px;
	font-size: 12.5px;
}

/* ===============================================================
   Строка ввода в группе — как в общем чате и в личных.
   Просьба владельца 22 октября 2026: «в группе нижнее окно, куда мы пишем,
   сделать таким же, как в общем чате и в личных — и по стилистике, и по
   размерам». В чате и личных форма стоит внутри светлой карточки, а в группе
   висела прямо на фоне и выглядела иначе. Теперь у неё та же светлая
   подложка, скругление и отступы, что у ленты сообщений над ней, а поля и
   кнопки — общие.
   =============================================================== */

.gm-gr-form {
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--surface);
	border: 0;
	border-radius: var(--radius, 16px);
	box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .12));
	gap: 8px;
}

.gm-gr-form textarea {
	min-height: 44px;
	max-height: 160px;
	border-radius: 12px;
	padding: 10px 12px;
	background: var(--surface);
}

@media (max-width: 760px) {
	.gm-gr-form {
		margin-top: 8px;
		padding: 10px 10px;
		border-radius: 14px;
	}

	.gm-gr-form textarea {
		min-height: 40px;
	}
}

/* ===============================================================
   Список групп вплотную к строке заявки, карточка компактнее.
   Просьба владельца 22 октября 2026: под надписью «Подать заявку на
   открытие группы» было пустое место; кнопка «Открыть» должна стоять выше,
   ближе к логотипу, а сама карточка — стать ниже.
   =============================================================== */

.gm-gr-spisok-golova {
	margin: 0 0 6px;
}

.gm-gr-spisok {
	gap: 10px;
}

.gm-gr-karta-ssylka {
	padding: 10px 12px 6px;
}

.gm-gr-karta-knopki {
	padding: 0 12px 10px;
	margin-top: -2px;
}

/* ===============================================================
   Компьютер: группа как настоящий мессенджер — форма ввода у самого низа.
   Просьба владельца 22 октября 2026: «в группе окошко „Написать в группу“
   висит, отступ снизу большой; в общем чате оно прилегает к нижнему краю —
   сделать один в один как в общем чате».
   =============================================================== */

@media (min-width: 1024px) {
	body.gm-gr-otkryta {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	body.gm-gr-otkryta .site-footer {
		display: none;
	}

	body.gm-gr-otkryta main#content,
	body.gm-gr-otkryta main#content > .wrap,
	body.gm-gr-otkryta .gm-gr-odna {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	body.gm-gr-otkryta main#content {
		overflow: hidden;
	}

	body.gm-gr-otkryta main#content > .wrap {
		padding-bottom: 0;
	}

	body.gm-gr-otkryta .gm-gr-lenta {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	body.gm-gr-otkryta .gm-gr-form {
		flex: none;
		margin-top: 8px;
		margin-bottom: 0;
	}
}

/* ===============================================================
   Группа в узком окне и на телефоне: поле ввода — у самого низа,
   как в общем чате.
   Просьба владельца 22 октября 2026: «посмотри, как организован низ в общем
   чате и у группы; сделай у группы так же». В общем чате форма приклеена к
   низу (position: sticky, background: surface), а в группе висела карточкой
   с отступом снизу.
   =============================================================== */

@media (max-width: 760px) {
	.gm-gr-form {
		position: sticky;
		bottom: 0;
		z-index: 6;
		margin: 8px 0 0;
		padding: 10px 10px calc(6px + env(safe-area-inset-bottom, 0px));
		background: var(--surface);
		border-radius: 14px 14px 0 0;
		box-shadow: none;
	}
}

/* То же внутри плавающего окна чата (рамка узкая, но правило надёжнее). */
body.gm-v-okne .gm-gr-form {
	position: sticky;
	bottom: 0;
	z-index: 6;
	margin: 8px 0 0;
	padding: 10px 10px calc(6px + env(safe-area-inset-bottom, 0px));
	background: var(--surface);
	border-radius: 14px 14px 0 0;
	box-shadow: none;
}

/* ===============================================================
   Компьютер: поле ввода в группе — как в общем чате.
   Владелец 22 октября 2026: «нужно привести в порядок и на компьютере —
   там ничего не изменилось». В общем чате форма стоит в светлой карточке
   ленты, прижата к низу, без отдельной рамки и отступа. Делаем так же:
   форма — продолжение карточки сообщений, скругление только снизу,
   сверху тонкая линия, без тени и без отступа снизу.
   =============================================================== */

@media (min-width: 761px) {
	.gm-gr-form {
		margin: 0;
		padding: 14px 20px 12px;
		background: var(--surface);
		border-top: 1px solid var(--line);
		border-radius: 0 0 var(--radius, 18px) var(--radius, 18px);
		box-shadow: none;
	}

	.gm-gr-lenta {
		border-radius: var(--radius, 18px) var(--radius, 18px) 0 0;
		margin-bottom: 0;
	}

	.gm-gr-form textarea {
		border-radius: 12px;
	}
}

/* Группа в окне чата: убираем нижний отступ страницы, из-за которого под
   полем «Написать в группу» оставалась белая полоса (замечание владельца
   22 октября 2026). */
body.gm-v-okne,
body.gm-v-okne main#content,
body.gm-v-okne main#content > .wrap,
body.gm-v-okne .gm-gr-odna {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

body.gm-v-okne .gm-gr-form {
	margin-bottom: 0 !important;
	border-radius: 14px 14px 0 0;
}

body.gm-v-okne .gm-podskazka-golosa,
body.gm-v-okne .gm-golos-podskazka,
body.gm-v-okne .gm-gr-podskazka {
	display: none !important;
}

/* Карточка группы компактнее: меньше воздуха сверху и снизу, кнопка
   «Открыть» ближе к аватарке и меньше (просьба владельца 22 октября 2026). */
.gm-gr-spisok-golova {
	margin-bottom: 2px;
}

.gm-gr-spisok {
	gap: 8px;
}

.gm-gr-karta-ssylka {
	padding: 10px 12px 4px;
}

.gm-gr-karta-knopki {
	padding: 0 12px 8px;
	margin-top: -6px;
}

.gm-gr-karta-knopki .btn {
	height: 26px;
	min-height: 0;
	padding: 0 10px;
	font-size: 11.5px;
	border-radius: 999px;
}

@media (max-width: 760px) {
	.gm-gr-spisok-golova {
		margin-bottom: 0;
	}

	.gm-gr-karta-ssylka {
		padding: 8px 10px 2px;
		gap: 10px;
	}

	.gm-gr-karta-foto {
		width: 64px;
		height: 64px;
	}

	.gm-gr-karta-knopki {
		padding: 0 10px 8px;
		margin-top: -8px;
	}

	.gm-gr-karta-knopki .btn {
		height: 24px;
		padding: 0 9px;
		font-size: 11px;
	}
}
/* Вплотную: между строкой заявки и карточкой группы не должно быть пустого
   места (просьба владельца 22 октября 2026, повторная). */
.gm-gr-spisok-golova {
	margin: 0 0 0 !important;
	padding-bottom: 0 !important;
}

.gm-gr-spisok {
	margin: 0 !important;
	padding: 0 !important;
}

.gm-gr-karta {
	margin: 0 !important;
}

/* ===============================================================
   Строка заявки и карточка группы — компактный вариант.
   Владелец 22 октября 2026: «иконку с числом — в правый верхний угол на одну
   строчку с надписью „Подать заявку“; надпись пусть начинается от левой кромки,
   иконка — у правого края; карточку сделать компактнее».
   =============================================================== */

.gm-gr-spisok-golova {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	padding: 0 !important;
	margin: 0 0 6px !important;
}

.gm-gr-spisok-golova .gm-gr-zayavka {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	text-align: left !important;
	font-size: 13px !important;
	line-height: 1.25 !important;
}
/* Карточка: одна плотная строка — логотип, название, признаки, описание. */
.gm-gr-karta-ssylka {
	padding: 8px 10px !important;
	gap: 10px !important;
	align-items: center !important;
}

.gm-gr-karta-foto {
	width: 56px !important;
	height: 56px !important;
	border-radius: 12px !important;
}

.gm-gr-karta-telo {
	gap: 2px !important;
}

.gm-gr-karta-nazvanie {
	font-size: 15px !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gm-gr-karta-meta {
	font-size: 11.5px !important;
	gap: 2px 8px !important;
	line-height: 1.2 !important;
}

.gm-gr-karta-opisanie {
	font-size: 11.5px !important;
	line-height: 1.25 !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.gm-gr-karta-knopki {
	padding: 0 10px 8px !important;
	margin-top: -2px !important;
}

/* Участники в карточке — значок и число, без слова (22 октября 2026). */
.gm-gr-karta-uchastnikov {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}

.gm-gr-karta-uchastnikov svg {
	width: 13px;
	height: 13px;
	flex: none;
	opacity: .7;
}

.gm-gr-karta-uchastnikov b {
	font-weight: 600;
}

/* Статус группы и вход — значками (22 октября 2026). */
.gm-gr-karta-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(128, 128, 128, .14);
	color: var(--ink-2);
	flex: none;
}

.gm-gr-karta-tip-zakr {
	background: rgba(193, 5, 55, .12);
	color: var(--accent);
}

.gm-gr-karta-tip svg { width: 14px; height: 14px; }

/* Вход в группу — клик по самой карточке, отдельной круглой кнопки нет
   (просьба владельца 22 октября 2026). Правила позиционирования строки
   кнопок остаются: она нужна для «Вступить» / «Войти» / подписей статуса. */
.gm-gr-karta {
	position: relative;
}

.gm-gr-karta-knopki {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	background: none;
}

.gm-gr-karta-ssylka { padding-right: 52px !important; }

/* ===============================================================
   Чат группы — одна светлая поверхность, как в общем чате.
   Владелец 22 октября 2026: «в чате группы чёрный фон убрать, сделать
   однородный фон, такой же как у других чатов».

   Раньше лента сообщений и поле ввода были двумя отдельными белыми
   карточками, и между ними просвечивал фон страницы — полоса в 8 точек
   через весь чат. На телефоне и в окне чата она выглядела чёрной,
   а скругления формы рисовали чёрные уголки.

   Теперь карточка одна: светлый фон у всей колонки, лента прозрачная,
   форма примыкает без отступа и отделена тонкой линией — как в общем чате.
   =============================================================== */

.gm-gr-chat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	/* На странице текст светлый (для тёмного фона), а карточка светлая:
	   внутри неё цвет текста задаём явно, иначе новый текст без своего
	   цвета окажется светлым на белом. */
	color: var(--ink);
}

.gm-gr-chat .gm-gr-lenta {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Форма — продолжение карточки: без отступа сверху, скругление только снизу.
   Тонкая линия сверху — разделитель перед полем ввода, как в общем чате;
   своя тень форме больше не нужна, карточка уже с тенью. */
.gm-gr-chat .gm-gr-form,
body.gm-gr-otkryta .gm-gr-form,
body.gm-v-okne .gm-gr-form {
	margin-top: 0;
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: none;
}

/* Пояснения внутри карточки (закрытая группа, «только чтение», бан) —
   с отступами, чтобы текст не лип к рамке. */
.gm-gr-chat .gm-gr-lenta-podskazka {
	padding: 12px 20px 16px;
}

/* Телефон и окно чата: карточка упирается в низ экрана — снизу не скругляем,
   как у общего чата (там так же). */
@media (max-width: 760px) {

	.gm-gr-chat {
		border-radius: var(--radius) var(--radius) 0 0;
		border-bottom: 0;
	}

	.gm-gr-chat .gm-gr-form,
	body.gm-gr-otkryta .gm-gr-form,
	body.gm-v-okne .gm-gr-form {
		border-radius: 0;
	}
}

/* ===============================================================
   Карточка группы: вход — кликом по ней, описание — сразу после значка
   участников и в две строки.
   Владелец 22 октября 2026: «в карточке группы надо убрать иконку входа
   в группу, а оставить просто кликабельным заголовок, на него кликаешь,
   и входишь в группу. Описание группы должно начинаться сразу после
   иконки, которая показывает сколько человек в группе, и под описания
   нужно отдать две строчки».
   =============================================================== */

/* Круглой кнопки входа больше нет — вся карточка и есть ссылка, поэтому
   справа место под иконку не резервируем: текст может идти до самого края. */
.gm-gr-karta .gm-gr-karta-ssylka {
	padding-right: 10px !important;
}

/* Строка кнопок была прижата к правому краю поверх текста — это годилось для
   круглой иконки, но текстовая «Вступить» налезала на описание. Возвращаем
   её обычной строкой под карточкой: у тех, кто уже в группе, строки нет. */
.gm-gr-karta .gm-gr-karta-knopki {
	position: static !important;
	right: auto !important;
	top: auto !important;
	transform: none !important;
	padding: 0 10px 8px !important;
	margin: -2px 0 0 !important;
}

/* Заголовок выглядит как ссылка: при наведении и с клавиатуры подчёркивается. */
.gm-gr-karta-ssylka:hover .gm-gr-karta-nazvanie,
.gm-gr-karta-ssylka:focus-visible .gm-gr-karta-nazvanie {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Строка признаков: значок статуса, значок участников, сразу за ними —
   описание. Базис 0 не даёт описанию «прыгнуть» на новую строку: оно
   занимает остаток строки и там же переносится на вторую. */
.gm-gr-karta-meta {
	align-items: flex-start !important;
	flex-wrap: wrap !important;
	gap: 2px 8px !important;
}

.gm-gr-karta-opisanie {
	flex: 1 1 0% !important;
	min-width: 0;
	margin-top: 4px;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 11.5px !important;
	line-height: 1.32 !important;
	color: var(--ink-2) !important;
}

/* ===============================================================
   Карточка группы: замок — перед названием, число участников — на аватарке.
   Владелец 22 октября 2026: «в карточке группы иконку закрытая она или
   открытая нужно поставить прям перед названием группы» и «иконку с
   количеством человек в группе нужно поставить прямо на аватарку в правый
   нижний угол или в левый верхний».
   =============================================================== */

/* Аватарка — точка отсчёта для значка участников. */
.gm-gr-karta-ava {
	position: relative;
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
}

/* Название и замок — одной строкой: замок слева, сразу перед названием. */
.gm-gr-karta-nazvanie-stroka {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.gm-gr-karta-nazvanie-stroka .gm-gr-karta-tip {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	flex: none;
}

.gm-gr-karta-nazvanie-stroka .gm-gr-karta-tip svg {
	width: 12px;
	height: 12px;
}

/* Название занимает остаток строки и обрезается многоточием, как раньше. */
.gm-gr-karta-nazvanie-stroka .gm-gr-karta-nazvanie {
	flex: 0 1 auto;
	min-width: 0;
}

/* Значок «сколько человек в группе» — на аватарке, в правом нижнем углу. */
.gm-gr-karta-ava .gm-gr-karta-uchastnikov {
	position: absolute;
	right: -5px;
	bottom: -5px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	color: var(--ink-2);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.gm-gr-karta-ava .gm-gr-karta-uchastnikov svg {
	width: 10px;
	height: 10px;
	flex: none;
	opacity: .8;
}

.gm-gr-karta-ava .gm-gr-karta-uchastnikov b {
	font-weight: 700;
}

/* В строке признаков значков больше нет: описание идёт сразу под названием. */
.gm-gr-karta-meta .gm-gr-karta-opisanie {
	margin-top: 0;
}

/* ===============================================================
   Шапка группы: число участников — значком на баннере, в левом нижнем углу.
   Владелец 22 октября 2026: «в самой группе … на главном баннере вместо
   надписи сколько участников, нужно сделать также чтобы стояло иконка
   в левом нижнем углу с количеством участников поверх баннера».
   =============================================================== */

.gm-gr-shapka .gm-gr-uchastniki-znachok {
	position: absolute;
	left: 14px;
	bottom: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	background: rgba(20, 16, 14, .62);
	border: 1px solid rgba(255, 255, 255, .24);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.gm-gr-shapka .gm-gr-uchastniki-znachok svg {
	width: 13px;
	height: 13px;
	flex: none;
	opacity: .9;
}

.gm-gr-shapka .gm-gr-uchastniki-znachok b {
	font-weight: 700;
}

@media (max-width: 760px) {

	.gm-gr-shapka .gm-gr-uchastniki-znachok {
		left: 12px;
		bottom: 8px;
		height: 22px;
		padding: 0 8px;
		font-size: 12px;
	}
}

/* Кнопка «Выйти из группы» / подпись статуса уходили в тот же левый угол:
   теперь они стоят в правом нижнем углу баннера — там, где раньше была
   надпись «N участников». На телефоне этого блока нет вовсе.
   Заодно аватарка прижата к верху: так значок участников в левом нижнем
   углу не наезжает на неё. */
@media (min-width: 761px) {

	.gm-gr-shapka .gm-gr-ava-stolb {
		align-self: flex-start;
	}

	.gm-gr-shapka .gm-gr-ava-stolb .gm-gr-knopki {
		position: absolute;
		right: 18px;
		bottom: 12px;
		z-index: 3;
		margin: 0;
		padding: 0;
	}
}

/* ===============================================================
   Аватар группы — загрузка у администратора группы.
   Владелец 22 октября 2026: «помимо картинки обложки, нужно добавить ещё
   возможность загружать квадратный аватар… кнопку сделать загрузку аватара
   сделай у администратора группы».
   =============================================================== */

.gm-gr-ava-zagruzka {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 16px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s, 12px);
	background: var(--surface);
	color: var(--ink);
}

.gm-gr-ava-zagruzka-tekst {
	flex: 1 1 260px;
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
}

.gm-gr-ava-zagruzka-tekst b {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
}

.gm-gr-ava-zagruzka .gm-gr-panel-podskazka {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink-3);
}

.gm-gr-ava-zagruzka-forma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	flex: 0 0 auto;
}

/* Выбор файла — обычной кнопкой, имя файла рядом подписью. */
.gm-gr-ava-zagruzka-pole {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	cursor: pointer;
}

.gm-gr-ava-zagruzka-knopka {
	cursor: pointer;
}

.gm-gr-ava-zagruzka-imya {
	min-width: 0;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	color: var(--ink-3);
}

@media (max-width: 760px) {

	.gm-gr-ava-zagruzka {
		padding: 10px 12px;
		gap: 8px;
	}

	.gm-gr-ava-zagruzka-forma {
		flex: 1 1 100%;
	}

	.gm-gr-ava-zagruzka-imya {
		max-width: 100%;
	}
}

/* ===============================================================
   Роли в группе: владелец, администратор группы, модератор.
   Владелец 22 октября 2026: «владелец мог назначить администратора
   и модераторов, у каждого свои права; администратор — со всеми правами
   владельца; модераторы — блокировать, удалять сообщения, выносить
   предупреждения».
   =============================================================== */

/* Значок администратора группы — в ряду аватарок шапки. */
.gm-gr-sostav-znak-admin {
	background: rgba(193, 5, 55, .92);
	color: #fff;
}

/* Название роли в списке участников. */
.gm-gr-rol-admin {
	color: var(--accent);
	font-weight: 600;
}

/* Предупреждение: раскрывающаяся форма прямо в строке участника. */
.gm-gr-predup {
	display: inline-block;
	position: relative;
}

.gm-gr-predup > summary {
	list-style: none;
	cursor: pointer;
}

.gm-gr-predup > summary::-webkit-details-marker {
	display: none;
}

.gm-gr-predup-forma {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	width: min(280px, 78vw);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s, 12px);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.gm-gr-predup-forma textarea {
	width: 100%;
	min-height: 56px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	resize: vertical;
}

.gm-gr-predup-forma textarea:focus {
	border-color: var(--accent);
	outline: none;
}

@media (max-width: 760px) {

	.gm-gr-predup-forma {
		right: auto;
		left: 0;
		width: min(260px, 86vw);
	}
}