/**
 * VisualBlogger - Copyable code snippet block styling.
 */
.vb-code-snippet {
	position: relative;
	margin: 1.5rem 0;
}

.vb-code-snippet pre.wp-block-code,
.vb-code-snippet > pre {
	margin: 0;
	background: #1e1e2e;
	color: #e6e6e6;
	padding: 3rem 1.25rem 1.25rem;
	border-radius: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 14px;
	line-height: 1.6;
	tab-size: 4;
	white-space: pre;
}

.vb-code-snippet pre.wp-block-code code {
	background: transparent;
	color: inherit;
	padding: 0;
	font-family: inherit;
}

/* Tool buttons (top-right): Wrap + Copy. */
.vb-code-tools {
	position: absolute;
	top: 8px;
	right: 10px;
	display: flex;
	gap: 6px;
	z-index: 2;
}

.vb-copy-btn,
.vb-wrap-btn {
	padding: 5px 12px;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #e6e6e6;
	background: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vb-copy-btn:hover,
.vb-copy-btn:focus,
.vb-wrap-btn:hover,
.vb-wrap-btn:focus {
	background: rgba( 255, 255, 255, 0.22 );
	outline: none;
}

.vb-copy-btn.is-copied {
	color: #fff;
	background: #2ea043;
	border-color: #2ea043;
}

.vb-wrap-btn.is-on {
	color: #fff;
	background: #58a6ff;
	border-color: #58a6ff;
}

/* Word-wrap toggle. */
.vb-code-snippet pre.wp-block-code.vb-wrap {
	white-space: pre-wrap;
	word-break: break-word;
}

/* Collapse long snippets. */
.vb-collapsible.is-collapsed pre.wp-block-code {
	max-height: 480px;
	overflow: hidden;
}
.vb-collapsible.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px;
	height: 70px;
	background: linear-gradient( to bottom, rgba( 30, 30, 46, 0 ), #1e1e2e );
	pointer-events: none;
	border-radius: 0 0 8px 8px;
}
.vb-expand-btn {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #c8c8d8;
	background: #2a2a3c;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}
.vb-expand-btn:hover {
	color: #fff;
}

/* Language badge (top-left). */
.vb-code-lang {
	position: absolute;
	top: 10px;
	left: 12px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #c8c8d8;
	background: rgba( 255, 255, 255, 0.08 );
	border-radius: 4px;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	pointer-events: none;
}

/* Prism line numbers integration with the dark theme. */
.vb-code-snippet pre.wp-block-code.line-numbers {
	padding-left: 3.8em;
}

.vb-code-snippet pre.wp-block-code .line-numbers-rows {
	border-right: 1px solid rgba( 255, 255, 255, 0.15 );
}

.vb-code-snippet pre.wp-block-code .line-numbers-rows > span:before {
	color: #6b6b80;
}

/* Inline code (not inside a code block). */
:not( pre ) > code {
	background: rgba( 135, 131, 120, 0.15 );
	color: #c7254e;
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.88em;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	word-break: break-word;
}

/* Rendered Mermaid diagrams. */
.vb-mermaid {
	margin: 1.5rem 0;
	text-align: center;
	overflow-x: auto;
}

.vb-mermaid svg {
	max-width: 100%;
	height: auto;
}