:root {
	--selected-conversation-background: linear-gradient(hsla(209deg 110% 45% / 90%), hsla(209deg 110% 42% / 90%));
	--selected-conversation-background-inactive: #d2d2d2;
	--black: #000;
}

html {
	overflow: hidden;
}

/* Add OS-specific fonts */
body {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		'Helvetica Neue',
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol' !important;
	text-rendering: optimizeLegibility !important;
	font-feature-settings: 'liga', 'clig', 'kern';
}

/* Bind the toolbar as the window's draggable region */
._36ic._5l-3,
._5742,
._6-xk,
._673w {
	-webkit-app-region: drag;
}

/* Exclude `New Messages`, `Voice Call`, `Video Call` & `Conversation Info` buttons from the draggable region */
._36ic._5l-3 ._30yy,
._5742 ._30yy,
._673w ._30yy {
	-webkit-app-region: no-drag;
	-webkit-user-drag: none;
}

/* Window wrapper */
._4sp8 {
	min-width: 0 !important;
}

/* The width of the popup should not exceed the width of the window */
._59s7 {
	max-width: 100% !important;
}

/* A utility class for temporarily hiding all dropdown menus */
html.hide-dropdowns .uiContextualLayerPositioner {
	visibility: hidden !important;
}

/* Hide footer at login view */
._210n {
	display: none;
}

/* First time user popup */
._s15 {
	display: none;
}

/* "Keep the conversation going" bar */
._s15 {
	display: none !important;
}

/* Right column */
._1q5- {
	border-left: 1px solid rgb(0 0 0 / 10%) !important;
}

/* ***************************** */
/* SIDEBAR                       */
/* ***************************** */

/* Narrow view */
@media (max-width: 900px) {
	/* Icons area */
	html:not(.sidebar-force-wide) ._6-xk {
		height: auto;
		padding-top: 36px;
		flex-direction: column;
	}
}

/* Hide sidebar (optionally) */
html.sidebar-hidden ._1enh {
	visibility: hidden;
	min-width: 0;
	max-width: 0;
	width: 0;
	height: 0;
}
html.sidebar-hidden.os-darwin ._6ynl {
	padding-left: 76px;
}

/* Forced narrow sidebar (copied from @media (max-width: 900px) blocks) */

html.sidebar-force-narrow ._1ht5 ._1qt4._7vuo,
html.sidebar-force-narrow ._6-xk ._6-xo,
html.sidebar-force-narrow ._6-xv,
html.sidebar-force-narrow ._6-xl,
html.sidebar-force-narrow ._7sta._87u_,
html.sidebar-force-narrow ._1nq2._7vup,
html.sidebar-force-narrow ._6ymu,
html.sidebar-force-narrow ._1ht1 ._2j6._6zkg {
	display: none;
}
html.sidebar-force-narrow ._1enh._7q1s {
	flex-basis: 74px;
	min-width: 80px;
}
html.sidebar-force-narrow ._6-xk {
	justify-content: center;
}
html.sidebar-force-narrow ._6-xp {
	margin-left: 0;
}
html.sidebar-force-narrow ._6zkc {
	padding-left: 4px;
	padding-right: 4px;
}
html.sidebar-force-narrow ._7t1l {
	justify-content: center;
}
html.sidebar-force-narrow ._1ht1 ._1qt3._6-5k {
	margin-right: 0;
}
html.sidebar-force-narrow ._1ht3._1ht1._6zk9 {
	background-color: rgb(0 132 255 / 20%);
	transition: background-color 0.5s;
}
html.sidebar-force-narrow ._1ht1._6zk9._1ht2 {
	transition: background-color 0.5s;
}
html.sidebar-force-narrow ._7vuq {
	display: block;
}
/* Copied from "Narrow view" block above */
html.sidebar-force-narrow ._6-xk {
	height: auto;
	padding-top: 36px;
	flex-direction: column;
}

/* Forced wide sidebar (restores default styles overwritten by media query) */
html.sidebar-force-wide ._1nq2._7vup,
html.sidebar-force-wide ._1ht1 ._2j6._6zkg {
	display: block;
}
html.sidebar-force-wide ._1enh._7q1s {
	flex-basis: 25%;
	min-width: 285px;
}
html.sidebar-force-wide ._6-xp {
	margin-left: auto;
}
html.sidebar-force-wide ._6zkc {
	padding-left: 8px;
	padding-right: 8px;
}
html.sidebar-force-wide ._7t1l {
	justify-content: normal;
}
html.sidebar-force-wide ._1ht1 ._1qt3._6-5k {
	margin-right: 12px;
}
html.sidebar-force-wide ._1ht3._1ht1._6zk9 {
	background: none;
}
html.sidebar-force-wide ._1ht5 ._1qt4._7vuo,
html.sidebar-force-wide ._7vuq {
	display: flex;
}

/* Hide sidebar title */
._1tqi, /* legacy  */
._6-xo  /* current */ {
	display: none !important;
}

/* Hide profile picture */
._7sta._7stb {
	display: none !important;
}

/* Hide settings icon */
._4kzu, /* legacy */
._6ymu  /* current */ {
	visibility: hidden !important;
	display: block !important;
	width: 0 !important;
	height: 0 !important;
}

/* Adjust position of sidebar back button */
._30yy._6-xf._6-xg {
	position: relative;
	left: 100px;
}

/* macOS: Move the contextual back button so it's not obstructed by the native traffic lights */
.os-darwin ._30yy._2oc9 {
	margin-left: 65px !important;
}

/* ***************************** */

/* Moves text to the left when window width < 473px */
._673w ._17w2 {
	display: block !important;
}

/* Makes group avatar visible in small window */
._6ynm {
	min-width: 40px !important;
}

/* Vertically center chat options */
._fl2 {
	padding: 0 !important;
	top: 4px !important;
	right: 6px !important;
}

/* Adjust `To` field for narrower titlebar */
._2y8y {
	min-height: 40px !important;
	padding: 8px !important;
}

/* Adjust `Last Seen/Active` subheading for narrower titlebar */
._2v6o {
	margin-top: 0 !important;
}

/* `New messages` popup */
._2xhi._5vn4 ._2xhj {
	display: none;
}

/* Shared photos: fix video width */
._4-og ._4-od {
	width: 100% !important;
}

/* Message box: hide bottom white line */
.chatAttachmentShelf:empty {
	display: none !important;
}

/* Message box: emoji picker selected tab */
._1uwz._1uwx {
	border-radius: 4pt;
}

/* Preferences dialog: hide unnecessary options */
._374b:nth-child(5) {
	display: none !important;
}

@media all and (max-width: 700px) {
	/* Make right column flexible in compact mode */
	._1q5- {
		position: absolute !important;
		right: 0 !important;
		left: 74px !important;
		height: 100% !important;
	}

	/* Fix for left space in compact mode */
	html.sidebar-hidden ._1q5- {
		left: 0 !important;
	}

	/* `New Conversation` icon */
	._30yy[href='/new'] {
		display: none !important;
	}

	/* Fix the `New Conversation` button overlapping the traffic light controls on macOS */
	html.os-darwin ._36ic._5l-3 {
		margin-top: 30px;
	}
}

/* Don't show outline on clickable elements except in the delete/mute modal so that we know what we are selecting */
a,
*[role='button'] {
	outline: none !important;
}

/* Remove white background in Preferences */
._1u5d {
	background-color: transparent !important;
}

/* Fix incorrect border radius in Preferences */
._4eby {
	border-radius: 2px !important;
}

/* Contact list: latest message, under contact name */
._1ht1 ._1htf {
	color: rgb(0 0 0 / 70%);
}

/* Allow scrolling of "Edit Nicknames" dialog */
._4h9n ._4h9o {
	max-height: 100% !important;
	height: 280px;
}

/* Hide hidden accessibility elements so they're not included in copy-pasting of chat logs */
.accessible_elem {
	display: none !important;
}

[role='navigation'] a {
	cursor: default !important;
}

/* Fix story color */
._1sk6 {
	background: inherit !important;
}
._1suk {
	color: inherit !important;
}
/* Hide Messenger icon when story is open */
._7yz {
	background: none !important;
}
/* Title centered */
._6f6l {
	display: block !important;
}

/* Fix border width and color on links */
.__6j._43kk {
	border-width: 1px !important;
	border-color: rgb(0 0 0 / 10%) !important;
}

/* Contact list: person (selected) */
._1ht1._1ht2 ._6zkc {
	background-color: transparent !important;
}

._1ht1._1ht2 {
	background: var(--selected-conversation-background) !important;
}

._1ht1._1ht2 * {
	color: rgb(255 255 255 / 80%);
}

/* Contact list: person (selected) window inactive */
html.is-window-inactive ._1ht1._1ht2 {
	background: var(--selected-conversation-background-inactive) !important;
	color: var(--black) !important;
}
html.is-window-inactive ._1ht1._1ht2 * {
	color: rgb(0 0 0 / 80%);
}

/* Remove top Facebook cookie banner */
.fbPageBanner {
	display: none !important;
}

/* Message composer buttons */
a._4rv6, /* "Choose a sticker" */
a._4ce_ /* "Play a game" */ {
	opacity: 100% !important;
	filter: invert(0.66);
}

/* Toggle message buttons */
body ._4_j4 ._39bj, /* TODO: Remove selector when new Messenger UI rolls out */
body ._4_j4 ._7mkh,
body ._4_j4 ._7mkk {
	display: none;
}

body.show-message-buttons ._4_j4 ._39bj, /* TODO: Remove selector when new Messenger UI rolls out */
body.show-message-buttons ._4_j4 ._7mkh,
body.show-message-buttons ._4_j4 ._7mkk {
	display: flex;
}

/* Window background, affects vibrant views and Settings open/close transition */
._2sdm {
	background-color: transparent !important;
}

/* Background under the typing indicator */
._4gd0 {
	background-color: transparent !important;
}

/* Typing indicator */
._4a0v._1x3z {
	display: flex;
	justify-content: center;
}

/* Settings dialog */
._4eby {
	max-height: 80vh;
	overflow-y: auto;
}

/* Workaround for emoji selector issue #831 */
@keyframes nodeInserted {
	from {
		opacity: 99%;
	}
	to {
		opacity: 100%;
	}
}

._5s2p,
._30yy._7odb {
	/* stylelint-disable-next-line */
	animation-duration: 0.001s;
	animation-name: nodeInserted;
}

/* Report bug icon on contact list */
._4_xe {
	display: none;
}

/* Facebook logo */
._4kny {
	margin-left: 70px;
}

/* Sent "Thumbs-up" icon in the new Messenger UI */
._7sli ._2poz._ui9._576q,
/* During animation */
._4a9g._576q {
	mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzYgMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLDMwIEw3Ljc1LDMwIEM2LjYyNSwzMCA2LDI3Ljc1MTUzMDYgNiwyMy4zNjczNDY5IEM2LDE4Ljk4MzE2MzMgNi42MjUsMTYuNzM0NjkzOSA3Ljc1LDE2LjczNDY5MzkgTDEwLDE2LjczNDY5MzkgQzEwLjU1MiwxNi43MzQ2OTM5IDExLDE3LjE5MTgzNjcgMTEsMTcuNzU1MTAyIEwxMSwyOC45Nzk1OTE4IEMxMSwyOS41NDI4NTcxIDEwLjU1MiwzMCAxMCwzMCBNMTcsNi4wMjA0MDgxNiBDMTcsNS40NDU0MDgxNiAxNy40MTk1LDUuMDAyNTUxMDIgMTgsNSBDMTkuMjAzNSw1IDIyLDUuNzkwODE2MzMgMjIsMTAuNjEyMjQ0OSBDMjIsMTIuMjQ0Mzg3OCAyMS44MDE1LDEzLjEzMDEwMiAyMS43MTk1LDEzLjcxNjMyNjUgQzIxLjcxOSwxMy43MTgzNjczIDIxLjcxOSwxMy43MjA0MDgyIDIxLjcxODUsMTMuNzIyNDQ5IEMyMS42ODY1LDEzLjk1NjYzMjcgMjEuODcyLDE0LjE2NDc5NTkgMjIuMTEzLDE0LjE2NDc5NTkgQzI2LjkwOCwxNC4xNjQ3OTU5IDI5LjQ2OSwxNS40MzM2NzM1IDI5LjQ2OSwxNi43MjkwODE2IEMyOS40NjksMTcuMzYxMjI0NSAyOS4yMTEsMTcuOTMyMTQyOSAyOC43OTc1LDE4LjM1MzU3MTQgQzI5LjUxMywxOC43NTkxODM3IDMwLDE5LjUwOTE4MzcgMzAsMjAuMzc4MDYxMiBDMzAsMjEuMzY0Mjg1NyAyOS40MjU1LDIyLjIwNDU5MTggMjguNTQ3NSwyMi41NTE1MzA2IEMyOC44MjEsMjIuOTMyNjUzMSAyOC45ODQ1LDIzLjM5NTQwODIgMjguOTg0NSwyMy44OTY5Mzg4IEMyOC45ODQ1LDI0Ljk3MDQwODIgMjguMzM5NSwyNS44NjUzMDYxIDI3LjMzNjUsMjYuMTQzODc3NiBDMjcuNDI4NSwyNi4zNzc1NTEgMjcuNDg0NSwyNi42MjkwODE2IDI3LjQ4NDUsMjYuODk0Mzg3OCBDMjcuNDg0NSwyOC4wNDU5MTg0IDI1LjU0ODUsMjguOTc5NTkxOCAyMSwyOC45Nzk1OTE4IEMxNy42NzUsMjguOTc5NTkxOCAxNS4zODE1LDI4LjM4NTcxNDMgMTQuNSwyNy45NTkxODM3IEMxMy44NTEsMjcuNjQ1NDA4MiAxMywyNy4wNzcwNDA4IDEzLDI1LjQwODE2MzMgTDEzLDE4Ljc3NTUxMDIgQzEzLDE1LjA0MDMwNjEgMTcuMjUsMTMuNzc2MDIwNCAxNy4yNSwxMC4xMDIwNDA4IEMxNy4yNSw3Ljc4ODI2NTMxIDE3LDYuODEzMjY1MzEgMTcsNi4wMjA0MDgxNiIgZmlsbD0iIzAwMCIgLz48L3N2Zz4NCg==');
	-webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzYgMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLDMwIEw3Ljc1LDMwIEM2LjYyNSwzMCA2LDI3Ljc1MTUzMDYgNiwyMy4zNjczNDY5IEM2LDE4Ljk4MzE2MzMgNi42MjUsMTYuNzM0NjkzOSA3Ljc1LDE2LjczNDY5MzkgTDEwLDE2LjczNDY5MzkgQzEwLjU1MiwxNi43MzQ2OTM5IDExLDE3LjE5MTgzNjcgMTEsMTcuNzU1MTAyIEwxMSwyOC45Nzk1OTE4IEMxMSwyOS41NDI4NTcxIDEwLjU1MiwzMCAxMCwzMCBNMTcsNi4wMjA0MDgxNiBDMTcsNS40NDU0MDgxNiAxNy40MTk1LDUuMDAyNTUxMDIgMTgsNSBDMTkuMjAzNSw1IDIyLDUuNzkwODE2MzMgMjIsMTAuNjEyMjQ0OSBDMjIsMTIuMjQ0Mzg3OCAyMS44MDE1LDEzLjEzMDEwMiAyMS43MTk1LDEzLjcxNjMyNjUgQzIxLjcxOSwxMy43MTgzNjczIDIxLjcxOSwxMy43MjA0MDgyIDIxLjcxODUsMTMuNzIyNDQ5IEMyMS42ODY1LDEzLjk1NjYzMjcgMjEuODcyLDE0LjE2NDc5NTkgMjIuMTEzLDE0LjE2NDc5NTkgQzI2LjkwOCwxNC4xNjQ3OTU5IDI5LjQ2OSwxNS40MzM2NzM1IDI5LjQ2OSwxNi43MjkwODE2IEMyOS40NjksMTcuMzYxMjI0NSAyOS4yMTEsMTcuOTMyMTQyOSAyOC43OTc1LDE4LjM1MzU3MTQgQzI5LjUxMywxOC43NTkxODM3IDMwLDE5LjUwOTE4MzcgMzAsMjAuMzc4MDYxMiBDMzAsMjEuMzY0Mjg1NyAyOS40MjU1LDIyLjIwNDU5MTggMjguNTQ3NSwyMi41NTE1MzA2IEMyOC44MjEsMjIuOTMyNjUzMSAyOC45ODQ1LDIzLjM5NTQwODIgMjguOTg0NSwyMy44OTY5Mzg4IEMyOC45ODQ1LDI0Ljk3MDQwODIgMjguMzM5NSwyNS44NjUzMDYxIDI3LjMzNjUsMjYuMTQzODc3NiBDMjcuNDI4NSwyNi4zNzc1NTEgMjcuNDg0NSwyNi42MjkwODE2IDI3LjQ4NDUsMjYuODk0Mzg3OCBDMjcuNDg0NSwyOC4wNDU5MTg0IDI1LjU0ODUsMjguOTc5NTkxOCAyMSwyOC45Nzk1OTE4IEMxNy42NzUsMjguOTc5NTkxOCAxNS4zODE1LDI4LjM4NTcxNDMgMTQuNSwyNy45NTkxODM3IEMxMy44NTEsMjcuNjQ1NDA4MiAxMywyNy4wNzcwNDA4IDEzLDI1LjQwODE2MzMgTDEzLDE4Ljc3NTUxMDIgQzEzLDE1LjA0MDMwNjEgMTcuMjUsMTMuNzc2MDIwNCAxNy4yNSwxMC4xMDIwNDA4IEMxNy4yNSw3Ljc4ODI2NTMxIDE3LDYuODEzMjY1MzEgMTcsNi4wMjA0MDgxNiIgZmlsbD0iIzAwMCIgLz48L3N2Zz4NCg==');
}

/* Plus icon */
._7mki {
	background: transparent !important;
}

/* GIF search field */
._3mtr ._4qcs {
	background: transparent !important;
}

/* Image preview sizes */
._4tsk > [style*='width'] {
	width: auto !important;
	height: auto !important;
}

/* -- BLOCK START: Private Mode -- */
/* Contact list: person name */
html.private-mode ._1ht6 {
	visibility: hidden;
}

/* Messages list: person name */
html.private-mode ._17w2 ._3oh-,
html.private-mode ._41ud ._ih3 {
	visibility: hidden;
}

/* Contacts list picture */
html.private-mode ._1ht1 ._1qt3 img,
html.private-mode ._1ht1 ._1qt3 div[style*='background-image'],
/* Navbar information */
html.private-mode ._5743._6y4y {
	filter: blur(5px);
}

/* Right sidebar: big user picture */
html.private-mode ._1jt6._710_ {
	filter: blur(10px);
}

/* Message user picture */
html.private-mode ._1t_q ._4ld- img {
	filter: blur(3px);
}

/* Contacts list read indicator */
html.private-mode ._5bli._2_a2.img,
/* Message read indicator */
html.private-mode ._4jzq._jf4 img {
	filter: blur(2px);
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><circle r="27%" cx="50%" cy="50%" /></svg>');
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><circle r="27%" cx="50%" cy="50%" /></svg>');
}

/* Conversation list name */
html.private-mode ._1htf {
	visibility: hidden;
}
html.private-mode ._1htf > span:first-child {
	visibility: visible;
}
html.private-mode ._4wc- {
	filter: blur(10px);
}
/* -- BLOCK END: Private Mode -- */

/* -- BLOCK START: Small conversations window -- */

/* Restrict media width to viewport */
._3zvs div[role='presentation'] > div:not(._64e6), /* photos and GIFs without 360 photos*/
._53j5 /* videos */ {
	width: auto !important;
	height: auto !important;
}

._53j5 video {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
}

@media (max-width: 500px) {
	/* Inline event preview */
	._51mx > td {
		display: block;
	}

	/* Event title description */
	._2pij {
		padding-right: 0 !important;
	}

	/* Event action buttons (Interested) */
	.hRght {
		margin-top: 12px;
	}

	._20bp {
		flex-direction: column !important;
	}

	._4u-c._1wfr._9hq {
		display: flex;
		flex: 1;
	}
}

/* -- BLOCK END: Small conversations window -- */
