/**
 * ReadAI hub — Start 区域样式
 *
 * 断点与 Blocksy 保持一致（static/sass/frontend/1-helpers/functions.scss）：
 *   平板及以下：max-width 999.98px（lg: 1000px）
 *   移动端：    max-width 689.98px（md: 690px）
 */

.rhs-start {
	--rhs-search-h: 48px;

	/* 背景直接调用主题调色板色 6 —— 与作者页 hero-section 的背景
	   （pageTitleBackground 默认值）同源，站点换肤时自动跟随 */
	background: var(--theme-palette-color-6, #f2f5f7);

	/* 内边距为手动指定值（上 32 / 下 42）。视觉配平：上侧文字距顶 = 上内边距 + 标题字形上留
	   （约 10px），下侧锚点是搜索框实体边缘（间距 = 下内边距），故取 下 = 上 + 10 */
	padding: 32px 0 42px;
	border-bottom: 1px solid rgba(0, 0, 0, .04);
}

/* ---------- Start 标题 ---------- */
/* Apple 风格：28px 常规体（SF Pro 大字号规格）、主文字色、居中，与搜索框同列（600px）。
   移动端放不下时横向滚动 + 边缘渐隐（同快捷链接），滚动条隐藏 */
.rhs-start .rhs-start__heading {
	--rhs-fade: 24px;
	max-width: 600px;
	margin: 0 auto 16px;
	display: flex;
	justify-content: center;
	justify-content: safe center;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.5px;
	color: #424245;
	white-space: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rhs-fade), #000 calc(100% - var(--rhs-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--rhs-fade), #000 calc(100% - var(--rhs-fade)), transparent 100%);
}

.rhs-start .rhs-start__heading::-webkit-scrollbar {
	display: none;
}

/* ---------- 多引擎搜索 ---------- */

.rhs-start__search {
	display: flex;
	align-items: center;
	max-width: 600px;
	height: var(--rhs-search-h);
	margin: 0 auto;
	/* 左内边距 7px + 1px 边框 = 8px，与选择器的竖直间距一致 */
	padding: 0 7px;
	background: rgba(255, 255, 255, .9);
	border: 1px solid rgba(0, 0, 0, .05);
	border-radius: 12px;
	/* 阴影四周均衡、不向下偏移 */
	box-shadow: 0 0 2px rgba(0, 0, 0, .015), 0 0 10px rgba(0, 0, 0, .02);
}

/* 引擎下拉（自定义组件：触发按钮 + 弹出菜单，不用浏览器默认样式） */
.rhs-start__engine {
	position: relative;
	flex: none;
}

.rhs-start .rhs-start__engine-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 80px;
	height: 32px;
	padding: 0 8px 0 11px;
	border: 0;
	border-radius: 9px;
	background: #f2f2f5;
	font-size: 13px;
	font-weight: 600;
	color: #1d1d1f;
	cursor: pointer;
	transition: background .12s ease;
}

.rhs-start .rhs-start__engine-btn:hover,
.rhs-start__engine.is-open .rhs-start__engine-btn {
	background: #e9e9ee;
}

/* 明确去掉聚焦时的蓝色描边（含 Blocksy 全局 button:focus-visible 样式） */
.rhs-start .rhs-start__engine-btn:focus-visible {
	outline: none;
}

/* 名称区：宽度只保证显示 “Google”，长名（如 DuckDuckGo）省略号；
   line-height 需大于 1，否则 g/y 等字母的下延部分会被 overflow 裁掉 */
.rhs-start__engine-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	line-height: 1.4;
}

.rhs-start__engine-chev {
	flex: none;
	width: 10px;
	height: 10px;
	color: #6e6e73;
	transition: transform .15s ease;
}

.rhs-start__engine.is-open .rhs-start__engine-chev {
	transform: rotate(180deg);
}

.rhs-start__engine-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 132px;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 10px 28px rgba(0, 0, 0, .14);
}

.rhs-start__engine-menu[hidden] {
	display: none;
}

.rhs-start .rhs-start__engine-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 13px;
	color: #1d1d1f;
	white-space: nowrap;
	cursor: pointer;
}

.rhs-start .rhs-start__engine-option:hover,
.rhs-start .rhs-start__engine-option.is-active {
	background: #f2f2f5;
}

.rhs-start .rhs-start__engine-option[aria-selected="true"] {
	color: #0a84ff;
	font-weight: 600;
}

/* 选中项右侧的勾：data-URI SVG，不依赖系统字体，跨平台渲染一致 */
.rhs-start .rhs-start__engine-option[aria-selected="true"]::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 12 10' fill='none' stroke='%230a84ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 L4.4 8.4 L11 1.4'/%3E%3C/svg%3E");
	display: block;
}

.rhs-start .rhs-start__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 12px;
	border: 0;
	outline: none;
	background: transparent;
	/* 16px：低于该值 iOS 聚焦输入时会强制放大页面 */
	font-size: 16px;
	color: #1d1d1f;
}

.rhs-start .rhs-start__input::placeholder {
	color: #9a9aa2;
}

.rhs-start .rhs-start__input::-webkit-search-decoration,
.rhs-start .rhs-start__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.rhs-start .rhs-start__submit {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #86868b;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.rhs-start .rhs-start__submit:hover {
	background: #f2f2f5;
	color: #1d1d1f;
}

.rhs-start .rhs-start__submit svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* ---------- Mac 风格悬浮快捷栏（Dock） ---------- */

/* 给页脚留出 Dock 高度，避免滚动到底时遮挡页脚内容 */
body {
	padding-bottom: 84px;
}

/* 毛玻璃悬浮栏：固定于视口底部，仿 macOS Dock */
.rhs-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 12px;
	margin-inline: auto;
	width: fit-content;
	max-width: calc(100vw - 24px);
	z-index: 991;
	padding: 9px;
	/* 淡灰色磨砂玻璃：在白色页面上形成层次 */
	background: rgba(233, 236, 240, .88);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	/* 双色描边 + 多层复合阴影：深色发丝线定义边缘，白色内高光表现玻璃厚度，
	   接触阴影 + 两层环境阴影让 Dock 在任何背景（白底/浅色配图）上都能浮起 */
	border: 1px solid rgba(16, 20, 26, .08);
	border-radius: 22px;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .6),
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 2px 6px rgba(9, 14, 22, .07),
		0 12px 28px rgba(9, 14, 22, .16),
		0 24px 56px rgba(9, 14, 22, .09);
}

/* 图标横向排列；窄屏放不下时横向滚动，滚动条隐藏 */
.rhs-dock__scroll {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* App 图标（四宫格，展开“捷径”面板） */
.rhs-dock__app {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .85);
	color: #1d1d1f;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	transform-origin: bottom center;
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}

.rhs-dock__app-icon {
	width: 22px;
	height: 22px;
	display: block;
}

/* 与链接列表的细竖线分隔 */
.rhs-dock__divider {
	flex: none;
	width: 1px;
	height: 30px;
	background: rgba(0, 0, 0, .1);
	margin: 0 4px;
}

@media (max-width: 520px) {
	.rhs-dock__scroll {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.rhs-dock__scroll::-webkit-scrollbar {
		display: none;
	}
}

/* ---------- “捷径”面板（App 图标展开的两级导航） ---------- */

/* 显隐由 hidden 属性 + JS 控制；!important 防止主题样式覆盖 UA 的 hidden 规则 */
.rhs-shortcuts[hidden],
.rhs-shortcuts__view[hidden],
.rhs-shortcuts__page[hidden],
.rhs-shortcuts-backdrop[hidden] {
	display: none !important;
}

/* 轻遮罩：聚焦面板，点击可关闭 */
.rhs-shortcuts-backdrop {
	position: fixed;
	inset: 0;
	z-index: 990;
	background: rgba(0, 0, 0, .18);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility 0s linear .18s;
	pointer-events: none;
}

/* 面板打开期间锁定页面滚动，避免滑动穿透到主页。
   html 与 body 双保险：若主题在 html 上设置过 overflow，仅锁 body 会失效 */
html.rhs-dock-open,
body.rhs-dock-open {
	overflow: hidden;
}

body.rhs-dock-open .rhs-shortcuts-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity .18s ease;
	pointer-events: auto;
}

/* 页面居中的大窗口：高度约占屏幕 75%，内容超高时内部滚动 */
.rhs-shortcuts {
	position: fixed;
	inset: 0;
	z-index: 992;
	margin: auto;
	width: min(860px, calc(100vw - 48px));
	height: 75vh;
	display: flex;
	flex-direction: column;
	/* 阻止滚动手势穿透到主页 */
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.98);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	pointer-events: none;
}

body.rhs-dock-open .rhs-shortcuts {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: auto;
}

.rhs-shortcuts__view {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	/* 裁剪内部溢出，滚动交给内部滚动区 */
	overflow: hidden;
	padding: 18px 20px 20px;
	background: rgba(250, 251, 252, .92);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	backdrop-filter: blur(28px) saturate(180%);
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}

/* 切换一级/二级页面时的轻淡入 */
.rhs-shortcuts__view:not([hidden]) {
	animation: rhsViewIn .16s ease;
}

@keyframes rhsViewIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.rhs-shortcuts__head {
	flex: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	margin-bottom: 14px;
}

.rhs-shortcuts__title {
	font-size: 13px;
	font-weight: 600;
	color: #1d1d1f;
}

/* 右上角关闭按钮（两个层级页面都有，同时关闭一、二级） */
.rhs-shortcuts__close {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .05);
	color: #6e6e73;
	cursor: pointer;
}

.rhs-shortcuts__close svg {
	width: 10px;
	height: 10px;
	display: block;
}

/* 返回上级页面按钮（二级页面左上角） */
.rhs-shortcuts__back {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px 4px 2px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 13px;
	color: #0a84ff;
	cursor: pointer;
}

.rhs-shortcuts__back svg {
	width: 11px;
	height: 11px;
	display: block;
}

/* 分类 / 站点：块状网格，无悬停与点击动效 */
.rhs-shortcuts__grid {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
	gap: 14px 12px;
	align-content: start;
}

/* 二级分类页：纵向 flex，站点区成为可滚动子区 */
.rhs-shortcuts__page {
	flex: 1;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* 二级站点：宽屏一行 3 个（卡片式），数量多时纵向滚动（细滚动条） */
.rhs-shortcuts__sites {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	align-content: start;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, .18) transparent;
}

.rhs-shortcuts__sites::-webkit-scrollbar {
	width: 6px;
}

.rhs-shortcuts__sites::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .15);
	border-radius: 99px;
}

.rhs-shortcuts__cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

/* 二级站点：横向卡片（logo 左，标题 + 两行简介右），无悬停与点击动效 */
.rhs-shortcuts__site {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px;
	border: 1px solid rgba(0, 0, 0, .05);
	border-radius: 14px;
	background: rgba(255, 255, 255, .78);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.rhs-shortcuts__cat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: rgba(255, 255, 255, .95);
	border: 1px solid rgba(0, 0, 0, .05);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.rhs-shortcuts__site-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .95);
	border: 1px solid rgba(0, 0, 0, .05);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.rhs-shortcuts__cat-icon img,
.rhs-shortcuts__site-icon img {
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	object-fit: contain;
	display: block;
}

/* PNG 缺失时显示首字母兜底 */
.rhs-shortcuts__cat-icon::before,
.rhs-shortcuts__site-icon::before {
	content: attr(data-letter);
	display: none;
	font-size: 19px;
	font-weight: 600;
	color: #1d1d1f;
}

.rhs-shortcuts__cat-icon.no-icon::before,
.rhs-shortcuts__site-icon.no-icon::before {
	display: block;
}

.rhs-shortcuts__cat-name {
	font-size: 12px;
	line-height: 1.2;
	color: #1d1d1f;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.rhs-shortcuts__site-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rhs-shortcuts__site-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #1d1d1f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 简介：最多两行，不足两行也预留两行位置，保证所有块等高 */
.rhs-shortcuts__site-desc {
	font-size: 12px;
	line-height: 18px;
	color: #6e6e73;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 36px;
}

.rhs-dock__link {
	position: relative;
	flex: none;
	display: block;
	text-decoration: none;
}

.rhs-dock__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .85);
	border: 1px solid rgba(0, 0, 0, .04);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	transform-origin: bottom center;
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}

/* 仿 Mac：悬停放大跳起。
   仅限具备鼠标悬停能力的设备：触屏浏览器会把触摸滚动模拟成 hover，
   导致滑动页面时 Dock 图标误触发放大，故用 hover/pointer 媒体查询禁用 */
@media (hover: hover) and (pointer: fine) {
	.rhs-dock__link:hover .rhs-dock__tile {
		transform: translateY(-8px) scale(1.12);
		box-shadow: 0 12px 20px rgba(0, 0, 0, .18);
	}

	.rhs-dock__link:hover .rhs-dock__label {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	.rhs-dock__app:hover {
		transform: translateY(-8px) scale(1.12);
		box-shadow: 0 12px 20px rgba(0, 0, 0, .18);
	}

	.rhs-dock__app:hover .rhs-dock__label {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* 页面失焦期间（如点击链接新开标签后返回），挂起残留的悬停态；
   鼠标在页面内移动后由 JS 移除标记，悬停恢复正常判定 */
body.rhs-window-blurred .rhs-dock__link:hover .rhs-dock__tile {
	transform: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

body.rhs-window-blurred .rhs-dock__link:hover .rhs-dock__label {
	opacity: 0;
	transform: translateX(-50%) translateY(4px);
}

body.rhs-window-blurred .rhs-dock__app:hover {
	transform: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

body.rhs-window-blurred .rhs-dock__app:hover .rhs-dock__label {
	opacity: 0;
	transform: translateX(-50%) translateY(4px);
}

.rhs-dock__tile img {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	object-fit: contain;
	display: block;
}

/* PNG 缺失时显示首字母兜底（由 img onerror 添加 no-icon 类） */
.rhs-dock__tile::before {
	content: attr(data-letter);
	display: none;
	font-size: 18px;
	font-weight: 600;
	color: #1d1d1f;
}

.rhs-dock__tile.no-icon::before {
	display: block;
}

/* 悬停名称气泡（仿 macOS Dock 标签）：白底 + 次级黑文字 */
.rhs-dock__label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	transform: translateX(-50%) translateY(4px);
	padding: 5px 10px;
	border-radius: 8px;
	background: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
	color: #424245;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

/* ---------- 响应式（Blocksy 断点） ---------- */

/* 平板及以下（lg: 1000px） */
@media (max-width: 999.98px) {
	.rhs-start {
		padding: 34px 0 28px;
	}

	/* 平板：二级站点一行 2 个卡片 */
	.rhs-shortcuts__sites {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 移动端（md: 690px）：搜索框不撑满屏幕 */
@media (max-width: 689.98px) {
	.rhs-start {
		padding: 24px 0 36px;
		/* 搜索框移动端 50px（PC 为 48px） */
		--rhs-search-h: 50px;
	}

	/* 在容器边距基础上稍微收窄；想与文章卡片完全等宽时删除这条 margin-inline 即可 */
	.rhs-start__search {
		margin-inline: clamp(2px, 0.75vw, 5px);
	}

	.rhs-start .rhs-start__heading {
		/* 手机端标题略小一档（PC 为 28px） */
		font-size: 26px;
	}

	/* 手机端：分类一行最多 4 个、站点一行 1 个（卡片式） */
	.rhs-shortcuts__grid {
		grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	}

	.rhs-shortcuts__sites {
		grid-template-columns: 1fr;
	}

	/* 手机端“捷径”面板撑满全屏（不再用 60vh 居中窗） */
	.rhs-shortcuts {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
		border: none;
	}

	.rhs-shortcuts__view {
		border-radius: 0;
		border: none;
	}

	.rhs-shortcuts-backdrop {
		display: none;
	}
}