.chat-item {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}

.chat-swipe-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding-right: 20px;
	background: var(--bg-swipe);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: var(--text-inverted);
}

.chat-content {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	position: relative;
	padding: 5px;
	z-index: 2;
	width: 100%;
	cursor: pointer;
	background: var(--surface);
	box-shadow: 4px 4px 6px var(--shadow);
	transition: transform 0.2s ease-out;
	will-change: transform;
}

.avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	padding: 0.5em;
}

.chat-info {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex-grow: 1;
	gap: 0.3em;
	cursor: pointer;
}

.chat-quote {
	font-style: italic;
}

.delete-btn{
	width: 30px;
	height: 30px;
	display: flex;
	margin: 5px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.border-radius {
	border-radius: 8px;
}
.chat-swipe-bg-delete{
	background: var(--bg-swipe-delete);
}