/* ============================================================
   文章正文代码块增强（highlight.js）
   ------------------------------------------------------------
   1) 历史文章里贴死的 dp.SyntaxHighlighter 结构（View/Print 按钮
      调用不存在的 dp.sh，点了没反应）会被 js/code-highlight.js
      重建成下面的卡片结构；
   2) 普通 <pre> 也走同一套：语言标签 + 复制 / 换行 / 全屏 + 行号；
   3) 配色沿用博客的浅色卡片风格（#e4e7f0 描边、#e67e22 强调色）。
   ============================================================ */

.ltt-code {
	--ltt-lh: 21px;                        /* 行号与正文必须同一个行高，否则错位 */
	position: relative;
	margin: 20px 0;
	border: 1px solid #e4e7f0;
	border-radius: 10px;
	background: #f8f9fc;
	box-shadow: 0 2px 10px rgba(28, 33, 56, .05);
	overflow: hidden;
	color: #24292f;
	font-size: 13px;
	line-height: var(--ltt-lh);
}

/* ---------- 顶部工具条 ---------- */
.ltt-code-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px 7px 12px;
	background: #eef1f8;
	border-bottom: 1px solid #e4e7f0;
}
.ltt-code-lang {
	flex: 0 0 auto;
	padding: 1px 8px;
	border: 1px solid #dfe3ee;
	border-radius: 999px;
	background: #fff;
	color: #5a6273;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .3px;
}
.ltt-code-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}
.ltt-code-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #6b7285;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.6;
	cursor: pointer;
	transition: background .18s, color .18s;
}
.ltt-code-btn:hover {
	background: #dfe6f4;
	color: #23262f;
}
.ltt-code-btn:focus-visible {
	outline: 2px solid #e67e22;
	outline-offset: 1px;
}
.ltt-code-btn.is-on {                       /* 「换行 / 全屏」处于开启状态 */
	background: #fff4e8;
	color: #d2691e;
}
.ltt-code-btn.is-done {                     /* 复制成功的短暂反馈 */
	background: #e6f7f4;
	color: #0aa39a;
}

/* ---------- 代码区：左侧行号 + 右侧代码 ---------- */
.ltt-code-body {
	display: flex;
	align-items: stretch;
	max-height: 460px;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/*
	 * 注意：Chrome 一旦设置了标准的 scrollbar-width / scrollbar-color，
	 * 就会忽略下面的 ::-webkit-scrollbar（悬停变色、手型都会失效）。
	 * 所以标准属性只放在 Firefox 用的分支里，见文件末尾。
	 */
}

/* Chrome / Edge / Safari：细滚动条 + 手型 + 悬停高亮 */
@supports selector(::-webkit-scrollbar) {
	.ltt-code-body::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		cursor: pointer;                                    /* 移到滚动条上显示手型 */
	}
	.ltt-code-body::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: rgba(140, 148, 170, .55);
		cursor: pointer;
	}
	/* 移入：灰蓝 → 主题橙，视觉区分明显 */
	.ltt-code-body::-webkit-scrollbar-thumb:hover { background: #e67e22; }
	.ltt-code-body::-webkit-scrollbar-thumb:active { background: #c9620f; }
	.ltt-code-body::-webkit-scrollbar-track {
		background: transparent;
		cursor: pointer;
	}
	.ltt-code-body::-webkit-scrollbar-track:hover { background: rgba(140, 148, 170, .12); }
	.ltt-code-body::-webkit-scrollbar-corner { background: transparent; }
}

/* Firefox：不支持自定义滚动条样式，只保证细 */
@supports not selector(::-webkit-scrollbar) {
	.ltt-code-body {
		scrollbar-width: thin;
		scrollbar-color: rgba(140, 148, 170, .55) transparent;
	}
}
.ltt-code-lines {
	position: sticky;                       /* 横向滚动时行号不跟着跑 */
	left: 0;
	z-index: 2;
	flex: 0 0 auto;
	padding: 14px 10px 14px 14px;
	border-right: 1px solid #e4e7f0;
	background: #f1f4fa;
	color: #aab1c4;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	line-height: var(--ltt-lh);
	text-align: right;
	user-select: none;
	-webkit-user-select: none;
}
.ltt-code-lines span { display: block; }
.ltt-code pre.ltt-code-pre {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 14px 16px;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	line-height: var(--ltt-lh);
	white-space: pre;
	tab-size: 4;
	overflow: visible;
}
.ltt-code pre.ltt-code-pre:focus { outline: none; }
.ltt-code-pre code {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	white-space: inherit;
	tab-size: inherit;
}

/* ---------- 自动换行（开启后隐藏行号，避免折行错位） ---------- */
.ltt-code.is-wrap .ltt-code-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ltt-code.is-wrap .ltt-code-lines { display: none; }

/* ---------- 长代码折叠 ---------- */
.ltt-code.is-collapsed .ltt-code-body { max-height: 340px; overflow: hidden; }
.ltt-code-more {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 30px 0 10px;
	border: 0;
	background: linear-gradient(rgba(248, 249, 252, 0), #f8f9fc 62%);
	color: #2b8cff;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}
.ltt-code-more:hover { color: #e67e22; }
.ltt-code .ltt-code-more { display: none; }
.ltt-code.is-collapsed .ltt-code-more { display: block; }

/* ---------- 全屏 ---------- */
.ltt-code.is-full {
	position: fixed;
	inset: 18px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(20, 26, 48, .35);
}
.ltt-code.is-full .ltt-code-body {
	flex: 1 1 auto;
	max-height: none;
	overflow: auto;
}
.ltt-code.is-full.is-collapsed .ltt-code-body { max-height: none; }
.ltt-code.is-full .ltt-code-more { display: none !important; }
body.ltt-code-full { overflow: hidden; }

/* ---------- highlight.js 配色（浅色，贴合博客正文） ---------- */
.ltt-code .hljs-comment,
.ltt-code .hljs-quote { color: #6a737d; font-style: italic; }
.ltt-code .hljs-keyword,
.ltt-code .hljs-selector-tag,
.ltt-code .hljs-literal,
.ltt-code .hljs-doctag { color: #cf222e; }
.ltt-code .hljs-string,
.ltt-code .hljs-regexp,
.ltt-code .hljs-addition,
.ltt-code .hljs-meta .hljs-string { color: #0a3069; }
.ltt-code .hljs-number,
.ltt-code .hljs-symbol,
.ltt-code .hljs-bullet,
.ltt-code .hljs-link { color: #0550ae; }
.ltt-code .hljs-title,
.ltt-code .hljs-title.function_,
.ltt-code .hljs-section,
.ltt-code .hljs-selector-id { color: #8250df; }
.ltt-code .hljs-built_in,
.ltt-code .hljs-type,
.ltt-code .hljs-class .hljs-title { color: #953800; }
.ltt-code .hljs-attr,
.ltt-code .hljs-attribute,
.ltt-code .hljs-variable,
.ltt-code .hljs-template-variable,
.ltt-code .hljs-property { color: #0550ae; }
.ltt-code .hljs-tag,
.ltt-code .hljs-name,
.ltt-code .hljs-selector-class,
.ltt-code .hljs-selector-attr,
.ltt-code .hljs-selector-pseudo { color: #116329; }
.ltt-code .hljs-meta { color: #8250df; }
.ltt-code .hljs-params { color: #24292f; }
.ltt-code .hljs-emphasis { font-style: italic; }
.ltt-code .hljs-strong { font-weight: 700; }

/* ---------- 手机端收紧留白 ---------- */
@media (max-width: 600px) {
	.ltt-code { border-radius: 8px; }
	.ltt-code-bar { padding: 6px 8px 6px 10px; }
	.ltt-code-lines { padding: 12px 8px 12px 10px; font-size: 12px; }
	.ltt-code pre.ltt-code-pre { padding: 12px 12px; font-size: 12.5px; }
	.ltt-code-btn { padding: 3px 6px; }
	.ltt-code.is-full { inset: 0; border-radius: 0; }
}