/* =======================================
   NOTIFICATIONS MODAL
   ======================================= */

.notifyOverlay{
	position:fixed;
	inset:0;
	z-index:1100;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	pointer-events:none;
	transition:opacity .22s ease-out;
}

.notifyOverlay[hidden]{
	display:none !important;
}

.notifyOverlay.notify-open{
	opacity:1;
	pointer-events:auto;
}

.notifyBackdrop{
	position:absolute;
	inset:0;
	background:rgba(0, 5, 10, 0.5);
}

.notifyPanel{
	position:relative;
	z-index:1;
	width:min(500px, 92vw);
	height:90vh;
	background:#fff;
	border-radius:14px;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	transform:translateY(24px);
	opacity:0;
	transition:transform .22s ease-out, opacity .22s ease-out;
}

.notifyOverlay.notify-open .notifyPanel{
	transform:translateY(0);
	opacity:1;
}

.notifyHeader{
	flex-shrink:0;
	background:#f2f4f6;
	padding:clamp(15px, 3vw, 20px) 10px clamp(10px, 3vw, 12px);
	border-bottom:1px solid #fff;
}

.notifyHeaderInner{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}

.notifyBackBtn{
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:40px;
	border:0;
	border-radius:10px;
	background:#f1f3f5;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.notifyBackBtn img{
	width:15px;
	height:15px;
	display:block;
}

.notifyTitle{
	margin:0;
	font-size:clamp(17px, 3vw, 19px);
	font-weight:700;
	color:#000;
	text-align:center;
}

.notifyBody{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	background:#fff;
	scrollbar-gutter:stable;
}

.notifySpinner,
.notifyEmpty{
	text-align:center;
	padding:36px 20px;
	font-size:14px;
	color:#6b7280;
}

.notifySpinner--more{
	padding:18px 20px 22px;
}

.notifyList{
	display:flex;
	flex-direction:column;
}

.notifyRow{
	position:relative;
	display:flex;
	align-items:flex-start;
	gap:14px;
	padding:12px 14px 12px 16px;
	background:#fff;
	cursor:pointer;
	border-bottom:1px solid #eee;
	transition:background-color .16s ease;
}

.notifyRow:hover{
	background:#f8fafc;
}

.notifyRow.is-unread{
	background:#e1edf7;
}

.notifyRow.is-selected{
	background:#f1f3f5;
}

.notifyThumb{
	width:44px;
	height:44px;
	border-radius:999px;
	object-fit:cover;
	flex:0 0 44px;
	background:#f3f4f6;
	border:1px solid #e5e7eb;
	margin-top:0;
	align-self:center;
}

.notifyMain{
	min-width:0;
	flex:1 1 auto;
	padding-right:42px;
}

.notifyName{
	font-size:11px;
	line-height:1.2;
	color:#888;
	margin-bottom:4px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.notifyRowTitle{
	font-size:16px;
	line-height:1.22;
	font-weight:600;
	color:#000;
}

.notifyRowMessage{
	margin-top:2px;
	font-size:14px;
	line-height:1.34;
	color:#444;
	word-break:break-word;
}

.notifyHighlight{
	display:inline-flex;
	align-items:center;
	margin-top:7px;
	padding:4px 10px;
	border:0;
	border-radius:10px;
	background:#d9ecfb;
	color:#035;
	font-size:15px;
	font-weight:600;
	cursor:pointer;
}

.notifyHighlight:hover{
	filter:brightness(.98);
}

.notifyTime{
	margin-top:7px;
	font-size:11px;
	line-height:1.2;
	color:#888;
}

.notifySettingsBtn{
	position:absolute;
	top:8px;
	right:6px;
	width:38px;
	height:38px;
	border:0;
	background:transparent;
	padding:7px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	border-radius:10px;
}

.notifySettingsBtn:hover{
	background:rgba(0,0,0,.04);
}

.notifySettingsBtn img{
	width:24px;
	height:24px;
	display:block;
	opacity:.72;
}

/* =========================
   DELETE CONFIRM OVERLAY
   ========================= */

.notifyConfirmOverlay{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-bottom:15px;
	z-index:50;
	overflow:auto;

	opacity:0;
	pointer-events:none;
	visibility:hidden;

	transition:opacity .18s ease-out, visibility 0s linear .18s;
}

.notifyConfirmBackdrop{
	position:absolute;
	inset:0;
	background:rgba(0,5,10,.20);
	opacity:0;
	transition:opacity .18s ease-out;
}

.notifyConfirmCard{
	position:relative;
	width:min(400px, 90vw);
	background:#fff;
	border-radius:14px;
	padding-bottom:18px;
	box-shadow:0 16px 44px rgba(0,5,10,.30);
	transform:translateY(10px) scale(.98);
	opacity:0;
	transition:transform .18s ease-out, opacity .18s ease-out;
	will-change:transform, opacity;
	overflow:hidden;
}

.notifyConfirmTitle{
	font-weight:700;
	font-size:18px;
	margin-bottom:6px;
	padding:14px 20px 7px;
	background:#f1f3f5;
}

.notifyConfirmMsg{
	color:#374151;
	font-size:14px;
	margin-bottom:14px;
	padding:0 20px;
}

.notifyConfirmBtns{
	display:flex;
	gap:10px;
	justify-content:flex-end;
	padding:0 18px;
}

.notifyConfirmBtn{
	height:40px;
	padding:0 20px;
	border-radius:8px;
	background:#f1f3f5;
	border:0;
	color:#000;
	font-weight:500;
	font-size:14px;
	cursor:pointer;
	transition:background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.notifyConfirmBtn:hover{
	background:#e1e3e5;
}

.notifyConfirmYes{
	background:#000;
	color:#fff;
}

.notifyConfirmYes:hover{
	background:#000;
}

.notifyConfirmOverlay.is-open{
	opacity:1;
	pointer-events:auto;
	visibility:visible;
	transition:opacity .18s ease-out, visibility 0s;
}

.notifyConfirmOverlay.is-open .notifyConfirmBackdrop{
	opacity:1;
}

.notifyConfirmOverlay.is-open .notifyConfirmCard{
	transform:translateY(0) scale(1);
	opacity:1;
}

@media (max-width:500px){
	.notifyOverlay{
		align-items:stretch;
		justify-content:stretch;
	}

	.notifyPanel{
		width:100%;
		height:100%;
		max-height:none;
		border-radius:0;
	}

	.notifyBackdrop{
		background:rgba(255,255,255,.5);
	}
}