/* On-site notifications: the header bell, its unread badge and its dropdown.

   Colors come from the theme's own custom properties - the same ones .dropped-user uses - so the
   light and dark stylesheets keep working without a second copy of these rules.

   The bell sits next to .user-block and mirrors its dropdown geometry rather than introducing a
   second popup style; the only real addition is the badge and the list rows inside. */

.notif-block {
	position: relative;
	display: flex;
	align-items: center;
}

/* color:inherit is load bearing, not tidiness. The theme paints every icon with fill:currentColor,
   and a <button> does not inherit color by default - it takes the browser's own button text color,
   which on this dark header renders the bell nearly invisible. */
.notif-bell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0 8px;
	color: inherit;
	cursor: pointer;
}

.notif-bell .svg-icon {
	width: 24px;
	height: 24px;
}

/* Sits on the rim of the bell, and is hidden rather than emptied when the count is zero - an
   empty circle still reads as "something is there". */
.notif-badge {
	position: absolute;
	top: -4px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #e8384f;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	font-weight: 600;
	text-align: center;
	pointer-events: none;
}

.notif-badge[hidden] {
	display: none;
}

.notif-drop {
	position: absolute;
	top: calc(100% + 7px);
	right: 0;
	width: 360px;
	max-height: 70vh;
	overflow-y: auto;
	border-radius: 15px 0 15px 15px;
	box-shadow: 0 4px 18px 0 rgba(23, 15, 41, 0.2);
	background: var(--bg-dropped-user);
	z-index: 60;
}

.notif-drop[hidden] {
	display: none;
}

.notif-drop__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid var(--bg-border-input);
}

.notif-drop__head button {
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
}

.notif-drop__head button:hover {
	opacity: 1;
}

.notif-item {
	display: flex;
	gap: 10px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.35;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--bg-border-input);
}

.notif-item:last-child {
	border-bottom: 0;
}

.notif-item:hover {
	background: var(--bg-active);
}

/* Unread is a left bar rather than a background wash: the row already changes background on
   hover, and two overlapping washes make it impossible to tell which state you are looking at. */
.notif-item--unread {
	box-shadow: inset 3px 0 0 0 #e8384f;
}

.notif-item__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-active);
}

.notif-item__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.notif-item__icon .svg-icon {
	width: 18px;
	height: 18px;
}

.notif-item__body {
	min-width: 0;
	flex: 1 1 auto;
}

.notif-item__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.notif-item__text {
	margin-top: 2px;
	opacity: 0.75;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.notif-item__date {
	margin-top: 4px;
	font-size: 12px;
	opacity: 0.55;
}

.notif-empty {
	padding: 24px 16px;
	text-align: center;
	font-size: 14px;
	opacity: 0.6;
}

/* The theme drops the user dropdown out of position below this width and shows it inline; the
   bell has no inline place to go, so it stays anchored and only narrows to the viewport. */
@media screen and (max-width: 480px) {
	.notif-drop {
		position: fixed;
		top: auto;
		left: 8px;
		right: 8px;
		width: auto;
	}
}