/* ref: 
	visualize css selectors: https://fffuel.co/css-selectors/ 
	modern font size rules: https://fedmentor.dev/posts/font-size-px/
		Font-size? → Use rem
		Line-height? → Keep it unitless (or use %)
		Letter-spacing? → Use em (or use rem or %)
*/

@font-face {
	font-family: 'ABC Diatype';
	src: url('ABCDiatype-Regular.woff2') format('woff2'),
	url('ABCDiatype-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.loading-message {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-items: center;
	align-items: center;
	justify-content: center;
}

body {
	font-family: 'ABC Diatype';
	font-weight: normal;
	font-style: normal;
}

body.comment-modal-open {
	overflow: hidden;
}

/*#region Default Light Theme*/
body:not(.dark-mode),
body.dark-mode {
	--background-gradient: linear-gradient(166.5deg, #FFFFFF 7.87%, #E5E5E5 50.52%);
	--background-alt-gradient: linear-gradient(180deg, #C9E4FF 0%, #E5E5E5 100%);

	/* Base colors */
	--primary-color: #F2F2F2;
	--on-primary-color: #6E6E6E;
	--primary-container-color: var(--primary-color);
	--on-primary-container-color: var(--on-primary-color);

	--background-color: #EEEEEE;
	--on-background-color: #6E6E6E;

	--delimiter-color: #D9D9D9;

	/* Buttons */
	--primary-button-color: var(--primary-color);
	--on-primary-button-color: var(--on-primary-color);

	--back-button-color: #A3A3A3;
	--on-back-button-color: #FFFFFF;

	/* Inputs */
	--primary-input-color: var(--primary-color);
	--on-primary-input-color: var(--on-primary-color);

	/* Menu */
	--menu-container-color: #0000003F;
	--on-menu-container-color: #FFFFFF;
	--active-menu-container-color: #0000003F;

	/* Timeline */
	--timeline-container-color: #F8F8F826;
	--on-timeline-container-color: #FFFFFF;

	/* Chat */
	--chat-container-background: linear-gradient(-72deg, #F8F8F8 0%, #E5E5E5 100%);
	--chat-container-color: #2E2E2E;
	--chat-container-opacity: 0.8;

	--my-chat-container-background: linear-gradient(180deg, #698199 0%, #8095A5 100%);
	--my-chat-container-color: #FFFFFF;
	--my-chat-container-opacity: 0.8;
}
/*#endregion*/

body:not(.dark-mode),
body.dark-mode {
	background: var(--background-gradient) center top / cover repeat-y fixed;
}

body.alt-background {
	background-image: var(--background-alt-gradient);
	background-color: #c9e4ff;
}

/*#region Subscription Tier Colors*/
body {
	--bronze-subscription-background: linear-gradient(90deg, #AEAEAE 0%, #E5CBA5 96%);
	--silver-subscription-background: linear-gradient(90deg, #DFDFDF 0%, #AEAEAE 100%);
	--gold-subscription-background: linear-gradient(90deg, #B1AA94 0%, #C2A33D 100%);

	--on-bronze-subscription-background: #FFFFFF;
	--on-silver-subscription-background: #FFFFFF;
	--on-gold-subscription-background: #FFFFFF;
}
/*#endregion*/

/*#region Buttons*/
button {
	border: none;
	border-radius: 999px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	flex: 1 0 0;
	font-style: normal;
	font-weight: 500;
}

.btn-lg {
	height: 44px;
	padding: 10px 24px;
	gap: 8px;
	font-size: 16px;
}

.btn-sm {
	height: 36px;
	gap: 4px;
	font-size: 14px;
	font-feature-settings: "liga" off, "clig" off;
}

.btn-round-lg {
	flex: 0 0 auto;
	height: 48px;
	width: 48px;
}

.btn-round-lg > svg {
	height: 40px;
	width: 40px;
}

.btn-round {
	border: 1px solid var(--on-primary-button-color);
	flex: 0 0 auto;
	height: 40px;
	width: 40px;
}

.btn-round > svg {
	height: 32px;
	width: 32px;
}

.btn-round-sm {
	flex: 0 0 auto;
	height: 28px;
	width: 28px;
}

.btn-round-sm > svg {
	height: 20px;
	width: 20px;
}

.btn-primary {
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
}

.btn-secondary {
	background-color: var(--secondary-color);
	color: var(--on-secondary-color);
}

.btn-error {
	background-color: var(--error-color);
	color: var(--on-error-color);
}

.btn-disabled {
	opacity: 0.5;
}
/*#endregion*/

html {
	height: 100%;
}

html,
body {
	min-height: 100dvh;
	color: var(--on-background-color);
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge legacy */
}

html.ios-device,
html.ios-device body {
	padding-bottom: 100px;
	overscroll-behavior-y: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

#allContainer {
	background-color: transparent !important;
}

.content-full {

}

/*#region Navigation Menu*/
.nav-left {
	position: fixed;
	top: 0;
	right: 0;
	background-color: var(--menu-container-color);
	box-shadow: 0 4px 15px rgba(0,0,0,0.5);
	box-sizing: border-box;
	display: flex;
	user-select: none;
	flex-direction: column;
	z-index: 11;
	border: 1px solid transparent;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 20px;
	margin: 10px;
	padding: 3px;
	transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
}

.nav-left .nav-left-item {
	display: none;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease, visibility 0s 0.25s;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	max-height: 0;
	visibility: hidden;
}

.nav-left .nav-left-item.nav-left-item-active {
	display: flex;
	opacity: 1;
	transform: translateY(0);
	max-height: 100px;
	visibility: visible;
	transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease;
}

.nav-left.nav-left-expanded .nav-left-item {
	display: flex;
	opacity: 1;
	transform: translateY(0);
	max-height: 100px;
	visibility: visible;
	transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease;
}

.nav-left.nav-left-collapsed .nav-left-item:not(.nav-left-item-active) {
	display: flex;
	opacity: 0;
	transform: translateY(-6px);
	max-height: 0;
	pointer-events: none;
}

.nav-left.nav-left-collapsed:not(:has(.nav-left-item-active)) {
	display: none;
}

@keyframes nav-left-fade-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes nav-left-fade-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.content-full > .nav-left {
	display: none;
}

.nav-left-list {
	display: flex;
	flex-direction: column;
}

#nav-logo-container {
	display: none;
}

.nav-left-logo {

}

.nav-left-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left;
}

#nav-group-2 {
	display: none;
}

.nav-left-powered-by {
	display: none;
}

.nav-left-item {

}

.nav-left-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	color: var(--on-menu-container-color);
	text-decoration: none;
	border-radius: 17px;
	padding: 10px;
}

.nav-left-item.nav-left-item-active > a {
	background-color: var(--active-menu-container-color);
	border-radius: 17px;
	color: var(--on-menu-container-color);
}

@media (hover: hover) {
	.nav-left-item:not(.nav-left-item-active) > a:hover,
	.nav-left-item:not(.nav-left-item-active) > a:focus {
		background-color: var(--active-menu-container-color);
	}
}

.nav-left-item-icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.nav-left-item-icon svg {
	fill: currentColor;
}

.nav-left-item-text {
	display: none;
}
/*#endregion*/


/*#region Chat Header*/
#chat-new-container {
	height: 100dvh;
	box-sizing: border-box;
	padding: calc(1rem + env(safe-area-inset-top))
	calc(1rem + env(safe-area-inset-right))
	calc(6rem + env(safe-area-inset-bottom))
	calc(1rem + env(safe-area-inset-left));
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#chat-header,
.chat-header {
	display: flex;
	flex-direction: row;
}

#chat-header button,
.chat-header button {
	background-color: transparent;
	color: var(--on-background-color);
	flex: 0 0 auto;
	align-self: center;
	width: 28px;
	height: 28px;
}

#chat-header .page-header-back,
.chat-header .page-header-back {
	background-color: var(--back-button-color);
	color: var(--on-back-button-color);
	width: 39px;
	height: 21px;
	padding: 4px 8px;
}

#chat-header div,
.chat-header div {
	flex: 1;
	align-self: center;
	text-align: center;
	font-size: 20px;
}

#chat-search-container {
	flex: 1;
	gap: 12px;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

#chat-search-label {
	text-align: center;
	font-size: 16px;
}

#chat-footer {
	width: 100%;
	padding: 12px 0;
	margin-top: auto;
}

#chat-footer button {
	min-width: 50%;
}

#btnGroupChatNext {
	display: block;
	margin: 0 auto;
}

#btnGroupChatStart {
	display: block;
	margin: 0 auto;
}

#chat-search-results {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#chat-search-results::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

/*
.chat-group {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

	.chat-group-left-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

		.chat-group-left-name-container {
			display: flex;
			flex-direction: column;
		}

		.chat-group-icon {
			background: var(--primary-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'><path d='M17.9996 17.0956C16.7873 17.0956 15.7496 16.664 14.8863 15.8007C14.0231 14.9375 13.5914 13.8997 13.5914 12.6875C13.5914 11.4752 14.0231 10.4375 14.8863 9.57419C15.7496 8.71093 16.7873 8.2793 17.9996 8.2793C19.2118 8.2793 20.2496 8.71093 21.1128 9.57419C21.9761 10.4375 22.4077 11.4752 22.4077 12.6875C22.4077 13.8997 21.9761 14.9375 21.1128 15.8007C20.2496 16.664 19.2118 17.0956 17.9996 17.0956ZM7.71387 27.7208V25.3018C7.71387 24.6952 7.89044 24.1276 8.24358 23.5991C8.59697 23.0709 9.07219 22.6607 9.66925 22.3685C11.0559 21.7036 12.4433 21.2049 13.8317 20.8723C15.22 20.54 16.6093 20.3738 17.9996 20.3738C19.3899 20.3738 20.7792 20.54 22.1675 20.8723C23.5558 21.2049 24.9433 21.7036 26.3299 22.3685C26.927 22.6607 27.4022 23.0709 27.7556 23.5991C28.1087 24.1276 28.2853 24.6952 28.2853 25.3018V27.7208H7.71387Z' fill='currentColor'/></svg>") no-repeat center;
			border-radius: 50%;
			width: 36px;
			height: 36px;
		}

		.chat-group-name {
			color: var(--on-background-color);
			font-size: 16px;
		}

		.chat-group-members {
			color: var(--on-background-color);
			font-size: 12px;
		}

	.chat-group-right-container {
		display: flex;
		align-items: end;
	}

		.chat-group-time {
			color: var(--secondary-color);
		}
*/

.chat-separator {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 0.5rem;
}

.chat-separator-line {
	border-top: 1px solid var(--surface-container-highest-color);
	flex: 1 1 auto;
	height: 0;
}

.chat-separator-text {
	color: var(--surface-container-highest-color);
	flex: 0 0 auto;
	font-size: 14px;
}

.chat-message {
	display: flex;
	gap: 8px;
}

.chat-message.me {
	align-self: flex-end;
}

.chat-message-icon {
	align-self: flex-end;
	border-radius: 50%;
	overflow: hidden;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
}

.chat-message-icon.me {
	display: none;
}

.chat-message-icon img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.chat-message-body {
	background: var(--chat-container-background);
	color: var(--chat-container-color);
	opacity: var(--chat-container-opacity);
	border-radius: 24px 24px 24px 0;
	padding: 8px 16px;
	font-size: 16px;
	display: flex;
	flex-direction: column;
}

.chat-message-body.me {
	background: var(--my-chat-container-background);
	color: var(--my-chat-container-color);
	opacity: var(--my-chat-container-opacity);
	border-radius: 24px 24px 0 24px;
	align-items: flex-end;
}

.chat-message-body-and-time {
	display: flex;
	flex-direction: column;
}

.chat-message-body-and-time.me {
	align-items: flex-end;
}

.chat-message-body-reactions {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.chat-message-body-reactions:not(:empty) {
	margin-top: -20px;
	margin-right: -20px;
	margin-left: 20px;
}

.chat-message-body-reactions.me {
	justify-content: flex-start;
	padding-left: 0;
}

.chat-message-body-reactions.me:not(:empty) {
	margin-right: 20px;
	margin-left: -20px;
}

.chat-message-body-parent {
	display: flex;
	gap: 6px;
}

.chat-message-body-attachment {
	max-width: 300px;
	max-height: 300px;
	margin: 0 -8px 8px -8px;
}

.chat-message-body-attachment.me {

}

.chat-message-body-attachment img,
.chat-message-body-attachment video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 16px;
	overflow: hidden;
}

.chat-message-body-text {
	/*background-color: var(--surface-container-lowest-color);*/
	/*color: var(--on-background-color);*/
	/*border-radius: 24px 24px 24px 0;*/
	/*padding: 8px 16px;*/
	/*font-size: 16px;*/
	/*width: fit-content;*/
}

.chat-message-body-text.me {
	/*background-color: var(--tertiary-container-color);*/
	/*color: var(--on-background-color);*/
	/*border-radius: 24px 24px 0 24px;*/
}

.chat-message-body-time {
	color: var(--secondary-color);
	padding: 4px 0 0 0;
	font-size: 12px;
}

.chat-message-body-time.me {

}

.chat-message-body-receipt {
	color: var(--secondary-color);
	padding: 4px 0 0 0;
	font-size: 12px;
}

.chat-message-body-receipt.me {

}

.chat-message-buttons {
	display: flex;
	column-gap: 8px;
	padding-top: 8px;
	opacity: 0;
}

.chat-message:hover .chat-message-buttons {
	opacity: 1;
}

.chat-message-buttons.me {
	flex-direction: row-reverse;
}

.chat-message-buttons .emoji-button,
.chat-message-buttons .more-button {
	width: 20px;
	height: 20px;
}

#chat-selected-users {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

#chat-selected-user {
	background-color: var(--primary-container-color);
	border-radius: 999px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 4px 6px;
	gap: 4px;
}

#chat-selected-users button {
	background-color: transparent;
	color: var(--on-background-color);
}

#chat-selected-users img {
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

#chat-search-results {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.result-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	gap: 8px;
}

.result-icon {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.result-icon img {
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

#chat-new-group-members .result-icon {
	width: 32px;
	height: 32px;
}

.result-text {
	flex: 1;
	align-self: center;
}

.result-text .user-name {
	color: var(--on-background-color);
	font-size: 16px;
}

.result-text .user-role {
	color: var(--on-primary-container-color);
	font-size: 12px;
}

.add-button {
	align-self: center;
}
/*#endregion*/

.content-wrapper {
	box-sizing: border-box;
	overflow: hidden;
}

.content-full > .content-wrapper {

}

.content {
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;
}

.notification-user-avatar {
	height: 36px;
	width: 36px;
	border-radius: 50%;
}

/*
.user {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.user-header {
    display: flex;
    gap: 16px;
}

.user-header-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
}

.user-header-avatar img {
    width: 100%;
}

.user-header-details {
    
}

.user-header-details-name {
    font-weight: 500;
    font-size: 1.5rem;
}

.user-header-details-counts {
    font-weight: 500;
    font-size: 0.875rem;
}

.user-header-details-counts-item {
    color: #B1CBCE;
    text-decoration-line: underline;
}

.user-header-details-badges-list {
    display: flex;
    gap: 16px;
}

.badge {
    font-weight: 500;
    font-size: 0.625rem;
    border-radius: 9999px;
    color: #22204C;
    background-color: #B8C9EA;
    padding: 0 7px;
    height: 24px;
    display: flex;
    align-items: center;
}
*/
.button {
	width: fit-content;
	padding: 8px 16px;
	box-sizing: border-box;
	border-radius: 9999px;
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
	font-weight: 600;
	line-height: 1.75;
	display: flex;
	justify-content: center;
	user-select: none;
	text-decoration: none;
}

.button-fw {
	width: 100%;
}

button[disabled],
.button-disabled {
	opacity: 0.5;
	cursor: default !important;
}

.button-list,
.button-list-fw {
	display: flex;
	gap: 12px;
	margin: 12px;
}

.button-list > .button {
	flex: 0 1 fit-content;
}

.button-list-fw > .button {
	flex: 1;
}

.avatar-image {
	border-radius: 9999px;
	overflow: hidden;
}

.user-image,
.chat-group-icon-image,
.timeline-post-author-avatar img {
	object-fit: cover;
}

.user-interests {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.user-interests-title {
	color: #B1CBCE;
	font-size: 1.125rem;
	font-weight: 500;
}

.creators-search {
	width: 100%;
	margin: 24px 0;
	position: relative;
}

.creators-search-icon {
	position: absolute;
	top: 20px;
	left: 16px;
	width: 20px;
}

.creators-search-icon svg {
	fill: #fff;
}

.creators-search-input {
	width: 100%;
	height: 56px;
	border-radius: 999px;
	border: 1px solid #252F40;
	padding: 0 24px 0 48px;
	box-sizing: border-box;
	background-color: #364359;
	color: #fff;
}

.creators-search-input:focus-visible {
	outline: #81d4dd solid 2px;
	outline-offset: -1px;
}

.user-list {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.user-list-item {
	display: flex;
	column-gap: 12px;
	justify-content: space-between;
	align-items: center;
}

.user-list-item-details {
	color: currentColor;
	text-decoration: none;
	flex: 1;
	display: flex;
	column-gap: 12px;
	align-items: center;
}

.user-list-item-avatar {
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	overflow: hidden;
}

.user-list-item-name {
	flex: 1;
}

.menu-button {
	appearance: none;
	border: none;
	padding: 0;
	background-color: transparent;
	color: currentColor;
	user-select: none;
	flex: unset;
}

.menu-button:before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>');
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: currentColor;
}

/*#region Tags*/
.tag-list {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 16px;
}

.tag {
	height: 36px;
	padding: 0 12px;
	border: none;
	border-radius: 9999px;
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
	display: flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 500;
	user-select: none;
	text-decoration: none;
	flex: none;
}

.tag a {
	background-color: transparent;
	text-decoration: none;
}

.tag button {
	background-color: transparent;
	color: var(--on-primary-container-color);
	border: none;
	font-size: 1rem;
	padding-bottom: 4px;
}

.tag.selected {
	background-color: var(--on-primary-container-color);
	color: var(--primary-container-color);
}

.tag.selected a {
	background-color: transparent;
}

.tag.selected button {
	background-color: transparent;
	color: var(--primary-container-color);
	border: none;
	font-size: 1rem;
	padding-bottom: 4px;
}
.tag--with-image {
	position: relative;
	color: white;
}

.tag--with-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
	border-radius: inherit;
	z-index: 0;
}

.tag--with-image > * {
	position: relative;
	z-index: 1;
}

/*#endregion*/

/*#region Search*/
.search {
	margin: 20px 0;
	position: relative;
	display: block;
	width: 100%;
	height: 55px;
}

.search > input {
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
	border: none;
	border-radius: 24px;
	box-sizing: border-box;
	width: 100%;
	height: 55px;
	padding: 12px 16px 12px 48px;
	outline: none;
	box-shadow: none;
	font-size: 16px;
	line-height: 24px;
}

.search > input:focus,
.search > input:active,
.search > input:hover,
.search > input:focus-visible {
	background-color: var(--primary-container-color);
	border: none;
	border-radius: 24px;
	outline: none;
	box-shadow: none;
}

.search > .search-input-placeholder {
	color: var(--on-primary-container-color);
	position: absolute;
	top: 50%;
	left: 48px;
	transform: translateY(-50%);
	pointer-events: none;
	transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
	opacity: 0.5;
}

.search > input:focus + .search-input-placeholder,
.search > input:not(:placeholder-shown) + .search-input-placeholder {
	top: 0;
	transform: scale(0.75) translateY(-110%) translateX(-48px);
	opacity: 1;
}

.search > .search-input-icon {
	color: var(--on-primary-container-color);
	position: absolute;
	top: 50%;
	left: 14px;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	pointer-events: none;
}
/*#endregion*/

/*#region Add Content*/
.addcontent-channels {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.addcontent-uploading {
	position: relative;
	overflow: hidden;
}

.addcontent-upload-progress {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
}

.addcontent-upload-progress::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(108, 196, 255, 0.2), rgba(108, 196, 255, 0.85), rgba(108, 196, 255, 0.2));
	animation: addcontent-upload-indeterminate 1.1s linear infinite;
}

@keyframes addcontent-upload-indeterminate {
	0% { transform: translateX(-100%); }
	50% { transform: translateX(0); }
	100% { transform: translateX(100%); }
}

.post-settings {
	background-color: #F2F2F299;
	color: var(--on-primary-container-color);
	border-radius: 18px;
}

.post-settings-item {
	display: block;
	padding: 12px 0;
	margin: 0 12px;
}

.post-settings-item.border {
	border-bottom: 1px solid var(--delimiter-color);
}

.post-settings-item-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding: 8px 30px;
	cursor: pointer;
}

.post-settings-item-header::before,
.post-settings-item-header::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: currentColor;
}

.post-settings-item-header::before {
	left: 0;
}

.post-settings-item-header-interests::before {
	mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0)'><path d='M4.66699 15.3334L6.00033 0.666687' stroke='%237D7D7D' stroke-opacity='0.9' stroke-width='0.666667'/><path d='M15.3337 10.6667H0.666992' stroke='%237D7D7D' stroke-opacity='0.9' stroke-width='0.666667'/><path d='M11.3333 0.666687L10 15.3334' stroke='%237D7D7D' stroke-opacity='0.9' stroke-width='0.666667'/><path d='M0.666992 5.33331H15.3337' stroke='%237D7D7D' stroke-opacity='0.9' stroke-width='0.666667'/></g><defs><clipPath id='clip0'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>");
}

.post-settings-item-header-access::before {
	mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M14.6663 8C14.0072 9.19598 13.0432 10.1961 11.8722 10.8987C10.7012 11.6013 9.36512 11.9812 7.99967 12C6.63423 11.9812 5.2981 11.6013 4.12714 10.8987C2.95617 10.1961 1.99212 9.19598 1.33301 8C1.99212 6.80403 2.95617 5.80391 4.12714 5.10133C5.2981 4.39874 6.63423 4.01876 7.99967 4C9.36512 4.01876 10.7012 4.39874 11.8722 5.10133C13.0432 5.80391 14.0072 6.80403 14.6663 8Z' stroke='%237D7D7D' stroke-opacity='0.9' stroke-width='0.666667'/><path d='M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z' stroke='%237D7D7D' stroke-opacity='0.9' stroke-width='0.666667'/></svg>");
}

.post-settings-item-header::after {
	right: 0;
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="16" viewBox="0 0 9 16"><path d="M 1.532171,15.0769 8.60917,7.99985 1.532171,0.922852 0.588501,1.86652 6.721841,7.99985 0.588501,14.1332 Z"></path></svg>');
}

.post-settings-item-details {

}

.post-settings-item-details .tag-list {
	margin: 0;
}
/*#endregion*/

/*#region Add Content YouTube*/
.video-list,
.media-list,
.mediaitem-list,
.medialist-list {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.video-list-item,
.media-list-item,
.mediaitem-list-item,
.medialist-list-item {
	display: flex;
	column-gap: 12px;
}

.video-list-item-thumbnail,
.media-list-item-thumbnail,
.mediaitem-list-item-thumbnail,
.medialist-list-item-thumbnail {
	width: 142px;
	height: 80px;
	border-radius: 8px;
	object-fit: cover;
}

.video-list-item-text,
.media-list-item-text,
.mediaitem-list-item-text,
.medialist-list-item-text {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.video-list-item-text-title,
.media-list-item-text-title,
.mediaitem-list-item-text-title,
.medialist-list-item-text-title {

}

.video-list-item-select,
.media-list-item-select,
.mediaitem-list-item-select,
.medialist-list-item-select {
	align-self: center;
}

.page-controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	column-gap: 12px;
}

.page-controls > button {
	flex: 0 1 auto;
}

.disabled-waiting {
	opacity: 0.5;
	pointer-events: none;
}

.addcontent-contentplatform-media {
	width: 100%;
	max-width: 600px;
	max-height: 600px;
}
/*#endregion*/

/*#region Stripe*/
.payment-form {
	/*display: flex;*/
	/*flex-direction: column;*/
	/*row-gap: 12px;*/
}

.payment-standard-input {
	appearance: none;
	border: none;
	background-color: transparent;
	color: inherit;
}

.payment-stripe-input {

}

.payment-standard-input,
.payment-stripe-input {
	width: 100%;
	height: 56px;
	border-radius: 9999px;
	border: 1px solid var(--primary-container-color);
	box-sizing: border-box;
	background-color: var(--primary-container-color);
	color: var(--on-background-color);
	padding: 0 24px;
}

.payment-standard-input:focus-visible,
.payment-stripe-input:focus-visible {
	outline: none;
}
/*#endregion*/

/*#region Page General*/
.page {
	--padding-top: 1rem;
	--padding-bottom: 1rem;
	--padding-left: 0.5rem;
	--padding-right: 0.5rem;
}

.page {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: calc(env(safe-area-inset-top) + var(--padding-top))
	calc(env(safe-area-inset-right) + var(--padding-right))
	calc(env(safe-area-inset-bottom) + var(--padding-bottom))
	calc(env(safe-area-inset-left) + var(--padding-left));
}

.page-header {
	width: 100%;
	min-height: 60px;
	display: flex;
	font-size: 20px;
	box-sizing: border-box;
	position: relative;
}

.page-header-back,
.back-button {
	background-color: var(--back-button-color);
	color: var(--on-back-button-color);
	border: none;
	border-radius: 25px;
	position: fixed;
	top: 18px;
	left: 18px;
	width: 39px;
	height: 21px;
	padding: 4px 8px;
	font-size: 10px;
	z-index: 1000;
}

.page-header-back::before,
.back-button::before {
	content: "Back";
}

a.page-header-back,
a.back-button {
	text-align: center;
	text-decoration: none;
}

.page-header-title {
	text-align: center;
	margin: 0 auto;
}

.page-header-logo {
	display: block;
	width: 100%;
	height: 28px;
	object-fit: contain;
	margin: 0 auto;
}

.page-body {
	width: 100%;
	flex: 1 0 auto;
}

.page-footer {
	width: 100%;
}

.page-title {
	color: var(--on-background-color);
	margin: 16px;
	font-size: 24px;
	text-align: center;
}

.section,
.page-section {
	margin: 16px;
}

.section-title {
	font-size: 18px;
	color: var(--secondary-color);
}

.section-subtitle {
	font-size: 14px;
}

.section-divider {
	border: 1px solid var(--surface-14-percent-color);
	margin: 8px 0;
}

/*#region Text Input with Floating Placeholder*/
.text-input {
	margin: 0;
	position: relative;
	display: block;
	width: 100%;
	height: 55px;
}

.text-input > input {
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
	border: none;
	border-radius: 24px;
	box-sizing: border-box;
	width: 100%;
	height: 55px;
	padding: 12px 16px;
	outline: none;
	box-shadow: none;
	font-size: 16px;
	line-height: 24px;
}

.text-input > input:focus,
.text-input > input:active,
.text-input > input:hover,
.text-input > input:focus-visible {
	background-color: var(--primary-container-color);
	border: none;
	border-radius: 24px;
	outline: none;
	box-shadow: none;
}

.text-input > span {
	color: var(--on-primary-container-color);
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
	opacity: 0.75;
	pointer-events: none;
}

.text-input > input:focus + span,
.text-input > input:not(:placeholder-shown) + span {
	top: 0;
	transform: scale(0.75) translateY(-110%) translateX(-8px);
	opacity: 1;
}
/*#endregion*/

/*#region Textarea Input with Floating Placeholder*/
.textarea-input {
	margin: 20px 0;
	position: relative;
	display: block;
	width: 100%;
	min-height: 120px; /* you can adjust */
}

.textarea-input > textarea {
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
	border: none;
	border-radius: 24px;
	box-sizing: border-box;
	width: 100%;
	min-height: 120px;
	padding: 16px;
	outline: none;
	box-shadow: none;
	font-size: 16px;
	line-height: 24px;
	resize: vertical; /* optional */
}

.textarea-input > textarea:focus,
.textarea-input > textarea:active,
.textarea-input > textarea:hover,
.textarea-input > textarea:focus-visible {
	background-color: var(--primary-container-color);
	border: none;
	border-radius: 24px;
	outline: none;
	box-shadow: none;
}

.textarea-input > span {
	color: var(--on-primary-container-color);
	position: absolute;
	left: 16px;
	top: 20px; /* initial placeholder position */
	transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
	opacity: 0.75;
	pointer-events: none;
}

.textarea-input > textarea:focus + span,
.textarea-input > textarea:not(:placeholder-shown) + span {
	top: 0;
	transform: scale(0.75) translateY(-110%) translateX(-8px);
	opacity: 1;
}
/*#endregion*/

/* We have limited options for colorizing the calendar button */
.text-input[type="date"]::-webkit-calendar-picker-indicator {
	color-scheme: light;
}

.text-input[type="date"]::-webkit-calendar-picker-indicator:not(.dark-mode) {
	color-scheme: light;
}

.select-input {
	width: 100%;
	height: 48px;
	border-radius: 9999px;
	border: 1px solid var(--surface-container-color);
	box-sizing: border-box;
	background-color: var(--surface-container-low-color);
	color: var(--on-background-color);
	padding: 0 24px;
}
/*#endregion*/

/*#region Accordion*/
.accordion {
	display: flex;
	padding: 23px 15px;
	row-gap: 16px;
	flex-direction: column;
	background-color: var(--surface-container-low-color);
	border: 1px solid var(--surface-container-color);
	border-radius: 24px;
}

.accordion-header {
	display: flex;
	font-size: 18px;
}

.accordion-button {
	appearance: none;
	background-color: transparent;
	color: inherit;
	padding: 0;
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.accordion-button::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.0001 14.7069L6.69238 9.39916L7.40013 8.69141L12.0001 13.2914L16.6001 8.69141L17.3079 9.39916L12.0001 14.7069Z"/></svg>');
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: currentColor;
}

.accordion-body {
	color: var(--secondary-color);
}
/*#endregion*/

.notifications-list {
	justify-self: center;
}

/*#region Timeline Controls*/
.timeline-controller {
	position: fixed;
	top: 12px;
	right: 12px;
	display: flex;
	gap: 8px;
	z-index: 10;
}

.circle-button {
	background-color: white;
	color: black;
	border: none;
	border-radius: 999px;
	width: 80px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: transform 0.1s ease-in-out;
}

.circle-button:hover {
	transform: scale(1.05);
	background-color: #f0f0f0;
}
/*#endregion*/

/*#region Timeline*/
#timeline-posts-show-new {
	display: flex;
	flex-direction: column;
	row-gap: 24px;
	padding-top: 16px;
	text-align: center;
}

.timeline-posts {
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge legacy */
}

.timeline-posts::-webkit-scrollbar {
	display: none;
}

.timeline-post {
	background: transparent;
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	overflow: hidden;
	gap: 12px;
	color: var(--on-timeline-container-color);
}

.timeline-post:first-of-type {
	margin-top: 0;
}

.timeline-posts > .timeline-post {
	padding-top: 8px;
	padding-bottom: 8px;
}

.timeline-post-header {
	background-color: var(--timeline-container-color);
	border-radius: 6px;
	position: absolute;
	top: 13px;
	left: 13px;
	max-width: 90dvw;
	padding: 11px 9px;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
}

.timeline-post.platform-youtube .timeline-post-header {
	top: auto;
	bottom: 35px;
	left: 25px;
	padding: 10px 9px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.timeline-post-footer {
	background-color: var(--timeline-container-color);
	border-radius: 9px;
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: 14px;
	padding: 14px 9px;
	gap: 8px;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	font-size: 12px;
}

.timeline-post-header-and-footer.no-post-content .timeline-post-footer {
	padding: 14px 9px 7px 9px;
}

.timeline-post-author {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media screen and (min-width: 632px) {
	.timeline-post-author {
		margin: 0;
	}
}

.timeline-post-author-avatar img {
	width: 24px;
	height: 24px;
	border-radius: 100px;
}

.timeline-post-author-avatar img.timeline-post-avatar-platform {
	border-radius: 0;
	object-fit: contain;
	object-position: center;
	padding: 2px;
	box-sizing: border-box;
}

.timeline-post-author-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
}

.timeline-post-author-text-name {
	color: var(--on-timeline-container-color);
	font-size: 14px;
}

.timeline-post-author-text-caption {
	color: var(--on-timeline-container-color);
	font-size: 8px;
	display: none;
}

.timeline-post-author-text-access {
	color: var(--on-timeline-container-color);
	font-size: 8px;
	text-transform: uppercase;
	display: none;
}

.timeline-post-embed {
	width: 100%;
}

.timeline-post-embed > div,
.timeline-post-embed > a > div {
	min-height: 240px;
	max-height: 100vh;
}

.timeline-post-embed > div > img,
.timeline-post-embed > a > div > img,
.timeline-post-embed > div > video,
.timeline-post-embed > a > div > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.timeline-post-embed img.landscape,
.timeline-post-embed video.landscape {
	width: calc(min(100vw, 600px));
}

.timeline-post-embed img.portrait,
.timeline-post-embed video.portrait {
	height: calc(min(100vw, 600px));
}

.timeline-post > .timeline-post {
	margin: 0;
	gap: 0;
}

.timeline-post-menu .menu-button {
	opacity: 0.5;
}

/*.timeline-post.platform-youtube .timeline-post-embed img,*/
/*.timeline-post.platform-youtube .timeline-post-embed video {*/
/*	border-radius: 60px;*/
/*}*/

.timeline-post.look-image .timeline-post-embed > div,
.timeline-post.look-youtube .timeline-post-embed > div,
.timeline-post.look-twitch .timeline-post-embed > div,
.timeline-post.look-tiktok .timeline-post-embed > div,
.timeline-post.look-instagram .timeline-post-embed > div {
	width: 100%;
}

.timeline-post.look-carousel .timeline-post-embed > div {
	height: 240px;
	aspect-ratio: 1 / 1 !important;
}

.timeline-post.look-carousel .timeline-post-embed-carousel-controls {
	display: none;
}

.timeline-post.look-image,
.timeline-post.look-instagram {
	padding-left: 24px;
	padding-right: 24px;
}

.timeline-post.look-image .timeline-post-footer,
.timeline-post.look-instagram .timeline-post-footer {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0;
	background-color: #A4A4A4;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 0;
	padding: 8px 10px;
	gap: 0;
	min-height: 40px;
}

.timeline-post.look-image .timeline-post-info,
.timeline-post.look-instagram .timeline-post-info {
	margin: 0;
	min-height: 20px;
}

.timeline-post.look-image .timeline-post-content,
.timeline-post.look-instagram .timeline-post-content {
	margin: 0;
	padding-top: 8px;
	color: #FFFFFF;
	font-size: 11px;
	line-height: 14px;
	white-space: normal;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.timeline-post.look-image .like-button::before,
.timeline-post.look-image .comment-button::before,
.timeline-post.look-instagram .like-button::before,
.timeline-post.look-instagram .comment-button::before {
	width: 17px;
	height: 17px;
}

.timeline-post.look-image .timeline-post-footer.timeline-footer-lines-2,
.timeline-post.look-instagram .timeline-post-footer.timeline-footer-lines-2 {
	min-height: 50px;
}

.timeline-post.look-image .timeline-post-footer.timeline-footer-lines-1,
.timeline-post.look-instagram .timeline-post-footer.timeline-footer-lines-1 {
	min-height: 40px;
}

.timeline-post.look-image .timeline-post-footer.timeline-footer-lines-1 .timeline-post-content,
.timeline-post.look-instagram .timeline-post-footer.timeline-footer-lines-1 .timeline-post-content {
	-webkit-line-clamp: 1;
}

.timeline-post.look-image .timeline-post-footer.timeline-footer-lines-0,
.timeline-post.look-instagram .timeline-post-footer.timeline-footer-lines-0 {
	min-height: 40px;
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	justify-content: center;
}

.timeline-post.look-image .timeline-post-footer.timeline-footer-lines-0 .timeline-post-content,
.timeline-post.look-instagram .timeline-post-footer.timeline-footer-lines-0 .timeline-post-content {
	display: none;
}

.timeline-post.look-image .timeline-post-footer.timeline-footer-lines-0 .timeline-post-info,
.timeline-post.look-instagram .timeline-post-footer.timeline-footer-lines-0 .timeline-post-info {
	min-height: 40px;
	align-items: center;
}

.timeline-post.look-carousel .timeline-post-header {
	display: none;
}

.timeline-post.look-carousel .timeline-post-footer {
	display: none;
}

.timeline-post.look-carousel .timeline-post-embed {
	display: flex;
	gap: 12px;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
	overflow: hidden; /* remove scrollbar while keeping layout */
	scrollbar-width: none;
}

.timeline-post.look-carousel .timeline-post-embed::-webkit-scrollbar {
	display: none;
}

.timeline-post.look-carousel .timeline-post-embed {
	overflow-x: auto;
	scrollbar-width: none;
	scrollbar-color: transparent transparent;
	-ms-overflow-style: none;
}

.timeline-post.look-carousel .timeline-post-embed-carousel {
	margin: 0;
	overflow: visible;
	width: 240px;
}

.timeline-post.look-carousel .timeline-post-embed-carousel-inner {
	gap: 12px;
}

.timeline-post.look-carousel .timeline-post-embed img,
.timeline-post.look-carousel .timeline-post-embed video {
	border-radius: 25px;
}

.timeline-post.look-carousel .timeline-post-embed-carousel-image img,
.timeline-post.look-carousel .timeline-post-embed-carousel-video video {
	object-fit: cover; /* crop to fill square */
	width: 100%;
	height: 100%;
}

.timeline-post.look-locked {
	padding-left: 20px;
	padding-right: 20px;
}

.timeline-post.look-locked .timeline-post-embed-carousel {
	width: calc(min(100vw, 600px) - 40px);
}

.timeline-post.look-locked .timeline-post-footer {
	display: none;
}

.timeline-post.look-text {
	padding-left: 12px;
	padding-right: 12px;
}

.timeline-post.look-text > .timeline-post {
	background: linear-gradient(180deg, rgba(195, 195, 196, 0.8) 0%, rgba(172, 172, 172, 0.8) 100%);
	border-radius: 60px;
	padding: 40px;
	gap: 10px;
}

.timeline-post.look-text .timeline-post-header {
	position: relative;
	top: 0;
	left: 0;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

.timeline-post.look-text .timeline-post-author-text-name {
	font-size: 16px;
}

.timeline-post.look-text .timeline-post-footer {
	position: relative;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	font-size: 16px;
	padding: 0;
}

.timeline-post.look-text .timeline-post-info {
	order: 2;
}

.timeline-post.look-text .timeline-post-info-buttons {
	display: none;
}

.timeline-post.look-youtube {
	padding-left: 12px;
	padding-right: 12px;
}

.timeline-post.look-youtube > .timeline-post {
	border-radius: 60px;
}

.timeline-post.look-youtube .timeline-post-header-and-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 40px 20px 40px;
	display: flex;
	gap: 4px;
	flex-direction: column;
	background-color: var(--timeline-container-color);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
}

.timeline-post.look-youtube .timeline-post-header-and-footer.no-post-content {
	padding: 12px 40px 10px 40px;
}

.timeline-post.look-youtube .timeline-post-header {
	position: relative;
	top: unset;
	left: unset;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

.timeline-post.look-youtube .timeline-post-footer {
	position: relative;
	left: unset;
	right: unset;
	bottom: unset;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

.timeline-post.look-youtube .timeline-post-info {
	display: none;
}

.timeline-post.look-twitch .timeline-post-header-and-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 40px 20px 40px;
	display: flex;
	gap: 4px;
	flex-direction: column;
	background-color: var(--timeline-container-color);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
}

.timeline-post.look-twitch .timeline-post-header-and-footer.no-post-content {
	padding: 12px 40px 10px 40px;
}

.timeline-post.look-twitch .timeline-post-header {
	position: relative;
	top: unset;
	left: unset;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

.timeline-post.look-twitch .timeline-post-footer {
	position: relative;
	left: unset;
	right: unset;
	bottom: unset;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

.timeline-post.look-twitch .timeline-post-info {
	display: none;
}

.timeline-post.look-tiktok .timeline-post-header-and-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 40px 20px 40px;
	display: flex;
	gap: 4px;
	flex-direction: column;
	background-color: var(--timeline-container-color);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
}

.timeline-post.look-tiktok .timeline-post-header-and-footer.no-post-content {
	padding: 12px 40px 10px 40px;
}

.timeline-post.look-tiktok .timeline-post-header {
	position: relative;
	top: unset;
	left: unset;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

.timeline-post.look-tiktok .timeline-post-footer {
	position: relative;
	left: unset;
	right: unset;
	bottom: unset;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

.timeline-post.look-tiktok .timeline-post-info {
	display: none;
}

.timeline-post.look-twitch {
	padding-left: 12px;
	padding-right: 12px;
}

.timeline-post.look-twitch > .timeline-post {
	border-radius: 60px;
}

.timeline-post.look-tiktok {
	padding-left: 12px;
	padding-right: 12px;
}

.timeline-post.look-tiktok > .timeline-post {
	border-radius: 60px;
}

.timeline-post.look-instagram {

}

.timeline-post.look-x {
	padding-left: 12px;
	padding-right: 12px;
}

.timeline-post.look-x > .timeline-post {
	border-radius: 60px;
}

.timeline-post-tag-list {
	display: none !important;
}

.timeline-post-embed-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto; /* Derived from aspect-ratio */
	aspect-ratio: 16 / 9; /* Uniform height; adjust to 9/16 if portrait-heavy content */
	overflow-x: hidden;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	margin: 0 auto; /* Center */
	/*background-color: #000;*/
	display: flex; /* For potential centering */
	max-height: 100vh;
	min-height: 200px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scrollbar-color: transparent transparent;
	cursor: grab;
	user-select: none;
}

.timeline-post-embed-carousel-inner {
	display: flex;
	flex-direction: row;
	width: 100%; /* Full width for all items */
	height: 100%;
	justify-content: flex-start;
	--timeline-slide-percent: 100;
}

.timeline-post-embed-carousel::-webkit-scrollbar,
.timeline-post-embed-carousel-inner::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
	display: none;
}

.timeline-post-embed-carousel.is-scroll-active {
	overflow-x: auto;
}

.timeline-post-embed-carousel.is-dragging {
	cursor: grabbing;
}

.carousel-media-item {
	/* New class: Uniform flex sizing for all items */
	flex: 0 0 calc(var(--timeline-slide-percent, 100) * 1%); /* No shrink/grow, full slide basis */
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* Extra clip for safety */
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.timeline-post-embed-carousel-image,
.timeline-post-embed-carousel-video {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* Removed fixed vw/max-width – now responsive via parent */
}

.timeline-post-embed-carousel-image img,
.timeline-post-embed-carousel-video video {
	width: 100%;
	height: 100%;
	object-fit: contain; /* keep full image visible */
	object-position: center center;
	display: block;
	max-width: 100%;
	max-height: 100%;
}

.timeline-media-lightbox.hidden {
	display: none;
}

.timeline-media-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.timeline-media-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.18s ease, visibility 0s linear 0s;
}

.timeline-media-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.timeline-media-lightbox.is-open .timeline-media-lightbox-backdrop {
	opacity: 1;
}

.timeline-media-lightbox-shell {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	transform: scale(0.9);
	opacity: 0;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.timeline-media-lightbox.is-open .timeline-media-lightbox-shell {
	transform: scale(1);
	opacity: 1;
}

.timeline-media-lightbox-close {
	position: fixed;
	top: 16px;
	right: 16px;
	background: transparent;
	color: #fff;
	font-size: 28px;
	border: none;
	cursor: pointer;
	z-index: 10000;
}

.timeline-media-lightbox-content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 90vw;
	max-height: 75vh;
}

.timeline-media-lightbox-content img,
.timeline-media-lightbox-content video {
	max-width: 90vw;
	max-height: 75vh;
	object-fit: contain;
	background: #000;
}

.timeline-media-lightbox-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	background: linear-gradient(transparent, rgba(0,0,0,0.6));
	color: #fff;
	z-index: 10;
	pointer-events: none;
}

.timeline-media-lightbox-controls > * {
	pointer-events: auto;
}

.timeline-media-lightbox-controls .tl-ctrl {
	background: transparent;
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: transform 0.1s ease;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

.timeline-media-lightbox-controls .tl-ctrl:active {
	transform: scale(0.9);
}

.timeline-media-lightbox-controls .tl-ctrl-range {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	margin: 0;
	outline: none;
	transition: height 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.timeline-media-lightbox-controls .tl-ctrl-range:hover {
	height: 6px;
}

.timeline-media-lightbox-controls .tl-ctrl-range::-webkit-slider-runnable-track {
	width: 100%;
	height: 3px;
	background: transparent;
}

.timeline-media-lightbox-controls .tl-ctrl-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	height: 0;
}

.timeline-media-lightbox-controls .tl-ctrl-range::-moz-range-thumb {
	width: 0;
	height: 0;
	border: 0;
}

.timeline-media-lightbox-controls .tl-ctrl-left,
.timeline-media-lightbox-controls .tl-ctrl-right {
	display: flex;
	align-items: center;
	gap: 15px;
}

.timeline-media-lightbox-controls .tl-ctrl-time {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	white-space: nowrap;
}

/* Custom progress bar look using background-size/gradient if we wanted, 
   but for now let's just make it a thin line. 
   To show progress, we can use a trick with linear-gradient background on the range input.
*/

.timeline-media-lightbox-controls .tl-ctrl-time {
	/* No longer hidden */
}


.timeline-inline-video-mute {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.timeline-inline-video-mute .timeline-inline-video-icon-muted {
	display: none;
}

.timeline-inline-video-mute.is-muted .timeline-inline-video-icon-muted {
	display: block;
}

.timeline-inline-video-mute.is-muted .timeline-inline-video-icon-unmuted {
	display: none;
}

.timeline-inline-video-scrub {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255, 255, 255, 0.28);
	outline: none;
	border: 0;
	z-index: 2;
}

.timeline-inline-video-scrub::-webkit-slider-runnable-track {
	height: 3px;
	background: transparent;
}

.timeline-inline-video-scrub::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	height: 0;
	border: 0;
}

.timeline-inline-video-scrub::-moz-range-track {
	height: 3px;
	background: transparent;
}

.timeline-inline-video-scrub::-moz-range-thumb {
	width: 0;
	height: 0;
	border: 0;
}

/* Livestream layout */
.livestream-video-box,
.livestream-content {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.livestream-content {
	min-height: 200px;
}

.livestream-video,
.livestream-video-image {
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover; /* fill and crop sides */
	display: block;
	border-radius: 0;
	backface-visibility: hidden;
	transform: translateZ(0); /* reduce tearing on mobile */
	image-rendering: auto;
}

.timeline-post-embed-carousel-space {
}

.timeline-post-embed-carousel-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none; /* let media clicks pass through */
}

.timeline-post-embed-carousel-prev,
.timeline-post-embed-carousel-next {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	opacity: 1;
	cursor: pointer;
	appearance: none;
	background-color: transparent;
	pointer-events: auto;
	padding: 0;
	display: block;
	visibility: visible;
	transition: opacity 0.2s linear, visibility 0.2s linear;
	pointer-events: auto; /* Re-enable clicks */
}

.timeline-post-embed-carousel-prev:focus-visible,
.timeline-post-embed-carousel-next:focus-visible {
	outline-offset: -10px;
}

.timeline-post-embed-carousel-prev {
	left: 0;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="48" height="48"><defs><filter id="a" width="1.686" height="1.686" x="-.343" y="-.343" style="color-interpolation-filters:sRGB"><feFlood flood-color="%23000" flood-opacity=".8" result="flood"/><feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="4"/><feOffset in="blur" result="offset"/><feComposite in="flood" in2="offset" operator="in" result="comp1"/><feComposite in="comp1" in2="SourceGraphic" operator="out" result="comp2"/></filter></defs><path d="M24 10a14 14 0 0 0-14 14 14 14 0 0 0 14 14 14 14 0 0 0 14-14 14 14 0 0 0-14-14Zm2.291 6c.225 0 .45.086.621.258l.83.83a.88.88 0 0 1 .002 1.242L22.1 24l5.644 5.67a.88.88 0 0 1-.002 1.242l-.83.83a.88.88 0 0 1-1.244 0l-7.121-7.12a.878.878 0 0 1 0-1.243l7.12-7.121a.88.88 0 0 1 .624-.258Z" style="fill:%23fff;stroke-width:.96;stroke-dasharray:none;fill-opacity:1;filter:url(%23a)"/><path d="M24 10a14 14 0 0 0-14 14 14 14 0 0 0 14 14 14 14 0 0 0 14-14 14 14 0 0 0-14-14Zm2.291 6c.225 0 .45.086.621.258l.83.83a.88.88 0 0 1 .002 1.242L22.1 24l5.644 5.67a.88.88 0 0 1-.002 1.242l-.83.83a.88.88 0 0 1-1.244 0l-7.121-7.12a.878.878 0 0 1 0-1.243l7.12-7.121a.88.88 0 0 1 .624-.258Z" style="display:inline;fill:%23fff;fill-opacity:.80000001;stroke-width:.96;stroke-dasharray:none"/></svg>');
}

.timeline-post-embed-carousel-next {
	right: 0;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="48" height="48"><defs><filter id="a" width="1.686" height="1.686" x="-.343" y="-.343" style="color-interpolation-filters:sRGB"><feFlood flood-color="%23000" flood-opacity=".8" result="flood"/><feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="4"/><feOffset in="blur" result="offset"/><feComposite in="flood" in2="offset" operator="in" result="comp1"/><feComposite in="comp1" in2="SourceGraphic" operator="out" result="comp2"/></filter></defs><path d="M24 10a14 14 0 0 1 14 14 14 14 0 0 1-14 14 14 14 0 0 1-14-14 14 14 0 0 1 14-14Zm-2.291 6a.875.875 0 0 0-.621.258l-.83.83a.88.88 0 0 0-.002 1.242L25.9 24l-5.644 5.67a.88.88 0 0 0 .002 1.242l.83.83a.88.88 0 0 0 1.244 0l7.121-7.12a.878.878 0 0 0 0-1.243l-7.12-7.121a.88.88 0 0 0-.624-.258Z" style="display:inline;fill:%23fff;fill-opacity:.8;stroke-width:.96;stroke-dasharray:none;filter:url(%23a)"/><path d="M24 10a14 14 0 0 1 14 14 14 14 0 0 1-14 14 14 14 0 0 1-14-14 14 14 0 0 1 14-14Zm-2.291 6a.875.875 0 0 0-.621.258l-.83.83a.88.88 0 0 0-.002 1.242L25.9 24l-5.644 5.67a.88.88 0 0 0 .002 1.242l.83.83a.88.88 0 0 0 1.244 0l7.121-7.12a.878.878 0 0 0 0-1.243l-7.12-7.121a.88.88 0 0 0-.624-.258Z" style="display:inline;fill:%23fff;fill-opacity:.8;stroke-width:.96;stroke-dasharray:none"/></svg>');
}

.timeline-post-embed-carousel-control-disabled {
	opacity: 0;
	cursor: unset;
	visibility: hidden;
}

.anti-flicker-video {
	/* Anti-flicker for videos: GPU acceleration and containment */
	transform: translateZ(0);
	will-change: transform;
	contain: paint;
	background: #000;
}

.timeline-post-content {
	color: var(--on-timeline-container-color);
	white-space: pre-wrap;
}

@media screen and (min-width: 632px) {
	.timeline-post-content {
		margin: 0;
	}
}

.timeline-post-tag {
	background-color: var(--surface-11-percent-color);
	color: var(--on-timeline-container-color);
}

.timeline-post-tag-list {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

@media screen and (min-width: 632px) {
	.timeline-post-tag-list {
		margin: 0;
	}
}

.timeline-post-tag-list:empty {
	display: none;
}

.timeline-post-event {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.timeline-post-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

@media screen and (min-width: 632px) {
	.timeline-post-info {
		margin: 0;
	}
}

.timeline-post-info-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-self: flex-start;
	column-gap: 20px;
	font-size: 11px;
}

.timeline-post-header-and-footer.no-post-content .timeline-post-info-buttons {
	align-self: center;
	align-items: center;
}

.timeline-post-header-and-footer.no-post-content .like-button,
.timeline-post-header-and-footer.no-post-content .comment-button,
.timeline-post-header-and-footer.no-post-content .share-button {
	margin-top: 0;
	margin-bottom: 0;
}

.timeline-post-info-time {
	color: var(--on-timeline-container-color);
	font-size: 10px;
}

.blurry-content {
	filter: blur(8px);
	transition: filter 0.3s ease;
}

.blurry-content:hover {
	filter: none;
}

.subscribe-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* Ensure subscribe button is not blurred */
.no-blur {
	filter: none !important;
	opacity: 1 !important;
	z-index: 11; /* Ensure button is above overlay */
}

.subscribe-button {
	padding: 8px 16px;
	font-size: 14px;
	background: var(--primary-button-color, #007bff);
	color: var(--on-primary-button-color, #FFFFFF);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: filter 0.3s ease, transform 0.2s ease;
	font-weight: 600;
}

.subscribe-button:hover {
	filter: brightness(0.95);
}

.subscribe-button:active {
	transform: scale(0.98);
}

.subscribe-button[data-subscription-tier="bronze"] {
	background: var(--bronze-subscription-background);
	color: var(--on-bronze-subscription-background);
}

.subscribe-button[data-subscription-tier="silver"] {
	background: var(--silver-subscription-background);
	color: var(--on-silver-subscription-background);
}

.subscribe-button[data-subscription-tier="gold"] {
	background: var(--gold-subscription-background);
	color: var(--on-gold-subscription-background);
}

.subscribe-button.subscribe-button-creator {
	background: #FFFFFF;
	color: #000000;
}

.subscribe-button.subscribe-button-creator:hover {
	filter: none;
}

.timeline-post-content.disabled-content,
.timeline-post-tag-list.disabled-content {
	filter: blur(4px);
	pointer-events: none;
}

/* Ensure the carousel and content are positioned relatively to contain the overlay */
.timeline-post-embed-carousel,
.timeline-post-content {
	position: relative;
}


/*dtouve: Commenting this out for now, we can reintroduce later after we match existing design*/
/*!* heart icon container *!*/
/*.timeline-post-info .like-button .heart {*/
/*	transition: filter 0.2s ease;*/
/*}*/

/*!* hover glow effect *!*/
/*.timeline-post-info .like-button:hover .heart {*/
/*	filter: brightness(1.2);*/
/*}*/

/*!* like count *!*/
/*.timeline-post-info .like-button .like-count {*/
/*	font-weight: 500;*/
/*}*/

/*	.timeline-post-info .like-button.flash,*/
/*	.timeline-post-info .comment-button.flash,*/
/*	.timeline-post-info .share-button.flash {*/
/*		animation: flash 1s;*/
/*	}*/

/*@keyframes flash {*/
/*	0% {*/
/*		filter: brightness(1);*/
/*	}*/

/*	50% {*/
/*		filter: brightness(2);*/
/*	}*/

/*	100% {*/
/*		filter: brightness(1);*/
/*	}*/
/*}*/
/*#endregion*/

.like-button,
.comment-button,
.share-button,
.upvote-button,
.emoji-button,
.more-button,
.cancel-button,
.delete-button,
.edit-button,
.close-button {
	appearance: none;
	user-select: none;
	background-color: transparent;
	color: var(--on-timeline-container-color);
	display: flex;
	flex-direction: row;
	margin: -10px -10px -10px -10px;
	padding: 10px 10px 10px 10px;
	gap: 2px;
}

.like-button::before,
.comment-button::before,
.share-button::before,
.upvote-button::before,
.emoji-button::before,
.more-button::before,
.cancel-button::before,
.delete-button::before,
.edit-button::before,
.close-button::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: currentColor;
	vertical-align: text-top;
}

.like-button:not(:empty)::before,
.comment-button:not(:empty)::before,
.share-button:not(:empty)::before,
.upvote-button:not(:empty)::before,
.emoji-button:not(:empty)::before,
.more-button:not(:empty)::before,
.cancel-button:not(:empty)::before,
.delete-button:not(:empty)::before,
.edit-button:not(:empty)::before,
.close-button:not(:empty)::before {
	margin-right: 5px;
}

.like-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"/></svg>');
}

.like-button.solid::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>');
}

.comment-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>');
}

.comment-button.solid::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z"/></svg>');
}

.share-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M561.938 158.06L417.94 14.092C387.926-15.922 336 5.097 336 48.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 199.2 96 232.6 96 271.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.651 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V336c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88zM384 336V232.16C255.309 234.082 166.492 255.35 206.31 376 176.79 357.55 144 324.08 144 271.94c0-109.334 129.14-118.947 240-119.85V48l144 144-144 144zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.369-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.541z"/></svg>');
}

.share-button.solid::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M568.482 177.448L424.479 313.433C409.3 327.768 384 317.14 384 295.985v-71.963c-144.575.97-205.566 35.113-164.775 171.353 4.483 14.973-12.846 26.567-25.006 17.33C155.252 383.105 120 326.488 120 269.339c0-143.937 117.599-172.5 264-173.312V24.012c0-21.174 25.317-31.768 40.479-17.448l144.003 135.988c10.02 9.463 10.028 25.425 0 34.896zM384 379.128V448H64V128h50.916a11.99 11.99 0 0 0 8.648-3.693c14.953-15.568 32.237-27.89 51.014-37.676C185.708 80.83 181.584 64 169.033 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48v-88.806c0-8.288-8.197-14.066-16.011-11.302a71.83 71.83 0 0 1-34.189 3.377c-7.27-1.046-13.8 4.514-13.8 11.859z"/></svg>');
}

.upvote-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-320h80v-168l64 64 56-56-160-160-160 160 56 56 64-64v168Zm40 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"></path></svg>');
}

.emoji-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"></path></svg>');
}

.more-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>');
}

.cancel-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>');
}

.delete-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"/></svg>');
}

.edit-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>');
}

.close-button::before {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>');
}

.reaction-button {
	appearance: none;
	background-color: var(--tertiary-container-color);
	padding: 3px 7px;
	display: flex;
	justify-content: center;
	column-gap: 4px;
	flex-direction: row;
	color: var(--on-background-color);
	font-size: 14px;
	border: 1px solid transparent;
	flex: 0 0 auto;
}

.reaction-button.me {
	border-color: var(--primary-color);
}

.reaction-button > img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.context-menu {
	position: fixed;
	background-color: var(--primary-container-color);
	border: 1px solid var(--primary-container-color);
	border-radius: 4px;
	color: var(--on-primary-container-color);
	z-index: 1001;
	box-shadow: 0 2px 20px 2px rgba(0, 0, 0, 0.25);
}

.context-menu button {
	width: 100%;
	appearance: none;
	border-radius: 0;
	background-color: transparent;
	margin: 0;
	padding: 4px 12px;
	display: block;
	text-align: left;
	color: inherit;
}

.context-menu button:hover {
	background-color: var(--primary-container-color);
}

.context-menu button:not(:first-child) {
	border-top: 1px solid var(--on-primary-container-color);
}

.context-menu-backdrop {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1001;
}



/* --- modal shell -------------------------------------------------------- */
.modal-layer {
	position: fixed; /* floats above the full‑screen canvas   */
	inset: 0; /* fill the viewport                     */
	display: flex; /* centers the dialog block              */
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(6px);
	z-index: 9999; /* higher than any canvas      */
	animation: modal-layer-fade-in 160ms ease-out both;
}

/* --- dialog block ------------------------------------------------------- */
.modal-layer .modal-body {
	width: 80vw;
	height: 80vh;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	border-radius: .75rem;
	overflow: auto; /* scroll if your fragment overflows    */
	padding: 1.25rem;
	position: relative; /* keeps close button inside            */
	color: var(--on-primary-container-color); /* default text color                   */
	box-sizing: border-box;
	margin: 0 auto;
	opacity: 0;
	transform: translateY(10px) scale(0.985);
	animation: modal-body-pop-in 190ms cubic-bezier(0.2, 0.75, 0.2, 1) 20ms both;
}

.modal-layer.modal-closing {
	animation: modal-layer-fade-out 140ms ease-in both;
}

.modal-layer.modal-closing .modal-body {
	animation: modal-body-pop-out 140ms ease-in both;
}

/* --- close button ------------------------------------------------------- */
.modal-layer .modal-close {
	position: absolute;
	top: .5rem;
	right: .75rem;
	font: 2rem/1 sans-serif;
	background: transparent;
	border: none;
	color: var(--on-background-color);
	cursor: pointer;
	transition: transform .15s ease;
}

.modal-layer .modal-close:hover {
	transform: scale(1.15);
}

@keyframes modal-layer-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes modal-layer-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes modal-body-pop-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes modal-body-pop-out {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(8px) scale(0.985);
	}
}

@media (prefers-reduced-motion: reduce) {
	.modal-layer,
	.modal-layer .modal-body,
	.modal-layer.modal-closing,
	.modal-layer.modal-closing .modal-body {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* --- simple drag‑and‑drop zone ----------------------------------------- */
.upload-zone {
	border: 2px dashed #777;
	border-radius: .5rem;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: background .2s ease;
}

.upload-zone.hover {
	background: rgba(255,255,255,.05);
}

.btn-browse {
	cursor: pointer;
	color: #93c5fd;
	text-decoration: underline;
}


/*#region Modal*/
.modal {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;

	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
}

.modal.hidden {
	display: none;
}

.modal-body {
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(15.9px);
	-webkit-backdrop-filter: blur(15.9px);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	width: clamp(60px, 600px, 90vw);
	height: clamp(60px, 600px, 90vh);
}

.modal-header {
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	padding: 6px 12px 3px 12px;
}

.modal-close {
	background-color: transparent !important;
	color: var(--on-background-color);
	border: none;
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 24px;
}

.modal-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 6px 12px 6px 12px;
}

.modal-footer {
	padding: 6px 12px 12px 12px;
}
/*#endregion*/

.comments-list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow-y: auto;
	gap: 10px;
}

.comments-list > .no-comments {
	display: flex;
	flex-direction: column;
	width: max-content;
	justify-items: stretch;
	align-self: center;
	justify-self: center;
}

.comments-list > .no-comments > strong,
.comments-list > .no-comments > div {
	display: inline-block;
	text-align: justify;
	text-align-last: justify;
}

.comments-list > .no-comments > strong {
	color: #7a7a7a;
	font-size: 22px;
}

.comments-list > .no-comments > div {
	color: var(--secondary-color);
	font-size: 12px;
}

.comment-item {
	padding: 8px 12px;
	border-radius: 8px;
	margin-bottom: 8px;
}

.comment-item.temp {
	opacity: 0.6;
	font-style: italic;
}

.comment-header {
	display: flex;
	font-size: 0.85rem;
	color: #000000;
	margin-bottom: 4px;
	gap: 8px;
}

.comment-header .divider {
	color: var(--on-background-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.comment-body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.comment-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.comment-text {
	color: #000000;
	flex: 1 1 auto;
	flex-wrap: wrap;
	margin-bottom: 4px;
	font-size: 0.95rem;
	word-break: break-word;
}

.comment-text.moderated {
	font-style: italic;
	color: #666;
	opacity: 0.7;
}

.comment-body .like-button-container {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin-left: 8px;
	gap: 2px;
	color: #7e7e7e;
}

.comment-body .like-button {
	background-color: transparent;
	color: var(--secondary-color);
	border: none;
	flex: 0;
	min-width: 24px;
	min-height: 24px;
}

.comment-body .like-button svg {
	width: 24px;
	height: 24px;
}

.comment-body .like-count {
	color: var(--secondary-color);
	flex: 0;
	font-size: 14px;
}

.comment-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 24px;
	gap: 12px;
	font-size: 0.8rem;
}

.comment-actions button {
	background: none;
	border: none;
	flex: 0;
	padding: 0;
	cursor: pointer;
}

.comment-actions .reply-button {
	color: var(--on-background-color);
}

.comment-actions .emoji-button,
.comment-actions .emoji-button svg{
	color: #7a7a7a;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.view-replies {
	background: none;
	border: none;
	color: #6e6e6e;
	cursor: pointer;
	font-size: 0.8rem;
	padding: 0;
	min-width: max-content;
	white-space: nowrap;
}

.view-replies:hover {
	text-decoration: underline;
}

.replies-container {
	margin-top: 6px;
	border-left: 2px solid #364359;
	padding-left: 12px;
}

.emoji-picker-backdrop {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1001;
}

.emoji-picker {
	position: fixed;
	width: 240px;
	height: 300px;
	background-color: var(--surface-container-high-color);
	border: 1px solid var(--surface-container-highest-color);
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 20px 2px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	z-index: 1001;
}

.emoji-picker-top {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	padding: 12px;
}

.emoji-picker-search {
	height: 40px;
	margin: 0;
}

.emoji-picker-bottom {
	flex: 1;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--surface-container-highest-color);
}

.emoji-picker-items {
	display: grid;
	grid-template-columns: repeat(5, minmax(40px, 1fr));
	grid-auto-rows: 40px;
	padding: 6px;
}

.emoji-picker-items > button {
	appearance: none;
	padding: 0;
	background-color: transparent;
	border-radius: unset;
	color: var(--on-background-color);
	display: block;
	font-size: 30px;
	text-align: center;
}

.emoji-picker-items > button > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*.reply-button {*/
/*	background: none;*/
/*	border: none;*/
/*	color: #81d4dd;*/
/*	cursor: pointer;*/
/*	font-size: 0.8rem;*/
/*	padding: 0;*/
/*}*/

/*.reply-button:hover {*/
/*	text-decoration: underline;*/
/*}*/

.comment-delete {
	background: none;
	border: none;
	color: #e0245e;
	cursor: pointer;
	font-size: 0.8rem;
	padding: 0;
}

.comment-input {
	display: flex;
	align-items: center;
	gap: 8px;
}

.comment-input input {
	background-color: #ffffff;
	color: #000000;
	border: 1px solid var(--surface-container-highest-color);
	border-radius: 999px;
	flex: 1 1 auto;
	padding: 10px 0 10px 16px;
	font-size: 16px;
}

.comment-input .comment-submit {
	background-color: var(--surface-container-color);
	color: #ffffff;
	border: 1px solid var(--surface-container-highest-color);
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

.checkbox-icon,
.radio-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #5aa7e8;
	display: inline-block;
	position: relative;
}

.checkbox-icon.checked::after,
.radio-icon.checked::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
	background-color: #5aa7e8;
	border-radius: 50%;
}

.checkbox-icon {
	border-radius: 6px;
}

.checkbox-icon.checked::after {
	border-radius: 2px;
}

/*#region Toggle Switch*/
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	min-width: 44px;

	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.toggle-switch input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-container-color);
	border: 2px solid var(--on-primary-container-color);
	border-radius: 34px;
	transition: 0.2s;
}

.slider::before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 2px;
	bottom: 2px;
	background-color: var(--on-primary-container-color);
	border-radius: 50%;
	transition: 0.2s;
}

.toggle-switch input:checked + .slider {
	background-color: var(--on-primary-container-color);
	border-color: var(--on-primary-container-color);
	user-select: none;
}

.toggle-switch input:checked + .slider::before {
	background-color: var(--primary-container-color);
	transform: translateX(20px);
}
/*#endregion*/

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(6px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-card {
	background-color: #1a2a3a;
	color: white;
	border-radius: 20px;
	padding: 24px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.modal-avatar img {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: #444;
}

.modal-role {
	margin-top: 8px;
	padding: 4px 10px;
	background-color: #444;
	border-radius: 12px;
	font-size: 0.9em;
}

.modal-view-profile {
	margin-top: 20px;
	background: white;
	color: black;
	border: none;
	border-radius: 20px;
	padding: 10px 20px;
	font-weight: bold;
	cursor: pointer;
}

.moderation-item {

}
.moderation-img-preview {
	max-height: 30%;
	max-width: 30%;
}

/*#region Settings*/
body {
	--settings-page-background: var(--background-color);
	--settings-page-surface: transparent;
	--settings-card-background-color: #F9F9F999;
	--settings-card-text-color: var(--on-background-color);
	--settings-card-subtext-color: var(--on-background-color);
	--settings-card-accent-color: var(--on-background-color);
	--settings-card-divider-color: #D9D9D9;
	--settings-card-shadow: 0 12px 32px transparent;
	--settings-card-hover-background: transparent;
	--settings-watermark-color: transparent;

	--settings-card-border-radius: 16px;
}

body.settings-view .settings-container {
	position: relative;
	background: var(--settings-page-surface);
	color: var(--settings-card-text-color);
	overflow: hidden;
}

body.settings-view .settings-container > *:not(.settings-watermark) {
	position: relative;
	z-index: 1;
}

body.settings-view #content {
	position: relative;
}

.settings-watermark {
	position: absolute;
	top: -80%;
	left: -80%;
	width: 260%;
	height: 260%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	font-size: clamp(1.4rem, 5vw, 3.4rem);
	font-weight: 700;
	letter-spacing: 0.45rem;
	text-transform: uppercase;
	color: var(--settings-watermark-color);
	opacity: 0.18;
	pointer-events: none;
	transform: rotate(-20deg);
	transform-origin: center;
	z-index: 0;
	user-select: none;
}

.settings-watermark--content {
	top: -130%;
	left: -130%;
	width: 320%;
	height: 320%;
	opacity: 0.22;
}

.settings-watermark--panel {
	top: -60%;
	left: -60%;
	width: 220%;
	height: 220%;
	opacity: 0.14;
}

.settings-watermark span {
	white-space: nowrap;
}

.settings-watermark span:nth-child(odd) {
	transform: translateX(-10%);
}

.settings-watermark span:nth-child(even) {
	transform: translateX(10%);
}

body.settings-view .settings-wrapper .settings-card.is-hidden-card {
	display: none;
}

body.settings-view .settings-wrapper .settings-card-title.is-hidden-card-title {
	display: none;
}

body.settings-view .settings-wrapper .settings-card-subtext.is-hidden-card-subtext {
	display: none;
}

@media (max-width: 768px) {
	.settings-watermark {
		font-size: clamp(1.1rem, 8vw, 2.6rem);
		letter-spacing: 0.3rem;
	}

	.settings-watermark--content {
		top: -150%;
		left: -150%;
		width: 360%;
		height: 360%;
	}
}

.settings-container {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-left)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-right));
}

.settings-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 1rem;
}

.settings-header-back-button {
	background-color: var(--back-button-color);
	color: var(--on-back-button-color);
	border: none;
	border-radius: 25px;
	position: fixed;
	top: 18px;
	left: 18px;
	width: 39px;
	height: 21px;
	padding: 4px 8px;
	font-size: 10px;
	z-index: 1000;
}

.settings-header-back-button svg {
	display: none;
}

.settings-header-text {
	color: var(--on-background-color);
	font-size: 20px;
	margin: 0 auto;
}

.settings-wrapper {
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	gap: 8px;
}

.settings-card {
	background: var(--settings-card-background-color);
	border-radius: var(--settings-card-border-radius);
	box-shadow: var(--settings-card-shadow);
	padding: 0 10px;
}

.settings-card-title {
	color: var(--settings-card-accent-color);
	font-size: 18px;
	padding: 14px 0 4px 0;
}

.settings-card-subtext {
	color: var(--settings-card-accent-color);
	font-size: 12px;
	padding: 4px 0 14px 0;
}

.settings-item {
	border-top: 1px solid var(--settings-card-divider-color);
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0 14px;
}

.settings-card .settings-item:first-of-type {
	border-top: 1px solid transparent;
}

.settings-item:hover {
	background: var(--settings-card-hover-background);
}

.settings-item-option {
	all: unset;
	border-top: 2px solid var(--settings-card-divider-color);
	color: var(--settings-card-text-color);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 14px;
	min-height: 56px;
	cursor: pointer;
}

.settings-card .settings-item-option:first-of-type {
	border-top: none;
}

.settings-item-option:hover {
	background: var(--settings-card-hover-background);
}

.settings-item-option-icon-name {
	display: flex;
	flex-direction: row;
	font-size: 18px;
	gap: 8px;
}

.settings-item-option-icon-name svg {
	width: 24px;
	height: 24px;
}

.settings-item-link {
	color: var(--settings-card-text-color);
	cursor: pointer;
	text-decoration: none;
}

.settings-item-link-text {
	margin-right: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.settings-item-link::after {
	content: '';
	min-width: 8px;
	min-height: 8px;
	border-right: 2px solid var(--settings-card-accent-color);
	border-bottom: 2px solid var(--settings-card-accent-color);
	transform: rotate(-45deg);
	margin-left: auto;
}

.settings-item-link-arrow:has(.settings-item-link-text) {
	content: '';
	min-width: 8px;
	min-height: 8px;
	border-right: 2px solid var(--settings-card-accent-color);
	border-bottom: 2px solid var(--settings-card-accent-color);
	transform: rotate(-45deg);
}

.settings-item-link.settings-item-link-external::after {
	content: '';
	width: 1.5em;
	height: 1.5em;
	background-image: url('/icons/link.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	margin-left: auto;
	transform: none;
}

/* right-side radio */
.settings-radio {
	--radio-filled-color: var(--on-primary-container-color);
	--radio-checkmark-color: var(--primary-container-color);

	border: 3px solid var(--radio-filled-color);
	border-radius: 4px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	width: 22px;
	height: 22px;
	cursor: pointer;
}

.settings-item-option.active .settings-radio {
	background: var(--radio-filled-color);
	border-color: var(--radio-filled-color);
}

.settings-item-option.active .settings-radio::before {
	content: '';
	width: 8px;
	height: 4px;
	border: 2px solid var(--radio-checkmark-color);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
	background: transparent;
	border-radius: 0;
}

.settings-item-option:not(.active) .settings-radio {
	border-color: var(--radio-accent-color);
}

body {
	--bg: var(--background-color); /* page bg is your teal gradient; this sits on top */
	--card: var(--surface-container-low-color); /* dark card */
	--card-2: var(--surface-container-lowest-color); /* slightly darker for pressed */
	--text: var(--on-background-color);
	--muted: var(--on-background-color);
	--accent: var(--secondary-color); /* light teal/blue accent */
	--divider: rgba(255,255,255,.08);
	--radius: 16px;
	--shadow: 0 0 0 0 var(--shadow-color);
}

/* Footer */
.settings-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
	gap: 14px;
}

.settings-footer-version-wrapper {
	color: var(--muted);
	font-size: 12px;
}

/* Existing button-fw can match the screenshot’s pill */
#settings-container .button.button-fw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--divider);
	text-decoration: none;
	transition: background .2s, border-color .2s;
}

#settings-container .button.button-fw:hover {
	background: rgba(255,255,255,.03);
	border-color: rgba(255,255,255,.12);
}

/* Accessibility */
.settings-item:focus-visible,
.settings-item-link:focus-visible,
.logout-btn:focus-visible,
#settings-container .button.button-fw:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* --- Switch Roles rows --- */
.role-item {
	/* reset any global button styles */
	all: unset; /* wipe default button styling */
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 70px;
	padding: 12px 14px;
	border-top: 1px solid var(--divider);
	cursor: pointer;
	color: var(--text);
	background: transparent;
	transition: background .2s, transform .02s;
}

#switch-roles-list .role-item:first-child {
	border-top: 0;
}

.role-item:hover {
	background: rgba(255,255,255,.03);
}

.role-item:active {
	transform: translateY(1px);
}

.role-avatar {
	width: 44px;
	height: 44px;
	border-radius: 120px; /* keep it squarish like the screenshot */
	object-fit: cover;
	flex: 0 0 auto;
}

.role-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 12px;
	min-width: 0; /* enables ellipsis */
}

.role-name {
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.role-badge {
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* right-side check */
.role-check {
	margin-left: auto;
	min-width: 22px;
	min-height: 22px;
	border-radius: 4px;
	border: 2px solid var(--on-primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
}

.role-item.active .role-check {
	background: var(--on-primary-color);
}

.role-item.active .role-check::before {
	content: '';
	width: 8px;
	height: 4px;
	border: 2px solid var(--background-color);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg) translateY(-1px);
}

/* keyboard focus */
.role-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
/*#endregion*/

/* Tooltip button */
.tooltip-button {
	color: var(--on-background-color);
	position: relative;
	display: inline-flex;
}

.tooltip-button button {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	background: none;
	color: var(--on-background-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	outline: none;
}

.tooltip-button svg {
	color: var(--on-background-color);
}

.tooltip-button button:hover {
	/*background: rgba(255, 255, 255, 0.15);*/
	/*border-color: rgba(255, 255, 255, 0.75);*/
}

.tooltip-button button:focus-visible {
	outline: 2px solid var(--on-background-color, #81d4dd);
	outline-offset: 2px;
}

.tooltip-button button svg {
	width: 16px;
	height: 16px;
}

.tooltip-button-tooltip {
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
	border-radius: 8px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);

	position: fixed;
	transform: translate(16px, 32px);

	width: fit-content;
	height: fit-content;
	padding: 12px 16px 8px 16px;
	gap: 8px;

	pointer-events: none;
	overflow: visible;
	opacity: 0;
	z-index: 1000;
}

@media screen and (max-width: 900px) {
	.tooltip-button-tooltip {
		transform: translate(0, 32px);
		right: 0;
	}

	.tooltip-button-tooltip.left-side {
		transform: translate(0px, 32px);
		left: 0;
	}
}

.tooltip-button-tooltip-title {
	font-weight: 500;
}

.tooltip-button-tooltip-content {
	font-weight: 400;
}

/* When hovering over button or container, show tooltip */
.tooltip-button:hover .tooltip-button-tooltip,
.tooltip-button:focus-within .tooltip-button-tooltip {
	opacity: 1;
	pointer-events: auto;
}

/* Media Carousel */
.media-carousel {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #444 transparent;
}

.media-carousel-item {
	flex: 0 0 auto;
	height: 240px;
	width: 240px;
	border-radius: 12px;
	overflow: hidden;
}

.media-carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Loading */
.ui-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--background-alt-gradient);
	opacity: 1;
	pointer-events: all;
	transition: opacity 150ms linear;
	overflow: hidden;
}
.ui-loading-overlay.is-fading {
	opacity: 0;
	pointer-events: none;
}
.ui-loading-overlay.is-hidden {
	display: none;
}
.ui-loading-overlay__content {
	position: relative;
	padding: 28px 44px;
	text-align: center;
}
.ui-loading-overlay__logo {
	font-size: 32px;
	color: var(--on-primary-color);
}
.ui-loading-overlay__sub {
	margin-top: 10px;
	color: var(--on-primary-color);
	font-size: 12px;
}


#uiSystemStatus {
	display: none;
}

#toast-container, .toast-container {
	position: fixed;
	top: 1rem;
	right: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	z-index: 3000;
}

.toast {
	padding: 1rem;
	border-radius: 8px;
	animation: toast-slide-in-from-right 200ms ease forwards;
	opacity: 1;
	transition: opacity 500ms ease-in-out; /* if you change this, also change web.toast.fadeOutDurationMs */
}

.toast img {
	width: 24px;
	height: 24px;
}

.toast.notification,
.toast.success,
.toast.warning,
.toast.error {
	background-color: var(--primary-container-color);
	color: var(--on-primary-container-color);
}

.toast.fade-out {
	opacity: 0;
}

@keyframes toast-slide-in-from-right {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}