@media (max-width:768px) {

	html,
	body {
		width: 100vw;
		min-width: 0;
		min-height: 0;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		overflow: hidden;
		margin: 0;
		padding: 0;
		overscroll-behavior: none;
	}

	.container {
		width: 100vw;
		height: 100dvh;
		min-width: 0;
		min-height: 0;
		max-width: 100vw;
		max-height: 100dvh;
		overflow: hidden;
		margin: 0;
		padding: 0;
		left: 0;
		top: 0;
	}

	.main {
		width: 100vw;
		height: 100dvh;
		min-width: 0;
		min-height: 0;
		max-width: 100vw;
		max-height: 100dvh;
		overflow: hidden;
		margin: 0;
		padding: 0;
		position: relative;
		flex: 1 1 100%;
	}

	.chat-area {
		width: 100vw;
		max-width: 100vw;
		min-width: 0;
		flex: 1 1 auto;
		overflow-y: auto;
		box-sizing: border-box;
		background: none;
		margin: 0;
		padding: 16px 4px 88px 4px;
	}

	.chat-input-area {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		min-width: 0;
		box-sizing: border-box;
		margin: 0;
		padding: 5px 15px calc(10px + env(safe-area-inset-bottom)) 10px;
		z-index: 1200;
	}

	* {
		touch-action: pan-y;
	}	
	.sidebar,
	.rightbar,
	.settings-sidebar {
		position: fixed;
		top: 0;
		width: 60vw !important;
		bottom: 0;
		z-index: 1000;
		height: 100dvh;
		background: #fff;
		box-shadow: 2px 0 16px #0002;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.sidebar {
		left: 0;
		transform: translateX(-100%);
		border-right: 1px solid #e0e0e0;
	}

	.sidebar.mobile-open {
		transform: translateX(0);
	}

	.settings-sidebar {
		transform: translateX(-100%);
		border-right: 1px solid #e0e0e0;
		z-index: 1001; /* Higher than normal sidebar */
	}

	.settings-sidebar.mobile-open {
		transform: translateX(0);
	}

	.rightbar {
		right: 0;
		max-width: 70vw;
		transform: translateX(100%);
		border-left: 1px solid #e0e0e0;
	}

	.rightbar.mobile-open {
		transform: translateX(0);
	}

	.mobile-sidebar-mask,
	.mobile-rightbar-mask {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.18);
		z-index: 999;
	}

	.mobile-sidebar-mask.active,
	.mobile-rightbar-mask.active {
		display: block;
	}

	.mobile-menu-btn,
	.mobile-info-btn {
		background: rgba(255, 255, 255, 0.85);
		border: none;
		align-items: center;
		width: 45px;
		height: 45px;
		z-index: 1100;
		cursor: pointer;
		border-radius: 50%;
		opacity: 1;
		will-change: transform, opacity;
		color: #707070;
		transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	}

	.mobile-menu-btn:active,
	.mobile-info-btn:active {
		background: #e0e0e0;
		transform: scale(0.93);
	}	.settings-panel-card {
		left: 2vw !important;
	}
	
	.flip-card {
	width: 95%;
}
}

.member.private-chat-active {
	background-color: #e0d0ff !important;
	transition: background-color 0.2s ease;
}

.member.private-chat-active:hover {
	background-color: #d8c8f8 !important;
}

.chat-input-area.private-mode .chat-input-wrapper::before {
	background-color: #f0e8ff !important;
	transition: background-color 0.3s ease;
}

.bubble.other.private-message {
	background-color: #9370db !important;
	color: white !important;
}

.bubble.other.private-message .bubble-other-name {
	color: #f0e8ff !important;
}

.bubble.other.private-message .bubble-meta {
	color: #e0d0ff !important;
}

.bubble.other.private-message .bubble-content {
	color: white !important;
	background-color: transparent !important;
}

.bubble.me.private-message {
	background-color: #9370db !important;
	color: white !important;
}

.bubble.me.private-message .bubble-meta {
	color: #e0d0ff !important;
}

.bubble.me.private-message .bubble-content {
	color: white !important;
	background-color: transparent !important;
}

/* Mobile theme selector styles */
/* 移动端主题选择器样式 */
.theme-selector {
	gap: 8px;
	padding: 6px 2px;
	/* Ensure scrollbars are hidden on mobile too */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Improve touch scrolling */
	-webkit-overflow-scrolling: touch;
}

.theme-selector::-webkit-scrollbar {
	display: none;
}

.theme-item {
	width: 70px;
	height: 70px;
	/* Prevent text selection on mobile */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* Prevent touch callouts */
	-webkit-touch-callout: none;
}