/**
 * sc-icg-snt copy-button helper
 *
 * 配色：使用 Blocksy 主題的 --theme-palette-color-2（秒站企業藍主色 #0A6EB1）+ color-mix() 透明度。
 *       v1.0.8 從 color-1（#3E3A39 棕灰）修正為 color-2（#0A6EB1 企業藍）— 之前用錯變數槽。
 *       按鈕配色為「淺藍底 + 主藍字」、Charles 2026-05-10 指示。
 *
 * 支援三種 markup：
 *   .sc-copy-block + .sc-copy-source + .sc-copy-btn   （shortcode [sc_copy] 產出）
 *   .sn-copybox    + .sn-copybox-content + .sn-copybox-btn   （Charles 既有 markup）
 *   .sn-prompt-box + .sn-prompt-content + .sn-prompt-copy-btn （v1.0.4 加、舊版相容）
 */

/* === 共用變數（用 Blocksy 主色 + 透明度版） === */
:root {
	--snt-copy-bg:        color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 5%, transparent);
	--snt-copy-border:    color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 12%, transparent);
	--snt-copy-btn-bg:    color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 12%, transparent);
	--snt-copy-btn-bd:    color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 25%, transparent);
	--snt-copy-btn-hover: color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 22%, transparent);
	--snt-copy-btn-bd-hover: color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 40%, transparent);
	--snt-copy-btn-fg:    var(--theme-palette-color-2, #0A6EB1);
	--snt-copy-accent:    var(--theme-palette-color-2, #0A6EB1);
	--snt-copy-radius:    8px;
}

/* === 容器 === */
/* 用 !important 強制覆蓋既有 doc 內嵌 <style> 的褐色／米色（Vibe 畫布範本 4404-4407 等） */
.sc-copy-block,
.sn-copybox {
	position: relative !important;
	margin: 1.5em 0 !important;
	background: var(--snt-copy-bg) !important;
	border: 1px solid var(--snt-copy-border) !important;
	border-radius: var(--snt-copy-radius) !important;
	overflow: hidden !important;
}

/* sc-copy-block 沒有 header、padding 直接給容器 */
.sc-copy-block {
	padding: 1em 1.2em;
}

/* === sn-copybox header（label + button 同列） === */
.sn-copybox-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.8em !important;
	padding: 0.7em 1em !important;
	background: color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 8%, transparent) !important;
	border-bottom: 1px solid var(--snt-copy-border) !important;
}

.sn-copybox-label {
	font-size: 0.88em !important;
	font-weight: 600 !important;
	color: var(--snt-copy-accent) !important;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace !important;
}

.sn-copybox-content {
	padding: 1em 1.2em !important;
}

/* === 內層 pre：不被 .sc-docs-article-body pre 蓋，也適用通用 reset === */
.sc-copy-block .sc-copy-source,
.sn-copybox .sn-copybox-content,
.sc-docs-article-body .sc-copy-block .sc-copy-source,
.sc-docs-article-body .sn-copybox .sn-copybox-content {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	color: inherit;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.9em;
	line-height: 1.65;
	overflow-x: auto;
	box-shadow: none !important;
}

/* sc-copy-source 需留按鈕空間（按鈕浮在右上）；sn-copybox-content 不需要（按鈕在 header） */
.sc-copy-block .sc-copy-source,
.sc-docs-article-body .sc-copy-block .sc-copy-source {
	padding: 0 !important;
	padding-right: 5em !important;
}

/* code 內層也要重置（避免外部 .sc-docs-article-body code 規則蓋上去） */
.sc-copy-block .sc-copy-source code,
.sn-copybox .sn-copybox-content code,
.sc-docs-article-body .sc-copy-block .sc-copy-source code,
.sc-docs-article-body .sn-copybox .sn-copybox-content code {
	background: transparent !important;
	padding: 0 !important;
	font-size: inherit !important;
	border-radius: 0 !important;
	color: inherit;
}

/* === lang 標籤（shortcode lang="bash" 用） === */
.sc-copy-block .sc-copy-lang {
	display: inline-block;
	background: color-mix(in srgb, var(--theme-palette-color-2, #0A6EB1) 12%, transparent);
	color: var(--snt-copy-accent);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75em;
	font-family: ui-monospace, monospace;
	font-weight: 600;
	margin-bottom: 0.5em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* === 按鈕（sc-copy-block 浮右上、sn-copybox 在 header 內 inline） === */
.sc-copy-block .sc-copy-btn {
	position: absolute;
	top: 0.6em;
	right: 0.6em;
}

.sn-copybox .sn-copybox-btn {
	position: static;
	flex-shrink: 0;
}

.sc-copy-block .sc-copy-btn,
.sn-copybox .sn-copybox-btn {
	background: var(--snt-copy-btn-bg) !important;
	color: var(--snt-copy-btn-fg) !important;
	border: 1px solid var(--snt-copy-btn-bd) !important;
	border-radius: 6px !important;
	padding: 0.35em 0.85em !important;
	font-size: 0.82em !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
}

.sc-copy-block .sc-copy-btn:hover,
.sn-copybox .sn-copybox-btn:hover {
	background: var(--snt-copy-btn-hover) !important;
	border-color: var(--snt-copy-btn-bd-hover) !important;
	color: var(--snt-copy-btn-fg) !important;
}

.sc-copy-block .sc-copy-btn:active,
.sn-copybox .sn-copybox-btn:active {
	transform: translateY(1px);
}

/* copied state：實心主色 + 白字（明確視覺反饋、仍用主色不另生顏色） */
/* 兼容 4 種 class 名稱：.copied (4 篇範本內嵌 JS)、--copied、is-copied（外掛 JS）*/
.sc-copy-block .sc-copy-btn.sc-copy-btn--copied,
.sn-copybox .sn-copybox-btn.sn-copybox-btn--copied,
.sc-copy-block .sc-copy-btn.is-copied,
.sn-copybox .sn-copybox-btn.is-copied,
.sn-copybox .sn-copybox-btn.copied {
	background: var(--snt-copy-accent) !important;
	color: #ffffff !important;
	border-color: var(--snt-copy-accent) !important;
}

/* === .sc-source-note：外部來源標註（v1.0.9 緊跟前段、後段保留間距） === */
.sc-source-note {
	font-size: 0.75em !important;
	color: #9ca3af !important;
	background: rgba(0, 0, 0, 0.025) !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 0.35em 0.6em !important;
	margin: 0 0 1.5em 0 !important;
	line-height: 1.5 !important;
}

/* 視覺上把 sc-source-note 黏到前一段：取消前段的 bottom margin（保留 4px 微距） */
*:has(+ .sc-source-note):not(.sc-source-note) {
	margin-bottom: 0.25em !important;
}

.sc-source-note a {
	color: #6b7280 !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(107, 114, 128, 0.4) !important;
	text-underline-offset: 0.18em !important;
}

.sc-source-note a:hover {
	color: var(--theme-palette-color-2, #0A6EB1) !important;
	text-decoration-color: currentColor !important;
}

/* === 手機版 === */
@media (max-width: 640px) {
	.sc-copy-block .sc-copy-source {
		padding-right: 0 !important;
		font-size: 0.85em;
	}
	.sc-copy-block .sc-copy-btn {
		position: static;
		display: block;
		width: 100%;
		margin-top: 0.7em;
	}
	.sn-copybox-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.sn-copybox .sn-copybox-btn {
		width: 100%;
		margin-top: 0.4em;
	}
}