/* #region SUBSCREEN */
#friend-list-subscreen {
	--border-color: white;
	--border-style: solid;
	--button-size: min(7dvh, 3.5dvw);
	--button-color: white;
	--inactive-button-color: lightgray;
	--image-color: white;
	--text-color: white;
	--row-height: min(8dvh, 4dvw);
	--friend-list-height: calc(min(100dvh, 50dvw) - (var(--row-height) * 2) - (var(--small-gap) * 4));
	--small-gap: min(0.4dvh, 0.2dvw);

	box-sizing: border-box;
	border: var(--border-width) var(--border-color) var(--border-style);
	padding: 0;
}

#friend-list-subscreen * {
	box-sizing: border-box;
}

#friend-list-subscreen hr {
	margin: 0 auto;
	border: var(--border-width) var(--border-color) var(--border-style);
}
/* #endregion */

/* #region NAV BAR */
#friend-list-mode-title {
	padding: var(--small-gap);
	width: 20%;
	text-align: center;
	user-select: none;
}

#friend-list-search-input {
	width: 20%;
	height: min(4dvh, 2dvw);
	font-size: min(3dvh, 1.5dvw);
}

#friend-list-nav-bar {
	display: flex;
	height: var(--row-height);
	align-items: center;
	color: var(--text-color);
}

#friend-list-buttons {
	display: flex;
	position: absolute;
	right: var(--small-gap);
	gap: var(--small-gap);
}

#friend-list-nav-hr {
	width: 100%;
}
/* #endregion */

/* #region HEADER */

#friend-list-header {
	user-select: none;
}

#friend-list-header .friend-list-link {
	text-decoration: none;
}

#friend-list-header .friend-list-row:hover {
	color: var(--text-color);
}

#friend-list-header-hr {
	width: 80%;
}
/* #endregion */

/* #region MODE SPECIFIC STYLES */
#friend-list-subscreen .mode-specific-content.mode-specific-content {
	display: none;
}

#friend-list-subscreen[data-mode="OnlineFriends"] .fl-online-friends-content,
#friend-list-subscreen[data-mode="OnlineFriends"] .fl-member-count-content {
	display: block;
}

#friend-list-subscreen[data-mode="Beeps"] .fl-beeps-content {
	display: block;
}

#friend-list-subscreen[data-mode="AllFriends"] .fl-all-friends-content {
	display: block;
}

.ChatRoomType {
	display: flex;
	justify-content: center;
	gap: 0.15em;
	user-select: none;
}

.friend-list-icon-container {
	--tooltip-gap: 0.15em;

	position: relative;
	height: var(--row-height);
	width: var(--row-height);
	max-width: 86px;
	max-height: 86px;
	aspect-ratio: 1 / 1;
}

.friend-list-icon {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (hover: hover) {
	@supports selector(:has(*)) {
		.friend-list-icon-container:hover:not(:has(.button-tooltip:hover)) > .button-tooltip {
			visibility: visible;
		}
	}

	@supports not selector(:has(*)) {
		.friend-list-icon-container:hover > .button-tooltip {
			visibility: visible;
		}
	}
}

.friend-list-icon-small {
	pointer-events: none;
	height: var(--row-height);
	width: var(--row-height);
	max-width: 50px;
	max-height: 50px;
	margin-inline: 0.15em;
	aspect-ratio: 1 / 1;
}

.friend-list-icon-monochrome {
	background: gray;
}

/* #endregion */

/* #region FRIENDLIST */
#friend-list {
	--row-height: min(6dvh, 3dvw);

	display: flex;
	flex-direction: column;
	height: var(--friend-list-height);
	word-wrap: break-word;
	padding: 0;
}

#friend-list-table {
	position: relative;
	left: var(--button-size);
	width: calc(100% - var(--button-size));
	height: calc(100% - var(--row-height));
	display: grid;
	grid-template-rows: min-content min-content auto;
}

#friend-list-table th {
	font-weight: normal;
}

.friend-list-row {
	color: var(--text-color);
	min-height: var(--row-height);
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-evenly;
	padding: unset;
	margin: var(--small-gap) 0;
}

.friend-list-row > * {
	vertical-align: middle;
	text-justify: center;
	padding: unset;
}

.friend-list-row:hover {
	color: yellow;
}

.friend-list-row:hover .friend-list-icon-monochrome {
	background-color: yellow;
}

.friend-list-pending {
	color: gray;
}

.friend-list-column {
	float: left;
	width: 22%;
	text-align: center;
	text-wrap: nowrap;
	white-space: preserve;
}

.friend-list-column.ChatRoomName,
.friend-list-column.MemberName {
	user-select: all;
}

.friend-list-column.MemberNumber,
.friend-list-column.ChatRoomMemberCount {
	user-select: none;
}

.MemberName.friend-list-unknown {
	font-style: italic;
	user-select: none;
}

#friend-list-subscreen[data-mode="AllFriends"] .RelationType {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--small-gap);
}

.RelationType {
	user-select: none;
}

.friend-list-link,
.friend-list-link * {
	color: white;
}

.friend-list-link:disabled,
.friend-list-link:disabled * {
	color: gray;
	cursor: auto;
}

.friend-list-link:hover,
.friend-list-link:hover * {
	color: cyan;
}

.friend-list-link:hover:disabled,
.friend-list-link:hover:disabled * {
	color: gray;
}

.friend-list-actions-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.friend-list-actions-button {
	text-decoration: none;
	font-size: inherit;
	line-height: 1;
}

.friend-list-actions-menu {
	background-color: white;
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	padding: 0;
	border: var(--border-width) solid black;
	color: black;
	box-shadow: var(--inner-border-width) var(--inner-border-width) min(2vh, 1vw) 0 rgb(0 0 0 / 50%);
	visibility: hidden;
	position: absolute;
}

.friend-list-actions-menu[open="true"] {
	inset: unset;
	visibility: unset;
}

.friend-list-actions-item {
	border: none;
	width: min(24dvh, 12dvw);
	height: min(5dvh, 2.5dvw);
}

.friend-list-actions-item .button-image {
	padding-left: var(--inner-border-width);
	width: calc(min(5dvh, 2.5dvw) - 2 * var(--inner-border-width));
	height: calc(min(5dvh, 2.5dvw) - 2 * var(--inner-border-width));
	max-width: 86px;
	max-height: 86px;
}

.highlight {
	text-decoration: underline;
	font-weight: 800;
	font-style: normal;
}
/* #endregion */

/* #region BUTTONS */

#friend-list-reset-sorting {
	position: absolute;
}

.button.inactive {
	background-color: var(--inactive-button-color);
}

.button.inactive::before {
	opacity: 0.3;
}

.friend-list-button {
	height: var(--button-size);
	width: var(--button-size);
}

/* #endregion */

/* #region BEEP */

.friend-list-beep-dialog {
	--border-radius: 12px;
	--hint-color: #777;

	margin: auto;
	background-color: #ffffffaa;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 0.5em;
	border: none;
	padding: 0.5em;
	box-sizing: border-box;
	border-radius: var(--border-radius);
	backdrop-filter: blur(5px);
	width: 100dvw;
	height: 100dvh;
}

.friend-list-beep-dialog * {
	box-sizing: border-box;
}

.friend-list-beep-textarea {
	width: 90%;
	max-height: min(40dvh, 20rem);
	margin-top: auto;
	width: 100%;
	height: 3em;
	font: inherit;
	padding: 0.5em;
	flex: 1;
	outline-style: none;
	border: none;
}

.friend-list-beep-chat-input {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-radius: var(--border-radius);
}

.friend-list-beep-chat-input:has(.friend-list-beep-textarea:focus) {
	outline-style: auto;
}

.friend-list-beep-chat-input-field {
	display: flex;
	align-items: stretch;
	width: 100%;
	border-radius: var(--border-radius);
	border: var(--border-width) black solid;
	overflow: hidden;
}

.friend-list-beep-chat-input:has(.friend-list-beep-reply-preview) .friend-list-beep-chat-input-field {
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.friend-list-beep-chat-send {
	width: min(12dvh, 6dvw);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: var(--gap);
	margin: 0;
	border: none;
}

.friend-list-beep-chat-send::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8%;
	bottom: 8%;
	width: var(--border-width);
	background: black;
	pointer-events: none;
}

.friend-list-beep-chat-send .button-image {
	position: relative;
	top: unset;
	left: unset;
	transform: none;
}

.friend-list-beep-chat-log-wrapper {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

.friend-list-beep-chat-log {
	width: 100%;
	flex: 1;
	border: var(--border-width) var(--border-color) var(--border-style);
	border-radius: var(--border-radius);
	padding: 0.5em;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	background-color: #ffffff66;
}

.friend-list-beep-scroll-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	width: min(5dvh, 2.5dvw);
	height: min(5dvh, 2.5dvw);
	border-radius: 50%;
	border: none;
	background: white;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	opacity: 1;
	scale: 1;
	pointer-events: auto;
	transition:
		opacity 0.15s ease,
		scale 0.15s ease;
	z-index: 10;
}

.friend-list-beep-scroll-btn:hover {
	background: lightgray;
	color: #222;
}

.friend-list-beep-scroll-btn[data-hidden] {
	opacity: 0;
	scale: 0.6;
	pointer-events: none;
}

.friend-list-beep-unread-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -0.65em;
	min-width: 1.4em;
	border-radius: 0.7em;
	background-color: #4a90d9;
	color: white;
	font-size: 0.5em;
	font-weight: bold;
	padding: 0 0.3em;
	pointer-events: none;
}

.friend-list-beep-unread-badge[hidden] {
	display: none;
}

.friend-list-beep-chat-entry {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
	padding: 0 0.45em;
}

.friend-list-beep-chat-entry-header {
	display: block;
	width: 100%;
	min-width: 0;
}

.friend-list-beep-chat-body {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}

.friend-list-beep-chat-actions {
	position: absolute;
	top: 0.08em;
	right: 0.12em;
	z-index: 3;
	display: inline-flex;
	flex-direction: row;
	padding: 0.125rem;
	border-radius: 0.5rem;
	background: #f2f3f5;
	border: var(--border-width) solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.14s ease;
}

.friend-list-beep-chat-entry:hover .friend-list-beep-chat-actions,
.friend-list-beep-chat-entry:focus-within .friend-list-beep-chat-actions {
	opacity: 1;
	pointer-events: auto;
}

.friend-list-beep-chat-entry:hover .friend-list-beep-chat-type-message,
.friend-list-beep-chat-entry:focus-within .friend-list-beep-chat-type-message {
	background-color: rgba(0, 0, 0, 0.055);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.friend-list-beep-chat-toolbar-btn {
	width: 1.15em;
	height: 1.15em;
}

.friend-list-beep-chat-toolbar-btn:not([aria-disabled="true"]):hover {
	background: rgba(0, 0, 0, 0.06);
}

.friend-list-beep-chat-quote {
	display: block;
	width: 100%;
	max-width: 100%;
	text-align: start;
	margin-bottom: 0.35em;
	padding: 0.55em 0.75em;
	min-height: 2.6em;
	border-left: 5px solid #4a90d9;
	background: #ffffff55;
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	font-size: 0.95em;
	line-height: 1.45;
	box-sizing: border-box;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.friend-list-beep-chat-reactions {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--gap);
	margin-top: 0.2em;
	overflow: visible;
}

.friend-list-beep-reaction-chip {
	min-height: 1.25em;
	min-width: 1.25em;
	padding: 0.125rem 0.375rem;
	border-radius: 0.35rem;
	font-size: 1.05em;
	line-height: 1.35;
	overflow: visible;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.friend-list-beep-reaction-chip:not([aria-disabled="true"]):hover {
	background: rgba(0, 0, 0, 0.06);
}

.friend-list-beep-reaction-chip[aria-checked="true"] {
	background: rgba(88, 101, 242, 0.18);
	color: #4752c4;
}

.friend-list-beep-reaction-chip[aria-checked="true"]:not([aria-disabled="true"]):hover {
	background: rgba(88, 101, 242, 0.28);
}

.friend-list-beep-reaction-chip > .button-label {
	position: static;
	transform: none;
	font-size: 0.8em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: visible;
}

.friend-list-beep-reply-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	min-height: 2em;
	padding: 0.35em 0.6em;
	background-color: white;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	border: var(--border-width) solid black;
	border-bottom: none;
	font-size: 0.9em;
}

.friend-list-beep-reply-preview-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.friend-list-beep-reply-preview-cancel {
	flex-shrink: 0;
	width: 1.75em;
	height: 1.75em;
	padding: 0.2em;
}

/* Lives inside #friend-list-beep-dialog so it paints above chat log in the modal top layer */
.friend-list-beep-reaction-picker {
	position: fixed;
	z-index: 1;
	isolation: isolate;
	background: #ffffffee;
	border: 1px solid #ccc;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 0.35em 0.45em;
	width: max-content;
	max-width: 100%;
	overflow: visible;
}

.friend-list-beep-reaction-picker-title {
	font-size: 0.7em;
	color: var(--hint-color);
	margin-bottom: 0.2em;
}

.friend-list-beep-reaction-picker-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em;
	justify-content: center;
	align-items: center;
}

.friend-list-beep-reaction-picker-emoji {
	font-size: 1.15em;
	line-height: 1;
	padding: 0.12em 0.2em;
	border-radius: calc(var(--border-radius) * 0.6);
	overflow: visible;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.friend-list-beep-reaction-picker-emoji.button {
	overflow: visible;
}

.friend-list-beep-reaction-picker-emoji > .button-label {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	max-width: none;
	max-height: none;
	height: auto;
	overflow: visible;
	transform: none;
	line-height: 1.2;
	font-size: 1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@keyframes friend-list-beep-chat-highlight-anim {
	from {
		background-color: rgba(255, 230, 120, 0.95);
	}
	to {
		background-color: transparent;
	}
}

.friend-list-beep-chat-highlight {
	animation: friend-list-beep-chat-highlight-anim 1.4s ease-out;
}

/* Consecutive messages from the same sender collapse into a single block:
   hide the repeated sender/time header and tighten vertical spacing. */
.friend-list-beep-chat-entry.friend-list-beep-chat-grouped .friend-list-beep-chat-meta {
	display: none;
}

.friend-list-beep-chat-entry.friend-list-beep-chat-grouped {
	margin-top: calc(-1 * var(--half-gap));
}

.friend-list-beep-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1em;
}

.friend-list-beep-status {
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	display: inline-block;
}

.friend-list-beep-status-online {
	background-color: #4cc36c;
}

.friend-list-beep-status-offline {
	background-color: #d14b4b;
}

.friend-list-beep-chat-close {
	/* Match the .friend-list-beep-title font size */
	height: min(86px, calc(1.1 * 1.15em));
	width: min(86px, calc(1.1 * 1.15em));
}

.friend-list-beep-chat-input-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#friend-list-beep-chat-toggle-room-label {
	user-select: none;
}

.friend-list-beep-chat-toggle .button-label {
	display: contents;
}

.friend-list-beep-chat-meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--gap);
}

.friend-list-beep-chat-room {
	color: var(--hint-color);
	font-size: 0.9em;
	font-weight: normal;
	min-width: 0;
	overflow-wrap: anywhere;
}

.friend-list-beep-chat-time {
	color: var(--hint-color);
	font-size: 0.9em;
}

.friend-list-beep-chat-message {
	white-space: pre-wrap;
	word-break: break-word;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	border-radius: calc(var(--border-radius) * 0.75);
	transition:
		background-color 0.14s ease,
		box-shadow 0.14s ease;
}

.friend-list-beep-chat-body .friend-list-beep-chat-message {
	padding-inline-end: clamp(4.75rem, 14vw, 6.5rem);
	padding-inline-start: 0.5em;
}

.friend-list-beep-chat-message.friend-list-beep-chat-empty {
	color: var(--hint-color);
	font-style: italic;
}

.friend-list-beep-chat-divider {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: #777;
	font-size: 0.85em;
}

.friend-list-beep-chat-divider-line {
	flex: 1;
	height: min(0.2dvh, 0.1dvw);
	background-color: #aaa;
}

.friend-list-beep-chat-divider-text {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.friend-list-beep-chat-type-emote .friend-list-beep-chat-message,
.friend-list-beep-chat-type-action .friend-list-beep-chat-message {
	color: var(--hint-color);
	font-style: italic;
}

span.friend-list-beep-unread,
span.friend-list-beep-unread * {
	color: var(--hint-color);
	font-weight: bold;
}

span.friend-list-beep-unread sup {
	margin-left: 0.15em;
	font-size: 0.7em;
}

.friend-list-beep-chat-sender {
	font-weight: bold;
	text-shadow: 0.05em 0.05em #aaa;
	user-select: all;
}

.friend-list-beep-title {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-size: 1.1em;
}

/* #endregion */