/* ============================================================
   BB Live Post Notifier — Notification Bubble
   ============================================================ */

/* ── Bubble container ─────────────────────────────────────── */
#bblpn-bubble {
	--bblpn-bg:        #1a1a2e;
	--bblpn-accent:    #e63946;
	--bblpn-text:      #f0f0f0;
	--bblpn-subtext:   rgba(240,240,240,.65);
	--bblpn-radius:    14px;
	--bblpn-shadow:    0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
	--bblpn-duration:  0.42s;

	position:   fixed;
	bottom:     28px;
	right:      28px;
	z-index:    2147483647; /* Maximum z-index — ensures bubble renders above all modals */
	isolation:  isolate;    /* Creates its own stacking context so z-index is self-contained */

	min-width:  220px;
	max-width:  300px;

	background:    var(--bblpn-bg);
	border-radius: var(--bblpn-radius);
	box-shadow:    var(--bblpn-shadow);
	border:        1px solid rgba(255,255,255,.08);
	overflow:      hidden;

	/* Hidden state */
	opacity:          0;
	transform:        translateY(20px) scale(0.95);
	pointer-events:   none;
	transition:
		opacity      var(--bblpn-duration) cubic-bezier(.16,1,.3,1),
		transform    var(--bblpn-duration) cubic-bezier(.16,1,.3,1);

	/* Subtle glow on the left accent strip */
	border-left: 3px solid var(--bblpn-accent);
}

/* Visible state — toggled by JS */
#bblpn-bubble.bblpn-visible {
	opacity:        1;
	transform:      translateY(0) scale(1);
	pointer-events: auto;
}

/* ── Entrance wiggle ────────────────────────────────────────── */
@keyframes bblpn-wiggle {
	0%   { transform: translateY(0) rotate(0deg); }
	15%  { transform: translateY(-4px) rotate(-4deg); }
	30%  { transform: translateY(0) rotate(4deg); }
	45%  { transform: translateY(-2px) rotate(-2deg); }
	60%  { transform: translateY(0) rotate(2deg); }
	75%  { transform: translateY(-1px) rotate(-1deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

#bblpn-bubble.bblpn-wiggle .bblpn-icon {
	animation: bblpn-wiggle .65s ease-in-out;
}

/* ── Inner layout ──────────────────────────────────────────── */
.bblpn-inner {
	display:      flex;
	align-items:  center;
	gap:          10px;
	padding:      13px 14px 13px 16px;
}

/* ── Bell icon ─────────────────────────────────────────────── */
.bblpn-icon {
	flex-shrink:  0;
	display:      flex;
	align-items:  center;
	justify-content: center;

	width:   36px;
	height:  36px;
	border-radius: 50%;
	background:    linear-gradient(135deg, var(--bblpn-accent), #ff6b6b);
	color:         #fff;
	box-shadow:    0 3px 10px rgba(230,57,70,.45);
}

/* ── Count badge on the icon ───────────────────────────────── */
.bblpn-icon {
	position: relative;
}

.bblpn-badge {
	position:        absolute;
	top:             -4px;
	right:           -4px;
	min-width:       18px;
	height:          18px;
	padding:         0 4px;
	border-radius:   9px;
	background:      #fff;
	color:           var(--bblpn-accent);
	font-size:       10px;
	font-weight:     800;
	line-height:     18px;
	text-align:      center;
	letter-spacing:  -0.3px;
	border:          2px solid var(--bblpn-bg);
	box-shadow:      0 1px 4px rgba(0,0,0,.3);

	transform:    scale(0);
	transition:   transform .25s cubic-bezier(.34,1.56,.64,1);
}

.bblpn-badge.bblpn-badge-show {
	transform: scale(1);
}

/* ── Text area ─────────────────────────────────────────────── */
.bblpn-text {
	flex:        1;
	font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
	font-size:   13.5px;
	font-weight: 600;
	color:       var(--bblpn-text);
	line-height: 1.35;
	letter-spacing: .01em;
}

.bblpn-subline {
	display:     block;
	font-size:   11px;
	font-weight: 400;
	color:       var(--bblpn-subtext);
	margin-top:  2px;
}

/* ── Refresh button ────────────────────────────────────────── */
.bblpn-refresh {
	flex-shrink:      0;
	display:          flex;
	align-items:      center;
	justify-content:  center;

	width:           30px;
	height:          30px;
	border-radius:   8px;
	border:          1px solid rgba(255,255,255,.14);
	background:      rgba(255,255,255,.07);
	color:           var(--bblpn-text);
	cursor:          pointer;
	transition:      background .18s, transform .18s, color .18s;
}

.bblpn-refresh:hover {
	background: var(--bblpn-accent);
	color:      #fff;
	border-color: transparent;
	transform:  rotate(180deg) scale(1.1);
}

.bblpn-refresh:active {
	transform: rotate(180deg) scale(0.95);
}

/* ── Spinning state when refresh was clicked ───────────────── */
@keyframes bblpn-spin {
	to { transform: rotate(360deg); }
}

.bblpn-refresh.bblpn-spinning svg {
	animation: bblpn-spin .6s linear infinite;
}

/* ── Countdown progress bar ────────────────────────────────── */
.bblpn-progress {
	height:     3px;
	background: linear-gradient(90deg, var(--bblpn-accent), #ff6b6b);
	width:      100%;
	transform-origin: left center;
	transform:  scaleX(1);
}

.bblpn-progress.bblpn-progress-run {
	transform:  scaleX(0);
	transition: transform var(--bblpn-poll-ms, 15000ms) linear;
}

/* ── Dismiss (×) — shown on hover of bubble ───────────────── */
.bblpn-dismiss {
	position:    absolute;
	top:         6px;
	right:       8px;
	background:  none;
	border:      none;
	color:       var(--bblpn-subtext);
	font-size:   16px;
	line-height: 1;
	cursor:      pointer;
	padding:     2px 4px;
	border-radius: 4px;
	opacity:     0;
	transition:  opacity .18s, background .18s;
}

#bblpn-bubble:hover .bblpn-dismiss {
	opacity: 1;
}

.bblpn-dismiss:hover {
	background: rgba(255,255,255,.1);
	color:      #fff;
}

/* ── Pulse ring behind the icon (on first show) ─────────────── */
@keyframes bblpn-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(230,57,70,.6); }
	70%  { box-shadow: 0 0 0 14px rgba(230,57,70,0); }
	100% { box-shadow: 0 0 0 0   rgba(230,57,70,0); }
}

#bblpn-bubble.bblpn-first-show .bblpn-icon {
	animation: bblpn-pulse 1.2s ease-out 2;
}

/* ── Responsive – tiny screens ─────────────────────────────── */
@media (max-width: 480px) {
	#bblpn-bubble {
		bottom:    16px;
		right:     16px;
		left:      16px;
		min-width: unset;
		max-width: unset;
	}
}