/* Avatar styles */
.avatar {
	width: var(--avatar-size-md);
	height: var(--avatar-size-md);
	border-radius: var(--radius-full);
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}

.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-online::after {
	content: '';
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 10px;
	height: 10px;
	background-color: var(--color-success);
	border: 2px solid var(--color-surface);
	border-radius: var(--radius-full);
}

/* Icon Button */
.icon-button {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	transition: background-color var(--transition-fast) var(--easing-standard);
	font-size: 1.25em;
}

.icon-button:hover {
	background-color: var(--color-surface-light);
	color: var(--color-text-primary);
}

.icon-button:active {
	background-color: var(--color-surface-lighter);
}

/* Send button */
.send-button {
	width: 40px;
	height: 40px;
	background-color: var(--color-primary);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transition-fast) var(--easing-standard);
}

.send-button:hover {
	background-color: var(--color-primary-light);
}

.send-button:active {
	background-color: var(--color-primary-dark);
}

/* Icons */
.icon {
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.search-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	position: absolute;
	left: var(--space-3);
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
}

.settings-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
}

.new-message-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'%3E%3C/path%3E%3Cpath d='M5 12h14'%3E%3C/path%3E%3C/svg%3E");
}

.more-options-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
}

.phone-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}

.video-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z'%3E%3C/path%3E%3Crect width='14' height='12' x='2' y='6' rx='2' ry='2'%3E%3C/rect%3E%3C/svg%3E");
}

.info-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
}

.attachment-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'%3E%3C/path%3E%3C/svg%3E");
}

.emoji-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'%3E%3C/path%3E%3Cline x1='9' x2='9.01' y1='9' y2='9'%3E%3C/line%3E%3Cline x1='15' x2='15.01' y1='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
}

.send-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'%3E%3C/path%3E%3Cpath d='M22 2 11 13'%3E%3C/path%3E%3C/svg%3E");
}

/* Conversation Item */
.conversation-item {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	transition: background-color var(--transition-fast) var(--easing-standard);
	cursor: pointer;
	position: relative;
}

.conversation-item:hover {
	background-color: var(--color-surface-light);
}

.conversation-item.active {
	background-color: var(--color-surface-light);
}

.conversation-content {
	flex: 1;
	min-width: 0;
}

.conversation-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space-1);
}

.conversation-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	position: relative;
}

.conversation-preview p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 85%;
}

/* Badge */
.badge {
	min-width: 20px;
	height: 20px;
	padding: 0 var(--space-1);
	background-color: var(--color-primary);
	color: white;
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-medium);
}

/* Date divider */
.date-divider {
	display: flex;
	align-items: center;
	margin: var(--space-4) 0;
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
}

.date-divider::before,
.date-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-divider);
}

.date-divider::before {
	margin-right: var(--space-3);
}

.date-divider::after {
	margin-left: var(--space-3);
}

/* Message styles */
.message {
	display: flex;
	margin-bottom: var(--space-3);
	align-items: flex-end;
}

.message-content {
	padding: var(--space-3);
	border-radius: var(--radius-2xl);
	max-width: 70%;
	position: relative;
}

.message-time {
	font-size: var(--font-size-xs);
	color: var(--color-text-tertiary);
	margin-top: var(--space-1);
	display: block;
}

.message.received .message-content {
	background-color: var(--color-surface-light);
	border-bottom-left-radius: var(--radius-sm);
}

.message.sent {
	justify-content: flex-end;
}

.message.sent .message-content {
	background-color: #640526;
	border-bottom-right-radius: var(--radius-sm);
}

.message.sent .message-time {
	text-align: right;
	color: rgba(255, 255, 255, 0.7);
}

/* Typing indicator */
.typing-indicator {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: var(--space-2) var(--space-3);
	background-color: var(--color-surface-light);
	border-radius: var(--radius-2xl);
	width: fit-content;
}

.typing-indicator .dot {
	width: 8px;
	height: 8px;
	background-color: var(--color-text-secondary);
	border-radius: var(--radius-full);
}