/* Сообщения и уведомления — те же виджеты, что на anime-go.org
   (templates/AnimeGo/assets/css/{messenger,notifications}.css), но в
   палитре Ями: цвета берутся из переменных темы, поэтому светлая и тёмная
   работают обе. Разметку и data-атрибуты не трогаем — на них завязаны
   js/messenger.js и js/notifications.js, общие с анимего. */

.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;
}

/* Страницы /messages и /notifications обёрнуты в .us2 (как профиль) —
   этого хватает: тема уже раскрывает такие страницы во всю ширину
   (`.cols:has(.us2)` в styles.css) и оттуда же берёт значки .fa. */

/* кнопка «Написать» на чужом профиле */
.us2-msg-btn {display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
	background-color: var(--bg-btn); color: var(--tt-btn); border-radius: 6px; white-space: nowrap;}
.us2-msg-btn:hover {background-color: var(--bg-btn-hover); color: var(--tt-btn);}

/* ---------------------------------------------------------------- шапка */
.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);}

/* та же выпадашка, но как содержимое страницы /notifications */
.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: center; padding: 12px 16px;
	border-top: 1px solid var(--soc-bdc);}
.msgr__form input {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 input: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);}

@media screen and (max-width: 900px) {
	.msgr {grid-template-columns: 1fr; max-height: none;}
	.msgr__side {border-right: 0; border-bottom: 1px solid var(--soc-bdc);}
	.msgr__list {max-height: 300px;}
	.msgr__msg {max-width: 88%;}
}