/**
 * 前台頁首頭像 + 員工小入口（2026-10-23；JS 在 assets/js/hz-account-badge.js）。
 *
 * 顏色：員工小入口用殼的同一組值（--hz-shell-ink / --hz-shell-accent / --hz-shell-accent-ink，見 assets/admin/src/styles/tailwind.css），
 * 其餘一律系統色 / currentColor，⛔ 寫死色碼。頭像圓圈的底色與字色由 JS 跟著頁首字色挑。
 * 選擇器一律 `:root body …`：前台佈景主題的 button / a 樣式特異性很高，低了會被蓋（blocksy-theme-reset-systemic）。
 */

:root body .hz-ab-avatar {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

:root body .hz-ab-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 手機抽屜那格：頭像 + 名字 + 原本的「我的帳戶」 */
:root body .hz-ab-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

:root body .hz-ab-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

:root body .hz-ab-name {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:root body .hz-ab-sub {
	font-size: 0.875rem;
	opacity: 0.75;
}

/* ── 員工小入口 ─────────────────────────────── */

:root body .hz-ab-pill {
	--hz-ab-ink: 0 0% 8.2%;
	--hz-ab-accent: 22 72.2% 56.3%;
	--hz-ab-accent-ink: 23 66% 41.6%;
	color-scheme: light;
	position: fixed;
	left: 1.25rem;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif;
	line-height: 1;
}

/* 平常：淺色小圓點（不搶眼、截圖不顯眼） */
:root body .hz-ab-dot {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, CanvasText 12%, Canvas);
	border-radius: 50%;
	background: color-mix(in srgb, Canvas 88%, transparent);
	color: hsl(var(--hz-ab-accent-ink));
	box-shadow: 0 2px 8px color-mix(in srgb, CanvasText 8%, transparent);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

:root body .hz-ab-dot:hover {
	background: Canvas;
}

:root body .hz-ab-pill[data-state="open"] .hz-ab-dot {
	display: none;
}

/* 點開：深色膠囊 */
:root body .hz-ab-panel {
	display: flex;
	align-items: center;
	height: 3rem;
	padding: 0 0.25rem 0 0.375rem;
	border-radius: 999px;
	background: hsl(var(--hz-ab-ink));
	color: Canvas;
	box-shadow: 0 8px 24px color-mix(in srgb, CanvasText 18%, transparent);
}

:root body .hz-ab-panel[hidden] {
	display: none;
}

:root body .hz-ab-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding: 0 0.875rem;
	border-radius: 999px;
	color: Canvas;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

:root body .hz-ab-link:hover {
	background: color-mix(in srgb, Canvas 10%, transparent);
	color: Canvas;
}

:root body .hz-ab-main {
	padding-left: 0.25rem;
	font-weight: 700;
}

/* 前面的 Y 小方塊（跟後台品牌圖示一樣：深底橘字）；畫在 ::before，不進連結文字 */
:root body .hz-ab-main::before {
	content: "Y";
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.625rem;
	background: color-mix(in srgb, Canvas 10%, transparent);
	color: hsl(var(--hz-ab-accent));
	font-weight: 700;
}

:root body .hz-ab-link svg,
:root body .hz-ab-close svg {
	width: 1.125rem;
	height: 1.125rem;
}

:root body .hz-ab-sep {
	width: 1px;
	height: 1.375rem;
	background: color-mix(in srgb, Canvas 22%, transparent);
}

:root body .hz-ab-close {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: color-mix(in srgb, Canvas 65%, transparent);
	cursor: pointer;
}

:root body .hz-ab-close:hover {
	color: Canvas;
}

:root body .hz-ab-dot:focus-visible,
:root body .hz-ab-link:focus-visible,
:root body .hz-ab-close:focus-visible {
	outline: 2px solid hsl(var(--hz-ab-accent));
	outline-offset: 2px;
}

@media (max-width: 767px) {
	:root body .hz-ab-pill {
		left: 0.75rem;
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	:root body .hz-ab-link {
		height: 2.75rem;
		padding: 0 0.75rem;
		font-size: 0.875rem;
	}

	:root body .hz-ab-close {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media print {
	:root body .hz-ab-pill {
		display: none;
	}
}