/*
 * Small "分享" (share) button rendered by Life_Hub_Share_Button::render().
 * Kept deliberately compact and low-contrast (an outline pill, not a solid
 * brand-color block) so it reads as a secondary action next to page titles
 * and back-links rather than competing with the primary call-to-action
 * buttons elsewhere on the page.
 */

.lhc-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	height: 32px;
	padding: 0 14px;
	border: 1px solid rgba(22, 135, 248, 0.32);
	border-radius: var(--lhc-brand-pill-radius, 999px);
	background: #fff;
	color: var(--lhc-brand-blue, #1687f8);
	font: 500 13px/1 Arial, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lhc-share-btn:hover,
.lhc-share-btn:focus-visible {
	background: var(--lhc-brand-blue, #1687f8);
	border-color: var(--lhc-brand-blue, #1687f8);
	color: #fff;
	outline: none;
}

.lhc-share-btn__icon {
	width: 14px;
	height: 14px;
	flex: none;
}

.lhc-share-btn__label {
	line-height: 1;
}

.lhc-share-toast {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--lhc-ink, #102033);
	color: #fff;
	font: 400 12px/1.4 Arial, sans-serif;
	white-space: nowrap;
	pointer-events: none;
	animation: lhc-share-toast-fade 2.2s ease forwards;
}

.lhc-share-toast::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--lhc-ink, #102033);
}

@keyframes lhc-share-toast-fade {
	0% { opacity: 0; transform: translate(-50%, 4px); }
	12% { opacity: 1; transform: translate(-50%, 0); }
	82% { opacity: 1; }
	100% { opacity: 0; }
}

/* Small screens: keep the button compact -- icon only, no label text. */
@media (max-width: 480px) {
	.lhc-share-btn {
		width: 32px;
		padding: 0;
		justify-content: center;
	}
	.lhc-share-btn__label {
		display: none;
	}
}