/**
 * BotCiu Lab — Gutenberg block styles & BotCiu content utility classes.
 * Loaded on the front-end AND in the editor so authors see identical output.
 * (Uses the same custom properties defined in main.css / editor.css.)
 */

/* -----------------------------------------------------------------
 * Code blocks (dark, rounded, scrollable) — no highlighter engine.
 * --------------------------------------------------------------- */
.wp-block-code,
.wp-block-preformatted,
pre.wp-block-code {
	background: var(--color-bg-dark, #0b1020);
	color: #e5e9f2;
	border-radius: var(--radius-md, 14px);
	padding: 20px 22px;
	overflow-x: auto;
	font-family: var(--font-mono, monospace);
	font-size: 0.92rem;
	line-height: 1.6;
	-webkit-overflow-scrolling: touch;
}

.wp-block-code code,
pre.wp-block-code code {
	font-family: var(--font-mono, monospace);
	background: transparent;
	color: inherit;
	padding: 0;
}

/* Inline code */
:not(pre) > code {
	font-family: var(--font-mono, monospace);
	font-size: 0.9em;
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--color-bg-muted, #eef3f8);
	color: #b02a6f;
}

/* Copy-button wrapper (added by main.js) */
.code-block {
	position: relative;
}

.code-block__copy {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 6px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	font-family: var(--font-sans, sans-serif);
	color: #cfd8e6;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	opacity: 0;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.code-block:hover .code-block__copy,
.code-block__copy:focus-visible {
	opacity: 1;
}

.code-block__copy:hover {
	background: rgba(255, 255, 255, 0.16);
}

.code-block__copy.is-copied {
	color: #7ee2b8;
	border-color: rgba(126, 226, 184, 0.4);
}

/* -----------------------------------------------------------------
 * Pullquote
 * --------------------------------------------------------------- */
.wp-block-pullquote {
	border: none;
	border-left: 4px solid var(--color-brand-secondary, #5b5cf0);
	padding: 8px 0 8px 24px;
	color: var(--color-brand-secondary, #5b5cf0);
	font-size: 1.4rem;
	font-weight: 600;
}

.wp-block-pullquote cite {
	color: var(--color-text-secondary, #667085);
	font-size: 0.9rem;
	font-weight: 500;
}

/* Buttons */
.wp-block-button__link {
	background: var(--color-brand-primary, #229ed9);
	border-radius: 10px;
	font-weight: 600;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--color-brand-primary, #229ed9);
	color: var(--color-brand-primary, #229ed9);
}

/* -----------------------------------------------------------------
 * BotCiu callouts
 * --------------------------------------------------------------- */
.botciu-callout {
	position: relative;
	padding: 20px 22px 20px 24px;
	border: 1px solid var(--color-border, #e5e7eb);
	border-left: 4px solid var(--color-brand-primary, #229ed9);
	border-radius: var(--radius-md, 14px);
	background: var(--color-bg-surface, #fff);
	margin-block: 1.5em;
}

.botciu-callout > strong:first-child {
	display: block;
	margin-bottom: 6px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-brand-primary, #229ed9);
}

.botciu-callout p:last-child {
	margin-bottom: 0;
}

.botciu-callout--hypothesis {
	border-left-color: var(--color-brand-secondary, #5b5cf0);
	background: var(--color-brand-soft, #eef0ff);
}

.botciu-callout--hypothesis > strong:first-child {
	color: var(--color-brand-secondary, #5b5cf0);
}

.botciu-callout--result {
	border-left-color: var(--color-success, #16a66a);
	background: rgba(22, 166, 106, 0.06);
}

.botciu-callout--result > strong:first-child {
	color: var(--color-success, #16a66a);
}

.botciu-callout--warning {
	border-left-color: var(--color-warning, #f59e0b);
	background: rgba(245, 158, 11, 0.07);
}

.botciu-callout--warning > strong:first-child {
	color: #b06f05;
}

.botciu-callout--failed {
	border-left-color: var(--color-danger, #e84a5f);
	background: rgba(232, 74, 95, 0.06);
}

.botciu-callout--failed > strong:first-child {
	color: var(--color-danger, #e84a5f);
}

/* -----------------------------------------------------------------
 * BotCiu metrics
 * --------------------------------------------------------------- */
.botciu-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-block: 1.5em;
	padding: 0;
	list-style: none;
}

.botciu-metric {
	padding: 18px 20px;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 14px);
	background: var(--color-bg-surface, #fff);
}

.botciu-metric strong,
.botciu-metric .botciu-metric__value {
	display: block;
	font-family: var(--font-mono, monospace);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-text-primary, #111827);
}

.botciu-metric span,
.botciu-metric .botciu-metric__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-secondary, #667085);
}

/* -----------------------------------------------------------------
 * BotCiu terminal & system status
 * --------------------------------------------------------------- */
.botciu-terminal {
	background: var(--color-bg-dark, #0b1020);
	color: #e5e9f2;
	border-radius: var(--radius-md, 14px);
	padding: 44px 20px 20px;
	position: relative;
	font-family: var(--font-mono, monospace);
	font-size: 0.9rem;
	line-height: 1.7;
	overflow-x: auto;
	margin-block: 1.5em;
}

.botciu-terminal::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 20px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff5f56;
	box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
}

.botciu-system-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(22, 166, 106, 0.12);
	color: var(--color-success, #16a66a);
	font-family: var(--font-mono, monospace);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.botciu-system-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/* -----------------------------------------------------------------
 * BotCiu flow (in-article)
 * --------------------------------------------------------------- */
.botciu-flow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-block: 1.5em;
	padding: 0;
	list-style: none;
}

.botciu-flow-step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 999px;
	background: var(--color-bg-surface, #fff);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-text-primary, #111827);
}

.botciu-flow-step:not(:last-child)::after {
	content: "→";
	margin-left: 4px;
	color: var(--color-text-muted, #98a2b3);
}