vscode/extensions/theme-2026/themes/styles.css

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

:root {
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;

	--shadow-xs: 0 0 2px rgba(0, 0, 0, 0.06);
	--shadow-sm: 0 0 4px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 0 6px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 0 12px rgba(0, 0, 0, 0.14);
	--shadow-xl: 0 0 20px rgba(0, 0, 0, 0.15);
	--shadow-2xl: 0 0 20px rgba(0, 0, 0, 0.18);
	--shadow-hover: 0 0 8px rgba(0, 0, 0, 0.12);
	--shadow-sm-strong: 0 0 4px rgba(0, 0, 0, 0.18);
	--shadow-button-active: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-inset-white: inset 0 0 4px rgba(255, 255, 255, 0.1);
	--shadow-active-tab: 0 8px 12px rgba(0, 0, 0, 0.02);

	--backdrop-blur-sm: blur(12px);
	--backdrop-blur-md: blur(20px) saturate(180%);
	--backdrop-blur-lg: blur(40px) saturate(180%);
}

/* Stealth Shadows - shadow-based depth for UI elements, controlled by workbench.stealthShadows.enabled */

/* Activity Bar */
.monaco-workbench .part.activitybar { box-shadow: var(--shadow-md); z-index: 50; position: relative;}
.monaco-workbench.activitybar-right .part.activitybar { box-shadow: var(--shadow-md); }

/* Sidebar */
.monaco-workbench .part.sidebar { box-shadow: var(--shadow-md); z-index: 40; position: relative; }
.monaco-workbench.sidebar-right .part.sidebar { box-shadow: var(--shadow-md); }
.monaco-workbench .part.auxiliarybar { box-shadow: var(--shadow-md); z-index: 40; position: relative; }

/* Ensure iframe containers in pane-body render above sidebar z-index */
/* Commented out - may cause content to be hidden by z-index issues
.monaco-workbench > div[data-keybinding-context],
.monaco-workbench > div[data-keybinding-context] {
	z-index: 50 !important;
}
*/

/* Ensure webview containers render above sidebar z-index */
.monaco-workbench .part.sidebar .webview,
.monaco-workbench .part.sidebar .webview-container,
.monaco-workbench .part.auxiliarybar .webview,
.monaco-workbench .part.auxiliarybar .webview-container { position: relative; z-index: 50; transform: translateZ(0); }

/* Panel */
.monaco-workbench .part.panel { box-shadow: var(--shadow-md); z-index: 35; position: relative; }
.monaco-workbench.panel-position-left .part.panel { box-shadow: var(--shadow-md); }
.monaco-workbench.panel-position-right .part.panel { box-shadow: var(--shadow-md); }

.monaco-pane-view .split-view-view:first-of-type > .pane > .pane-header {
	border-top: 1px solid var(--vscode-sideBarSectionHeader-border) !important;
}

/* Sashes - ensure they extend full height and are above other panels */
.monaco-workbench .monaco-sash { z-index: 45; }
.monaco-workbench .monaco-sash.vertical { z-index: 45; }
.monaco-workbench .monaco-sash.horizontal { z-index: 45; }

.monaco-workbench.vs .activitybar.left.bordered::before,
.monaco-workbench.vs .activitybar.right.bordered::before {
	border: none;
}

/* Editor */
.monaco-workbench .part.editor { position: relative; }
.monaco-workbench .part.editor > .content .editor-group-container > .title { box-shadow: none; position: relative; z-index: 10; }
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
	box-shadow: inset var(--shadow-active-tab);
	position: relative; z-index: 5;
	border-radius: 0;
	border-top: none !important;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent) 0%,
		transparent 100%
	), var(--vscode-tab-activeBackground) !important;
}
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover:not(.active) {
	box-shadow: var(--shadow-sm);
}

/* Tab border bottom - make transparent */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container { --tabs-border-bottom-color: transparent !important; }
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { --tab-border-bottom-color: transparent !important; }

/* Title Bar */
.monaco-workbench.vs .part.titlebar { box-shadow: var(--shadow-md); }

.monaco-workbench .part.titlebar {
	position: relative;
	overflow: visible !important;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent) 0%,
		transparent 100%
	), var(--vscode-titleBar-activeBackground) !important;
}

.monaco-workbench .part.titlebar.inactive {
	background: var(--vscode-titleBar-inactiveBackground) !important;

	.command-center .monaco-action-bar,
	.command-center .actions-container,
	.agent-status-pill, .agent-status-badge {
		background-color: transparent !important;
	}
}
.monaco-workbench .part.titlebar .titlebar-container,
.monaco-workbench .part.titlebar .titlebar-center,
.monaco-workbench .part.titlebar .titlebar-center .window-title,
.monaco-workbench .part.titlebar .command-center,
.monaco-workbench .part.titlebar .command-center .monaco-action-bar,
.monaco-workbench .part.titlebar .command-center .actions-container { overflow: visible !important; }

/* Status Bar */
.monaco-workbench .part.statusbar { box-shadow: var(--shadow-md); z-index: 55; position: relative; }

/* Quick Input (Command Palette) */
.monaco-workbench .quick-input-widget {
	box-shadow: var(--shadow-xl) !important;
	border-radius: 12px; overflow: hidden;
	background-color: color-mix(in srgb, var(--vscode-quickInput-background) 30%, transparent) !important;
	backdrop-filter: var(--backdrop-blur-lg);
	-webkit-backdrop-filter: var(--backdrop-blur-lg);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
}
.monaco-workbench.vs-dark .quick-input-widget {
	border: 1px solid var(--vscode-menu-border) !important;
}
.monaco-workbench .quick-input-widget .monaco-list-rows { background-color: transparent !important; }
.monaco-workbench .quick-input-widget .quick-input-header,
.monaco-workbench .quick-input-widget .quick-input-list,
.monaco-workbench .quick-input-widget .quick-input-titlebar,
.monaco-workbench .quick-input-widget .quick-input-title,
.monaco-workbench .quick-input-widget .quick-input-description,
.monaco-workbench .quick-input-widget .quick-input-filter,
.monaco-workbench .quick-input-widget .quick-input-action,
.monaco-workbench .quick-input-widget .quick-input-message,
.monaco-workbench .quick-input-widget .monaco-list,
.monaco-workbench .quick-input-widget .monaco-list-row { border-color: transparent !important; outline: none !important; }
.monaco-workbench .quick-input-widget .monaco-inputbox { box-shadow: none !important; background: transparent !important; }
.monaco-workbench .quick-input-widget .quick-input-filter .monaco-inputbox {
	background: color-mix(in srgb, var(--vscode-input-background) 60%, transparent)!important; border-radius: 6px;
}

.monaco-workbench .quick-input-widget .monaco-list.list_id_6:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused) { background-color: color-mix(in srgb, var(--vscode-list-hoverBackground) 40%, transparent); }

/* Chat Widget */
.monaco-workbench .interactive-session .chat-input-container { box-shadow: inset var(--shadow-sm); border-radius: var(--radius-md); }
.monaco-workbench .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor,
.monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.monaco-workbench .interactive-input-part:has(.chat-editing-session > .chat-editing-session-container) .chat-input-container { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.monaco-workbench .part.panel .interactive-session,
.monaco-workbench .part.auxiliarybar .interactive-session { position: relative; }

.monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container {
	background-color: transparent !important;
}

/* Notifications */

.monaco-workbench .notifications-toasts {
	box-shadow: var(--shadow-lg);
	border-radius: var(--radius-sm);
}
.monaco-workbench .notification-toast { box-shadow: none !important; margin: 0 !important;}

.monaco-workbench .notification-toast-container {
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
}

.monaco-workbench .notification-toast-container .notification-toast {
	background-color: transparent !important;
}

.monaco-workbench .notifications-center {
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
}

.monaco-workbench .notifications-list-container,
.monaco-workbench > .notifications-center > .notifications-center-header,
.monaco-workbench .notifications-list-container .monaco-list-rows {
	background: transparent !important;
}

/* Context Menus */
.monaco-workbench .monaco-menu .monaco-action-bar.vertical { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-xl); overflow: hidden; backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); }
.monaco-workbench .context-view .monaco-menu { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-xl); }

.monaco-workbench .action-widget {
	background: color-mix(in srgb, var(--vscode-menu-background) 50%, transparent) !important;
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
}
.monaco-workbench .action-widget .action-widget-action-bar {background: transparent;}

/* Suggest Widget */
.monaco-workbench .monaco-editor .suggest-widget {
	box-shadow: var(--shadow-lg);
	border: none;
	border-radius: var(--radius-xl);
	overflow: hidden;
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
}
.monaco-workbench.vs-dark .monaco-editor .suggest-widget {
	background: color-mix(in srgb, var(--vscode-editorWidget-background) 40%, transparent) !important;
	border: 1px solid var(--vscode-editorWidget-border);
}

/* Find Widget */
.monaco-workbench .monaco-editor .find-widget {
	box-shadow: var(--shadow-hover); border: none; border-radius: var(--radius-lg);
	backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md);
	margin-top: 4px !important;
}

/* Dialog */
.monaco-workbench .monaco-dialog-box {
	box-shadow: var(--shadow-2xl);
	border: none;
	border-radius: var(--radius-xl);
	backdrop-filter: var(--backdrop-blur-lg); -webkit-backdrop-filter: var(--backdrop-blur-lg);
	background: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent) !important;
}

.monaco-workbench.vs-dark .monaco-dialog-box {
	border: 1px solid var(--vscode-dialog-border);
}

/* Peek View */
.monaco-workbench .monaco-editor .peekview-widget {
	box-shadow: var(--shadow-hover);
	border: none;
	background: var(--vscode-editor-background) !important;
	backdrop-filter: var(--backdrop-blur-sm);
	-webkit-backdrop-filter: var(--backdrop-blur-sm);
	overflow: hidden;
}
.monaco-workbench .monaco-editor .peekview-widget .head,
.monaco-workbench .monaco-editor .peekview-widget .body { background: transparent !important; }

.monaco-editor .monaco-hover {
	background-color: color-mix(in srgb, var(--vscode-editorHoverWidget-background) 60%, transparent) !important;
	box-shadow: var(--shadow-sm-strong);
	border-radius: var(--radius-lg);
	overflow: hidden;
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
}
.monaco-workbench .monaco-hover.workbench-hover, .monaco-hover.workbench-hover.compact {
	background-color: color-mix(in srgb, var(--vscode-editorHoverWidget-background) 60%, transparent) !important;
	backdrop-filter: var(--backdrop-blur-lg) !important;
	-webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
}

.monaco-workbench .defineKeybindingWidget {
	box-shadow: var(--shadow-lg);
	border-radius: var(--radius-lg);
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
}

.monaco-workbench.vs-dark .defineKeybindingWidget {
	border: 1px solid var(--vscode-editorWidget-border);
}

.monaco-workbench .chat-editor-overlay-widget, .monaco-workbench .chat-diff-change-content-widget {
	box-shadow: var(--shadow-md);
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
}

.monaco-workbench.vs-dark .chat-editor-overlay-widget, .monaco-workbench.vs-dark .chat-diff-change-content-widget
{
	border: 1px solid var(--vscode-editorWidget-border);
}
/* Settings */
.monaco-workbench .settings-editor .settings-toc-container { box-shadow: var(--shadow-sm); }

/* Welcome Tiles */
.monaco-workbench .part.editor .welcomePageContainer .tile { box-shadow: var(--shadow-md); border: none; border-radius: var(--radius-lg); }
.monaco-workbench .part.editor .welcomePageContainer .tile:hover { box-shadow: var(--shadow-hover); }

/* Extensions */
.monaco-workbench .extensions-list .extension-list-item { box-shadow: var(--shadow-sm); border: none; }
.monaco-workbench .extensions-list .extension-list-item:hover { box-shadow: var(--shadow-md); }

/* Breadcrumbs */
.monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control,

/* Input Boxes */
.monaco-workbench .monaco-inputbox,
.monaco-workbench .suggest-input-container { box-shadow: inset var(--shadow-sm); border: none; }

.monaco-inputbox .monaco-action-bar .action-item .codicon,
.monaco-workbench .search-container .input-box,
.monaco-custom-toggle {
    color: var(--vscode-icon-foreground) !important;
}

/* Chat input toolbar icons should use proper foreground color, not the muted icon.foreground */
.monaco-workbench .interactive-session .chat-input-toolbars .monaco-action-bar .action-item .codicon,
.monaco-workbench .interactive-session .chat-input-toolbars .action-label .codicon {
    color: var(--vscode-foreground) !important;
}

/* Buttons */
.monaco-workbench .monaco-button { box-shadow: var(--shadow-xs); }
.monaco-workbench .monaco-button:hover { box-shadow: var(--shadow-sm);  }
.monaco-workbench .monaco-button:active { box-shadow: var(--shadow-button-active); }

/* Todo List Widget - remove shadows from buttons */
.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button,
.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:hover,
.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:active,
.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button,
.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:hover,
.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:active {
	box-shadow: none;
}

/* Link buttons and tool call buttons - remove shadows */
.monaco-workbench .monaco-button.link-button,
.monaco-workbench .monaco-button.link-button:hover,
.monaco-workbench .monaco-button.link-button:active,
.monaco-workbench .chat-confirmation-widget-title.monaco-button,
.monaco-workbench .chat-confirmation-widget-title.monaco-button:hover,
.monaco-workbench .chat-confirmation-widget-title.monaco-button:active,
.monaco-workbench .chat-used-context-label .monaco-button,
.monaco-workbench .chat-used-context-label .monaco-button:hover,
.monaco-workbench .chat-used-context-label .monaco-button:active {
	box-shadow: none;
}

/* Dropdowns */
.monaco-workbench .monaco-dropdown .dropdown-menu { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-lg); }

/* Terminal */
.monaco-workbench.vs .pane-body.integrated-terminal { box-shadow: var(--shadow-inset-white); }

/* SCM */
.monaco-workbench .scm-view .scm-provider { box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }

/* Debug Toolbar */
.monaco-workbench .debug-toolbar {
	box-shadow: var(--shadow-lg);
	border: none;
	border-radius: var(--radius-lg);
	backdrop-filter: var(--backdrop-blur-lg) !important;
	-webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
}

.monaco-workbench .debug-hover-widget {
	box-shadow: var(--shadow-hover);
	border-radius: var(--radius-lg);
	overflow: hidden;
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
	color: var(--vscode-editor-foreground) !important;
}

.monaco-editor .debug-hover-widget .debug-hover-tree .monaco-list-rows .monaco-list-row:hover:not(.highlighted):not(.selected):not(.focused) {
    background-color: var(--vscode-list-hoverBackground);;
}

/* Action Widget */
.monaco-workbench .action-widget { box-shadow: var(--shadow-lg) !important; border-radius: var(--radius-lg); }

/* Parameter Hints */
.monaco-workbench .monaco-editor .parameter-hints-widget { box-shadow: var(--shadow-hover); border: none; border-radius: var(--radius-xl); overflow: hidden; backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); }
.monaco-workbench.vs-dark .monaco-editor .parameter-hints-widget,
.monaco-workbench.vs .monaco-editor .parameter-hints-widget { background: color-mix(in srgb, var(--vscode-editorWidget-background) 70%, transparent) !important; }

/* Minimap */
.monaco-workbench .monaco-editor .minimap { backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; }
.monaco-workbench .monaco-editor .minimap canvas { opacity: 0.85; }
.monaco-workbench.vs-dark .monaco-editor .minimap,
.monaco-workbench .monaco-editor .minimap-shadow-visible { box-shadow: var(--shadow-md); opacity: 0.85; background-color: var(--vscode-editor-background); left: 0;}

/* Sticky Scroll */
.monaco-workbench .monaco-editor .sticky-widget {
	box-shadow: var(--shadow-md) !important;
	border-bottom: none !important;
	background: color-mix(in srgb, var(--vscode-editor-background) 75%, transparent) !important;
	backdrop-filter: var(--backdrop-blur-lg) !important;
	-webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
}
.monaco-workbench.vs-dark .monaco-editor .sticky-widget {
	border-bottom: none !important;
}
.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-lines
{ background-color: transparent !important; background: transparent !important; }
.monaco-workbench.vs-dark .monaco-editor .sticky-widget,
.monaco-workbench .monaco-editor .sticky-widget-focus-preview,
.monaco-workbench .monaco-editor .sticky-scroll-focus-line,
.monaco-workbench .monaco-editor .focused .sticky-widget,
.monaco-workbench .monaco-editor:has(.sticky-widget:focus-within) .sticky-widget {
	background: color-mix(in srgb, var(--vscode-editor-background) 75%, transparent) !important;
	backdrop-filter: var(--backdrop-blur-lg) !important;
	-webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
	box-shadow: var(--shadow-hover) !important;
}

.monaco-editor .sticky-widget .sticky-line-content,
.monaco-workbench .monaco-editor .sticky-widget .sticky-line-number {
	backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
	background-color: color-mix(in srgb, var(--vscode-editor-background) 70%, transparent)
}

.monaco-workbench.vs-dark .monaco-editor .sticky-widget .sticky-line-content,
.monaco-workbench.vs-dark .monaco-editor .sticky-widget .sticky-line-number {
	background-color: color-mix(in srgb, var(--vscode-editor-background) 30%, transparent)
}

.monaco-editor .rename-box.preview {
	backdrop-filter: var(--backdrop-blur-lg) !important;
    -webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
    box-shadow: var(--shadow-hover) !important;
	border: 1px solid var(--vscode-editorWidget-border);
}


/* Notebook */
.monaco-workbench .notebookOverlay .monaco-list .cell-focus-indicator { box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator { box-shadow: var(--shadow-md); }

/* Inline Chat */
.monaco-workbench .monaco-editor .inline-chat { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-xl); }

/* Command Center */
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center {
	box-shadow: inset var(--shadow-sm) !important;
	border-radius: var(--radius-lg) !important;
	backdrop-filter: var(--backdrop-blur-md);
	-webkit-backdrop-filter: var(--backdrop-blur-md);
	overflow: visible !important;
}
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:hover {
	box-shadow: inset var(--shadow-sm) !important;
}

.monaco-workbench .part.titlebar .command-center .agent-status-pill {
	box-shadow: inset var(--shadow-sm);
}
.monaco-workbench .part.titlebar .command-center .agent-status-pill:hover {
	box-shadow: none;
	background-color: transparent;
}

.monaco-dialog-modal-block .dialog-shadow {
	border-radius: var(--radius-xl);
}

.monaco-workbench .unified-quick-access-tabs {
	background: transparent;
}

.monaco-workbench .quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
	border-top-width: 0;
}

/* Quick Input List - use descriptionForeground color for descriptions */
.monaco-workbench .quick-input-list .monaco-icon-label .label-description {
	opacity: 1;
	color: var(--vscode-descriptionForeground);
}

/* Remove Borders */
.monaco-workbench.vs .part.sidebar { border-right: none !important; border-left: none !important; }
.monaco-workbench.vs .part.auxiliarybar { border-right: none !important; border-left: none !important; }
.monaco-workbench .part.panel { border-top: none !important; }
.monaco-workbench.vs .part.activitybar { border-right: none !important; border-left: none !important; }
.monaco-workbench.vs .part.titlebar { border-bottom: none !important; }
.monaco-workbench.vs .part.statusbar { border-top: none !important; }
.monaco-workbench .pane-composite-part:not(.empty) > .header { border-bottom: none !important; }