/**
 * 全站通用移动版顶部导航条
 * 左后退、中标题、右前进
 * 桌面端隐藏；会员中心移动端（≤767px）显示
 */

/* 默认隐藏 */
.sanxio-mobile-top-nav {
	display: none;
}

/* 会员中心移动端（≤767px）：显示，置顶 */
/* 含 responsive（.member-md3-page）与 /mobile/member/（核心模板，body 无该 class） */
@media (max-width: 767px) {
	.sanxio-mobile-top-nav {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		position: fixed !important;
		top: 0 !important;
		left: 0;
		right: 0;
		z-index: 1001 !important;
		height: 48px;
		padding: 0 8px;
		background-color: var(--md-sys-color-surface, #fff);
		border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
	}
	.sanxio-mobile-top-nav__btn {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		color: var(--md-sys-color-on-surface-variant, #49454f);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		-webkit-tap-highlight-color: transparent;
	}
	.sanxio-mobile-top-nav__btn svg {
		position: relative;
		top: 1px;
	}
	.sanxio-mobile-top-nav__btn:hover {
		background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
	}
	.sanxio-mobile-top-nav__title {
		flex: 1;
		min-width: 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: 500;
		color: var(--md-sys-color-on-surface, #1c1c1c);
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
	.sanxio-mobile-top-nav__logo {
		width: 28px;
		height: 28px;
		border-radius: 6px;
		object-fit: cover;
		flex-shrink: 0;
	}
	.sanxio-mobile-top-nav__title-text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sanxio-mobile-top-nav__title--expandable {
		cursor: pointer;
		border: none;
		background: transparent;
		font: inherit;
		border-radius: 8px;
		-webkit-tap-highlight-color: transparent;
	}
	.sanxio-mobile-top-nav__title--expandable:hover {
		background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
	}
	.sanxio-mobile-top-nav__chevron {
		font-size: 20px;
		font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
		transition: transform 0.2s;
	}
	.sanxio-mobile-top-nav__title--expandable[aria-expanded="false"] .sanxio-mobile-top-nav__chevron {
		transform: rotate(180deg);
	}
	.sanxio-mobile-top-nav__avatar {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		-webkit-tap-highlight-color: transparent;
		position: relative;
	}
	.sanxio-mobile-top-nav__chat-badge {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 3;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		font-size: 10px;
		font-weight: 600;
		line-height: 16px;
		border-radius: 9px;
		background: var(--md-sys-color-error, #b3261e);
		color: var(--md-sys-color-on-error, #fff);
		border: 2px solid var(--md-sys-color-surface, #fff);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
		display: none;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}
	.sanxio-mobile-top-nav__chat-badge:not(:empty) {
		display: inline-flex;
	}
	.sanxio-mobile-top-nav__avatar:hover {
		background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
	}
	.sanxio-mobile-top-nav__avatar img {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		object-fit: cover;
	}
	.sanxio-mobile-top-nav__avatar .material-symbols-outlined {
		font-size: 34px;
		color: var(--md-sys-color-on-surface-variant, #49454f);
		line-height: 1;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, calc(-50% + 1px));
	}
	/* /mobile/member/ 无 member-md3-page，为固定导航预留空间 */
	body:has(.sanxio-mobile-top-nav):not(.member-md3-page) {
		padding-top: 48px;
	}
	/* 首页/主站（有 mdc-top-app-bar）不显示 */
	body:has(.mdc-top-app-bar) .sanxio-mobile-top-nav {
		display: none !important;
	}
}