#bones-notifications-popup-stack{
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 999998;
	width: 360px;
	max-width: calc(100vw - 36px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.bones-notification-popup{
	position: relative;
	pointer-events: auto;
	cursor: pointer;
	padding: 14px 42px 14px 14px;
	border-radius: 14px;
	background: #2f3238;
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 12px 32px rgba(0,0,0,.35);
	color: #e5e7eb;
	animation: bonesNotificationIn .22s ease-out;
	overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease;
}

.bones-notification-popup:hover{
	transform: translateY(-1px) scale(1.015);
	box-shadow: 0 14px 34px rgba(0,0,0,.38);
}

.bones-notification-top{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
}

.bones-notification-avatar{
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.07);
	box-shadow: none;
	flex: 0 0 auto;
	overflow: hidden;
}

.bones-notification-avatar img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bones-notification-title{
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	color: #f3f4f6;
}

.bones-notification-date{
	font-size: 11px;
	line-height: 1.2;
	color: #a5a7ad;
	margin-top: 3px;
}

.bones-notification-text{
	font-size: 13px;
	line-height: 1.45;
	color: #d6d8dc;
	word-break: break-word;
}

.bones-notification-close{
	position: absolute;
	top: 9px;
	right: 10px;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 8px;
	background: rgba(255,255,255,.06);
	color: #d1d5db;
	font-size: 18px;
	line-height: 24px;
	cursor: pointer;
	transition: .15s ease;
}

.bones-notification-close:hover{
	background: rgba(255,255,255,.12);
	color: #fff;
}

.bones-notification-hide{
	animation: bonesNotificationOut .2s ease-in forwards;
}

@keyframes bonesNotificationIn{
	from{ opacity: 0; transform: translateY(14px) scale(.98); }
	to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bonesNotificationOut{
	from{ opacity: 1; transform: translateY(0) scale(1); }
	to{ opacity: 0; transform: translateY(12px) scale(.98); }
}

@media(max-width: 576px){
	#bones-notifications-popup-stack{
		right: 10px;
		bottom: 10px;
		width: calc(100vw - 20px);
	}
}

#bones-notifications-debug{
	position: fixed;
	left: 15px;
	bottom: 15px;
	z-index: 999999;
	background: #111827;
	color: #fff;
	border: 1px solid #ef4444;
	border-radius: 10px;
	padding: 12px 14px;
	font: 13px Arial;
	max-width: 420px;
	box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.bones-notifications-mark-all{
	pointer-events: auto;
	align-self: center;
	border: 0;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #e5e7eb;
	background: #3a3d44;
	box-shadow: 0 8px 22px rgba(0,0,0,.28);
	cursor: pointer;
	transition: .15s ease;
}

.bones-notifications-mark-all:hover{
	background: #444852;
	color: #fff;
	transform: translateY(-1px);
}