.msgr,
.notif-pop {
	--soc-text: var(--tt);
	--soc-muted: var(--tt-lighter);
	--soc-bg: var(--bg);
	--soc-bg-soft: var(--bg-darker);
	--soc-bdc: var(--bdc);
	--soc-red: #eb4d4b;
	--soc-green: #3ac47d;
}

.user__friends-list {display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 20px;
	padding: 20px;}
.user__friends-card {display: grid; grid-template-columns: 88px 1fr; align-items: start; gap: 16px;
	min-width: 0; color: var(--tt);}
.user__friends-avatar {position: relative;}
.user__friends-avatar img {aspect-ratio: 1 / 1; width: 100%; border-radius: 6px; object-fit: cover;}
.user__friends-online {position: absolute; display: block; bottom: -2px; right: -2px; width: 16px;
	height: 16px; border-radius: 50%; background-color: #3ac47d; border: 2px solid var(--bg);}
.user__friends-card-name {min-width: 0; padding-top: 4px; font-size: 15px; line-height: 1.25;
	overflow-wrap: anywhere;}
.user__friends-card:hover .user__friends-card-name {color: var(--accent-2);}
.user__friends-none {padding: 30px 20px; text-align: center; color: var(--tt-lighter); font-size: 14px;}
.user__friends-req {display: flex; gap: 8px; margin-top: 10px; grid-column: 2;}
.user__friends-req .btn {font-size: 13px; padding: 6px 12px; border-radius: 6px; cursor: pointer;}
.user__friends-req .btn-primary {background-color: var(--bg-btn); color: var(--tt-btn);}
.user__friends-req .btn-primary:hover {background-color: var(--bg-btn-hover);}
.user__friends-req .btn-secondary {background-color: var(--bg-darker); color: var(--tt);}
.user__friends-req .btn-secondary:hover {background-color: var(--bdc);}
.user__friends-list li {display: grid;}

@media screen and (max-width: 700px) {
	.user__friends-list {grid-template-columns: 1fr; padding: 14px;}
	.user__friends-card {grid-template-columns: 72px 1fr; gap: 12px;}
}

.us2-actions {gap: 10px; flex-wrap: wrap;}
.us2-act-btn {display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0;
	background-color: var(--bg-btn); color: var(--tt-btn); border-radius: 6px; white-space: nowrap;
	font: inherit; cursor: pointer;}
.us2-act-btn:hover {background-color: var(--bg-btn-hover); color: var(--tt-btn);}
.us2-act-btn--quiet {background-color: var(--bg-darker); color: var(--tt);}
.us2-act-btn--quiet:hover {background-color: var(--bdc); color: var(--tt);}

.header-icon {position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; font-size: 18px; cursor: pointer; color: var(--tt);}
.header-icon:hover {opacity: 0.6;}
.header-icon__badge {position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
	display: flex; align-items: center; justify-content: center; background: #eb4d4b; color: #fff;
	font-size: 10px; font-weight: 700; border-radius: 9px; line-height: 1;}
.header-notif {position: relative;}

.notif-pop {position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; width: 380px; max-width: 92vw;
	background: var(--soc-bg); border: 1px solid var(--soc-bdc); border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.25); overflow: hidden; color: var(--soc-text);}
.notif-pop[hidden] {display: none;}
.notif-pop__head {display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px;}
.notif-pop__title {font-size: 20px; font-weight: 500;}
.notif-pop__menu {position: relative;}
.notif-pop__menu-btn {color: var(--soc-muted); font-size: 18px; cursor: pointer; padding: 4px 8px;
	background: none; border: 0;}
.notif-pop__menu-btn:hover {color: var(--soc-text);}
.notif-pop__menu-drop {position: absolute; right: 0; top: calc(100% + 6px); width: 260px; z-index: 5;
	background: var(--soc-bg); border: 1px solid var(--soc-bdc); border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 6px;}
.notif-pop__menu-drop[hidden] {display: none;}
.notif-pop__menu-drop button {display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
	padding: 9px 12px; border-radius: 6px; color: var(--soc-text); font: inherit; font-size: 14px;
	background: none; border: 0; cursor: pointer;}
.notif-pop__menu-drop button:hover {background: var(--soc-bg-soft);}
.notif-pop__tabs {display: flex; gap: 8px; padding: 0 16px 10px;}
.notif-pop__tab {padding: 6px 12px; border-radius: 6px; background: none; border: 0; font: inherit;
	color: var(--soc-muted); font-size: 14px; cursor: pointer;}
.notif-pop__tab.is-active {background: var(--accent-2); color: #fff;}
.notif-pop__list {max-height: 360px; overflow-y: auto;}
.notif-pop__empty {padding: 26px 16px; text-align: center; color: var(--soc-muted); font-size: 14px;}
.notif-pop__all {display: block; text-align: center; padding: 14px; border-top: 1px solid var(--soc-bdc);
	color: var(--soc-text); font-size: 15px;}
.notif-pop__all:hover {color: var(--accent-2);}

.notif-pop--page {position: static; width: auto; max-width: none; box-shadow: none;}
.notif-pop--page .notif-pop__title {font-size: 28px;}
.notif-pop--page .notif-pop__list {max-height: none;}

.notif-item {display: flex; gap: 12px; padding: 12px 16px; position: relative;}
.notif-item + .notif-item {border-top: 1px solid var(--soc-bdc);}
.notif-item.is-unread {background: var(--soc-bg-soft);}
.notif-item__foto {width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; object-fit: cover;}
.notif-item__body {flex: 1; min-width: 0; padding-right: 20px;}
.notif-item__text {font-size: 14px; line-height: 1.35;}
.notif-item__actor {font-weight: 500;}
.notif-item__ago {color: var(--soc-muted); font-size: 12px; margin-top: 3px;}
.notif-item__actions {display: flex; gap: 8px; margin-top: 10px;}
.notif-item__accept, .notif-item__decline {display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 14px; border: 0; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer;}
.notif-item__accept {background: var(--accent-2); color: #fff;}
.notif-item__decline {background: var(--soc-bg-soft); color: var(--soc-text);}
.notif-item__status {color: var(--soc-green); font-size: 13px; margin-top: 8px;}
.notif-item__del {position: absolute; right: 12px; top: 14px; color: var(--soc-muted); font-size: 13px;
	background: none; border: 0; opacity: 0; cursor: pointer;}
.notif-item:hover .notif-item__del {opacity: 1;}
.notif-item__del:hover {color: var(--soc-red);}

.notif-item--ep .notif-item__foto {width: 48px; height: 68px; border-radius: 4px;}
.notif-item__title {display: block; font-weight: 500; font-size: 15px; line-height: 1.25;
	color: var(--soc-text); margin-bottom: 3px;}
.notif-item__title:hover {color: var(--accent-2);}

.msgr {display: grid; grid-template-columns: 300px 1fr; min-height: 70vh; max-height: 78vh;
	overflow: hidden; background: var(--soc-bg); border: 1px solid var(--soc-bdc); border-radius: 8px;
	color: var(--soc-text);}
.msgr__side {border-right: 1px solid var(--soc-bdc); display: flex; flex-direction: column; min-height: 0;}
.msgr__title {font-size: 24px; font-weight: 500; padding: 18px 18px 12px;}
.msgr__search {position: relative; padding: 0 14px 14px;}
.msgr__search span[class*="fa-"] {position: absolute; left: 28px; top: 11px; font-size: 13px;
	color: var(--soc-muted);}
.msgr__search input {width: 100%; padding: 9px 12px 9px 38px; border: 1px solid var(--soc-bdc);
	border-radius: 20px; background: var(--soc-bg-soft); color: var(--soc-text); font: inherit;
	font-size: 14px; outline: none;}
.msgr__list {flex: 1; overflow-y: auto; min-height: 0;}
.msgr__empty {padding: 24px 16px; text-align: center; color: var(--soc-muted); font-size: 14px;}
.msgr__item {display: flex; gap: 12px; width: 100%; text-align: left; padding: 12px 16px; cursor: pointer;
	background: none; border: 0; color: var(--soc-text); font: inherit;}
.msgr__item:hover {background: var(--soc-bg-soft);}
.msgr__item.is-active {background: var(--soc-bg-soft); box-shadow: inset 3px 0 0 var(--accent-2);}
.msgr__item-foto {width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.msgr__item-body {flex: 1; min-width: 0;}
.msgr__item-top {display: flex; align-items: baseline; justify-content: space-between; gap: 8px;}
.msgr__item-name {font-weight: 500; font-size: 15px;}
.msgr__item-ago {color: var(--soc-muted); font-size: 11px; flex-shrink: 0;}
.msgr__item-last {color: var(--soc-muted); font-size: 13px; margin-top: 2px; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;}
.msgr__item-unread {display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
	height: 18px; padding: 0 5px; border-radius: 9px; background: var(--soc-red); color: #fff;
	font-size: 11px; font-weight: 700;}

.msgr__chat {display: flex; flex-direction: column; min-height: 0; min-width: 0;}
.msgr__placeholder {flex: 1; display: flex; align-items: center; justify-content: center;
	color: var(--soc-muted); font-size: 15px; padding: 20px; text-align: center;}
.msgr__placeholder[hidden] {display: none;}
.msgr__room {flex: 1; display: flex; flex-direction: column; min-height: 0;}
.msgr__room[hidden] {display: none;}
.msgr__head {display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 16px; border-bottom: 1px solid var(--soc-bdc);}
.msgr__head-user {display: flex; align-items: center; gap: 12px; color: var(--soc-text);}
.msgr__head-foto {width: 44px; height: 44px; border-radius: 50%; object-fit: cover;}
.msgr__head-name {font-weight: 500; font-size: 16px;}
.msgr__head-status {color: var(--soc-muted); font-size: 12px; margin-top: 1px;}
.msgr__head-status.is-online {color: var(--soc-green);}
.msgr__menu {position: relative;}
.msgr__menu-btn {width: 38px; height: 38px; border-radius: 6px; color: var(--soc-muted); font-size: 17px;
	background: none; border: 0; cursor: pointer;}
.msgr__menu-btn:hover {color: var(--soc-text); background: var(--soc-bg-soft);}
.msgr__menu-drop {position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 240px;
	background: var(--soc-bg); border: 1px solid var(--soc-bdc); border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 6px;}
.msgr__menu-drop[hidden] {display: none;}
.msgr__menu-drop button {display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
	padding: 9px 12px; border-radius: 6px; color: var(--soc-text); font: inherit; font-size: 14px;
	background: none; border: 0; cursor: pointer;}
.msgr__menu-drop button:hover {background: var(--soc-bg-soft);}
.msgr__menu-danger {color: var(--soc-red) !important;}
.msgr__feed {flex: 1; overflow-y: auto; min-height: 0; padding: 16px; display: flex;
	flex-direction: column; gap: 8px;}
.msgr__date {text-align: center; color: var(--soc-muted); font-size: 12px; margin: 10px 0 4px;}
.msgr__msg {display: flex; align-items: flex-end; gap: 8px; max-width: 72%;}
.msgr__msg--my {align-self: flex-end; flex-direction: row-reverse;}
.msgr__msg-foto {width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.msgr__msg-bubble {background: var(--soc-bg-soft); border: 1px solid var(--soc-bdc); border-radius: 14px;
	padding: 9px 14px; font-size: 14px; line-height: 1.4; word-break: break-word;}
.msgr__msg--my .msgr__msg-bubble {background: var(--accent-2); border-color: var(--accent-2); color: #fff;}
.msgr__msg-time {color: var(--soc-muted); font-size: 11px; flex-shrink: 0;}
.msgr__tick {color: var(--soc-muted); font-size: 11px;}
.msgr__tick.is-read {color: var(--accent-2);}
.msgr__item-ago .msgr__tick {margin-right: 4px;}
.msgr__notice {text-align: center; color: var(--soc-muted); font-size: 13px; padding: 8px 16px;}
.msgr__form {display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px;
	border-top: 1px solid var(--soc-bdc);}
.msgr__form input, .msgr__form textarea {flex: 1; padding: 11px 16px;
	border: 1px solid var(--soc-bdc); border-radius: 10px;
	background: var(--soc-bg-soft); color: var(--soc-text); font: inherit; font-size: 14px; outline: none;}
.msgr__form textarea {resize: none; overflow-y: auto;
	min-height: 42px; height: 42px; max-height: 132px;
	line-height: 1.35; display: block;}
.msgr__form input:disabled, .msgr__form textarea:disabled {opacity: 0.5;}
.msgr__send {width: 42px; height: 42px; border-radius: 8px; color: var(--soc-muted); font-size: 17px;
	background: none; border: 0; cursor: pointer;}
.msgr__send:hover {color: var(--accent-2);}

.msgr__back {display: none; background: none; border: 0; cursor: pointer;}

@media screen and (max-width: 900px) {
		.msgr {grid-template-columns: 1fr; max-height: none;
				min-height: calc(100vh - 120px);}
	.msgr__side {border-right: 0;}
	.msgr__list {max-height: none;}
	.msgr__msg {max-width: 88%;}

		.msgr__chat {display: none;}
	.msgr.is-chat-open .msgr__side {display: none;}
	.msgr.is-chat-open .msgr__chat {display: flex;}

		.msgr__placeholder {display: none;}

	.msgr__back {display: flex; align-items: center; justify-content: center;
		width: 34px; height: 34px; margin-left: -6px; flex: none;
		font-size: 20px; color: inherit;}
		.msgr__head {gap: 8px;}
	.msgr__head-user {flex: 1; min-width: 0;}
	.msgr__head-name {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
}