@import url("general/groups.css");
@import url("general/local.css");
@import url("general/programs.css");
@import url("general/contextmenu.css");
@import url("general/reordering.css");
@import url("general/notifications.css");

@import url("programs/friends.css");
@import url("programs/login.css");
@import url("programs/error.css");
@import url("programs/text.css");
@import url("programs/config.css");
@import url("programs/roles.css");
@import url("programs/invites.css");
@import url("programs/info.css");
@import url("programs/profile.css");

@import url("themes/dark.css");
@import url("general/responsiveness.css");
/*@import url("themes/light.css");*/
:root {
	--error-bg: repeating-linear-gradient(45deg, #f003 0px, #f003 5px, #f001 5px, #f001 10px);
}
* {
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
	display: none;
}

body {
	background: var(--color-background-primary);
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	
	--device-safe-area-top: env(safe-area-inset-top, 0);
	--device-safe-area-bottom: env(safe-area-inset-bottom, 0);
	--device-safe-area-left: env(safe-area-inset-left, 0);
	--device-safe-area-right: env(safe-area-inset-right, 0);
}
#app {
	--safe-area-top-full: var(--device-safe-area-top);
	--safe-area-bottom-full: var(--device-safe-area-bottom);
	--safe-area-left-full: var(--device-safe-area-left);
	--safe-area-right-full: var(--device-safe-area-right);
}

@keyframes loading-ball-sizing {
	
	0% {
		
		transform: scale(1);
		background: var(--bg2);
		top: 2px;
		
	}
	50% {
		
		transform: scale(0.5);
		background: var(--bg1);
		top: -4px;
	}
	100% {
		transform: scale(1);
		background: var(--bg2);
		top: 2px;
	}
	
}
@keyframes loading-ball-movement {
	
	0% {
		left: 10px;
	}
	50% {
		left: -10px;
	}
	100% {
		left: 10px;
	}
	
}

#loading-screen {
	position: fixed;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	--bg1: #fff8;
	--bg2: #fff;
}

#loading-screen::before, #loading-screen:after {
	content: "";
	position: fixed;
	animation: 2s ease-in-out infinite;
	animation-name: loading-ball-sizing, loading-ball-movement;
	animation-duration: 1s, 1s;
	animation-delay: -0.25s, 0s;
	width: 10px;
	height: 10px;
	background: var(--bg2);
	display: inline-block;
}


#loading-screen::after {
	animation-delay: -0.75s, -0.5s;
}

.discrete-header {
	
	user-select: none;
	font-size: 10px;
	color: var(--color-background-tertiary);
	text-transform: uppercase;
	padding: 5px;
	margin-top: 5px;
	
}

#app {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
}

#app-container {
	display: flex;
	height: 100%;
	background: var(--color-background-primary);
	overflow: hidden;
}

.release-info {
	position: fixed;
	left: 0;
	top: 0;
	font-size: 1.2em;
	font-style: italic;
	white-space: pre-wrap;
	max-width: 100vw;
	padding: 32px;
	box-sizing: border-box;
	opacity: 0.8;
	pointer-events: none;
}

.wallpaper,
#app-container:before {
	width: 100%;
	height: 100%;
	position: fixed;
	object-fit: cover;
	filter: blur(8px);
	z-index: -1000;
	left: 0;
	top: 0;
}
#app-container:before {
	content: "";
	opacity: 0.25;
	transition: opacity 0.2s ease-in-out;
	background-image: url("/css/images/cc0-lighthouse-goodfreephotos.jpg");
	background-position: center;
	background-size: cover;
}
#app-container:not(:has(
	#all-groups-container[style*=display]
)):before {
	opacity: 0;
}

#current-group-container {
	display: flex;
	flex-direction: row;
	position: relative;
	width: 100%;
}


#user-info-container {
	flex: none;
	height: fit-content;
}

#user-info-container .user-name {
	display: none;
}

.icon {
	pointer-events: none;
	user-select: none;
}

.user {
	display: flex;
	user-select: none;
}

.sidebar .user[state="offline"] {
	opacity: 0.3;
}

.user-pfp {
	width: 40px;
	height: 40px;
	border-radius: 20%;
	background: var(--image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex: none;
	position: relative;
}
.user[state] .user-pfp::after {
	content: "";
	border-radius: 50%;
	background: #ccc;
	width: 30%;
	height: 30%;
	display: inline-block;
	position: absolute;
	left: 100%;
	top: 100%;
	transform: translate(-50%, -50%) translate(-25%, -25%);
	outline: 2px solid #0005;
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0px 1px inset #0008;
}
.user[state="online"] .user-pfp::after {
	background-color: #0c0;
}
.user[state="group"] .user-pfp:after {
	background-color: #0e0;
	background-image: url("/icons/people-fill.svg");
}
.user[state="program"] .user-pfp:after {
	background-color: #09c;
}
.user-pfp[style*="uploads/null"] {
	background-image: url("/icons/person-fill.svg"), linear-gradient(to bottom, #fff, #888);
	background-size: 60%, 100%;
}


.user-name {
	margin-left: var(--text-message-spacing-from-pfp);
	font-weight: bold;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"text roleicons"
		"status status";
	align-items: center;
	width: 100%;
	max-width: fit-content;
	overflow: hidden;
}
.user-name-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	grid-area: text;
}
.role-icons {
	grid-area: roleicons;
	white-space: nowrap;
	height: 16px;
	overflow: hidden;
	min-width: 16px;
	text-overflow: ellipsis;
}
.role-icons:empty {
	display: none;
}
.user-name:has(.user-status:not(:empty)) {
	flex-direction: column;
	align-items: start;
}
.user-status {
	font-size: 0.7em;
	opacity: 0.6;
	grid-area: status;
	text-overflow: ellipsis;
	overflow: hidden;
    display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.user-tag:before {
	content: "@";
}
.user-tag {
	display: none;
}

.role-icons img {
	width: 16px;
	height: 16px;
	margin-left: 5px;
}


.appear-clickable:hover {
	background: #fff2;
	cursor: pointer;
}
.appear-clickable:active {
	filter: brightness(0.5);
}

input[type="submit"], input[type="reset"], button {
	width: fit-content;
	display: block;
	background: var(--color-button-primary);
	padding: 6px 10px;
	font-size: 0.9em;
	border: none;
	border-radius: 6px;
	text-shadow: 0 1px 1px #fff8;
	transition: filter var(--quick-transition);
	filter: brightness(1);
	cursor: pointer;
	color: var(--color-button-text-primary);
	box-shadow: inset 0 0 0px 1px #ccc, 0 5px 5px #0003;
}
button:not(.primary), input[type="reset"] {
	background: var(--color-button-secondary);
	color: var(--color-button-text-secondary);
	text-shadow: 0 1px #0008;
	box-shadow: inset 0 0 0px 1px #0009, 0 5px 5px #0003;
}
input[type="submit"]:hover, button:hover, input[type="reset"]:hover {
	filter: brightness(0.9);
}

input[type="text"], input[type="password"], textarea {
	background: var(--color-input-primary);
	padding: 7px 10px;
	border-radius: 6px;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	border: none;
	/*outline: 3px solid #0005;*/
}

input[type="text"] :-webkit-placeholder, input[type="password"] :placeholder, textarea :placeholder {
	color: #fff8;
}
.button-group {
	display: flex;
}
.button-group :not(:last-child) {
	margin-right: 10px;
}
.button-group * {
	width: 100% !important;
}