chatInput.css

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

.new-chat-input-container {
	width: 100%;
	max-width: 800px;
	margin-top: 12px;
	box-sizing: border-box;
	display: none;
}

/* Ensure the input editor fits properly */
.new-chat-input-container .interactive-input-part {
	margin: 0;
	padding: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.new-chat-input-container .interactive-input-part .monaco-editor {
	min-height: 0;
}

.new-chat-input-container .interactive-input-part .monaco-editor .view-lines {
	min-height: 0;
}

.new-chat-input-container .chat-input-container {
	overflow: hidden;
	border-color: var(--vscode-agentsChatInput-border);
}

.new-chat-input-area {
	position: relative;
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
	border: 1px solid var(--vscode-agentsChatInput-border);
	border-radius: 8px;
	background-color: var(--vscode-agentsChatInput-background);
	color: var(--vscode-agentsChatInput-foreground);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.new-chat-input-area:focus-within {
	border-color: var(--vscode-agentsChatInput-focusBorder, var(--vscode-focusBorder));
}

.new-chat-input-area .monaco-editor .ghost-text-decoration {
	color: var(--vscode-agentsChatInput-placeholderForeground);
}

.chat-input-picker-item .action-label.disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

/* Height constraints are driven by MIN_EDITOR_HEIGHT / MAX_EDITOR_HEIGHT in newChatViewPane.ts */
.sessions-chat-editor {
	padding: 2px 10px 0 10px;
	flex-shrink: 1;
}

.sessions-chat-editor .monaco-editor,
.sessions-chat-editor .monaco-editor .overflow-guard,
.sessions-chat-editor .monaco-editor-background {
	background-color: transparent !important;
	border-radius: 8px 8px 0 0;
}

/* Toolbar */
.sessions-chat-toolbar {
	display: flex;
	align-items: center;
	padding: 4px 6px 6px 6px;
	gap: 4px;
	color: var(--vscode-icon-foreground);
}

.sessions-chat-toolbar-spacer {
	flex: 1;
}

/* Model picker - uses workbench ModelPickerActionItem */
/* Session config toolbar (mode, model pickers via MenuWorkbenchToolBar) */
.sessions-chat-config-toolbar {
	display: flex;
	align-items: center;
	min-width: 0;
	overflow: hidden;
}

.sessions-chat-config-toolbar .monaco-toolbar {
	height: auto;
	min-width: 0;
	overflow: hidden;
}

.sessions-chat-config-toolbar .monaco-action-bar,
.sessions-chat-config-toolbar .monaco-action-bar .actions-container {
	min-width: 0;
	overflow: hidden;
}

.sessions-chat-config-toolbar .monaco-action-bar .action-item {
	display: flex;
	align-items: center;
	min-width: 30px;
	overflow: hidden;
}

/* Prevent the mode picker from shrinking so the model picker label
 * ellipsizes first rather than the mode picker collapsing to icon-only. */
.sessions-chat-config-toolbar .monaco-action-bar .action-item:has(.sessions-chat-dropdown-label) {
	flex-shrink: 0;
}

.sessions-chat-config-toolbar .action-label {
	display: flex;
	align-items: center;
	height: 16px;
	padding: 3px 1px 3px 7px;
	background-color: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	touch-action: manipulation;
	color: var(--vscode-icon-foreground);
	white-space: nowrap;
	min-width: 30px;
	overflow: hidden;
}

.sessions-chat-config-toolbar .action-label:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
	color: var(--vscode-foreground);
}

.sessions-chat-config-toolbar .action-label,
.sessions-chat-config-toolbar .action-label .chat-input-picker-label {
	font-size: 11px;
}

/* Allow long labels (e.g. the model picker name) to ellipsize when space is tight */
.sessions-chat-config-toolbar .action-label .chat-input-picker-label {
	margin-left: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* When the picker has no leading icon (e.g. model picker), drop the icon-to-label gap. */
.sessions-chat-config-toolbar .action-label .chat-input-picker-label:first-child {
	margin-left: 0;
}

.sessions-chat-config-toolbar .monaco-action-bar .action-item .action-label > .codicon {
	font-size: 12px;
	flex-shrink: 0;
	/* Override the base .monaco-action-bar .action-item .codicon { width:16px; height:16px }
	 * so the leading icon sizes naturally to its font-size, matching the bottom-row pickers. */
	width: auto;
	height: auto;
}

.sessions-chat-config-toolbar .monaco-action-bar .action-item .action-label > .codicon-chevron-down {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	margin-left: 2px;
	line-height: 1;
	width: 12px;
	height: 12px;
}

/* Spacing between action items inside the chat input config toolbar (mode + model picker) */
.sessions-chat-config-toolbar .monaco-action-bar .actions-container {
	gap: 4px;
}

/* Delightful gradient styling for the chat send (submit) button. The button
	is filled at rest with a slowly rotating multi-color conic gradient using
	the same palette as the working-state border, and emits a quick colorful
	pulse on click. */
@property --chat-send-button-anim-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 135deg;
}

@keyframes chat-send-button-spin {
	from {
		--chat-send-button-anim-angle: 135deg;
	}

	to {
		--chat-send-button-anim-angle: 495deg;
	}
}

@keyframes chat-send-button-color-cycle {
	0%,
	100% {
		background-color: color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor1) 60%, var(--vscode-input-background));
	}

	33% {
		background-color: color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor2) 60%, var(--vscode-input-background));
	}

	66% {
		background-color: color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor3) 60%, var(--vscode-input-background));
	}
}

@keyframes chat-send-button-pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.3);
	}
}

/* Send button - wraps a Button widget */
.sessions-chat-send-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 4px;
}

.sessions-chat-send-button .monaco-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	min-width: 22px;
	padding: 0;
	border-radius: 4px;
	color: var(--vscode-icon-foreground);
	background: transparent;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition: background-color 250ms ease, color 250ms ease;
}

.sessions-chat-send-button .monaco-button.disabled {
	cursor: default;
}

/* Focus indicator drawn on the wrapper so it sits cleanly around the
	22x22 button surface (the inner Button widget doesn't draw its own
	focus border). */
.sessions-chat-send-button:has(.monaco-button:not(.disabled):focus-visible) {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: 1px;
}

/* Suppress the inner button's default focus outline so it doesn't double up
	with the wrapper outline above. */
.sessions-chat-send-button .monaco-button:focus,
.sessions-chat-send-button .monaco-button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.monaco-workbench .sessions-chat-send-button .monaco-button.codicon[class*='codicon-']::before,
.monaco-workbench .sessions-chat-send-button .monaco-button .codicon[class*='codicon-']::before {
	/* Optical alignment: nudge arrow glyph 1px left to visually center it. */
	display: inline-block;
	transform: translateX(-0.5px);
}

/* Ensure no underline / link decoration ever shows under the codicon glyph
	(the button is rendered as an <a> tag). */
.monaco-workbench .sessions-chat-send-button a.monaco-button,
.monaco-workbench .sessions-chat-send-button a.monaco-button:hover,
.monaco-workbench .sessions-chat-send-button a.monaco-button:focus,
.monaco-workbench .sessions-chat-send-button a.monaco-button:active,
.monaco-workbench .sessions-chat-send-button a.monaco-button.disabled {
	text-decoration: none !important;
}

/* Idle: fill the entire button with a slowly rotating conic gradient (no
	border ring).

	Colors are darkened (60% mixed with input background) so the gradient
	reads as a calm fill rather than a saturated accent, and the conic stops
	are asymmetric so the fill has a clear head and tail rather than
	mirroring around the mid-point. */
.sessions-chat-send-button .monaco-button:not(.disabled) {
	background: conic-gradient(from var(--chat-send-button-anim-angle) at 0% 0%,
			color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor1) 60%, var(--vscode-input-background)) 0deg,
			color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor2) 60%, var(--vscode-input-background)) 90deg,
			color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor3) 60%, var(--vscode-input-background)) 200deg,
			color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor1) 60%, var(--vscode-input-background)) 360deg);
	color: var(--vscode-button-foreground);
	animation: chat-send-button-spin 8s linear infinite;
	transition: box-shadow 120ms ease;
}

/* Hover/focus: subtle dark overlay to match standard toolbar button hover
	feedback. Uses an inset box-shadow so the rotating gradient background is
	preserved underneath. */
.sessions-chat-send-button:has(.monaco-button:not(.disabled):hover) .monaco-button,
.sessions-chat-send-button:has(.monaco-button:not(.disabled):focus-visible) .monaco-button {
	box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12);
}

/* Click: outward color pulse on the wrapper. */
.sessions-chat-send-button:has(.monaco-button:not(.disabled):active)::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 6px;
	background: conic-gradient(from 135deg,
			var(--vscode-chat-inputWorkingBorderColor1),
			var(--vscode-chat-inputWorkingBorderColor2),
			var(--vscode-chat-inputWorkingBorderColor3),
			var(--vscode-chat-inputWorkingBorderColor2),
			var(--vscode-chat-inputWorkingBorderColor1));
	pointer-events: none;
	animation: chat-send-button-pulse 400ms ease-out forwards;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sessions-chat-send-button .monaco-button:not(.disabled),
	.sessions-chat-send-button:has(.monaco-button:not(.disabled):active)::after {
		animation: none;
	}
}

/* Loading spinner in toolbar */
.sessions-chat-loading-spinner {
	display: none;
	width: 12px;
	height: 12px;
	margin-right: 4px;
	border: 1.5px solid var(--vscode-icon-foreground);
	border-top-color: transparent;
	border-radius: 50%;
	animation: sessions-chat-spin 0.8s linear infinite;
	opacity: 0.6;
	flex-shrink: 0;
}

.sessions-chat-loading-spinner.visible {
	display: block;
}

@keyframes sessions-chat-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Attach row (pills only, above editor, inside input area) */
.sessions-chat-attach-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 4px 6px 0 6px;
}

.sessions-chat-attach-row:has(.sessions-chat-attached-context:empty) {
	display: none;
}

/* Attach context button */
.sessions-chat-attach-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 4px;
	cursor: pointer;
	color: var(--vscode-icon-foreground);
	background: transparent;
	border: none;
	outline: none;
}

.sessions-chat-attach-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.sessions-chat-attach-button:focus-visible {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.monaco-workbench .sessions-chat-attach-button .codicon[class*='codicon-'] {
	font-size: 14px;
}

/* Attached context container */
.sessions-chat-attached-context {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.sessions-chat-attached-context:empty,
.sessions-chat-attached-context[style*="display: none"] {
	display: none !important;
}

/* Attachment pills */
.sessions-chat-attachment-pill {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	font-size: 11px;
	padding: 0 4px 0 0;
	border: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent));
	border-radius: 4px;
	height: 18px;
	max-width: 200px;
	width: fit-content;
}

.sessions-chat-attachment-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sessions-chat-attachment-pill .codicon {
	font-size: 14px;
	flex-shrink: 0;
	padding: 0 3px;
}

.sessions-chat-attachment-pill .monaco-icon-label {
	gap: 4px;
}

.sessions-chat-attachment-pill .monaco-icon-label::before {
	height: auto;
	padding: 0 0 0 2px;
	line-height: 100% !important;
	align-self: center;
}

.sessions-chat-attachment-pill .monaco-icon-label .monaco-icon-label-container {
	display: flex;
}

.sessions-chat-attachment-pill .monaco-icon-label .monaco-icon-label-container .monaco-highlighted-label {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sessions-chat-attachment-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	color: var(--vscode-descriptionForeground);
	margin-left: 4px;
}

.sessions-chat-attachment-pill:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.sessions-chat-attachment-remove .codicon {
	font-size: 12px;
	padding: 0;
}

.sessions-chat-attachment-remove:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

/* Drag and drop */
.sessions-chat-dnd-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: none;
	z-index: 10;
	background-color: var(--vscode-sideBar-dropBackground, var(--vscode-list-dropBackground));
}

.sessions-chat-dnd-overlay.visible {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sessions-chat-dnd-overlay .attach-context-overlay-text {
	padding: 0.6em;
	margin: 0.2em;
	line-height: 12px;
	height: 12px;
	display: flex;
	align-items: center;
	text-align: center;
	background-color: var(--vscode-sideBar-background, var(--vscode-editor-background));
}

.sessions-chat-dnd-overlay .attach-context-overlay-text .codicon {
	height: 12px;
	font-size: 12px;
	margin-right: 3px;
}

/* --- Chat input notification in the new-session homepage --- */

/* Hide the container when no notification is active */
.new-chat-input-container > .chat-input-notification-container:not(.has-notification) {
	display: none;
}

.new-chat-input-container > .chat-input-notification-container .chat-input-notification {
	padding: 12px 16px;
	box-sizing: border-box;
	border: 1px solid var(--vscode-input-border, transparent);
	border-bottom: none;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Severity variants */
.new-chat-input-container > .chat-input-notification-container .chat-input-notification.severity-info {
	border-color: var(--vscode-focusBorder);
	background-color: color-mix(in srgb, var(--vscode-focusBorder) 6%, var(--vscode-editorWidget-background));
}

.new-chat-input-container > .chat-input-notification-container .chat-input-notification.severity-warning {
	border-color: var(--vscode-editorWarning-foreground);
	background-color: color-mix(in srgb, var(--vscode-editorWarning-foreground) 6%, var(--vscode-editorWidget-background));
}

.new-chat-input-container > .chat-input-notification-container .chat-input-notification.severity-error {
	border-color: var(--vscode-editorError-foreground);
	background-color: color-mix(in srgb, var(--vscode-editorError-foreground) 6%, var(--vscode-editorWidget-background));
}

/* Remove the top border-radius from the input area when a notification is visible */
.new-chat-input-container > .chat-input-notification-container.has-notification + .new-chat-input-area {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
}