/* Agent install widget (template-parts/agent-install.php, assets/js/agent-install.js). */

.agent-install {
	text-align: left;
	max-width: 880px;
	margin: var(--space-md) auto 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 20px;
	box-shadow: var(--shadow-sm);
	padding: 4px 20px 14px;
}

/* Tab row: underline tabs; scrolls sideways when the clients don't fit. */
.agent-install-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 12px;
}
.agent-install-tabs {
	display: flex;
	gap: 26px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.agent-install-tabs::-webkit-scrollbar { display: none; }
.agent-install-tabs.is-clipped {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.agent-install-tab,
.agent-install-guide {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	padding: 10px 0;
}
.agent-install-tab {
	color: var(--ink-soft);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.agent-install-tab:hover { color: var(--ink); }
.agent-install-tab[aria-selected="true"] {
	color: var(--navy-900);
	border-bottom-color: var(--navy-900);
}
.agent-install-tab svg,
.agent-install-guide svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.agent-install-guide {
	color: var(--navy-900);
	text-decoration: none;
	font-size: 15px;
}
.agent-install-guide svg { color: var(--ink-soft); }
.agent-install-guide:hover span { text-decoration: underline; }

/* Claude tab: the one-click install sits inside the dark box. The link takes
   the first row; Add to Claude (solid, the main action) leads the row under
   it, Show key + Copy sit on the right. */
.agent-install-code--oneclick { flex-wrap: wrap; row-gap: 10px; }
.agent-install-code--oneclick .agent-install-value { flex-basis: 100%; }
.agent-install-code--oneclick .agent-install-reveal { margin-left: auto; }
/* Two classes so this beats .agent-install-btn (pale fill), declared later. */
.agent-install-btn.agent-install-oneclick,
.agent-install-btn.agent-install-oneclick:visited {
	color: var(--navy-900);
	background: var(--teal-400);
}
.agent-install-btn.agent-install-oneclick:hover { color: var(--navy-900); background: #7BEAD5; }

/* Dark command block. */
.agent-install-code {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--navy-900);
	border-radius: 14px;
	padding: 10px 10px 10px 18px;
}
.agent-install-value {
	flex: 1;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 15px;
	line-height: 1.6;
	color: #E6EDF7;
	background: transparent;
	padding: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.agent-install-code--cmd .agent-install-value {
	position: relative;
	padding-left: 24px;
}
.agent-install-code--cmd .agent-install-value::before {
	content: "$";
	position: absolute;
	left: 0;
	color: var(--teal-400);
}
.agent-install[data-os="win"] .agent-install-code--cmd .agent-install-value { padding-left: 40px; }
.agent-install[data-os="win"] .agent-install-code--cmd .agent-install-value::before { content: "PS>"; }

/* Install scripts are long: the command takes the first row, the OS switch
   and Copy sit under it. */
.agent-install-code--cmd { flex-wrap: wrap; row-gap: 8px; }
.agent-install-code--cmd .agent-install-value { flex-basis: 100%; font-size: 14px; }
.agent-install-os {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
}
.agent-install-os-btn {
	padding: 4px 10px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--navy-300);
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.agent-install-os-btn:hover { color: #E6EDF7; }
.agent-install-os-btn[aria-pressed="true"] { color: #E6EDF7; background: rgba(255, 255, 255, 0.12); }
.agent-install-code--cmd .agent-install-copy { margin-left: auto; }

.agent-install-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding: 9px 20px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--teal-400);
	background: rgba(79, 224, 196, 0.12);
	border: 0;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.agent-install-btn:hover { background: rgba(79, 224, 196, 0.22); }

.agent-install-tab:focus-visible,
.agent-install-guide:focus-visible,
.agent-install-btn:focus-visible,
.agent-install-reveal:focus-visible,
.agent-install-os-btn:focus-visible {
	outline: 2px solid var(--teal-400);
	outline-offset: 2px;
}

.agent-install-help {
	margin: 8px 0 0;
	max-width: none;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* Show key: a quiet text button inside the dark box, next to Copy. */
.agent-install-reveal {
	flex-shrink: 0;
	padding: 0 4px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--navy-300);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.agent-install-reveal:hover { color: #E6EDF7; }
/* Warning appears only while the key is visible (not copied: pseudo-content). */
.agent-install.is-shown .agent-install-value::after {
	content: "\A The link holds a personal key: treat it like a password.";
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--navy-300);
}

@media (max-width: 600px) {
	.agent-install { padding: 10px 16px 14px; border-radius: 16px; }
	.agent-install-tabs { gap: 20px; }
	.agent-install-tab, .agent-install-guide { font-size: 14px; }
	.agent-install-code { flex-wrap: wrap; padding: 12px 12px 12px 16px; }
	.agent-install-value,
	.agent-install-code--cmd .agent-install-value { font-size: 13px; flex-basis: 100%; }
	.agent-install-reveal { margin-left: auto; }
	.agent-install-btn { min-width: 0; padding: 8px 14px; }
	.agent-install-os-btn { padding: 4px 8px; }
}