/* Push notifications */

/* The bell, beside the account control */

.mp-bell[hidden] {
	display: none;
}

.mp-bell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line, #e6e9f0);
	background: var(--paper, #fff);
	color: var(--muted, #4a5060);
	cursor: pointer;
	padding: 0;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.mp-bell:hover,
.mp-bell:focus-visible {
	border-color: var(--accent, #3458fa);
	color: var(--accent, #3458fa);
}

.mp-bell.is-on {
	border-color: var(--accent, #3458fa);
	color: var(--accent, #3458fa);
	background: var(--accent-soft, #e9edfe);
}

.mp-bell.is-blocked {
	opacity: 0.55;
}

.mp-bell[disabled] {
	opacity: 0.5;
	cursor: default;
}

.mp-bell__icon {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Struck through only when the browser is blocking. */
.mp-bell__slash {
	opacity: 0;
}

.mp-bell.is-blocked .mp-bell__slash {
	opacity: 1;
}

/* The soft prompt */

.mp-prompt {
	position: fixed;
	z-index: 120;
	left: 20px;
	bottom: 20px;
	width: min(360px, calc(100vw - 40px));
	background: var(--paper, #fff);
	border: 1px solid var(--line, #e6e9f0);
	border-radius: var(--radius, 14px);
	box-shadow: 0 24px 60px -20px rgba(19, 27, 46, 0.45);
	padding: 18px 20px;
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.26s cubic-bezier(0.3, 0.9, 0.4, 1), opacity 0.26s ease;
}

.mp-prompt.is-in {
	transform: translateY(0);
	opacity: 1;
}

.mp-prompt[hidden] {
	display: none;
}

.mp-prompt__title {
	font-family: var(--display, system-ui, sans-serif);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--ink, #131b2e);
}

.mp-prompt__body {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted, #4a5060);
	margin: 0;
}

.mp-prompt__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}

.mp-btn {
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--line-strong, #d3d8e3);
	background: var(--paper, #fff);
	color: var(--ink, #131b2e);
	cursor: pointer;
}

.mp-btn--primary {
	background: var(--accent, #3458fa);
	border-color: var(--accent, #3458fa);
	color: #fff;
}

.mp-btn--primary:hover {
	background: var(--accent-hover, #2b49e0);
}

.mp-btn--quiet {
	border-color: transparent;
	color: var(--faint, #878e9e);
}

.mp-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.mp-prompt {
		transition: none;
	}
}

@media (max-width: 480px) {
	.mp-prompt {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
	}
}