/* sidebar right */

.sidebar-right {
	background-color: rgba(var(--bs-dark-rgb));
}

/* fold/unfold edge */

.edge {
	max-width: 12px;
	background-color: #212529;
	z-index: 9;
}

.edge-button {
	padding: 30px 0px;
	margin: 0;
	color: white;
	background-color: #565660;
	border-radius: 0;
	transition: padding 250ms;
	border: 0;
}

.btn.edge-button:hover,
.btn.edge-button:active,
.btn.edge-button:focus-visible {
	background-color: var(--bs-primary);
	color: white;
	padding: 60px 0px;
	transition: padding 250ms;
}

.btn.edge-button .icon {
	font-size: 21px;
	text-shadow: 0px 0px 1px white;
}

.btn.edge-button .icon.bi-chevron-compact-right {
	margin-left: -5px;
}

.btn.edge-button .icon.bi-chevron-compact-left {
	margin-left: -4px;
}

.btn.edge-button:hover .icon {
	color: white;
	transition: none;
}

/* */

nav .messages {
	background-color: #2a2f35;
	width: 400px;
	min-width: 0;
	height: 100vh;
	transition: width 0ms;
	overflow-x: hidden;
	z-index: 10001; /* +1 over slimselect content popups */
}

nav .messages.collapsed {
	width: 0;
	transition: width 0ms;
}

.sidebar-header {
	padding: 25px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header .chat-title {
	color: white;
	font-size: 22px;
}

.sidebar-body {
	height: calc(100vh - 79px - 80px);
	/* height: calc(75vh - 83px); */
	padding: 25px;
	overflow-y: scroll;
}

.other-message {
	margin-right: 25px;
}

.message-time {
	color: #565660;
	font-size: small;
	position: absolute;
	right: 10px;
	bottom: 6px;
}

.my-message {
	margin-left: 25px;
}

.sidebar-footer form {
	padding: 25px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer textarea {
	max-height: 110px;
	field-sizing: content;
	resize: vertical;
}

/* ------------------------------------------------------------------------------------ */
/* responsive */

@media (width <= 1024px) {

	.nav-right {
		position: absolute;
		right: 0;
	}

	.sidebar-header {
		padding: 15px 12px;
	}

	.edge-button,
	.btn.edge-button:hover,
	.btn.edge-button:active,
	.btn.edge-button:focus-visible {
		transition: padding 0ms;
	}

	nav .messages,
	nav .messages.collapsed {
		transition: width 0ms;
	}

	.sidebar-footer form {
		padding: 15px 12px;
	}

}

@media (width <= 568px) {

	nav .messages {
		width: 100%;
	}

	.sidebar-header {
		padding: 20px 12px;
	}

	.sidebar-footer form {
		padding: 20px 12px;
	}

}