/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* AI Customization Management Editor */
.ai-customization-management-editor {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* Inset button focus rings so they aren't clipped by a widget's overflow:hidden edge. !important overrides button.css. */
.ai-customization-management-editor .monaco-button:focus,
.ai-customization-list-widget .monaco-button:focus,
.mcp-list-widget .monaco-button:focus {
	outline-offset: -1px !important;
}

/* Sidebar */
.ai-customization-management-editor .management-sidebar {
	height: 100%;
	overflow: hidden;
}

.ai-customization-management-editor .sidebar-content {
	height: 100%;
	padding: 0 12px 4px 4px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: var(--vscode-editor-background);
}

.ai-customization-management-editor .sidebar-header-row {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ai-customization-management-editor .sidebar-home-button {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 8px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--vscode-foreground);
	cursor: pointer;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	font-family: inherit;
	transition: background-color 0.1s ease;
}

.ai-customization-management-editor .sidebar-home-button:hover {
	background-color: var(--vscode-list-hoverBackground);
}

.ai-customization-management-editor .sidebar-home-button:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.ai-customization-management-editor .sidebar-home-icon {
	flex-shrink: 0;
	font-size: 14px;
	opacity: 0.85;
}

.ai-customization-management-editor .sidebar-home-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-customization-management-editor .sidebar-sections-list {
	flex: 1;
	overflow: hidden;
}

/* Section list items */
.ai-customization-management-editor .section-list-item {
	display: flex;
	align-items: center;
	padding: 4px 8px;
	gap: 10px;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.1s ease, opacity 0.1s ease;
}

.ai-customization-management-editor .section-list-item:hover {
	background-color: var(--vscode-list-hoverBackground);
}

/* Selected section - using list selection */
.ai-customization-management-editor .monaco-list .monaco-list-row.section-list-item.selected .section-icon {
	color: inherit;
	opacity: 1;
}

.ai-customization-management-editor .monaco-list .monaco-list-row.section-list-item.selected .section-count {
	color: inherit;
}

.ai-customization-management-editor .section-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.85;
}

.ai-customization-management-editor .section-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 400;
}

.ai-customization-management-editor .section-list-item .section-count {
	flex-shrink: 0;
	font-size: var(--vscode-agents-fontSize-label2);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-descriptionForeground);
	border-radius: 8px;
	min-width: 14px;
	text-align: right;
	line-height: 16px;
}

/* Content area */
.ai-customization-management-editor .management-content {
	background-color: var(--vscode-editor-background);
	height: 100%;
	overflow: hidden;
}

.ai-customization-management-editor .content-inner {
	height: 100%;
	box-sizing: border-box;
	padding-right: 16px;
	padding-bottom: 16px;
	display: flex;
	flex-direction: column;
}

.ai-customization-management-editor .content-inner .welcome-page-host {
	flex: 1 1 auto;
	min-height: 0;
	padding: 40px 40px 16px;
	background: var(--vscode-agentsPanel-background);
	border: 1px solid var(--vscode-agentsPanel-border);
	border-radius: 6px;
	box-sizing: border-box;
}

.ai-customization-management-editor .section-back-arrow-button {
	flex-shrink: 0;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--vscode-foreground);
	cursor: pointer;
	font-family: inherit;
	opacity: 0.8;
	transition: background-color 0.1s ease, opacity 0.1s ease;
}

.ai-customization-management-editor .section-back-arrow-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground, var(--vscode-list-hoverBackground));
	opacity: 1;
}

.ai-customization-management-editor .section-back-arrow-button:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.ai-customization-management-editor .section-back-arrow-icon {
	font-size: 14px;
	opacity: 0.85;
}

.ai-customization-management-editor .section-back-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

/* List Widget */
.ai-customization-list-widget {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* Harness dropdown in sidebar */
.ai-customization-management-editor .sidebar-harness-dropdown {
	flex: 1;
	min-width: 0;
}

.ai-customization-management-editor .harness-dropdown-button {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 2px 6px;
	min-height: 26px;
	border: 1px solid var(--vscode-dropdown-border, var(--vscode-dropdown-background));
	font-size: 12px;
	border-radius: var(--vscode-cornerRadius-small);
	color: var(--vscode-dropdown-foreground);
	background: var(--vscode-dropdown-background);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}

.ai-customization-management-editor .harness-dropdown-button:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.ai-customization-management-editor .harness-dropdown-icon {
	font-size: 14px;
	flex-shrink: 0;
	color: inherit;
}

.ai-customization-management-editor .harness-dropdown-label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ai-customization-management-editor .harness-dropdown-chevron {
	font-size: 12px;
	flex-shrink: 0;
	opacity: 0.7;
}

/* Search and button container - consistent with Models view */
.ai-customization-list-widget .list-search-and-button-container,
.mcp-list-widget .list-search-and-button-container {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 16px 0;
}

.ai-customization-list-widget .list-search-container,
.mcp-list-widget .list-search-container {
	flex: 1;
}

.ai-customization-list-widget .list-search-container .monaco-inputbox,
.mcp-list-widget .list-search-container .monaco-inputbox {
	width: 100%;
}

.ai-customization-list-widget .list-add-button-container,
.mcp-list-widget .list-add-button-container {
	flex-shrink: 0;
}

.ai-customization-list-widget .list-add-button,
.mcp-list-widget .list-add-button {
	white-space: nowrap;
}

.ai-customization-list-widget .list-add-button .monaco-button-dropdown .monaco-button:first-child {
	flex: 1;
}

.ai-customization-list-widget .list-container {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.ai-customization-list-widget .list-empty-message {
	padding: 12px;
	text-align: center;
	color: var(--vscode-descriptionForeground);
	font-style: italic;
}

/* Empty state - engaging design */
.ai-customization-list-widget .list-empty-state,
.ai-customization-management-editor .tools-list-widget .list-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	gap: 8px;
	text-align: center;
	flex: 1;
}

.ai-customization-list-widget .list-empty-state .empty-state-text,
.ai-customization-management-editor .tools-list-widget .list-empty-state .empty-state-text {
	font-size: 16px;
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-foreground);
}

.ai-customization-list-widget .list-empty-state .empty-state-subtext,
.ai-customization-management-editor .tools-list-widget .list-empty-state .empty-state-subtext {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-descriptionForeground);
	max-width: 250px;
	line-height: 1.4;
}

.ai-customization-list-widget .list-empty-state .empty-state-button {
	margin-top: 16px;
}

/* Group header styling */
.ai-customization-group-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	border-radius: 4px;
}

/* Spacing above non-first group headers */
/* .ai-customization-group-header.has-previous-group {
	margin-top: 8px;
} */

.ai-customization-group-header:hover {
	background-color: var(--vscode-list-hoverBackground);
}

.ai-customization-group-header .group-chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	opacity: 0.7;
	order: 10;
	margin-left: auto;
}

.ai-customization-group-header .group-icon {
	display: none;
}

.ai-customization-group-header .group-label-group {
	display: flex;
	align-items: center;
	gap: 4px;
	overflow: hidden;
	min-width: 0;
}

.ai-customization-group-header .group-label {
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	text-transform: capitalize;
	color: var(--vscode-sideBarSectionHeader-foreground, var(--vscode-foreground));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-customization-group-header .group-count {
	flex-shrink: 0;
	font-size: var(--vscode-agents-fontSize-label2);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-descriptionForeground);
	text-align: right;
	margin-top: 2px;
}

.ai-customization-group-header .group-info {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	opacity: 0;
	color: var(--vscode-descriptionForeground);
	transition: opacity 0.1s ease;
}

.ai-customization-group-header:hover .group-info {
	opacity: 0.7;
}

.ai-customization-group-header .group-info:hover {
	opacity: 1;
}

/* List item styling */
.ai-customization-list-item {
	display: flex;
	align-items: center;
	padding: 6px 12px 6px 16px;
	cursor: pointer;
	border-radius: 4px;
	min-height: 32px;
}

.ai-customization-list-item:hover {
	background-color: var(--vscode-list-hoverBackground);
}

.ai-customization-list-item.disabled {
	opacity: 0.5;
}

.ai-customization-list-item .item-left {
	display: flex;
	align-items: center;
	flex: 1;
	overflow: hidden;
	gap: 10px;
	min-width: 0;
}

.ai-customization-list-item .storage-badge {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
}

.ai-customization-list-item:hover .storage-badge {
	opacity: 1;
}

.ai-customization-list-item .git-status-badge {
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 600;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	margin-right: 4px;
	opacity: 1;
}

.ai-customization-list-item .git-status-badge.committed {
	color: var(--vscode-charts-green, #89d185);
	opacity: 0.6;
}

/* Shared inline badge style — used by MCP "Bridged" badge and item badges */
.inline-badge {
	flex-shrink: 0;
	font-size: var(--vscode-agents-fontSize-label3);
	padding: 0 4px;
	border-radius: 3px;
	color: var(--vscode-descriptionForeground);
	background: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31));
	white-space: nowrap;
	line-height: 16px;
}

/* Status icon for remote customization items (loading/loaded/degraded/error) */
.ai-customization-list-item .item-status-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

/* Sync checkbox for local items in remote agent harness view */
.ai-customization-list-item .item-sync-checkbox {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-right: 4px;
}

/* MCP bridged badge — shown inline next to the server name */
.mcp-server-item .mcp-server-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ai-customization-list-item .item-type-icon {
	display: none;
}

.ai-customization-list-item .item-text {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.ai-customization-list-item .item-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.ai-customization-list-item .item-name {
	font-size: var(--vscode-agents-fontSize-body1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 18px;
}

.ai-customization-list-item .item-description {
	font-size: var(--vscode-agents-fontSize-body2);
	color: var(--vscode-descriptionForeground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 14px;
}

.ai-customization-list-item .item-description.is-filename {
	font-family: monospace;
	font-size: var(--vscode-agents-fontSize-label3);
	opacity: 0.7;
}

.ai-customization-list-item .item-right {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: 16px;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.1s ease;
}

.ai-customization-list-item:hover .item-right,
.ai-customization-list-item:focus-within .item-right,
.monaco-list-row.focused .ai-customization-list-item .item-right {
	opacity: 1;
}

/* Highlighted matches */
.ai-customization-list-item .highlight {
	font-weight: bold;
	color: var(--vscode-list-highlightForeground);
}

/* Section title header at top of list widget (shared by all list widgets) */
.ai-customization-list-widget .section-title-header,
.mcp-list-widget .section-title-header,
.ai-customization-management-editor .tools-list-widget .section-title-header {
	flex-shrink: 0;
	padding: 0;
}

.ai-customization-list-widget .section-title-header .section-title-row,
.mcp-list-widget .section-title-header .section-title-row,
.ai-customization-management-editor .tools-list-widget .section-title-header .section-title-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px 0;
}

.ai-customization-list-widget .section-title-header .section-title-back-slot,
.mcp-list-widget .section-title-header .section-title-back-slot {
	display: flex;
	align-items: center;
}

.ai-customization-list-widget .section-title-header .section-title-back-slot:empty,
.mcp-list-widget .section-title-header .section-title-back-slot:empty {
	display: none;
}

.ai-customization-list-widget .section-title-header .section-title,
.mcp-list-widget .section-title-header .section-title,
.ai-customization-management-editor .tools-list-widget .section-title-header .section-title {
	font-size: var(--vscode-agents-fontSize-heading2);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	margin: 0;
	color: var(--vscode-foreground);
}

.ai-customization-list-widget .section-title-header .section-title-description,
.mcp-list-widget .section-title-header .section-title-description,
.ai-customization-management-editor .tools-list-widget .section-title-header .section-title-description {
	font-size: var(--vscode-agents-fontSize-body1);
	line-height: 1.45;
	color: var(--vscode-descriptionForeground);
	margin: 0 0 8px 0;
	/* Reserve space for ~2 lines so the header height is stable across sections. */
	/* Rounded up to a whole pixel so naturally-wrapped 2-line descriptions and */
	/* shorter 1-line descriptions render at the same height instead of differing */
	/* by a sub-pixel rounding. */
	min-height: 38px;
}

.ai-customization-list-widget .section-title-header .section-title-link,
.mcp-list-widget .section-title-header .section-title-link,
.ai-customization-management-editor .tools-list-widget .section-title-header .section-title-link {
	font-size: var(--vscode-agents-fontSize-body1);
	/* Match the description's line-height so the link's inline-flex line-box */
	/* does not change the total header height between sections. */
	line-height: 1.45;
	color: var(--vscode-textLink-foreground);
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ai-customization-list-widget .section-title-header .section-title-link:hover,
.mcp-list-widget .section-title-header .section-title-link:hover,
.ai-customization-management-editor .tools-list-widget .section-title-header .section-title-link:hover {
	text-decoration: underline;
}

/* Inset the focus ring so it isn't clipped by the widget's overflow:hidden at the header's edge. */
.ai-customization-list-widget .section-title-header .section-title-link:focus-visible,
.mcp-list-widget .section-title-header .section-title-link:focus-visible,
.ai-customization-management-editor .tools-list-widget .section-title-header .section-title-link:focus-visible {
	outline-offset: -1px;
}

/* Section footer at bottom of list widget */
.ai-customization-list-widget .section-footer {
	flex-shrink: 0;
	padding: 12px 4px 6px 4px;
	border-top: 1px solid var(--vscode-widget-border);
}

.ai-customization-list-widget .section-footer .section-footer-description {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-descriptionForeground);
	margin: 0 0 8px 0;
}

.ai-customization-list-widget .section-footer .section-footer-link {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-textLink-foreground);
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ai-customization-list-widget .section-footer .section-footer-link:hover {
	text-decoration: underline;
	color: var(--vscode-textLink-activeForeground);
}

/* Overview View (compact snapshot) */
.ai-customization-overview {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 8px;
}

.ai-customization-overview .overview-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}


.ai-customization-overview .overview-section {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background-color: var(--vscode-sideBar-background);
	border: 1px solid var(--vscode-widget-border);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.1s ease;
	flex: 1 1 120px;
	min-width: 100px;
}

.ai-customization-overview .overview-section:hover {
	background-color: var(--vscode-list-hoverBackground);
	border-color: var(--vscode-focusBorder);
}

.ai-customization-overview .overview-section:focus {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.ai-customization-overview .overview-section .section-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	opacity: 0.9;
}

.ai-customization-overview .overview-section .section-text {
	flex: 1;
	min-width: 0;
}

.ai-customization-overview .overview-section .section-label {
	font-size: var(--vscode-agents-fontSize-label1);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}



.ai-customization-overview .overview-section .section-count {
	flex-shrink: 0;
	font-size: 9px;
	font-weight: 500;
	padding: 1px 5px;
	background-color: var(--vscode-list-inactiveSelectionBackground);
	color: var(--vscode-list-inactiveSelectionForeground, var(--vscode-foreground));
	border-radius: 8px;
	min-width: 14px;
	text-align: center;
}

/* Content container visibility */
.ai-customization-management-editor .prompts-content-container,
.ai-customization-management-editor .mcp-content-container,
.ai-customization-management-editor .plugin-content-container,
.ai-customization-management-editor .models-content-container,
.ai-customization-management-editor .tools-content-container,
.ai-customization-management-editor .automations-content-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 40px 40px 16px;
	background: var(--vscode-agentsPanel-background);
	border: 1px solid var(--vscode-agentsPanel-border);
	border-radius: 6px;
	overflow: hidden;
	box-sizing: border-box;
}

/* Tools section list widget */
.ai-customization-management-editor .tools-list-widget {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
}

.ai-customization-management-editor .tools-list-search-and-button-container {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.ai-customization-management-editor .tools-list-search-container {
	flex: 1;
}

.ai-customization-management-editor .tools-list-search-container .monaco-inputbox {
	width: 100%;
}

.ai-customization-management-editor .tools-list-browse-button-container {
	flex-shrink: 0;
}

.ai-customization-management-editor .tools-list-browse-button-container .monaco-button {
	white-space: nowrap;
}

/* Marketplace browse (gallery) list */
.ai-customization-management-editor .tools-gallery-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.ai-customization-management-editor .tools-gallery-list {
	flex: 1;
	min-height: 0;
}

/* Shared gallery row used by the tools, MCP server and plugin marketplace lists. See galleryItemRenderer.ts */
.ai-customization-management-editor .gallery-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	box-sizing: border-box;
	border-radius: 4px;
	cursor: default;
}

.ai-customization-management-editor .gallery-item:hover {
	background-color: var(--vscode-list-hoverBackground);
}

.ai-customization-management-editor .gallery-item-details {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.ai-customization-management-editor .gallery-item-name {
	font-size: var(--vscode-agents-fontSize-body1);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	line-height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-customization-management-editor .gallery-item-description,
.ai-customization-management-editor .gallery-item-publisher {
	font-size: var(--vscode-agents-fontSize-body2);
	color: var(--vscode-descriptionForeground);
	line-height: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-customization-management-editor .gallery-item-action {
	flex-shrink: 0;
}

.ai-customization-management-editor .gallery-item-action .monaco-button {
	white-space: nowrap;
	font-size: var(--vscode-agents-fontSize-body2);
	padding: 2px 10px;
}

.ai-customization-management-editor .gallery-item-action .monaco-button:focus-visible {
	outline-offset: -1px;
}

/* DomScrollableElement wrapper around the tool tree; takes remaining height for the overlay scrollbar. */
.ai-customization-management-editor .tools-list-tree-scrollable {
	position: relative;
	flex: 1;
	min-height: 0;
}

/* The scrolled element: bound it to the wrapper so clientHeight < scrollHeight when content overflows. */
.ai-customization-management-editor .tools-list-tree {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Top-level tool-set row */
.ai-customization-management-editor .tools-list-setrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 4px;
	outline-offset: -1px;
}

.ai-customization-management-editor .tools-list-setrow:hover,
.ai-customization-management-editor .tools-list-toolrow:hover {
	background: var(--vscode-list-hoverBackground);
}

/* Match the other customization lists' focus ring: :focus-within for inner checkbox/chevron, :focus for a row click. */
.ai-customization-management-editor .tools-list-setrow:focus,
.ai-customization-management-editor .tools-list-setrow:focus-within,
.ai-customization-management-editor .tools-list-toolrow:focus,
.ai-customization-management-editor .tools-list-toolrow:focus-within {
	outline: 1px solid var(--vscode-list-focusOutline);
	background: var(--vscode-list-focusBackground, var(--vscode-list-hoverBackground));
}

.ai-customization-management-editor .tools-list-chevron {
	flex: none;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--vscode-foreground);
	opacity: 0.7;
	cursor: pointer;
	margin-left: auto;
}

/* Child tool row (indented under the tool set) */
.ai-customization-management-editor .tools-list-children {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ai-customization-management-editor .tools-list-toolrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 40px;
	border-radius: 4px;
	cursor: pointer;
	outline-offset: -1px;
}

.ai-customization-management-editor .tools-list-toolrow.readonly {
	cursor: default;
}

.ai-customization-management-editor .tools-list-row-main {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.ai-customization-management-editor .tools-list-row-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.ai-customization-management-editor .tools-list-row-label {
	font-size: var(--vscode-agents-fontSize-body1);
	line-height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-customization-management-editor .tools-list-setrow .tools-list-row-label {
	font-weight: var(--vscode-agents-fontWeight-semiBold);
}

/* Search match highlighting in tool set / tool names */
.ai-customization-management-editor .tools-list-row-label .highlight {
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-list-highlightForeground);
}

.ai-customization-management-editor .tools-list-row-subtext {
	font-size: var(--vscode-agents-fontSize-body2);
	line-height: 14px;
	color: var(--vscode-descriptionForeground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Enabled/total tool count shown at the right of a tool-set row */
.ai-customization-management-editor .tools-list-row-count {
	flex: none;
	font-size: var(--vscode-agents-fontSize-body2);
	color: var(--vscode-descriptionForeground);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: pointer;
}

/* Embedded MCP server detail view */
.ai-customization-management-editor .mcp-detail-container {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 16px;
	background: var(--vscode-agentsPanel-background);
	border: 1px solid var(--vscode-agentsPanel-border);
	border-radius: 6px;
	overflow: hidden;
	box-sizing: border-box;
}

.ai-customization-management-editor .mcp-detail-editor-container {
	flex: 1;
	overflow: auto;
	min-height: 0;
}

/* Embedded plugin detail view */
.ai-customization-management-editor .plugin-detail-container,
.ai-customization-management-editor .tools-detail-container {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 16px;
	background: var(--vscode-agentsPanel-background);
	border: 1px solid var(--vscode-agentsPanel-border);
	border-radius: 6px;
	overflow: hidden;
	box-sizing: border-box;
}

/* Inline back button with the embedded detail header */
.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail,
.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail,
.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail {
	padding: 0;
}

.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail .embedded-detail-header,
.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail .embedded-detail-header,
.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail .embedded-detail-header {
	align-items: center;
}

.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty),
.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty),
.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty) {
	display: flex;
	align-items: center;
	margin-inline-end: 4px;
}

.ai-customization-management-editor .plugin-detail-editor-container,
.ai-customization-management-editor .tools-detail-editor-container {
	flex: 1;
	overflow: auto;
	min-height: 0;
}

/* Compact embedded detail component (shared by MCP / plugin) */
.ai-customization-management-editor .ai-customization-embedded-detail {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 24px 24px 24px;
	max-width: 720px;
	min-width: 0;
}

/* The tools detail lists many short tool descriptions, so let it use the full editor width. */
.ai-customization-management-editor .ai-customization-embedded-detail.embedded-tool-detail {
	max-width: none;
}

.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-header,
.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-description,
.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-tools {
	display: none;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-header {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vscode-foreground);
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-icon.codicon::before {
	font-size: 28px;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-header-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-name {
	margin: 0;
	font-size: var(--vscode-agents-fontSize-heading2);
	line-height: 22px;
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	word-break: break-word;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-scope {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--vscode-descriptionForeground);
	font-size: 12px;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-scope .codicon {
	font-size: 12px;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-description {
	color: var(--vscode-foreground);
	font-size: var(--vscode-agents-fontSize-body1);
	line-height: 1.4;
	white-space: pre-wrap;
	word-break: break-word;
	padding-inline-start: 32px;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-empty {
	color: var(--vscode-descriptionForeground);
	font-size: var(--vscode-agents-fontSize-body1);
	padding: 8px 0;
}

/* Included tools list (tool extension detail) */
.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tools {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-inline-start: 32px;
	min-width: 0;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tools-heading {
	font-size: var(--vscode-agents-fontSize-body1);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-foreground);
	margin: 0;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tools-message {
	color: var(--vscode-descriptionForeground);
	font-size: var(--vscode-agents-fontSize-body1);
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tools-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tool {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tool-name {
	font-size: var(--vscode-agents-fontSize-body1);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-foreground);
	word-break: break-word;
}

.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tool-description {
	font-size: var(--vscode-agents-fontSize-body2);
	color: var(--vscode-descriptionForeground);
	line-height: 1.4;
	word-break: break-word;
	/* Keep descriptions short and scannable; the full text is available once installed. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Models section footer */
.ai-customization-management-editor .models-content-container .section-footer {
	flex-shrink: 0;
	padding: 12px 4px 6px 4px;
	border-top: 1px solid var(--vscode-widget-border);
}

.ai-customization-management-editor .models-content-container .section-footer-description {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-descriptionForeground);
	line-height: 1.5;
	margin: 0 0 8px 0;
}

.ai-customization-management-editor .models-content-container .section-footer-link {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-textLink-foreground);
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ai-customization-management-editor .models-content-container .section-footer-link:hover {
	text-decoration: underline;
	color: var(--vscode-textLink-activeForeground);
}

/* Override models widget padding when embedded in management editor */
.ai-customization-management-editor .models-content-container .models-widget {
	padding-right: 0;
	flex: 1;
	overflow: hidden;
}

/* MCP List Widget */
.mcp-list-widget {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.mcp-list-widget .mcp-list-container {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

/* MCP Empty State */
.mcp-list-widget .mcp-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	gap: 8px;
	text-align: center;
	flex: 1;
}

.mcp-list-widget .mcp-empty-state .empty-text {
	font-size: 16px;
	font-weight: 500;
	color: var(--vscode-foreground);
}

.mcp-list-widget .mcp-empty-state .empty-subtext {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-descriptionForeground);
	max-width: 250px;
	line-height: 1.4;
}

.mcp-list-widget .mcp-empty-state .monaco-button {
	margin-top: 16px;
}

/* MCP Disabled (access blocked) state */
.mcp-list-widget .mcp-disabled-state {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	gap: 8px;
	text-align: center;
	flex: 1;
}

.mcp-list-widget .mcp-disabled-state .empty-state-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.mcp-list-widget .mcp-disabled-state .empty-icon.codicon::before {
	font-size: 48px;
}

.mcp-list-widget .mcp-disabled-state .empty-icon {
	opacity: 0.5;
	margin-bottom: 8px;
	height: 48px;
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mcp-list-widget .mcp-disabled-state .empty-text {
	font-size: 16px;
	font-weight: 500;
	color: var(--vscode-foreground);
}

.mcp-list-widget .mcp-disabled-state .empty-subtext {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-descriptionForeground);
	max-width: 420px;
	line-height: 1.5;
}

.mcp-list-widget .mcp-disabled-state .mcp-disabled-settings-link {
	color: var(--vscode-textLink-foreground);
	cursor: pointer;
	text-decoration: none;
}

.mcp-list-widget .mcp-disabled-state .mcp-disabled-settings-link:hover,
.mcp-list-widget .mcp-disabled-state .mcp-disabled-settings-link:focus {
	color: var(--vscode-textLink-activeForeground);
	text-decoration: underline;
	outline: none;
}

.mcp-list-widget.access-disabled > *:not(.mcp-disabled-state) {
	display: none !important;
}

.mcp-list-widget.access-disabled .mcp-disabled-state {
	display: flex;
}

/* MCP Server Item */
.mcp-server-item {
	display: flex;
	align-items: center;
	padding: 6px 8px 6px 30px;
	cursor: pointer;
	border-radius: 4px;
	min-height: 32px;
	gap: 10px;
}

.mcp-server-item:not(.has-detail):not(.builtin) {
	cursor: default;
}

.mcp-server-item:hover {
	background-color: var(--vscode-list-hoverBackground);
}

.mcp-server-item.builtin {
	cursor: default;
	opacity: 0.85;
}

.mcp-server-item .mcp-server-icon {
	display: none;
}

.mcp-server-item .mcp-server-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

.mcp-server-item .mcp-server-name {
	font-size: var(--vscode-agents-fontSize-body1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 18px;
}

.mcp-server-item .mcp-server-description {
	font-size: var(--vscode-agents-fontSize-body2);
	color: var(--vscode-descriptionForeground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 14px;
}

.mcp-server-item .mcp-server-status {
	flex-shrink: 0;
	font-size: var(--vscode-agents-fontSize-label2);
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: var(--vscode-agents-fontWeight-semiBold);
}

.mcp-server-item .mcp-server-status.running {
	background-color: color-mix(in srgb, var(--vscode-terminal-ansiGreen) 50%, transparent);
	color: var(--vscode-editor-background);
}

.mcp-server-item .mcp-server-status.starting {
	background-color: color-mix(in srgb, var(--vscode-terminal-ansiYellow) 50%, transparent);
	color: var(--vscode-editor-background);
}

.mcp-server-item .mcp-server-status.auth-required {
	background-color: color-mix(in srgb, var(--vscode-terminal-ansiYellow) 50%, transparent);
	color: var(--vscode-editor-background);
}

.mcp-server-item .mcp-server-status.error {
	background-color: color-mix(in srgb, var(--vscode-terminal-ansiRed) 50%, transparent);
	color: var(--vscode-editor-background);
}

.mcp-server-item .mcp-server-status.stopped {
	background-color: color-mix(in srgb, var(--vscode-badge-background) 50%, transparent);
	color: var(--vscode-badge-foreground);
}

.mcp-server-item.disabled {
	opacity: 0.5;
}

.mcp-server-item .mcp-server-status.disabled {
	background-color: color-mix(in srgb, var(--vscode-badge-background) 50%, transparent);
	color: var(--vscode-badge-foreground);
}

/* Button group for Add Server + Browse Marketplace */
.mcp-list-widget .list-button-group {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

/* Embedded Editor View */
.ai-customization-management-editor .editor-content-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--vscode-agentsPanel-background);
	border: 1px solid var(--vscode-agentsPanel-border);
	border-radius: 6px;
	overflow: hidden;
	box-sizing: border-box;
}

.ai-customization-management-editor .editor-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 16px 6px;
	flex-shrink: 0;
}

.ai-customization-management-editor .editor-back-button {
	flex-shrink: 0;
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	cursor: pointer;
	background: transparent;
	border: none;
	color: var(--vscode-foreground);
	opacity: 0.8;
	transition: background-color 0.1s ease, opacity 0.1s ease;
}

.ai-customization-management-editor .editor-back-button:hover:not(:disabled) {
	background-color: var(--vscode-toolbar-hoverBackground);
	opacity: 1;
}

.ai-customization-management-editor .editor-back-button:active:not(:disabled) {
	background-color: var(--vscode-toolbar-activeBackground);
}

.ai-customization-management-editor .editor-back-button:disabled {
	cursor: default;
	opacity: 0.45;
}

.ai-customization-management-editor .editor-action-button-icon {
	font-size: 14px;
	line-height: 14px;
}

.ai-customization-management-editor .editor-item-info {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.ai-customization-management-editor .editor-item-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--vscode-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-customization-management-editor .editor-item-path {
	font-size: var(--vscode-agents-fontSize-body2);
	color: var(--vscode-descriptionForeground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--monaco-monospace-font);
}

.ai-customization-management-editor .editor-save-indicator {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
	text-align: center;
	color: var(--vscode-descriptionForeground);
	opacity: 0;
	transition: opacity 0.2s ease;
	margin-right: 4px;
}

.ai-customization-management-editor .editor-save-indicator.visible {
	opacity: 0.7;
}

.ai-customization-management-editor .editor-save-indicator.saved {
	color: var(--vscode-testing-iconPassed, #73c991);
	opacity: 1;
}

.ai-customization-management-editor .editor-mode-button {
	flex-shrink: 0;
	height: 26px;
	padding: 0 10px;
	border-radius: 4px;
	border: 1px solid var(--vscode-widget-border);
	background: var(--vscode-button-secondaryBackground);
	color: var(--vscode-button-secondaryForeground);
	cursor: pointer;
	font-size: 12px;
	line-height: 24px;
	transition: background-color 0.1s ease, border-color 0.1s ease;
}

.ai-customization-management-editor .editor-mode-button:hover {
	background: var(--vscode-button-secondaryHoverBackground);
}

.ai-customization-management-editor .editor-mode-button:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: 1px;
}

.ai-customization-management-editor .editor-preview-container,
.ai-customization-management-editor .embedded-editor-container {
	flex: 1;
	margin-top: 8px;
	min-height: 0;
	overflow: hidden;
}

.ai-customization-management-editor .editor-preview-container {
	background: var(--vscode-editor-background);
	overflow: hidden;
}

.ai-customization-management-editor .editor-preview-scroll-container {
	height: 100%;
	overflow: auto;
	padding: 16px;
	box-sizing: border-box;
	outline: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ai-customization-management-editor .editor-preview-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ai-customization-management-editor .editor-preview-frontmatter-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ai-customization-management-editor .editor-preview-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	background: var(--vscode-editorWidget-background);
	border: 1px solid var(--vscode-widget-border);
	border-radius: 6px;
}

.ai-customization-management-editor .editor-preview-row-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ai-customization-management-editor .editor-preview-row-key {
	font-size: 12px;
	font-weight: 600;
	color: var(--vscode-foreground);
	font-family: var(--monaco-monospace-font);
}

.ai-customization-management-editor .editor-preview-row-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--vscode-descriptionForeground);
	cursor: pointer;
}

.ai-customization-management-editor .editor-preview-row-help:hover {
	background: var(--vscode-toolbar-hoverBackground);
	color: var(--vscode-foreground);
}

.ai-customization-management-editor .editor-preview-row-help:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: 1px;
}

.ai-customization-management-editor .editor-preview-row-help-icon {
	font-size: 14px;
	line-height: 14px;
}

.ai-customization-management-editor .editor-preview-row-value {
	font-size: var(--vscode-agents-fontSize-body1);
	line-height: 1.5;
	color: var(--vscode-foreground);
	white-space: pre-wrap;
	word-break: break-word;
}

.ai-customization-management-editor .editor-preview-row-value.multiline {
	font-family: var(--monaco-monospace-font);
	font-size: 12px;
}

.ai-customization-management-editor .editor-preview-body-content {
	padding: 12px 14px;
	background: var(--vscode-editorWidget-background);
	border: 1px solid var(--vscode-widget-border);
	border-radius: 6px;
}

.ai-customization-management-editor .editor-preview-body-content > :first-child {
	margin-top: 0;
}

.ai-customization-management-editor .editor-preview-body-content > :last-child {
	margin-bottom: 0;
}

.ai-customization-management-editor .editor-preview-empty-state {
	padding: 12px 14px;
	background: var(--vscode-editorWidget-background);
	border: 1px dashed var(--vscode-widget-border);
	border-radius: 6px;
	color: var(--vscode-descriptionForeground);
	font-size: 12px;
}

.ai-customization-management-editor .editor-preview-issues-box {
	padding: 12px 14px;
	background: var(--vscode-inputValidation-warningBackground);
	border: 1px solid var(--vscode-inputValidation-warningBorder);
	border-radius: 6px;
	color: var(--vscode-inputValidation-warningForeground);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-customization-management-editor .editor-preview-issues-title {
	font-size: 12px;
	font-weight: 600;
}

.ai-customization-management-editor .editor-preview-issues-description,
.ai-customization-management-editor .editor-preview-issues-list {
	font-size: 12px;
	line-height: 1.4;
}

.ai-customization-management-editor .editor-preview-issues-list {
	margin: 0;
	padding-left: 18px;
}

.ai-customization-management-editor .embedded-editor-container .monaco-editor {
	border-radius: 4px;
}

/* Initial open transition: a subtle fade + lift plays once when the editor
pane is first mounted. View switches inside the modal are not animated. */
.ai-customization-management-editor {
	animation: ai-customization-view-enter 160ms ease-out;
}

@keyframes ai-customization-view-enter {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ai-customization-management-editor {
		animation: none;
	}
}

/* Welcome page styles live in the welcome page variant stylesheets. */


/* Automations section
 *
 * The outer `.automations-content-container` shares the panel-surface
 * styling with the prompts / MCP / plugin / models containers (see the
 * shared rule above near line 758) so the Automations tab visually
 * matches its siblings: 40px panel padding, agentsPanel background,
 * rounded border. The list-widget below fills that panel.
 *
 * No standalone rule is needed here. The shared selector covers it. */

.automations-list-widget {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.automations-list-widget .automations-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	gap: 8px;
	text-align: center;
	flex: 1;
}

.automations-list-widget .automations-empty-state .automations-empty-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--vscode-foreground);
	margin: 0;
}

.automations-list-widget .automations-empty-state .automations-empty-message {
	font-size: var(--vscode-agents-fontSize-body1);
	color: var(--vscode-descriptionForeground);
	max-width: 320px;
	line-height: 1.4;
	margin: 0;
}

.automations-list-widget .automations-empty-state .automations-empty-cta {
	margin-top: 16px;
	min-width: 160px;
	align-self: center;
}

/* Header. This mirrors `.section-title-header` on the prompts side so the
 * Automations tab reads with the same vertical rhythm and underline
 * treatment as Agents / Skills / Prompts / Instructions. Horizontal
 * padding is absent because the parent `.automations-content-container`
 * already owns 40px panel padding. */
.automations-list-widget .automations-header {
	flex-shrink: 0;
	padding: 0 0 32px;
	border-bottom: 1px solid var(--vscode-panel-border);
}

.automations-list-widget .automations-header-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	flex-wrap: wrap;
}

.automations-list-widget .automations-header-title {
	font-size: var(--vscode-agents-fontSize-heading2);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-foreground);
	margin: 0;
	min-width: 0;
}

.automations-list-widget .automations-header-subtitle {
	font-size: var(--vscode-agents-fontSize-body1);
	line-height: 1.45;
	color: var(--vscode-descriptionForeground);
	margin: 0 0 8px 0;
	/* Reserve ~2 lines so vertical rhythm matches the prompts-side
	 * `.section-title-description` even when our subtitle is short. */
	min-height: 38px;
}

.automations-list-widget .automations-new-button {
	width: auto;
	flex: 0 0 auto;
	padding: 4px 14px;
}

/* When the widget is empty, hide the header so the empty-state CTA reads
 * as the primary action and there is not a duplicate New button. */
.automations-list-widget.automations-empty .automations-header {
	display: none;
}

/* List */
.automations-list-widget .automations-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: auto;
	gap: 6px;
}

.automations-list-widget .automations-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 6px;
	cursor: pointer;
}

.automations-list-widget .automations-row:not(.automations-row-disabled):hover {
	background-color: var(--vscode-list-hoverBackground);
}

.automations-list-widget .automations-row-wrapper:has(> .automations-row-history) .automations-row:not(.automations-row-disabled):hover {
	background-color: transparent;
}

.automations-list-widget .automations-row:has(:focus-visible) {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.automations-list-widget .automations-row-disabled {
	opacity: 0.6;
}

.automations-list-widget .automations-row-main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.automations-list-widget .automations-row-name {
	font-size: var(--vscode-agents-fontSize-body1);
	font-weight: 600;
	color: var(--vscode-foreground);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	word-break: break-word;
}

.automations-list-widget .automations-row-disabled-badge {
	font-size: 11px;
	font-weight: 400;
	padding: 1px 6px;
	border-radius: 3px;
	background-color: var(--vscode-badge-background);
	color: var(--vscode-badge-foreground);
}

.automations-list-widget .automations-row-meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--vscode-descriptionForeground);
	flex-wrap: wrap;
}

.automations-list-widget .automations-row-meta-sep {
	opacity: 0.6;
}

.automations-list-widget .automations-row-prompt {
	font-size: 12px;
	color: var(--vscode-descriptionForeground);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
}

.automations-list-widget .automations-row-actions {
	display: flex;
	flex-direction: row;
	gap: 4px;
	align-items: center;
	flex: 0 0 auto;
}

.automations-list-widget .automations-row-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--vscode-icon-foreground);
	cursor: pointer;
	font-size: 16px;
}

.automations-list-widget .automations-row-action-button:hover:not(:disabled) {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.automations-list-widget .automations-row-action-button:focus {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.automations-list-widget .automations-row-action-button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Run history (inline) */
.automations-list-widget .automations-row-wrapper {
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	overflow: hidden;
}

/*
 * When a wrapper has an expanded history panel, flatten the row's bottom
 * corners so the row + history read as one visually connected card.
 */
.automations-list-widget .automations-row-wrapper:has(> .automations-row-history) .automations-row {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.automations-list-widget .automations-row-history {
	padding: 4px 16px 12px 40px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.automations-list-widget .automations-history-heading {
	font-size: 11px;
	font-weight: 600;
	margin: 4px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--vscode-descriptionForeground);
}

.automations-list-widget .automations-history-empty {
	font-size: 12px;
	color: var(--vscode-descriptionForeground);
	font-style: italic;
}

.automations-list-widget .automations-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.automations-list-widget .automations-history-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	background-color: var(--vscode-editorWidget-background, transparent);
}

.automations-list-widget .automations-history-status {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.automations-list-widget .automations-history-row[data-run-status="completed"] .automations-history-status {
	color: var(--vscode-testing-iconPassed, var(--vscode-icon-foreground));
}

.automations-list-widget .automations-history-row[data-run-status="failed"] .automations-history-status {
	color: var(--vscode-testing-iconFailed, var(--vscode-errorForeground));
}

.automations-list-widget .automations-history-row[data-run-status="running"] .automations-history-status {
	color: var(--vscode-charts-blue, var(--vscode-icon-foreground));
}

.automations-list-widget .automations-history-row-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.automations-list-widget .automations-history-row-first {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--vscode-foreground);
}

.automations-list-widget .automations-history-row-status {
	font-weight: 600;
}

.automations-list-widget .automations-history-row-sep {
	color: var(--vscode-descriptionForeground);
	opacity: 0.6;
}

.automations-list-widget .automations-history-row-trigger,
.automations-list-widget .automations-history-row-started,
.automations-list-widget .automations-history-row-duration {
	color: var(--vscode-descriptionForeground);
}

.automations-list-widget .automations-history-row-error {
	color: var(--vscode-errorForeground);
	font-size: 11px;
	white-space: pre-wrap;
	word-break: break-word;
}

.automations-list-widget .automations-history-row-open {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 4px;
	background: transparent;
	opacity: 0;
	color: var(--vscode-icon-foreground);
	font-size: 16px;
}

.automations-list-widget .automations-history-row:hover .automations-history-row-open,
.automations-list-widget .automations-history-row-open:focus-visible {
	opacity: 1;
}

.automations-list-widget .automations-history-row-open:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.automations-list-widget .automations-history-row-open:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.automations-list-widget .automations-history-more {
	font-size: 11px;
	color: var(--vscode-descriptionForeground);
	font-style: italic;
}

/* Dialog */
.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message-detail {
	display: none;
}

/*
 * The dialog's built-in title (rendered into `.dialog-message-text`)
 * stays in the DOM so `aria-labelledby="monaco-dialog-message-text"`
 * still binds for screen readers, but is visually hidden. Our own
 * `.automation-titlebar` provides the visible chrome. Visually-hidden
 * pattern (not `display: none`) because some AT/screen-reader combos
 * skip aria-labelledby targets when `display: none` is in effect.
 * Same treatment for the unused dialog icon slot.
 */
.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message {
	margin: 0;
	padding: 0;
}

.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message .dialog-message-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.monaco-dialog-box.automation-dialog .dialog-message-row > .dialog-icon.codicon {
	display: none;
}

/*
 * Lock the dialog box to a stable width. Without this rule the dialog
 * inherits `width: min-content` from `dialog.css` and re-flows as the
 * embedded chat input's chips change size (e.g. when the model picker
 * resolves a shorter label). Use min(640px, 92vw) so the dialog still
 * shrinks gracefully on narrow viewports.
 *
 * Padding is stripped (vs. the base 8px) so our `.automation-titlebar`
 * stripe can paint edge-to-edge inside the dialog body. The form pane
 * re-adds its own padding.
 *
 * Note: `extraClasses` on Dialog adds the class to `.monaco-dialog-box`
 * itself (not an ancestor), so we attach the rule directly here.
 */
.monaco-dialog-box.automation-dialog {
	width: min(640px, 92vw);
	min-width: min(520px, 92vw);
	max-width: 92vw;
	padding: 0;
	background-color: var(--vscode-quickInput-background);
	color: var(--vscode-quickInput-foreground);
	/* Anchor for the absolutely-positioned close-X (see below). */
	position: relative;
}

/*
 * Float the close-X over the titlebar so the title text sits flush
 * with the top edge of the modal (QuickInput-style). Without this,
 * `.dialog-toolbar-row` reserves ~24px of dead space above the title.
 * `z-index` keeps the X above the sticky titlebar.
 */
.monaco-dialog-box.automation-dialog .dialog-toolbar-row {
	position: absolute;
	top: 0;
	right: 0;
	height: auto;
	padding: 4px 6px 0 0;
	z-index: 2;
}

.automation-dialog-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/*
 * Strip the base dialog padding on the message row and container so
 * our titlebar can full-bleed. The form pane below re-adds horizontal
 * padding so the form fields don't crash into the dialog edge.
 *
 * Container still owns the scrolling (per base/.../dialog.css), so
 * the titlebar uses `position: sticky; top: 0` to stay visible as the
 * form scrolls underneath it.
 */
.monaco-dialog-box.automation-dialog .dialog-message-row {
	padding: 0;
}

.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container {
	padding: 0;
	/*
	 * The base dialog leaves the message container at content size
	 * (`align-self: stretch` only stretches height in a horizontal flex
	 * row). Our form fields are `width: 100%` of this container, so they
	 * track the container's intrinsic min-content width. It shrinks
	 * over the first second as the embedded chat input's chip labels
	 * (model name, mode name, etc.) resolve and the toolbar's
	 * min-content drops. Forcing the container to fill the row width
	 * keeps every field at the dialog's locked width from first paint
	 * onwards. `min-width: 0` lets the container shrink inside the row
	 * (which has `overflow: hidden`) instead of being pushed by long
	 * chip labels.
	 */
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * QuickInput-style titlebar. The visual "line" beneath it is purely
 * the background contrast between `quickInputTitle.background` (a
 * translucent stripe) and `quickInput.background` (the form area).
 * No `border-bottom`. Sticky so the title stays in view as the form
 * scrolls (the dialog's message-container is the scroll host).
 */
.automation-titlebar {
	position: sticky;
	top: 0;
	z-index: 1;
	/* Right padding reserves room for the floating close-X chip. */
	padding: 8px 36px 8px 14px;
	text-align: left;
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	font-size: var(--vscode-agents-fontSize-heading2);
	color: var(--vscode-quickInput-foreground);
	background-color: var(--vscode-quickInputTitle-background);
}

.automation-description {
	padding: 8px 14px;
	font-size: var(--vscode-agents-fontSize-body2, 12px);
	color: var(--vscode-descriptionForeground);
	line-height: 1.4;
}

.automation-form-pane {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	padding: 4px 14px 6px;
}

/*
 * Theme the native overflow scrollbar on the dialog body so it matches
 * the rest of VS Code. .dialog-message-container is the scroll host
 * (see base/browser/ui/dialog/dialog.css). Without this the dialog
 * shows the platform's default scrollbar which clashes visually with
 * the chat input embedded above.
 */
.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar {
	width: 10px;
}

.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-track {
	background-color: transparent;
}

.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb {
	min-height: 20px;
	background-color: var(--vscode-scrollbarSlider-background);
}

.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb:hover {
	background-color: var(--vscode-scrollbarSlider-hoverBackground);
}

.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb:active {
	background-color: var(--vscode-scrollbarSlider-activeBackground);
}

.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-corner {
	display: none;
}

/*
 * Z-index bridge for popups while the automation dialog is open.
 * The dialog modal block is z-index 2575 (see base/.../dialog.css)
 * and shares that value with .context-view (set inline in
 * contextview.ts as `2575 + layer`). DOM order means the dialog
 * shows on top, hiding any popup the chat input chips, the quick
 * input, or a context menu try to open. We can't change the inline
 * z-index from outside, so use `!important` while the dialog service
 * marks the active container as automation-dialog-open.
 */
.automation-dialog-open .context-view.monaco-component {
	z-index: 2600 !important;
}

.automation-dialog-open .quick-input-widget {
	z-index: 2600 !important;
}

.automation-dialog-open .monaco-menu-container {
	z-index: 2600 !important;
}

.automation-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 2px 2px 4px;
}

/*
 * Host for the embedded ChatInputPart. The composer brings its own
 * background, border, and rounded corners (see chat.css
 * `.interactive-input-part`), so we just give it room to breathe and let
 * it fill the dialog's column width. `min-height` is sized for ~5 lines
 * of body text + the toolbar row so the editor doesn't feel cramped on
 * first open; the editor itself grows as the user types.
 */
.automation-form-prompt-host {
	display: flex;
	flex-direction: column;
	min-height: 140px;
	/*
	 * The host carries the `.interactive-session` class so the shared
	 * chat input CSS (chip colors, focus borders, etc.) matches what
	 * users see in a real chat session. That class also sets
	 * `max-width: 950px; margin: auto; height: 100%` (chat.css), which
	 * is meant for the full chat panel. In our flex column it makes
	 * the host take its content's min-content width and center,
	 * collapsing the chat input to ~chip-bar width. Re-assert
	 * full-width sizing so the host fills the dialog's form column.
	 */
	width: auto;
	max-width: 100%;
	margin: 0;
	height: auto;
	align-self: stretch;
}

.automation-form-prompt-host .interactive-input-part {
	/*
	 * `.interactive-input-part` in chat.css has `margin: 0 12px`, which
	 * (combined with the default `width: auto`) is designed to inset the
	 * composer inside a wider chat panel. In our dialog the prompt host
	 * is already the form column, so the margin pushes the composer 12px
	 * past the host on each side. Its right border ends up sitting
	 * outside the dialog. Zero out the margin so the composer aligns
	 * with the other form fields.
	 */
	margin: 0;
	/* Don't let long custom-mode names or model identifiers push the
	 * modal wider than its declared max-width. */
	max-width: 100%;
	min-width: 0;
}

.automation-form-prompt-host .interactive-input-editor,
.automation-form-prompt-host .monaco-editor,
.automation-form-prompt-host .monaco-editor-background,
.automation-form-prompt-host .monaco-editor .margin {
	background-color: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
}

.automation-form-prompt-host .interactive-input-and-side-toolbar {
	/* Allow the input column to shrink below its content's preferred
	 * width so flex children (chips, custom-mode names) don't push the
	 * modal wider than its declared max-width. */
	min-width: 0;
}

/*
 * Hide chips from the embedded chat input that don't fit the automation
 * dialog's reduced surface:
 *  - "Configure Tools" (`workbench.action.chat.configureTools`,
 *    `.codicon-settings`). Tool selection is not relevant for a
 *    scheduled prompt.
 *  - "Attach context" (`workbench.action.chat.attachContext`,
 *    `.codicon-add`, the `+`). The dialog doesn't support attachments.
 *    the prompt is the only payload sent at run time.
 *  - "List MCP Servers" (`workbench.mcp.listServer`, `.codicon-server`)
 *    MCP server management belongs in the live chat surface, not in
 *    a one-off prompt definition. The action view item is custom
 *    (`MenuEntryActionViewItem`) but still renders the standard
 *    `.action-label.codicon-server` icon, so the same selector pattern
 *    matches.
 * Other chips in this toolbar use either custom action view items
 * (Model / Mode / Session pickers) or different codicons, so codicon
 * selectors are unique to the chips we want to remove. The descendant
 * selector (not `>`) matches even when the action-view-item wraps the
 * `.action-label` in an extra container (e.g. dropdown variants), which
 * keeps the rule resilient to view-item refactors. Hiding the
 * `.action-item` (not just the `.action-label`) removes the slot from
 * keyboard tab order too.
 */
.automation-form-prompt-host .chat-input-toolbar .action-item:has(.action-label.codicon-settings),
.automation-form-prompt-host .chat-input-toolbar .action-item:has(.action-label.codicon-add),
.automation-form-prompt-host .chat-input-toolbar .action-item:has(.action-label.codicon-server) {
	display: none;
}

/*
 * Suppress every inter-chip divider drawn by chat.css
 * (`.chat-input-toolbar ... .action-item + .action-item::before`) inside
 * the dialog. CSS `+` matches by DOM order regardless of `display:none`,
 * so the divider would otherwise appear as an orphan vertical line on
 * whichever visible chip follows our hidden `+`/settings items. The
 * remaining visible chips (Agent, model, mode) already have enough
 * intrinsic padding to read as separate without the divider. Dropping
 * dividers entirely is simpler and more resilient than per-pair
 * suppression rules that depend on DOM order.
 */
.automation-form-prompt-host .chat-input-toolbar .monaco-action-bar .actions-container > .action-item + .action-item::before {
	display: none;
}

/*
 * Cancel the dialog's `<ul>` indent for the chat input toolbars.
 *
 * `dialog.css:120` applies `padding-inline-start: 20px` to every `<ul>`
 * inside `.dialog-message-container` (meant to reduce the excessive
 * default indent on bulleted lists in dialog body text). The
 * `monaco-action-bar`'s `.actions-container` is rendered as a `<ul>`, so
 * the chat input's primary and secondary toolbars inherit that 20px
 * left indent. This pushes the Agent / Copilot CLI chips ~20px right of
 * the chat input's bottom-left corner.
 *
 * `actionbar.css` sets `.actions-container { padding: 0 }`, but the
 * dialog rule uses a logical property (`padding-inline-start`), which
 * cascades-after the physical shorthand and wins regardless of selector
 * specificity. Override the logical property explicitly here.
 *
 * Scoped to `.automation-form-prompt-host` so the regular chat panel
 * (which isn't inside a dialog) is unaffected. Any `<ul>`
 * elements in the dialog's actual message body text retain the
 * intended 20px indent.
 */
.automation-form-prompt-host .chat-input-toolbar .monaco-action-bar .actions-container,
.automation-form-prompt-host .chat-secondary-toolbar .monaco-action-bar .actions-container {
	padding-inline-start: 0;
	margin-left: 0;
}

/*
 * Sessions-layer workspace picker visual override.
 *
 * Two cascading sources need to be defeated to match Mode/Model:
 *
 * 1. `.sessions-chat-picker-slot.sessions-chat-workspace-picker
 *    .action-label` (sessions-layer `chatWidget.css:244-269`) sets a
 *    welcome-flow visual: label 18px, inner span 18px, icons 16px,
 *    chevron, generous padding, `color: var(--vscode-foreground)`.
 *
 * 2. `.monaco-action-bar .action-label` (actionbar.css:48) sets the
 *    base toolbar font-size to **11px**. This is what Mode/Model
 *    inherit. They don't set font-size themselves. The action bar
 *    base rule wins for their `.action-label`. The workspace picker's
 *    own sessions-layer rule (source 1) overrides that base, so we
 *    need to put the 11px back explicitly. `font-size: inherit`
 *    does NOT work because none of `.sessions-chat-picker-slot`'s
 *    ancestors carry an 11px font-size. The 11px lives on sibling
 *    `.action-label` elements via `.monaco-action-bar .action-label`,
 *    not on an ancestor we can inherit from.
 *
 * Result: match the 11px base, neutralize the welcome-flow oversizing,
 * keep the Mode/Model color (`var(--vscode-icon-foreground)`), match
 * the chip metrics from `.chat-input-toolbar .chat-input-picker-item
 * .action-label` (chat.css:1822), and hide the chevron (Mode/Model
 * don't render one).
 *
 * Scoped to `.automation-form-prompt-host` so the welcome view's
 * standalone workspace picker keeps its larger sizing.
 */
.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label {
	height: 16px;
	padding: 3px 6px;
	font-size: 11px;
	line-height: normal;
	color: var(--vscode-icon-foreground);
}

.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label .sessions-chat-dropdown-label {
	font-size: inherit;
	line-height: inherit;
}

.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label > .codicon:not(.sessions-chat-dropdown-chevron) {
	font-size: 12px;
}

/*
 * Mode and Model pickers in this toolbar don't render a dropdown
 * chevron. They are recognized as chips by their padding + hover. Hide
 * the chevron that `_renderTriggerLabel` always appends so the
 * workspace chip reads the same way.
 */
.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label .sessions-chat-dropdown-chevron {
	display: none;
}

.automation-form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.automation-form-row.automation-form-checkbox-row {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	padding-top: 10px;
	border-top: 1px solid var(--vscode-widget-border, transparent);
}

/*
 * Lay the Schedule / Time / Day controls along a single horizontal axis.
 * Each control lives in its own `.automation-form-schedule-group`
 * (label-above-control flex column). Time and Day join the row only
 * when the interval is daily or weekly; flex-wrap keeps the layout
 * stable if a translation pushes the row past the dialog width.
 */
.automation-form-row.automation-form-schedule-row {
	flex-direction: row;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
}

.automation-form-schedule-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/*
	 * Each visible group splits the schedule row equally. Hidden
	 * groups (`display: none` from `applyIntervalVisibility`) drop out
	 * of flex distribution, so:
	 *   - manual / hourly → Schedule fills 100% of the row
	 *   - daily          → Schedule + Time split 50/50
	 *   - weekly         → Schedule + Time + Day split 33/33/33
	 * `min-width: 0` lets the contained SelectBox shrink past its
	 * intrinsic content width when the row is narrow, before the
	 * row's `flex-wrap: wrap` kicks in as a final safety net.
	 */
	flex: 1 1 0;
	min-width: 0;
}

/* SelectBox container sizing. Give Schedule / Time / Day the full
 * width of their parent group (which itself flex-shares the row).
 *
 * `.monaco-select-box` ships with no intrinsic padding or height (the
 * only baked-in metrics live in the `.monaco-action-bar .action-item`
 * selector, which we're not inside of). Mirror the standalone-form
 * pattern used by the settings editor (`settingsEditor2.css:689-694`).
 * It uses `height: 26px` and `padding: 2px 6px`. This makes the dropdowns match the
 * Name InputBox above them instead of reading as toolbar widgets
 * crammed into a form. */
.automation-form-schedule-select-container {
	display: flex;
	min-width: 0;
	width: 100%;
}

.automation-form-schedule-select-container .monaco-select-box {
	height: 26px;
	padding: 2px 8px;
}

/*
 * Form-row labels read as section titles ("Name", "Schedule", "Time",
 * "Day of week", "Prompt"). Mirror the established agents
 * design-system section-label pattern (see `.overview-section
 * .section-label` at line ~734: label1 / fontWeight-medium /
 * foreground) so the labels carry visual weight as section headings
 * and clearly out-rank their controls.
 *
 * `margin-bottom` adds breathing room between the title text and
 * its control so each form row reads as a discrete section.
 */
.automation-form-label {
	font-size: var(--vscode-agents-fontSize-label1);
	font-weight: var(--vscode-agents-fontWeight-semiBold);
	color: var(--vscode-foreground);
	line-height: 1.4;
	margin-bottom: 2px;
	cursor: default;
}

.automation-form-hint {
	font-size: var(--vscode-agents-fontSize-body2, 11px);
	color: var(--vscode-descriptionForeground);
	line-height: 1.4;
	min-height: 1em;
}

.automation-form-checkbox-label {
	font-size: var(--vscode-agents-fontSize-body1, 13px);
	color: var(--vscode-foreground);
	cursor: pointer;
}

/*
 * Host for the native `InputBox` widget. The widget owns its own
 * `<input>` and styling (border, padding, focus ring); the host just
 * lets it grow to the row width.
 */
.automation-form-input-host {
	display: flex;
	width: 100%;
}

.automation-form-input-host > .monaco-inputbox {
	flex: 1 1 auto;
	min-width: 0;
}

.automation-form-input,
.automation-form-select,
.automation-form-textarea {
	font-family: inherit;
	font-size: var(--vscode-agents-fontSize-body1, 13px);
	color: var(--vscode-settings-textInputForeground, var(--vscode-input-foreground));
	background-color: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
	border: 1px solid var(--vscode-settings-textInputBorder, var(--vscode-input-border, var(--vscode-contrastBorder, transparent)));
	border-radius: 2px;
	padding: 4px 6px;
	box-sizing: border-box;
	width: 100%;
	min-height: 26px;
}

.automation-form-select {
	color: var(--vscode-settings-dropdownForeground, var(--vscode-dropdown-foreground));
	background-color: var(--vscode-settings-dropdownBackground, var(--vscode-dropdown-background));
	border-color: var(--vscode-settings-dropdownBorder, var(--vscode-dropdown-border, var(--vscode-contrastBorder, transparent)));
}

.automation-form-textarea {
	resize: vertical;
	min-height: 60px;
	line-height: 1.4;
}

.automation-form-input:focus,
.automation-form-select:focus,
.automation-form-textarea:focus {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
	border-color: var(--vscode-focusBorder);
}

.automation-form-empty {
	font-size: 12px;
	color: var(--vscode-errorForeground);
	padding: 6px 0;
}

/*
 * Folder picker. This uses the shared `WorkspacePicker` from the sessions
 * layer (see `sessionWorkspacePicker.ts`). The picker renders an
 * `<a.action-label>` chip trigger inside
 * `.sessions-chat-picker-slot.sessions-chat-workspace-picker`. We restyle
 * it to fit the dialog's compact, 13px form scale. The upstream styling
 * lives in `sessions/contrib/chat/browser/media/chatWidget.css` and is
 * sized for the new-session "hero" UI (18px font, larger chip) which is
 * too large for our modal.
 *
 * The dropdown content itself renders through `IActionWidgetService`,
 * which has its own global CSS. No overrides needed here.
 */
/*
 * Isolation + branch group: parented into the chat input's
 * `.chat-secondary-toolbar` so it sits at the bottom-right of the chat
 * input, sharing a row with `Copilot CLI | Default Approvals`.
 * `margin-left: auto` pushes the group to the right edge within that
 * flex row.
 *
 * Visual styling mirrors the new-session view's
 * `.new-chat-bottom-container` chip vocabulary (see
 * `sessions/contrib/chat/browser/media/chatWidget.css` lines 178-209):
 * 16px tall, 11px font, 12px codicons, icon-foreground color, no
 * border. The `|` divider between the Folder chip and the branch slot
 * uses the same `box-shadow: -5px 0 0 -4px var(--vscode-editorWidget-border)`
 * trick the new-session row uses to draw a 1px vertical separator
 * without adding a DOM element.
 *
 * Communicates *where* the automation will run. It is presentational only (no
 * click handler, no keyboard target).
 */
.automation-form-prompt-host .chat-secondary-toolbar .automation-form-isolation-group {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	min-width: 0;
	gap: 5px;
}

.automation-form-prompt-host .automation-form-isolation-chip,
.automation-form-prompt-host .automation-form-branch-slot {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 16px;
	padding: 3px 6px;
	font-size: 11px;
	color: var(--vscode-icon-foreground);
	background: transparent;
	border: none;
	min-width: 0;
}

.automation-form-prompt-host .automation-form-isolation-chip > .codicon,
.automation-form-prompt-host .automation-form-branch-slot > .codicon {
	font-size: 12px;
	color: var(--vscode-icon-foreground);
	flex-shrink: 0;
}

.automation-form-prompt-host .automation-form-isolation-chip {
	cursor: pointer;
	border-radius: var(--vscode-cornerRadius-small);
}

.automation-form-prompt-host .automation-form-isolation-chip:not(.automation-form-isolation-chip-disabled):hover {
	background-color: var(--vscode-toolbar-hoverBackground);
	color: var(--vscode-foreground);
}

.automation-form-prompt-host .automation-form-isolation-chip-disabled {
	cursor: default;
}

.automation-form-prompt-host .automation-form-isolation-label,
.automation-form-prompt-host .automation-form-branch-name {
	font-size: 11px;
}

.automation-form-prompt-host .automation-form-branch-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mirror the new-session `|` divider between repo-config chips:
 * `box-shadow: -5px 0 0 -4px var(--vscode-editorWidget-border)` paints
 * a 1px-wide bar in the gap to the chip's left. */
.automation-form-prompt-host .automation-form-isolation-group > .automation-form-branch-slot {
	box-shadow: -5px 0 0 -4px var(--vscode-editorWidget-border);
}

.automation-form-prompt-host .chat-secondary-toolbar .automation-form-harness-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 16px;
	padding: 3px 6px;
	font-size: 11px;
	color: var(--vscode-icon-foreground);
	background: transparent;
	border: none;
	opacity: 0.6;
	cursor: default;
}

.automation-form-prompt-host .automation-form-harness-chip > .codicon {
	font-size: 12px;
	flex-shrink: 0;
}

.automation-form-prompt-host .automation-form-harness-label {
	font-size: 11px;
}

/* Missing-branch state (no folder / no git repo / detached / empty): use
 * description-foreground + italic so it visually reads as "informational
 * placeholder, not a real ref name". */
.automation-form-prompt-host .automation-form-branch-slot.automation-form-branch-missing,
.automation-form-prompt-host .automation-form-branch-slot.automation-form-branch-missing > .codicon {
	color: var(--vscode-descriptionForeground);
}

.automation-form-prompt-host .automation-form-branch-slot.automation-form-branch-missing .automation-form-branch-name {
	font-style: italic;
}

.automations-list-widget .automations-row-folder {
	color: var(--vscode-descriptionForeground);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
}