.rooms_content_wrap {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	height: 100%;
	z-index: 2;
	position: fixed;
	top: 0;
	padding-top: 66px;
}
.rooms_content_wrap__fullscreen,
.body__mobile_bare .rooms_content_wrap {
	padding-top: 0;
}
/* мобильный список чатов: под шапкой сайта таб-бар разделов (catalog/tabs.twig), список занимает остаток экрана */
.rooms_content_wrap__tabs {
	display: flex;
	flex-direction: column;
	background: #062541;
}
.rooms_content_wrap__tabs > .rooms_wrap {
	flex: 1;
	min-height: 0;
	height: auto;
}
/* Заголовок и фильтры прокручиваются со списком, общий таб-бар остаётся сверху. */
.rooms_content_wrap__tabs > .rooms_wrap > .rooms_panel {
	overflow-y: auto;
	display: block;
}
.rooms_content_wrap__tabs .rooms_list {
	overflow-y: visible;
}
/* десктоп: position:fixed выше игнорирует раскладку .content__wrap (flex-direction:row-reverse,
   слева content_center с чатом, справа меню пользователя content_left, 377px) - блок цеплялся
   за угол вьюпорта вместо центрирования в своей колонке и наезжал на шапку сайта. На мобильном
   (position:fixed) поведение не трогаем - там нет ни шапки, ни бокового меню */
.body__desktop .rooms_content_wrap {
	position: static;
	height: calc(100vh - 92px); /* 92px = .body__desktop { margin-top } в main.css, а не высота шапки (60px) */
	max-width: none;
	padding-top: 0;
}
/* открытый конкретный чат (.rooms_content_wrap__fullscreen) идёт без шапки сайта вообще
   (см. master.twig: "отдельный чат — своя шапка вместо шапки сайта") - но .body__desktop
   { margin-top: 92px } в main.css универсален для всех десктопных страниц и не в курсе
   этого исключения. Пробовали компенсировать отрицательным margin у самого чата - не
   вышло, у body стоит overflow:hidden и обрезает всё, что вылезает выше его границ.
   Поэтому вместо этого снимаем отступ у самого body через body__rooms_thread
   (master.twig, по аналогии с body__messages_thread) */
.body__rooms_thread {
	margin-top: 0;
}
.body__desktop .rooms_content_wrap__fullscreen {
	height: 100vh;
}
/* открытый чат на десктопе идёт без шапки сайта, но левое меню (content_left/menu.twig)
   рендерится всё равно (см. master.twig) и без привязки к высоте растягивается по
   содержимому - короче колонки с чатом (100vh), из-за чего вся страница получала
   мелкий "хвостовой" скролл. Зажимаем колонку меню по высоте чата и уводим её
   возможное переполнение во внутренний скролл */
.body__desktop.body__rooms_thread .content_left {
	height: 100vh;
	overflow-y: auto;
}
/* тот же хвостовой скролл на странице списка чатов (/rooms/, шапка сайта на месте,
   а не убрана как в конкретном чате) - тут колонка чата не 100vh, а calc(100vh - 92px)
   (см. .body__desktop .rooms_content_wrap выше), зажимаем меню под ту же высоту */
.body__desktop.body__rooms_list .content_left {
	height: calc(100vh - 92px);
	overflow-y: auto;
}

/* список чатов: фон как на главной (main.css body { background: #eff0f2 }),
   раньше тут была тёмно-синяя подложка с "выезжающей" светлой панелью поверх -
   от неё отказались в пользу единого плоского фона */
.rooms_wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #eff0f2;
}
.rooms_panel {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background-color: #eff0f2;
}
.rooms_header {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 10px;
	padding: 12px 15px;
}
.rooms_header__tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	background-color: #fff;
	border-radius: 22px;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.rooms_header__tab {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	padding: 8px 14px;
	border-radius: 18px;
	font-size: 13px;
	font-weight: 600;
	color: #888D9A;
	cursor: pointer;
	white-space: nowrap;
}
.rooms_header__tab_icon {
	flex-shrink: 0;
	fill: #888D9A;
}
.rooms_header__tab__active {
	color: #1868E7;
	background-color: #EAF2FF;
}
.rooms_header__tab__active .rooms_header__tab_icon {
	fill: #1868E7;
}
.rooms_header__tab__with_badge {
	position: relative;
}
.rooms_header__tab_dot {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #FF9F1C;
}
/* три вкладки с иконками не влезают в 360px на мобильном - поджимаем паддинги/шрифт,
   overflow-x: auto на .rooms_header__tabs остаётся страховкой для совсем узких экранов */
.body__mobile .rooms_header {
	gap: 8px;
	padding: 10px 12px;
}
.body__mobile .rooms_header__tabs {
	gap: 2px;
	padding: 3px;
}
.body__mobile .rooms_header__tab {
	gap: 1px;
	padding: 2px 8px;
	font-size: 12px;
}
.body__mobile .rooms_header__tab_icon {
	width: 14px;
	height: 14px;
}
.rooms_create__input {
	flex: 1;
	border: 1px solid #E1E3E8;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
}
.rooms_create__avatar {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	flex-shrink: 0;
	cursor: pointer;
}
.rooms_create__avatar__selected {
	box-shadow: 0 0 0 2px #3B82F6;
	border-radius: 50%;
}
.rooms_create__avatar_placeholder {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #E1E3E8;
	color: #888D9A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}
.rooms_create__avatar_placeholder.hidden {
	display: none;
}
.rooms_create__avatar_img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.rooms_create__avatar_badge {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #59C27D;
	color: #fff;
	font-size: 14px;
	line-height: 26px;
	text-align: center;
}
.rooms_create__privacy {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	width: 100%;
}
.rooms_create__privacy_option {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #242631;
	cursor: pointer;
}
.rooms_search {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
	margin: 10px 5px;
	padding: 8px 12px;
	border-radius: 20px;
	background-color: #fff;
	border: 1px solid #e7ebf2;
}
.rooms_search__icon {
	flex-shrink: 0;
}
.rooms_search__input {
	flex: 1;
	border: none;
	background: none;
	outline: none;
	font-size: 14px;
	color: #242631;
}
.rooms_filters {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}
.rooms_filters .rooms_search {
	flex: 1 1 200px;
	margin: 10px 5px;
}
.rooms_rubric_filter {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0 5px;
	padding: 9px 12px;
	border-radius: 20px;
	border: 1px solid #e7ebf2;
	background-color: #fff;
	font-size: 14px;
	color: #242631;
}
.rooms_rubric_filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
}
.rooms_rubric_filter__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.rooms_rubric_filter__arrow {
	flex: 0 0 auto;
	opacity: 0.6;
}
.rooms_list {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	gap: 5px;
	padding: 5px 5px 20px 5px;
	overflow-y: auto;
}
.rooms_list__hidden {
	display: none;
}
.room_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 9px;
	text-decoration: none;
	color: inherit;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 5px 18px rgba(20, 43, 80, .07);
	transition: background-color .1s ease-out;
}
.room_item:hover {
	background-color: #F7F8FA;
}
.room_item__empty {
	color: #888D9A;
	font-size: 14px;
}
.room_item__disabled {
	opacity: 0.5;
}
.room_item__avatar_wrap {
	position: relative;
	flex-shrink: 0;
}
.room_item__avatar_dot {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #1868E7;
	border: 2px solid #fff;
}
.room_item__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #C85E5F;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 500;
	flex-shrink: 0;
	object-fit: cover;
}
.room_item__avatar__has_photo {
	background-color: transparent;
}
.room_item__info {
	flex: 1;
	min-width: 0;
	line-height:1;
}
.room_item__name {
	font-size: 15px;
	font-weight: 700;
	color: #131415;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.room_item__rubric {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 2px;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 11px;
	line-height: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
}
.room_item__rubric--0 { background-color: #FDE7E9; color: #E5303B; }
.room_item__rubric--1 { background-color: #E5EEFF; color: #1868E7; }
.room_item__rubric--2 { background-color: #E1F4EA; color: #1E8A55; }
.room_item__rubric--3 { background-color: #EFE7FE; color: #7C3AED; }
.room_item__rubric--4 { background-color: #FFF0DB; color: #DD7A00; }
.room_item__rubric--5 { background-color: #F5E6FB; color: #A92FC8; }
/* строка над названием: бейдж рубрики слева, дата последнего сообщения справа */
.room_item__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 18px;
	margin-bottom: 2px;
}
.room_item__meta .room_item__date {
	flex-shrink: 0;
	margin-left: auto;
}
.room_item__meta .room_item__rubric {
	min-width: 0;
	margin-bottom: 0;
}
.rooms_list .room_item__rubric {
	cursor: pointer;
}
.rooms_list .room_item__rubric:hover {
	filter: brightness(0.95);
}
.room_item__unread .room_item__name {
	font-weight: 700;
}
.room_item__count {
	font-size: 12px;
	color: #888D9A;
}
.room_item__sub {
	flex: 0 0 100%;
	min-width: 0;
}
.room_item__preview {
	margin-top: 2px;
	font-size: 13px;
	color: #888D9A;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.room_item__unread .room_item__preview {
	color: #242631;
	font-weight: 400;
}
.room_item__preview__you {
	color: #888D9A;
}
.room_item__unread .room_item__preview__you {
	color: #242631;
}
.room_item__status {
	font-size: 12px;
	color: #C85E5F;
}
.room_item__private_badge {
	font-size: 12px;
	margin-left: 2px;
}
.room_item__admin_badge {
	display: inline-flex;
	vertical-align: -1px;
	margin-right: 2px;
}
.room_item__link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.room_item__subscribe_btn {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background-color: #1868E7;
	box-shadow: 0 3px 10px rgba(24,104,231,.35);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.room_item__subscribe_btn__pending {
	width: auto;
	height: auto;
	padding: 8px 14px;
	border-radius: 16px;
	background-color: #E1E3E8;
	box-shadow: none;
	color: #888D9A;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: default;
}
.room_item__subscribe_btn__text {
	width: auto;
	height: auto;
	padding: 8px 14px;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.room_item__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}
.room_item__date {
	font-size: 12px;
	color: #888D9A;
	white-space: nowrap;
}
.room_item__unread_badge {
	flex-shrink: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background-color: #1868E7;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* конкретный чат */
.room_wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: relative;
}
.room_header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	border-bottom: 1px solid #838383;
	background-color: #062541;
}
.room_header__avatar_wrap {
	position: relative;
	flex-shrink: 0;
}
.room_header__avatar_wrap__editable {
	cursor: pointer;
}
.room_header__avatar_wrap__editable::after {
	content: '\270E';
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #3B82F6;
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
.room_header__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #C85E5F;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	object-fit: cover;
}
.room_header__avatar__has_photo {
	background-color: transparent;
}
.room_header__info {
	flex: 1;
	min-width: 0;
	cursor: pointer;
}
.room_header__name {
	font-size: 18px;
	font-weight: 700;
	color: #fdfdfd;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.room_header__count,
.room_header__status {
	font-size: 13px;
	color: #fdfdfd;
}
.room_header__pending_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-left: 6px;
	border-radius: 8px;
	background-color: #C85E5F;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.room_header__pending_badge.hidden {
	display: none;
}
.room_header__menu {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.room_header__menu_btn {
	border: none;
	background: none;
	padding: 4px;
	display: flex;
	cursor: pointer;
}
.room_header__menu_dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	min-width: 160px;
	background-color: #fff;
	color: #242631;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,.15);
	overflow: hidden;
}
.share_menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	border: none;
	background: none;
	text-align: left;
	padding: 10px 14px;
	font-size: 13px;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.members_panel__share .share_menu__item {
	padding-top: 6px;
	padding-bottom: 6px;
}
.share_menu__item:hover {
	background-color: #F0F1F4;
}
/* строка "Скопировать ссылку" + иконка QR-кода справа */
.share_menu__row {
	display: flex;
	align-items: stretch;
}
.share_menu__row .share_menu__item {
	flex: 1;
	min-width: 0;
}
.share_menu__qr_btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	padding: 0 14px;
	color: inherit;
	cursor: pointer;
}
.share_menu__qr_btn:hover {
	background-color: #F0F1F4;
}
.share_menu__qr_btn svg {
	fill: currentColor;
}
.share_menu__item_logo {
	flex-shrink: 0;
	height: 18px;
	width: auto;
}
.room__notice {
	padding: 10px 15px;
	background-color: #FFF4E5;
	color: #A85D00;
	font-size: 13px;
}
.room_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 15px;
	gap: 2px;
	background-color: #fdfdfd;
	background-image: url(/media/img/rooms/chat_bg_mob.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.room_content__empty_notice {
	margin: auto;
	padding: 10px 16px;
	max-width: 280px;
	text-align: center;
	border-radius: 14px;
	background-color: rgba(36, 38, 49, .55);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	backdrop-filter: blur(2px);
}
.body__desktop .room_content {
	background-image: url(/media/img/rooms/chat_bg_pc.jpg);
}
.room_date_separator {
	display: flex;
	justify-content: center;
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 8px 0;
}
.room_date_separator span {
	padding: 4px 12px;
	border-radius: 12px;
	background-color: #242631;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}
.message_item__wrap {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: 10px;
	margin-top: 10px;
}
.message_item__wrap:first-child,
.room_date_separator + .message_item__wrap {
	margin-top: 0;
}
.message_item__wrap__grouped {
	margin-top: 3px;
}
.message_item__wrap.jc-e {
	justify-content: flex-end;
}
.message_item__wrap.jc-s {
	justify-content: flex-start;
}
.message_item__avatar_link {
	align-self: flex-start;
	flex-shrink: 0;
	line-height: 0;
}
.message_item__wrap__highlight .message_item {
	animation: room_message_highlight 15s ease-out;
}
@keyframes room_message_highlight {
	0%, 60% {
		box-shadow: 0 0 0 4px rgba(255, 159, 28, .9);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 159, 28, 0);
	}
}
.message_item__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	border: 1px solid #ccc;
}
/* В обычной переписке собственные сообщения по-прежнему без аватара и имени. */
.message_item__wrap.jc-e .message_item__avatar_link,
.message_item__out .message_item__author_row,
.message_item__online,
.message_item__reply_button {
	display: none;
}
.message_item {
	position: relative;
	max-width: 85%;
	padding: 4px 12px;
	border-radius: 16px;
	font-size: 13px;
}
@media (hover: none) and (pointer: coarse) {
	.message_item {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}
}
.message_item__in {
	background-color: #eff0f4;
	color: #242631;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
	border: 1px solid #d3dff0;
}
.message_item__in.message_item__tail {
	border-bottom-left-radius: 4px;
}
.message_item__out {
	background-color: #0d2674;
	color: #fff;
	box-shadow: 0 1px 4px rgba(59,130,246,.3);
}
.message_item__out.message_item__tail {
	border-bottom-right-radius: 4px;
}
.message_item__author_row {
	margin-bottom: 2px;
	font-size: 11px;
	line-height: 1.3;
}
.message_item__author {
	font-weight: 500;
	color: #3B82F6;
	text-decoration: none;
}
.message_item__author_role {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-top: 3px;
	padding: 2px 8px;
	border-radius: 12px;
	background: #ffdde2;
	font-size: 11px;
	font-weight: 400;
	color: #D42020;
}
.message_item__reply_quote {
	position: relative;
	margin-bottom: 6px;
	padding: 4px 8px;
	border-radius: 4px;
	border-left: 3px solid #3B82F6;
	background-color: rgba(0, 0, 0, .05);
	cursor: pointer;
}
.message_item__out .message_item__reply_quote {
	border-left-color: rgba(255, 255, 255, .7);
	background-color: rgba(255, 255, 255, .15);
}
.message_item__reply_quote__author {
	font-size: 11px;
	font-weight: 500;
	color: #3B82F6;
}
.message_item__out .message_item__reply_quote__author {
	color: #fff;
}
.message_item__reply_quote__text {
	font-size: 12px;
	opacity: 0.75;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.message_item__text {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 15px;
}
.message_item__link {
	color: #3B82F6;
	text-decoration: underline;
	word-break: break-all;
}
.message_item__quote {
	margin: 4px 0;
	padding: 4px 10px;
	border-left: 3px solid #8B95AF;
	color: #6D7480;
	font-style: italic;
	white-space: pre-wrap;
	word-break: break-word;
}
.message_item__out .message_item__quote {
	border-left-color: rgba(255,255,255,.5);
	color: rgba(255,255,255,.75);
}
.message_item__dt {
	font-size: 11px;
	opacity: 0.6;
	text-align: right;
}
.message_item__menu {
	position: absolute;
	top: 2px;
	right: 4px;
}
.message_item__menu_dropdown {
	min-width: 160px;
	background-color: #fff;
	color: #242631;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,.15);
	overflow: hidden;
}
.message_item__menu_option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.message_item__menu_option svg {
	flex-shrink: 0;
	fill: #7F7C7A;
}
.message_item__menu_option:hover {
	background-color: #F0F1F4;
}

/* Реакции на сообщения */
.message_item__reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.message_item__reactions:empty {
	display: none;
	margin-top: 0;
}
.message_item__reaction {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, .06);
	font-size: 13px;
	line-height: 1.4;
	cursor: default;
}
.message_item__reaction--active {
	background-color: rgba(59, 130, 246, .18);
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .5);
}
.message_item__reaction__count {
	font-size: 11px;
	opacity: .75;
}
.message_item__menu_reactions {
	display: flex;
	gap: 2px;
	padding: 8px 10px;
	border-bottom: 1px solid #EFF1F4;
}
.message_item__menu_reactions__item {
	width: auto;
	padding: 4px 6px;
	font-size: 20px;
	line-height: 1;
	border-radius: 6px;
}
.message_item__reaction_tooltip {
	z-index: 1003;
	max-width: 220px;
	padding: 6px 10px;
	background-color: #242631;
	color: #fff;
	font-size: 12px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	pointer-events: none;
}

/* Telegram-style меню сообщения: оверлей + увеличенная копия пузыря */
.message_item__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color .15s ease-out;
}
.message_item__overlay.active {
	background-color: rgba(0, 0, 0, .45);
}
.message_item__clone {
	position: fixed;
	z-index: 1001;
	transform: scale(1);
	transition: transform .15s ease-out;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	/* клик по копии должен закрывать меню как клик по фону, а не открывать
	   вложенные ссылки/reply-цитату — поэтому клон некликабелен, событие
	   проваливается на .message_item__overlay под ним */
	pointer-events: none;
}
.message_item__clone__active {
	transform: scale(1.04);
}
.message_item__menu_dropdown__floating {
	z-index: 1002;
}
.room_form__reply_preview {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 15px;
	background-color: #EFF1F4;
	border-top: 1px solid #E1E3E8;
	border-left: 3px solid #3B82F6;
}
.room_form__reply_preview.hidden {
	display: none;
}
.room_form__reply_preview__body {
	flex: 1;
	min-width: 0;
}
.room_form__reply_preview__author {
	font-size: 12px;
	font-weight: 600;
	color: #3B82F6;
	margin-bottom: 2px;
}
.room_form__reply_preview__text {
	font-size: 13px;
	color: #888D9A;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.room_form__reply_preview__cancel {
	flex-shrink: 0;
	border: none;
	background: none;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	cursor: pointer;
}
.room_form__reply_preview__cancel:hover {
	opacity: 1;
}
.room_form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 10px 15px;
	background-color: #F4F5F7;
}
.room_form__pill {
	flex: 1;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #E1E3E8;
	border-radius: 20px;
	padding: 2px 12px 2px 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.room_form__input {
	flex: 1;
	box-sizing: border-box;
	border: none;
	background: none;
	padding: 8px 4px;
	font-size: 16px;
	line-height: 20px;
	resize: none;
	height: 36px;
	max-height: 136px;
	overflow-y: hidden;
}
.room_form__input:focus {
	outline: none;
}
.room_form__send {
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: #0d2674;
	border: none;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.room_form__send:focus,
.room_form__send:active {
	outline: none;
	box-shadow: none;
}
.room_form__send:disabled {
	background-color: #9db8e8;
}
.room_subscribe {
	padding: 15px;
	display: flex;
	justify-content: center;
	border-top: 1px solid #EFF1F4;
}

/* страница редактирования чата */
.room_edit__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 20px;
}
.room_edit__avatar {
	width: 96px;
	height: 96px;
}
.room_edit__avatar .room_header__avatar {
	width: 96px;
	height: 96px;
	font-size: 32px;
}
.room_edit__avatar.room_header__avatar_wrap__editable::after {
	width: 26px;
	height: 26px;
	font-size: 14px;
	line-height: 26px;
}
.room_edit__hint {
	margin-top: 10px;
	font-size: 12px;
	color: #888D9A;
}
.room_edit__label {
	align-self: flex-start;
	margin-top: 25px;
	font-size: 13px;
	color: #888D9A;
}
.room_edit__title {
	align-self: stretch;
	margin-top: 6px;
}
/* кнопка выбора рубрики в формах чата (открывает модалку rubric_modal) */
.rooms_rubric_pick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: #fff;
	font-family: inherit;
	text-align: left;
	color: #242631;
	cursor: pointer;
}
.rooms_rubric_pick--empty .rooms_rubric_pick__name {
	color: #888D9A;
}
.rooms_rubric_pick__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.rooms_rubric_pick__arrow {
	flex: 0 0 auto;
	opacity: 0.6;
}
.room_edit__save_btn {
	align-self: stretch;
	margin-top: 25px;
}
.room_edit__delete_btn {
	align-self: stretch;
	margin-top: 40px;
}

/* панель участников */
.room_members_panel,
.room_invite_followers_panel,
.room_invite_links_panel {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 5;
	flex-direction: column;
	box-shadow: -2px 0 8px rgba(0,0,0,.08);
}
.room_members_panel.active,
.room_invite_followers_panel.active,
.room_invite_links_panel.active {
	display: flex;
}
/* панель участников: элементы, которых нет в общем user_picker.css
   (кнопки модерации, бейджи роли, шапка-профиль группы, футер с выходом/удалением) -
   это специфика именно панели участников комнаты, не общего компонента выбора пользователей */
.members_panel__pending_actions,
.members_panel__active_actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	width: 100%;
	padding-left: 50px;
}
/* на мобиле панель узкая - кнопки не помещаются в строку с именем, поэтому
   width:100% принудительно уводит их на вторую строку. На ПК панель широкая,
   места хватает - оставляем кнопки в одной строке с именем (members_panel__link
   отжимает их вправо за счёт flex:1) */
.body__desktop .members_panel__pending_actions,
.body__desktop .members_panel__active_actions {
	width: auto;
	padding-left: 0;
	margin-left: auto;
}
.members_panel__owner_badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	font-size: 11px;
	color: #fff;
	background-color: #3B82F6;
	border-radius: 4px;
}
.members_panel__blocked_badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	font-size: 11px;
	color: #fff;
	background-color: #C85E5F;
	border-radius: 4px;
}
.members_panel__link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.members_panel__profile {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 10px 15px;
	border-bottom: 1px solid #EFF1F4;
}
.members_panel__profile_avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
}
.members_panel__profile_info {
	min-width: 0;
}
.members_panel__profile_avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.members_panel__profile_avatar__placeholder {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #C85E5F;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 500;
}
.members_panel__profile_title {
	font-size: 15px;
	font-weight: 700;
	word-break: break-word;
}
.members_panel__profile_count {
	margin-top: 1px;
	font-size: 12px;
	color: #888D9A;
}
.members_panel__profile_edit {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 4px 10px;
	border-radius: 14px;
	background-color: #EAF2FF;
	color: #3B82F6;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}
.members_panel__section_label {
	padding: 10px 15px 4px;
	font-size: 12px;
	font-weight: 600;
	color: #888D9A;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.members_panel__share {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #EFF1F4;
}
/* тумблер push-уведомлений чата в панели "Информация" (вид - как .add_switch в settings.css) */
.members_panel__notify {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 15px;
	border-bottom: 1px solid #EFF1F4;
	font-size: 14px;
	color: #131415;
	cursor: pointer;
}
.members_panel__notify svg {
	fill: #888D9A;
}
.members_panel__notify_title {
	flex: 1;
}
.members_panel__notify_input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.members_panel__notify_switch {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 24px;
	border-radius: 12px;
	background: #d1d5db;
	transition: background-color .2s;
}
.members_panel__notify_switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: transform .2s;
}
.members_panel__notify_input:checked + .members_panel__notify_switch {
	background: #1868E7;
}
.members_panel__notify_input:checked + .members_panel__notify_switch::after {
	transform: translateX(16px);
}
.members_panel__notify_input:focus-visible + .members_panel__notify_switch {
	box-shadow: 0 0 0 3px rgba(24, 104, 231, .25);
}
/* перечёркнутый колокольчик: уведомления чата отключены */
.room_muted_icon {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -1px;
}
.room_item__muted {
	margin-left: 2px;
	color: #888D9A;
}
.room_header__muted {
	margin-left: 4px;
	color: rgba(253, 253, 253, .7);
}
.room_header__muted .room_muted_icon {
	width: 16px;
	height: 16px;
}
.room_item__unread_badge.room_item__unread_badge__muted {
	background-color: #A9AEBA;
}
.members_panel__footer {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #EFF1F4;
	border-bottom: 1px solid #EFF1F4;
}
.members_panel__footer_btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	border: none;
	background: none;
	text-align: left;
	padding: 6px 15px;
	font-size: 14px;
	color: #C85E5F;
	cursor: pointer;
}
.members_panel__footer_btn svg {
	fill: #C85E5F;
}
.members_panel__footer_btn:hover {
	background-color: #FBEEEE;
}
.invite_links_panel__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #EFF1F4;
}
.invite_links_panel__select {
	padding: 8px 10px;
	border: 1px solid #DCDFE5;
	border-radius: 6px;
	font-size: 14px;
}
.invite_links_panel__checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #222;
	cursor: pointer;
}
.invite_links_panel__item {
	justify-content: space-between;
}
.invite_links_panel__info {
	flex: 1;
	min-width: 0;
}
.invite_links_panel__url {
	font-size: 13px;
	color: #222;
	word-break: break-all;
}
.invite_links_panel__meta {
	font-size: 12px;
	color: #888D9A;
	margin-top: 2px;
}

/* вложения в форме отправки сообщения */
.room_form__clip_file {
	border: none;
	outline: none;
	height: 36px;
	box-sizing: border-box;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.room_form__upload_file__wrap {
	display: block;
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	padding: 0 15px;
}
.room_form__upload_file {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
}
.room_form__upload_file:not(:empty) {
	margin-bottom: 8px;
}
/* карточка превью вложения - как в личных сообщениях (см. .messages__upload_file__item в messages.css) */
.room_form__upload_file__item {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 110px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.room_form__upload_file__item__thumb {
	position: relative;
	width: 100%;
	height: 72px;
	background-color: #F0F1F4;
}
.room_form__upload_file__item__img,
.room_form__upload_file__item__file {
	width: 100%;
	height: 100%;
	z-index: 0;
}
.room_form__upload_file__item__img {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.room_form__upload_file__item__file {
	background-color: #F0F1F4;
	display: flex;
	justify-content: center;
	align-items: center;
}
.room_form__upload_file__item__badge {
	position: absolute;
	left: 6px;
	bottom: 6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.room_form__upload_file__item__remove {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.room_form__upload_file__item__info {
	padding: 6px 8px 8px;
	white-space: normal;
}
.room_form__upload_file__item__name {
	font-size: 11px;
	line-height: 14px;
	color: #22262A;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.room_form__upload_file__item__size {
	font-size: 11px;
	line-height: 14px;
	color: #9AA0A6;
	margin-top: 2px;
}

/* вложения в сообщении чата */
.message_item__files {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 6px;
	margin: 6px 0;
}
/* сообщение с фото одной ширины, как бы ни был длинен текст; на узком экране ужимается по max-width.
   overflow скругляет углы фото по пузырю: меню и подсказки реакций живут в оверлее и body, их не обрежет */
.message_item__with_photo {
	width: 386px;
	max-width: 92%;
	overflow: hidden;
}
/* входящему на мобиле ширину ограничивает не max-width, а аватар: заступаем на боковой отступ ленты */
.message_item__in.message_item__with_photo {
	margin-right: -8px;
}
/* фото от края до края пузыря: отрицательные поля съедают его боковой padding */
.message_item__photos {
	width: auto;
	margin-left: -12px;
	margin-right: -12px;
}
.message_item__file_image {
	display: block;
	width: 100%;
}
.message_item__file_image img {
	display: block;
	width: 100%;
	height: auto;
}
.message_item__file {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.message_item__file_icon {
	flex-shrink: 0;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	padding: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.message_item__file_name {
	font-size: 13px;
	font-weight: 500;
	word-break: break-word;
}

/* PROFMSG room directory, based on docs/mockups/chats_activate.png:
   тёмная подложка (на мобиле под ней таб-бар разделов), светлая скруглённая поверхность
   с заголовком «Чаты», лупой (спойлер с поиском и рубрикой) и «Создать», ниже вкладки-пилюли и список */
.rooms_wrap--profmsg { background: #062541; }
/* светло-голубая поверхность, как на макете (#eff4fd под шапкой раздела и вкладками) */
.rooms_wrap--profmsg .rooms_panel { border-radius: 22px 22px 0 0; background: #eff4fd; }
.rooms_wrap--profmsg .rooms_head { display: flex; align-items: center; flex-shrink: 0; gap: 10px; padding: 14px 13px 4px; }
.rooms_wrap--profmsg .rooms_head__title { flex: 1; min-width: 0; margin: 0; color: #090e30; font-size: 28px; font-weight: 800; line-height: 1.2; }
.rooms_wrap--profmsg .rooms_head__search,
.rooms_wrap--profmsg .rooms_head__create {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 28px;
	border: 1px solid #c9d8f4;
	border-radius: 20px;
	background: #e9f0fd;
	color: #090e30;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
}
.rooms_wrap--profmsg .rooms_head__search { width: 28px; padding: 0; }
.rooms_wrap--profmsg .rooms_head__search svg { width: 16px; height: 16px; fill: #1868e7; }
.rooms_wrap--profmsg .rooms_head__search__active { border-color: #1868e7; background: #dce8fc; }
/* поиск/рубрика включены, а спойлер свёрнут - точка на лупе */
.rooms_wrap--profmsg .rooms_head__search__filtered:not(.rooms_head__search__active)::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ffb800; }
.rooms_wrap--profmsg .rooms_head__create { gap: 6px; padding: 0 16px 0 12px; font-size: 14px; font-weight: 500; }
.rooms_wrap--profmsg .rooms_head__create svg { width: 14px; height: 14px; fill: #090e30; }
.rooms_wrap--profmsg .rooms_head__create:active,
.rooms_wrap--profmsg .rooms_head__search:active { transform: scale(.96); }
.rooms_wrap--profmsg .rooms_header { padding: 8px 10px 4px; gap: 11px; }
/* ряд вкладок по макету: компактные белые плашки с иконками вплотную, активная - синяя с жёлтой обводкой
   (обводка - inset-тенью, а не border, чтобы рамка не съедала ширину у неактивных).
   В 360px все пять влезают впритык (12px/15px), на совсем узких ряд прокручивается вбок без полосы */
.rooms_wrap--profmsg .rooms_header__tabs { background: transparent; box-shadow: none; padding: 3px 1px 6px; margin: -3px -1px -6px; gap: 3px; border-radius: 0; scrollbar-width: none; }
.rooms_wrap--profmsg .rooms_header__tabs::-webkit-scrollbar { display: none; }
.rooms_wrap--profmsg .rooms_header__tab {
	position: relative;
	flex: 1 0 auto;
	justify-content: center;
	gap: 3px;
	height: 26px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 400;
	border: 0;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 2px 6px #284e7614;
	color: #090e30;
}
.rooms_wrap--profmsg .rooms_header__tab__all { min-width: 46px; }
.rooms_wrap--profmsg .rooms_header__tab_icon { display: block; flex-shrink: 0; width: 15px; height: 15px; fill: #1868e7; }
.rooms_wrap--profmsg .rooms_header__tab__active { background: #245a87; color: #fff; box-shadow: inset 0 0 0 2px #ffd52f, 0 2px 6px #245a8740; }
.rooms_wrap--profmsg .rooms_header__tab__active .rooms_header__tab_icon { fill: #fff; }
.rooms_wrap--profmsg .rooms_filters { display: none; padding: 6px 13px; gap: 8px; }
.rooms_wrap--profmsg .rooms_filters.rooms_filters__open { display: flex; }
.rooms_wrap--profmsg .rooms_filters .rooms_search { margin: 0; padding: 0 13px; height: 38px; border: 1px solid #c9d8f4; border-radius: 20px; background: #fff; }
.rooms_wrap--profmsg .rooms_rubric_filter { margin: 0; height: 38px; padding: 0 14px; border: 1px solid #c9d8f4; border-radius: 20px; background: #fff; color: #090e30; font-size: 14px; }
.rooms_wrap--profmsg .rooms_search__icon { width: 16px; height: 16px; fill: #606e99; }
.rooms_wrap--profmsg .rooms_search__input { background: transparent; border: 0; color: #090e30; font-size: 16px; min-width: 0; }
.rooms_wrap--profmsg .rooms_search__input::placeholder { color: #8790a6; opacity: 1; }
.rooms_wrap--profmsg .rooms_list { padding: 10px 13px 24px; gap: 5px; background: transparent; }
.rooms_wrap--profmsg .room_item { flex-shrink: 0; flex-wrap: wrap; min-height: 54px; padding: 2px 13px; gap: 16px; border-radius: 14px; border: 1px solid #fff; box-shadow: 0 2px 3px #27376412; background: linear-gradient(110deg, #fff, #fcfdff); }
.rooms_wrap--profmsg .room_item:hover { background: #edf3ff; }
.rooms_wrap--profmsg .room_item__link { gap: 16px; flex-wrap: wrap; }
.rooms_wrap--profmsg .room_item__sub { flex: 0 0 100%; min-width: 0; }
.rooms_wrap--profmsg .room_item__sub > * { margin-top: 0; }
.rooms_wrap--profmsg .room_item__avatar { width: 42px; height: 42px; font-size: 24px; background-color: #5a79b8; }
.rooms_wrap--profmsg .room_item:nth-child(3n + 1) .room_item__avatar:not(img) { background: #b57b17; }
.rooms_wrap--profmsg .room_item:nth-child(3n) .room_item__avatar:not(img) { background: #662394; }
.rooms_wrap--profmsg .room_item__name { font-size: 16px; color: #090e30; }
.rooms_wrap--profmsg .room_item__date { font-size: 12px; color: #647bb6; }
.rooms_wrap--profmsg :is(.room_item__count, .room_item__preview) { margin-top: 3px; font-size: 11px; color: #8795bd; }
.rooms_wrap--profmsg .room_item__right { align-self: stretch; justify-content: center; }
.rooms_wrap--profmsg .room_item__subscribe_btn { white-space: normal; max-width: 110px; }
.rooms_wrap--profmsg .rooms_search:focus-within, .rooms_wrap--profmsg .rooms_rubric_filter:focus-visible { border-color: #1868e7; outline: 0; }
.rooms_wrap--profmsg :is(a, input:not(.rooms_search__input)):focus-visible { outline: 2px solid #e8b814; outline-offset: 2px; }
@media (max-width: 380px) {
	.rooms_wrap--profmsg .rooms_head__title { font-size: 24px; }
	.rooms_wrap--profmsg .rooms_head__create { padding-inline: 10px 12px; font-size: 14px; }
	.rooms_wrap--profmsg .rooms_rubric_filter { font-size: 12px; }
	.rooms_wrap--profmsg .room_item, .rooms_wrap--profmsg .room_item__link { gap: 9px; }
	.rooms_wrap--profmsg .room_item { padding-inline: 9px; }
	.rooms_wrap--profmsg .room_item__avatar { width: 36px; height: 36px; font-size: 20px; }
	.rooms_wrap--profmsg .room_item__name { font-size: 14px; }
	.rooms_wrap--profmsg .room_item__date { font-size: 10px; }
}
@media (min-width: 400px) {
	.rooms_wrap--profmsg .rooms_header__tab { gap: 4px; padding: 0 8px; font-size: 13px; }
	.rooms_wrap--profmsg .rooms_header__tab_icon { width: 16px; height: 16px; }
}
@media (min-width: 768px) {
	.rooms_wrap--profmsg .rooms_head { padding: 18px 22px 6px; }
	.rooms_wrap--profmsg .rooms_header { padding: 8px 22px 6px; }
	.rooms_wrap--profmsg .rooms_header__tabs { gap: 6px; }
	.rooms_wrap--profmsg .rooms_header__tab { height: 40px; gap: 6px; padding: 0 12px; font-size: 14px; border-radius: 13px; }
	.rooms_wrap--profmsg .rooms_header__tab_icon { width: 18px; height: 18px; }
	.rooms_wrap--profmsg .rooms_filters { padding: 8px 22px; }
	.rooms_wrap--profmsg .rooms_list { padding: 18px 22px 30px; gap: 12px; }
	.rooms_wrap--profmsg .room_item { min-height: 82px; padding: 7px 18px; }
	.rooms_wrap--profmsg .room_item__avatar { width: 48px; height: 48px; font-size: 26px; }
	.rooms_wrap--profmsg .room_item__name { font-size: 18px; }
}
.rooms_wrap--profmsg .rooms_header__tab { font-family: inherit; }
.rooms_wrap--profmsg .rooms_header__tab:focus-visible { outline: 2px solid #1868e7; outline-offset: 1px; }
.rooms_wrap--profmsg :is(.room_item, .room_item__link) { row-gap: 0; }
.rooms_wrap--profmsg .room_item__sub { margin-top: 0; }

/* модалка QR-кода ссылки на чат (PopUper со style = room_qr_modal), префикс .popuper перебивает popuper.css */
.popuper.room_qr_modal {
	width: 340px;
	max-width: 94vw;
	min-width: 0;
}
.popuper.room_qr_modal .popuper__body {
	align-items: center;
	padding: 4px 20px 0;
}
.room_qr__card {
	width: 100%;
	max-width: 280px;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(6,37,65,.15);
	overflow: hidden;
}
.room_qr__card canvas {
	display: block;
	width: 100%;
	height: auto;
}
.room_qr__hint {
	margin-top: 12px;
	font-size: 13px;
	color: #888D9A;
	text-align: center;
}
.popuper.room_qr_modal .popuper__controls {
	padding: 16px 20px 20px;
	background: #fff;
}
.popuper.room_qr_modal .popuper__controls button {
	width: 100%;
	padding: 12px 15px;
	background: #062541;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
}

/* длинное сообщение свёрнуто (messages.js: msgCollapseLongTexts), по тапу на кнопку раскрывается */
.message_item__text--collapsed {
	position: relative;
	overflow: hidden;
}
.message_item__text--collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(239, 240, 244, 0), #eff0f4);
}
.message_item__out .message_item__text--collapsed::after {
	background: linear-gradient(to bottom, rgba(13, 38, 116, 0), #0d2674);
}
.message_item__more {
	padding: 4px 0 2px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #3B82F6;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.message_item__out .message_item__more {
	color: #fff;
}

/* каналы /rooms/: бейдж в списке */
.room_item__channel_badge {
	display: inline-flex;
	vertical-align: -1px;
	margin-right: 2px;
}

/* видео в постах канала (конвейер utils.video_content) */
.message_item__videos {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 6px;
	margin: 6px 0;
}
.message_item__video {
	width: 100%;
	max-width: 420px;
	border-radius: 10px;
	background: #000;
}
.message_item__video_pending {
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.15);
	font-size: 13px;
	color: inherit;
}

/* ссылка на обсуждение сообщения чата или канала */
.message_item__comments {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	align-self: stretch;
	flex-shrink: 0;
	box-sizing: border-box;
	width: calc(100% + 24px);
	margin: 8px -12px -4px;
	padding: 9px 12px;
	border-top: 1px solid #d3dff0;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	background: rgba(26, 111, 212, .08);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #1a6fd4;
	text-decoration: none;
	transition: background-color .15s;
}
.message_item__comments::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
	margin: 0 2px 0 auto;
}
.message_item__comments svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.message_item__comments:hover,
.message_item__comments:focus-visible {
	background: rgba(26, 111, 212, .15);
	text-decoration: none;
}
.message_item__out .message_item__comments {
	color: #fff;
	border-top-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .12);
}
.message_item__out .message_item__comments:hover,
.message_item__out .message_item__comments:focus-visible {
	background: rgba(255, 255, 255, .22);
}

/* Цвета обычной ленты чата — как у комментариев в обсуждении поста. */
.room_chat .room_content,
.body__desktop .room_chat .room_content {
	background: radial-gradient(ellipse at top left, #f8faff, #e7f0ff);
}
.room_chat .message_item__in,
.room_chat .message_item__out {
	background: #eaf3ff;
	border: 1px solid #bed3ef;
	color: #101525;
	box-shadow: 0 3px 7px #203d6615;
}
.room_chat .message_item__text--collapsed::after {
	background: linear-gradient(transparent, #eaf3ff);
}
.room_chat .message_item__in {
	background: #fff;
	border-color: #d3dff0;
}
.room_chat .message_item__in .message_item__text--collapsed::after {
	background: linear-gradient(transparent, #fff);
}
.room_chat .message_item__out .message_item__more,
.room_chat .message_item__out .message_item__reply_quote__author {
	color: #0640ad;
}
.room_chat .message_item__out .message_item__reply_quote {
	border-left-color: #3b82f6;
	background: rgba(0, 0, 0, .05);
}
.room_chat .message_item__out .message_item__quote {
	border-left-color: #8b95af;
	color: #6d7480;
}
.room_chat .message_item__out .message_item__comments {
	color: #1a6fd4;
	border-top-color: #bed3ef;
	background: rgba(26, 111, 212, .08);
}
.room_chat .message_item__out .message_item__comments:hover,
.room_chat .message_item__out .message_item__comments:focus-visible {
	background: rgba(26, 111, 212, .15);
}

/* плашка «в канале пишет только автор» */
.room_subscribe__note {
	padding: 10px 16px;
	font-size: 13px;
	line-height: 1.45;
	color: #8a8f98;
	text-align: center;
}

/* страница обсуждения поста канала */
.comments_page__post {
	flex-shrink: 0;
	padding: 12px;
	margin-bottom: 20px;
	border: 1px solid #d3dff0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(6, 37, 65, .08);
}
.comments_page__post .room_date_separator {
	position: static;
	margin: 0 0 12px;
}
.comments_page__post .room_date_separator span {
	background: #eff0f4;
	color: #4b5563;
}
.comments_page__post .message_item {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #242631;
}
.comments_page__post .message_item__in.message_item__with_photo {
	margin-right: 0;
}
/* карточка поста без пузыря и шириной с ленту: фото во всю её ширину было бы огромным */
.comments_page__post .message_item__photos {
	margin-left: 0;
	margin-right: 0;
}
.comments_page__post .message_item__file_image {
	max-width: 360px;
}
.comments_page__post .message_item__file_image img {
	border-radius: 8px;
}
.comments_page__post.message_item__clone {
	box-sizing: border-box;
}
.comments_page__post .message_item__out .message_item__quote {
	border-left-color: #8B95AF;
	color: #6D7480;
}
.comments_page__post .message_item__out .message_item__more {
	color: #1a6fd4;
}
.comments_page__post .message_item__out .message_item__text--collapsed::after {
	background: linear-gradient(transparent, #fff);
}
.comments_page__post .message_item__text {
	font-size: 15px;
	line-height: 1.5;
}
.comments_page__label {
	display: flex;
	align-items: center;
	align-self: center;
	gap: 4px;
	flex-shrink: 0;
	margin: 0 0 12px;
	padding: 6px 14px;
	border: 1px solid #8b95af;
	border-radius: 20px;
	background: #fff;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
	color: #062541;
}
.comments_page__count {
	font: inherit;
	color: inherit;
}
.comments_page__list {
	flex-shrink: 0;
}
.comments_page__list .message_item__wrap__tail {
	margin-bottom: 2px;
}
.comments_page__empty {
	padding: 16px;
	border-radius: 12px;
	background: #fff;
	font-size: 13px;
	color: #4b5563;
	text-align: center;
}
.room_content__comments {
	padding-bottom: 20px;
}

/* прикрепление видео в форме отправки */
.room_form__clip_video {
	display: inline-flex;
	cursor: pointer;
}
.room_form__upload_video__wrap {
	padding: 0 12px 6px;
}
.room_form__upload_video {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.room_form__upload_video__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 30px 8px 10px;
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.12);
}
.room_form__upload_video__name {
	max-width: 260px;
	overflow: hidden;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.room_form__upload_video__status {
	font-size: 12px;
	color: #8a8f98;
}
.room_form__upload_video__cancel {
	position: absolute;
	right: 8px;
	padding: 4px;
	border: 0;
	background: none;
	font-size: 12px;
	cursor: pointer;
	color: #8a8f98;
}

/* дропдаун кнопки «Создать»: Чат / Канал */
.rooms_head__create_wrap {
	position: relative;
	flex-shrink: 0;
}
.rooms_create_menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	min-width: 160px;
	padding: 4px;
	border: 1px solid #e3e8f2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(9, 14, 48, 0.14);
}
.rooms_create_menu.hidden {
	display: none;
}
.rooms_create_menu__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 8px;
	color: #090e30;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.rooms_create_menu__item:hover {
	background: #e9f0fd;
}
.rooms_create_menu__item svg {
	fill: #1868e7;
}