@charset "UTF-8";
/**
 * bbPress 帖子转发按钮 —— 样式
 * 设计原则：低存在感、和点赞按钮同一行同一视觉重量，不抢主题内容的戏。
 */

/* 站点主色（与「立即注册会员」按钮一致） */
:root {
	--yezhu-share-accent: #c0392b;
	--yezhu-share-accent-soft: #fff5f3;
	--yezhu-share-line: #e5e5e5;
	--yezhu-share-text: #666;
}

/* -------------------------------------------------------------------------
 * 1. 按钮本体：跟点赞按钮排进同一行
 * ---------------------------------------------------------------------- */

/* WP ULike 的外层容器在正文里默认占满一行，收成 inline-flex 才能与转发平排。 */
.bbp-topic-content .wpulike,
.bbp-reply-content .wpulike,
.bbp-topic-content .wp_ulike_btn_container,
.bbp-reply-content .wp_ulike_btn_container {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.yezhu-share-wrap {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 10px 0 0 10px;
}

.yezhu-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 5px 13px 5px 11px;
	border: 1px solid var(--yezhu-share-line);
	border-radius: 999px;
	background: #fff;
	color: var(--yezhu-share-text);
	font-size: 13px;
	font-family: inherit;
	line-height: 1.6;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.yezhu-share-btn:hover,
.yezhu-share-btn:focus-visible {
	color: var(--yezhu-share-accent);
	border-color: var(--yezhu-share-accent);
	background: var(--yezhu-share-accent-soft);
	outline: none;
}

.yezhu-share-btn:active {
	transform: translateY(1px);
}

.yezhu-share-ico {
	display: block;
	flex: 0 0 auto;
}

.yezhu-share-text {
	display: block;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 2. 弹出面板
 * 根节点挂在 <html> 上（不是 <body>），避免被本站 feng-custom 插件的
 * body.innerHTML 重写冲掉 —— 详见插件头注释。
 *
 * z-index 必须显式抬高：本站主题有一条贴底的固定条 #site-logged-bar
 * （「你好，xxx 登出」，高 50px，带自己的 z-index）。它不只是**盖住**面板底部，
 * 而是**把那一带的点击一起吃掉** —— 实测「点了折叠标题没反应」就是它在中间截胡。
 * 光靠坐标量测看不出来，必须做 elementFromPoint 真命中测试才发现。
 * ---------------------------------------------------------------------- */

#yezhu-share-root {
	display: none;
}

#yezhu-share-root.is-open {
	display: block;
}

.yezhu-share-mask {
	position: fixed;
	inset: 0;
	z-index: 999990;
	background: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	animation: yezhu-share-fade .18s ease-out;
}

.yezhu-share-sheet {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 999991;
	box-sizing: border-box;
	width: min(460px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	transform: translateX(-50%);
	padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	border-radius: 14px 14px 0 0;
	background: #fff;
	color: #222;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	box-shadow: 0 -6px 30px rgba(0, 0, 0, .18);
	animation: yezhu-share-up .22s cubic-bezier(.22, .7, .3, 1);
}

.yezhu-share-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
}

.yezhu-share-head-title {
	font-size: 15px;
	font-weight: 700;
	color: #222;
}

.yezhu-share-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #999;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.yezhu-share-close:hover {
	background: #f2f2f2;
	color: #333;
}

.yezhu-share-quote {
	margin: 0 0 14px;
	padding: 9px 12px;
	border-left: 3px solid var(--yezhu-share-accent);
	border-radius: 0 6px 6px 0;
	background: #fafafa;
	color: #555;
	font-size: 13px;
	line-height: 1.6;
	/* 标题最多两行，超出省略 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yezhu-share-wechat-hint {
	margin: 0 0 14px;
	padding: 9px 12px;
	border-radius: 6px;
	background: #eaf6ea;
	color: #2d7a2d;
	font-size: 13px;
}

.yezhu-share-wechat-hint b {
	color: #1e5c1e;
	letter-spacing: 1px;
}

/* -------------------------------------------------------------------------
 * 2.5 兜底复制区：自动复制失败时，靠系统原生长按选择还能救回来
 *
 * 位置在主按钮「下面」并常驻可见。两个理由：
 *   ① 放主按钮上方会把「复制链接 / 系统分享 / 微信扫码」挤出手机首屏（实测被截断）；
 *   ② 做成 <details> 折叠虽然省地方，却要多点一次、还平添一个「点了没展开」的
 *      故障点 —— 而它恰恰是复制失败时唯一走得通的退路，不能有任何门槛。
 *
 * 这块是真·兜底：Android WebView / 微信内置浏览器 里 navigator.clipboard
 * 经常静默失败，execCommand 也不一定灵，但「长按文字 → 点复制」是系统级能力，
 * 任何环境都支持。主题里对 * 设了 user-select:none 也会把它压死，
 * 所以下面显式把选择能力改回 text。
 * ---------------------------------------------------------------------- */

.yezhu-share-manual {
	margin: 12px 0 0;
	padding: 10px 11px 11px;
	border: 1px dashed var(--yezhu-share-line);
	border-radius: 8px;
	background: #fcfcfc;
}

.yezhu-share-copybox-label {
	display: block;
	margin: 0 0 6px;
	color: #888;
	font-size: 12px;
	line-height: 1.5;
}

.yezhu-share-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 9px 11px;
	border: 1px solid var(--yezhu-share-line);
	border-radius: 8px;
	background: #fff;
	color: #333;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.65;
	text-align: left;
	resize: none;
	overflow: auto;
	outline: none;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
	word-break: break-all;
	transition: border-color .15s ease, background-color .15s ease;
}

.yezhu-share-text:focus,
.yezhu-share-text:active {
	border-color: var(--yezhu-share-accent);
	background: #fff;
}

.yezhu-share-copybox-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 7px 0 0;
}

.yezhu-share-mini {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 3px 11px;
	border: 1px solid var(--yezhu-share-line);
	border-radius: 999px;
	background: #fff;
	color: var(--yezhu-share-accent);
	font-family: inherit;
	font-size: 12px;
	line-height: 1.7;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.yezhu-share-mini:hover,
.yezhu-share-mini:focus-visible {
	border-color: var(--yezhu-share-accent);
	background: var(--yezhu-share-accent-soft);
	outline: none;
}

.yezhu-share-copybox-tip {
	color: #999;
	font-size: 11px;
	white-space: nowrap;
}

/* 动作格子 */
.yezhu-share-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.yezhu-share-act {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 14px 4px;
	border: 1px solid var(--yezhu-share-line);
	border-radius: 10px;
	background: #fff;
	color: #444;
	font-size: 13px;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.yezhu-share-act:hover,
.yezhu-share-act:focus-visible {
	border-color: var(--yezhu-share-accent);
	background: var(--yezhu-share-accent-soft);
	color: var(--yezhu-share-accent);
	outline: none;
}

.yezhu-share-act[hidden] {
	display: none;
}

.yezhu-share-act svg {
	display: block;
}

.yezhu-share-act[aria-pressed="true"] {
	border-color: var(--yezhu-share-accent);
	background: var(--yezhu-share-accent-soft);
	color: var(--yezhu-share-accent);
}

/* 二维码 */
.yezhu-share-qrbox {
	margin: 14px 0 0;
	padding: 14px;
	border-radius: 10px;
	background: #fafafa;
	text-align: center;
}

.yezhu-share-qrbox[hidden] {
	display: none;
}

.yezhu-share-qr {
	display: inline-block;
	width: 190px;
	max-width: 60vw;
	padding: 8px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

.yezhu-share-qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.yezhu-share-qr-tip {
	margin: 10px 0 0;
	color: #888;
	font-size: 12px;
}

.yezhu-share-qrbox.is-loading .yezhu-share-qr {
	color: #aaa;
	font-size: 12px;
	line-height: 190px;
}

/* -------------------------------------------------------------------------
 * 3. 轻提示 toast
 * ---------------------------------------------------------------------- */

.yezhu-share-toast {
	position: fixed;
	left: 50%;
	bottom: 96px;
	z-index: 999999;
	box-sizing: border-box;
	max-width: 80vw;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .82);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translateX(-50%);
	animation: yezhu-share-fade .18s ease-out;
}

/* -------------------------------------------------------------------------
 * 4. 桌面端：改成居中卡片，底部圆角收齐
 * ---------------------------------------------------------------------- */

@media (min-width: 601px) {
	.yezhu-share-sheet {
		bottom: auto;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 14px;
		animation: yezhu-share-pop .2s ease-out;
	}

	.yezhu-share-toast {
		bottom: 60px;
	}
}

/* -------------------------------------------------------------------------
 * 5. 深色环境兜底（微信夜间模式 / App 深色主题）
 * ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.yezhu-share-btn {
		border-color: #3a3a3a;
		background: #1f1f1f;
		color: #bbb;
	}

	.yezhu-share-sheet {
		background: #1f1f1f;
		color: #e6e6e6;
		box-shadow: 0 -6px 30px rgba(0, 0, 0, .5);
	}

	.yezhu-share-head-title {
		color: #f0f0f0;
	}

	.yezhu-share-quote {
		background: #262626;
		color: #b5b5b5;
	}

	.yezhu-share-text {
		border-color: #3a3a3a;
		background: #262626;
		color: #ddd;
	}

	.yezhu-share-manual {
		border-color: #3a3a3a;
		background: #232323;
	}

	.yezhu-share-text:focus,
	.yezhu-share-text:active {
		background: #2e2e2e;
	}

	.yezhu-share-mini {
		border-color: #3a3a3a;
		background: #262626;
	}

	.yezhu-share-copybox-tip {
		color: #8a8a8a;
	}

	.yezhu-share-act {
		border-color: #3a3a3a;
		background: #262626;
		color: #ccc;
	}

	.yezhu-share-qrbox {
		background: #262626;
	}

	.yezhu-share-qr {
		background: #fff;
	}
}

/* -------------------------------------------------------------------------
 * 6. 动画
 * ---------------------------------------------------------------------- */

@keyframes yezhu-share-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes yezhu-share-up {
	from { transform: translate(-50%, 100%); }
	to   { transform: translate(-50%, 0); }
}

@keyframes yezhu-share-pop {
	from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.yezhu-share-mask,
	.yezhu-share-sheet,
	.yezhu-share-toast {
		animation: none;
	}
}