/* ======================================
   Carpokes Private Message Alert
   Compact CEL Dashboard Style
   ====================================== */

.privatemessageinfo{
	animation: privatemessageinfo 12s;
	display:none;

	position:fixed;
	top:36px;
	left:50%;
	transform:translate(-50%,-200%); /* mobile-safe offscreen start */

	width:min(420px, calc(100% - 24px));
	box-sizing:border-box;

	padding:8px 12px 10px;          /* shorter overall */
	text-align:center;

	background:
	radial-gradient(700px 150px at 50% 0%,
		rgba(255,255,255,.85),
		rgba(255,255,255,0) 60%),
	linear-gradient(#f8f8f8,#ececec);

	border:4px solid #c63a30;
	border-radius:14px;

	box-shadow:
	0 14px 40px rgba(0,0,0,.50),
	0 0 14px rgba(198,58,48,.25);

	z-index:500;
	overflow:hidden;
}


/* ===== hazard stripe ===== */

.privatemessageinfo::after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:6px;

	background:
	repeating-linear-gradient(
		45deg,
		#ffb300,
		#ffb300 8px,
		#000 8px,
		#000 16px
	);

	opacity:.18;
}


/* ===== CEL icon ===== */

.privatemessageinfo::before{
	content:"";
	position:absolute;
	left:50%;
	top:10px;
	transform:translateX(-50%);

	width:90px;                     /* smaller to reduce height */
	height:90px;

	background:url("CEL.png") center no-repeat;
	background-size:contain;

	filter:
	drop-shadow(0 0 6px rgba(255,180,40,.9))
	drop-shadow(0 0 14px rgba(255,150,0,.6))
	drop-shadow(0 0 22px rgba(255,120,0,.35));

	animation:celpulse 1.4s infinite;
}


/* ===== headline ===== */

.privatemessageinfobutton_text{
	display:block;

	margin:96px 18px 6px 18px;      /* tightened spacing */

	font-size:1.32em;
	font-weight:900;
	letter-spacing:.02em;

	color:#222;
	text-shadow:0 1px 0 rgba(255,255,255,.7);
}


/* ===== divider ===== */

.privatemessageinfo hr{
	border:0;
	height:1px;
	background:rgba(0,0,0,.12);
	margin:4px 0 6px;               /* tighter */
}


/* ===== inbox button ===== */

a.privatemessageinfobutton:link,
a.privatemessageinfobutton:visited{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;

	font-size:.95em;
	font-weight:900;

	padding:8px 18px;

	color:#fff;
	text-decoration:none;

	border-radius:12px;
	border:1px solid #8f201a;

	background:linear-gradient(#e5564e,#b82e26);

	box-shadow:
	0 8px 16px rgba(0,0,0,.35),
	inset 0 2px 0 rgba(255,255,255,.22),
	inset 0 -2px 0 rgba(0,0,0,.18);

	transition:.15s;
}

a.privatemessageinfobutton:hover{

	background:linear-gradient(#f06c64,#c93a32);

	box-shadow:
	0 10px 18px rgba(0,0,0,.45),
	0 0 10px rgba(255,80,60,.35);

	transform:translateY(-1px);
}


/* ======================================
   Close button (separate row)
   ====================================== */

a.privatemessageinfoclose:link,
a.privatemessageinfoclose:visited{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	margin-top:6px;                 /* tighter */

	padding:7px 14px;

	font-size:.9em;
	font-weight:700;

	color:#333;
	text-decoration:none;

	border-radius:10px;

	background:linear-gradient(#ffffff,#e5e5e5);
	border:1px solid rgba(0,0,0,.25);

	box-shadow:
	0 4px 10px rgba(0,0,0,.2),
	inset 0 1px 0 rgba(255,255,255,.8);
}

a.privatemessageinfoclose i{
	font-size:14px;
	color:#555;
}

a.privatemessageinfoclose:hover{
	background:linear-gradient(#ffffff,#dddddd);
}


/* ===== slide animation (mobile-safe) ===== */

@keyframes privatemessageinfo{

	0%{
		transform:translate(-50%,-200%);
		opacity:0;
	}

	10%{
		transform:translate(-50%,0%);
		opacity:1;
	}

	90%{
		transform:translate(-50%,0%);
		opacity:1;
	}

	100%{
		transform:translate(-50%,-200%);
		opacity:0;
	}
}


/* ===== CEL pulse ===== */

@keyframes celpulse{

	0%{opacity:.75;}

	50%{opacity:1;}

	100%{opacity:.75;}
}