/* Client Hub 静态站点站内查看与评审层。普通会议、周报、内部文档不使用本文件。 */
/* ---------- 内嵌查看器 ---------- */

.hub-main--viewer {
	max-width: none;
	padding: 0;
}

.hub-viewer {
	position: fixed;
	inset: 0;
	z-index: 4000;
	display: flex;
	flex-direction: column;
	background: var(--bg);
}

/* 管理员登录时给 WP admin bar 让位（桌面 32px / ≤782px 46px） */
body.admin-bar .hub-viewer {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .hub-viewer {
		top: 46px;
	}
}

.hub-viewer-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-xs);
	padding: 10px var(--pad-page);
	border-bottom: 1px solid var(--grid);
	background: var(--bg);
	font-family: var(--sans);
	font-size: var(--fs-sm);
}

.hub-viewer-back {
	flex: none;
	color: var(--ink);
}

.hub-viewer-heading {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
	overflow: hidden;
	white-space: nowrap;
}

.hub-viewer-item-title {
	font-weight: 600;
	text-overflow: ellipsis;
	overflow: hidden;
}

.hub-viewer-actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
}

.hub-viewer-toggle {
	padding: 6px 18px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--bg);
	font-size: var(--fs-sm);
	font-family: inherit;
	cursor: pointer;
}

.hub-viewer-toggle:hover {
	background: var(--brand);
	border-color: var(--brand);
}

/* stage：iframe 与 overlay 同框 */
.hub-viewer-stage {
	position: relative;
	flex: 1;
	min-height: 0;
	transition: margin-right 0.24s cubic-bezier(0.25, 0.8, 0.35, 1);
}

.hub-viewer {
	--hub-panel-w: 400px;
}

/* Figma 式挤压布局：面板打开时 stage 让位，内容不被遮挡（移动端除外，见 719px 块） */
.hub-viewer--panel-open .hub-viewer-stage {
	margin-right: min(var(--hub-panel-w), 92vw);
}

.hub-viewer-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.hub-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none; /* 子元素单独放开 */
	overflow: hidden;
}

.hub-viewer-toggle--ghost {
	background: var(--bg);
	color: var(--ink);
}

.hub-viewer-toggle[aria-pressed="true"] {
	background: var(--brand);
	border-color: var(--brand);
}

/* pin */
.hub-pin {
	position: absolute;
	transform: translate(-50%, -100%);
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border: 1px solid var(--ink);
	border-radius: 13px 13px 13px 2px;
	background: var(--brand);
	color: var(--bg);
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 2px 10px rgba(14, 14, 14, 0.25);
}

.hub-pin--resolved {
	background: rgba(14, 14, 14, 0.35);
	border-color: transparent;
}

/* 就地气泡（composer 与线程卡片共用容器） */
.hub-bubble {
	position: absolute;
	width: min(340px, 86vw);
	padding: var(--sp-2xs);
	background: var(--bg);
	border: 1px solid var(--ink);
	box-shadow: 0 16px 48px rgba(14, 14, 14, 0.22);
	pointer-events: auto;
	font-family: var(--zh);
	font-size: var(--fs-sm);
}

.hub-bubble textarea {
	width: 100%;
	min-height: 72px;
	padding: 8px 10px;
	border: 1px solid var(--grid);
	font: inherit;
}

.hub-bubble-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}

.hub-bubble-send,
.hub-auth-submit {
	padding: 7px 18px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--bg);
	font: inherit;
	cursor: pointer;
}

.hub-bubble-send:hover,
.hub-auth-submit:hover {
	background: var(--brand);
	border-color: var(--brand);
}

.hub-bubble-cancel {
	padding: 7px 12px;
	border: 1px solid var(--grid);
	background: var(--bg);
	font: inherit;
	cursor: pointer;
}

.hub-bubble-error {
	margin: 6px 0 0;
	color: var(--brand);
}

/* 线程卡片 */
.hub-thread-entry {
	padding: 8px 0;
	border-bottom: 1px solid var(--grid);
}

.hub-thread-entry:last-of-type {
	border-bottom: 0;
}

.hub-thread-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: var(--fs-label);
	color: rgba(14, 14, 14, 0.55);
	margin-bottom: 3px;
}

.hub-thread-author {
	font-weight: 600;
	color: var(--ink);
}

.hub-thread-replies {
	margin-left: 14px;
	border-left: 2px solid var(--grid);
	padding-left: 10px;
}

.hub-thread-resolve {
	font-size: var(--fs-label);
	border: 1px solid var(--grid);
	background: var(--bg);
	padding: 4px 10px;
	cursor: pointer;
}

/* 反馈流面板 */
.hub-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(var(--hub-panel-w), 92vw);
	z-index: 4100;
	padding: var(--sp-sm);
	overflow-y: auto;
	background: var(--bg);
	border-left: 1px solid var(--ink);
	box-shadow: -12px 0 40px rgba(14, 14, 14, 0.12);
	font-family: var(--zh);
	font-size: var(--fs-sm);
}

body.admin-bar .hub-panel {
	top: 32px;
}

.hub-panel-group-title {
	margin: var(--sp-xs) 0 6px;
	font-family: var(--sans);
	font-size: var(--fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(14, 14, 14, 0.55);
}



.hub-panel-item--resolved {
	opacity: 0.55;
}

/* 登录/注册弹层 */
.hub-auth {
	position: fixed;
	inset: 0;
	z-index: 4200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(14, 14, 14, 0.45);
	pointer-events: auto;
}

.hub-auth-card {
	width: min(380px, 92vw);
	padding: var(--sp-sm);
	background: var(--bg);
	border: 1px solid var(--ink);
	font-family: var(--zh);
	font-size: var(--fs-sm);
}

.hub-auth-tabs {
	display: flex;
	gap: 14px;
	margin-bottom: var(--sp-2xs);
	font-family: var(--sans);
}

.hub-auth-tab {
	border: 0;
	background: none;
	padding: 4px 0;
	font: inherit;
	cursor: pointer;
	color: rgba(14, 14, 14, 0.5);
	border-bottom: 2px solid transparent;
}

.hub-auth-tab[aria-selected="true"] {
	color: var(--ink);
	border-bottom-color: var(--brand);
}

.hub-auth-card label {
	display: block;
	margin-bottom: 8px;
}

.hub-auth-card input {
	display: block;
	width: 100%;
	margin-top: 3px;
	padding: 9px 11px;
	border: 1px solid var(--grid);
	font: inherit;
}

.hub-auth-error {
	color: var(--brand);
	margin: 4px 0;
}

.hub-feedback-login-hint {
	font-size: var(--fs-sm);
	color: rgba(14, 14, 14, 0.62);
}

/* ---------- 动效（respect reduced-motion，见文件末） ---------- */

.hub-bubble {
	opacity: 0;
	transform: scale(0.92);
	transform-origin: top left;
	transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.hub-bubble.is-in {
	opacity: 1;
	transform: scale(1);
}

.hub-panel {
	transform: translateX(100%);
	transition: transform 0.24s cubic-bezier(0.25, 0.8, 0.35, 1);
}

.hub-panel.is-open {
	transform: translateX(0);
}

.hub-auth {
	opacity: 0;
	transition: opacity 0.16s ease;
}

.hub-auth.is-in {
	opacity: 1;
}

.hub-auth .hub-auth-card {
	transform: translateY(12px);
	transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.35, 1);
}

.hub-auth.is-in .hub-auth-card {
	transform: translateY(0);
}

@keyframes hub-pin-pop {
	from { transform: translate(-50%, -100%) scale(0.6); opacity: 0; }
	60%  { transform: translate(-50%, -100%) scale(1.08); }
	to   { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

.hub-pin {
	transition: transform 0.15s ease, background 0.2s ease;
}

.hub-pin--pop {
	animation: hub-pin-pop 0.2s ease-out both;
}

.hub-pin:hover {
	transform: translate(-50%, -100%) scale(1.08);
}

/* ---------- 面板视觉 ---------- */

.hub-panel-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-right: 6px;
	border-radius: 10px;
	background: var(--brand);
	color: var(--bg);
	font-family: var(--sans);
	font-size: var(--fs-cap);
	font-weight: 600;
}

.hub-panel-moved {
	color: rgba(14, 14, 14, 0.45);
	font-size: var(--fs-cap);
}

.hub-panel-resolved {
	margin-top: var(--sp-xs);
}

.hub-panel-resolved summary {
	cursor: pointer;
	font-family: var(--sans);
	font-size: var(--fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(14, 14, 14, 0.55);
	margin-bottom: 6px;
}


/* ---------- 评审模式 ---------- */

.hub-pin {
	display: none; /* 浏览模式纯净看稿（Figma comment mode 式） */
}

.hub-viewer--review .hub-pin {
	display: block;
}

.hub-viewer--review [data-hub-count] {
	display: none; /* 评审中按钮只显「退出评审」 */
}

.hub-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: var(--sp-2xs);
}

.hub-panel-head .hub-panel-group-title {
	margin: 0;
}

.hub-panel-head-actions {
	display: flex;
	gap: 6px;
	align-items: center;
}





.hub-panel-login-hint {
	margin: 0 0 var(--sp-2xs);
	font-size: var(--fs-sm);
	color: rgba(14, 14, 14, 0.62);
}

.hub-panel-loginlink {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--brand);
	cursor: pointer;
	text-decoration: underline;
}

/* ---------- 面板视觉（质感规范层） ---------- */

.hub-panel {
	padding: var(--sp-sm) var(--sp-xs) var(--sp-sm) calc(var(--sp-xs) + 6px);
}

.hub-panel-resizer {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	cursor: ew-resize;
	touch-action: none;
}

.hub-panel-resizer:hover,
.hub-panel-resizer:active {
	background: rgba(14, 14, 14, 0.08);
}

.hub-panel-head {
	align-items: flex-start;
	padding-bottom: var(--sp-2xs);
	border-bottom: 1px solid var(--ink);
	margin-bottom: var(--sp-xs);
}

.hub-panel-eyebrow {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--fs-cap);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand);
}

.hub-panel-title {
	margin: 2px 0 0;
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.4;
}

.hub-panel-export,
.hub-panel-close {
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--grid);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-label);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.hub-panel-export {
	padding: 0 12px;
}

.hub-panel-close {
	width: 28px;
	padding: 0;
	font-size: 15px;
}

.hub-panel-export:hover,
.hub-panel-close:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.hub-panel-composer {
	border: 1px solid var(--grid);
	padding: 10px 12px;
	margin-bottom: var(--sp-sm);
	transition: border-color 0.15s ease;
}

.hub-panel-composer:focus-within {
	border-color: var(--ink);
}

.hub-panel-composer textarea {
	display: block;
	width: 100%;
	min-height: 56px;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--fs-sm);
	line-height: 1.6;
	resize: vertical;
	outline: none;
	background: transparent;
}

.hub-panel-composer-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.hub-panel-composer .hub-bubble-send {
	padding: 5px 16px;
	font-size: var(--fs-label);
}

.hub-panel-list {
	margin-bottom: var(--sp-sm);
}

.hub-panel-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 12px 6px;
	border: 0;
	border-bottom: 1px solid var(--grid);
	background: transparent;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
	margin-bottom: 0;
}

.hub-panel-item:hover {
	background: var(--light);
	border-color: var(--grid);
}

.hub-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	flex: none;
}

.hub-panel-item-quote {
	display: block;
	border-left: 2px solid var(--grid);
	padding-left: 8px;
	font-size: var(--fs-cap);
	color: rgba(14, 14, 14, 0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.hub-panel-item-foot {
	display: flex;
	gap: 12px;
	font-family: var(--sans);
	font-size: var(--fs-cap);
	color: rgba(14, 14, 14, 0.5);
}

.hub-panel-badge-resolved {
	color: var(--green);
}

.hub-panel-item-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.hub-panel-item-date {
	margin-left: auto;
	font-family: var(--sans);
	font-size: var(--fs-cap);
	color: rgba(14, 14, 14, 0.45);
}

.hub-panel-item-content {
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.hub-panel-item-target {
	font-size: var(--fs-cap);
	color: rgba(14, 14, 14, 0.5);
}


@media (prefers-reduced-motion: reduce) {
	.hub-viewer-stage {
		transition: none;
	}

	.hub-bubble,
	.hub-panel,
	.hub-auth,
	.hub-auth .hub-auth-card,
	.hub-pin,
	.hub-pin--pop {
		animation: none;
		transition: none;
	}

	.hub-bubble { opacity: 1; transform: none; }
	.hub-panel { transform: none; }
	.hub-auth { opacity: 1; }
	.hub-auth .hub-auth-card { transform: none; }
}

/* 移动端：标注选取降级（规格 §7），面板全宽 */
@media (max-width: 719px) {
	.hub-viewer--panel-open .hub-viewer-stage {
		margin-right: 0;
	}

	.hub-panel {
		width: 100%;
		border-left: 0;
	}
}


.hub-viewer[hidden]{display:none}
body.hub-static-viewer-open{overflow:hidden}
.hub-viewer{font-family:"Manrope","Noto Sans SC","PingFang SC",system-ui,sans-serif}
.hub-viewer-back{border:0;background:transparent;font:inherit;cursor:pointer}
.hub-viewer-heading small{overflow:hidden;color:rgba(14,14,14,.45);font-size:11px;text-overflow:ellipsis}