:root {
	--app-height: 100vh;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--mobile-homebar-height: 46px;
	--mobile-tabbar-height: 64px;
	--mobile-surface: #ededed;
	--mobile-border: #d9d9d9;
	--mobile-text: #111827;
	--mobile-muted: #6b7280;
	--mobile-brand: #07c160;
	--mobile-accent: #95ec69;
	--mobile-soft: #f7f7f7;
	--mobile-soft-strong: #efefef;
	--mobile-shell-start: #ededed;
	--mobile-shell-end: #ededed;
	--mobile-page-bg: #f5f5f5;
	--mobile-card: #ffffff;
	--mobile-radius: 18px;
	--mobile-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

body {
	overscroll-behavior-y: contain;
}

.mobile-tabbar {
	display: none;
}

.mobile-homebar,
.mobile-quick-menu,
.mobile-quick-menu-backdrop {
	display: none;
}

.mobile-back-btn,
.pwa-install-btn {
	display: none;
}

body.pwa-guide-open {
	overflow: hidden;
}

.pwa-install-sheet,
.pwa-install-sheet__backdrop,
.pwa-install-sheet__panel {
	display: none;
}

@media screen and (max-width: 768px) {
.group-bulletin-modal,
.group-invite-modal,
.group-member-modal {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.group-bulletin-modal .modal-body,
.group-invite-modal .modal-body,
.group-member-modal .modal-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 220px;
}

.group-notice-list,
.group-invite-list,
.group-member-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: min(56vh, 420px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.group-modal-page {
	padding: 0 18px 16px;
}

.group-modal-page:empty {
	display: none;
}

.group-modal-page .pageTurning {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.group-modal-page .pageIndex {
	float: none;
	margin: 0;
}

.group-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 36px 18px;
	border: 1px dashed #d8dee6;
	border-radius: 18px;
	background: #fafbfc;
	text-align: center;
	color: #98a2b3;
}

.group-empty-state p {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #667085;
}

.group-empty-state span {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.5;
}

.group-invite-search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.group-invite-search .form-control {
	flex: 1 1 auto;
	min-width: 0;
}

.group-invite-search .searchButten {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 96px;
	height: 42px;
	padding: 0 14px;
	border-radius: 12px;
}

.group-invite-search .searchButten img {
	width: 16px;
	height: 16px;
}

.group-notice-card,
.group-invite-card,
.group-member-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #e9edf2;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.group-notice-card__main,
.group-invite-card__main,
.group-member-card__main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	color: inherit;
}

.group-notice-card__main {
	width: 100%;
	cursor: pointer;
}

.group-notice-card__avatar,
.group-invite-card__avatar,
.group-member-card__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.group-notice-card__body,
.group-invite-card__meta,
.group-member-card__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.group-notice-card__meta,
.group-member-card__name-row {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
}

.group-notice-card__author,
.group-invite-card__title,
.group-member-card__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.group-notice-card__time,
.group-invite-card__desc,
.group-member-card__desc {
	font-size: 12px;
	line-height: 1.45;
	color: #98a2b3;
}

.group-notice-card__preview {
	margin: 6px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1.45;
	color: #475467;
}

.group-notice-card__delete {
	flex: 0 0 auto;
	height: 32px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: #fff1f0;
	color: #d92d20;
	font-size: 12px;
	font-weight: 600;
}

.group-member-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.group-member-card__badge.is-owner {
	background: #fff6e8;
	color: #b54708;
}

.group-member-card__badge.is-admin {
	background: #eef4ff;
	color: #175cd3;
}

.group-member-card__badge.is-member {
	background: #f2f4f7;
	color: #667085;
}

.group-member-card__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.group-member-card__action-slot {
	display: inline-flex;
}

.group-member-card__action-slot:empty {
	display: none;
}

.group-member-card__actions:empty {
	display: none;
}

.group-member-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: #f3f4f6;
	color: #344054;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
}

.group-member-action--primary {
	background: #e8f8ef;
	color: #07c160;
}

.group-member-action--danger {
	background: #fff1f0;
	color: #d92d20;
}

.group-invite-card__check {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.group-invite-card__check input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.group-invite-card__check span {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	border: 1.5px solid #cfd5dd;
	border-radius: 999px;
	background: #ffffff;
	transition: all 0.2s ease;
}

.group-invite-card__check input:checked + span {
	border-color: #07c160;
	background: #07c160;
}

.group-invite-card__check input:checked + span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 11px;
	border: 2px solid #ffffff;
	border-top: 0;
	border-left: 0;
	transform: translate(-50%, -58%) rotate(45deg);
}

.group-notice-detail__content {
	font-size: 14px;
	line-height: 1.7;
	color: #344054;
	word-break: break-word;
}

.group-compact-modal .modal-footer {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.group-compact-modal .modal-header {
	padding: 18px 24px;
}

.group-compact-modal .modal-body {
	padding: 22px 24px 18px;
}

.group-compact-modal .modal-footer .btn,
.group-compact-modal .modal-footer .danger_btn,
.group-compact-modal .modal-footer .defult_btn,
.group-compact-modal .modal-footer .sou,
.group-compact-modal .modal-footer .upload_btn,
.group-compact-modal .modal-footer .close_btn {
	width: auto !important;
	min-width: 108px;
	padding: 0 18px;
}

#newRoomModal .modal-dialog {
	max-width: min(980px, calc(100vw - 32px)) !important;
}

.group-create-body {
	padding-top: 20px !important;
}

.group-create-body,
.group-edit-modal .modal-body,
.group-file-modal .modal-body,
.group-member-modal .modal-body,
.group-invite-modal .modal-body,
.group-bulletin-modal .modal-body {
	min-height: 0;
}

.group-create-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
	gap: 22px;
}

.group-create-panel {
	padding: 22px;
	border: 1px solid #e9edf2;
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

.group-create-panel--friends {
	display: flex;
	flex-direction: column;
}

.group-create-section-title {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.group-create-selected {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 76px;
	padding: 12px;
	border: 1px dashed #d5dae1;
	border-radius: 16px;
	background: #fafbfc;
}

.group-create-selected .checked_avatar {
	width: 36px;
	height: 36px;
	margin: 0;
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.group-create-friend-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: min(54vh, 420px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.group-create-friend-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #e9edf2;
	border-radius: 18px;
	background: #ffffff;
}

.group-create-friend-card__main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.group-create-friend-card__avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}

.group-create-friend-card__meta {
	min-width: 0;
}

.group-create-friend-card__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.group-create-friend-card__desc {
	margin-top: 4px;
	font-size: 12px;
	color: #98a2b3;
}

#memberManagerDialog .modal-dialog {
	max-width: min(680px, calc(100vw - 32px)) !important;
}

#findgroupfile .modal-dialog {
	max-width: min(760px, calc(100vw - 32px)) !important;
}

.group-file-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: min(62vh, 460px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.group-member-list,
.group-invite-list,
.group-notice-list {
	max-height: min(58vh, 430px);
}

.group-member-card {
	align-items: stretch;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border-radius: 16px;
}

.group-member-card__main {
	width: 100%;
}

.group-member-card__meta {
	width: 100%;
}

.group-member-card__name-row {
	justify-content: flex-start;
	flex-wrap: wrap;
}

.group-member-card__actions {
	width: 100%;
	justify-content: flex-start;
}

.group-member-action {
	min-height: 30px;
	padding: 0 14px;
}

#findgroupfile #gfile {
	gap: 16px;
}

#findgroupfile .groupFile {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	gap: 10px 16px;
	padding: 18px 20px;
	border: 1px solid #e8edf3;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

#findgroupfile .groupFile .groupFile__icon,
#findgroupfile .groupFile > div:first-child {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

#findgroupfile .groupFile .info {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 6px;
	min-width: 0;
	padding: 0;
}

#findgroupfile .groupFile .fileData {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #667085;
}

#findgroupfile .groupFile .timeStr {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #98a2b3;
}

#findgroupfile .groupFile .option {
	grid-column: 1 / -1;
	grid-row: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}

#findgroupfile .groupFile .groupFile__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}

#findgroupfile .groupFile .groupFile__action img {
	width: 14px;
	height: 14px;
}

#findgroupfile .groupFile .groupFile__action--primary {
	background: #e8f8ef;
	color: #07c160;
}

#findgroupfile .groupFile .groupFile__action--danger {
	background: #fff1f0;
	color: #d92d20;
}

#map .modal-dialog {
	max-width: min(820px, calc(100vw - 32px)) !important;
}

#map .map-modal-stage {
	border-radius: 20px;
}

#map .map-modal-body {
	padding: 18px 20px;
}

#map #baiduMap {
	width: 100% !important;
	height: 420px !important;
	min-height: 420px;
}
}

@media screen and (max-width: 768px) {
	.group-compact-modal .modal-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.group-compact-modal .modal-header {
		padding: 16px 18px;
	}

	.group-compact-modal .modal-body {
		padding: 18px 18px 16px;
	}

	.group-compact-modal .modal-footer .btn,
	.group-compact-modal .modal-footer .danger_btn,
	.group-compact-modal .modal-footer .defult_btn,
	.group-compact-modal .modal-footer .sou,
	.group-compact-modal .modal-footer .upload_btn,
	.group-compact-modal .modal-footer .close_btn {
		width: 100% !important;
	}

	.group-create-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.group-create-panel {
		padding: 16px;
		border-radius: 18px;
	}

	.group-create-selected {
		min-height: 56px;
	}

	#findgroupfile .groupFile {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}

	#findgroupfile .groupFile .option {
		grid-column: 1 / -1;
		grid-row: 3;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
}

@media screen and (max-width: 768px) {
	html,
	body {
		width: 100%;
		height: 100%;
		min-height: var(--app-height);
		overflow: hidden;
		overscroll-behavior: none;
	}

	body {
		padding-top: var(--safe-top);
		padding-left: var(--safe-left);
		padding-right: var(--safe-right);
		box-sizing: border-box;
		background: var(--mobile-page-bg);
		color: var(--mobile-text);
		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
		position: fixed;
		inset: 0;
		touch-action: manipulation;
	}

	.main {
		min-height: var(--app-height) !important;
		height: var(--app-height) !important;
	}

	.main_inner {
		width: 100%;
		min-width: 0 !important;
		min-height: var(--app-height) !important;
		height: var(--app-height) !important;
		border: none !important;
		border-radius: 0 !important;
	}

	.box {
		padding-top: 0 !important;
	}

	.coolchat_left_nav {
		display: none !important;
	}

	.coolchat_content_nav {
		position: relative;
		height: 100%;
		padding-bottom: 0;
		box-sizing: border-box;
		background: #ededed;
	}

	.mobile-root-view .coolchat_content_nav {
		padding-bottom: calc(var(--mobile-tabbar-height) + var(--safe-bottom));
	}

	.coolchat_content_nav > .layui-fluid,
	.coolchat_content_nav > .friends_detail_panel,
	.coolchat_content_nav > .group_details_panel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.mobile-root-view .coolchat_content_nav > .layui-fluid,
	.mobile-root-view .coolchat_content_nav > .friends_detail_panel,
	.mobile-root-view .coolchat_content_nav > .group_details_panel {
		bottom: calc(var(--mobile-tabbar-height) + var(--safe-bottom));
	}

	.coolchat_content_nav > .layui-fluid {
		display: block;
	}

	.mobile-homebar {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 20;
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr) 28px;
		align-items: center;
		gap: 8px;
		height: calc(var(--mobile-homebar-height) + var(--safe-top));
		padding: calc(var(--safe-top) + 4px) 12px 6px;
		background: #f7f7f7;
		box-shadow: none;
		border-bottom: 1px solid #d7d7d7;
	}

	.mobile-root-view .mobile-homebar {
		display: flex;
	}

	.mobile-overlay-view .mobile-homebar {
		display: none;
	}

	.mobile-homebar__spacer {
		display: block;
		width: 28px;
		height: 28px;
	}

	.mobile-homebar__meta {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
		align-items: center;
		justify-content: center;
		color: var(--mobile-text);
		text-align: center;
	}

	.mobile-homebar__eyebrow {
		display: none;
	}

	.mobile-homebar__title {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.1;
		letter-spacing: 0.01em;
	}

	.mobile-homebar__action {
		flex: 0 0 auto;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--mobile-text);
		font-size: 26px;
		font-weight: 500;
		line-height: 1;
		box-shadow: none;
	}

	.mobile-quick-menu-backdrop {
		position: fixed;
		inset: 0;
		z-index: 35;
		display: block;
		background: transparent;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.mobile-quick-menu {
		position: fixed;
		top: calc(var(--safe-top) + 48px);
		right: 8px;
		left: auto;
		bottom: auto;
		z-index: 36;
		display: block;
		width: 164px;
		padding: 6px 0;
		border-radius: 8px;
		background: rgba(58, 58, 58, 0.98);
		box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
		backdrop-filter: blur(10px);
		transform: translateY(-4px);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.22s ease, opacity 0.22s ease;
	}

	.mobile-quick-menu::before {
		display: none;
	}

	.mobile-quick-menu.is-open,
	.mobile-quick-menu-backdrop.is-open {
		display: block;
	}

	.mobile-quick-menu-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.mobile-quick-menu.is-open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.mobile-quick-menu button {
		display: flex;
		align-items: center;
		width: 100%;
		height: 44px;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #ffffff;
		font-size: 14px;
		font-weight: 500;
		text-align: left;
		box-shadow: none;
	}

	.mobile-quick-menu button + button {
		margin-top: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.mobile-quick-menu__primary[hidden] {
		display: none;
	}

	.mobile-quick-menu button:active,
	.mobile-quick-menu button:hover {
		background: rgba(255, 255, 255, 0.08);
	}

	.mobile-quick-menu button.danger {
		color: #ff7f7f;
	}

	.coolchat_content_nav > .layui-fluid > .coolchat_data_panel,
	.coolchat_content_nav > .layui-fluid > .coolchat_message_panel_div {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}

	.coolchat_data_panel,
	.coolchat_message_panel_div,
	.friends_detail_panel,
	.group_details_panel {
		float: none !important;
		width: 100% !important;
		height: 100% !important;
		margin-left: 0 !important;
	}

	#o,
	#messagesTab,
	#friendsTab,
	#roomTab,
	#companyTab,
	#liveRoomTab,
	#tabCon_new,
	#tabCon_0,
	#tabCon_1,
	#tabCon_2,
	.my_profile_panel,
	.privacy_set_panel,
	.password_set_panel {
		background: transparent;
	}

	.mobile-root-view #o {
		top: calc(var(--mobile-homebar-height) + var(--safe-top));
		height: calc(100% - var(--mobile-homebar-height) - var(--safe-top)) !important;
	}

	.mobile-overlay-view #o {
		top: 0;
		height: 100% !important;
	}

	#o > .tab-content {
		height: 100% !important;
	}

	.mobile-root-view #o > .tab-content {
		overflow: hidden;
		border-radius: 0;
		background: #ffffff;
	}

	#messagesTab.active,
	#friendsTab.active,
	#roomTab.active,
	#companyTab.active,
	#liveRoomTab.active {
		display: flex !important;
		flex-direction: column;
		height: 100%;
		background: #ffffff;
	}

	.mobile-pull-refresh {
		position: relative;
		overscroll-behavior-y: contain;
	}

	.mobile-pull-refresh__indicator {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		opacity: 0;
		pointer-events: none;
		z-index: 4;
		color: #607081;
		font-size: 12px;
		font-weight: 600;
		will-change: transform, opacity;
	}

	.mobile-pull-refresh__spinner {
		width: 14px;
		height: 14px;
		border-radius: 999px;
		border: 2px solid rgba(96, 112, 129, 0.22);
		border-top-color: var(--mobile-brand);
		box-sizing: border-box;
		flex: none;
	}

	.mobile-pull-refresh__label {
		white-space: nowrap;
	}

	.mobile-pull-refresh.is-ready .mobile-pull-refresh__label {
		color: #0f172a;
	}

	.mobile-pull-refresh.is-refreshing .mobile-pull-refresh__spinner {
		animation: mobilePullRefreshSpin 0.85s linear infinite;
	}

	.mobile-pull-refresh.is-complete .mobile-pull-refresh__spinner {
		border-top-color: #22c55e;
	}

	#messageDisplayArea.mobile-pull-refresh {
		background: linear-gradient(180deg, #eef6ff 0, rgba(238, 246, 255, 0) 92px);
	}

	#messagePanel.mobile-pull-refresh {
		background: linear-gradient(180deg, #f3f7fb 0, rgba(243, 247, 251, 0) 96px);
	}

	@keyframes mobilePullRefreshSpin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.coolchat_data_panel_head,
	.message_panel_head,
	.group_details_panel > .head {
		display: flex;
		align-items: center;
		min-height: 56px;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
		background: #f7f7f7;
		backdrop-filter: blur(16px);
		border-bottom: 1px solid #d7d7d7;
		box-shadow: none;
	}

	.coolchat_data_panel_head .head-operations {
		margin-right: 0;
	}

	.coolchat_data_panel_head > p,
	.group_details_panel > .head > span,
	.message_panel_head .panel-title,
	#friendsTabTitle,
	#charMessage {
		font-size: 16px;
		font-weight: 600;
		color: var(--mobile-text);
		letter-spacing: 0.01em;
	}

	.coolchat_data_panel_head .head-operations,
	.contact-operations,
	#groupDetails {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		height: 32px;
		border-radius: 6px;
		background: transparent;
		box-shadow: none;
	}

	#messagesTab .coolchat_data_panel_head,
	#friendsTab .coolchat_data_panel_head,
	#roomTab .coolchat_data_panel_head,
	#companyTab .coolchat_data_panel_head,
	#liveRoomTab .coolchat_data_panel_head {
		display: none;
	}

	#btnFooter {
		display: flex;
		gap: 8px;
		padding: 10px 12px;
		margin: 0 !important;
		background: #f5f5f5;
		border-bottom: 1px solid #e3e3e3;
	}

	#btnFooter > p {
		margin: 0 !important;
		height: 34px !important;
		line-height: 34px !important;
		border-radius: 6px !important;
		background: #ededed;
		color: var(--mobile-muted);
	}

	#btnFooter > p.border {
		border: 0 !important;
		background: rgba(7, 193, 96, 0.12) !important;
		color: var(--mobile-brand);
		font-weight: 600;
	}

	#messagesTab .coolchat_data_panel_head,
	#friendsTab .coolchat_data_panel_head,
	#roomTab .coolchat_data_panel_head,
	#companyTab .coolchat_data_panel_head,
	#liveRoomTab .coolchat_data_panel_head,
	#tabCon_new .message_panel_head,
	#tabCon_0 .message_panel_head {
		flex: 0 0 auto;
	}

	#tabCon_new .message_panel_head > div,
	#tabCon_0 .message_panel_head > div {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
		height: auto !important;
		margin-top: 0 !important;
	}

	#messagesTab #messageDisplayArea,
	#friendsTab > div:last-child,
	#roomTab > div:last-child,
	#companyTab #companyListShow,
	#liveRoomTab > div:last-child {
		flex: 1 1 auto;
		min-height: 0;
		height: auto !important;
	}

	#friendsTab #myFriendsList,
	#friendsTab #blackList,
	#messagesTab #messageDisplayArea,
	#companyTab #companyListShow {
		height: 100% !important;
	}

	#myMessagesList,
	#myFriendsList,
	#blackList,
	#myRoomList,
	#allRoomList,
	#companyListShow {
		padding-bottom: 0;
		background: #ffffff;
	}

	#messageDisplayArea,
	#friendsTab > div:last-child,
	#roomTab > div:last-child,
	#companyTab #companyListShow,
	#liveRoomTab > div:last-child {
		background: #ffffff;
	}

	#roomTab > div:last-child,
	#friendsTab > div:last-child {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.chat_item {
		margin: 0;
		padding: 12px 16px;
		border-bottom: 1px solid #ededed;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
	}

	.chat_item + .chat_item {
		margin-top: 0;
	}

	.fActive,
	.chat_item.active {
		background: #f5f5f5;
		box-shadow: none;
	}

	.chat_item .avatar .img {
		width: 48px;
		height: 48px;
		border-radius: 8px;
		object-fit: cover;
	}

	.chat_item .info {
		width: calc(100% - 58px);
	}

	.chat_item .ext {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}

	.chat_item .nickname {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.chat_item .nickname_text,
	.chat_item .msg,
	.chat_item .info .nickname_count {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chat_item .msg {
		margin-top: 4px;
		color: var(--mobile-muted);
		font-size: 12px;
	}

	.chat_item .timeStr {
		margin-left: auto;
		font-size: 11px;
		color: #98a2b3;
	}

	.search_bar {
		position: relative;
		width: auto !important;
		margin: 0 !important;
		padding: 8px 12px;
		background: #f3f3f3;
		border-bottom: 1px solid #e5e5e5;
	}

	.search_bar .web_wechat_search {
		top: 50%;
		left: 24px;
		margin: 0;
		transform: translateY(-50%);
		background-size: 16px;
		opacity: 0.42;
	}

	.search_bar .frm_search {
		width: 100% !important;
		height: 34px;
		padding-left: 34px;
		border-radius: 8px;
		border: 0;
		background: #ffffff;
		font-size: 13px;
		color: #111827;
	}

	#tabCon_new,
	#tabCon_0,
	#tabCon_1,
	#tabCon_2 {
		position: fixed !important;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		background: var(--mobile-page-bg);
		z-index: 60;
	}

	.my_profile_panel,
	.privacy_set_panel,
	.password_set_panel {
		position: fixed !important;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 62;
	}

	#tabCon_new .coolchat_message_panel_1 {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: rgba(255, 255, 255, 0.96);
	}

	#tabCon_0 #chatPanel,
	#tabCon_1,
	#tabCon_2 {
		height: 100%;
	}

	#tabCon_0 #chatPanel {
		display: flex !important;
		flex-direction: column;
		height: 100% !important;
		background: #e9edef;
	}

	#tabCon_new .tab-content,
	#tabCon_1 > div,
	#tabCon_2 {
		min-height: 0;
	}

	#tabCon_new .tab-content {
		height: auto !important;
		overflow-y: auto;
		background: #ffffff;
	}

	body.is-mobile-h5 #tabCon_new .tab-content,
	body.is-mobile-h5 #tabCon_new #divNewFriendList {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#divNewFriendList {
		background: #ffffff;
	}

	#tabCon_0 .panel-body {
		flex: 1 1 auto;
		min-height: 0;
		display: grid !important;
		grid-template-rows: minmax(0, 1fr) auto;
		height: calc(100% - 62px - var(--safe-top)) !important;
		position: relative;
	}

	#tabCon_0 #messagePanel {
		grid-row: 1;
		flex: none !important;
		height: 100% !important;
		min-height: 0;
		padding: 0 6px !important;
		background: #e9edef;
	}

	#tabCon_0 #messageContainer {
		padding: 10px 8px 8px !important;
	}

	#tabCon_0 #sendMsgScopeDiv {
		grid-row: 2;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		flex: none !important;
		height: auto !important;
		min-height: auto;
		padding: 6px 10px calc(6px + var(--safe-bottom));
		box-sizing: border-box;
		background: #f7f7f7;
		border-top: 1px solid #d7d7d7;
		box-shadow: none;
		position: sticky;
		bottom: 0;
		z-index: 2;
	}

	#tabCon_0 .mobile-compose-actions {
		display: none;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px 10px;
		padding: 2px 2px 6px;
	}

	#tabCon_0 #sendMsgScopeDiv.is-actions-open .mobile-compose-actions {
		display: grid;
	}

	#tabCon_0 .mobile-compose-actions > span {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 90px;
		padding: 10px 6px 8px;
		border-radius: 16px;
		background: #ffffff;
		border: 1px solid #eceef2;
		color: #616b78;
		font-size: 12px;
		line-height: 1;
		cursor: pointer;
	}

	#tabCon_0 .mobile-compose-actions > span.service-compose-action.is-visible {
		display: flex !important;
	}

	#tabCon_0 .mobile-compose-actions > span em {
		font-style: normal;
	}

	#tabCon_0 .mobile-compose-actions > span img {
		width: 40px;
		height: 40px;
		margin: 0 !important;
		opacity: 0.92;
	}

	#tabCon_0 .mobile-compose-main {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) auto;
		align-items: center;
		gap: 6px;
	}

	#tabCon_0 .mobile-compose-field {
		position: relative;
		min-width: 0;
	}

	#tabCon_0 .mobile-compose-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border-radius: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		color: #7a7f87;
		font-size: 34px;
		font-weight: 300;
		line-height: 1;
	}

	#tabCon_0 .mobile-compose-trigger img {
		width: 32px;
		height: 32px;
		margin: 0 !important;
		opacity: 0.9;
	}

	#tabCon_0 .mobile-compose-trigger--plus {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		font-size: 40px;
	}

	#tabCon_0 .mobile-compose-send {
		grid-column: 3;
		grid-row: 1;
		display: none;
		justify-content: flex-end;
	}

	#tabCon_0 .mobile-compose-secondary {
		display: none;
		justify-content: flex-end;
		padding-top: 2px;
	}

	#tabCon_0 #sendMsgScopeDiv.is-text-ready .mobile-compose-send {
		display: flex;
	}

	#tabCon_0 #sendMsgScopeDiv.is-text-ready #mobileMoreTrigger {
		display: none;
	}

	#tabCon_0 #sendMsgScopeDiv.has-end-chat .mobile-compose-secondary {
		display: flex;
	}

	#messageBody {
		width: 100% !important;
		min-width: 0;
		max-width: none;
		box-sizing: border-box;
		height: 38px !important;
		min-height: 38px;
		max-height: 84px;
		margin: 0 !important;
		padding: 8px 40px 8px 14px !important;
		border: 1px solid #d8d8d8 !important;
		border-radius: 19px;
		background: #ffffff;
		box-shadow: none;
		font-size: 16px;
		line-height: 20px;
		white-space: pre-wrap;
		word-break: break-word;
		overflow-y: auto;
		resize: none;
		-webkit-appearance: none;
	}

	#tabCon_0 .mobile-compose-clear {
		position: absolute;
		top: 50%;
		right: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: #eef1f4;
		color: #6b7280;
		font-size: 16px;
		line-height: 1;
		transform: translateY(-50%);
	}

	#tabCon_0 .mobile-compose-clear[hidden] {
		display: none !important;
	}

	#messageContainer:empty::before {
		content: "开始聊天";
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100%;
		color: #8b95a3;
		font-size: 13px;
		letter-spacing: 0.08em;
	}

	#btnSend,
	#btnEndChat {
		padding: 0 16px;
		margin: 0 !important;
		box-shadow: none;
		font-weight: 500;
	}

	#btnSend {
		min-width: 64px;
		height: 34px;
		padding: 0 14px;
		border-radius: 7px;
		background: #07c160 !important;
		color: #ffffff !important;
		border: 0 !important;
		font-size: 0;
	}

	#btnSend::before {
		content: "发送";
		font-size: 14px;
		line-height: 34px;
	}

	#btnEndChat {
		height: 34px;
		min-width: auto;
		padding: 0 14px;
		border-radius: 8px;
		background: #ffffff !important;
		color: #666666 !important;
		border: 1px solid #d7d7d7 !important;
		font-size: 13px;
	}

	#tabCon_0 .headContent,
	#tabCon_new .headContent {
		float: none;
		display: flex;
		align-items: center;
		height: auto;
		margin-left: 0;
		line-height: 1.2;
		overflow: visible;
	}

	#tabCon_0 .message_panel_head,
	#tabCon_new .message_panel_head {
		padding-top: calc(var(--safe-top) + 8px);
		padding-bottom: 8px;
		padding-left: calc(var(--safe-left) + 12px);
		padding-right: calc(var(--safe-right) + 12px);
		min-height: calc(56px + var(--safe-top));
		background: #ffffff;
	}

	#tabCon_new .message_panel_head > .mobile-back-btn,
	#tabCon_0 .message_panel_head > .mobile-back-btn,
	.group_details_panel > .head > .mobile-back-btn {
		min-width: 54px;
		margin-right: 10px;
		padding: 0 10px;
		background: #f3f4f6;
		box-shadow: inset 0 0 0 1px rgba(228, 231, 237, 0.9);
		border-radius: 999px;
	}

	#tabCon_0 .message_panel_head > div {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: auto !important;
		margin-top: 0 !important;
	}

	body.is-mobile-h5 #tabCon_new .message_panel_head > div {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
		gap: 0;
		width: 100%;
		height: auto !important;
		margin-top: 0 !important;
	}

	body.is-mobile-h5 #tabCon_new .message_panel_head > div > .headContent:first-of-type {
		display: none !important;
	}

	body.is-mobile-h5 #tabCon_new .message_panel_head > div > .layui-form {
		display: none !important;
	}

	body.is-mobile-h5 #tabCon_new .headContent {
		width: 100%;
		min-width: 0;
		justify-content: center;
	}

	body.is-mobile-h5 #tabCon_new .user_nickname {
		max-width: none;
		text-align: center;
	}

	body.is-mobile-h5 #tabCon_new .user_nickname > span {
		display: block;
		width: 100%;
	}

	#tabCon_new .message_panel_head > div {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 12px;
		width: 100%;
		height: auto !important;
		margin-top: 0 !important;
	}

	#tabCon_new .message_panel_head .headContent:nth-of-type(3),
	#tabCon_new .message_panel_head .headContent:nth-of-type(4) {
		display: none !important;
	}

	#tabCon_0 #chatAvator .imgAvatar figure,
	#tabCon_new .imgAvatar figure {
		width: 34px !important;
		height: 34px !important;
		border-radius: 8px;
		box-shadow: none;
	}

	#tabCon_0 #chatTitle,
	#tabCon_new .user_nickname {
		display: block;
		max-width: 52vw;
		margin: 0;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.25;
		color: var(--mobile-text);
	}

	#tabCon_new .user_nickname {
		max-width: none;
		text-align: left;
	}

	#tabCon_new .user_nickname > span {
		font-size: 17px !important;
	}

	#tabCon_new .newFriend_list {
		min-height: 100%;
		padding-bottom: calc(16px + var(--safe-bottom));
		background: #ffffff;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_list {
		display: flex;
		flex-direction: column;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_item_mobile {
		display: flex !important;
		align-items: flex-start !important;
		gap: 12px;
		height: auto !important;
		min-height: 0 !important;
		padding: 14px 16px !important;
		box-sizing: border-box;
		border-bottom: 1px solid #ededed;
		background: #ffffff;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_avatar {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		cursor: pointer;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_avatar_img {
		display: block;
		width: 44px;
		height: 44px;
		border-radius: 10px;
		object-fit: cover;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_content {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_nickname {
		margin: 0 0 4px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.35;
		color: #1f2329;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_msg {
		font-size: 13px;
		line-height: 1.45;
		color: #8a8f98;
		white-space: normal;
		word-break: break-word;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 12px;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 72px;
		height: 32px;
		margin: 0 !important;
		padding: 0 14px;
		border-radius: 8px;
		border: 1px solid #07c160;
		background: #07c160;
		color: #ffffff;
		font-size: 14px;
		font-weight: 500;
		line-height: 30px;
		box-shadow: none;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_mobile_button.is-secondary {
		border-color: #d7dbe2;
		background: #ffffff;
		color: #57606a;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_item:not(.newFriend_item_mobile) {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		align-items: start;
		column-gap: 12px;
		row-gap: 8px;
		min-height: 0;
		padding: 14px 16px;
		border-bottom: 1px solid #ededed;
		background: #ffffff;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_avatar,
	body.is-mobile-h5 #tabCon_new .media-avatar {
		grid-column: 1;
		grid-row: 1 / span 2;
		float: none !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin: 0 !important;
		cursor: pointer;
		align-self: flex-start;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_avatar img,
	body.is-mobile-h5 #tabCon_new .media-avatar img {
		width: 44px !important;
		height: 44px !important;
		border-radius: 10px;
		object-fit: cover;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_body {
		grid-column: 2;
		grid-row: 1;
		float: none !important;
		width: auto !important;
		min-width: 0;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_nickname {
		width: auto !important;
		margin: 0 0 4px;
		font-size: 16px;
		font-weight: 500;
		color: #1f2329;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_msgContent {
		max-width: none !important;
		line-height: 1.4;
		font-size: 13px;
		color: #8a8f98;
		white-space: normal;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_option {
		grid-column: 2;
		grid-row: 2;
		float: none !important;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		margin-left: 0;
		line-height: 1;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_button {
		width: auto;
		min-width: 72px;
		height: 32px;
		margin: 0 !important;
		padding: 0 14px;
		border-radius: 8px;
		border: 1px solid #07c160;
		background: #07c160;
		color: #ffffff;
		font-size: 14px;
		font-weight: 500;
		line-height: 30px;
		box-shadow: none;
	}

	body.is-mobile-h5 #tabCon_new .newFriend_option .newFriend_button + .newFriend_button {
		border-color: #d7dbe2;
		background: #ffffff;
		color: #57606a;
	}

	#tabCon_new .pageTurning {
		display: none;
	}

	#tabCon_0 #chatTitle span {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#tabCon_0 #switchReadDelDiv,
	#tabCon_0 #groupDetails {
		position: static !important;
		float: none !important;
		width: auto !important;
		margin-left: auto;
	}

	#tabCon_0 #groupDetails img {
		display: block;
		float: none !important;
		margin: 4px auto 0 !important;
	}

	#tabCon_0 #switchReadDelDiv {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0 8px;
		height: 32px;
		border-radius: 6px;
		background: #efefef;
		box-shadow: none;
	}

	#tabCon_0 #switchReadDelDiv .layui-form-label {
		width: auto !important;
		padding: 0;
		line-height: 20px;
		font-size: 12px;
		color: var(--mobile-muted);
	}

	#tabCon_0 #switchReadDelDiv .layui-input-block {
		margin-left: 0 !important;
	}

	#tabCon_0 #groupDetails {
		width: 32px !important;
		height: 32px;
		border-radius: 6px;
		background: transparent;
		box-shadow: none;
		text-align: center;
		font-size: 0;
	}

	#tabCon_0 .message {
		float: none;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 8px;
		width: 100%;
		margin: 0 0 12px;
	}

	#tabCon_0 .message.me {
		float: none;
		display: flex;
		justify-content: flex-end;
	}

	#tabCon_0 .message .avatar,
	#tabCon_0 .message .group_avatar {
		order: 1;
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
		margin-top: 0;
		border-radius: 6px;
		box-shadow: none;
		object-fit: cover;
	}

	#tabCon_0 .message.me .avatar {
		order: 2;
	}

	#tabCon_0 .message > .content {
		order: 2;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 0 1 calc(100% - 46px);
		max-width: calc(100% - 50px);
		min-width: 0;
		overflow: visible;
	}

	#tabCon_0 .message.me > .content {
		align-items: flex-end;
		order: 1;
	}

	#tabCon_0 .message .nickname {
		width: auto;
		max-width: 100%;
		height: auto;
		padding: 0 4px 6px;
		font-size: 11px;
		line-height: 1.3;
		color: var(--mobile-muted);
	}

	#tabCon_0 .bubble {
		max-width: min(72vw, 312px);
		margin: 0;
		border-radius: 6px;
		box-shadow: none;
	}

	#tabCon_0 .bubble.left {
		border-top-left-radius: 2px;
	}

	#tabCon_0 .bubble.right {
		border-top-right-radius: 2px;
	}

	#tabCon_0 .bubble:before,
	#tabCon_0 .bubble:after {
		display: none;
	}

	#tabCon_0 .bubble.bubble_default {
		background: #ffffff;
		border: 1px solid #dfdfdf;
	}

	#tabCon_0 .bubble.bubble_primary {
		background: #95ec69;
		border: 1px solid #89d867;
	}

	#tabCon_0 .bubble_cont .plain {
		padding: 9px 12px;
	}

	#tabCon_0 .js_message_plain {
		font-size: 15px;
		line-height: 1.45;
		color: #243041;
	}

	#tabCon_0 .message.me .js_message_plain {
		color: #0f3b38;
	}

	#tabCon_0 .bubble_cont .picture img {
		max-width: min(62vw, 280px);
		max-height: 220px;
		border-radius: 16px;
	}

	#tabCon_0 .bubble_cont .location .img,
	#tabCon_0 .bubble_cont .location .desc {
		width: min(62vw, 250px);
	}

	#tabCon_0 .bubble_cont .attach,
	#tabCon_0 .bubble_cont .card {
		border-radius: 18px;
		box-shadow: none;
	}

	#tabCon_0 .bubble_cont .card {
		width: min(62vw, 248px);
		padding: 10px 12px;
		border-color: #dfdfdf;
	}

	#tabCon_0 .bubble_cont .card .card_hd {
		margin-top: 8px;
		padding: 8px 2px 0;
	}

	#tabCon_0 .bubble_cont .card .info .display_name {
		margin: 0;
		font-size: 15px;
		line-height: 1.4;
		color: #1f2329;
	}

	#tabCon_0 .message_system {
		order: 0;
		flex: 0 0 100%;
		float: none;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 0 4px;
		text-align: center;
	}

	#tabCon_0 .message_system .content,
	#tabCon_0 .message_system .unread-content {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px 10px;
		border-radius: 999px;
		background: rgba(210, 214, 220, 0.62);
		color: #6b7280;
		font-size: 11px;
	}

	.emoji-panel,
	.userfulText-panel,
	#gif-panel {
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		bottom: calc(52px + var(--safe-bottom)) !important;
		border: none;
		border-radius: 18px;
		overflow: hidden;
		box-shadow: var(--mobile-shadow);
	}

	#gif-panel {
		height: auto !important;
	}

	.emoji-panel:after,
	.userfulText-panel:after {
		display: none;
	}

	.emoji-panel .title,
	.userfulText-panel .title {
		height: 46px;
		padding: 0 16px;
		font-size: 15px;
		color: var(--mobile-text);
		border-bottom: 1px solid rgba(230, 232, 238, 0.9);
	}

	.emoji-panel ul,
	.userfulText-panel ul {
		max-height: min(34vh, 268px);
		padding: 8px 0 10px;
	}

	.emoji-panel li,
	.userfulText-panel li {
		padding: 0 16px;
		line-height: 42px;
	}

	.userfulText-panel li.userfulText-empty,
	.userfulTextEdi_empty {
		padding: 14px 16px;
		line-height: 1.6;
		text-align: center;
		color: var(--mobile-muted);
	}

	.emojiList {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		justify-items: center;
		gap: 12px 10px;
		padding: 12px 16px 10px;
		margin: 0;
	}

	#gif-panel .emojiList {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 12px 16px 12px;
	}

	.emojiList img,
	.emojl-panel img {
		width: 40px;
		height: 40px;
		margin: 0 !important;
	}

	.friends_detail_panel {
		border-left: none !important;
		overflow-y: auto;
	}

	#tabCon_1 > div {
		width: auto !important;
		height: 100% !important;
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		padding: 12px 0 calc(16px + var(--safe-bottom));
		border: none !important;
		overflow-y: auto;
		background: #f5f5f5;
	}

	#tabCon_1 > div > .mobile-back-btn {
		margin-bottom: 16px;
		align-self: flex-start;
	}

	#tabCon_1 #friend_img_div {
		display: flex;
		justify-content: center;
		margin-top: 0 !important;
		margin-bottom: 0;
		padding: 20px 16px 14px;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
		border-bottom: 1px solid #ededed;
	}

	#tabCon_1 #friend_img_div img {
		width: 72px !important;
		height: 72px !important;
		border-radius: 10px !important;
		border: 0;
		box-shadow: none;
		object-fit: cover;
	}

	.ring {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 58px;
		height: auto;
		margin-bottom: 0;
		padding: 16px;
		border-radius: 0;
		border-bottom: 1px solid #ededed;
		background: #ffffff;
		box-shadow: none;
	}

	.one {
		float: none;
		flex: 0 0 62px;
		margin: 0 !important;
		line-height: 1.4;
		font-size: 13px;
		color: var(--mobile-muted);
	}

	.ring > div {
		float: none !important;
		flex: 1 1 auto;
		margin: 0 !important;
		line-height: 1.5 !important;
		font-size: 15px !important;
		text-align: left;
		color: var(--mobile-text);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.is-mobile-h5 #tabCon_1 #desRemark {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	body.is-mobile-h5 #tabCon_1 #desRemark .remark_name {
		width: 100%;
		height: 40px;
		margin-left: 0 !important;
		padding: 0 14px;
		border-radius: 12px;
		border: 1px solid #e5e7eb;
		background: #f8fafc;
		color: var(--mobile-text);
		box-shadow: none;
	}

	body.is-mobile-h5 #tabCon_1 #desRemark .remark_name-none-border {
		border-color: transparent;
		color: #667085;
	}

	body.is-mobile-h5 #tabCon_1 #desRemark .switch-name {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
		border: 1px solid var(--mobile-border);
		border-radius: 12px;
		background: #ffffff;
		color: #6b7280;
		font-size: 18px;
		line-height: 1;
	}

	body.is-mobile-h5 #friendDetailsBtn {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 18px !important;
		padding: 0 16px 16px;
	}

	body.is-mobile-h5 #friendDetailsBtn .btn,
	body.is-mobile-h5 #friendDetailsBtn .danger_btn,
	body.is-mobile-h5 #friendDetailsBtn .defult_btn {
		width: 100% !important;
		height: 44px !important;
		margin: 0 !important;
		border-radius: 14px;
		font-size: 15px;
		font-weight: 600;
	}

	body.is-mobile-h5 #friendDetailsBtn .btn:only-child,
	body.is-mobile-h5 #friendDetailsBtn .danger_btn:only-child,
	body.is-mobile-h5 #friendDetailsBtn .defult_btn:only-child {
		grid-column: 1 / -1;
	}

	body.is-mobile-h5 #friendDetailsBtn .danger_btn + .danger_btn {
		background-color: #1f2937 !important;
	}

	#tabCon_2 {
		width: 100% !important;
		border-left: none !important;
		overflow-y: auto !important;
		background: #f5f5f5;
		padding-bottom: calc(20px + var(--safe-bottom));
	}

	.group_details_panel > .head {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		background: #ededed;
		z-index: 2;
		box-shadow: none;
	}

	.group_details_panel > .head > span {
		flex: 1 1 auto;
		padding-right: 56px;
		text-align: center;
	}

	.group-panel-back-icon {
		display: none;
	}

	.groupDetailSettingRow {
		display: flex;
		align-items: center;
		min-height: 64px;
		height: auto;
		margin: 0;
		padding: 14px 16px !important;
		border-bottom: 1px solid #ededed;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
	}

	.groupDetailSettingRow--editable {
		cursor: pointer;
	}

	.groupDetailSettingRow--editable:active {
		background: #f8f8f8;
	}

	.groupDetailSettingRow > div {
		display: flex;
		align-items: center;
		width: 100%;
		min-width: 0;
	}

	.groupDetails .groupSettingItem_p {
		flex: 0 0 96px;
		width: auto !important;
		margin: 0 !important;
		font-size: 14px;
		color: var(--mobile-muted);
	}

	.groupDetailText {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0 !important;
		text-align: right;
		color: var(--mobile-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.groupDetailText--muted {
		color: #98a2b3;
	}

	.groupDetailText--multiline {
		display: -webkit-box;
		white-space: normal;
		line-height: 1.45;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.groupDetailSettingImg {
		flex: 0 0 auto;
		margin: 0 0 0 10px !important;
		height: 18px;
		opacity: 0.55;
	}

	.group-bulletin-modal .modal-body,
	.group-invite-modal .modal-body,
	.group-member-modal .modal-body {
		min-height: min(58vh, 420px);
	}

	.groupSettingSwitchDiv {
		min-height: 64px;
		padding: 14px 16px !important;
	}

	.groupSettingSwitchDiv .layui-input-block {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 10px;
		margin-left: 0 !important;
	}

	.groupSettingSwitchDiv .layui-input-block .groupSettingItem_p {
		flex: 1 1 auto;
		width: auto !important;
	}

	.groupSettingSwitchDiv .layui-input-block > .layui-unselect {
		margin-left: auto;
	}

	.groupName {
		width: auto;
		margin-left: 0;
	}

	#tabCon_2 #btnDelete,
	#tabCon_2 .danger_btn {
		width: calc(100% - 32px) !important;
		height: 44px !important;
		margin: 12px 16px 0 !important;
		border-radius: 6px;
	}

	.mobile-tabbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		height: calc(var(--mobile-tabbar-height) + var(--safe-bottom));
		padding: 6px 0 var(--safe-bottom);
		background: rgba(247, 247, 247, 0.98);
		border-top: 1px solid #d7d7d7;
		box-shadow: none;
		backdrop-filter: blur(12px);
		z-index: 30;
	}

	.mobile-root-view .mobile-tabbar {
		display: grid;
	}

	.mobile-overlay-view .mobile-tabbar {
		display: none;
	}

	.mobile-overlay-view .pwa-install-btn {
		display: none !important;
	}

	.mobile-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		color: var(--mobile-muted);
		text-decoration: none !important;
		font-size: 10px;
		font-weight: 500;
		border-radius: 0;
		transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	}

	.mobile-tabbar__item i {
		display: block;
		width: 22px;
		height: 22px;
		border-radius: 0;
		background: transparent center/20px no-repeat;
		opacity: 0.58;
	}

	.mobile-tabbar__item.is-active {
		color: var(--mobile-brand);
		background: transparent;
		box-shadow: none;
	}

	.mobile-tabbar__item.is-active i {
		opacity: 1;
		transform: scale(1.1);
	}

	.mobile-tabbar__item span {
		white-space: nowrap;
	}

	#mobile-tab-messages i {
		background-image: url("../img/messageImg2.png");
	}

	#mobile-tab-messages.is-active i {
		background-image: url("../img/messageImg.png");
	}

	#mobile-tab-friends i {
		background-image: url("../img/friendImg2.png");
	}

	#mobile-tab-friends.is-active i {
		background-image: url("../img/friendImg.png");
	}

	#mobile-tab-room i {
		background-image: url("../img/roomImg2.png");
	}

	#mobile-tab-room.is-active i {
		background-image: url("../img/roomImg.png");
	}

	#mobile-tab-company i {
		background-image: url("../img/compImg2.png");
	}

	#mobile-tab-company.is-active i {
		background-image: url("../img/compImg.png");
	}

	#mobile-tab-live i {
		background-image: url("../img/live2.png");
	}

	#mobile-tab-live.is-active i {
		background-image: url("../img/live.png");
	}

	body.is-mobile-h5 .mobile-back-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: auto;
		height: 36px;
		margin-right: 12px;
		padding: 0 12px 0 10px;
		border: 1px solid #e5e7eb;
		border-radius: 999px;
		background: #ffffff;
		color: #344054;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		word-break: keep-all;
		flex-shrink: 0;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
	}

	body.is-mobile-h5 .mobile-back-btn::before {
		content: "";
		width: 8px;
		height: 8px;
		margin-left: 2px;
		border-left: 1.8px solid currentColor;
		border-bottom: 1.8px solid currentColor;
		transform: rotate(45deg);
	}

	body.is-mobile-h5 .mobile-back-btn.is-visible {
		display: inline-flex;
	}

	.my_profile_panel,
	.privacy_set_panel,
	.password_set_panel {
		position: absolute;
		inset: 0;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		border: none !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		z-index: 8;
		background: #f5f5f5;
	}

	.my_profile_title,
	.privacy_set_title,
	.password_set_title {
		position: sticky;
		top: 0;
		z-index: 2;
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(16px);
		box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
	}

	.mobile-sheet-header {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 56px;
		padding: 10px 16px;
	}

	.mobile-sheet-header > span {
		font-size: 17px;
		font-weight: 700;
		color: var(--mobile-text);
	}

	.mobile-sheet-back {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 54px;
		height: 34px;
		padding: 0 12px;
		border: 0;
		border-radius: 6px;
		background: #e5e5e5;
		color: var(--mobile-text);
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		word-break: keep-all;
		flex-shrink: 0;
		box-shadow: inset 0 0 0 1px rgba(228, 231, 237, 0.9);
	}

	.mobile-settings-page {
		min-height: 100%;
		padding: 12px 0 calc(20px + var(--safe-bottom)) !important;
		background: #f5f5f5;
	}

	#privacy {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	#privacy .mobile-settings-page.mobile-privacy-page {
		min-height: auto;
		padding: 0 20px calc(28px + var(--safe-bottom)) !important;
		box-sizing: border-box;
	}

	.mobile-profile-hero {
		padding: 20px 16px 16px;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
		border-bottom: 1px solid #ededed;
	}

	#prop #avatar_preview {
		width: 104px !important;
		max-height: 104px !important;
		border: 0;
	}

	#prop .layui-form-item,
	#privacy .privacy_option,
	#setPassword .layui-input-inline {
		width: 100% !important;
		margin: 0 !important;
		padding: 14px 16px;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
		border-bottom: 1px solid #ededed;
	}

	#prop .layui-form-item {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	#prop .layui-form-label,
	#privacy .layui-form-label {
		width: auto !important;
		padding: 0;
		line-height: 24px;
		font-size: 13px;
		color: var(--mobile-muted);
	}

	#prop .layui-form-label {
		flex: 0 0 64px;
	}

	#prop .layui-input-inline,
	#prop .layui-input-block,
	#setPassword .layui-input-inline {
		width: 100% !important;
		margin-left: 0 !important;
	}

	#prop .layui-input-inline {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
	}

	#prop .layui-input,
	#setPassword .layui-input {
		height: 44px;
		border-radius: 6px;
		background: #f4f5f7;
		border: 1px solid #e8ebf0;
	}

	#prop .layui-form-radio {
		display: inline-flex;
		align-items: center;
		margin: 0 18px 0 0 !important;
		padding: 0;
		line-height: 1.2;
	}

	#prop .layui-form-radio:last-child {
		margin-right: 0 !important;
	}

	#prop .layui-form-radio i {
		margin-right: 6px;
	}

	#privacy .privacy_option {
		display: flex;
		align-items: center;
		min-height: 60px;
		padding: 14px 16px;
		border-bottom: 1px solid #ededed;
	}

	#privacy .layui-input-block {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 12px;
	}

	#privacy .layui-input-block .layui-unselect {
		margin-left: auto;
	}

	#setPassword form {
		padding: 0 !important;
	}

	.mobile-page-actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 12px !important;
		padding: 0 16px;
	}

	#roomTab > div:last-child,
	#liveRoomTab > div:last-child {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#myRoomList,
	#allRoomList,
	#_allRoomList,
	#liveRoomList {
		min-height: 100%;
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#roomTab .pageTurning,
	#liveRoomTab .pageTurning {
		display: none;
	}

	.live_item {
		cursor: pointer;
	}

	.mobile-empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 220px;
		padding: 32px 20px;
		color: var(--mobile-muted);
		text-align: center;
	}

	.mobile-empty-state p {
		margin: 0;
		font-size: 16px;
		color: var(--mobile-text);
	}

	.mobile-empty-state span {
		margin-top: 8px;
		font-size: 12px;
	}

	.mobile-page-actions .defult_btn,
	.mobile-page-actions .danger_btn {
		width: 100% !important;
		height: 44px !important;
		border-radius: 6px;
	}

	.modal-dialog {
		width: auto !important;
		max-width: calc(100vw - 20px) !important;
		margin: 10px auto !important;
		padding-bottom: var(--safe-bottom);
	}

	.modal-content {
		border: none;
		border-radius: 22px;
		max-height: calc(var(--app-height) - 20px);
		overflow: hidden;
		box-shadow: var(--mobile-shadow);
	}

	.modal-header {
		padding: 18px 20px;
		border-bottom: 1px solid #eff2f6;
	}

	.modal-header .close {
		margin-top: -4px;
		font-size: 28px;
		opacity: 0.45;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 600;
		color: var(--mobile-text);
	}

	.modal-body {
		padding: 18px 20px;
	}

	#map .modal-body {
		padding: 16px;
	}

	#map #baiduMap {
		height: 280px !important;
		min-height: 280px;
	}

	#map .map-preview-stage {
		min-height: 180px;
	}

	#map .map-preview-meta {
		padding: 12px 14px 14px;
	}

	#map .map-preview-actions a {
		width: 100%;
	}

	.modal-body .row {
		margin-left: 0;
		margin-right: 0;
	}

	.modal-body .col-sm-3,
	.modal-body .col-sm-5,
	.modal-body .col-sm-7,
	.modal-body .col-sm-9 {
		width: 100% !important;
		float: none !important;
		padding-left: 0;
		padding-right: 0;
	}

	.modal-body .control-label {
		padding: 0;
		margin-bottom: 8px;
		text-align: left !important;
		font-size: 13px;
		line-height: 1.4;
		color: var(--mobile-muted);
	}

	.modal-body .form-control,
	.modal-body .noticeInput {
		padding: 0 12px;
		border-radius: 12px;
	}

	.modal-body .form-control {
		height: 42px;
	}

	.modal-body textarea.form-control,
	.modal-body .noticeInput {
		height: auto;
		min-height: 96px;
		padding: 12px;
		line-height: 1.5;
	}

	.modal-body [style*="overflow-y:auto"],
	.modal-body [style*="overflow-y: auto"],
	.modal-body [style*="overflow-y: scroll"] {
		height: auto !important;
		max-height: min(50vh, 320px) !important;
	}

	.modal-footer {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 14px 20px calc(18px + var(--safe-bottom));
		border-top: 1px solid #eff2f6;
	}

	.modal-footer .btn,
	.modal-footer .danger_btn,
	.modal-footer .defult_btn,
	.modal-footer .sou,
	.modal-footer .upload_btn,
	.modal-footer .close_btn {
		width: 100% !important;
		height: 44px !important;
		margin: 0 !important;
		border-radius: 14px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	#addfriend .modal-content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.group-compact-modal {
		display: flex;
		flex-direction: column;
		max-height: calc(var(--app-height) - 20px);
		overflow: hidden;
	}

	.group-compact-modal .modal-header {
		padding: 18px 20px !important;
	}

	.group-compact-modal .modal-body {
		flex: 1 1 auto;
		min-height: 0;
		padding: 20px !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.group-compact-modal .modal-body::-webkit-scrollbar {
		display: none;
	}

	.group-compact-modal .modal-footer {
		flex: 0 0 auto;
		padding: 14px 20px calc(18px + var(--safe-bottom)) !important;
	}

	.group-compact-modal .form-group {
		margin-bottom: 18px;
	}

	.group-compact-modal .form-group:last-child {
		margin-bottom: 0;
	}

	.group-compact-modal .help-block {
		margin: 8px 0 0;
		line-height: 1.5;
	}

	.group-modal-page {
		padding: 2px 20px 16px;
	}

	.group-create-panel {
		padding: 18px;
		border-radius: 20px;
	}

	.group-file-list,
	.group-member-list,
	.group-invite-list,
	.group-notice-list,
	.group-create-friend-list {
		scrollbar-width: none;
	}

	.group-file-list::-webkit-scrollbar,
	.group-member-list::-webkit-scrollbar,
	.group-invite-list::-webkit-scrollbar,
	.group-notice-list::-webkit-scrollbar,
	.group-create-friend-list::-webkit-scrollbar {
		display: none;
	}

	#addfriend .modal-body {
		display: flex;
		flex-direction: column;
		gap: 12px;
		min-height: 280px;
	}

	#addfriend #_myNearUserList {
		flex: 1 1 auto;
		min-height: 180px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#addfriend #myNearPage {
		padding-top: 8px;
	}

	#addfriend .chat_item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 0;
	}

	#addfriend .chat_item .avatar {
		float: none;
		margin: 0;
	}

	#addfriend .chat_item .info,
	#addfriend .nearby-user__info {
		float: none !important;
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
	}

	#addfriend .chat_item .nickname {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	#addfriend .chat_item .nickname_text {
		font-size: 15px;
		font-weight: 500;
		color: #1f2329;
	}

	#addfriend .chat_item .msg {
		margin-top: 4px;
		font-size: 12px;
		color: #8a8f98;
	}

	#addfriend .chat_item .ext {
		margin-left: auto;
	}

	#addfriend .btn_addFriend {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: #e9f8ef;
	}

	#addfriend .btn_addFriend img {
		width: 18px !important;
		height: 18px !important;
	}

	#findgroupfile #myModalLabel {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px;
		min-height: 36px;
		font-size: 16px;
		font-weight: 600;
		color: var(--mobile-text);
	}

	#findgroupfile .group-file-modal {
		max-height: calc(100vh - 28px);
		max-height: calc(100dvh - 28px);
	}

	#findgroupfile #btnUploadGroupFile {
		margin-left: auto !important;
		height: 36px;
		padding: 0 16px;
		border: 0;
		border-radius: 10px;
		background: #07c160;
		color: #ffffff;
		font-size: 13px;
		font-weight: 600;
	}

	#findgroupfile .modal-body {
		padding-top: 14px !important;
		padding-bottom: 12px !important;
		background: #f7f8fa;
	}

	#findgroupfile .modal-footer {
		padding: 12px 16px 16px !important;
		background: #ffffff;
	}

	#findgroupfile .group-file-list {
		max-height: none;
		overflow: visible;
	}

	#findgroupfile #gfile {
		display: flex;
		flex-direction: column;
		gap: 14px;
		max-height: none;
		padding-right: 0;
		overflow: visible;
	}

	#findgroupfile .groupFile {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		gap: 12px 14px;
		height: auto !important;
		min-height: 0;
		align-items: start;
		margin-bottom: 0;
		padding: 18px 16px;
		border: 1px solid #eceef2;
		border-radius: 18px;
		background: #ffffff;
		box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
	}

	#findgroupfile .groupFile .groupFile__icon,
	#findgroupfile .groupFile > div:first-child {
		grid-column: 1;
		grid-row: 1 / span 3;
		float: none !important;
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	#findgroupfile .groupFile > div:first-child img {
		width: 40px !important;
		height: 40px !important;
	}

	#findgroupfile .groupFile .info {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		float: none !important;
		padding: 0;
		min-width: 0;
	}

	#findgroupfile .groupFile .fileName {
		width: auto;
		margin: 0;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.45;
		color: #1f2329;
		word-break: break-word;
	}

	#findgroupfile .groupFile .fileData {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 10px;
		width: auto;
		margin-top: 0;
		font-size: 12px;
		line-height: 1.4;
		white-space: normal;
	}

	#findgroupfile .groupFile .fileData span {
		margin-left: 0 !important;
	}

	#findgroupfile .groupFile .timeStr {
		grid-column: 2;
		grid-row: 2;
		float: none;
		width: auto;
		margin: 0;
		line-height: 1.45;
		text-align: left;
		font-size: 12px;
		color: #98a2b3;
	}

	#findgroupfile .groupFile .option {
		grid-column: 1 / -1;
		grid-row: 3;
		float: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		margin: 0;
		align-self: flex-start;
		align-items: center;
		justify-content: flex-start;
	}

	#findgroupfile .groupFile .option a {
		display: inline-flex;
	}

	#findgroupfile .groupFile .groupFile__action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 38px;
		min-width: 88px;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 600;
		text-decoration: none !important;
	}

	#findgroupfile .groupFile .groupFile__action--primary {
		background: #e8f8ef;
		color: #07c160;
	}

	#findgroupfile .groupFile .groupFile__action--danger {
		background: #fff1f0;
		color: #d92d20;
	}

	#findgroupfile .groupFile .option img,
	#findgroupfile .groupFile .groupFile__action img {
		width: 14px;
		height: 14px;
	}

	body.is-mobile-h5 #findgroupfile .modal-dialog {
		display: flex;
		align-items: flex-end;
		width: 100% !important;
		max-width: none !important;
		min-height: calc(var(--app-height) - 8px);
		margin: 0 !important;
		padding: 10px 12px calc(8px + var(--safe-bottom));
	}

	body.is-mobile-h5 #findgroupfile .group-file-modal {
		width: 100%;
		min-height: auto;
		height: auto;
		max-height: calc(var(--app-height) - 18px);
		border-radius: 28px 28px 22px 22px;
		background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
		box-shadow: 0 22px 58px rgba(15, 23, 42, 0.22);
	}

	body.is-mobile-h5 #findgroupfile .modal-header {
		padding: 18px 18px 12px !important;
		border-bottom: 0;
		background: transparent;
	}

	body.is-mobile-h5 #findgroupfile #myModalLabel {
		width: 100%;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		font-size: 17px;
		font-weight: 700;
	}

	body.is-mobile-h5 #findgroupfile #btnUploadGroupFile {
		height: 34px;
		padding: 0 14px;
		border-radius: 999px;
		font-size: 12px;
		box-shadow: 0 8px 18px rgba(7, 193, 96, 0.22);
	}

	body.is-mobile-h5 #findgroupfile .modal-body {
		flex: 0 1 auto;
		max-height: min(56vh, 420px);
		overflow-y: auto;
		padding: 4px 16px 10px !important;
		background: transparent;
	}

	body.is-mobile-h5 #findgroupfile .group-file-list {
		padding-bottom: 4px;
	}

	body.is-mobile-h5 #findgroupfile #gfile {
		gap: 12px;
	}

	body.is-mobile-h5 #findgroupfile .groupFile {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 10px 12px;
		height: auto !important;
		padding: 14px 14px 12px;
		border: 1px solid rgba(226, 232, 240, 0.96);
		border-radius: 20px;
		background: #ffffff;
		box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
		overflow: hidden;
	}

	body.is-mobile-h5 #findgroupfile .groupFile > div:first-child img,
	body.is-mobile-h5 #findgroupfile .groupFile .groupFile__icon img {
		width: 38px !important;
		height: 38px !important;
	}

	body.is-mobile-h5 #findgroupfile .groupFile .fileName {
		width: 100%;
		max-width: 100%;
		white-space: normal;
		word-break: break-word;
		font-size: 14px;
		line-height: 1.45;
	}

	body.is-mobile-h5 #findgroupfile .groupFile .fileData {
		width: 100%;
		gap: 4px 10px;
		font-size: 11px;
		line-height: 1.45;
		color: #768395;
	}

	body.is-mobile-h5 #findgroupfile .groupFile .fileData span,
	body.is-mobile-h5 #findgroupfile .groupFile .timeStr p {
		margin: 0 !important;
	}

	body.is-mobile-h5 #findgroupfile .groupFile .timeStr {
		width: 100%;
		font-size: 11px;
		line-height: 1.4;
		color: #98a2b3;
	}

	body.is-mobile-h5 #findgroupfile .groupFile .option {
		padding-top: 4px;
		gap: 8px;
	}

	body.is-mobile-h5 #findgroupfile .groupFile .groupFile__action {
		height: 34px;
		min-width: 0;
		padding: 0 12px;
		font-size: 12px;
		box-shadow: none;
	}

	body.is-mobile-h5 #findgroupfile .modal-footer {
		display: flex !important;
		flex-direction: row !important;
		justify-content: flex-end;
		gap: 10px;
		padding: 12px 16px calc(14px + var(--safe-bottom)) !important;
		border-top: 1px solid rgba(232, 236, 242, 0.9);
		background: #ffffff;
	}

	body.is-mobile-h5 #findgroupfile .modal-footer .close_btn {
		width: auto !important;
		min-width: 92px;
		height: 38px !important;
		padding: 0 16px;
		border-radius: 999px;
		background: #eef2f6;
		color: #475467;
		box-shadow: none;
	}

	#loading_1 {
		width: 100%;
		margin-top: 6px;
		text-align: center;
		color: var(--mobile-muted);
	}

	#voice .modal-dialog {
		max-width: min(100vw - 24px, 360px) !important;
	}

	#voice .modal-content {
		background: linear-gradient(180deg, #3b4350 0%, #202733 100%) !important;
		color: #fff;
	}

	#voice .modal-title {
		color: #fff;
	}

	#voice .modal-body p {
		margin: 0 0 16px !important;
		text-align: center;
	}

	#voice .col-sm-7 {
		height: auto !important;
	}

	#voice [onmousedown] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 180px !important;
		height: 180px !important;
		margin: 24px auto 0 !important;
		border-radius: 999px !important;
		box-shadow: 0 22px 44px rgba(210, 90, 88, 0.26);
	}

	#voice #voice_img {
		width: 180px !important;
		height: 180px !important;
	}

	#voice #voice_gif {
		width: 132px !important;
		height: 132px !important;
		margin: 0 !important;
	}

	#callView,
	#fakeCall,
	#fakeAnswer {
		width: calc(100vw - 24px) !important;
		max-width: 375px;
	}

	.loginBody {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--app-height);
		padding: calc(20px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));
		background-position: center top;
		background-size: cover;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.login-page,
	.qrLogin_page,
	.register_page,
	.reset_passwd_page {
		width: 100%;
		max-width: 420px;
		height: auto !important;
		margin: auto 0;
	}

	.login-page form.layui-form,
	.qrLogin_page,
	.register_page form.layui-form,
	.reset_passwd_page form.layui-form {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 420px;
		height: auto !important;
		margin: 0 auto !important;
		padding: 24px 18px !important;
		border-radius: 18px;
		box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
	}

	.qrLogin_page {
		padding: 24px 18px !important;
	}

	.qrLogin_page form.layui-form {
		padding: 0 !important;
	}

	.checkcode-warp .get-check-code {
		right: 8px;
		top: 8px;
		font-size: 12px;
	}

	.pwa-install-btn {
		position: fixed;
		right: 16px;
		bottom: calc(var(--safe-bottom) + 16px);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 42px;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		background: rgba(17, 24, 39, 0.92);
		color: #ffffff;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.01em;
		box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
		opacity: 0;
		pointer-events: none;
		transform: translateY(12px);
		transition: opacity 0.22s ease, transform 0.22s ease;
		z-index: 48;
	}

	.pwa-install-btn.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.with-mobile-tabbar .pwa-install-btn {
		bottom: calc(var(--mobile-tabbar-height) + var(--safe-bottom) + 16px);
	}

	.pwa-install-sheet {
		position: fixed;
		inset: 0;
		display: block;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.22s ease;
		z-index: 49;
	}

	.pwa-install-sheet.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	.pwa-install-sheet__backdrop {
		position: absolute;
		inset: 0;
		display: block;
		background: rgba(15, 23, 42, 0.28);
	}

	.pwa-install-sheet__panel {
		position: absolute;
		right: 12px;
		bottom: 12px;
		left: 12px;
		display: block;
		padding: 20px 18px calc(18px + var(--safe-bottom));
		border-radius: 24px;
		background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
		box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18);
		transform: translateY(20px);
		transition: transform 0.22s ease;
	}

	.pwa-install-sheet.is-visible .pwa-install-sheet__panel {
		transform: translateY(0);
	}

	.pwa-install-sheet__close {
		position: absolute;
		top: 14px;
		right: 14px;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: #f3f4f6;
		color: #667085;
		font-size: 18px;
		line-height: 1;
	}

	.pwa-install-sheet__eyebrow {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		color: #2563eb;
		text-transform: uppercase;
	}

	.pwa-install-sheet__title {
		margin: 10px 0 0;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.25;
		color: #111827;
	}

	.pwa-install-sheet__desc {
		margin: 10px 0 0;
		font-size: 13px;
		line-height: 1.6;
		color: #475467;
	}

	.pwa-install-sheet__steps {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 16px;
	}

	.pwa-install-sheet__step {
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
		padding: 12px;
		border-radius: 16px;
		background: #f8fafc;
	}

	.pwa-install-sheet__step-index {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 999px;
		background: #2563eb;
		color: #ffffff;
		font-size: 13px;
		font-weight: 700;
	}

	.pwa-install-sheet__step-text {
		font-size: 13px;
		line-height: 1.55;
		color: #1f2937;
	}

	.pwa-install-sheet__tip {
		margin-top: 14px;
		padding: 10px 12px;
		border-radius: 14px;
		background: #f3f4f6;
		font-size: 12px;
		line-height: 1.55;
		color: #667085;
	}

	.pwa-install-sheet__tip:empty {
		display: none;
	}

	.pwa-install-sheet__actions {
		display: flex;
		gap: 10px;
		margin-top: 16px;
	}

	.pwa-install-sheet__actions button {
		flex: 1 1 50%;
		height: 44px;
		border-radius: 14px;
		font-size: 14px;
		font-weight: 600;
	}

	.pwa-install-sheet__primary {
		border: 1px solid #2563eb;
		background: #2563eb;
		color: #ffffff;
	}

	.pwa-install-sheet__ghost {
		border: 1px solid #d0d5dd;
		background: #ffffff;
		color: #344054;
	}

	body:not(.is-mobile-h5) #tabCon_new .message_panel_head,
	body:not(.is-mobile-h5) #tabCon_0 .message_panel_head {
		padding: 0 18px;
		min-height: 50px;
		background: #ffffff;
	}

	body:not(.is-mobile-h5) #tabCon_new .message_panel_head > .mobile-back-btn,
	body:not(.is-mobile-h5) #tabCon_0 .message_panel_head > .mobile-back-btn,
	body:not(.is-mobile-h5) #tabCon_1 > div > .mobile-back-btn,
	body:not(.is-mobile-h5) .group_details_panel > .head > .mobile-back-btn {
		display: none !important;
	}

	body:not(.is-mobile-h5) #tabCon_new .message_panel_head > div,
	body:not(.is-mobile-h5) #tabCon_0 .message_panel_head > div {
		display: flex !important;
		align-items: center;
		gap: 0;
		width: auto;
		height: 40px !important;
		margin-top: -5px !important;
	}

	body:not(.is-mobile-h5) #tabCon_new .headContent,
	body:not(.is-mobile-h5) #tabCon_0 .headContent {
		float: left;
		display: block;
		height: 47px;
		margin-left: 4px;
		line-height: 47px;
		text-align: center;
		overflow: hidden;
	}

	body:not(.is-mobile-h5) #tabCon_new .message_panel_head .headContent:nth-of-type(3),
	body:not(.is-mobile-h5) #tabCon_new .message_panel_head .headContent:nth-of-type(4) {
		display: none !important;
	}

	body:not(.is-mobile-h5) #tabCon_new .imgAvatar figure,
	body:not(.is-mobile-h5) #tabCon_0 #chatAvator .imgAvatar figure {
		width: 40px !important;
		height: 40px !important;
		border-radius: 100px;
	}

	body:not(.is-mobile-h5) #tabCon_new .user_nickname,
	body:not(.is-mobile-h5) #tabCon_0 #chatTitle {
		max-width: none;
		margin: 10px 0 0;
		font-size: 16px;
		font-weight: 400;
		line-height: normal;
		color: #333333;
		text-align: left;
	}

	body:not(.is-mobile-h5) #tabCon_new .user_nickname > span {
		font-size: 16px !important;
	}

	#map {
		padding-right: 0 !important;
	}

	#map .modal-dialog.map-modal-dialog {
		width: auto !important;
		max-width: none !important;
		margin: 0;
		min-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
	}

	#map .map-modal {
		width: 100%;
		max-width: 520px;
		max-height: calc(100vh - var(--safe-top) - 18px);
		border-radius: 24px;
	}

	#map .map-modal-header {
		padding: 16px 18px 14px;
	}

	#map .map-modal-header .modal-title {
		font-size: 18px;
	}

	#map .map-modal-header .close {
		font-size: 24px;
		opacity: .48;
	}

	#map .map-modal-body {
		padding: 12px;
		overflow-y: auto;
	}

	#map .map-modal-stage {
		border-radius: 18px;
	}

	#map .map-modal-canvas {
		height: min(52vh, 400px) !important;
		min-height: 340px;
	}

	#map.map-preview-content .map-modal-canvas {
		height: auto !important;
		min-height: 0;
	}

	#map.map-preview-content .map-preview-stage {
		height: min(48vh, 380px);
		min-height: 300px;
		max-height: 380px;
	}

	#map .map-preview-meta {
		padding: 14px 16px 16px;
	}

	#map .map-preview-title {
		font-size: 15px;
		line-height: 1.45;
	}

	#map .map-preview-coords,
	#map .map-preview-note {
		font-size: 12px;
		line-height: 1.55;
	}

	#map .map-preview-actions a,
	#map .map-modal-footer .btn {
		width: 100%;
		min-width: 0;
	}

	#map .map-modal-footer {
		padding: 0 12px 12px;
	}

	#privacy .privacy_action_button {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 32px;
	}

	#privacy .privacy_action_button em {
		margin-left: auto;
		max-width: 48%;
	}

	.notification-sound-modal-dialog {
		width: calc(100% - 24px) !important;
		max-width: 400px !important;
		margin: 12px auto !important;
	}

	.notification-sound-modal {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}

	.notification-sound-modal .modal-body {
		padding: 18px 16px !important;
	}

	.notification-sound-modal__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.notification-sound-modal__actions .btn {
		width: 100%;
		height: 42px;
		padding: 0 8px;
		font-size: 14px;
		line-height: 42px;
		margin: 0;
	}

	.notification-sound-modal__preset-head {
		margin-top: 16px;
		font-size: 13px;
	}

	.notification-sound-modal__preset-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}

	.notification-sound-modal__preset {
		min-height: 54px;
		padding: 9px 10px;
	}

	.notification-sound-modal__preset strong {
		font-size: 12px;
	}

	.notification-sound-modal__preset span {
		font-size: 11px;
		margin-top: 4px;
	}

	.map-external-actions {
		width: 100%;
		justify-content: stretch;
	}

	.map-external-actions .map-external-action {
		width: 100%;
		margin: 0;
	}
}