@charset "UTF-8";
/* =========================================================================
   右侧浮窗（右侧悬浮工具条）· 参考 7b2.com 最右侧那条竖向工具条
   默认只显示图标；鼠标悬停（或键盘聚焦）时向左滑出「图标 + 文字」。
   由 inc/dock.php 渲染，后台在「EbookAI → 页面管理 → 右侧浮窗」配置。
   CSS 变量均由 PHP 内联写在 .es-dock 的 style 上。
   ========================================================================= */

.es-dock {
	position: fixed;
	z-index: 9970;            /* 低于目录 9999 / 公告 9999，高于正文与顶栏 600 */
	right: var(--es-dock-right, 14px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	font-size: 13px;
	line-height: 1;
}

/* ⚠️ 居中档位必须配 translateY(-50%)：PHP 里只给了 top:50%，
   少了这半句浮窗会从中线往下长，项一多最后几项就掉出视口。
   注意不能把「弹层」放进 .es-dock —— transform 会让它成为 fixed 后代的包含块。 */
.es-dock--center { transform: translateY(-50%); }

/* 列表：白色圆角卡片，内部单项紧凑竖排 */
.es-dock__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--es-dock-bg, #fff);
	border: 1px solid var(--es-dock-border, #e2e8f0);
	border-radius: var(--es-dock-radius, 12px);
	box-shadow: 0 8px 26px rgba(15, 23, 42, .12);
}

.es-dock__item { position: relative; }

/* 单项：方形图标按钮 */
.es-dock__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--es-dock-size, 44px);
	height: var(--es-dock-size, 44px);
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--es-dock-item-bg, transparent);
	color: var(--es-dock-item-fg, var(--es-dock-fg, #475569));
	border-radius: calc(var(--es-dock-radius, 12px) - 4px);
	cursor: pointer;
	font: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .16s, color .16s, border-radius .16s;
}

.es-dock__icon { display: inline-flex; align-items: center; justify-content: center; }
.es-dock__icon svg { display: block; }
.es-dock__img { display: block; border-radius: 4px; }

/* 文字：绝对定位在图标左侧，默认隐藏，悬停时向左滑出，与图标拼成一颗胶囊 */
.es-dock__text {
	position: absolute;
	right: calc(100% - 2px);
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 14px 0 15px;
	background: var(--es-dock-hover-bg, #4338ca);
	color: var(--es-dock-hover-fg, #fff);
	border-radius: calc(var(--es-dock-radius, 12px) - 4px) 0 0 calc(var(--es-dock-radius, 12px) - 4px);
	white-space: nowrap;
	font-size: 13px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.es-dock__item:hover .es-dock__text,
.es-dock__item:focus-within .es-dock__text { opacity: 1; visibility: visible; transform: translateX(0); }

.es-dock__item:hover .es-dock__link,
.es-dock__item:focus-within .es-dock__link {
	background: var(--es-dock-hover-bg, #4338ca);
	color: var(--es-dock-hover-fg, #fff);
	border-radius: calc(var(--es-dock-radius, 12px) - 4px) 0 0 calc(var(--es-dock-radius, 12px) - 4px);
}

/* 角标 */
.es-dock__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 15px;
	padding: 0 4px;
	height: 15px;
	line-height: 15px;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--es-dock-badge, #2563eb);
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--es-dock-bg, #fff);
	pointer-events: none;
}

/* 「返回顶部」项：滚动一定距离后才出现（脚本加 .is-shown），避免顶部时多余 */
.es-dock__item--top { display: none; }
.es-dock__item--top.is-shown { display: block; }

/* ---------- 顶部「隐藏 / 展开」小标签 ---------- */
.es-dock__toggler {
	order: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--es-dock-size, 44px);
	margin: 0 0 6px;
	padding: 12px 0;
	border: 0;
	border-radius: calc(var(--es-dock-radius, 12px) - 2px);
	background: var(--es-dock-hover-bg, #4338ca);
	color: var(--es-dock-hover-fg, #fff);
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
	transition: filter .16s;
}
.es-dock__toggler:hover { filter: brightness(1.08); }
.es-dock__toggler-text {
	writing-mode: vertical-rl;
	text-orientation: upright;
	user-select: none;
	letter-spacing: .12em;
}
.es-dock.is-collapsed .es-dock__list { display: none; }

/* ---------- 「始终显示图标 + 文字」模式 ---------- */
.es-dock--label-always .es-dock__link {
	width: auto;
	min-width: var(--es-dock-size, 44px);
	justify-content: flex-start;
	gap: 8px;
	padding: 0 14px 0 12px;
}
.es-dock--label-always .es-dock__text {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	height: auto;
	padding: 0;
	background: transparent;
	color: inherit;
	border-radius: 0;
	pointer-events: auto;
}

/* ---------- 弹层（二维码 / 自定义内容 / 语言切换） ---------- */
.es-dock__modal {
	position: fixed;
	inset: 0;
	z-index: 100005;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
/* ⚠️ [hidden] 必须显式重声明：上面的 display:flex 会盖掉 UA 的 [hidden]{display:none} */
.es-dock__modal[hidden] { display: none; }
.es-dock__mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.es-dock__dialog {
	position: relative;
	z-index: 1;
	max-width: min(92vw, 400px);
	max-height: 86vh;
	overflow: auto;
	padding: 24px 26px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.es-dock__close {
	position: absolute;
	top: 4px;
	right: 6px;
	padding: 4px 8px;
	border: 0;
	background: none;
	color: #94a3b8;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.es-dock__close:hover { color: #475569; }
.es-dock__qr { text-align: center; }
.es-dock__qr img { display: block; width: 200px; height: 200px; max-width: 100%; margin: 0 auto; object-fit: contain; }
.es-dock__qr-cap { margin: 10px 0 0; font-size: 13px; color: #475569; }
.es-dock__content { font-size: 14px; line-height: 1.75; color: #334155; }
.es-dock__content p { margin: 0 0 10px; }
.es-dock__content img { max-width: 100%; height: auto; border-radius: 8px; }
.es-dock__content a { color: #2563eb; }
.es-dock__lang { display: flex; flex-direction: column; gap: 8px; }
.es-dock__lang-label { font-size: 12.5px; font-weight: 600; color: #64748b; }
.es-dock__lang-select {
	width: 100%;
	min-width: 180px;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	color: #334155;
	font: inherit;
	font-size: 14px;
}
.es-dock__lang-select:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67, 56, 202, .16); }

/* 弹层打开时锁滚动 */
html.es-dock-lock, html.es-dock-lock body { overflow: hidden; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
	/* 默认隐藏：移动端已有底部导航栏，两条并存会挤占屏幕 */
	.es-dock:not(.es-dock--mobile) { display: none; }
	.es-dock--mobile { right: 10px; }
	/* 窄屏改为左侧滑出也无妨，但限制最长宽度避免盖住正文 */
	.es-dock--mobile .es-dock__text { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
	/* iOS 聚焦 <select> 时会自动放大页面，字号提到 16px 规避 */
	.es-dock__lang-select { font-size: 16px; }
}